Membuat website di dreamweaver CS3Kemarin aku sudah kasihdownload template website yang simple, bagi yang belum download silahkan downloaddisini.Setelah anda mendownload file tersebut, extrak filenya kedalam komputer anda, terserah anda mengextraknya dimana. Kemudian dalam hasil extrak terdapatfolder images, disana ada beberapa file yang sudah aku pecah sebagai bahanpembuatan website di dreamweaver.Copyfolder imagestersebut kemudian paste kedalam folderD:\website\xampp\htdocs\websiteku.comSekali lagi aku ingatkan sebelum memulai tutorial membuat website di dreamweaver cs3 ini sebaiknya anda melakukansetting site di dreamweaver cs3tutorialnya bisa di lihatdisini.Membuat website di dreamweaver cs3 tidak sesulit yang orang bayangkan, kita hanya perlu memahami sedikit kode dan beberapa tool yang sudah di sediakan oleh adobe dreamweaver, membuat website di dreamweaver anda hanya akan bermain klik mengklik dan sedikit sekali mengetikkan kode2.Kemarin ada seorang teman yang ingin belajar mebuat website di dreamweaver, dia bertanya kepada aku..Membuat website di Dreamweaver harus menginstall XAMPP?aku rasa membuat website di dreamweaver tidak perlu jika anda membuat website berbasis html, anda cukup menaruh filenya dimana saja yang anda sukaUntuk membuat website di dreamweaver yang pertama yang perlu kita lakukan adalah membuat file index.php. Website yang akan kita buat memiliki bagian :1. Header2. Menu navigasi3. Konten4. Sidebar5. FooterLangsung saja kita akan membuat website di dreamweaver, buka programAdobe Dreamweaveranda, Create new pilihphp

Simpan file tersebut, tekanCTRL + Ssimpan dengan namaindex.phpdalam folder tempat andamenginstal XAMPPD:\website\xampp\htdocs\websiteku.comBerikutnya anda membuat file baru, tekanCTRL + NpadaBlank PagepilihCSSkemudian klikcreate,simpan dengan namastyle.cssdalam folder yang sama dengan fileindex.phpKembai ke file index.php, kliktabindex.phppada document toolbar, kemudian klikCode, tambahkan script berikut di atas tag1

Script tersebut berfungsi menghubungkan fileCSSdenganindex.php

Mengatur Body WebsiteMasih dalam file index.php, klikiconNew CSSRuleyang ada di bagian kanan, jika di layar anda tidak terdapat CSS Stylenya anda bisa menekanShift + F11untuk menampilkantab CSS Style.

Setelah muncul Window New CSS Rule, isi pengaturan sebagai berikut : Selector Type :Advanced (Ids, pseudo-class selectors) Selector :body Define in :style.css

Jika sudah klik ok. Maka akan muncul jendelaCSS Rule Definition for body in style.css,isikan pengaturan sebagai berikut :1. Type= Font : Arial, Helvetica, sans-serif,size:13 pixel, color : #0000002. Background = Background color : #CCCCCC3. Box =width : 900 pixel

Jika sudah klikOK,simpan file index.php dan style.css anda tekanCTRL + SMengatur Link WebsiteSekarang kita akan mengatur warna, ukuran, dan style Link secara default.Klik iconNew CSS Rule, isi pengaturannya sebagai berikut : Selector Type :Advanced (Ids, pseudo-class selectors) Selector :a Define in :style.cssSetelah munculCSS Rule Definition for a in style.css,isikan pengaturannya sebagai berikut :Type: Color :#ff6000 PadaDecorationcentangNoneJika sudah klik ok.Selanjutnya kita akan mengatur css link pada saat hover atau pada saat cursor berada di atas link. Klik kembali iconNew CSS Rule, isi pengaturannya sebagai berikut : Selector Type :Advanced (Ids, pseudo-class selectors) Selector :a:hover Define in :style.cssSetelah munculCSS Rule Definition for a in style.css,isikan pengaturannya sebagai berikut :Type: PadaDecorationcentangUnderline Jika anda ingin mengubah warna link pada saat hover klik icon kotak yang ada di sebelah tulisancolor,kemudian pilih warnanya.Jika sudah klik ok.Memuat Header WebsiteSetelah tadi kita mengatur bagian body dan link website, sekarang saatnya mengatur bagian header dari website.Pilih file index.php, kemudian ketikkan script berikut dan letakkan di bawah tag1

