Merancang Website Pribadi2

5/14/2018 Merancang Website Pribadi2 - slidepdf.com

http://slidepdf.com/reader/full/merancang-website-pribadi2 1/26

Tutorial Merancang Website Pribadi

MERANCANG

WEBSITE PRIBADIby Heru W

by [email protected] 51




MERANCANG WEBSITE PRIBADI

angkah awal yang perlu diperhatikan dalam membuat website adalah merancang

dahulu seperti apa website yang ingin kita buat tersebut. Tentu disesuaikandengan fungsi website tersebut, misalnya sebagai website pribadi.LUntuk membuat sebuah aplikasi website, minimal anda sudah mempunyai gambaran

pasti tentang apa yang akan anda lakukan sehingga proses pembuatannya akan lebih

tertata berdasarkan rancangan yang telah disusun, walaupun tidak menutup

kemungkinan di tengah jalan anda melakukan perubahan

MERENCANAKAN ISI WEBSITE

Berikut ini akan diberikan contoh salah satu website pribadi dengan isi sebagai berikut:

•

Halaman Utama (index)o Digunakan sebagai halaman Homepage yang akan diakses ketika user

membuka website kita

o Di halaman terdapat sedikit penjelasan isi tiap-tiap halaman website

lainnya.

• Biodata

o Digunakan untuk menampilkan biodata kita

• Galeri Foto

o Digunakan untuk menampilkan foto-foto yang hendak anda tampilkan di

website anda.

• Cerita

o Digunakan untuk menampilkan baik itu artikel, tulisan, atau cerita yang

telah dibuat

MERENCANAKAN LAYOUT WEBSITE

Setelah menentukan isi website sekarang kita akan menentukan bagaimana layoutnya.

Secara umum, bentuk layout sebuah website adalah sebagai berikut:





Gambar 1 : Layout website standart

Seperti terlihat pada gambar bahwa secara sederhana website akan terdiri dari

identitas(header) yang akan berupa nama kita, menu, kemudian pada sebelah kiri

digunakan untuk menampilkan link, di tengah menampilkan isi websitenya dan dibawah

digunakan untuk menampilkan footer. Sebaiknya semua halaman website yang akan

dibuat menggunakan bentuk layout yang sama.

MEMPERSIAPKAN BAHAN

Bahan-bahan yang akan kita gunakan untuk membuat website pribadi disini

menggunakan dua buah elemen yaitu :

• Bahan Tulisan.

o Biodata : sebaiknya kita susun terlebih dahulu. Bisa secara singkat atau

juga dapat berbentuk seperti Curiculum Vitae. Anda bisa langsung

mengetikkannya di Macromedia Dreamweaver MX 2004 langsung atau

anda ketik dulu menggunakan MS Word.

o Cerita : Isinya bisa berupa artikel, tutorial, tulisan ataupun apapun.

Sebaikknya bahan tulisan ini Anda Ketikkan terlebih dahulu. Bisa lewat

Macromedia Dreamweaver MX 2004 atau di MS Word.

• Gambar

Gambar-gambar yang perlu disiapkan adalah sebagai berikut :

o Banner Identitas (Header) : digunakan untuk mengisi bagian atas atas

yang berisi nama kita.

o Tombol-tombol menu : digunakan sebagai menu yang berbentuk

gambar sehingga website akan terlihat lebih cantik.





o Foto-foto : Karena kita mempunyai sebuah halaman geleri foto, maka

tentu saja kita harus mempersiapkan semua fotonya.

o Gambar unik : Apabila anda mempunyai gambar yang unik dan lucu,

bisa saja dimasukkan dalam website agar website menjadi menarik.

Untuk semua gambar yang disertakan dalam sebuah web, sebaiknya berformat

GIF, JPEG, atau PNG agar dapat diakses lebih cepat. Gambar yang berukuran

besar akan lebih baik jika dipecah-pecah sebagai susunan gambar-gambar kecil.

