Desain WEB

[Company name]

[Document title]

[Document subtitle]

Web desain
[Date]

KATA PENGANTAR

Kemampuan dalam bidang Teknologi Informasi pada saat ini merupakan salah satu
keterampilan yang harus dimiliki oleh generasi milenial. Penguasaan Teknologi Informasi akan
memudahkan siswa untuk beradaptasi dengan kondisi perkembangan jaman dan perkembangan
teknologi. Salah satu kemampuan yang perlu diasah dan dikembangkan adalah dalam bidang web
desain, hampir semua media online memerlukan sentuhan web untuk menampilkan produk atau
promosi produk. Modul pada pembelajaran ini mencakup bidang web desain sebagai unsur penting
dalam penciptaan produk web desain dan web programing.

Modul ini hanyalah dasar-dasar dalam membuat berbagai model web desain, oleh karena itu
diperlukan ketekunan dan kreatifitas siswa dalam mengembangkan produk grafis berbasis multmedia.
Kunci utama dalam penguasaan web desain adalah latihan dan mencoba untuk berkreasi dengan
model-model baru, modul atau buku hanyalah panduan yang bersifat mendasar sedangkan
kedalaman materi perlu untuk dikembangkan dan dicoba dengan kreasi-kreasi baru berdasarkan
pengalaman yang diperoleh selama pembelajaran.

Harapan kami modul pembelajaran ini dapat digunakan sebaik mungkin sehingga proses
pembelajaran dapat berjalan dengan baik dan lancar. Semoga dari siswa yang kreatif dan inovatif
dapat menghasilkan karya-karya baru yang inovatif pula, serta mampu menghasilkan nilai jual baik
untuk siswa maupun sekolah. Pembelajaran tidak hanya berhenti di sekolah saja melainkan akan terus
berjalan seiring perjalanan waktu, dengan bekal keterampilan dan penguasaan multimedia yang telah
siswa dapatkan di sekolah kita berharap siswa-siswi kita akan lebih mudah menghadapi kehidupan di
masyarakat.

Tim Akademik
Diginusa-Gramedia

WEB DESAIN i

MODUL PEMBELAJARAN
Web Desain : Kompetensi Web Desain SMA

Disusun oleh : M.Fauzi, Unggul A.L, Tim Akademik Diginusa-Gramedia
Desain Cover : Unggul A.L

Buku Seri Komputer Web Desain & Programer dengan tebal 80 halaman

Dilarang keras menerjemahkan, memperbanyak sebagian atau seluruh isi buku
ini tanpa ijin tertulis dari penerbit

Diterbitkan oleh :
Tim Akademik Diginusa-Gramedia
Telp. (021) 530-1991, 549-433 Ext.3840-3846
Jl. Palmerah Barat N0. 29-31 Jakarta, 10270

WEB DESAIN ii

DAFTAR ISI

Kata Pengantar ..........................................................................................................i
Daftar Isi ........................................................................................................ iii

MULTIMEDIA : WEB DESAIN

Modul 1: Konsep Dasar Web.......................................................................1

Modul 2: Pengenalan HTML........................................................................7

Modul 3: Web Desain dengan Photoshop ................................................11

Modul 4: Mengenal Adobe Dreamweaver ...............................................18

Modul 5: Pengaturan Layout Halaman Web.............................................27

Modul 6: Penggunaan Layer dan Form .....................................................32

Modul 7: Bekerja dengan Frame...............................................................40

Modul 8: Penggunaan CSS Rule ................................................................44

Modul 9: Penggunaan Behaviors ..............................................................50

Modul 10: Penggunaan Sub Menu............................................................56

Modul 11: Penggunaan Template .............................................................61

Modul 12: Menyisipkan Media Interaktif..................................................65

Modul 13: Panel Asset dan Panel History .................................................69

Modul 14: Menggambar dan Menulis Teks ............................................103

Daftar Pustaka ..................................................................................................

WEB DESAIN iii

1 Konsep Dasar Web

Indikator Hasil Belajar :
1. Siswa dapat memahami konsep dasar Pemrograman Web
2. Siswa Mampu memahami istilah-istilah yang ada dalam pemrograman web.
3. Siswa Mampu mengimplementasikan Struktur Navigasi

Pengertian Pemrograman Web

Pemrograman web terdiri dari 2 kata yaitu pemrograman dan web. Permograman di artikan
dengan proses, cara pembuatan suatu program. Sedangkan web adalah jaringan komputer
yang terdiri dari kumpulan situs internet yang menampilkan teks, grafik, suara, video, dan
animasi melalui hypertext transfer protokol.
Pemrograman Web merupakan pembuatan aplikasi program dengan bahasa skrip yang akan
menghasilkan sebuah aplikasi yang diakses pada web browser

Jenis Kategori Website:

a. Web Statis
Merupakan website yang mempunyai halaman yang tidak berubah. Perubahan suatu
halaman dilakukan secara manual dengan mengedit code yang menjadi stuktur dari
website tersebut.

b. Web Dinamis
Merupakan website yang secara terstruktur diperuntukan untuk diupdate sesering
mungkin. Biasanya disediakan halaman backend untuk melakukan perubahan konten
dari website tersebut. Contohnya : web portal, web berita, dll.

c. Web Interaktif
Merupakan website yang berinteraksi antara penggunanya. Biasanya berupa forum
diskusi maupun blog. Dimana adanya moderator sebagai pengatur alur diskusi.

Istilah - Istilah dalam Pemrograman Web
Ada beberapa istilah yang sering digunakan apabila anda mempelajari pemrograman web ini
diantaranya yaitu:

1. Internet
Internet berarti rangkaian komputer yang terhubung menjadi beberapa rangkaian jaringan.
Sistem komputer terhubung secara global dan menggunakan TCP/IP sebagai protocol.
Melalui internet pertukaran informasi dapat dilakukan tanpa batas asalkan kedua pihak
terhubung kedalam jaringan yang sama.

2. World Wide Web (WWW)

WEB DESAIN 1

WWW merupakan kumpulan web server diseluruh dunia yang dapat menyediakan data dan
informasi untuk dapat digunakan secara massal.

3. Website
Website merupakan istilah yang merujuk kepada suatu nama halaman web yang dapat
diakses jika terkoneksi dengan internet. Untuk mengakses sebuah website, selain terkoneksi
dengan internet, anda pun harus membukanya dalam sebuah aplikasi web browser.

4. Web Server
Web Server merupakan perangkat lunak yang digunakan untuk menerima permintaan
melalui Protokol HTTP atau HTTPS dari client, kemudian dikirimkan kembali dalam bentuk
halaman-halaman web. Contoh web server : Xampp, Wampp, Apache2Triad, dll.

5. URL (Universal Resource Locator)
URL merupakan suatu alamat yang menunjukkan sebuah halaman tertentu internet. Contoh
URL adalah: http://www.google.com

6. HTTP (Hypertext Transfer Protocol)
HTTP merupakan bagian dari URL digunakan untuk mengidentifikasikan lokasi web, dan
digunakan dalam protokol HTML.

7. DNS (Domain Name System)
DNS merupakan sistem database terdistribusi yang tidak banyak dipengaruhi oleh
bertambanhnya database. DNS menjamin informasi host terbaru akan disebarkan ke
jaringan bila diperlukan.

8. IP (Internet Protocol)
IP (Internet Protocol) merupakan protokol yang digunakan dalam internet, secara teknis
bermakna suatu bentuk pengisian dan pengalamatan data-data dan informasi yang akan
dikirim melalui internet.

9. Hyperlink
Hyperlink atau disebut link merupakan sebuah tools yang berperan dalam mempopulerkan
penggunaan internet, hyperlink dapat mereferensikan sebuah teks atau gambar ke alamat
lain di internet.

10. Web Browser
Menggunakan web browser mudah, yang diperlukan hanyalah Anda harus memiliki alamat
web yang akan dibuka. Alamat ini biasa disebut dengan Uniform Resource Locator (URL). Jika
menggunakan sistem operasi Windows terdapat program web browser bawaan, yaitu
Internet Explorer. Terdapat banyak program alternative web browser yang sebagian besar
bersifat gratis, seperti Firefox, Opera, Safari, chrome dan seterusnya.

Bahasa Skrip Pemrograman Web
Dalam mempelajari pemrograman web, perlu diketahui pemahaman beberapa bahasa skrip yang
dibutuhkan dalam pembuatan 1 halaman website, yaitu :

