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:
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.