Setelah semua gambar disiapkan, kumpulkanlah semuanya dalam sebuah folder

gambar.

MENATA FILE DAN FOLDER

Dengan menata file dan folder secara baik dalam folder tertentu akan memudahkan

pengorganisasian data. Misalnya anda membuat folder di C://my document dengan

nama websiteku

MENENTUKAN ROOT FOLDER

Root Folder disini diartikan sebagai folder yang menampung semua data dan subfolder

di dalamnya. Root Folder bisa diartikan sebagai folder tertinggi. Dengan adanya Root

folder ini, maka semua file dan folder harus diatur dan dimasukkan dalam root folder.

Jadi sebelum membuat web, buatlah folder ditempat dan dengan nama yang mudah

anda kenali. Seperti contoh diatas anda telah membuat folder websiteku di C://my

document, ini berarti juga anda sudah membuat root folder anda dengan nama

websiteku.

MEMBUAT HEADER DAN MENU

Setelah anda membuat sketsa bentuk web anda dan anda sudah menentukan root

foldernya. Kini dengan berpatokan pada skets web anda, mulailah membuat header dan

menu. Sebelumnya bukalah program Adobe Photoshop 7. dan kemuadian ikutilah

langkah-langkah berikut :

1. Buat file baru dengan cara memilih menu File | New, maka muncul tampilan

form yang perlu anda isi. Seperti tampak pada gambar 2. isikanlah width : 780

pixels, height : 150 pixels, resolution 72 pixels/inc, mode RGB Colordan content : white. Dan kemudian klik OK.

Gambar 2. form new file





2. Maka tampilah area kerja anda seperti tampak pada gambar 3. untuk

memperluas area kerja agar lebih leluasa click tombol maximize.

Gambar 3. area kerja

• Buatlah background untuk header dengan men-drag Gradient Tool dari atas ke

bawah. Tetapi dengan catatan bahwa anda harus menset warna klik setForeground color : #FF9900, Set background color : #FFFFFF. Lihat

gambar 14. Bila jadi, nanti akan tampil area header gradasi dari warna orange

menjadi putih seperti pada gambar dibawah :

gambar 4. background header


maximize




Gambar 5. penggunaan gradient tool

3. Kemudian anda namai web anda dengan menggunakan horizontal type tool,

ketikkan tulisan x-web dengan jenis huruf Arial Black, jenis italic dengan

besar 60 pt. Seperti tampak pada gambar 6. berikut :

gambar 6. penggunaan horizontal type tool

4. masih bekerja di layer x-web perhias tulisan x-web dengan memberikan efex

stroke dan drop shadow, yaitu dengan cara clik menu layer | Layer style |

stroke, maka akan tampil panel style seperti gambar 7. Tapi jangan lupa amati


Gradient Tool

Arah DragForeground Color

Background Color

Arial Black italic 60 pt

Smooth

Horizontal type tool

Layer x-web




perubahan tulisan. Bila tulisan tidak kelihatan geser panel ketempat lain. Beri

tanda check juga untuk drop shadow

gambar 7. layer style

5. Kalau sudah klik tombol OK

6. kemudian dengan horizontal type tool buat tulisan my personal site.

Hingga terbentuk tampilan seperti berikut:

gambar 8. tulisan my personal site

7. Sekarang tiba saatnya kita untuk membuat menu. Tapi sebelumnya anda harus

membuat layer baru dengan cara pilih menu Layer | New | Layer kemudian

akan muncul panel layer klik saja OK.

8. Kemudian dengan bantuan Rectanguler Marque Tool buatlah kotak seperti

gambar 8, yaitu dengan cara ambil titik permulaan (pojok kiri atas) kemudian

anda drag ke kanan bawah:

gambar 9. penggunaan Rectanguler Marque Tool


Warna bisa diubah-ubah. Ini

berpengaruh pada

warna stroke

stoke

Drop shadow

Bisa digeser-geser

Berpengaruh pada