a. HTML (Hypertext Markup Language)
b. PHP (Hypertext Preprocessor)
c. CSS (Cascading Style Sheet)
d. JAVASCRIPT

WEB DESAIN 2

Struktur Navigasi

Struktur Navigasi adalah bagan hirarki dari suatu website yang menggambarkan isi
dari setiap halaman dan link. Struktur Navigasi dapat dikatakan sebagai gambaran dari
hubungan atau rantai kerja dari seluruh elemen yang akan digunakan dalam aplikasi.

Kriteria-kriteria yang digunakan dalam pengelompokan dari struktur navigasi adalah
sebagai berikut: kebutuhan akan objek, kemudahan pemakaian, interaktif, dan kemudahan
membuatnya yang berpengaruh terhadap waktu pembuatan suatu websites. Dalam
penggambarannya Struktur Navigasi terbagi kedalam 4 Struktur yang berbeda yaitu: Linier,
Non Linier, Hierarchical (Hirarki) dan Composit (Campuran).

Ada 4 macam bentuk dasar dari peta navigasi yang biasa digunakan dalam proses
pembuatan aplikasi web, yaitu:

1. Struktur Navigasi Linier
Pada Struktur navigasi linier merupakan rangkaian urutan tampilan dari sebuah
halaman website yang ditampilkan secara berurut menurut urutannya. Tampilan yang
dapat ditampilkan pada struktur jenis ini adalah satu halaman sebelumnya atau satu
halaman sesudahnya, tidak dapat dua halaman sebelumnya atau dua halaman
sesudahnya.

Gambar 1.1. Struktur Navigasi Linier

2. Struktur Navigasi Hirarki

Pada Struktur navigasi hirarki merupakan suatu struktur yang mengandalkan
percabangan untuk menampilkan data berdasarkan kriteria tertentu. Jika digambarkan,
maka struktur navigasi hirarki ada halaman web yang disebut sebagai Master Page
(halaman utama pertama). Pada halaman utama ini mempunyai halaman percabangan
yang disebut Slave Page (halaman pendukung). Dan jika halaman pendukung diklik,
maka dia akan berubah menjadi Master Page dan kemudian memiliki percabangan
halaman pendukung lainnya, dan seterusnya. Dalam struktur navigasi ini tidak
diperbolehkan adanya tampilan secara linier.

Gambar 1.2. Struktur Navigasi Hirarki

3. Struktur Navigasi Non-Linier

WEB DESAIN 3

Struktur navigasi non-linier atau struktur tidak berurut merupakan pengembangan dari
struktur navigasi linier. Pada struktur ini diperkenankan membuat navigasi bercabang.
Percabangan yang ada pada struktur nonlinier ini berbeda dengan percabangan yang
ada pada struktur hirarki, karena pada percabangan nonlinier ini walaupun terdapat
percabangan, tetapi tiap-tiap tampilan mempunyai tingkatan yang sama yaitu tidak ada
Master Page(halaman utama website) dan Slave Page(halaman pendukung website).

Gambar 1.3. Struktur Navigasi Non-LinierContoh

4. Struktur Navigasi Campuran

Struktur navigasi campuran disebut struktur navigasi bebas. Dimana didalamnya
terdapat beberapa gabungan dari struktur navigasi lainnya. Struktur navigasi campuran
ini banyak digunakan dalam membuat website, karena struktur ini dapat memberikan
tingkat interaksi yang lebih tinggi. Dan keterikatan dalam halaman website dapat
dibuat lebih efisien dan menarik.

Gambar 1.4. Struktur Navigasi CampuranContoh

Membangun Aplikasi Web
Dalam membangun sebuah pemrograman web dapat menggunakan beberapa jenis web
editor. Ada banyak jenis we editor yang dapat digunakan untuk mengelolah atau membuat
aplikasi berbasis web antara lain:
o Macromedia Dreamweaver
o Notepad++
o Sublime Text
o Frontpage
o Ultra Edit
Dalam pembahasan buku ini, menggunakan web editor Maromedia Dreamweaver, karena
mudah untuk di pelajari dan sudah terlengkapi tampilan desain.

WEB DESAIN 4

Contoh Tampilan Website

Gambar 1.5. Contoh tampilan website sekolah
Gambar 1.6. Contoh tampilan website Perusahaan

WEB DESAIN 5

Gambar 1.7. Contoh tampilan website E-Commerce

LATIHAN Membuat Wesite Dengan Google Site

1. Buka aplikasi web browser (google chrome) ketikkan alamat : https://sites.google.com.
2. Buat aplikasi web sederhana dengan google site! Dan diskusikan dengan guru kalian!

PERTAYAAN Pengenalan Website

1. Sebutkan perbedaan web static dan web dinamis!
2. Sebutkan dan jelaskan secara singkat 4 macam bentuk dasar dari peta navigasi yang

biasa digunakan dalam proses pembuatan aplikasi web!
3. Apa yang anda ketahui tentang website!
4. Sebutkan beberapa bahasa pemrograman yang di gunakan dalam pembuatan website!
5. Jelaskan secara singkat Struktur Navigasi Campuran!

WEB DESAIN 6

2 Pengenalan HTML

Indikator Hasil Belajar :
1. Siswa dapat memahami skrip HTML
2. Siswa Mampu menggunakan skrip html
3. Siswa Mampu menggunakan tag dalam penulisan skrip html
4. Siswa Mampu menggunakan tabel, penggunaan cell padding, dan cell span

Pengertian Hypertext Markup Language (HTML)

Hypertext Markup Language (HTML) adalah bahasa pemrograman yang digunakan
untuk menampilkan sebuah website. HTML termasuk dalam bahasa pemrograman gratis,
artinya tidak dimiliki oleh siapapun, pengembangannya dilakukan oleh banyak orang di banyak
negara dan bisa dikatakan sebagai sebuah bahasa yang dikembangkan bersama-sama secara
global.

Dokumen HTML adalah dokumen teks yang dapat diedit oleh editor teks apapun. Dan
disimpan dengan file extension .html . Dokumen HTML punya beberapa elemen yang
dikelilingi oleh tag-teks yang dimulai dengan symbol “ < ” dan berakhir dengan sebuah symbol
“ > ”. Sebuah file yang merupakan file HTML dapat dibuka dengan menggunakan browser
web seperti Mozilla Firefox, Microsoft Internet Explorer,Opera, Googlr Chrome, Safari dan
lain-lain.

Struktur HTML

Dokumen HTML dapat terdiri dari teks, gambar, suara ataupun video. Satu hal yang
membedakan dokumen HTML dengan dokumen lainnya adalah adanya elemen-elemen HTML
beserta tag-tagnya. Elemen dan tag ini berfungsi untuk memformat atau menandai suatu bagian
tertentu dari dokumen HTML dan juga menetukan struktur bagian tersebut dalam dokumen
HTML. Struktur dasar HTML dapat dilihat seperti gambar dibawah.

File HTML

Bagian Header

Bagian Body

Gambar 2.1. Struktur dasar HTML

WEB DESAIN 7

Elemen HTML

Pada dasarnya elemen HTML terdiri dari 2 kategori:
1. Elemen <HEAD> berfungsi untuk memberikan informasi atau mendeklarasikan
dokumen tersebut.
2. Elemen <BODY> berfungsi untuk menentukan bagaimana isi suatu dokumen
ditampilkan pada browser.

TAG HTML

Pada dokumen HTML sebuah teks bisa memuat instruksi yang ditandai dengan kode
atau lebih dikenal dengan TAG. Tag ini dinyatakan dengan sebuah tanda lebih kecil dan lebih
besar (< >). Tag biasanya merupakan sebuah pasangan yang disebut tag awal yang berfungsi
untuk membuka dan tag akhir yang berfungsi untuk menutup. Tag awal dinyatakan dalam
bentuk <nama tag> sedangkan tag akhir dinyatakan dalam bentuk </nama tag>. Sebagai
contoh jika ingin membuat teks ditampilkan menjadi tebal seperti: TAMPIL TEBAL, maka
penulisannya dilakukan dengan cara: <b>TAMPIL TEBAL</b>. Tanda <b> digunakan untuk
mengaktifkan instruksi cetak tebal, diikuti oleh teks yang ingin ditebalkan, dan diakhiri dengan
tanda </b> untuk menonaktifkan cetak tebal tersebut.

Contoh penulisan tag yang benar :

<tag 1>
Teks untuk tag ke 1

<tag 2>
Teks untuk tag ke 2

