P. 1
Belajar Web Statis Dengan Dream Weaver

Belajar Web Statis Dengan Dream Weaver

|Views: 278|Likes:
Published by Toble Toblerone

More info:

Published by: Toble Toblerone on Sep 19, 2010
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as PDF, TXT or read online from Scribd
See more
See less

10/24/2013

pdf

text

original

Membangun Web Statis Menggunakan Dreamweaver

Oleh : Mochamad Subecha, SE

Langkah-langkah membuat web statis 1. Pastikan bahwa server localhost sudah berjalan. Untuk Windows biasanya menggunakan Xampp for Windows.-, aktifkan control panelnya, pastikan Apache sudah berjalan ( berwarna hijau ) Lihat Gambar :

2. Buka Software Dreamweaver dan definiskan lokasi situs anda. Mendifinisikan Situs Web 1. Buka Windows Explorer pada windows, lalu buka folder c:\xampp\htdocs. Pada folder htdocs buatlah folder baru ( nama folder bebas dianjurkan dengan huruf kecil) misalnya “latihan”. 2. Buka Program Dreamweaver. Pilih Menu Site > New Sites maka akan tampil kotak dialognya. 3. Pada kotak dialog Site Definition, Klik Menu Advance. Lihat Gambar: 4. Kotak dialog Site Definition akan ditampilkan dalam mode Ad vances. Pada bagian Category, pilihlah Local Info. Kemudian isikan item- item berikut: • Site Name. Isikan dengan nama situs yang anda inginkan. • Local Root Folder, isikan nama folder yang telah kita buat sebelumnya pada langkah satu yaitu: C:\xampp\htdocs\latihan • Default Image Folder adalah tempat menyimpan gambar/images : Isikan C:\xampp\htdocs\images

• • HTTP Adress : http://localhost/latihan Selesai mendifiniskan situs baru. klik tombol OK. kami membuat rencana desain web sebagai berikut : . Membuat sketsa web statis Untuk memulai desain web. Pada latihan ini. buatlah rencana desain web dengan membuat layout web tersebut dahulu.

Isikan pada • Rows : 4 • Columns : 3 • Table width : 790 pixels • Border thickness : 0 • Cell padding : 0 • Cell spacing : 0 . 1. Klik menu insert > table akan tampil kotak dialognya. selanjutnya layout dapat dibuat dengan bantuan table.Implementasi Layout pada Tabel Dreamweaver Setelah kita menentukan sketsa layout web yang akan kita buat.

Jika sudah sesuai. Agar web kita tampak dilayar berada tepat ditengah-tengah. Hal ini dimaksudkan untuk mempermudah manajemen file pada web apabila file dan gambar sudah sangat banyak. 3. Untuk selanjutnya kita lakukan manipulasi table sesuai layout yang ada sebagai berikut : 1. pilih pada properties nya bagian Align : Center ( Lihat Gambar ) Pada tahapan ini kita sudah berhasil membuat table sesuai layout yang di inginkan. Tabel baris pertama dibiarkan apa adanya karena nantinya masing. akan tampak di layar monitor table dengan 4 baris (rows ) dan 3 kolom ( columns ). Images yang akan dipakai sebagai header sebaiknya diletakkan pada folder c:\xampp\hatdocs\images.masing kolom 1. tekan OK. .2. kolom 2 dan 3 akan di isi images web yang akan dibuat header.