Sekarang kita akan mengatur CSS untuk headernya, caranya sama seperti mengatur CSS pada body. Klik iconNew CSS Rule, isi pengaturannya sebagai berikut : Selector Type :Advanced (Ids, pseudo-class selectors) Selector :#header Define in :style.cssSetelah munculCSS Rule Definition for #header in style.css,isikan pengaturannya sebagai berikuType: Size : 12 pixel Color : #FFFFFFBackground: Background image : klik browse pilihheader.jpgdalam folderimages Repeat: no-repeatBox : Width :860 pixel Float :Left Height :110 pixel Padding : centangsame for all,kemudian isikan20 pixelJika sudah klik OK, kemudian simpan filestyle.cssanda. Untuk melihat preview website anda tekanF12Selanjutnya kita akan memasukkanlogo websitedandeskripsi websitekedalam header, caranyaklik cursoranda setelahkemudian klikinsert = > image = > logo.jpgUsahakan logo yang anda buat tingginya / weight tidak lebih dari80pixel,jikalogo anda melebihi dari 80 pixel, anda dapat merubah ukurannya dengan cara :melalui Design View,klik gambar logoanda kemudian padapanel Propertyyang secara default berada di bagian bawah, padaH / Height isikan 80

Masih tetap padaPanel Property, padaLinkklik icon folder yang ada di sebelah kiri tulisan Edit, kemudian pilih fileindex.php. Ini berfungsi pada saat logo di klik akan mengarah ke halaman index atau halaman depan website anda.Pada bagianborderisikan 0, dan padaAltketikkan logo websiteku atau nama website nama anda.Dibawah code1

ketikkan1Deskripsi website anda disini

ganti tulisandeskripsi website anda disinidengan deskripsi/penjelasan website anda.Simpanfile index.php dan style.csstekanCTRL + S, kemudian lihat previewnyatekan F12atau refresh browser andatekan F5.Memuat Menu Navigasi WebsiteSetelah kita membuat Header, selanjutnya kita akan membuat navigasi website yang berada di bagian bawah header. Navigasi isi akan berisi link link yang akan mengarah ke halaman tertentu sepertiprofile, gallery, atau contact.Pilih file index.php, kemudian ketikkan script berikut dan letakkan di atas1

Sekarang kita akan mengatur CSS untuk navigasiny. Klik iconNew CSS Rule, isi pengaturannya sebagai berikut : Selector Type :Advanced (Ids, pseudo-class selectors) Selector :#navigasi Define in :style.cssSeleah munculCSS Rule Definition for #navigasi in style.css,isikan pengaturannya sebagai berikut :Background: Background image : klik browse pilihbg-nav.jpgdalam folderimages Repeat: no-repeatBox : Width :860 pixel Float :Left Height :35 pixel Pada bagianpaddinghilangkan centangsame for all,left :20 pixeldan right:20 pixel Pada bagianmargincentangsame for allisikan0 pixelJika sudah klik ok, simpan fileindex.php dan style.css.Selanjutnya pada Design View, klik di dalamMenu Navigasikemudian klikInsert > Table

Setelah muncul jendelaTable,isikan pengaturannya sebagai berikut : Rows : 1 Columns : 4 Table Width kosongkan saja Border Thickness kosongkan / delete saja. Cell Padding : 5 Cell Spacing : 5

Jika sudah klik ok.Selanjutnya didalam kolom table ketikkan menu website anda, perhatikan gambar berikut

Sekarang kita akan memberikan link pada menu tersebut, caranya blok tulisanHome=> pada panel property cari kolomLinkklikicon folderkemudian pilih fileindex.php, lakukan hal yang sama pada menu lainnya, tetapi pada kolom link isikan saja#karena kita belum mempunyai filenya.

Untuk halaman profile dan yang lainnya akan kita bahas pada artikel berikutnya.Sekarang kita akan mengubah warna link dari menu navigasi dengan mengatur CSS nya, caranya klik tulisanHome=> klik iconNew CSS Rule, isi pengaturannya sebagai berikut : Selector Type :Advanced (Ids, pseudo-class selectors) Selector :#navigasi a Define in :style.cssSeleah munculCSS Rule Definition for #navigasi a in style.css,isikan pengaturannya sebagai berikut :Type: Color : #FFFFFF (kode warnaputih)Jika sudah klik ok. Simpan file index.php dan style.css anda tekanCTRL + S, kemudian preview tekanF12Memuat Konten WebsiteSekarang kita akan membuat konten website, konten ini adalah tempat berita atau artikel anda.Pilih file index.php, kemudian ketikkan script berikut dan letakkan di atas1