</tag 2>
</tag 1>

Jenis – jenis tag dalam HTML :

Beberapa jenis tag yang dapat di pergunakan dalam penulisan skrip html, antara lain
sebagai berikut :

Tag Kegunaan

<html> Untuk mendefinisikan sebuah dokumen HTML
<body>
<h1>…</h1> s/d Mendefinisikan body atau isi sebuah dokumen
<h6>…</h6> Mendefinisikan heading 1 sampai 6, ukuran fontsize judul
<p>….</p> yang besar sampai yang terkecil
<br> Mendefinisikan sebuah paragraph

<hr> Mendefinisikan break line / baris baru
Mendefinisikan horizontal rule pemisah antar bagian atau
<ol>…..</ol> paragraph
Mendefinisikan pembuatan order list/penomoran dengan
<ul>…..</ul> angka/huruf
Mendefinisikan pembuatan unorder list/penomoran dengan
<i>……</i> bullets
<u>……</u> Mendefinisikan format italic/huruf miring
_…..
Mendefinisikan format underline/huruf bergaris bawah

Mendefinisikan teks subscript

WEB DESAIN 8

^….. Mendefinisikan teks superscript
<img>…….</img> Mendefinisikan tampilkan gambar
<marquee>….</marquee> Mendefinisikan tulisan bergerak
<table>…………</table> Mendefinisikan pembuatan tabel

Dasar - dasar HTML

Membuat Dokumen html

Dokumen HTML dimulai dengan perintah awal <HTML>, kemudian <HEAD> dan
<TITLE>. Antara perintah <TITLE> dengan </TITLE> merupakan bagian judul dokumen
yang akan di buat. Misalnya beri judul “Web Pertamaku”, kemudian ditutup dengan perintah
<HEAD>. Ini merupakan bagian pertama dari dokumen HTML. Bagian kedua atau isi dimulai
dengan perintah <BODY> dan </BODY>. Antara kedua perintah tersebut berisi terdapat isi
dokumen HTML. Pada bagian akhir dokumen ditutup dengan perintah </HTML>.
Contoh Membuat Html, Kemudian simpan dengan nama contoh web dengan extention .html

<HTML> Hasil Tampilan
<HEAD>
<TITLE>
Web Pertamaku
</TITLE>
</HEAD>
<BODY>
Selamat Datang di Web Pertamaku
</BODY>

</HTML>

Gambar 2.2. Tampilan awal web

Contoh Skrip penggunaan Tag HTML
Buat lembar baru pada Notepad, kemudian ketikkan perintah di bawah ini. Lalu Simpan
dengan nama Contoh1.html

<!DOCTYPE html>
<html>
<head>
<title>Contoh Tag Html</title></head>
</head>
<body>
<p><B>Membuat Huruf Tebal</B></p>
<p><i>Membuat Teks miring</i></p>
<p><U> Teks Bergaris Bawah</U></p>
<p align="left">Memulai paragraf Kiri</p>
<p align="center">Memulai paragraf Tengah</p>

WEB DESAIN 9

<p align="right">Memulai paragraf Kanan</p>
<p align="Left" ><font Color="red">Belajar membuat Tks dengan warna Merah</Font></p>
<p align="Left" ><font Size = 5 Color="Blue">Belajar membuat Tks dengan warna Biru Size
25</Font></p>
<p align="center" >Menampilkan Gambar</p>
<p align="center" ><img src="../images1.jpg" width="238" height="128" /></p>
<p align="left" ><marquee>
<font size="7">Membuat Tulisan Bergerak</font>
</marquee>
</p>
</body>
</html>

Gambar 2.3. Tampilan Penggunaan Tag HTML

LATIHAN Pembuatan Web HTML

1. Buatlah halaman website dengan tema profil sekolah anda beserta pemanfaatan taq,
misal Tag Paragraf, tag huruf tebal, Tag color, Tag Tulisan berjalan dll.

2. Simpan dengan nama profil sekolah.html

PERTAYAAN Pengetahuan dasar HTML

1. Apa kepnjangan dan jelaskan pengertian HTML!
2. Jelaskan elemen-elemen yang ada pada HTML!
3. Tuliskan skrip atau perintah untuk menampilkan sebuah gambar!
4. Tuliskan perintah HTML dengan Nama Teks “ JAUHI NARKOBA YANG

MERUSAK MASA DEPAN dan ketentuannya sbb:
• Warna Teks Hijau
• Size Teks berukuran 5 dan teksnya tebal
• Tulisan bergerak

WEB DESAIN 10

3 Web Desain dengan Photoshop

Indikator Hasil Belajar :
1. Siswa dapat mempelajari aplikasi photoshop
2. Siswa Mampu membuat web desain
3. Siswa Mampu mempelajari fitur-fitur aplikasi photoshop

SeWeb Desain
Dalam membuat web desain tidak hanya tampilan grafik dan warna halaman web saja,

tapi lebih dari itu meliputi manajemen isi, struktur web, navigasi,dan tata letak (layout). Situs
Web mempunyai tujuan utama yaitu menyajikan informasi.

Keindahan tampilan dalam pembuatan web sangat di perhatikan dan sangat penting,
karena umumnya pengunjung menilai awal sebuah situs web dari tampilan baru ke isi content.
Umumnya pembuatan web meliputi empat tahap yaitu perancangan isi, perancangan Situs,
perancangan halaman, dan perancangan tataletak (layout)
Kebutuhan Sistem dan Aplikasi
Untuk membangun sebuah desain website dapat menggunakan beberapa perangkat lunak
pengembangan web yang biasa digunakan seperti Frontpage, Adobe Dreamweaver CS3.
Dalam modul ini menggunakan aplikasi Adobe Dreamweaver CS3 sebagai perangkat lunak
utama untuk pemrograman dan Adobe Photoshop CS3 untuk membuat dan mengedit gambar
atau desain.
Membuat Layout awal desain web
Langkah- langkah dalam membuat desain web di photoshop CS3 adalah sbb:

1. Jalankan aplikasi photoshop anda dan siapkan sebuah kanvas baru, caranya pilih file -
new lalu gunakan setting berikut: Width : 700 pixel Height : 875 pixel Resolution : 72
pixel/inch Background Content : Transparent

WEB DESAIN 11

Gambar 3.1 tampilan kanvas baru photoshop
2. Pilih rounded retangle tool pada tool panel

kemudian buat bidang berbentuk segi panjang vertical seperti pada gambar dibawah

Gambar 3.2 bidang berbentuk persegi panjang
3. Klik kanan pada shape 1 (bidang yang di buat) pada bagian panel layer disebelah pojok

kanan bawah kemudian pilih blending option -- click gradient dan pilih gradasi warna
yang anda sukai... pastikan warna bawah adalah warna dasar putih

WEB DESAIN 12

Gambar 3.3 Kotak Dialog membuat gradien
4. Hasil dari gradasi yang anda buat akan menghasilkan gambar seperti berikut :

Gambar 3.4 Tampilan hasil gradient

5. Buatlah bidang untuk panel menu dengan rounded retangle tool pada tool panel
seperti sebelumnya beri sentuhan warna dan gradiasi yang berbeda dengan layer
pertama, kemudian tempatkan diatas sebagai Header dan membuat navigasi menu.
Seperti gambar dibawah ini

Gambar 3.5 Membuat Header

WEB DESAIN 13

6. Tambahkan Tampilan Gambar untuk mempercantik desain pada website, untuk gambar
sesuaikan dengan tema web yang akan di buat

Gambar 3.6 Memasukkan gambar
7. Buat teks pada header tersebut, Teks tersebut bisa title atau judul web untuk mengetahui

indentitas website tersebut. Sebagai contoh saya memberi Judul Fauzi’Site yang di
deskripsipnya X-Kom.net

Gambar 3.7 Membuat teks Judul
8. Tambahkan Navigasi menu pada header tersebut seperti Home, Profil, Galery dan

kontak

Gambar 3.8 Membuat Membuat Navigai menu
9. Setelah membuat Header langkah selanjutnya menyimpahasil desaindengan Pilih

File->Save For Web

WEB DESAIN 14

Gambar 3.9 Menyimpan File for web
10. Muncul wizard seperti berikut

Gambar 3.10 Menyimpan File for web
11. Pada opsi dibawah save, anda bisa menentukan format gambar yang akan di save

mulai dari gif, png, jpg.

Gambar 3.11 Menyimpan File for web
WEB DESAIN 15

