Tutorial Pembuatan Web

Untuk tugas sofskill kali ini, saya mendapat tugas untuk membuat web dengan tema dan menggunakan aplikasi bebas. Akhirnya saya memutuskan memakai aplikasi Adobe Dreamweaver Cs5 dengan tema artikel bebas, saya memilih  mengenai kota Paris.

Pertama saya mencari template yang sesuai dengan keinginan, saya memilih template Black-Pink template, original design by Arudis. Tampilan awalnya seperti ini :

Awalnya saya mengubah bagian navbar, logo header dan background. Bagian navbar saya hanya memakai empat tab, yaitu home, place, photos dan about and contact. Caranya ialah saya mengcopy html index (home) lalu mengganti nama dan meng-link kan setiap navbar ke page yang dimaksud.

Pada bagian propertise, kita memilih page yang kita inginkan pada kolom link, seperti dibawah ini:

 Lakukan untuk keempat navbar atau page, berikut tampilan code di css-nya:

Untuk pengaturan body template, kita masuk ke code css-nya:

Disini kita bisa menentukan color background, image background, font style dan font color.

Untuk pengisian template atau menulis atau membuat artikel, sebelumnya kita membuat pengaturan di code css seperti heading, text formating dan lain-lain. Hingga memudahkan kita dalam penulisan. Contohnya sepert ini:

Untuk pengaturan lay out, seperti background navbar, footer dan lain-lain, sebelumnya kita buat dulu pengaturan di css-nya, jika suda sesuai dengan keinginan kita, baru kita edit di code htmlnya. Contohnya kita mendesain option dan footer. Seperti ini:

(option)

Dibawah ini adalah source codenya:

(footer)

Saya melakukan link saat “mandael” di klik maka akan langsung menuju blog saya, bisa diatur dengan mengisi kolom link pada properties di pengaturan desain atau di source codenya : 

Untuk page “place” dan “about and contact” saya mengeditnya hampir sama dengan page home (hanya menggunakan text dan footer). Namun di page place, saya memasukan gambar dengan cara menginsert image dari desainnya atau menggunakan codenya, sepert ini :

Untuk page photos, saya mengedit foto sehingga saat foto di klik akan pop-out. Dengan menambahkan code settingan pada css-nya, seperti ini :

Hasilnya akan seperti ini:

Jika gambarnya di klik, akan pop out seperti ini:

Setelah mengisi semua page dengan tulisan yang diinginkan, dengan gambar yang diinginkan, dengan pengaturan lay out yang diinginkan, berikut hasil akhirnya untuk setiap page :

Sekian tutorial pembuatan web dari saya, kurang lebihnya saya mohon maaf dan terima kasih.