Klik iconNew CSS Rule, isi pengaturannya sebagai berikut : Selector Type :Advanced (Ids, pseudo-class selectors) Selector :#conten-wrapper Define in :style.cssSeleah munculCSS Rule Definition for #conten-wrapper in style.css,isikan pengaturannya sebagai berikut :Background: Background color : #DDDDDDBox : Width :860 pixel Float :Left Pada bagianmargincentangsame for all,isikan 0 pixel Pada bagianpaddinghilangkan centangsame for all, isikantop:0 pixel, bottom: 0 pixel, right:20pixel, left:0pixelPilih file index.php, kemudian ketikkan script berikut dan letakkan di bawah1

Sehingga kodenya menjadi seperti berikut :123

Klik iconNew CSS Rule, isi pengaturannya sebagai berikut : Selector Type :Advanced (Ids, pseudo-class selectors) Selector :#conten Define in :style.cssSeleah munculCSS Rule Definition for #conten in style.css,isikan pengaturannya sebagai berikut :Background: Background color : #FFFFFFBox : Width :600 pixel Float :Left Pada bagianpaddingcentangsame for all,isikan 20 pixelJika sudah klik ok, simpan fileindex.php dan style.css.Memuat Sidebar WebsiteSidebar adalah kolom yang ada di sebelah konten website anda, biasanya berisi menu menu seperti berita terbaru atau link link tertentu.Pilih file index.php, kemudian ketikkan script berikut dan letakkan di bawah1

Sehingga kodenya menjadi seperti berikut :Klik iconNew CSS Rule, isi pengaturannya sebagai berikut : Selector Type :Advanced (Ids, pseudo-class selectors) Selector :#sidebar Define in :style.cssSeleah munculCSS Rule Definition for #sidebar in style.css,isikan pengaturannya sebagai berikut :Box : Width :200 pixel Float :Left Pada bagianmargincentangsame for all,isikan 0 pixel Pada bagianpaddingcentangsame for all,isikan 10 pixelJika sudah klik ok, simpan fileindex.php dan style.css.Untuk isi sidebar akan aku jelaskan pada tutorial berikutnya.1234

Memuat Footer WebsiteFotter adalah bagian bawah dari website yang biasanya bisa di isi dengan menu atau link tertentu, dan copyright anda.Pilih file index.php, kemudian ketikkan script berikut dan letakkan di atas1

Sekarang kita akan mengatur CSS untuk footer. Klik iconNew CSS Rule, isi pengaturannya sebagai berikut : Selector Type :Advanced (Ids, pseudo-class selectors) Selector :#footer Define in :style.cssSeleah munculCSS Rule Definition for #footer in style.css,isikan pengaturannya sebagai berikutBackground: Background image : klik browse pilihfooter.jpgdalam folderimages Repeat: no-repeatBlock: Text align :CenterBox : Width :860 pixel Float :Left Height :80 pixel Pada bagianpaddingcentangsame for all,isikan20 pixel Pada bagianmargincentangsame for allisikan0 pixelJika sudah klik ok, simpan fileindex.php dan style.css.Jika anda perhatikan semua susunan kode yang kita buat di file index.php tadi akan menjadi seperti ini :12345678910111213141516171819202122232425262728293031323334

Websiteku

Deskripsi website anda disini

HomeProfileGalleryContact

Pada Design View, klik di dalam konten website anda kemudian ketikkan kata sambutan atau judul konten anda. UntukMerubah format judul kontenanda caranya blok judul konten anda kemudian padapanel property=> menu format pilihHeading 1.Untuk memberikan link pada judul konten caranya blok judul konten anda, kemudian pada panel properti isikan link yang akan dituju, jika belum ada isikan dengan#saja.Di bawah judul anda bisa isikan gambar, tetapi sebelumnya pastikan gambar anda tempatnya dalamfolder images,caranya Insert = > Image => pilih file gambar anda => klik ok. Untuk mengatur gambar anda silahkan atur padapanel property.Kali ini aku memakai gambar yang aku comot dari google dan lebarnya 600 pixel.Di bawah gambar atau disamping gambar anda bisa memasukkan teks sesuka anda yang berhubungan dengan konten atau website anda. Atau anda ingin measukkan penggalan dari halaman profile anda, itu terserah anda.Setelah toturial membuat website di dreamweaver ini kita akan memecah file index.php, kenapa perlu di pecah? ya jawabannya agar nantinya kita mudah dalam mengedit file-file tersebut.