12. Apabila sudah memilih sebelum di save beri nama file anda dengan index, pilih opsi
HTML and Images, simpan layout tersebut pada satu folder dan beri nama
Websiteku
Latihan
Gambar 3.12 Tampilan Save As

13.Untuk design layout dengan menggunakan photoshop sudah selesai dan selanjutnya

anda tinggal melakukan mark-up atas file Latihan.html yang telah kita save tadi
dengan Adobe Dreameaver CS 3.

Gambar 3.12 Tampilan Save As

WEB DESAIN 16

LATIHAN Membuat Layout Web

1. Buatlah Desain Layout website dengan Adobe Photoshop CS 3 dengan tema profil
kalian masing-masing.

2. Simpan dengan nama profil.html

PERTAYAAN Desain Layout Adobe Photoshop

1. Sebutkan 4 tahapan dalam pembuatan Website!
2. Sebutkan langkah-langkah untuk membuat gradiasi pada adobe Photoshop CS 3!
3. Sebutkan langkah-langkah untuk menyimpan hasil pembuatan layout pada adobe

Photoshop CS3!
4. Jelaskan fungsi rounded retangle pada panel tools yang ada di aplikasi Photoshop CS3!

WEB DESAIN 17

4 Mengenal Adobe Dreamweaver CS3

Indikator Hasil Belajar :
1. Siswa dapat merancang struktur, isi dan Navigasi web
2. Siswa dapat mengenal menu adobe dreamweaver CS3 dan desain web
3. Siswa dapat membuat situs web sesuai struktur yang sudah disiapkan

Perancangan Struktur, Isi dan Navigasi Web
Dalam pembuatan sebuah situs web diawali dengan melakukan perancangan struktur

dari situs yang akan dibangun, kemudian dilanjutkan dengan perancangan isi dari setiap
halaman web dan navigasi atau hubungan antar halaman yang akan dibuat untuk ditampilkan,
sehingga memudahkan pengunjung yang akan mengakses web dalam memperoleh suatu
informasi
Perancangan Struktur Web Personal

Halaman Utama

Profil Galeri informasi kontak

Gambar 4.1 Rancangan struktur

Perancangan Isi (Content Desain)

Untuk membangun sebuah website berdasarkan struktur gambar 4.1 diatas, kita harus
mempersiapkan isi dari dokumen yang diperlukan guna melengkapi informasi yang akan
ditampilkan, adapun dokumen tersebut adalah :

1. Halaman utama : merupakan tampilan yang akan muncul pada saat alamat situs website
di kunjungi oleh pengunjung, pada halaman ini dapat diisi dengan informasi yang berisi
sekilas informasi yang akan di sajikan dalam halaman homepage

2. Profil : berisi informasi mengenai profil dari pemilik website
3. Galeri : dokumen ini berisi informasi mengenai foto/gambar yang akan ditampilkan

sebagai kelengkapan informasi web
4. Informasi : dokumen ini berisi tentang informasi-informasi yang akan di tampilkan di

web, sehingga pengunjung lebih mudah untuk mencari artikel atau informasinya
5. Kontak :dokumen ini berisi mengenai kontal atau alamat yang bisa di hubungi oleh

pencari informasi.

WEB DESAIN 18

Perancangan Navigasi ( Link antar halaman)
Navigasi merupakan hubungan atau link antara halaman satu dengan halaman yang lainnya
dalam website yang di buat, hal ini dibuat agar dapat memudahkan pengunjung website
dalam mencari informasi.

Navigasi (link antar
halaman)

Gambar 4.2 Tampilan Navigasi

MDenalgaemnaplemdabnuamtaennsgegbuuanhaksiatunsAwdeobbdeiaDwraeamweaver CS3
Adobe Dreamweaver adalah program yang digunakan untuk membuat atau menyunting

halaman web. Software Dreamweaver dikeluarkan oleh Adobe System. Aplikasi ini banyak
digunakan oleh para programmer, desainer dan developer web dikarenakan kemudahan dalam
penggunaanya, kelengkapan fiturnya dan juga dukungannya terhadap teknologi terkini.

Adobe Dreamweaver menyediakan fitur editor WYSIWYG (What You See is What You
Get) atau dalam bahasa kesehariannya disebut Design View. Maksudnya adalah, tampilan hasil
akhir web kita nanti akan sama dengan tampilan pada saat proses perancangan halaman web.
Dengan segala fitur yang ada pada Adobe Dreamweaver, membuat suatu web bukanlah hal
yang sulit. Kita tidak perlu menguasai berbagai macam bahasa pemrograman web seperti
HTML, CSS, Javascript, PHP, dan sebagainya. Cukup mengetahui dasar dasarnya saja, karena
didalam aplikasi ini sudah disediakan alat alat otomatis.

Selain itu, aplikasi ini juga menyediakan 3 macam tampilan yaitu Code View, Design
View dan Split View. Code View cocok untuk para programmer yang terbiasa dengan kode
kode pemrograman web. Sedangkan Design View cocok untuk para Designer yang terbiasa
dengan visual. Jika ingin menggunakan keduanya, bisa memilih Split View.
Fungsi Adobe Dreaweaver CS3
Adobe Dreamweaver mempunyai berbagai macam kegunaan yaitu sbb:

• Untuk mendesain situs web
• Untuk membuat program berbasis web
• Untuk membuat template blog
• Untuk membuat situs web tanpa bersentuhan langsung dengan bahasa pemrograman.

WEB DESAIN 19

Tampilan dan menu adobe Dreamweaver CS3

Panel Groups

Insert Bar Document Toolbar

Document Windows

Files panel

Property Inspektor

Gambar 4.3 Tampilan menu Adobe Dreamweaver CS3

• Insert Bar : berisi tombol untuk memasukkan berbagai jenis objek seperti gambar, form,

tabel, layer, dll ke dalam dokumen yang akan dibuat

Insert bar memiliki beberapa pilihan menu yang didalamnya berbentuk ikon yang

berfungsi untuk membantu dalam pembuatan web, menunya adalah sebagai berikut:

- Menu Common - Data

- Layout - Text

- Forms - Spray( Flash Element)

Gambar 4.3 Tampilan Insert Bar
• Document Window : pada document window inilah halaman website akan di buat

sehingga harus memahami apa saja yang ada di dalamnya
• Document Toolbar : terletak di atas Document Window, yang menampilkan dokumen

website yang dibuka. Pada document toolbar juga terdapat tombol minimize, restore, dan
close yang digunakan untuk menutup dokumen webseite yang akan dibuka

Gambar 4.4 Tampilan Insert Bar Panel Groups

• Panel Groups : berfungsi untuk menampung semua panel yang ada

didalam satu jendela sehingga tampilan akan menjadi lebih efisien

WEB DESAIN 20

• Panel Files : digunakan untuk membuka dokumen website secara langsung tanpa harus
kemenu Explorer.

• Property Inspector : berfungsi untuk melakukan perubahan – perubahan pada objek
dengan mengisikan parameter-parameter pada obyek yang diinginkan Property
Inspector terdiri dari beberapa jenis property yaitu :
- Page Property Inspector
- Image Property Inspector
- Table Property Inspector
- Form Property Inspector
- Flash Property Inspector

Membuat Situs Web
Sebelum membuat l0kal Site buatlah folder baru dimana dimana akan mendefinisikan folder
tersebut sebagai lokal site, yang selanjutnya folder ini akan digunakan untuk pengembangan
website yang akan dibuat.
Langkah-langkah untuk membuat lokal site sebagai berikut:

1. Buka aplikasi Adobe Dreameaver CS3
2. Pada menu bar Pilih menu site – New Site
3. Tampil menu dialog Site defination, ketikan nama kalian, misal Fauzi Site – kemudian

pilih next

Gambar 4.5 Tampilan Menu Dialog Sites Definition
4. Pada pertayaan Do You Want To Work With a Server Technology Such as ColdFusion,

ASP.Net, ASP, JSP or PHP? Klik No – kemudian pilih Next
5. Pada pertanyaan How Do You Want To Work With Your Files During Development ?

pilih pada pilihan Edit Directly on Server Using local Network
6. Isikan kotak dialog dengan D:\Desktop\Fauzi Site\websiteku, kemudian pilih next

WEB DESAIN 21

Gambar 4.6 Tampilan Menu pilihan dan penamaan file Sites Definition
7. Muncul tampilan menu Site definition – pilih Done. Selesai mendefinisikan lokal Site

yang akan digunakan dalam pembuatan websites

