Design dan Pemrograman Web 1 (PG110)

Bagian 1

Pendahuluan

Achmad Solichin (achmatim@bl.ac.id) Halaman 1

Design dan Pemrograman Web 1 (PG110)

Bab 1
Teknologi dan Perangkat Pendukung
™ Editor Program (Code Editor)
™ Web Browser
™ Editor Gambar (Image Editor)
™ Editor Multimedia (Multimedia Editor)
™ Editor Warna (Color Editor)

Sebuah situs web (website) merupakan kumpulan dari berbagai jenis file.
Sebagian besar diantaranya merupakan file HTML. Jenis lainnya dapat berupa file
image, multimedia dan animasi seperti video dan flash. Kesemuanya harus dapat
disatukan menjadi satu kesatuan. Sebuah situs web yang baik harus dapat
menyajikan setiap komponen dengan serasi, konsisten dan indah.
Saat ini boleh dikatakan tidak ada (atau belum ada) satu software atau
perangkat lunak yang dapat digunakan untuk membangun sebuah situs secara
keseluruhan, mulai dari merancang, membuat halaman HTML, mengedit image,
multimedia dan animasi, sampai menampilkannya sekaligus. Namun, dalam
merancang situs web, kita harus menggunakan beberapa perangkat lunak
(aplikasi) sekaligus.
Perangkat lunak yang diperlukan dalam membangun situs web, setidaknya
dapat dibagi menjadi:
1. Editor program (code editor)
2. Web browser
3. Editor gambar (image editor)
4. Editor multimedia (multimedia editor)
5. Editor warna (Color editor)

Editor Program (Code Editor)

Editor program (code editor) merupakan suatu aplikasi yang dapat
digunakan untuk membantu dalam membuat program tertentu. Saat ini tersedia
banyak sekali editor program, baik yang khusus untuk bahasa program tertentu
maupun yang dapat digunakan untuk berbagai jenis bahasa program. Fitur yang
ditawarkan oleh masing-masing editor juga beragam, mulai dari yang sederhana
seperti Notepad sampai yang kompleks seperti Netbeans untuk Java dan
Dreamweaver untuk design situs web.
Secara khusus dalam konteks design situs web sendiri cukup banyak editor
yang tersedia, tentunya dengan kelebihan dan kekurangannya masing-masing.
Salah satu editor web yang banyak digunakan yaitu Macromedia Dreamweaver.
Dreamweaver sendiri merupakan sebuah perangkat lunak yang secara
khusus dibuat untuk membantu membangun situs web secara mudah dan cepat.
Dreamweaver menyediakan berbagai fasilitas yang membantu penggunanya
untuk membuat halaman-halaman web dengan mudah. Dan bagi pengguna yang
tidak atau kurang mengerti program seperti HTML, Dreamweaver merupakan
salah satu pilihan tepat untuk membangun situs web.
Dreamweaver pertama kali diluncurkan (versi 1) pada tahun 1997. Hingga
saat ini, Dreamweaver sudah mencapai versi 8 (tahun 2004). Dreamweaver
dikembangkan oleh perusahaan bernama Macromedia Inc. Untuk mengetahui
perkembangan dan versi terakhir, kita dapat berkunjung ke situs resminya di
http://www.macromedia.com.

Achmad Solichin (achmatim@bl.ac.id) Halaman 2

Design dan Pemrograman Web 1 (PG110)

Beberapa keunggulan Macromedia Dreamweaver yang menjadikannya

banyak digunakan dalam membangun situs web, antara lain:
1. Tampilan (interface) Dreamweaver mudah dimengerti oleh pengguna dari
semua tingkat keahlian, bahkan bagi orang awam sekalipun.
2. Dreamweaver cukup tangguh untuk membangun berbagai tipe situs web.
3. Dreamweaver selalu menjadi perangkat lunak pertama yang selalu
mendukung teknologi web terkini.
4. Dreamweaver merupakan editor berbasis WYSIWYG (What You Say Is
What You Get), artinya apa yang tampak di editor, sama seperti apa yang
akan ditampilkan di web browser.
5. Dreamweaver terintegrasi dengan produk Macromedia lainnya, seperti
Macromedia FreeHand, Fireworks, dan Flash.

Dalam membangun situs web, kita akan menggunakan Macromedia

Dreamweaver untuk membuat dan mengedit 3 (tiga) jenis script, yaitu HTML,
CSS dan Javascript.

HTML dan XHTML

HTML merupakan singkatan dari Hypertext Markup Language. HTML
merupakan bahasa mark-up yang digunakan untuk membuat sebuah halaman
web dan menampilkan berbagai informasi di dalam sebuah web browser. Apa
yang ditampilkan di browser (internet) adalah rangkaian perintah (script) HTML.
HTML saat ini merupakan standar internet yang didefinisikan dan dikendalikan
penggunaannya oleh World Wide Web Consortium (W3C).
Pada dasarnya dokumen HTML mirip dengan dokumen teks biasa, hanya
dalam dokumen ini sebuah teks bisa memuat instruksi yang ditandai dengan
kode atau lebih dikenal dengan TAG. Tag HTML umumnya terdiri dari tag
pembuka dan tag penutup. Sebagai contoh jika kita ingin menampilkan suatu
teks menjadi huruf tebal (bold), maka kita perlu menambahkan tag <b> didepan
teks dan diakhiri dengan tag </b>.
Sedangkan XHTML atau eXtensible HyperText Markup Language merupakan
bahasa markup penerus dan pengembangan dari HTML yang memiliki
kemampuan yang kurang lebih mirip HTML, tapi dengan aturan sintaks yang lebih
ketat. HTML merupakan aplikasi dari SGML (Standard Generalized Markup
Language) yang sangat fleksibel, sedangkan XHTML adalah aplikasi dari XML,
turunan SGML yang lebih terbatas.
Karena XHTML harus memiliki keteraturan-bentuk (mengikuti sintaks yang
tepat), dokumen XHTML dapat diproses otomatis dengan menggunakan standar
pemroses XML - tidak seperti HTML yang membutuhkan pemroses yang cukup
sulit dan kompleks. XHTML dapat dianggap sebagai perpaduan antara HTML dan
XML karena merupakan formulasi ulang HTML dalam bentuk XML. XHTML 1.0