Pindahkan lagi kursos ke kolom 3 di baris pertama lalu masukkan header_03. • Border Thickness: Garis pinggir dari table ( baik baris maupun kolom ) Membuat Header Website Statis Membuat Header Baris Pertama Mari kita membuat header web statis kita dengan cara sebagai berikut : 1. maka bloklah kolom ke 2 dan ke 3 dengan klik tekan dan jangan dilepas sampai di kolom ke 3 baru dilepas. cari file gambar dengan nama header_01 klik OK.2. Kemudian pada baris ketiga kita memerlukan modifikasi dua kolom. caranya sama dengan langkah 1. pada baris keempat. Blok semua kolo m pada baris kedua menggunakan mouse dengan cara klik mouse tanpa dilepas pada table yang akan dimanipulasi baris dan kolomnya. Penjelasan : • Columns adalah banyaknya kotak horizontal • Rows banyaknya kotak secara vertikal • Cells Spacing jarak antara satu sel dengan sel lainnya. • Cell Padding jarak anatara tepi sel dengan obyek yang ada di dalamnya. 3. 4. 3. lalu klik menu Modify > Table > Merge Cells. klik OK. kita juga hanya memerlukan 1 kolom saja seperti pada baris kedua. 2. maka caranya sama dengan langkah ke 2. Lihat Gambar dibawah ini: . lalu klik menu insert > Images. akan tampil menu dialognya. Terakhir. Letakkan kursor pada kolom 1 baris pertama. kemudian klik menu Modify > Table > Merge Cells. selanjutnya kolom-kolom pada baris kedua akan menyatu menjadi satu kolom saja. Gambar : table yang sudah di lakukan modifikasi penggabungan sesuai layout. Lihat Gambar. Kemudian pindahkan kursor pada kolom ke 2 di baris pertama dan masukkan gambar kedua file header_02 .

Baris ketiga mempunyai dua kolom.html 2. Contact us – file : contact. Sebelum navigasi dibuat. lalu pilih pada Properties nya warna yang anda suka misalnya Warna Hijau Tua kode BG: #003300 ( lihat gambar ). Pada tahapan ini header website sudah tampak sesuai rencana. Content untuk kolom Navigasi.html 3.link atau tombol yang berfungsi untuk navigasi pada website yang kita buat. Home – file : index. Letakkan kursos pada baris kedua. sebaiknya buat daftar tombol navigasi pada web yang akan kita buat. pada kolom 1 akan ditempati link.Hiasan Header Baris Kedua Baris kedua merupakan header web dan bagian ini biasanya diletakkan teks berjalan dari kiri ke kanan ( marquee ) atau bisa jadi tempat untuk membuat menu bagian atas.html . About me – file : about. Misalnya : 1.

html kalau tidak.html Catatan : file harus disimpan terlebih dahulu dan diberi nama index. tombol navigasi belum bisa dibuat. Klik menu Insert > table akan tampil kotak dialog. My Family – file : family. Isikan pada • • • • • • Rows : 5. Cell padding : 0 dan Cell spacing : 0.html Navigasi yang akan dibuat ini bisa dituliskan pada kertas catatan atau dokumen teks supaya nantinya mudah di copy paste saat membuat navigasi. Letakkan kursor pada kolom 1 di baris ketiga. Table Width: 100 pixels. 3. Simpan file dan diberi nama : index. 1.html 5. lalu pilih pada propertiesnya bagian Horz: Center dan Vert:Top sehingga button yang dibuat akan selalu berada ditengah dan di atas. My Friend – file : friend. Cara membuat navigasi pada dreamwaver. Columns: 1. . 2.4. Border : 0.

4. lalu klik menu Insert > Interactive Image > Flash button akan tampil kotak dialognya. letakkan kursos pada baris pertama. Kita hanya mengubah pada bagian Button teks dan Link nya saja. Pada table yang baru kita buat. . Masukan ke empat tombol lainnya satu persatu caranya sama dengan langkah 3. Pilih pada Style : ( pilih sesuai keinginan ). Buat Background menu dengan warna Hijau Tua. Button text : Home klik OK untuk mengakhiri (Lihat Gambar) 5.

Letakkan kursos pada kolom kedua di baris ketiga. Klik Menu Insert > Image akan tampil kotak dialognya.gif. 2. Untuk selanjutnya tekan tombol Enter pada keyboard. tekan tombol Ship+Enter di Keyboard untuk pindah baris. carilah gambar gadis. Tuliskan teks SELAMAT DATANG DI WEBSITE KAMI. lalu pada properties pilih bagian Vert : Top. Cara membuatnya adalah sebagai berikut : 1. Kemudian. Hasilnya terlihat pada gambar dibawah ini .Content Untuk Kolom Utama Konten utama merupakan menu home yang tampil pada saat web pertama kali di akses. 3.

