Desain WEB

Gambar 8.5 Mengisi CSS Rule Definition
Keterngan :

• Font digunakan untuk menentukan jenis huruf yang akan digunakan dalam dokumen
website

• Size : digunakan untuk menentukan ukuran huruf yang digunakan dalam dokumen website
• Weight : digunakan menentukan ketebalan huruf yang digunakan dalam dokumen website
• Style : digunakan untuk menentuka style huruf yang akan digunakan dalam dokumen

website
• Variant : digunakan untuk menentukan varian huruf yang akan digunakan dalam dokumen
• Line Height :digunakan untuk menentukan tinggi baris tempat teks ditentukan
• Case digunakan untuk membuat huruf pertama pada setiap kata menjadi huruf besar jika

memilih Capitalize
• Color : digunakan untuk membuat warna huruf / teks yang digunakan dalam dokumen

website
• Decoration :digunakann untuk membuat atribut lain dengan melakukan ceklist pada

pilihan item yang ada
7. Setelah melakukan pengisian pada CSS Rule Definition, silahkan tekan tombol OK

untuk mengakhiri
8. Teks yang sudah diketik akan menjadi seperti gambar di bawah ini

Gambar 8.6 Contoh Tampilan penggunaan CSS

WEB DESAIN 47

Menggunakan Custom ( CLASS ) CSS Rule
1. Untuk menggunakan fungi custom (CLASS) CSS Rule pada suatu teks dalam dokumen
yang sudah kita buat adalah sebagai berikut :
• Pilih teks pada dokumen yang akan di beri fungsi Custom CSS Rule dengan
cara melakuakn blok pada semua teks
• Pada Property Inspector, pilih bagian Style sehingga muncul pilihan-piliahn
Style yang akan digunakan
• Pilih Style sesuai kebutuhan, dan secara otomatis tulisan tersebut akan berubah
sseuai Style yang sudah dipilih
2. Untuk menghilangkan fungsi dari sutom (CSS) Rule pada sebuah teks atau dalam
dokumen adalah sebagai berikut :
• Pilih dan Blok semua teks yang akan di hilangkan fungsi CSS nya
• Pada Property Inspector, klik pada bagian style dan pilih None
• Maka teks akan kembali seperti semula

LATIHAN Penggunaan CSS Rule
6. Buatlah menggunakan CSS Style untuk menformat semua judul pada setiap halaman
website anda, gunakan nama latihan1. Ubah semua judul tersebut antara lain : Home,
Profil, Gallery, Kontak dengan ketentuan sbb:

7. Buatlah menggunakan CSS Style untuk menformat semua Navigasi/menul pada setiap
halaman website anda, gunakan nama latihan2. Ubah semua menu tersebut antara lain
: Home, Profil, Gallery, Kontak dengan ketentuan sesuai dengan pentujuk guru kalian

WEB DESAIN 48

Tampilan

PERTAYAAN Penggunaan CSS Rule
1. Jelaskan Kepanjangan dan pengertian dari CSS!
2. Sebutkan keuntungan menggunakan CSS!
3. Jelaskan fungsi dari Size, Font, Variant, Line Height pada pembuatan CSS Rule!
4. Jelaskan langkah-langkah menghilangkan fungsi custom CSS!
5. Jelaskan langkah-langkah untuk mengganti fungsi custom CSS!

WEB DESAIN 49

9 Penggunaan Behaviors

Indikator Hasil Belajar :
1. Siswa dapat mengenal behaviors
2. Siswa dapat Menggunakan behaviors untuk membuat action

Mengenal dan menggunakan Behaviors

Behiviors merupakan suatu kombinasi antara sebuah event dengan action yang muncul akibat
event tersebut. Dengan menggunakan panel behaviors kita bisa memilih action apa yang ingin
kita berikan pada sebuah event.
Event merupakan sebuah kondisi saat user melakukan sebuah aksi, misal event OnMouseOver
yang akan terjadi ketika user meletakkan mouse diatas objek baik itu berupa link,gambar atau
lainnya
Suatu Action yang terjadi atas sebuah event, pada dasarnya terdiri dari kode javaScript yang
memiliki suatu perintah didalamnya untuk melakukan sesuatu, misalkan untuk memunculkan
jendela browser, mengubah tampilan gambar, memunculkan suara dan lainnya

Menggunakan Panel Behaviors

Panel Behaviors digunakan untuk menerapkan behaviors ke halamana website, dengan panel
hebaviors dapat melakukan pengaturan terhadap parameters-parameter yang terdapat pada
behavior tersebut
Ada 2 cara untuk membuka panel hebaviors, antara lain

1. Pada menu bar, klik window – pilih Behaviors
2. Menekan tombol Shift + F4 pada keyboard

Menggunakan Action Call JavaScript

Action Call JavaScript adalah action yang memungkinkan pengeksekusian kode
javascriptketika sebuah event yang telah ditentukan terjadi. Berikut langkah-langkah
menggunakan Action Call JavaScript:

1. Buat dokumen baru.
2. Masukkan sebuah gambar atau button kedalam dokumen tersebut
3. Klik pada objek tersebut dan masuk ke Panel Behaviors.
4. Pada Panel Behaviors, klik tombol Add Behaviors (+) sehingga akan menampilkan