Achmad Solichin (achmatim@bl.ac.id) Halaman 3

Design dan Pemrograman Web 1 (PG110)

telah menjadi rekomendasi World Wide Web Consortium (W3C) pada tanggal 26
Januari 2000.

CSS
CSS atau Cascading Style Sheets merupakan suatu bahasa stylesheet yang
digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa
markup. Penggunaan yang paling umum dari CSS adalah untuk memformat
halaman web yang ditulis dengan HTML dan XHTML. Walaupun demikian,
bahasanya sendiri dapat dipergunakan untuk semua jenis dokumen XML
termasuk SVG dan XUL. Spesifikasi CSS diatur oleh World Wide Web Consortium
(W3C).
CSS digunakan antara lain untuk menentukan warna, jenis huruf, tata letak,
dan berbagai aspek tampilan dokumen. CSS digunakan terutama untuk
memisahkan antara isi dokumen (yang ditulis dengan HTML atau bahasa markup
lainnya) dengan presentasi dokumen (yang ditulis dengan CSS). Pemisahan ini
dapat meningkatkan aksesibilitas isi, memberikan lebih banyak keleluasaan dan
kontrol terhadap tampilan, dan mengurangi kompleksitas serta pengulangan pada
stuktur isi.
CSS memungkinkan halaman yang sama untuk ditampilkan dengan cara
yang berbeda untuk metode presentasi yang berbeda, seperti melalui layar,
cetak, suara (sewaktu dibacakan oleh browser basis-suara atau pembaca layar),
dan juga alat pembaca braille. Halaman HTML atau XML yang sama juga dapat
ditampilkan secara berbeda, baik dari segi gaya tampilan atau skema warna
dengan menggunakan CSS.

Javascript
Javascript merupakan bahasa pemrograman kecil yang berjalan di sisi client
(browser). Javascript dijalankan di sisi client, sehingga tidak memerlukan
compiler atau interpreter tertentu. Hanya saja untuk menjalankannya, browser
harus mendukung javascript. Saat ini hampir semua browser yang ada sudah
mendukung javascript.
JavaScript adalah merek dagang terdaftar dari Sun Microsystems, Inc.
Bahasa ini digunakan di bawah lisensi untuk teknologi yang diciptakan dan
diimplementasikan oleh Netscape Communications dan entitas barunya seperti
Mozilla Foundation.

Web Browser
Web browser merupakan sebuah perangkat lunak (aplikasi) yang digunakan
untuk menampilkan halaman-halaman web. Halaman web yang dimaksud adalah
file HTML dan beberapa file lainnya seperti CSS dan Javascript. Halaman web
tersebut dapat tersimpan di lokal, atau di sebuah server intranet/internet. Jadi,
web browser tidak selalu terhubung ke internet.
Dengan Dreamweaver, kita sebenarnya dapat melihat tampilan situs secara
langsung seperti halnya di browser (fitur what-you-see-is-what-you-get), namun
hal tersebut tidak dapat dijadikan patokan bahwa tampilan situs akan sama di
semua browser. Setiap browser terkadang memiliki aturan tersendiri dalam
menampilkan situs web. Jadi, dalam membuat suatu situs web, alangkah baiknya
jika dicoba di beberapa browser sekaligus.

Berikut ini beberapa web browser yang paling banyak digunakan:

1. Microsoft Internet Explorer (http://www.microsoft.com)
2. Mozilla Firefox (http://www.mozilla.org)
3. Netscape Browser (http://www.netscape.com)
4. Opera (http://www.opera.com)
5. Safari (http://www.apple.com/safari)

Achmad Solichin (achmatim@bl.ac.id) Halaman 4

Design dan Pemrograman Web 1 (PG110)

Saat ini sebagian besar pemakai internet menggunakan browser Internet

Explorer (IE) dan Mozilla Firefox. Hal tersebut terlihat dari statistik yang diambil
oleh website W3Counter.Com, seperti terlihat pada gambar. Internet Explorer
merupakan browser yang secara default sudah ada di sistem operasi Windows XP.
Namun pada dasarnya semua browser di atas dapat kita gunakan untuk mencoba
situs web kita.

Achmad Solichin (achmatim@bl.ac.id) Halaman 5

Design dan Pemrograman Web 1 (PG110)

Editor Gambar (Image Editor)

Gambar atau image merupakan unsur yang cukup penting dalam design
web. Editor gambar (image editor) merupakan perangkat lunak atau aplikasi
yang dapat digunakan untuk membuat dan mengedit gambar. Dreamveaver,
walaupun dapat digunakan untuk menempatkan gambar di halaman web dan
manipulasi gambar sederhana, belum bisa dikategorikan sebagai image editor.
Editor gambar (image editor) dapat dibagi menjadi dua jenis, paint-program
dan draw-program. Paint program menghasilkan gambar dalam format bitmap
atau raster. Paint program diukur berdasarkan satuan pixel. Contoh dari paint
program adalah Adobe Photoshop dan Macromedia Fireworks.

Sedangkan draw program merupakan jenis editor gambar yang

menghasilkan file gambar dalam format vektor. Contoh dari editor ini adalah
Macromedia FreeHand dan Adobe Ilustrator.
Untuk situs web, sebaiknya kita menggunakan format gambar dalam bentuk
bitmap (raster) karena format ini lebih ringan dan ukuran filenya lebih kecil. Jadi,
kita dapat menggunakan Adobe Photoshop atau Fireworks untuk membuat dan
mengedit gambar.

Editor Multimedia (Multimedia Editor)

Achmad Solichin (achmatim@bl.ac.id) Halaman 6

Design dan Pemrograman Web 1 (PG110)

Seperti halnya gambar, kita juga terkadang ingin menampilkan beberapa

file multimedia dan animasi di situs web. Dreamweaver memiliki fasilitas untuk
menempatkan dan mengatur tampilan file multimedia, namun Dreamweaver
tidak dapat digunakan sebagai multimedia editor. Untuk itu, kita memerlukan
software atau aplikasi khusus untuk menangani file multimedia.

Jenis-jenis file multimedia diantaranya file audio, animasi dan video. Berikut
ini beberapa jenis format file multimedia beserta plugin untuk membukanya.

Format Multimedia Tipe Plug-in

Macromedia Flash
Macromedia Shockwave
Apple QuickTime
Microsoft Windows Media
RealMedia
Adobe Acrobat
Scalable Vector Graphics
(SVG)
Flash Player atau Shockwave Player
Animasi
http://www.macromedia.com/
Shockwave Player
Animasi
http://www.macromedia.com/
Streaming QuickTime Plug-in
audio dan video http://www.apple.com/
Streaming Windows Media Player
audio dan video http://www.microsoft.com/
Streaming RealPlayer
audio dan video http://www.real.com/
Rich text Acrobat Reader
documents http://www.adobe.com/
Adobe SVG Viewer
Vector graphics
http://www.adobe.com/

Editor Warna (Color Editor)

Warna merupakan komponen yang cukup berpengaruh dalam design web.
Untuk itu, untuk mengoptimalkan hasil dalam mendesign situs web, kita
memerlukan suatu software atau aplikasi yang dapat membantu pendesign situs
dalam memilih warna yang tepat.
Beberapa software atau aplikasi yang digunakan dalam design web,
sebenarnya banyak yang juga menyertakan fasilitas untuk memilih warna dengan
mudah. Berikut ini beberapa contoh:
1. Macromedia Dreamweaver
2. Adobe Photoshop
3. Color Schemer (http://www.colorschemer.com)

Achmad Solichin (achmatim@bl.ac.id) Halaman 7

Design dan Pemrograman Web 1 (PG110)

Achmad Solichin (achmatim@bl.ac.id) Halaman 8

Design dan Pemrograman Web 1 (PG110)

Bab 2
Mengenal Dreamweaver 8
™ Memulai Dreamweaver
™ Tampilan Dreamweaver 8

Dreamweaver merupakan perangkat lunak yang ditujukan untuk membuat

suatu situs web. Versi pertama dirilis pada tahun 1997, dan sejak itu
Dreamweaver menjadi web editor yang banyak digunakan oleh para web
developer. Hal itu antara lain karena kemudahan dalam penggunaannya,
kelengkapan fiturnya dan juga dukungannya terhadap teknologi terkini.
Dreamweaver merupakan salah satu perangkat lunak yang dikembangkan oleh
Macromedia Inc.

Memulai Dreamweaver
Setelah Dreamweaver terinstall di komputer, kita dapat mengaksesnya di
menu Program Files. Untuk membukanya kita dapat membuka dengan memilih
menu Start > All Programs > Macromedia > Macromedia Dreamweaver 8. Maka
akan terbuka window start-up Dreamweaver, seperti terlihat pada gambar.

Dari window start-up Dreamweaver, terlihat 3 (tiga) kolom, yaitu Open a

Recent Item, Create New dan Create From Samples. Pada kolom Open a
Recent Item ditampilkan file-file yang terakhir dibuka (recent files). Kita dapat
membuka file tersebut dengan mengklik salah satu nama file. Dan pada kolom ini
juga terdapat menu Open... yang dapat dipilih jika ingin membuka file atau
dokumen yang belum ada di recent item.

Achmad Solichin (achmatim@bl.ac.id) Halaman 9

Design dan Pemrograman Web 1 (PG110)

Selanjutnya pada kolom Create New terdapat pilihan untuk membuat file
baru. Pilihan file baru yang dapat dibuat dengan Dreamweaver antara lain file
HTML, ColdFusion, PHP, ASP VBScript, Javascript, XML, CSS dan Dreamweaver
Site. Pada kolom ketiga terdapat kategori Create From Samples dimana dapat
kita pilih jika ingin membuat halaman web berdasarkan tampilan (template) yang
sudah tersedia. Jadi pilihan ini dapat digunakan jika menginginkan membuat
halaman web dengan cepat dan mudah.
Jika jenis file yang akan dibuat tidak terdapat di dalam list, kita dapat
memilih menu More... untuk melihat daftar jenis file yang dapat dibuka dengan
Dreamweaver. Tampilannya terlihat seperti pada gambar berikut ini.

Pada kolom Category terdapat beberapa kategori file baru yang dapat dibuat,
mulai dari Basic page hingga Page Designs. Berikut ini penjelasan singkat
mengenai kategori tersebut:

Basic page
Basic page digunakan untuk membuat file-file dasar situs web. File yang
termasuk dalam kategori ini antara lain file HTML, CSS, Javascript dan XML.
Dynamic page
Dynamic page digunakan untuk membuat file-file dinamis. Yang dimaksud
dengan file dinamis adalah file atau script berbasis server (server-side-
scripting). Masuk dalam kategori ini antara lain PHP, ASP, ColdFusion dan
JSP.
Tempate page
Kategori ini menampilkan pilihan untuk membuat file baru yang berupa
template. Template tersebut dapat berupa template untuk HTML, PHP atau
yang lainnya.
Other
Kategori Other menampilkan jenis file yang tidak ada di tiga kategori
sebelumnya, antara lain file Text, Java, dan seterusnya.
CSS Style Sheets

Achmad Solichin (achmatim@bl.ac.id) Halaman 10

Design dan Pemrograman Web 1 (PG110)

Pilihan kategori ini berisi beberapa contoh halaman CSS siap pakai.
Framesets
Jika kita ingin membuat situs dengan menggunakan frame, maka pilihlah
kategori ini dan kita dapat memilih tampilan frame yang sesuai.
Page Designs (CSS)
Kategori ini menampilkan beberapa contoh layout halaman situs yang
didesain dengan CSS.
Starter Page
Pada kategori Starter Page ditampilkan pilihan beberapa layout halaman
depan situs. Kita dapat memilih sesuai keinginan kita.
Page Designs
Page Designs menampilkan berbagai format atau template dasar halaman
web.

Sebagai langkah awal, kita akan membuat halaman web dasar. Pilihlah jenis
file dasar HTML dan selanjutnya akan ditampilkan halaman utama Macromedia
Dreamweaver.

Tampilan Dreamweaver 8
Tampilan Dreamweaver 8 pada dasarnya cukup mudah dimengerti, bahkan
untuk orang awam sekalipun. Berikut ini merupakan tampilan Dreamweaver 8
secara default.

Tampilan Dreamweaver dapat kita bagi menjadi beberapa bagian yaitu:

1. Menu Utama
Menu utama ditampilkan di bagian atas layar Dreamweaver, dan dari menu ini
kita dapat mengakses semua fasilitas yang disediakan oleh Dreamweaver.
2. Insert Bar
Insert Bar secara default berada tepat dibawah menu utama. Bagian ini
digunakan untuk menambahkan berbagai komponen dalam design halaman
situs.
3. Layar Dokumen Utama
Layar dokumen utama terletak di bagian tengah. Tampilannya dapat berupa
tampilan design (design-view), tampilan source program (code-view) atau
keduanya.

Achmad Solichin (achmatim@bl.ac.id) Halaman 11

Design dan Pemrograman Web 1 (PG110)

4. Properties Panel
Properties panel merupakan window yang tampilannya bergantung kepada
objek yang sedang aktif. Dari panel ini, kita dapat mengatur properties dari
objek yang sedang aktif.
5. Panel Pendukung.
Panel pendukung berada di sebelah kanan layar dokumen utama. Panel-panel
ini berfungsi sebagai alat bantu dalam proses pembuatan situs web antara
lain untuk memanage file, informasi penyimpanan, CSS dan sebagainya.

Menu Utama
Menu utama pada Dreamweaver terletak di bagian atas, seperti terlihat
pada gambar berikut ini.

Berikut ini penjelasan singkat dari masing-masing menu dalam Dreamweaver:

File. Seperti pada program (aplikasi) lainnya, menu file merupakan menu yang
digunakan untuk operasi dasar aplikasi seperti membuka file, menyimpan
file, mencetak, import dan export. Menu File juga memiliki sub menu
Preview in Browser yang berguna untuk menampilkan halaman situs di web
browser.
Edit. Menu ini terdiri dari submenu yang berhubungan dengan proses editing file,
seperti Copy, Cut, Paste, Undo, Redo, Find and Replace.
View. Menu ini digunakan untuk mengatur tampilan layar Dreamweaver, seperti
pengaturan tampilan (design view, code view atau keduanya), pengaturan
zoom-in dan zoom-out dan sebagainya.
Insert. Jika kita ingin menambahkan suatu objek atau komponen, seperti form,
frame dan image ke dalam halaman web, kita dapat mencarinya didalam
menu Insert. Menu insert sebenarnya dapat diakses dari insert bar.
Modify. Menu ini digunakan untuk mengubah properties dari objek yang sedang
aktif. Dan juga digunakan untuk melakukan convert table ke layer dan
sebaliknya.
Text. Menu ini digunakan untuk mengatur tampilan (style) text.
Commands. Menu ini terdiri dari beberapa perintah berhubungan dengan
source-formating dan HTML-cleaning. Menu ini juga memiliki sub menu
untuk membuat web photo album.
Site. Menu ini berhubungan dengan manajemen file dan situs.
Window. Menu window digunakan untuk pengaturan tampilan (show-and-hide)
window properties.
Help. Menu ini merupakan menu bantuan mengenai penggunaan Dreamweaver.

Insert Bar
Insert bar merupakan bagian yang ditampilkan di bawah menu utama.
Insert bar berisi sejumlah objek atau komponen web yang dapat disertakan di
halaman web. Insert bar dapat dimunculkan dan disembunyikan melalui menu
Window > Insert.

Insert bar terdiri dari beberapa kategori, yaitu:

ƒ Common. Kategori ini berisi komponen-komponen HTML yang sering
digunakan, seperti table, div, image, komentar, hyperlink dan sebagainya.

Achmad Solichin (achmatim@bl.ac.id) Halaman 12

Design dan Pemrograman Web 1 (PG110)

ƒ Layout. Menu layout berisi pengaturan pilihan tampilan standar, expanded

atau layout. Standar digunakan jika kita akan men-design layout dengan
tabel, layout dipilih jika ingin menggunakan layer/div dalam men-design.

ƒ Forms. Kategori ini digunakan untuk menambahkan elemen form ke dalam

halaman.

ƒ Text. Kategori text berisi pengaturan-pengaturan (formating) text.

ƒ HTML. HTML digunakan untuk menambahkan elemen-elemen HTML, seperti

HR, table, frame dan script.

ƒ Application. Kategori ini digunakan untuk menambahkan elemen-elemen

dalam website dinamis, seperti database, procedure, field dsb.

ƒ Flash elements. Kategori ini digunakan untuk menambahkan elemen flash

ke dalam situs.

ƒ Favorites. Pada bagian kategori ini kita dapat menambahkan elemen-elemen

atau objek-objek sesuai keinginan kita. Untuk menambahkannya, klik kanan
pada bar dan pilih submenu Customize Favorite Objects...

Layar Dokumen Utama

Layar dokumen utama merupakan tempat untuk mendesign tampilan situs.
Kita dapat menambahkan elemen HTML dan juga elemen yang lainnya ke layar
dokumen utama ini.
Tampilan layar dokumen utama dapat diatur menjadi 3 mode tampilan,
yaitu design-view, code-view, dan split-view. Untuk mengaturnya, dapat
menggunakan tombol yang disediakan diatas layar dokumen utama, seperti
terlihat pada gambar di bawah ini.

Perbandingan tampilan layar dokumen utama dapat terlihat pada gambar-gambar

berikut ini:

Achmad Solichin (achmatim@bl.ac.id) Halaman 13

Design dan Pemrograman Web 1 (PG110)

Achmad Solichin (achmatim@bl.ac.id) Halaman 14

Design dan Pemrograman Web 1 (PG110)

Panel Properties
Panel Properties merupakan bagian yang sangat penting untuk setiap
elemen halaman. Panel properties berada di bawah layar dokumen utama. Panel
ini dapat dimunculkan atau disembunyikan dengan mengakses menu Window >
Properties.

Gambar di atas merupakan tampilan panel properties yang akan ditampilkan

saat cursor berada di layar dokumen utama dan tidak ada objek tertentu yang
aktif. Pada properties diatas kita dapat mengatur properti dari halaman dengan
mudah, seperti mengatur perataan teks, warna, font dan ukuran teks dan
seterusnya. Di panel properties tersebut juga tersedia tombol Page Properties...
yang dapat digunakan untuk mengatur properti halaman secara umum, seperti
judul halaman dan background halaman.
Panel Properties merupakan panel yang dinamis dan tampilannya
menyesuaikan elemen yang sedang aktif atau dipilih. Gambar dibawah ini
merupakan tampilan panel properties jika suatu objek image dipilih. Pada panel
terlihat beberapa pengaturan berhubungan dengan image, seperti pengaturan src
(source image), alt (teks alternatif untuk image), pengaturan ukuran, image-map
dan sebagainya.

Panel Pendukung
Panel pendukung berada di sebelah kanan layar dokumen utama. Panel-
panel ini berfungsi sebagai alat bantu dalam proses pembuatan situs web antara
lain untuk memanage file, informasi penyimpanan, CSS dan sebagainya.

Achmad Solichin (achmatim@bl.ac.id) Halaman 15

Design dan Pemrograman Web 1 (PG110)

Panel pendukung antara lain terdiri dari panel:

• Panel CSS

Panel CSS digunakan untuk pengaturan CSS

Style halaman web. Panel ini akan menampilkan
semua pengaturan CSS yang berlaku umum di
halaman web maupun pada elemen tertentu. Dari
panel ini kita juga dapat mengedit pendefinisian
CSS.
Panel ini memiliki dua tab, yaitu tab CSS Styles
dan Layers. Tab Layers digunakan jika kita ingin
mengatur div atau layer yang ada di satu halaman.

• Panel Application

Panel application merupakan panel pengaturan

untuk teknologi server yang digunakan. Dari sini
kita dapat mengatur dan mendefinisikan server-
side-scripting yang digunakan. Dari sini kita juga
dapat mengatur koneksi dengan database tertentu.

• Panel Tag

Panel tag menampilkan daftar atribut yang

berlaku di suatu tag HTML yang sedang aktif
(dipilih). Misalnya jika tag yang sedang aktif adalah
tag <IMG> maka panel tag akan menampilkan
berbagai atribut yang berlaku di tag <img> seperti
src, hspace, alt dsb.
Dari panel ini kita juga dapat mengatur dan
menambahkan beberapa event dan fungsi
javascript (behaviors) pada tag (elemen) yang sedang aktif. Di tab ini, kita dapat
menambahkan pemanggilan terhadap fungsi Javascript.

• Panel Files

Panel files ini digunakan untuk mengatur file (file-management) baik file yang
berada di komputer lokal maupun komputer remote (server). Dari panel ini, kita
juga dapat melakukan koneksi ke server via FTP.

Praktek: Membuat Halaman Web

Membuat dan Menyimpan Halaman Web

1. Buat file HTML baru dengan Dreamweaver, melalui menu File > New.
2. Pada layar utama ketikkan teks sebagai berikut :

Achmad Solichin (achmatim@bl.ac.id) Halaman 16

Design dan Pemrograman Web 1 (PG110)

3. Sekarang kita akan menyimpan file tersebut. Pilih menu File > Save As... atau
File > Save dan tentukan nama file dan lokasi penyimpanan file. Akhiran
(extension) file untuk halaman HTML dapat berupa .html atau .htm. Untuk
menyimpan, kita juga dapat menggunakan short-cut Ctrl+Shift+S untuk Save
As... dan Ctrl+S untuk Save.

4. Setelah dokumen HTML tersimpan, kita akan melihat hasilnya di sebuah web
browser. Untuk melihat hasilnya di web browser, pilih menu File > Preview in
Browser dan pilih jenis browser yang diinginkan. Menu ini juga dapat diakses
melalui short-cut F12 untuk web browser utama dan Ctrl+F12 untuk web
browser kedua.

5. Halaman web yang dibuat akan ditampilkan di web browser.

Achmad Solichin (achmatim@bl.ac.id) Halaman 17

Design dan Pemrograman Web 1 (PG110)

Mengatur Property Teks

6. Untuk mengatur property teks, seperti ukuran, warna, jenis dan sebagainya,
kita dapat melakukannya dengan cara memilih (block) terhadap teks yang
akan diatur dan atur property yang diinginkan di layar properties di bawah
layar dokumen utama.

Sebagai contoh jika kita akan membuat teks pada baris pertama di atas
menjadi huruf verdana, ukuran 12 pixel dan warna biru, maka property yang
harus diatur sebagai berikut:

7. Selanjutnya buatlah agar teks di baris kedua menjadi jenis arial, berwarna
merah, ukuran 16px! Teks di baris ketiga menjadi Georgia, berwarna hijau
dan ukuran 14px! Tampilannya menjadi seperti pada gambar berikut ini:

8. Aturlah teks pada baris pertama agar menjadi miring (italic) dengan
menggunakan tombol I dan aturlah teks kedua menjadi tebal (bold) dengan
menggunakan tombol B yang ada di layar properties.

Achmad Solichin (achmatim@bl.ac.id) Halaman 18

Design dan Pemrograman Web 1 (PG110)

9. Perataan teks dapat diatur secara rata kiri (left), tengah (center), kanan
(right) atau kiri dan kanan (justify). Gunakan tombol untuk
mengatur perataan teks. Aturlah semua teks di atas menjadi rata tengah!

Tampilan halaman menjadi sebagai berikut:

Mengatur Property Halaman

Property halaman meliputi pengaturan yang berhubungan dengan halaman web,

seperti judul halaman, background halaman, pengaturan teks dan link, margin
dan sebagainya. Untuk membuka window pengaturan halaman, klik tombol “Page
Properties...”

10. Dari window page-properties, atur jenis huruf menjadi Verdana, ukuran 11
pixel dan warna putih (#ffffff), atur juga background halaman menjadi warna
biru (#0000ff)! Lihat gambar di bawah ini!

11. Background halaman juga dapat berupa gambar (image). Untuk

menambahkan gambar (image) sebagai background halaman, dari window
page-properties pilih Background image dan klik tombol Browse... untuk
memilih gambar yang akan dijadikan background.

Achmad Solichin (achmatim@bl.ac.id) Halaman 19

Design dan Pemrograman Web 1 (PG110)

12. Selanjutnya kita akan mengatur judul halaman menjadi “Belajar Design Web
dengan Dreamweaver”. Pada window page-properties, pilih kategori
Title/Encoding dan ubah teks pada isian Title menjadi Belajar Design Web
dengan Dreamweaver.

13. Hasil akhirnya kurang lebih sebagai berikut:

Achmad Solichin (achmatim@bl.ac.id) Halaman 20

Design dan Pemrograman Web 1 (PG110)

Bab 3
Merancang Situs Web
Pada dasarnya tujuan utama dari pembuatan situs web adalah untuk
menyampaikan pesan dari si pembuat situs kepada pengunjung secara efektif
dan efisien. Untuk itu, dalam merancang situs web, tidak bisa sembarangan dan
sekehendak kita. Kita harus mempersiapkannya dengan matang. Kita juga harus
memperhatikan komponen-komponen dasar dari sebuah situs
Berikut ini komponen-komponen dasar yang perlu diperhatikan dalam
pembuatan situs web:
• Isi (Content) Situs
• Navigasi dan Arsitektur Situs
• Konsistensi Tampilan
• Waktu download
• Penampilan
• Interaktifitas
• Kontrol Mutu
• Skalabilitas (kapasitas server)
• Keamanan (security)

Sebelum mulai membuat situs web, kita harus terlebih dahulu

mendefinisikan mengenai situs web kita. Berikut ini beberapa pertanyaan yang
dapat membantu dalam mendefinisikan situs web:
• Apa tujuan dari situs?
• Siapa yang akan berkunjung ke situs?
• Apa isi dari situs?
• Darimana isi situs berasal?
• Bagaimana struktur situs?
• Bagaimana tampilan situs?

Mempersiapkan Isi (Content) Situs Web

Dalam terminologi situs web terkini, terdapat satu prinsip yang menyatakan
bahwa “content is king”, artinya isi adalah hal yang paling utama. Untuk itu, kita
tidak bisa meremehkan mengenai isi atau content suatu situs web. Kita harus
benar-benar jeli dalam mempersiapkan isi dari situs yang akan dibuat.
Isi atau content dari suatu situs dapat berupa teks, gambar, audio dan
video. Masing-masing jenis isi tersebut harus diorganisasikan dengan baik
sehingga mendukung tujuan awal pembuatan situs.

Berikut ini langkah-langkah sederhana dalam mempersiapkan content dari

situs kita:
1. Mengumpulkan bahan-bahan yang telah tersedia (scanning, dsb). Bahan-
bahan tersebut dapat berupa informasi mengenai perusahaan, produk dan
jasa yang dijual, atau mengenai berita terkait dengan perusahaan dan
sebagainya. Kita juga dapat memanfaatkan materi yang disumbangkan oleh
pengunjung, misalnya melalui review, komentar, testimonial, dsb.
2. Mengevaluasi nilai dan kelayakan materi-materi yang akan dimuat: apakah
pengunjung memang benar-benar membutuhkannya?
3. Menganalisa bagaimana setiap bagian dari content dapat mendukung tujuan
dari pembuatan situs web.
4. Mengelompokkan bahan-bahan tersebut ke dalam kategori-kategori agar lebih
mudah dalam pencarian dan mempermudah juga dalam mengatur struktur

Achmad Solichin (achmatim@bl.ac.id) Halaman 21

Design dan Pemrograman Web 1 (PG110)

situs web. Jika diperlukan, kelompokkan juga bahan-bahan menurut skala

prioritas, mana yang lebih penting dan mana yang kurang penting.

Selanjutnya, dalam menampilkan isi situs, kita juga harus memperhatikan

faktor penting lainnya, seperti gaya bahasa yang digunakan, jenis huruf, ukuran
huruf, pewarnaan dan sebagainya. Dan tentunya faktor-faktor tersebut harus
disesuaikan dengan tema dan tujuan dari situs. Misalnya, untuk situs dengan
sasaran pengunjung adalah anak-anak, gunakanlah bahasa yang mudah
dimengerti dan dengan warna yang menarik perhatian.
Berikut ini beberapa tips agar penampilan content di situs lebih efektif:
1. Teks harus mudah dibaca secara sepintas (scanning).
2. Penggal bagian yang panjang menjadi segmen-segmen kecil masing-masing
dengan sub-judul (heading).
3. Usahakan untuk menarik perhatian pembaca pada bagian awal tulisan (atau
segmen).
4. Tulis teks dengan nada dan bahasa yang sesuai dengan tujuan penyampaian
informasi.
5. Konsistensi content situs dapat diciptakan dengan menerapkan suatu format
baku (template).
6. Sediakan versi .pdf dari material jika perlu (untuk memudahkan download
dan printing).
7. Buat link yang informatif bagi pembaca untuk meng-klik.
8. Link-link ke situs lain dapat memberikan tambahan content yang berguna
bagi pengunjung.
9. Buang materi yang tidak dianggap bermanfaat oleh pengunjung.

Navigasi dan Arsitektur Situs

Dalam membuat navigasi situs, hal utama yang harus diperhatikan adalah
navigasi harus mudah ditemukan dan digunakan. Pengunjung umumnya akan
merasa nyaman jika harus melihat navigasi situs di sebelah atas, kiri atau kanan.
Selain itu, navigasi situs juga harus konsisten di semua halaman.
Pembuatan navigasi situs hendaknya mengikuti beberapa aturan dasar,
seperti:
ƒ Batasi jumlah item dalam list dan menu.
ƒ Jangan menggantungkan sepenuhnya pada image grafis untuk navigasi.
ƒ Homepage harus mudah ditemukan.
ƒ Integrasikan fasilitas navigasi dengan content.
ƒ Hindari frame jika mungkin (gunakan tabel atau CSS).

Berikut ini jenis-jenis navigasi situs yang ada di situs web:

ƒ List of contents.
Jenis navigasi ini merupakan jenis navigasi dasar menggunakan list-item.
Jenis navigasi ini biasanya digunakan sebagai daftar isi, atau navigasi dalam
content situs.

Achmad Solichin (achmatim@bl.ac.id) Halaman 22

Design dan Pemrograman Web 1 (PG110)

ƒ Breadcrumb trail
Breadcrumb merupakan jenis navigasi yang umumnya digunakan untuk
memberikan informasi ke pengunjung dimana dia berada dan juga berguna
untuk mempermudah pengunjung jika akan kembali ke halaman awal.
Breadcrumb digunakan jika situs memiliki content (isi) yang cukup panjang.

ƒ Horizontal top bar

ƒ Tabs

ƒ 2-level top (bar or tabs)

ƒ Top and side bars

Achmad Solichin (achmatim@bl.ac.id) Halaman 23

Design dan Pemrograman Web 1 (PG110)

ƒ Buttons bar with revealed drop-down

ƒ Multiple-level tree nav

ƒ Paging

Achmad Solichin (achmatim@bl.ac.id) Halaman 24

Design dan Pemrograman Web 1 (PG110)

Sedangkan arsitektur situs menentukan bagaimana situs dan halaman-

halaman didalamnya diorganisasikan, dinamai, dan saling dihubungkan (linked)
untuk mempermudah proses browsing dan pencarian informasi oleh pengunjung.
Arsitektur situs yang baik mengutamakan sisi pengunjung agar mudah
mendapatkan informasi. Pengunjung juga dapat dengan mudah mengetahui
keberadaan atau posisinya sehingga mudah pula untuk kembali ke halaman
utama.
Dalam membuat arsitektur atau struktur situs web, hendaknya kita
mengikuti beberapa prinsip dan aturan, diantaranya:
ƒ Semua halaman di situs harus memiliki link ke halaman utama (homepage).
ƒ Tunduk pada “aturan tiga-klik” dimana pengunjung harus sudah menemukan
informasi dalam 3 kali klik atau kurang.
ƒ Tempatkan content paling penting di awal halaman.
ƒ Batasi panjang halaman (no scrolling).
ƒ Sederhanakan tata-letak halaman.
ƒ Usahakan agar content utama mudah dicari.
ƒ Tampilkan produk dari berbagai perspektif/kategori.
ƒ Ikuti prinsip-prinsip umum penulisan yang baik.

Berikut ini beberapa model arsitektur situs web:

ƒ All-in-one
Pada arsitektur situs ini, semua content situs disajikan dalam sebuah halaman
tunggal (halaman utama atau homepage). Arsitektur ini merupakan arsitektur
yang paling sederhana. Keuntungan dari model ini adalah mudah dalam
perawatan file (maintenance) karena hanya terdiri dari satu halaman (file).

ƒ Flat
Model arsitektur flat merupakan model struktur web yang menyusun
halaman-halaman secara linier. Setiap halaman dapat diakses dari halaman
yang lainnya secara berurutan. Struktur ini merupakan struktur yang
sederhana dan sering diterapkan dalam situs-situs dengan jumlah halaman
yang tidak terlalu banyak. Contohnya, situs yang tersusun dalam menu
Home, Contact Us, Products, About Us dll

ƒ Index
Struktur index mirip seperti struktur flat, hanya saja pada struktur index
menu atau halaman sudah tersusun berdasarkan index tertentu. Halaman
sudah tersusun berdasarkan kategori index tertentu. Arsitektur ini
memudahkan pengunjung untuk mengakses suatu halaman.

Achmad Solichin (achmatim@bl.ac.id) Halaman 25

Design dan Pemrograman Web 1 (PG110)

ƒ Hub-and-spoke / Daisy
Model ini cocok untuk situs yang memiliki beberapa alur, misalnya pada
aplikasi situs email. Pengunjung dapat mengakses halaman inbox (kotak
surat) melalui beberapa cara, seperti setelah membaca isi surat, setelah
mengirim surat atau saat sudah berhasil menyimpan contact.

ƒ Strict hierarchy
Pada jenis arsitektur ini, halaman-halaman web disusun dalam susunan
parent-and-child (per kategori). Arsitektur ini memungkinkan untuk
mengakses suatu halaman melalui parent atau kategorinya. Keuntungan dari
model ini adalah pengunjung mudah dan cepat dalam mencari informasi atau
halaman yang diinginkannya karena informasi disusun berdasarkan kategori
tertentu.

ƒ Multi-dimensional hierarchy
Arsitektur ini pada dasarnya sama dengan arsitektur strict-hierarchy, hanya
saja pada model ini, informasi memungkinkan diakses dari beberapa kategori
sekaligus. Dengan kata lain, beberapa kategori dapat mengakses satu
informasi (halaman) yang sama.

Achmad Solichin (achmatim@bl.ac.id) Halaman 26

Design dan Pemrograman Web 1 (PG110)

ƒ Search
Jika kita akan menambahkan form pencarian pada situs kita, maka jenis
arsitektur web ini yang diterapkan. Informasi atau halaman dapat diakses
oleh pengunjung setelah pengunjung tersebut melakukan pencarian melalui
form (halaman) yang sudah disediakan. Tentu saja, informasi atau halaman
yang ditampilkan sesuai dengan kata kunci (keyword) yang dimasukkan oleh
penggunjung.

Kecepatan Akses Situs

Kecepatan akses situs merupakan faktor utama yang paling penting dalam
membangun suatu situs web, karena pada umumnya kecepatan akses internet di
Indonesia masih terbatas. Bandwidth internet juga masih relatif mahal.
Jadi percuma saja jika kita membuat situs web yang sangat menarik, tetapi
untuk membukanya pengunjung membutuhkan waktu yang relatif lama.
Pengunjung pasti akan bosan menunggu sampai situs selesai ditampilkan, bahkan
mungkin saja pengunjung akan segera menutup situs kita jika terlalu lama
ditampilkan.
Dalam mendesign sebuah situs, terdapat 2 (dua) aturan utama yaitu:
1. Aturan 12 detik (12-seconds-rule).
Aturan ini menyatakan bahwa suatu halaman harus sudah tampil dalam waktu
12 detik atau kurang. Jadi, kecepatan akses terhadap satu halaman harus
diperhatikan agar situs secara keseluruhan dapat tampil dengan cepat.
2. Aturan 4 detik (4-seconds-rule).
Aturan 4 detik menyatakan bahwa setiap komponen yang ada di halaman
harus sudah tampil dalam waktu 4 detik atau kurang. Komponen disini dapat
berupa teks, gambar, animasi, tabel dan sebagainya.

Kecepatan akses situs sangat dipengaruhi oleh seberapa banyak kita

menggunakan fitur-fitur yang haus bandwidth seperti gambar, animasi, atau
grafik. Jika memang harus menggunakan gambar atau animasi, gunakanlah
secara selektif, hanya yang benar-benar mendukung isi dan tujuan situs. Saran
lainnya adalah dengan tidak memperkecil ukuran gambar yang terlalu besar
secara langsung di browser (melalui atribut width dan height dalam tag img). Jika
ingin menampilkan gambar yang besar menjadi kecil, maka kita lebih baik
mengecilkan ukuran gambar tersebut dengan image-editor seperti Adobe
Photoshop, Macromedia Fireworks atau yang lainnya.

Achmad Solichin (achmatim@bl.ac.id) Halaman 27

Design dan Pemrograman Web 1 (PG110)

Praktek: Mendefinisikan Situs di Dreamweaver 8

Mendefinisikan Situs Baru

Sebelum membuat halaman situs web secara keseluruhan, sebaiknya kita

mendefinisikan dahulu situs yang akan kita buat. Manfaat dari pendefinisian situs
ini adalah agar situs kita tersimpan dan ter-manage dengan struktur yang baik.
Dan disini kita juga dapat mendefinisikan bagaimana konektivitas dengan server,
jenis server-side-scripting apa yang dipakai dan sebagainya.
Berikut ini langkah-langkah mendefinisikan situs baru di Dreamweaver 8.

1. Pertama, pilih menu Site > Site New... atau jika kita berada di halaman awal
(start-page) Dreamweaver, pilih menu Dreamweaver Site... pada kolom
Create New.

2. Selanjutnya window Site Definision akan terbuka. Ketikkan nama situs pada
kotak isian pertama (What would you like to name your site?) dan alamat
situs pada kotak isian kedua (What is the HTTP Address (URL) of your site?).
Klik tombol Next untuk melanjutkan.

3. Pada window berikutnya akan diminta untuk memilih teknologi server yang
digunakan. Pilihan teknologi server yang disediakan antara lain ColdFusion,
ASP.NET, ASP, JSP dan PHP MySQL. Saat ini kita belum menggunakan
teknologi server, jadi pilih pilihan No, I do not use a server technology.
Klik tombol Next untuk melanjutkan proses pendefinisian situs.

Achmad Solichin (achmatim@bl.ac.id) Halaman 28

Design dan Pemrograman Web 1 (PG110)

4. Selanjutnya akan ditanyakan bagaimana kita akan menyimpan file web,

apakah di komputer lokal atau di komputer server. Pilih pilihan Edit local
copies on my machine, then upload to server when ready
(Recommended). Lalu pilih letak penyimpanan file web. Pilih tombol Next
untuk melanjutkan.

Achmad Solichin (achmatim@bl.ac.id) Halaman 29

Design dan Pemrograman Web 1 (PG110)

5. Pada window selanjutnya kita diminta menentukan bagaimana cara koneksi

dengan server. Koneksi dengan server dapat dilakukan melalui FTP,
Local/Network, WebDAV, dsb. Jika kita hanya mengedit file di komputer lokal
(tidak menggunakan server) maka pilihlah koneksi None. Klik tombol Next
untuk melanjutkan.

6. Akan ditampilkan window berisi informasi pendefinisian situs yang telah kita
lakukan. Klik tombol Done untuk menyimpan pendefinisian situs.

Achmad Solichin (achmatim@bl.ac.id) Halaman 30

Design dan Pemrograman Web 1 (PG110)

7. Hasil pendefinisian situs tampak pada window Files yang terletak di sebelah
kanan layar dokumen utama Dreamweaver.

Mengatur Struktur Folder Situs

Pada dasarnya pengaturan file dan folder pada saat pembuatan suatu
aplikasi situs web tidak ada aturan tertentu, artinya kita bebas menyimpan dan
mengatur file web kita. Namun demikian, pengaturan file dan folder yang baik
akan memudahkan kita dalam mengatur situs kita.
Sebagai contoh, kita akan mendefinisikan struktur file dan folder situs
menjadi sebagai berikut:
• Folder utama (Root Folder)
Berisi file-file utama halaman web, seperti index, about us dsb. Folder ini
sudah dibuat saat mendefinisikan situs.
• Folder images
Berisi file-file image yang digunakan dalam situs, seperti header, background,
menu dsb.
• Folder includes
Berisi file-file yang selalu disertakan dalam halaman-halaman situs, seperti
file CSS, javascript dll.
• Folder galleries
Berisi file-file galeri foto (jika kita akan menampilkan foto).
• Folder downloads
Berisi file-file yang bisa didownload (jika kita akan menyediakan file yang
dapat didownload).

Untuk membuat folder baru dalam situs, klik kanan pada nama situs dan
pilih sub menu New Folder dan ketikkan nama foldernya. Ulangi langkah
tersebut untuk setiap nama folder di atas.

Achmad Solichin (achmatim@bl.ac.id) Halaman 31

Design dan Pemrograman Web 1 (PG110)

Tampilan struktur situs setelah semua folder dibuat menjadi sebagai

berikut:

Achmad Solichin (achmatim@bl.ac.id) Halaman 32