ketebalan dan ukuran




9. Dengan mempergunakan Paint Bucket Tool warnai kotak tersebut dengan

warna orange. Seperti tampak gambar berikut :

Gambar 10. Penggunaan Paint Bucket Tool

10. Seteah anda warnai hilangkan seleksi kotak tersebut dengan memilih menu

Select | Deselect atau menekan tombol Ctrl dan D secara bersama sama.

11. Kemudian dengan menggunakan Horizontal Type Tool (T) buat tulisan untuk

menu, antara lain : Home | Biodata | Galery | Cerita, tapi jangan lupa

untuk merubah jenis hurufnya : arial dan warna (set the text color) dengan

warna putih hingga nampak hasilnya seperti ini :

Gambar 11. pembuatan menu

12. Setelah itu, header yag kita buat sudah jadi. Eit…. tunggu dulu, simpan file ini

dengan nama header.psd (untuk sewaktu-waktu diubah) ! kemudian kita harus

membagi-bagi gambar tersebut menjadi beberapa bagian antara lain : header

dengan menu. Caranya:

Buat garis Bantu, dengan cara menarik Rulers yang ada di kiri area

kerja ke tempat yang kita inginkan (catatan : bila Rulers belum aktif,

anda bisa mengaktifkan dengan pilih menu View | Rulers) agar anda

paham anda biss melihat gambar 12 berikut


Paint bucket tool

Arial Set the text color18 ptReguler




Gambar 12. cara membuat garis bantu

Lakukan hingga tampak seperti gambar 13. (untuk membuat garis

bantu horizontal anda dapat melakukannya dengan men-drag rulers

yang berada diatas menuju ke bawah/tempat yang diinginkan)

Gambar 13. sketsa pemotongan gambar

Dan saatnya kita memotong-motong gambar yang sudah anda buat

tadi. Jangan lupa disimpan dulu boss !!! . klik tombol Jump to

ImageReady (lihat gambar 13). Tapi sebelumnya anda harus

menganilasa dulu gambar anda tersebut. Kalau gambar itu

diimplementasikan sebagai objek table, maka gambar tersebut

menempati 1 buah table dengan 6 buah kolom dan 2 buah baris

(ingat baik-baik berapa jumlah kolom dan baris, karena ini nanti sangat

diperlukan di M. Dreamweaver MX 2004). Kalo anda merasa sudah

hafal/atau sudah anda catat lanjutkan dengan menekan tool Jump to

ImageReady


Drag

Rulers

Garis bantu

Jump to ImageReady




Tunggu beberapa saat akan muncul program Adobe ImageReady,

program ini di aplikasi pembuatan web kali ini digunakan untuk

memotong gambar. Lihat gambar berikut :

Gambar 14. Adobe ImageReady

Agar area kerja anda lebih bebas, luaskan area kerja anda dengan

meng-klik bar maximize.

Lakukan slice terhadap gambar paling kiri atas dengan klik angka 01 ke

bawah (perhatikan arah tiap anak panah). Perhatikan gambar berikut :

Gambar 15. arah penggunaan slice tool

Lakukan hingga pada area tulisan cerita (jangan sampai ada yang

ketinggalan atau melebihi garis bantu pada masing-masing area) kalau

semua sudah ter-slice maka akan terlihat seperti ini:

Gambar 16. Slice sudah di aplikasikan pada semua area image


maximize

Slice Tool

Slice Tool




Kemudian saatnya kita untuk menyimpan pecahan gambar kita menjadi

image yang siap kita jadikan sebagai header. Caranya : pilih menu File

| Save Optimize As.. akan muncul tampilan seperti berikut:

gambar 17. Save Optimezed As

Pilih tempat menyimpannya (Save In) di dalam root folder kita. Biarkan

File name-nya tetap header, save as type-nya pilihlah yang Image

Only(*.gif).

Kemudian tekan tombol save . secara otomatis gambar tersebut akan

