Merancang Website Pribadi2

Tutorial Merancang Website Pribadi

MERANCANG WEBSITE PRIBADI by Heru W

by [email protected] 51


MERANCANG WEBSITE PRIBADI

L

angkah awal yang perlu diperhatikan dalam membuat website adalah merancang

dahulu dahulu seperti apa website website yang ingin kita kita buat tersebut. tersebut.

Tentu disesuaik disesuaikan an

dengan fungsi website tersebut, misalnya sebagai website pribadi.

Untuk membuat sebuah aplikasi website, minimal anda sudah mempunyai gambaran pasti tentang apa yang akan anda lakukan sehingga proses pembuatannya akan lebih terta tertata ta

berd berdas asark arkan an

ranc rancan anga gan n

yang yang

telah telah

disu disusu sun, n,

walau walaupu pun n

tida tidak k

menu menutu tup p

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 halaman terdapat sedikit sedikit penjelasan penjelasan isi tiap-tiap tiap-tiap halaman halaman website 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. Biodata : sebaiknya kita susun terlebih dahulu. Bisa secara singkat atau

o

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.


Tutorial Merancang Website Pribadi 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 Color dan content : white. Dan kemudian klik OK.

Gambar 2. form new file


Tutorial Merancang Website Pribadi 2.

Maka tampilah area kerja anda seperti tampak pada gambar 3. untuk memperluas area kerja agar lebih leluasa click tombol maximize.

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 set Foreground 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



Gradient Tool

Foreground Color

Arah Drag

Background Color

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 : Smooth

Arial Black

italic

60 pt Layer x-web

Horizontal type tool

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


Tutorial Merancang Website Pribadi perubahan tulisan. Bila tulisan tidak kelihatan geser panel ketempat lain. Beri tanda check juga untuk drop shadow

Bisa digeser-geser Berpengaruh pada ketebalan dan ukuran Drop shadow

Warna bisa diubahubah. Ini berpengaruh pada warna stroke stoke

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



Dengan mempergunakan Paint Bucket Tool warnai kotak tersebut dengan warna orange. Seperti tampak gambar berikut :

Paint bucket tool

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 :

Arial

Reguler

18 pt

Set the text color

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



Drag Garis bantu

Rulers

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)

Jump to ImageReady

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 menganilasa

(lihat dulu

diimplementasikan

gambar gambar

sebagai

13). anda

objek

Tapi

sebelumnya

tersebut. table,

Kalau

maka

anda harus gambar

gambar

itu

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)

.

hafal/atau sudah anda catat



Kalo anda merasa sudah

lanjutkan dengan menekan tool Jump to

ImageReady


Tutorial Merancang Website Pribadi  Tunggu beberapa saat akan muncul program Adobe ImageReady, program ini di aplikasi pembuatan web kali ini digunakan untuk memotong gambar. Lihat gambar berikut :

Slice Tool maximize

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 :

Slice Tool

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


Tutorial Merancang Website Pribadi  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:

Save in

Image Only

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.



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


Tutorial Merancang Website Pribadi 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.



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


Tutorial Merancang Website Pribadi 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 akan

tersimpan

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


Tutorial Merancang Website Pribadi •

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 akan tampak 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:

terseleksi

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:

Untuk link

Untuk isi

Gambar 30. area link dan 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. Ada tulisan link, masukkan index.htm. lihat gambar !

Tombol home

index.htm

Gambar 31. membuat link internal •

Lakukan juga pada tombol biodata, gallery dan cerita dengan memasukkan link sebagai berikut :

•

o

Tombol home

o

Tombol biodata

o

Tombol gallery

o

Tombol cerita



index.htm

 



biodata.htm gallery.htm

cerita.htm

Simpan kembali halaman layout.htm ini



Membuat tampilan link bagian kiri

Klik disini

top

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 kemudian lihat 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.



Di blok

link

_blank

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



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: •


•

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 gambargambar 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 gambargambar 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 .

  


Merancang Website Pribadi2

Recommend Documents