pilihan action yang digunakann.
5. Pilih Call JavaScript, akan tampil menu dialog Call JavaScript seperti gambar dibawah

ini
6. Tulis kode script yang akan di proses saat event dijalankan. Misal script untuk

mengubah warna background menjadi hijau: document.bgColor=’green’

WEB DESAIN 50

Gambar 9.1 kotak dialog Call JavaScript
7. Klik tombol ok untuk selesai
8. Ubah eventnya terlebih dahulu sesuai dengan kebutuhan misal : OnClick
9. Jalankan dan ketikan objek diklik maka warna background akan berubah menjadi

warna hijau seperti gambar dibawah.

Gambar 9.2 Tampilan Action Call JavaScript
Menggunakan Action Drag Layer
Pada action Drag Layer untuk mendrag layer yang di ingikan, umumnya fungsi ini digunakan
untuk membuat games puzzle, atau interaksi lainnya seperti dengan mendrag sebuah layer
bergambar ke bagian tertentu untuk memindah sebuah gambar dan lain sebagainnya
Cara menggunakan Action Drag Layer adalah sebagai berikut :

1. Buat halaman baru
2. Masukkan sebuah layer ke halaman website dengan cara pilih layer pada - klik draw app

div, kursor mouse akan berubah menjadi tanda + lihat gambar dibawah ini

Gambar 9.3 Tampilan gambar dalam layer
3. Masukkan gambar pada layer yang sudah dibuat dengan cara klik menu insert – pilih image.
4. Pada panel Behaviors, klik tombol Add Behaviors (+), kemiudian pilih Drag Ap Elements,

muncul kotak dialog dan isikan sesuai gambar dibawah ini

WEB DESAIN 51

Gambar 9.4 Tampilan kotak dialog drag layer
5. Pada kotak dialog Drag AP Elements terdapat menu sbb:

• Layer/Ap Element ,digunakan menentuksn lsyer mana yang akan diberi Action Drag
layer

• Movement, digunakan untuk memilih pergeseran layer pada saat layer tersebut
didrag

• Drop Target, digunkana untuk menentukan letak target ketika mendrag layer
tersebut.

• Snap If Within, digunakan untuk menentukan jarak user ketika melepaskan layer
yang sedang didrag dengan titik target yang diingikan

6. Klik Tombol ok dan bagian Event pilin on load.
7. Simpan terlebih dahulu dokumen tersebut dan tekan tombol F12 untuk melihat hasilnya

Menggunakan Action Pop-UP Message

Action Pop-Up Message merupakan action yang digunakan untuk memunculkan suatu pesan
jika event yang telah di tentukan terjadi. Aplikasi ini juga bisa digunakan untuk memberi
keterangan tambahan terhadap suatu objek, misal pada saat mouse diarahkan ke suatu objek
maka akan muncul keterangan tambahan mengenai onjek tersebut.
Berikut langkah-langkah menggunakan Action Pop-up Message antara lain :

1. Buat halaman webseti baru
2. Masukkan sebuah gambar ke dalam halaman web tersebut
3. Pada paneh Behaviors klik tombol Add Behaviors (+) sehinnga tampil Action yang

akan digunakan
4. Pilih Pop-Us Message, muncul kota dialog, isikan pesan yang akan di tampilkan ke

dalam Pop-Up Message

Gambar 9.5 Tampilan kotak dialog Pop-Up Message
5. Pada bagian Event, pilih pada saat event apa teks akan muncul, misal : OnClick
6. Simpan terlebih dahulu dokumen tersebut dan tekan tombol F12 untuk melihat hasilnya

WEB DESAIN 52

Menggunakan Action Open Browser Window

Action Open Browser Windows digunakan untuk membuka sebuah jendela browser baru
ketika sebuah event yang ditentukan terjadi
Cara untuk membuah Action Open Browser Window adalah sebagai berikut:

1. Buat halaman webseti baru
2. Masukkan sebuah gambar/teks ke dalam halaman web tersebut
3. Klik pada gambar, kemudian pada paneh Behaviors klik tombol Add Behaviors (+)

sehinnga tampil Action yang akan digunakan
4. Pilih Open Browser Window, muncul kota dialog,
5. Pada kotak dialog lakukan pengaturan sebagai berikut:

• URL to Display : untuk menentukan file dokumen website yang akan di buka
setelah objek di klik. Anda dapat mengetik langsung atau meklik tombol
browser untuk mencarifile dokumen

• Window Width : untuk menentukan lebar browser yang akan ditampilkan
• Window Height untuk menentukan tinggi browser yang akan ditampilkan
• Window name untuk memberin nama dari halaman sisipan tersebut
7. Klik tombol OK, pada bagian Event, pilih pada saat event akan muncul, misal :
OnClick
6. Simpan terlebih dahulu dokumen tersebut dan tekan tombol F12 untuk melihat hasilnya

Gambar 9.6 Tampilan kotak dialog Open Browser Window

LATIHAN Penggunaan Behaviors

1. Buatlah menggunakan Action Open Browser Eindow untuk menampilkan window
pada saat dokumen website utama dibuka, dengan ketentuan sbb:
• Window yang akan di tampilkan berisi informasi Iklan (silahkan buat sesuai
dengan petunjuk guru)
• Ukuran window nya width =155Pixels, height = 200Pixels, Window name=
iklan
• Tampilkan Navigator Bar dan Status Bar