Gambar 4.7 Tampilan Menu Sites Definition
Untuk membuat situs website yang lengkap terdapat banyak file seperti file HTML, halaman
web sendiri dan juga file lainnya seperti gambar,database, video atau audio. Pada Adobe
Dreamweaver pengaturan ini sudah disediakan dengan cara dalam pembuatan website harus
dimulai dengan pembuatan /mendefinisikan loka site.
Untuk pembuatan website di Adobe Dreamweaver langkah-langkahnya adalah sebagai
berikut :

• Klik menu Start – All Programs – Adobe Master Collection - Adobe
Dramweaver CS3

• Pada menu Create New – pilih HTML seperti gambar dibawah ini

WEB DESAIN 22

Gambar 4.8 Tampilan Jendela kerja Adobe Dreamweaver CS3

Menbuat Judul Halaman Web
Untuk membuat sebuah judul halaman web dengan kata : WELCOME WEBSITE KU dengan
jenis font Arial, size 26, warna teks merah dan posisi teks center adalah sbb:

1. Ketikan teks “ WELCOME WEBSITE KU” didalam jendela kerja dreamweaver
2. Blok semua teks, kemudian lihat pada menu properties yang ada di bawah jendela kerja.

Lakukan pengeditan sesuai yang ditentukan diatas
3. Klik Font pilih Arial , bold, ubah size, warna, posisi teks judul sesuai yang ditentukan.

Gambar 4.9 Tampilan Judul
Menambahkan Horisontal Line
Untuk menambahkan horisontal line pada halaman web langkah-langkahnya adalah sbb:

1. Letakkan posisi kursor pada baris dimana Horisontal Line akan di letakkan
2. Kemudian pada menu bar pilih Insert -HTML – Horizontal Rule
Untuk mengatur properti dari Horisotal Line adalah sbb:
• Klik pada objek Horisontal Line
• Pada menu properties yang ada di bawah jendela kerja, ubah parameternya sesuai

kebutuhan

Gambar 4.10 Properties Horizontal Rule

WEB DESAIN 23

Menambahkan Image/ Gambar pada Website
Berikut langkah-langkah untuk menambahkan image/gambar pada halaman website :

1. Pastikan image/gambar yang akan ditambahkan halaman website tersedia dalam satu
folder web kita. Untuk image/gambar gunakan file ekstensi .jpeg/.jpg, .gif, .png

2. Letakkan posisi kursor pada baris dimana file gambar akan ditampilkan
3. Pada menu bar pilih insert – image (akan muncul menu dialog) – pilih gambar yang

akan di masukkan kedalam halaman web.

Gambar 4.8 kotak dialog select image
4. Jika sudah terpilih gambar yang akan ditampilkan pilih OK
5. Untuk mengatur besar kecilnya gambar, tata letak gambarsesuai kebutuhan pilih menu

properties yang ada dibawah jendela kerja. Seperti bgambar dibawah ini

Gambar 4.9 Properti gambar/image
Menyimpan dokumen halaman web
untuk menyimpan dokumen halaman web yang sudah dibuat langkah-langkahnya adalah
sebagai berikut :

1. Pada menu bar pilih File – Save As (muncul kotak dialog)
2. Pada nama file ketikkan isian File name misal : index
3. Pilih tombol Save

WEB DESAIN 24

Gambar 4.10 Tampilan halaman utama (index.html)
LATIHAN Melengkapi Halaman Website
Untuk melengkapi halaman website kalian, buatlah dokumen-dokumen halaman web yang
lainnya seperti Home, Profil, galeri dan kontak. (sesuai struktur dokumen yang dijelaskan
sebelumnya) simpan dokumen-dokumen web tersebut pada folder File dan untuk gambar
yang ditampilkan, simpan semua kedalam folder images
Membuat Hyperlink
Hyperlink adalah sebuah link dari suatu dokumen ke dokumen lainnya. Dengan
menggunakan hiperlink ini dapat membuat navigasi dari sebuah halaman website sehingga
pengunjung dapat dengan mudah mencari informasi dengan cepatsesuai kebutuhannya.
Untuk memeuat hyperlink dalam contoh tersebut lakukan lankah-lankah berikut ini :

1. Tambahkan teks pada website tadi seperti gambar dibawah ini