terpecah menjadi duabelas gambar yaitu header_01.gif s/d

header_12.gif dan tersimpan didalam folder images di dalam root

folder kita. Jadi deh file image untuk header .

13. File untuk header sudah jadi tutup aplikasi adobe ImageReady. Dan sekarang

bukalah program Macromedia Dreamweaver MX 2004.

MEMBUAT SITE DEFINITION

Sebelum memulai membuat sebuah site baru tentunya harus mendefinisikan site yang

akan dibuat.

Adapun cara pembuatan site baru pada program aplikasi Macromedia Dremaweaver MX

2004 adalah sebagai berikut:1. Sebelum memulai sebuah dokumen baru biasanya akan muncul sebuah

tampilan Start Page untuk memilih apakah akan membuat dokumen baru,

dokumen lama, mmembuat dokumen dari contoh yang telah disediakan. Atau

membuat site baru.


Image Only

Save in




Gambar 18 : Start Page

2. Untuk membuat site baru, kliklah link Dreamweaver Site pada Start Page

yang kemudian mencul jendela baru seperti tampak pada gambar 19.

3. Pada kotak “What would you like to name your site?” isikanlah dengan

nama atau identitas situs yang Anda buat. Misalnya : “Websiteku”

Gambar 19 : Site Definition

4. Klik tombol Next. Dialog berikutnya adalah menentukan apakah website yang

akan dibuat menggunakan script server side atau tidak seperti gambar 20.

untuk saat ini pilih saja tidak, lanjutkan klik tombol Next.

5. Tahap berikutnya adalah menentukan lokasi penempatan file. Disini akan

menetukan dua hal, yaitu : yang pertama kita menentukan apakah kita akan

membuat website dalam komputer kita atau diletakkan dijaringan komputer

lokal yang sudah ada.. kemuadian yang kedua adalah kita akan menentukan





pada folder mana semua file tersebut akan ditempatkan seperti pada gambar

21.

6. Pada dialog tersebut pilihlah option Edit local Copies on my machine, then

upload to server when ready dan kemudian untuk menentukan foldernya,secara default Macromedia dreamweaver MX 2004 akan menentukan folder

yang disarankan seperti yang tertulisakan pada kotak isiannya. Akan tetapi anda

bisa memilih sendiri tempat mana yang anda pilih dengan meng-klik ikon folder

di sebelah kanan kotak isian sehingga akan muncul jendela baru seperti

gambar 22.

Gambar 20 : Pemilihan pengunaan Script server side

Gambar 21 : Pemilihan Letak Folder





Gambar 22 : Pemilihan Letak Folder

7. Setelah letak folder ditentukan, berikutnya adalah menentukan metode transfer

file ke komputer server lihat gambar 23.

Gambar 23 : Metode transfer

Ada beberapa pilihan didalamnya yaitu:

• None

• FTP

• Local/Network

• RDS

• SourceSafe Database

• WebDAV

Apabila tidak memiliki koneksi ke internet di komputer . maka pilihan None

lebih disarankan, namun apabila memilki koneksi ke internet, maka pilihan FTP

lebih disarankan.

8. Pilihlah yang None, kemudian klik tombol Next.





9. Akan muncul jendela baru. Pada tampilan ini tidak ada parameter yang harus

diisi. Ini merupakan kesimpulan dari semua setting yang anda isikan

sebelumnya. Lihat gambar 24. dan klik tombol Done.

Gambar 24 : Tampilan hasil penyetingan

10. Setelah selesai, maka akan terbuka dokumen baru yang merupakan hasil dari

berbagai macam tahapan yang tealh dilakukan sebelumna seperti yang

terlihat pada gambar 25.

Gambar 25 : Tampilan Site baru





11. Untuk memulai sebuah dokumen baru dapat dilakukan dengan klik pada Start

Page tulisan HTML di Create New --> HTML. Dokumen baru ini langsung

dapat anda gunakan untuk memulai mendesain website. Lihat gambar 10.

