Setelah 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 tag <body>
<div id="header"></div> |
Selector Type : compound (based on your selection)Selector : #header
Define in : style.css
Setelah muncul CSS Rule Definition for #header in style.css, isikan pengaturannya sebagai beriku
Type:
Size : 12 pixel
Color : #FFF
Background:
Background image : klik browse pilih header.jpg dalam folder images
Repeat : no-repeat
Box :
Width : 1000 pixel
Float : Left
Height : 900 pixel
Padding : centang same for all, kemudian isikan 20 pixel
Selanjutnya kita akan memasukkan logo website dan deskripsi website kedalam header, caranya klik cursor anda setelah <div id=”header”> kemudian klik insert = > image = > logo.jpg
Usahakan logo yang anda buat tingginya / weight tidak lebih dari 80pixel, jika logo anda melebihi dari 80 pixel, anda dapat merubah ukurannya dengan cara :
melalui Design View, klik gambar logo anda kemudian pada panel Property yang secara default berada di bagian bawah, pada H / Height isikan 80.
Masih pada tempat yang sama Panel Property, pada Link klik icon folder yang ada di sebelah kiri tulisan Edit, kemudian pilih file index.php. Ini berfungsi pada saat logo di klik akan mengarah ke halaman index atau halaman depan website anda.
pada tulisan dibawah ini pastekan code ini
<p>Deskripsi website anda disini</p> tepat dibawah code dibawah ini<a href="index.php"><img src="Image/Header.jpg" alt="Belajar membuat website" width="1000" height="80" /></a></div> |
<p>Deskripsi website anda disini</p> Jika sudah Save File.
Sekarang lanjut pada tahapan membuat menu navigasi website
membuat navigasi website yang berada di bagian bawah header. Navigasi isi akan berisi link – link yang akan mengarah ke halaman tertentu seperti profile, gallery, atau contact.
pada bagian </body> tepat di atas ketikan code dibawah ini.
<div id="navigasi"></div>Lalu buat new css rule
Background:
Background image : klik browse pilih bg-nav.jpg dalam folder images
Repeat : no-repeat
Box :
Width : 1000 pixel
Float : Left
Height : 35 pixel
Pada bagian padding hilangkan centang same for all, left :20 pixel dan right: 20 pixel
Pada bagian margin centang same for all isikan 0 pixel
Jika sudah klik ok, simpan file index.php dan style.css.
Selanjutnya pada Design View, klik di dalam Menu Navigasi kemudian klik Insert > Table
,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, dan ketikan Home ,about dan lain-lain terserah anda
Pada Home, masuk ke panel property pada Link isikan saja file index.php dan untuk yang lainnya isikan saja # Karna kita belum membuat File untuk yang lainnya.
Sekarang kita akan mengubah warna link dari menu navigasi dengan mengatur CSS nya, caranya klik tulisan Home => klik icon New CSS Rule, isi pengaturannya sebagai berikut :
Selector Type : compound (based on your selection)
Selector : #navigasi table tr td a
Define in : style.css
Seleah muncul CSS Rule Definition for #navigasi a in style.css, isikan pengaturannya sebagai berikut :
Type:
Color : #FFF (kode warna putih)
Jika sudah klik ok. Simpan file index.php dan style.css anda tekan CTRL + S, kemudian preview tekan F12.Lanjut ke cara membuat konten dan footer website dengan Dreamweaver CS6
makasih min sangat membatu. jangan lupa visit jga blog saya http://semanasputrajaya.blogspot.co.id/2016/10/harapan-mahasiswa-baru-2016-teknik.html
ReplyDeletemakasih min sangat membatu. jangan lupa visit jga blog saya http://semanasputrajaya.blogspot.co.id/2016/10/harapan-mahasiswa-baru-2016-teknik.html
ReplyDeleteMenuju Natal 2017 Semoga anda sehat selalu dan di berikan rejeki yang banyak.
ReplyDeleteTidak lupa kami juga sampaikan kepada para member setia Aslibandar.net Terus bermain dan dapatkan Jackpot yang lebih besar menuju tahun baru 2017.
Untuk Info lebih lanjut silahkan hubungi kami melalui :
* Ym: Aslibandar_Cs
* Phone: 855976375885
* Fb: AsliBandar
* Skype: AsliBandar
* Whatsapp: 85569776588
* BBM: 2B3C34F4
Kami Segenap keluarga Besar Aslibandar.net Mengucapkan Selamat Hari Natal Dan Tahun Baru. !!!
Terimakasih atas informasinya.
ReplyDeleteSebelumnya, saya mau tanya. Apakah cara di atas juga bisa digunakan untuk website wordpress?
Salam.
mana folder imagesnya?
ReplyDeletetrmksh artknya gan,cara membuat Header dan Navigasi Website trnyta tdk terlalu sulit ya apalagi saat sy mmplajri isi dr artkl ini dan sngt mmbtu skli.
ReplyDeleteKunjungi website sy ya: https://yuliyani.mahasiswa.atmaluhur.ac.id
Dan kunjungi website kmps sy: http://www.atmaluhur.ac.id