Gambar 4.10 Tampilan teks hyperlink
2. Blok teks Profil kemudian dari menu bar klik insert – Hyperlink (muncul jendela

menu hyperlink

WEB DESAIN 25

Gambar 4.11 Jendela menu hyperlink
3. Pilih gambar folder dan arahkan pada file yang akan dimaksud untuk menuju halaman

websitenya, kemudian klik OK

Gambar 4.12 Tampilan menu Hyperlink

LATIHAN Melengkapi Hyperlink Halaman Website
Lengkapi Navigasinya dengan membuat link pada setiap halaman web untuk semua dokumen
yang telah dibuat (Home.html, Profil.html, Galery.html, Kontal.html)
Contoh tampilan navigasi setiap halamana akan muncul sebagai berikut:

PERTAYAAN Menggunakan Aplikasi Adobe Dreameaver CS3
1. Sebutkan fungsi dalam penggunaan aplikasi Adobe Dreameaver CS3!
2. Sebutkan jenis-jenis menu yang ada di Insert Bar !
3. Jelaskan langkah-langkah untuk menambahakan image/gambar pada halaman web!
4. Sebutkan fungsi dari Panel Group dan Panel Files
5. Jelaskan langkah-langkah untuk membuat hyperlink pada halaman web!

WEB DESAIN 26

5 Pengaturan Layout Halaman Web

Indikator Hasil Belajar :
1. Siswa dapat mengenal tata letak (layout) dalam pembuatan halaman web
2. Siswa dapat membuat tata letak halaman web menggunakan tabel
3. Siswa dapat mengenal cara menyisipkan baris atau kolom tabel dalam pembuatan

layout web

Mengenal Tata letak (Layout) halaman Web

Pembuatan website dibutuhkan keterampilan dalam melakukan penataan untuk
meletakkan isi (content) pada halaman web, supaya halaman web terlihat lebih baik dan cantik,
untuk itu di perlukan pengaturan tataletak (layout) halaman web. Penggunaan tabel akan sangat
membantu dalam penataan halaman web ini, terutama untuk pembuatan tataletak agar isi daarai
halaman web baik itu berupa teks, gambar atau dokumen form bisa tertata dengan rapi dan
baik.
Susunan tata letak (layout) pada halaman website terdiri dari beberapa elemen yaitu :

1. Elemen Header
Seperti namanya, merupakan elemen yang berisi judul dan penjelasan lain dokumen.
Biasanya elemen ini diisikan dengan logo website, menu-menu global (seperti login dan
logout), maupun nama halaman yang sedang ditampilkan.

2. Elemen Navigation
Elemen navigasi, yang memberikan akses navigasi ke halaman-halaman lain dalam web.

3. Elemen Sidebar
Elemen pendukung konten, dapat berupa pembantu navigasi konten, ataupun berbagai
hal lain seperti daftar konten lain, iklan, atau menu tambahan. Sidebar dapat berada di
kiri atau kanan konten, atau bahkan di kiri dan kanan konten, sesuai dengan kreatifitas
perancangnya.

4. Elemen Konten
Isi utama dari dokumen web. Pengguna biasanya datang ke web untuk melihat teks yang
berada pada bagian ini.

5. Elemen Footer
Bagian penutup dari website, yang dapat saja berisi informasi lain tentang website, seperti
lisensi pengunaan, sitemap, ataupun link ke website lain.

WEB DESAIN 27

Gambar 5.1 Tampilan struktur element layout

Tataletak (layout) menggunakan tabel

Setelah memahami dan mengetahui tata letak ( Layout) dari sebuah halaman web secara umu, sekarang
kita akan belajar bagaimana menata tabel untuk kebutuhan dalam pembuatan layout. Kita dapat
menggunakan tabel untuk melakukan desain layout agar menghasilkan berbagai bentuk tampilan
halaman web yang lebih menarik dan sesuai dengan keinginan pembuat.

Pertama kita harus mengetahui bagaimana cara memasukkan / membuat tabel didalam halaman web
yang akan kita bangun. Langkah-langkahnya adalah sebagai berikut

1. Buka aplikasi Adobe Dreameaver CS3 – pilih Create New – HTML
2. Pada menu bar, klik Insert – table, akan muncul kotak dialog tabel sepeti gambar dibawah ini.

Gambar 5.2 kotak dialog tabel

3. Mengisi parameter yang ada sesuai dengan kebutuhan layout tabel yang di inginkan

Pada isian tabel size isikan

Row : 3 Columns : 2 tabel Width : 100 , ubah pilihan pixel jadi persen

Border Thickness : 0

4. Setelah selesai di isi, kemudian klik OK, akan muncul sebuah tabel seperti gambar di bawah

ini.

WEB DESAIN 28

Gambar 5.3 Tampilan tabel pada lembar kerja
5. Lakukan penggabungan antara 2 kolom yang terletak pada baris pertama dan baris ketiga

dengan cara : Blok kedua kolom pada baris pertama – klik kanan pada mouse – tabel –
merge Cells

Gambar 5.4 Merge cells tabel
6. Lakukan hal yang sama seperti perintah no 5 untuk baris yang ketiga
7. Atur lebar tabel dengan meletakkan kursor mouse pada garis batas antar sel pada tabel,

kemudian geser mouse hingga membentuk seperti layout gambar dibawah ini.

Gambar 5.5 Tampilan layout tabel
Mengatur layout dan isi pada halaman web
Setelah membuat layout dengan tabel pada dokumen web, langkah selanjutnya mengatur layout
isi dari sebuah tabel. Untuk mengatur layout isi, maka kita menggunakan perintah tabel untuk
membuat tabel pada bagian kolom maupun baris yang telah di buat tadi agar penataan isi dari
tabel dapat kita atur sesuai dengan kebutuhan .

WEB DESAIN 29

Untuk membuat Menu pilihan dalam tabel adalah sebagai berikut :
1. Klik pada bagian tabel yang akan di buat menu pilihan
2. Atur posisi teks maupun tabel pada kolom tersebut kemudian klik tombol Ver – pilih
Top yang terdapata pada menu Property

Gambar 5.6 Tampilan layout tabel
3. Untuk mensplit baris pada tabel yang akan kita buat menu pilihan :

Klik kanan mouse pada tabel yang dipilih – Pilih Table -pilih Split cell, akan muncul
jendela menu split - pilih split cells into : Rows, Number off rows : 5

Gambar 5.7 Split Tabel
4. Atur posisi Layout supaya rapi dengan cara seleksi 4 tabel, kemudian pada jendela

properties yang ada di bawah isikan W : 150, H : 20
5. Ketikan dalam tabel yang dibuat pada setiap barisnya : HOME, PROFIL, GALERI,

KONTAK
6. Atur posisi teks agar berada di tengah-tengah tabel dan di beri huruf tebal (bold

- Klik pada baris teks – pilih Align Center
- Seleksi semua baris teks – pilih Bold pada properties

Gambar 5.8 Pengaturan Layout tabel

WEB DESAIN 30

LATIHAN Tata Letak (Layout) Halaman Web
1. Buatlah kembali halaman utama website anda, gunakan tabel untuk pengaturan layout
dari halaman web tersebut, dengan komposisi
• Bagian Atas adalah Judul dari Halaman WEB, bisa di beri gambar/ tulisan
• Bagian Kiri berisi Menu-menu
• Bagian kanan berisi konten yang akan di tampilkan misal Home berarti konten
tentang halaman awal web, Profil berisi tentang konteng profil pembuat web,
perusahaan, Galeri, berisi konten gambar atau foto-foto yang akan ditampilkan
• Bagian bawah berisi informasi kepemilikan dari website tersebut.
2. Buat juga menu navigasi yang menghubungkan setiap informasi yang ada pada setiap
halaman web yang ada ( Home, Profil, Galeri, Kontak)

Gambar 5.9 Contoh tampilan website home
PERTAYAAN Pengaturan Tata Letak (Layout) Halaman Web

1. Sebutkan dan jelaskan 4 elemen dalam susunan pembuatan layout halaman web!
2. Jelaskan cara membuat tabel pada adobe Dreamweaver CS3 dengan baris 5 kolom 3!
3. Sebutkan perbedaan Header dan Footer pada elemen layout!
4. Jelaskan cara untuk menyisipkan kolom pada pembuatan layout!
5. Jelaskan cara mengatur teks agar di tengah dan memberi huruf tebal pada pembuatan

web!

WEB DESAIN 31

6 Penggunaan Layer dan Form

Indikator Hasil Belajar :
1. Siswa dapat mengenal konsep dasar layer
2. Siswa dapat melakukan pembuatan, pengeditan dan pengelolaan Layer
3. Siswa dapat mengenal berbagai macam bentuk dan komponen Form
4. Siswa dapat memahami dan melakukan pembuatan form

Mengenal Kosep Layer

Layer berarti lapisan, dalam Aplikasi Adobe Dreamweaver kita dapat merancang sebuah
halaman website dengan menggabungkan objek dalam bentuk layer-layer yang dapat disusun
sehingga menampilkan sebuah halaman website yang cantik dan menarik. Layer-layer ini dapat
berupa Teks, gambar, animasi dan lain sebagainya. Yang paling menarik dalam Layer ini
adalah layer dapat diletakkan atau di atur dimana saja sesuai dengan yang di kehendaki oleh
pembuat web.
Layer-layer yang ada sifatnya akan saling menimpa layeh dibawahnya, sehingga memudahkan
kita dalam mendesain sebuah halaman website yang baik dan menarik

Membuat Layer

Pada Adobe Dreamweaver CS3 ada beberapa cara yang dapat kita gunakan untuk membuatdan
mengatur layer sesuai dengan keinginan kita. Berikut cara untuk membuat dan mengelola layer adalah
sebagai berikut :

1. Buka aplikasi Adobe Dreamweaver CS3 dan buka halaman baru.
2. Pada menu bar, pilih Layout – klik draw app div, kursor mouse akan berubah menjadi tanda +

lihat gambar dibawah ini

Gambar 6.1 Layout menu layer
3. Buat sebuah kontak dengan melakukan klik kiri mouse, kemudian drag dengan kondisi klik kiri

mouse ditekan kemudian geser kekanan bawah sehingga kan membentuk sebuah kotak.
4. Isi layer dengan gambar, caranya klik pada menu bar, insert – image muncul kotak dialog

images, kemudian pilih gambar yang akan dijadikan layer lalu klik OK
5. Atur ukuran layer sesuai dengan yang di inginkan

Gambar 6.2 Tampilan Layer

WEB DESAIN 32

Memberi nama, Mengganti urutan dan Mengedit Layer
Memberi Nama Layer
Jika sudah memasukkan banyak layer kedalam dokumen website, mungkin kita lupa diposisi
urutan mana layer yang mungkin kita edit, untuk itu sebaiknya setiap layer yang sudah kita
buat di beri nama agar lebih mudah mengetahui. Berikut cara memberi nama pada layer :

1. Perhatikan pada layer panel di sebelah kanan, kemuadian double klik layer yang akan
di beri nama.

2. Kemudian ketikkan nama layer sesuai ketentukan, akhiri dengan menekan tombol enter
Mengganti Urutan Layer
Secara default layer yang baru akan berada di paling atas, kita dapat mengubah posisi layer
untuk menata urutan dari layer sesuai dengan kebutuhan, untuk mengubah posisi layer dapat
dilakukan dengan cara Klik pada layer yang akan diubah urutannya kemudian lakukan drag ke
atas atau ke bawah untuk mengubah posisis layernya sesuai ketentuan.
Mengedit Layer
Untuk mengedit layer membesarkan atau mengecilkan caranya adalah cukup dengan
melakukan klik mouse pada layer yang akan diedit, maka layer tersebut sudah bisa di lakukan
pengeditan sesuai kebutuhan.

Gambar 6.3 Tampilan beberapa layer dan Layer Panel

Mengenal Berbagai macam bentuk Form

Sebuah halaman website biasanya akan menyertakan sebuah form untuk mendapatkan informasi atau
masukkan dari pengunjung website. Fungsi dari form ini secara umum adalah sebagai perantara untuk
berinteraksi dengan pengunjung website kita. Contoh penggunaan form pada website antara lain :

➢ Buku Tamu ( Guestbook )
➢ Form pendaftaran atau Registrasi
➢ Keamanan untuk masuk halaman web dengan mengisi katasandi (username & password)
➢ Mesin Pencarian (seach Engine) dan lain-lain

WEB DESAIN 33

Gambar 6.4 Contoh tampilan beberapa Form
Mengenal Komponen Form

Sebuah Form terdiri dari beberapa komponen yang disesuaikan dengan kebutuhan atau fungsi dari form
yang bersangkutan. Komponen form tersebut antara lain :

1. Text Field : berfungsi sebagai kotak input berupa teks, dengan jumlah teks yang ditampilkan
terbatas.

Gambar 6.5 Text Field
2. Password Field : digunakan untuk menginput data password

Gambar 6.6 Password Field
3. Text Area : digunakan sebagai input data teks yang lebih dari satu baris

Gambar 6.7 TextArea
4. Radio Button : digunakan untuk memberi input data pilihan user, input pilihan cukup dengan

melakukan klik mouse

Gambar 6.8 Radio Button
5. Chek Button : digunakan untuk memberikan input data pilihan kepada user. Input pilihan dapat

lebih dari satu. Input pilihan dilakukan dengan melakukan klik mouse pada pilihan-pilihan yang
ingin diisikan.

Gambar 6.9 Radio Button

WEB DESAIN 34

6. List/Menu : berisikan daftar pilihan yang diberikan, User hanya dapat memilih satu pilihan

Gambar 6.10 List Menu
7. File Field : berbentuk kotak panjang disertai tombol browse dibagian kanan. Digunakan untuk

mencari file yang berada di komputer lokal. Komponen ini biasa digunakan upload file

Gambar 6.11 File Field
8. Submit Button : Merupakan komponen form yang berupa tombol yang digunakan untuk

menjalankan perintah untuk mulai memproses input data yang dimasukkan oleh user.

Gambar 6.12 Submit
9. Reset Button : digunakan untuk mereset semua data yang telah dimasukkan kedalam form

sehingga form kembali kosong.

Gambar 6.13 Reset
Membuat Text Field dan Password Field
Cara membuat text file dan password field hampir sama, perbedaannya hanya pada tipe yang
digunakan, untuk paswword field tipe yang di pilih adalah paswword.

1. Pada menu bar klik Insert – Form – Text Field, muncul kotak dialog isikan parameter
label : Username : kemudian klik OK

2. Buat satu Text Field lagi, untuk parameter label ketik Password
3. Pada Properties yang ada di bawah, untuk password pada bagian type, pilih password

Gambar 6.14 Pembuatan & Penggunaan Text Field dan Password Field
Membuat Text Area
Untuk mebuat Form Text Area adalah sbb:

1. Biar terlihat rapi dalam pembuatan Form terlebih dahulu buat tabel dengn rows : 3
Coloums : 2, kolom pertama baris pertama ketikkan Nama :, baris kedua Alamat
Email, dan baris ketiga Komentar
WEB DESAIN 35

2. Pada properties tabel yang di bawah, untuk Border isikan 0
3. Masukkan text field pada kolom kedua baris satu dan dua
4. Masukkan Text Area pada kolom 2 dan baris ketiga dengan cara pada menu bar klik

Insert – Form – Text Area

Gambar 6.15 Pembuatan Text Area

Gambar 6.16 Tampilan Text Area
Membuat Radio Button
Berikut langkah-langkah dalam membuat form radio button :

1. Ketikkan pertayann yang akan diajukkan untuk memilih radio button misal Hobi apa
yang paling kamu sukai?

2. Klik tombol radio Group pada menu Insert Bar, muncul kotak dialog
3. Untuk menambahkan pilihin tekan tombol +

Gambar 6.17 Pengisian item pilihan Radio Button
WEB DESAIN 36

4. Bila sudah selesai tekan tombol OK

Gambar 6.18 Pengisian item pilihan Radio Button

Membuat Check Box

Untuk membuat Check Box langkah-langkahnya sebagai berikut :
1. Ketikkan pertayann yang akan diajukkan untuk memilih radio button misal Pelajaran
apa yang paling kamu sukai?
2. Klik tombol Check Box pada form Insert Bar, muncul kotak dialog
3. Ketikkan teks pilihannya pada label misal : Komputer
4. Ulangi langkah 2 dan 3 untuk isian teks pilihan berikutanya sehingga seperti gambar
dibawah ini

Gambar 6.19 Tampilan penggunaan Check Box

Membuat List /Menu

Berikut langkah-langkah dalam membuat List/menu antara lain :
1. Pada menu bar Insert – Form – List/Menu, muncul kotak dialog isikan pada label : Kota
Kelahiran
2. Klik kotak List/menu dan perhatikan Properties yang ada di bawah
3. Pada bagian type gunakan list, untuk membuat Scrolling List
4. Tekan tombol List Values, muncul kotak dialog
5. Isikan Label dan Value seperti gambar dibawah ini, tekan tombol OK untuk
mengakhirinya.

Gambar 6.20 Memasukkan List Value

WEB DESAIN 37

Gambar 6.21 Tampilan List/Menu

Membuat List /Menu
Form Button merupakan komponen dari sebuah form berbentuk Button/Tombol yang berfungsi
untuk mengeksekusi atau memulai pengiriman data ke server (Submit) stsu mengahapus isi
dari form menjadi kosong (reset).
Langkah-langkah mebuat sumbit Button addalah sebagai berikut :

1. Gunakan file latihan sebelunya mis: Latihan membuat Text Area
2. Pilih tombol Button pada menu Insert Bar, muncul kotak dialog klik OK
3. Klik tombol Submit dan lihat properties yang ada dibawah
4. Pada bagian Value ketik Kirim dan bagian Action pilih Submit form
Untuk membuat Reset Button langkah-langkah sebagai berikut :
1. Ulangi langkah 2 dan 3
2. Pada bagian Value ketik Reset dan bagian Action pilih reset form

Gambar 6.22 Button Form

LATIHAN Penggunaan Layer dan Form

3. Buatlah Halaman web yang berupa form pendaftaran member baru, adapun informasi
form nya adalah sbb:
• Nama Lengkap menggunakan Text Field
• Username menggunakan Text Field
• Password menggunakan Password Field
• Email menggunakan Text Field
WEB DESAIN 38

• Alamat menggunakan Text Area
• Tempat lahir menggunakan Text Field
• Tanggal lahir menggunakan Text Field untuk type nya di rubah Text Field

menjadi Date pada script HTML

• Jenis Kelamin menggunakan Radio Button
• Agama menggunakan List/Menu
• Hobi menggunakan Check Box
• Untuk Pengiriman datanya gunakan Submit dengan label Kirim
• Untuk Pengiriman datanya gunakan Reset dengan label Batal

Gambar 6.23 Contoh tampilan Form Pendaftaran peserta baru
PERTAYAAN Penggunaan Layer dan Form

1. Jelaskan langkah-langkah untuk mengedit layer!
2. Jelaskan dengan singkat langkah-langkah untuk membuat layer pada halaman Web!
3. Jelaskan Fungsi dari Form pada HTML!
4. Sebutkan dan jelaskan 5 fungsi dari komponen yang digunakan untuk membuat form!

Berikan contoh penggunaan form apa saja yang ada pada website!
WEB DESAIN 39

7 Bekerja dengan Frame

Indikator Hasil Belajar :
1. Siswa dapat mengenal Frame dan Framset
2. Siswa dapat memahami kelebihan dan kekurangan sebuah Frame
3. Siswa dapat membuat, mengelolah dan menggunakan halaman web menggunakan

Frame

Frame pada halaman web

Frame dalam halaman web berfungsi sebagai pembagi jendela browser menjadi beberapa
bagian. Setiap bagian dari frame tersebut dapat menampilkan halaman web yang berbeda.
Dengan mennggunakan fame kita dapat mengatur posisi tampilan web sesuai dengan
kebutuhan. Selain itu penggunaan frame menghindari pengulangan objek yang sama pada
setiap halaman webyang ditampilkan

Gambar 7.1 Alur Frame
Terdapat 4 buah Frame dalam pembuatan sebuah website antara lain:

1. Frame Atas berfungsi untuk identitas baik berupa Nama, logo, gambar, slogan dan
sebagainnya

2. Frame Bawah sebagai informasi/ keterangan kepemilikan dari website tersebut
3. Frame Kanan berfungsi sebagai tampilan menu navigasi
4. Frame Kiri berfungsi untuk menampilkan isi dari halaman website.

Seperti yang telah dibahas diatas bahwa frame adalah suatu bagian halaman pada sebuah
website, sedangkan Framset merupakan halaman website yang menampung semua frame yang
ada dari halaman web. Halaman website yang berfungsi sebagai frameset ini bertugas untuk
mengatur jumlah frame yang terdapat didalamnya, mengatur posisi, ukuran dan juga
keterangan nama file-file frame didalamnya.
Kelebihan dan kekurangan sebuah Frame

Kelebihan dari sebuah Frame adalah :

6. Tidak memerlukan pengulangan objek yang sama dalam satu halaman web
7. Membuat akses halaman web menjadi lebih cepat
8. Tiap Frame dapat diatur untuk memiliki scroll bar sendiri sehingga user dapat melihat jendela

browser utama
Kekurangan dari sebuah Frame adalah

1. Alamat url file yang terdapat didalam frame tidak terlihat oleh browser

WEB DESAIN 40

2. Pada halaman web terdiri banyak file sehingga harus berhati-hati dalam memberi nama
pada masing-masing file

Cara membuat Frame baru adalah sebagai berikut:
• Buka aplikasi Adobe Dreamweaver CS3
• Pada menu Create Pilih Page From Sample – Frameset – pilih halaman yang sesuai
• Pilih Create untuk membuat Frame

Gambar 7.2 Tampilan Frameset
Mengatur Frame
Setelah Frame terbentuk pada halaman web, langkah selanjutnya mengatur frame tersebut
sesuai dengan kebutuhan web,caranya adalah sebagai berikut :

1. Pada frame yang sudah dibuat,letakkan kursor pada garis batas frame hingga kursor
berubah menjadi tandapanah 2 arah

2. Drag sesuai yang di ingikan untuk mengubah ukuran frame

Gambar 7.3 Merubah ukuran frame
Mengatur Border dan Warna Frame
Secara default border Frame tidak akan ditampilkan, sehingga jika halaman website di
tampilkan seolah tidak menggunakan frame di dalamnya. Untuk memberikan border pada
frame adalah sebagai berikut :

WEB DESAIN 41

10. Klik pada garis pembatas, lal perhatikan properties yang ada dibawah, pada bagian
border pilih kotakdan akan tampil pilihan

Gambar 7.4 Frame Properties
• YES : dipilih jika ingin menggunakan broder pada Frame
• NO : dipilih jika tidak ingin menggunakan broder pada Frame
• Default : Frame induk tanpa border, frame didalam menggunkan border

LATIHAN Penggunaan Frame

4. Buatlah Halaman web menggunakan dengan Frame dengan ketentuan sbb:
Frame terdiri dari 3 bagian yaitu:, Frame Atas, Frame Kiri, Frame Kanan

5. Bedakan dan isi masing frame tersebut antara lain
• Frame Atas beri backgroud warna biru muda dan beri judul “Selamat Datang di
Website SMA Diginusa Surabaya” untuk jenis font dan size tentukan sesuai
kebutuhan
• Frame Kiri beri backgroud warna Kuning muda dan isi dengan menu navigasi
HOME, PROFIL, GALERI, KONTAK, kemudian hubungkanmenu tersebut dengan
dokunmen yang sudah dibuat, apabila di klik menu Home maka yang akan
ditampilkan halaman yang berisi HOME pada frame sebelah kanan. Lakukan untuk
semua menu navigasi.
Cara untuk menghubungkan navigasi frame kiri dengan tampilan frame kanan sbb:
▪ Seleksi pada tulisan frame sebelah kiri, kemudian lihat properties yang ada
dibawah
▪ Pada bagian link pilih halaman web sesuai dengan menu navigasi yang diseleksi
misal Profil pilih halaman profil.html
▪ Pada bagian target pilih mainframe

Gambar 7.5 Membuat link didalam frameset

WEB DESAIN 42

• Frame Kanan beri backgroud warna hijau muda

Gambar 7.6 Membuat halaman web frame

Gambar 7.7Contoh tampilan halaman web menggunakan frameset
PERTAYAAN Penggunaan Layer dan Form

1. Jelaskan apa yang dimaksud dengan frame!
2. Jelaskan langkah-langkah dalam mebuat frame!
3. Sebutkan dan jelaskan fungsinya 4 buah frame utama dalam pembuatan website!
4. Sebutkan keunggulan menggunakan frame dalam pembuatan website!
5. Jelaskan langkah-langkah dalam pemberian border dan warna border!

WEB DESAIN 43

8 Penggunaan CSS Rule

Indikator Hasil Belajar :
1. Siswa dapat mengenal CSS Rule Pada HTML
2. Siswa dapat mengenal berbagai bentuk CSS
3. Siswa dapat Mampu mengaplikasikan dan membuat CSS

Mengenal CSS
CSS singkatan dari Cascading Style Sheet. CSS digunakan dalam melakukan pengaturan
format tampilan halaman website lebih mudah. Saat menggunakan CSS, Anda tidak perlu
menulis font, color atau size pada setiap paragraf, atau pada setiap dokumen. Setelah Anda
membuat sebuah style sheet, Anda dapat menyimpan kode tersebut sekali saja dan dapat
kembali menggunakannya bila diperlukan.

Keuntungan menggunakan CSS

• CSS memberikan keseragaman pada halaman web.
• Dengan CSS dapat menghemat banyak waktu dan pekerjaan berulang. Saat

menggunakan CSS, perubahan tidak perlu dilakukan dalam setiap halaman web. Anda
hanya perlu membuat perubahan dalam style sheet.
• CSS memungkinkan Anda untuk memuat halaman web Anda dengan mudah.
• Layers (Lapisan), seperti item pop-up, dapat digunakan dalam dokumen. \
• CSS membantu Anda memelihara halaman web Anda dengan mudah dan efektif.
Menggunakan CSS pada adobe Dreameaver
Untuk emembuat dan menampilkan style yang digunakan dalam dokumen website, kita
gunakan panel CSS. Ada beberapa cara membuka panel CSS, antara lain : :
3. Pada menu Bar, klik windows – pilih CSS
4. Dari panel Design, klik bagian CSS

WEB DESAIN 44

Membuat CSS Rule
Dengan adanya CSS Rule secara otomatis akan terbentuk pemformatsn HTML tag seperti yang
telah diidentifikasikan oleh atribut-atribut class. Langkah-langkah membuat sebuah CSS Rule
baru dalam halaman website adalah :

11. Buat dokumen baru.
12. Pada design panel bagian CSS Rule, klik new CSS Rule (+)

Gambar 8.1 Menambah CSS Style
13. Mucul kotak dialog New CSS Rule, seperti gambar dibawar ini

Gambar 8.2 New CSS Rule
14. Dari kotak dialog tersebut, lakukan pengaturan sbb:

➢ Selector Type :
o Class (can apply to any tag) digunakan untuk membuat sebuah Custom Style
(class) yang dapat diterapkan untuk semua Tag
o Tag (redefines the look of a specific tag) digunakan untuk mengulangi
pemformatan tag HTML default.
o Advanced (IDs, pseudo-class selectors) digunakan untuk menentukan
penformatan kombinasi Tag tertentu atau semua tag yang dimiliki ID tertentu

➢ Name : pemberian nama untuk CSS Style
➢ Define in : digunakan untuk menentukan lokasi dimana stile tersebut akan di

terapkan
WEB DESAIN 45

o New Style Sheet File digunakan untuk membuat Style Sheet secara eksternal
atau terpisal

o This document only digunakan untuk menerapkan style hanya pada website
yang sedang dikerjakan

15. Tekan tombol OK , muncul kotak dialoag Style Definition yang digunakan untuk
melakukan pengaturan pada definition, aturlah sesuai yang diinginkan kemudian tekan
OK untuk menyelesaikannya.

Gambar 8.3 Kotak dialog CSS Rule Definition
Membuat Custom ( CLASS ) CSS Rule
Custom (Class) CSS Rule biasanya digunakan untuk melakukan pengaturan terhadap semua
teks yang terdalam dalam dokumen website, mulai dari bentuk, warna, ukuran, jenis font, dll:
Berikut langkah-langkah untuk membuat Custom (Class) CSS Rule :

1. Buat dokumen baru
2. Buat teks “Saya Sangat Senang dengan Pelajaran WEB Design”
3. Seleksi semua tulisan, kemudian klik ikon Nes CSS Rule pada Panel Desaign bagian

CSS
4. Lakukan pengaturan pada kotak dialog New CSS Rule Seperti berikut

Gambar 8.4 Mengisi CSS Rule
5. Klik Tombol OK akan muncul sebuah kotak dialog CSS Rule Definition
6. Pilih pada bagian type karena ingin melakukan pemformatan teks secara umum. Pada

bagian type terdapat banyak parameter yang harus di isi antara lain :

WEB DESAIN 46