Artikel ini adalah lanjutan dari artikel Membuat website Dengan Potoshop dan Membuat Website dengan Potoshop - Mark Up HTML Code Part 1 , dan disini merupakan artikel tutorial penutup dari project 1 ini. Saya harap anda telah terlebih dahulu membaca dan mempraktekan isi dari artikel sebelumnya sehingga anda benar-benar menyerap ilmu dari tutorial ini. Dan yang akan kita lakukan kali ini merupakan tahap penyempurnaan dari langkah sebelumnya yang kita dapati bahwa web yang kita buat acak acakan dan sekarang kita akan coba memperbaikinya.
Pertama, yang akan kita lakukan adalah menambahkan sebuah koding style sederhana untuk mengatur web kita seperti semula atau saat tidak acak- acakan. Caranya adalah dengan membubuhkan kode di bawah ini pada file html anda , letakan diantara kode <head></head>. Anda dapat meletakannya persis dibawah <head> atau diatas </head> , terserah anda karena efeknya sama saja. Berikut kodenya:
<style type="text/css">
.content{
padding:20px 20px 40px 40px;
background:url(images/index_07.png) bottom;
}
</style>
</head>
*perhatikan baik-baik penulisannya.content{
padding:20px 20px 40px 40px;
background:url(images/index_07.png) bottom;
}
</style>
</head>
Setelah itu , langkah selanjutnya adalah membuat halaman-halaman lain yang ada pada menu web yang kita buat tadi seperti about, contact , gallery, blog dan home. untuk membuat halaman-halaman tersebut caranya cukup mudah , hanya bermodal copy paste saja dari file index.html . Namun sebelum melakukan copy paste , kita akan melakukan beberapa aksi berikut :
Buka index.html menggunakan dreamweaver , masuk dalam mode design. Disana kita akan melihat halaman web kita, namun ada pada dreamweaver. Disinilah kita akan beraksi.
- Pertama, klik pada menu about, maka daerah sekitar about yang kita slice di potoshop akan terlihat jelas. Lalu lihat pada bagian bawah properties dreamweaver, cari tulisan link kemudian pada textbox link kita tuliskan "about.html".
- Lakukan hal yang sama, kali ini klik pada menu contact , pada textboxnya kita tuliskan "contact.html"
- Kita lanjutkan pada menu Gallery dengan tulisan "gallery.html" , menu Home dengan tulisan "index.html" dan menu Blog dengan tulisan "blog.html" kemudian simpan.
tulisan yang kita tulis pada textbox link memiliki arti bahwa ketika kita klik menu-menu tersebut maka, akan langsung menuju ke halaman lain yaitu halaman dengan nama sesuai dengan yang kita tulis di textbox tersebut. Misal kita klik menu about maka kita akan diarahkan ke halaman about.html.
Untuk itu , maka kita harus membuat halaman-halaman tujuan tersebut dan caranya adalah dengan melakukan copy paste halaman index dan merename dengan nama-nama dari menu yang kita buat seperti about.html dan lain-lain. Setelah itu kita tinggal edit konten yang ada didalam masing-masing file yang kita copas tadi. Misal halaman gallery bisa kita hapus semua artikelnya dan kita ganti dengan foto atau gambar dan lakukan pengeditan pada halaman lain, sesuaikan dengan judul menunya. Dengan demikian selesai sudah Project 1 , jika ada pertanyaan silahkan tulis di kolom komentar.
0 Response to "Membuat Website dengan Potoshop - Mark Up HTML Code Part 2"
Post a Comment