Teks informasi akan berpindah ke sebelah kanan gambar ( tepat berdamp ingan dengan gambar ). Agar teks tidak berada di bawah gambar. lakukan teknik sebagai berikut : Pilih gambar tersebut dan atur propertiesnya isikan pada : > H Space : 20 > Align : Left. Tulislah teks informasi secukupnya di sebelah kanan gambar. Lihat Gambar : . 5.4.

Align : Untuk menentukan perataan antara gambar dan teks. yang akan kita isikan tulisan misalnya Copyright © Tahun 2009 By Ucha Design. Space untuk menambah area kosong di atas dan di bawah gambar. Letakkan kursor pada baris keempat. 3. ( Warna Hitam) 2. Bagian Footer Bagian footer terletak baris keempat. Letakkan teks Copyright © Tahun 2009 By Ucha Design lalu blok tulisan tersebut dan pilih properties untuk warna putih kode #FFFFFF. lalu pilih properties nya dengan warna BG #000000. font. Cara membuat nya sebagai berikut : 1. Untuk memasukkan karekater copyright di Dreamwaver. Misalnya Align : Left ( perataan kiri ).Keterangan : Space : Untuk menambah area kosong di sekeliling gambar V. gambar tepat berada di sebelah kiri teks. klik menu Insert > HTML > Special Character > Copyright. ukuran ya ng sesuai dengan keinginan kita dapat dilihat pada properties. H Space untuk menambah area kosong di samping kanan dan kiri gambar. .

Title : Welcome to my webste. . ada kotak title : isikan sesuai keinginan anda. Sebab penamaan tersebut sudah didefiniskan pada Apache Server yang tidak akan mengakses langsung apabila diberi nama selain index. misalnya.Footer Memberi Judul Website Pada saat melihat sebuah situs web pada pojok kiri atas browser judul dari web tersebut. Title website Akhir Dari Sebuah Halam Web • Sebelum menjalankan web dilocal pastikan file sudah tersimpan dengan nama index.html. Pada bagian ini default nya tertulis “Untitle Document” dan untuk menggantinya lihat gambar sebagai berikut: Lihat toolbar bagian atas pada dreamwaver.html.

html • My Friend à Nama file : friend. .( File > Save ) 3. selama tidak ada kesalahan pada pendefinisan situs. Masih pada halaman utama ( file: index. family. ikuti prosedur sebagai berikut: 1. Membuat Halamam About Me.html • About me --à Nama file : about. Kontent untuk kolom ke dua baris ke tiga diganti isinya sesuai rubrik About Me. friend.• Jalankan web browser dengan perintah http://localhost/(namafolderanda) maka web anda harus tampil di monitor.html.html.html • My Family -à Nama file : family. Isikan foto penunjang disesuaikan dan diganti sesuai keinginan dan selanjutnya disimpan kembali. dan penamaan file.html Catatan : nama file dianjurkan dibuat dengan huruf kecil semua untuk mempermudah penulisan kembali dan hal ini sangat berpengaruh apabila suatu saat web kita letakkan di server linux yang kebanyakan dipakai oleh server hosting internet .html ) simpan file tersebut dengan nama baru Save As: about. 2.html ( lihat daftar menu tombol navigasi). dan lain. Pada saat ini halaman baru berada pada file : about.html • Contact us --à Nama file : contact.html. Contact Us.html. Prosedur yang sama juga berlaku untuk halaman.halaman lainnya yaitu contact. Membuat Menu Konten Lainya • Lihat kembali daftar tombol navigasi diatas : • Home à Nama file : index.lain.

maka tombol navigasi akan berjalankan sesuai harapan. dan penamaan file.. Selamat mencoba…. halaman web tidak terjadi broken link dan web tampak lebih indah. semua image akan muncul. .Simpan dengan nama lain misalnya : about.html Jalankan web browser dengan perintah http://localhost/(namafolderanda) maka web anda harus tampil di monitor. selama tidak ada kesalahan pada pendefinisan situs.

You're Reading a Free Preview

Download
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->