KATA PENGANTAR
Puji syukur kehadirat Allah SWT yang telah memberi rahmat, taufik, hidayah
serta inayahnya sehingga kami dapat menyelesaikan makalah ini tepat pada waktunya.
Solawat dan salam semoga tetap tercurah kepada junjungan kita Nabi
Muhammad SAW yang telah menjadi guru terbaikdan menjadi suri taulandan bagi umat
islam di seluruh dunia.
Kami mengucapkan banyak terima kasih kepada teman teman yang telah
membantu dalam pembuatan makalah ini.Semoga modul ini bisa memberi informasi kepada
para pembaca mengenai ”Pembuatan Desain Web Berbasis HTML5 Menggunakan Adobe
Dreamweaver CS6”.
Penulis
Pengenalan HTML
HTML (Hypertext Mark-up Language) adalah bahsa formatting yang biasa digunakan untuk
menampilkan laman web.
Sebelum membuat project tentang web desain, terlebih dahulu kita menentukan ide mengenai
website apa yang akan kita buat. Dalam project kita kali ini, website yang kita buat adalah mengenai
artis yang popular di Indonesia yaitu Afgan. Alasan Afgan kita jadikan tema dalam pembuatan website
ini dikarenakan banyak komponen-komponen pembuatan web yang mudah didapatkan di internet
mengenai seorang Afgan. Mulai dari foto-foto, artikel, biografi, musik, video, dan lain-lain. Selain itu,
Afgan merupakan artis yang rajin memperbarui statusnya di media sosial, baik itu Twitter atau
Facebook sehingga nantinya bisa kita masukkan status-status terbarunya di website yang kita buat.
Setelah kita menemukan tema untuk pembuatan website, kemudian kita menyiapkan konsep
atau sketsa desain layout web yang akan kita buat. Kita membuat konsep tersebut dengan
menggunakan paint yang kemudian kita desain menggunakan Photoshop. Berikut tampilan sketsa
desain layout web yang kita buat.
Sketsa di atas adalah layout web untuk menu home yang kemudian kita desain menggunakan
Photoshop. Dari atas hingga ke bawah terdapat bagian-bagian utama web yaitu main header, bottom
header, content, spacer, dan footer.
Di bagian top header, di dalamnya terdapat judul web yang dituliskan “Afgan World”. Bagian
main header, di dalamnya terdapat foto Afgan dan menu-menu website yang ada di sebelah kanan
foto. Menu tersebut adalah: Biografi, Album, Galery, dan Kontak. Menu-menu ini nantinya akan
dibangun satu-persatu hingga selesai.
Bagian berikutnya yaitu bottom header yang merupakan border dari header. Di bawahnya
terdapat content yang merupakan bagian utama web berisi informasi yang disampaikan oleh web.
Pada menu home, content berisikan “News” yang memuat informasi seputar Afgan dan “Twitter
Plugin” yang memuat status-status terbaru yang diposkan oleh Afgan melalui jejaring sosial Twitter.
Pada project kita, bagian top header hingga footer kita buat sama untuk semua halaman pada masing-
masing menu, hanya berbeda pada content pada masing-masing halaman.
Bagian spacer merupakan border pembatas antara content dan footer. Bagian terakhir adalah
footer yang di dalamnya terdapat beberapa link, yaitu: link menu, informasi copyright, link-link ke
situs lain tentang Afgan.
Berikut ini adalah layout desain web pada menu Home yang telah dibuat menggunakan
Photoshop.
Setelah menu Home, kita membuat sketsa layout untuk menu-menu yang lain, yaitu: Biografi, Album,
Galery, dan Kontak serta membuat tampilannya dalam Photoshop. Berikut sketsa dan tampilan dalam
Photoshop untuk masing-masing menu.