WEB DESAIN 53

2. Buat Games Pazzle menggunakan Action Drag layer pada Behiviors dengan cara :
• Masukkan gambar-gambar potongan kedalam layer seperti gambar 9.6
• Buat Action Drag layer menggunakan Behiviorsseperti gambar 9.6

Gambar 9.6 Tampilan pembuatan Puzzle
• Simpan dengan latihan modul 9.html kemudian tekan F12 untuk melihatnya

WEB DESAIN 54

PERTAYAAN Penggunaan Behaviors
1. Jelaskan apa yang dimaksud dengan behiviors!
2. Sebutkan langkah-langkah untuk membuka panel behiviors!
3. Jelaskan perbedaan Action Drag Layer dan Action Pop-UP Message!
4. Jelaskan langkah-langkah untuk menampilkan suatu pesan pada halaman website!
5. Jelaskan langkah-langkah untuk membuat Action Open Browser Window!

WEB DESAIN 55

10 Penggunaan Sub Menu

Indikator Hasil Belajar :
1. Siswa dapat mengenal Sub menu
2. Siswa dapat membuat Sub Menu
3. Siswa dapat mengimplementasikan Sub menu
4. Siswa dapat mengubah warna teks dan backgroud Sub Menu
Sub Menu
Sub Menu adalah sebuah menu yang berisikan kumpulan link-link yang ditampilkan menurun
kebawah atau menyamping kekanan, jika menu tersebut di klik dan menu itu berfungsi sebagai
pengarah ke halaman web lain, baik dari web kita sendiri atau dari web lain.
Ada 2 macam sub menu yang ada di halaman website yaitu
1. Sub menu vertical berbentuk sekumpulan menu yang disusun secara vertical, yang
ketika salah satunya di sentuh oleh cursor (hover) akan menampilkan beberapa menu
tersebut yang dapat berupa kumpulan link.

Gambar 10.1 Tampilan Sub Menu Vertical
2. Sub menu horizontal merupakan sebuah elemen kontrol grafis yang memunculkan

daftar agar pengguna dapat memilih salah satu dari daftar menu yang ada. Saat tidak
digunakan dropdown menu hanya akan menampilkan satu menu saja, tapi ketika
pengguna mengarahkan fokus cursor pada menu tersebut, maka akan muncul beberapa
daftar menu yang lainnya.

Gambar 10.2 Tampilan Sub Menu Horizontal

WEB DESAIN 56

Menggunakan Sub Menu

Dalam pembuatan sub menu pada halaman website, banyak cara untuk membuat sub menu
baik itu Horizontal maupuan vertikal. Pada adobe dreameaver CS3 memiliki fitur spry menu
bar yang berfungsi untuk membuat sub menu.
Berikut langkah -langkah untuk membuat Sub menu

1. Buka dokumen baru, pada menubar Insert - Lay Out Objects - Spry Menu Bar simpan
dengan file submenu.html

2. Muncul kotak dialog spry menu bar, pilih vertical pilih OK Otomatis Dreamweaver
akan menambahkan menu Spry Menu Bar Horizontal ke dalam halaman web
Anda

Gambar 10.3 Tampilan Spry menu bar
3. Klik Spray menu bar dan perhatikan bagian menu Properties (terletak di bagian bawah

halaman web), Dreamweaver akan menampilkan menu pengaturan spry sub menu
yang baru saja dibuat.
4. Dreamweaver otomatis akan membuat folder SpryAssets di web Anda yang berisi
file-file spry menu bar ini.

Gambar 10.4 Tampilan Properties Spry menu bar
Ada beberapa hal yang harus di perhatikan dalam penggunaan Spry Menu Bar
Dreameaver antara lain:
• Parent, adalah induk utama dari menu
• Children, adalah anak menu (ini akan menjadi menu Sub menu)
• Grand child , adalah sub menu dari Sub menu
• Text, adalah nama menu yang akan tampil di halaman web
• Link, adalah alamat website/link yang akan dituju ketika menu diklik.
• Title, akan menampilkan pop-up menu
• Target, adalah arah pembukaan link ketika menu dibuka.
Di dalam menu Parent, Children dan Grand children Anda akan melihat ikon
plus/tambah (+) dan minus/kurang (-). Tanda plus (+) untuk menambah menu, submenu
dan subsubmenu, sebaliknya tanda minus (-) untuk menghapus atau mengurangi. Ikon
ke arah atas (↑) dan ke arah bawah (↓). Berfungsi untuk mengatur posisi menu, apakah
di atas atau di bawah.

WEB DESAIN 57

5. Pada menu Parent ubah teks item 1 menjadi Home, Item 2 menjadi Profil, Item 3
Menjadi Galeri dan item 4 menjadi Kontak. Untuk mengubahnya terletak di menu
Text

6. Pada menu Parent Klik Home dan hapus semua menu ya tedapat dalam menu
Children dengan tekan tombol minus (-) seperti tampilan gambar dibawah

Gambar 10.5 Tampilan properties Spry menu bar Home
7. Pada menu Galeri dalam kolom Parent tambahkan sub menu pada kolom Chidren