12. Setelah anda seleseai membuat halaman website , maka semua dokumen akantersimpan pada folder yang telah ditentukan sebelumnya. Untuk

memastikannya klik pada menu bar File --> Save As. Pada halaman yang

anda buat pertama kali ini simpan dengan nama file loyout.htm

Gambar 26 : Tampilan dokumen baru





MEMULAI PEMBUATAN

Setelah semua persiapan sudah beres , sekarang dapat memulai membuat sebuah

website pribadi yang kita inginkan. Saran awal sebelum membuat sebuah web alangkah

baiknya anda sering melihat web-web yang sudah online di internet sehingga kita akan

dapat memilki cukup banyak referensi yang membuat website kita nantinya menjadi

lebih menarik bagi user yang akan mengkasesnya.

Contoh yang akan diberikan dalam tutorial ini hanyalah contoh web yang sederhana,

anda bisa mengembangkannnya bila sudah mencoba dan mengerti.

Web yang akan kita coba untuk membuatnya adalah tampilan seperti tampak pada

gambar 12.

Gambar 27. tampilan web

MENYATUKAN DESAIN WEB, GAMBAR, DAN TEXT DENGAN MACROMEDIA

DREAMWEAVER MX 2004.

Membuat Loyout

Langkah pertama untuk membuat website, sebaiknya buat layoutnya dulu untuk

memudahkan langkah-langkah berikutnya. pada layout yang dicontohkan di bawah ini,

kita akan menggunkan batuan tabel sehinnga proses pembuan akan menjadi lebih

mudah.





Gambar 23. Web Loyout.

Adapun cara membuatnya adalah sebagai berikut:

• Yakinkan anda masih bekerja di file loyout.htm

• Setting halaman layout dengan meilih menu Modify | Page Properties, akan

muncul tampilan seperti berikut :

Gambar 24 : Page Properties

• Pilihlah Page font : Verdana, Arial, Helvetica, sans-serif, size : 10 pixels, text

color: #000000, left margin, top margin, right margin dan botton

margin dengan: 0 pixels. Kemudian klik OK





• Buat sebuah table header melalui menu Insert | Table dengan parameter,

Rows : 2, Column : 6, table width : 780 pixels, (ingat berapa kolom dan

baris di dalam header ) Border thicknes : 0, Cell padding : 0, Cellspacing

: 0.

Gambar 25. insert table

• Klik OK maka akan tampil table seperti berikut :

Gambar 26 : Tampilan tabel





• Kemudian bukalah folder image yang ada di sebelah kanan area kerja anda.

Kemudian klik dan drag file header_01.gif di dalam folder image ke kolom 1

baris 1 di dalam table, di area kerja anda. Lihat gambar berikut dan perhatikan

arah anak panah (menceritakan arah clik and drag)

Gambar 27. arah klik dan drag

•

Bila nanti sudah anda klik dan drag semua file header tersebut maka akantampak seperti berikut :

Gambar 28. tampilan header





• Kalu sudah seperti itu simpan file tersebut kembali.

• Sekarang anda tinggal membuat bagian link dan isi untuk web anda. Caranya

clik table header tersebut hingga terseleksi seperti ini:

Gambar 29. seleksi table

• Kemudian tekan tombol panah kekanan pada keyboard dan kemudian enter

untuk pindah ke baris baru di bawah tabel

• Kemudian melalui menu insert | Tables buat table dengan parameter Rows :

1, Column : 2, table width : 780 pixels, Border thicknes : 0, Cell

padding : 0, Cellspacing : 0. maka akan tampil seperti berikut:

Gambar 30. area link dan isi


terseleksi

Untuk link Untuk isi




• Simpan file kembali.

• Kemudian kita sebelum tahap membuat isi dan link kita harus membuat link

untuk menu yang berada di header caranya : Klik gambar/tulisan home yang

ada di header. Kemudian lihatlah di properties halaman bagian bawah. Adatulisan link, masukkan index.htm. lihat gambar !

Gambar 31. membuat link internal

• Lakukan juga pada tombol biodata, gallery dan cerita dengan memasukkan link

sebagai berikut :

o Tombol home index.htm

o Tombol biodata biodata.htm

o Tombol gallery gallery.htm

o Tombol cerita cerita.htm

• Simpan kembali halaman layout.htm ini


Tombol home

index.htm




Membuat tampilan link bagian kiri

Gambar 32. properties top

• Sebelum anda mebuat link pada bagian kiri (yang rencananya berisi link ke

alamat web terkenal) anda sebaiknya merubah properties keadaan kursor di

baris table. Yaitu dengan cara klik pada baris yang akan diisi content kemudianlihat di properties, cari tulisan vert, ganti menjadi top. [Fungsinya untuk

menempatkan tampilan text atau table content bias berada di bagian atas baris]

lihat gambar 32. ini juga berlaku untuk baris-baris yang lain.

• Tetap di kolom link masukkan table dengan properties row: 5 , columns: 1,

table width: 180, cell padding: 4, border tickness dan cell spacing : 0.

• Kemudian anda tinggal membuat untuk link bagian kiri. Misalnya di baris 2 di

dalam table yang baru saja anda buat, anda membuat link ke alamat-alamat

email terkenal di internet . contoh : yahoo, maka tulisan tersebut diblok

kemudian pada link bagian properties ketikkan http://mail.yahoo.com dengan

target _blank. Demikian juga dengan hotmail dibagian link di properties

ketikkan http://www.hotmail.com dengan target _blank

• Untuk lebih jelasnya perhatikan gambar 32.


Klik disini

top

http://mail.yahoo.com/

http://www.hotmail.com/

http://mail.yahoo.com/

http://www.hotmail.com/




Gambar 32. membuat link eksternal

• Simpan halaman layout.htm ini kembali.

• Halaman loyout sudah terbentuk, kini saatnya anda untuk membuat halaman

index, biodata, gallery, dan cerita


Di blok

link

_blank




Membuat Halaman Index

Halaman home atau halaman index merupakan halaman yang pertama kali dibuka

ketika orang mengetikkan alamat URL anda di address bar. Langkah-langkah untuk

membuat halaman ini adalah sebagai berikut:• Buka halaman layout.htm

• Simpan dengan nama index.htm (caranya pilih menu File | Save As beri nama

index.htm )

• Maka kini halaman index sudah terbentuk. Anda tinggal merubah dibagian isi

seperti berikut :

Gambar 33. tampilan halaman index.html

Membuat Halaman Biodata

Halaman Biodata merupakan halaman yang menyajikan informasi dari seseorang.

Langkah-langkah untuk membuat halaman ini adalah sebagai berikut:

• Buka halaman layout.htm

• Simpan dengan nama biodata.htm (caranya pilih menu File | Save As beri

nama biodata.htm )

• Maka kini halaman biodata sudah terbentuk. Anda tinggal merubah dibagian isi

seperti berikut :





Gambar 34. halaman biodata.htm

Membuat Halaman Gallery

Halaman Gallery merupakan halaman yang menyajikan foto-foto atau gambar-

gambar yang unik. Langkah-langkah untuk membuat halaman ini adalah sebagai

berikut:


• Simpan dengan nama gallery.htm (caranya pilih menu File | Save As beri

nama gallery.htm )

Maka kini halaman gallery sudah terbentuk. Anda tinggal merubah dibagian isi .

Membuat Halaman Cerita

Halaman Gallery merupakan halaman yang menyajikan foto-foto atau gambar-

gambar yang unik. Langkah-langkah untuk membuat halaman ini adalah sebagai

berikut:


• Simpan dengan nama cerita.htm (caranya pilih menu File | Save As beri nama

cerita.htm )

Maka kini halaman cerita sudah terbentuk. Anda tinggal merubah dibagian isi .


Documents

Merancang Website Pribadi2