Foto Pribadi dan Foto teman dengan menekan tombol plus (+) seperti gambar di
bawah

Gambar 10.6 Tampilan properties Spry menu bar Galeri
8. Simpan kembali hasil pekerjaannya kemudian tekan F12 untuk melihat hasilnya

Gambar 10.7 Tampilan Sub menu Vertical
Mengubah Tampilan Warna teks dan backgroud pada Sub menu
Untuk mengubah tampilan warna teks dan backgroud pada sub menu adalah sebagai berikut :

1. Pada panel CSS pilih ul.MenuBarVertical a klik kanan pada mouse pilih go to code
2. Pada panel CSS pilih ul.MenuBarVertical a seperti gambar di bawah ini

Gambar 11.10 Template dalam dokumen website
3. Pada properties for ul.MenuBarVertical a silahkan ubah background menjadi warna

biru dan teks colornya menjadi warna putih.
WEB DESAIN 58

4. Simpan dokumen web tersebut dan tekan F12 untuk menampilkan hasilnya
Mengubah Tampilan Warna teks dan backgroud pada saat kursor berada di Sub menu
Untuk mengubah warna menu yang dipilih pada waktu kursor berada di menu maka warna
akan berubah sesuai dengan yang diedit sbb:

1. Pada Panel CSS pilih ul.MenuBarVertical a.MenuBarItemHover,
ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical
a.MenuBarSubmenuVisible

2. Pada properties for ul.MenuBarVertical a.MenuBarItemHover,
ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical
a.MenuBarSubmenuVisible silahkan ubah background menjadi warna hijau dan teks
colornya menjadi warna merah.

3. Simpan dokumen web tersebut dan tekan F12 pada keyboard untuk menampilkannya.

Gambar 11.10 Tampilan hasil Template
LATIHAN Penggunaan SubMenu

1. Buatlah menu pada halaman awal atau index seperti gambar di bawah ini!

WEB DESAIN 59

2. Tambahkan Sub menu Galeri dengan : foto Pribadi, Foto Keluarga dan Foto Sahabat

3. Buat dokumen web baru sbb:
• Nama foto_pribadi.html dan link kan kedalam sub menu Foto Pribadi
• Nama foto_keluarga.html dan link kan kedalam sub menu Foto Keluarga
• nama foto_sahabat.html dan link kan kedalam sub menu Foto Sahabat

Ket : semua halaman web berisi foto/gambar sesuai dengan kategori diatas
PERTAYAAN Penggunaan SubMenu

1. Jelaskan Fungsi dari SubMenu!
2. Sebutkan dan jelaskan 2 macam submenu yang ada di halaman website!
3. Jelaskan pengertian dari Paret,Text, Children, dan Grand Child pada spry menu bar !
4. Jelaskan secara singkat langkah-langkah untuk membuat seb menu secara horizontal!
5. Jelaskan secara singkat langkah untuk merubah backgroud dan teks pada sub menu

WEB DESAIN 60

11 Penggunaan Template

Indikator Hasil Belajar :
1. Siswa dapat mengenal dokumen template
2. Siswa dapat mengenal dan membuat region
3. Siswa dapat membuat dan mengedit dokumen template

Membuat Template

Adobe Dreameaver menyediakan fasilitas untuk pembuatan template, dengan penggunaan
template mebuat sebuah website akan menjadi lebih efektif, karena pada umumnya halaman
setiap website berbeda pada bagian isi, beberapa bagian yang tidak memerlukan perubahan
apapun. Dengan template kita dapat mengunci bagian-bagian yang cenderung sama sehingga
tidak dapat di edit, sehingga kita hanya berkosentrasi pada bagian isinya saja.

Bagian dalam Template
Dalam sebuah dokumen template terdiri dari beberapa bagian, antara lain sebagai berikut :

1. Editable Region : merupakan suatu bagian template yang masih dapat diedit atau di
ubah, biasanya berupa isi website tersebut

2. Repeating Region : merupakan bagian template yang dapat dilakukan perulangan atas
bagian tersebut

3. Optional Region : merupakan bagian template yang bersifat pilihan sehingga kita
dapat memilih untuk tetap menggunakan isinya

Menggunakan Editable Region
Langkah-langkah membuat dokumen template yang bersifat editable adalah sebagai berikut:

1. Buka dokumen baru, kemudian simpan dokumen baru tersebut dalam bentuk template
2. Setelah tersimpan dalam template, klik pada menu bar, insert – template Objects –

Editable Region
3. Ketik nama untuk identitas Editable Region yang akan dibuat, misalnya Alamat

Gambar 11.1 Memasukkan nama pada editable Region
4. Klik tombol ok dan pada dokumen anda akan tampil Editable Region

WEB DESAIN 61

Gambar 11.2 Tampilan Editable Region dalam dokumen
Menentukan Repeating Region
Cara membuat Repeating Region adalah sebagai berikut:

1. Buat dokemen baru dan simpan dokumen baru tersebut dalam bentuk template
2. Buatsebuah tabel dalam dokumen tersebut, seperti gambar dibawah ini

Gambar 11.3 Tampilan Editable Region dalam dokumen
3. Klik pada baris kedua sehingga seluruh sel dalam baris kedua terseleksi.
4. Dari menu bar klik insert – template objects – Repeating Region, akan muncul kotak dialog

New Repeating Region

Gambar 11.4 Pemberian nama Repeating Region
5. Tekan Ok dan pada baris kedua dalam tabel akan muncul Repeating Region dalam bentuk

tulisan repeat : IsiTabel

Gambar 11.5 Repeating region dalam tabel

WEB DESAIN 62

6. Repeating Region hanya dapat melakukan perulangan dan tidak dapat diedit. Oleh karena itu,
kita perlu memasukkan Editable Region pada tiap sel baris kedua dalam tabel

7. Klik sel kolom satu baris kedua (no), pada insert – pilih Template Objects – Editable Region,
muncul New repeating Region

8. Isikan nama pada kotak dialog sesuai dengan fungsinya, misal No

Gambar 11.6 Repeating region dalam tabel
9. Klik OK dan pada sel tersebut akan muncul Editable Region No

Gambar 11.7 Repeating region dalam tabel
10. Lakukan dengan hal yang sama untuk setiap sel masing-masing sehingga seperti

gambar dibawah ini

Gambar 11.8 Repeating region dalam tabel
Membuat Dokumen Berdasarkan Template
Setelah membuat template langkah selanjutnya adalah membuat dokumen website
berdasarkan template yang sudah dibuat. Adapun caranya adalah sebagai berikut :

1. Buka sebuah dokumen baru, pilih File – New , muncul kotak dialog New Document
2. Pada kotak dialog New Document, pilih tab templates
3. Pilih template yang usudah dibuat tadi, kemudian klik tombol Create

WEB DESAIN 63

Gambar 11.9 Memilih Template
4. Pada dokumen website tampil sebuah dokumen template. Perhatikan tanda (+) dan (-),

fungsi dari tanda tersebut untuk menambahkan/mengurangi baris secara otomatis

Gambar 11.10 Template dalam dokumen website
5. Isikan data didalamnya sesuai dengan data yang sudah ditentukan oleh guru
6. Simpan dokumen web tersebut dan tekan F12 pada keyboard untuk menampilkannya.

Gambar 11.10 Tampilan hasil Template

LATIHAN Penggunaan Template
1. Buat Template dalam bentuk tabel untukm mengisi daftar pengunjung pada website
kalian, ketentuan template sebagai berikut :
Field terdiri dari :
No, Nama Lengkap, Alamat, Kode Pos Dan Email
2. Buatlah halaman website daftar pengunjung dengan menggunakan tempate
pengunjung, kemudian isikan datanya sebanyak 10 records dan tampilkan dalam
browser

PERTAYAAN Penggunaan Template
1. Sebutkan dan jelaskan jenis region yang dalam sebuah template
2. Jelaskan fungsi template yang kalian ketahui!
3. Jelaskan langkah-langkah secara singkat untuk mebuat sebuah template!

WEB DESAIN 64

12 Menyisipkan Media Interktif

Indikator Hasil Belajar :
1. Siswa dapat menyisipkan audio ke halaman website
2. Siswa dapat menyisipkan video kehalaman website

Media Interkatif

Untuk menyisipkan atau memasukkan file media, baik berupa audio maupun video
menggunkan HTML 5 karena untuk web browser yang terbaru tidak support plugin flash.
Dengan menambahkan file media tersebut kita dapat membuat halaman website menjadi lebih
menarik.

Audio

Tag yang digunakan untuk membuat audio di HTML 5 adalah menggunakan <audio>.
Format audio yang biasa digunakan dalam web seperti:

• Wav (wave from Extensions)
• MP3 MPEG-Audio Layer 3
• Ogg
Langkah-langkah untuk membuat atau menyisipkan audio adalah:

1. Buka dokumen baru
2. Pada halaman kerja pilih menu code untuk memasukkan script

Gambar 12.1 tampilan menu design
3. Ketik Script dibawah ini untuk membuat audio di web:

<!DOCTYPE html>
<html>
<head>
<title>Audio</title>
</head>
<body>

<p><strong> Menyisipkan File Audio </strong></p>
<audio controls="controls">
<Source src="contoh.mp3" type="audio/mp3">
</audio>
</body>
</html>

Keterangan :

• <audio controls="controls"> berfungsi untuk awal penulisan pembuatan audio

WEB DESAIN 65

• Controls : berfungsi untuk menampilkan seekbar, volume, dan play/pause
• <Source src="contoh.mp3" type="audio/mp3"> : berfungsi untuk meletakkan file mp3

yang akan diputar
• File .mp3 harus diletakkan pada satu folder dengan file HTML yang disimpan agar bisa di

putar
4. Simpan file dengan nama audio.html dan tekan F12 pada keyboard untuk melihat

hasilnya seperti gambar dibawah ini

Gambar 12.2 Tampilan audio di website

Video

Pada pembuatan video di website kita menggunakan HTML 5. Keuntungan menggunakana
HTML 5 adalah kemudahan untuk menampilkan file video pada halaman web tanpa harus
menggunakan plugin khusus atau plugin tambahan seperti flash player. Tag yang digunakan
untuk membuat video adalah <video>.
File format video yang digunakan pada HTML 5 adalah sbb:

• .MP4
• .Flv
• .Ogg
• .WebM
Langkah-langkah untuk membuat atau menyisipkan Video adalah:
1. Buka dokumen baru
2. Pada halaman kerja pilih menu code untuk memasukkan Script

Gambar 12.3 tampilan menu design

3. Ketik Script dibawah ini untuk membuat audio di web:

<!DOCTYPE html>
<html>

WEB DESAIN 66

<head>
<title>Video</title>
</head>
<body>

<p><strong> Membuat Video di website </strong></p>
<video controls="controls" width ="500" height="380">
<Source src="video.mp4" type="video/mp4">
</video>

</body>

</html>

Keterangan :

• <video controls="controls" width ="500" height="380"> berfungsi untuk awal penulisan

pembuatan video

• Controls : berfungsi untuk menampilkan panel control pada frame video playernya seperti,

pengaturan volume, seekbar, fullscreen, picture in picture.

• <Source src="video.mp4" type="video/mp4"> : berfungsi untuk meletakkan file format

video yang akan diputar

• File format video harus diletakkan pada satu folder dengan file HTML yang disimpan agar

bisa di putar

4. Simpan file dengan nama audio.html dan tekan F12 pada keyboard untuk melihat
hasilnya seperti gambar dibawah ini

Gambar 12.4 Repeating region dalam tabel

WEB DESAIN 67

LATIHAN Penggunaan Template
4. Buat Video dengan tema hobi kalian masing-masing dengan durasi waktu minimal 3
menit!
5. Masukkan Hasil video yang kalian buat dati kedalam menu Galeri dalam website
yang sudah kalian buat

PERTAYAAN Penggunaan Template
1. Sebutkan tag yang digunakan untuk membuat audio dan video!
2. Sebutkan format audio yang kalian ketahui!
3. Jelaskan fungsi control pada pembuatan audi dan video web!
4. Sebutkan fungsi HTML 5 dalam membuat video web!
5. Sebutkan format video yang kalaian ketahui!
6. Jelaskan dengan singkat langkah-langkah pembuatan video web!

WEB DESAIN 68

13 Panel Asset dan Panel History

Indikator Hasil Belajar :
1. Siswa dapat mengenal dan menggunakan panel asset
2. Siswa dapat melakukan pengaturan panel asset
3. Siswa dapat mengenal dan menggunkan panel history
4. Siswa dapat menambah dan menggunakan item menu command

Panel Asset

Sebuah website yang dibangun biasanya terdiri dari berbagai macam objek baik itu teks,
gambar, animasi, audio, video dan lainnya. Dengan demikian perlu adanya pengelolaan. Adobe
dreameaver memiliki fasilitas yang dikenal dengan Panel Asset. Panel asset berfungsi untuk
mengelola objek-objek tersebut, karena panel asset akan selalu berisi tampilan daftar objek-
objek yang digunakan pada sebuah dokumen website
Penggunaan Panel Asset
Sebelum menggunakan panel Asset, anda harus melakukan site definition terlebih dahulu.
Caranya sudah dijelaskan di modul sebelumnya. setelah membuat site definition, barulah kita
bisa memanfaatkan panel asset tersebut karena pada prinsipnya panel assets melakukan
pengelompokan pada folder yang telah ditentukan pada site definition.
Dengan menggunakan panel Asset, kita akan dapat melihat daftar asset atau objek yang
digunakan dalam dokumen website. Panel Asset ini juga akan otomatis akan menambahkan
kedalam daftar assetnya, jika memasukkan sebuah objek baru.

Gambar 13.1 tampilan menu Asset pada panel group
Untuk menampilkan Panel Asset dapat dilakukan dengan berbagai cara, antara lain sebagai
berikut:

1. Klik pada menu bar Window - Assets
2. Menggunakan shortcut tombol F11 pada keyboard
3. Pada bagian panel files terdapat pada panel groups, klik menu Assets

WEB DESAIN 69

Tampilan Panel Assets

Dalam menampilkan menu panel assets, Adobe Dreameaver memberikan dua pilihan dengan
kegunaannya masing-masing. Kedua pilihan tersebut adalah sbb:

• Site List digunakan untuk menampilkan semua aset yang terdapat di dalam site
• Favorite List digunakan untuk menampilkan aset yang di pilih oleh user dan

dimasukkan kedalamnya

Gambar 13.2 Sites & Favorites
Untuk menampilkan setiap asset yang terdapat dalam site, Panel Assets akan menampilkan
sesuai dengan jenis objeknya masing-masing karena pada panel assets terdapat banyak
pembagian objek antara lain adalah :

• Image digunakan untuk menampilkan daftar file gambar yayng umunya berupa Gif,
JPEG atau PNG

• Colors digunakan untuk menampilkan semua warna yang digunakan dalam dokumen
baik dalam teks, background, tabel dan lainnya

• URLs digunakan untuk menampilkan semua daftar link keluar dari website yang kita
buat

• Flash digunakan untuk menampilkan semua animasi flash yang sudah digunakan dalam
website kita

• Shockwave digunakan untuk menampilkan semua scockwave yang kita gunakan dalam
website

• Movie digunakan untuk menampilkan semua file movie yang digunakan dalam website
kita

• Scripst digunakan untuk menampilkan semua file movie yang digunakan dalam
website kita, bisa berupa html, java Script,PHP, ASP dan Lain-lain

• Template digunakan untuk menampilkan daftar template
• Library digunanakan daftar objek yang sering digunakanpada lebih dari satu halaman

website

Menyisipkan Asset ke dalam Favorite List

Favorite list berisi aset yang sering digunakan pada lebih dari satu halaman. Cara memasukkan
objek yang sering kita gunakan ke dalam favorite list adalah sebagai berikut:

1. Pilih sebuah objek atau lebih dalam Site list, kemudian tekan tombol Add to Favorites.
2. Ketika anda klik tampilan Favorite list, maka akan tampak daftar aset yang tadi telah

kita masukkan

WEB DESAIN 70

3. Selain cara diatas juga bisa menggunakan klik kanan pada mouse kemudian pilih add
to Favorite sehingga otomatis daftar aset yang tadi kita masukkkan akan berada pada
Favorite List

Gambar 13.3 Sites & Favorites
Manghapus Asset dari Favorite List
Untuk objek-objek yang jarang digunakan kita dapat mengahapus dari daftar favorites, perlu
diketahui bahwa penghapusan suatu assets dari favorites list tidak akan menghapus file asset
tersebut, baik dalam dokumen website maupun pada daftar tampilan site list. Adapun caranya
adalah sebagai berikut:

1. Pada tampilan favorites list, pilih aset yang ingin dihapus
2. Tekan tombol Remove from favorites yang berada di bawah panel asset
3. Bisa juga klik kanan pada mouse pilih remove from favorites

Gambar 13.4 Remove from favorites
Pengelompokan Asset Favorites dalam Folder

Untuk memudahkan pencarian dan penggunaan asset kita dapat mengelompokan asset tersebut
kedalam folder. Misal kategori gambar kita bisa mengelompokan gambar tombol kedalam
folder menu. Caranya :

1. Pada tampilan panel Assest, pilih kategori gambar dengan menekan tombol ikon image
2. Klik ikon new Favorites folder yang terletak dibawah panel assets sehingga tampil icon

folder Favorites list
3. Muncul kursor berkedip dan ganti nama folder misal : ketik menu, karena folder

tersebut untuk menampung semua gambar berdasarkan nama folder
4. Pilih sebuah gambar atau lebih yang akan dimasukkan kedalam folder tersebut. Dengan

klik gambar disertai dengan tekan ctrl
5. Drag gambar yang telah di pilih ke ikon folder, secara otomatis semua gambar tersebut

akan pindah dan berada di bawah folder tersebut
WEB DESAIN 71

Gambar 13.5 Tampilan Panel Asset dalam folder

Panel History
Panel History adalah fasilitas yang disediakan oleh adobe dreameaver yang bisa untuk
melakukan optimalisasi proses pembuatan website, menggunakan panel history seakan-akan
sedang melakukan copy-paste perintah-perintah yang telah digunakan sebelumnya.
Menggunakan Panel History

Sebagai contoh untuk memahami penggunaan Panel History, ikuti langkah-langkah berikut:
1. Buka halaman web baru
2. Tuliskan “ Membuat Website Pertamaku”
3. Ubah jenis font menjadi verdana, size = 24, warna = hijau, kilk enter
4. Masukkan sebuah layer kemudian masukkan sebuah gambar pada layer
5. Atur ukuran layer sesuai gambar
6. Geser layer tersebut ke arah yang berlainan

Setelah semua langkah diatas dilakukan, maka pada Panel history akan tampak seperti pada
gambar dibawah ini.

Gambar 13.6 Tampilan Panel History
Mengulang Serangkaian Perintah

Dengan menggunakan Panel History kita dapat mengulang serangkaian perintan yang
berurutan sehingga akan membuat lebih cepat dalam membuat website. Berikut langkah-
langkah adalah:

WEB DESAIN 72

1. Gunakan latihan dokumen website yang sudah dibuat tadi
2. Pilih beberapa langkah yang akan diulang dengan memilih satu persatu langkah dengan

menekan tombol CTRL pada keyboard, misal Teks “Membuat Website Pertamaku”
dengan jenis font dan warna teks yang sama
3. Tekan tombol replay yang berada di bawah sebelah kiri panel History

Gambar 13.7 Tampilan beberapa perulangan
4. Akam muncul konfirmasi untuk melanjutkan atau membatalkan pengulangan beberapa

perintah. Tekan yes untuk melanjutkan

Gambar 13.8 kotak dialog konfirmasi
5. Hasil dari beberapa perulangan seperti gambar dibawah ini.

Gambar 13.7 Tampilan Hasil Perulangan beberapa langkah
Menambah Item Menu Command
Langkah -langkah yang terdapat pada panel history dapat disimpan dan ditampilkan dalam meu
Commands sehingga dapat membuat serangkaian perintah yang sering digunakan untuk
digunakan kembali dengan cepat dan efisien. Caranya adalah sebagai berikut:

1. Pilih satu perintah atau lebih yang terdapat dalam panel history, klik kanan mouse pada
perintah yang dipilih
WEB DESAIN 73

2. Pilih menu Save As Command, akan muncul kotak dialog dan isikan nama untuk
perintah tadi

Gambar 13.8 Memberi nama Command
3. Klik OK untuk mengakhirinya
Menambah Item Menu Command
Berikut langkah – langkah untuk Menggunakan Item Menu Command yang sudah dibuat
sebagai berikut:
1. Buat dokumen baru
2. Pada menu Bar, pilih Command – Nama Command yang sudah dibuat sebelumnya.

Gambar 13.9 Perintah menu comand
3. Akan tampil hari dari tahapan perintah yang sudah dibuat.

Gambar 13.7 Tampilan Hasil Perintah Commands
WEB DESAIN 74

PERTAYAAN Penggunaan Panel Assets dan Panel History
1. Jelaskan secara singkat Funsi dari Panel Asset dan Panel History !
2. Sebutkan 2 cara untuk menampilkan Panel Assets yang ada di adobe dreameaver!
3. Sebutkan dan Jelaskan 4 jenis objek yang terdapat pada Panel Assets!
4. Sebutkan 2 cara untuk menghapus Asset dari Favorites List!
5. Tuliskan langkah-langkah untuk mengulang serangkaian perintah pada Panel History!
6. Jelaskan dengan singkat langkah-langkah untuk membuat dan menampilkan menu
command !

WEB DESAIN 75

14 Project Desain WebSite

Indikator Hasil Belajar :
1. Siswa dapat menggunakan fitur-fitur adobe dreameaver CS3 untuk membuat Website
2. Siswa dapat merancang dan menuliskan tag HTML dengan adob Dreameaver
3. Siswa dapat membangun berbagai jenis website menarik di adobe Dreameaver CS3

Uraian Project

Dalam pembangunan atau pembuatan website ada yang perlu diperhatikan antara lain:
1. Tujuan pembuatan website
Pastikan bahwa kita memiliki tujuan yang jelas ketika merencanakan pembuatan
website. Apakah untuk keperluan marketing produk pribadi, perusahaan, bisnis tulisan
(artikel) atau untuk bisnis online lainnya. Pastikan sudah memfokuskan pada satu tujuan
dari pembuatan website. Sebab, tujuan yang sudah dibuat akan sangat berpengaruh
dalam langkah-langkah selanjutnya.
2. Mempersiapkan kelengkapan website
Saat menyatakan akan membuat website, kita harus mengetahui bagaimana cara
membuat website secara sederhana. Dengan begitu kita akan semakin mudah
mendeteksi fitur-fitur apa saja yang dibutuhkan untuk menunjang kelengkapan di dalam
website nantinya.
3. Tentukan target dari pengunjung website
Ketika akan membuat sebuah website pastikan sudah memiliki sasaran pengunjung.
Pahami bagaimana karakteristik calon pengguna. Dengan begitu akan lebih mudah
menyesuaikan website yang dibuat dengan kebutuhan dan keinginan member.
Biasanya, dalam pembuatan website pemula sering mengabaikan pesiapan dan cara
membuat website ini. Ada kecenderungan dari pemula menganggap bahwa bila
menggunakan layanan jasa pembuatan website maka, secara otomtis website yang
dimiliki akan langsung menghasilkan. Kenyataannya tidaklah demikian. Sukses
tidaknya sebuah website kembali lagi pada kemampuan seseorang sebagai pengelola
untuk membaca keinginan dan kebutuhan market online.

. Project Pembuatan Website
Latihan

Sebagai tugas akhir dari materi Web desain ini ada sebuah project yang harus dikerjakan oleh
siswa dengan tema bisa memilih salah satu yang sudah disediakan atau dengan tema yang
kalian miliki :

1. Website Penjualan Online
2. Website Profil Pribadi
3. Website Berita

WEB DESAIN 76

4. Website Sekolah
5. Website Instasi atau perusahaan
6. Website Berita olahraga
7. Website lainnya
Dalam Pembuatan Website harus memiliki ketentuan Sbb:
1. Jumlah halaman website minimal 6 halaman.
2. Mengandung unsur tag-tag yang ada di HTM .
3. Terdapat form login dan registrasi
4. Pembagian layout menggunaka Frammeset
5. Terdapat Menu, Sub Menu dan CSS Style
6. Terdapat Video
Petunjuk Pembuatan
1. Konsultasikan dengan guru pembimbing jika mengalami kesulitan dalam pembuatan
2. Kerjakan dengan sungguh - sungguh dalam setiap halaman yang akan dibuat
3. Uji kompentesikan ke depan guru penguji kalian mengenai hasil dari proses p[embuatan

dan keunggulan dari website kaliak
Contoh - contoh halaman website

1. Website Berita harian

WEB DESAIN 77

2. Website Penjualan Online

3. Website Sekolah

WEB DESAIN 78

4. Website Perusahaan
WEB DESAIN 79

5. Website Profi Pribadi
WEB DESAIN 80

DAFTAR PUSTAKA

https://www.ilmuwebsite.com/”Belajar HTML 5 : Dasar-dasar CSS”
https://www.ilmuwebsite.com/”JQuery Dasar”
https://files.candrautama.com/handouts/Pertemuan_12-_AJAX_Framework.pdf

WEB DESAIN 81