MAKALAH INI DISUSUN UNTUK MEMENUHI TUGAS

MATA PELAJARAN PEMROGRAMAN WEB.

GURU PENGAMPU:
Yenny Oktafitriana Arbi ,S.pd
Agus Giyanto ,A.Md

Modul Dreamweaver cs3

Penyusun
Nama : 1). ADE AGUSTIN (01)
2). DESI NOVIYANTI (08)
SMK N 1 BLORA
JURUSAN MULTIMEDIA
2015

SMK N 1 BLORA, Multimedia 2015 Page 1

 Pendahuluan.

≽. SEJARAH DREAMWEAVER CS3

Adobe Dreamweaver CS3 keluaran Adobe Systems yang dulu dikenal sebagai
Macromedia Dreamweaver keluaran Macromedia. Program ini banyak digunakan
oleh pengembang web karena fitur-fiturnya yang menarik dan kemudahan
penggunaannya. Versi terakhir Macromedia Dreamweaver sebelum Macromedia
dibeli oleh Adobe Systems yaitu versi 8. Versi terakhir Dreamweaver keluaran
Adobe Systems adalah versi 10 yang ada dalam Adobe Creative Suite 4 (sering
disingkat Adobe CS4).
Adobe Dreamweaver adalah sebuah aplikasi untuk pemograman website. Aplikasi
yang sudah menjadi banyak favorit programmer website sebelumnya bernama
Macromedia Dreamweaver. Entah apa yang terjadi dengan Macromedia sehingga
mereka rela melepas-nya ke Adobe.
Untuk pemasangan di Linux menggunakan Wine terbilang cukup sulit banyak dari
mereka yang mencoba memasang aplikasi ini selalu berakhir dengan gagal. Sampai
Wine mengeluarkan patch-nya untuk mempermudah pemasangan aplikasi ini, cara
yang dapat dilakukan untuk memasangan aplikasi ini adalah dengan menyalin
seluruh file Adobe Dreamweaver CS3 yang sudah terpasang di sistem operasi
WindowskeLinux.
Jika Anda tidak memasang sistem operasi Linux dan Windows dengan sistem
dualboot, Anda dapat memasang sistem operasi Windows dengan menggunakan
aplikasi `Sun VirtualBox` . Atau cara lain untuk mendapatkan file-file Adobe
Dreamweaver CS3 yang telah terpasang di sistem operasi Windows dengan
menggunakan komputer lain.

Adobe dreamweaver cs3 (atau biasanya disebut dreamweaver) merupakan sebuah

software pengembangan web yang awalnya diciptakan oleh marcomedia pada
tahun 1997, namun sekarang dimiliki oleh Adobe, yang megakusisi marcomedia
pada tahun 2005. (http://www.adobe.com/dreamweaver : 2009)

Adobe dreamweaver cs3 adalah script editor profesional yang dilakukan untuk
melakukan desain secara visual dan mengolah halaman web serta pembuatan
aplikasi web. Para pengemban dan programer web lebih menyukai menggunakan
Dreamweaver. Karena Dreamweaver merupakan script editor yang berbasiskan
WYSIWYG ( What You See Is What You Get).

SMK N 1 BLORA, Multimedia 2015 Page 2

 ≽. KELEBIHAN DAN KEKURANGAN DREAMWEAVER CS3.

Kelebihan :

1. Kemampuannya membuat halaman web yang terlihat konsisten.

Adobe Dreamweaver sudah terinstall beberapa template yang elegan dan menarik.
Tentunya ini memudahkan anda yang ingin belajar membuat sebuah web namun
anda belum mampu membuat design web sendiri. Jika anda ingin membuat lebih
dari 10 halaman web dengan didasarkan design template tertentu maka web anda
akan memiliki gaya halaman web yang sama dan terlihat konsisten dari halaman
perhalaman.

2. Kemudahan dan efisiensi dalam penggunaan

Program ini tidak hanya dirancang untuk anda yang sudah mahir dan mengerti
bahasa pemrograma. Bagi anda yang belum mengerti bahasa pemrograman, anda
bisa membuat halaman web dengan hanya cara mengklik atau drag and drop
menggunakan mouse serta anda juga bisa melihat halaman html-nya selama proses
desain berlangsung. Atau yang lebih dikenal dengan sebutan WYSIWYG (What
You See Is What You Get)

Selain itu dreamweaver memiliki kemampuan memperlihatkan 3 proses yang

berbeda, yaitu :

 Code View : Berfungsi untuk hanya menampilkan script html saja.

 Desain View : Berfungsi menampilkan kode-kode html yang anda tulis
menjadi sebuah design/template yang nantinya akan ditampilkan di
browser.
 Split View : Berfungsi menampilkan gabungan antara Code View dan
Desain View pada saat bersamaan.Jadi anda bisa langsung melihat
perubahan pada saat anda mengubah htmlnya.

3. Mudah untuk mengupload melalui FTP

Dreamweaver sudah dilengkapi dengan fitur FTP jadi setelah anda selesai
membangun sebuah web, anda bisa langsung menguploadnya melalui FTP . FTP
(singkatan dari File Transfer Protocol) adalah sebuah protokol Internet yang
berjalan di dalam lapisan aplikasi yang merupakan standar untuk pentransferan
berkas (file) komputer antar mesin-mesin dalam sebuah internetwork.

SMK N 1 BLORA, Multimedia 2015 Page 3

 Ilustrasi FTP

4. Dapat dikustom
Dreamweaver dapat disesuaikan dengan kebutuhan yang anda perlukan. Menu, tab,
perintah, font dan warna semua kode dapat disesuaikan dengan preferensi pribadi.
Hal ini dapat secara efektif memudahkan proses desain web. Selain itu
dreamweaver didukung banyak plug-in yang membantu anda dalam proses desain.

Kekurangan :
1. Harga Software yang Cukup Mahal.
Mungkin salah satu kekurangan dari Dreamweaver ini adalah dari segi harga.
Dreamweaver CS5 dibandrol oleh Adobe sekitar $399. Harga yang mungkin
terjangkau oleh kalangan tertentu saja.

Lembar Kerja Dreamweaver

Adobe Dreamweaver adalah program aplikasi pengembang yang berguna untuk
mendesain web. Versi terbaru program ini adalah Adobe Dreamweaver CS6,
yang dirilis pada tanggal 21 April 2012. Software Adobe Dreamweaver dibuat dan
dikembangkan oleh Adobe Systems.

SMK N 1 BLORA, Multimedia 2015 Page 4

 Area Kerja Adobe DreamweaverCS4

adalah lingkungan yang di gunakan untuk merancang halaman web anda. Pada
area kerja ini terdapat jendela utama, yaitu jendela dokumen (Document Window)
yang berfungsi untuk mendesain halaman, baik dengan cara penulisan kode
maupun secara visual. selain itu, juga terdapat menubar, Toolbar, dan panel panel
yang membantu desain halaman web dengan mudah. Berikut penjelasan beberapa
Area kerja Adobe Dreamweaver CS4 beserta kegunaannya

Menubar

Menubar adalah sebuah grup menu yang terdapat pada bagian atas aplikasi yang
tersusun dari deretan text/label. Setiap menu terdiri dari submenu-submenu sesuai
kategori menu masing-masing. menu menu pada Menubar ini jarang di gunakan.
Biasanya fasilita pada Menubar telah diwakili dalam sebuah panel yang di miliki
Adobe Dreamweaver CS4, misalnya menu insert pada menubar telah diwakili
dengan panel insert pada panel group

Workspace Switcher

Workspace Switcher adalah sebuah fasilitas yang berfungsi untuk mengubah mode
tampilan area kerja sesuai kebutuhan perancang web. Workspace Switcher ini
berada sejajar dengan Menubar sebelah kanan Secara default, mode tampilan area
kerja Adobe Dreamweaver CS4 adalah mode Desaigner. Adobe Dreamweaver CS4
memiliki mode area kerja yang banyak, diantaranya mode Coder yang hanya
menampilkan kode pembuatan halaman dan Classic.

Document Title

Document Title adalah nama dokumen yang dibuka pada workspace Adobe
Dreamweaver. Anda dapat menutup sebuah dokumen melalui Document Title.
pada Document Title ini juga ditampilkan Path/Direktori di mana dokumen itu di
simpan

Document Toolbar

Toolbar adalah kumpulan tombol yang berfungsi memudahkan oengembang untuk

mengunakan fasilitas yang disediakan Dreamweaver. Pada toolbar ini, terdapat
tombol-tombol untuk mengubah mode jendela dokumen yang ditampilkan dan
beberapa tombol lain.

SMK N 1 BLORA, Multimedia 2015 Page 5

 Code
Tombol Code ini berfungsi mengubah jendela dokumen menjadi mode code. yaitu
jendela dokumen yang menampilkan kode html dokumen/halaman web yang aktif.
Selain itu, anda dapat mengubah jendela dokumen menjadi mode Code melalui
Menubar View > Code.

Split
Tombol ini berfungsi mengubah mode jendela dokumen menjadi Split, yaitu
jendela dokumen akan menampilkan kode dokumen dan tampilan desain
(grafis/visual) dokumen. Document Window akan menjadi dua bagian atas dan
bawah. Bagian atas menampilkan source code, dan bagian bawah menampilkan
visual/grafis dari halaman web.DesignTombol ini berfungsi mengubah mode
dokumen window menjadi mode design, yaitu Document Window hanya akan
menampilkan desain web secara visual/grafis dari halaman web.

Live Vew
Tombol ini berfungsi menampilkan desain web sebagaimana browser pada jendela
dokumen mode design. Tombol ini akan menyebabkan jendela dokumen mode
desain tidak dapat di edit, namun anda tetap dapat mengubah kode html-nya.

LiveCode
Tombol n akan aktif jika mode Live View dipilih, Tombol ini akan membuat kode
HTML pada jendela dokumen mode Code tidak dapat di edit. hal ini ditandai
dengan perubahan warna background pada jendela dokumen.

Text Field Title

Text Field Title berfungsi untuk menambahkan judul halaman web. Title ini akan
ditampilkan pada titlebar browser.

File Management
Menampilkan menu pop-up untuk mengorganisasi file-file yang dibutuhkan oleh
dokumen web.

Preview/Debug in Browser
Tool ini digunakan untuk menampilkan halaman web yang aktif pada browser.

Refresh Design

SMK N 1 BLORA, Multimedia 2015 Page 6

 Tool ini digunakan untuk me-refresh desain dokumen setelah ada perubahan kode
dokumen. Hal ini akan membuat desain visual dokumen berubah sesuai perubahan
pada kode HTML dokumen.Tool Refresh dibutuhkan karena perubahan kode
HTML dokumen tidak secara langsung otomatis mengubah desain dokumen.

View Option
Tool ini berupa menu pop-up yang digunakan untuk mengatur jendela dokumen,
baaik tampilan kode maupun tampilan desain. Melalui menu ini, anda dapat
menampilkan nomor baris kode, menampilkan isi/content dari tag head, membuat
jendela desain mempunyai ukuran/rulers , berbentuk grid , Dsb

Visual Aids
Visual Aids digunakan untuk tampilan desain yang berbeda dalam mendesain
halaman web.

Validate Markup
Validate Markup digunakan untuk melakukan koreksi dokumen yang aktif atau tag
yang terpilih.

Check Browser compability

Tool ini digunakan untuk mengecek apakah aturan CSS yang anda gunakan
kompatible dengan browser yang berbeda.

Document window

Document Window adalah area yang digunakan untuk membuka, mengedit,

menampilkan desain dokumen dan atau kode dokumen web yang aktif. jendela
dokumen ini mempunyai tool-tool yang digunakan untuk menampilkan informasi
pada halaman, seperti Related File And Code Navigator, Tag Selector, dan fasilitas
lain, seperti Zooming, Hand Tool, Selected Tool, dan informasi lainnya.

Panel group

Panel Group merupakan kumpulan panel berupa tab-tab pilihan yang mempunyai
fungsi berbeda-beda. Panel adalah sebuah jendela untuk memudahkan pembuatan
2desain web dengan menampilkan informasi pendukung pada jendela informasi
sehingga anda dapat mengedit dan memanfaatkan data yang ada pada area tersebut.
Terdapat banyak sekali panel, diantaranya panel insert yang berfungsi untuk
menambahkan komponen komponen web ke dalam desain halaman anda kemudian
panel files yang berfungsi menampilkan file-file yang telah anda buat, baik file

SMK N 1 BLORA, Multimedia 2015 Page 7

 gambar, html, dan folder yang terdapat pada site yang anda definisikan. untuk
menampilkan panel yang lain anda dapat menggunakan menu Windows.

Tag Selector

Tag Selector berfungsi menampilkan tag yang di seleksi pada area desain. Anda
dapay menyeleksi bagian desain dengan memilih tag yang sesuai. sebagai contoh,
untuk menyeleksi semua elemen halaman, klik tag <body>

Panel Properties

Panel Properties berfungsi menampilkan properti dari elemen halaman web yang
terpilih, melalui panel ini anda dapat mengubah properti elemen tersebut, baik
dengan penambahan properti CSS maupun properti dari tag HTML.

Perangkat Tambahan

Selain Adobe DreamweaverCS4, anda juga membutuhkan sebuah browser yang

berfungsi menampilkan hasil desain halaman web. sementara itu, untuk membuat
website yang dinamis anda membutuhkan sebuah database (misalnya MySql),
sebuah server web (misalnya Apache) dan sebuah phpAdmin untuk melakukan
pengolahan database dengan php. Berikut penjelasannya…

Catatan:
“Perangkat tambahan Server Web diperlukan bila anda membuat sebuah halaman
website yang dinamis (Dinamic Web), tapi bila anda hanya ingin membuat
halaman web statis / sederhana, maka anda tidak memerlukan aplikasi Server
Web”

Server Web

Server Web dibutuhkan untuk melakukan pemrograman yang membutuhkan

teknologi server-side seperti PHP, ColdFusion, ASP, dan JSP. oleh karena itu,
server web merupakan perangkat yang penting untuk melakukan uji coba
pemrograman server-side yang anda buat. dengan demikian anda tidak perlu
melakukan upload data ke sebuah hosting hanya untuk mengetahui hasil
pemrograman untuk sisi server. Pemrograman server-side biasanya digunakan
untuk mangakses database yang terdapat pada server hosting, sehingga
pengembang dengan mudah mengelola content website dengan mudah tanpa
mengubah halaman halaman web.Salah satu teknologi aplikasi server web yang
lengkap yang dapat anda gunakan adalah aplikasi AppServ yang merupakan

SMK N 1 BLORA, Multimedia 2015 Page 8

 kumpulan aplikasi pendukung pembangun website. pada paket AppServ versi 2.5.8
terdapat aplikasi aplikasi berikut:

Server web Apache versi 2.2.4

Bahasa scrip PHP versi 5.3.1

phpMyAdmin Database Manager versi 2.9.2

Database MySQL versi 5.0.27

Anda bisa mendapatkan aplikasi AppServ secara gratis

disini www.AppServNetwork.com

Browser

Browser adalah aplikasi yang digunakan untuk menampilkan file-file website, baik
html, php, mht, dan lain sebagainya. anda tidak akan dapat menampilkan hasil dari
desain anda apabila anda tidak mempunyai browser anda dapat menggunakan
browser Internet explorer (IE) yang merupakan bawaan windows. Mozila Firefox,
Opera, Safari, Chrome, dan lain lain

TOOL
START PAGE

Start Page adalah kotak dialog yang di tampilkan pertama kali bersamaan
dengan jendela utama aplikasi Adobe Dreamweaver CS4 saat di
jalankan.fungsi dari Star Page ini adalah menampilkan menu pilihan yang
ada di Adobe Dreamweaver CS4,dimana user berhak memilih menu mana
yang akan di pakai atau di jalankan.

Open a Recent Document

Menu ini menampilkan daftar nama dokumen yang pernah di buka dengan
Adobe Dreamweaver CS4. anda dapat membuka dokumen tersebut dengan
cara memilih nama dokumen yang ada. selain itu,anda juga dapat membuka

SMK N 1 BLORA, Multimedia 2015 Page 9

 dokumen yang belum pernah di buka dengan Adobe Dreamweaver CS4
dengan cara memilih menu OPEN.

Create New

Menu ini di gunakan untuk membuat dokumen web baru.Anda dapat

membuat dokumen dengan beberapa tipe yang di sediakan oleh Adobe
Dreamweaver

HTML
Hypertext Markup Languange (HTML) adalah sebuah bahasa dasar yang di
gunakan untuk merancang halaman web statis.

Coldfusion
Coldfusion adalah bahasa scripting yang di gunakan untuk pemrogaman web
server.Coldfusion digunakan pada Adobe Coldfusion, BlueDragon dan
lainnya.

PHP
PHP Hypertext preprocessor (PHP) merupakan bahasa pemrogaman
scripting web server-side. dengan pemrogaman server-side,sebuah website
akan lebih dinamis.PHP biasanya terpasang pada file HTML yang di simpan
dengan ektensi *.php.

Top Features (video)

Merupakan menu pilihan link yang berupa rekaman video penggunaan

fasilitas yang di sediakan Dreamweaver secara online. menu link rekaman
video yang di sediakan, antara lain: Related Files, Live View, Code
navigator, Dataset Wizard, Web Widgets, JavaScript Support, Dsb

Help Online

Merupakan menu pilihan untuk menampilkan bantuan tentang cara

penggunaan, fitur fitur terbaru Adobe Dreamweaver CS4 dan lainnya secara
online.

Don’t Show Again

SMK N 1 BLORA, Multimedia 2015 Page 10

 Kotak dialog start page akan selalu di tampilkan bersamaan dengan jendela
utama Adobe DreamweaverCS4 saat aplikasi ini di jalankan.
Hyperlink
Klik diatas dan akan membuat anda untuk link ke lokasi
lain dari halaman web, file atau lokasi pada halaman yang sama.

Email Link
Email link mengijinkan pengunjung situs
mengirimkan seseorang email dengan mengklik pada special
link. Gunakan tool ini untuk mempermudah link.

Named Anchor
Tanda anchor ini adalah istimewa dalam
melakukan link, akan membawa user ke bagian lain pada
halaman yang sama. Klik nama tombol nama anchor untuk
mempercepat membuat link untuk anchor.

Insert Table
Ketika anda mengklik tool ini, akan muncul
jendela menanyakan jika anda ingin memasukkan informasi dan
membuat tabel. Ketika itu selesai, klik pada “OK” dan akan
muncul tabel dalam halaman web.

Draw Layer
Layer bisa membantu ketika mendesain layout untuk
halaman. Layer bukanlah tabel, tapi merupakan kotak yang bisa
diisi teks, gambar, atau apa saja, dan bisa ditempatkan dimana saja
dilayar. Ketika anda mengklik tombol ini, kursor anda akan berubah
menjadi salib, dan anda bisa menarik layer pada halaman.

Imag
Anda bisa dengan mudah menempatkan gambar dalam
halaman web dengan mengklik tombol ini. Ketika anda
melakukannya, jendela baru akan muncul. Dari sini, anda bisa
membrowser komputer anda untuk mencari gambar yang ingin
dimasukkan ke dalam halaman web. Ingat, jika anda berencana
untuk menempatkan halaman anda dalam internet, anda harus
menaruh semua gambar yang digunakan dalam web dengan baik.
Ini akan diceritakan pada bagian “publishing”

SMK N 1 BLORA, Multimedia 2015 Page 11

 Image Placeholder
Penempatan gambar bisa digunakan secara
efektif dalam web desain. Mereka akan terlihat sederhana, tapi
mereka sangat penting. “image”. Ini merupakan pixel kosong yang
bisa digunakan untuk berbagai hal, seperti membuat ruang antar
objek, atau membuat garis dan kotak untuk layouts.

Fireworks HTML
Jika anda membuat halaman web memakai
Macromedia Fireworks, anda akan bisa memasukkannya ke dalam
halaman Dreamweaver MX dengan menggunakan tool ini.

Flash
Mengijinkan anda untuk memasukkan elemen flash dalam
halaman web.

Rollover image
Suatu efek khusus pada gambar, ketika kursor
mouse digerakkan pada gambar maka gambar akan berubah.

Navigation Bar:
Ini merupakan fungsi yang komplek dan akan
membuat anda untuk mengendalikan bar situs anda, dan mengubah
gambar untuk link ke halaman lain.

Horizontal Rule
suatu garis sederhana yang bisa digunakan
untuk beberapa bagian isi halaman web. Klik tombol ini,
memutuskan panjang garis horizontal, dan ini akan dimasukkan ke
halaman.

Date
Klik tombol ini untuk memasukkan tanggal ke halaman web,

Tabular Data
Memasukkan data ke dalam tabular

Comments:
Komentar bisa digunakan dalam halaman web, tanpa
benar-benar muncul pada halaman web. Ini akan membantu jika

SMK N 1 BLORA, Multimedia 2015 Page 12

 anda ingin mengingat sesuatu yang anda desain.

Tag Chooser
Memasukkan spesifik HTML tag dari daftar.
Biasanya digunakan oleh Web Developer yang sudah mahir.
Di atas adalah materi insert bar yg berada di tab common, ini masih belum
selesai kawan asih ada lagi tab-tab yang lainnya
baca yang lainnya :

menu bar

berisi semua perintah yang dapat digunakan untuk bekerja pada

Dreamweaver.

Insert bar

mengandung tombol-tombol untuk menyisipkan berbagai macam objek

seperti image , tabel, dan layer ke dalam dokumen

Document window

menampilkan dokumen dimana anda sedang bekerja

Document tool bar

berisi tombol-tombol dan menu pop-up yang menyediakan tampilan berbeda

dari document window

Files panel

memperlihhatkan group fileberdasarkan site yang sedang dikerjakan

Tag selector

menampilkan hierarki tag di sekitar pilihan yang aktif pada desain view
-untuk memilih komponen atau obyek pada web page kita

Property inspector

melihat dan mengubah properti dari objek dan teks

Panel group

SMK N 1 BLORA, Multimedia 2015 Page 13

 beberapa panel yang digunakan sebagai window pembantu untuk bekerja
diDreamweaver .Terdapat lima buah panel yaitu Design, Code,
Application, Tag Inspector dan Files.

Site panel

mengatur file dan folder yang membentuk situs web anda

Panel Design

berisi format-format CSS yang ada pada dokumen yang sedang dikerjakan.

panel code

berisi semua penjelasan dari tag-tag HTML dan cara penggunaanya.

panel Files

berisi semua files (html, image, swf) jika anda telah mendefinisikan suatu
site ke dalam area kerja Dreamweaver.

MENU DAN SUBMENU

Menu Bar
Dalam Dreamweaver, perintah – perintah yang tersedia di dalam menu bar adalah
File, edit, View, Insert, Modify, Text, Commads, Site, Window dan Help. Sistem
kerja Menu Bar dalam dreamweaver sama seperti pada menu bar windows,
sehingga tidak perlu terperinci dijelaskan disini.

Menu Panel Insert.

Menu Panel Insert adalah sekumpulan menu yang berhubungan dengan operasi
pemasukan dan pembuatan pernik – pernik pada halaman web. Secara default
menu insert ini sudah aktif dan siap digunakan. Menu Insert dapat diaktifkan
dengan cara :

 Klik Window pada menu bar

 Kemudian pilihlah Insert (jika tercentang berarti menu Insert sudah aktif).
 Selain itu juga dapat mengaktifkan dan menonaktifkan dengan cara menekan
Ctr + F3.

SMK N 1 BLORA, Multimedia 2015 Page 14

  Berikut adalah gambar menu Panel Insert.

Keterangan :

Menu Common (Utama)

Menu common adalah menu yang memiliki beberapa icon yang merupakan menu
standar pada saat mendesain halaman web.

 Tabel Untuk membuat tabel

 Layer Untuk membuat layar diatas lembar kerja
 Image Untuk mengimpor gambar

Imageplaceholder

 Firework HTML Untuk mengambil file yang terbuat dari Firework

 Flash Untuk mengimpor file dari flash
 Rollover Image Membuat animasi gambar bergantian

Navigation Bar

 Horixontal Rule Membuat garis horizontal

 Date Memasukan tanggal hari ini
 Tabular Data

Comment

 Tag Chooser Untuk memasukan perintah

Menu Panel Layout

Pada menu ini terdapat icon yang juga tersedia pada menu common, yaitu icon
tabel dan layer. Kegunaan icon ini sama dengan icon pada menu Common.

Menu Layout
Penjelasan menu layout :

 Draw Layout Table Untuk menggambar tabel pada halaman

 Draw Layout Cell Untuk membuat area teks pada layout tabel

Menu Panel Text

 Menu text digunakan untuk memformat teks yang ada.

SMK N 1 BLORA, Multimedia 2015 Page 15

 Menu Tex

 Front Tag editor Menentukan warna dan jenis tulisan

 Bold Menebalkan karakter
 Italick Membuat huruf miring
 Strong Menebalkan karakter
 Paragraf Membuat paragraf
 Block Coute Membuat paragraf menjorok ke tengah
 Formated Text Membuat teks seperti apa adanya
 Heading Mmbesarkan huruf
 Unordered List Membuat simbol berupa icon
 Ordered List Membuat simbol berupa angka

Menu Panel Table

Digunakan untuk mendesian tabel. Dalam menu ini hanya tersedia satu icon yang
mirip gambar dan fungsinya sama dengan fungsi common

Menu Panel Frame

Menu frame adalah salah satu menu yang akan kita gunakan dalam praktik
nantinya. Menu ini digunakan untuk memilih bentuk desain halaman utama kita.

Menu Panel Form

Menu form digunakan untuk mendesian formulir. Kita mungkin lebih
mengenalnya dengan media entri atau input. Selain menggunakan ini, Anda juga
dapat menggunakan menu Insert, kemudian pilih Form Object.

Form Membuat Form

 Text field Membuat input teks

 Hidden Field Membuat input teks yang di hidden
 Text Area Membuat input teks yang banyak
 Check Box Untuk pilihan yang banyak
 Radio Button Membuat pilihan hanya satu
 Radio Group Membuat pilihan hanya satu
 List / Menu Membuat menu drop list
 Jump Menu Menu yang memiliki link
 Image Field Mengimpor gambar
 File Field Membuat browse file
 Button Membuat tombol

SMK N 1 BLORA, Multimedia 2015 Page 16

 Menu Panel Characters

Menu caracter memiliki beberapa icon yang digunakan untuk melakukan operasi
halaman dan pengaturan paragraf. Adapun jenisnya dapat kita lihat seperti pada
gambar di bawah.

 Line Break Ganti baris (Shift + Enter)

 Left Quote Membuat petik kiri
 Right Quote Membuat petik kanan
 Pound Tanda mata uang Poundsterling
 Euro Tanda mata uang Euro
 Yen Tanda mata uang Yen

Menu panel Media

Menu media adalah sekumpulan icon yang berfungsi untuk melakukan

pengimporan atau penggabungan file dari luar program dreamweaver.

 Flash Untuk mengimpor animasi Flash

 Flash Untuk mengimpor tombol flash
 Flash Text Untuk mengimpor teks Flash
 Shockwave Untuk mengimpor animasi Shockwave
 Plugin Menggabungkan semua bentuk file

Menu Panel Head

Menu Head digunakan untuk operasi – operasi penambahan komponen dalam tag
head HTML Anda. Secara default, menu ini tidak begitu difungsikan oleh
pengguna.

Menu Panel Script

Menu script adalah sekumpulan icon yang pada umumnya digunakan untuk
melakukan penulisan perintah Script seperti Java Script, Java Applet dll.

SMK N 1 BLORA, Multimedia 2015 Page 17

  Script Menuliskan script (Java Script, Java Applet dll)
 Noscript Membuat halaman tanpa script
 Server – Side Include Menggabungkan file lain ke dalam halaman

Menu Panel Application

Menu application digunakan untuk operasi database. Hal ini memiliki kegunaan
yang mirip dengan program Cold Fusion

Menu Panel Properties

Menu Properties adalah sekumpulan menu yang berfungsi sebagai tool dalam
pemformatan object yang ada pada halaman web yang Anda buat. Menu ini akan
selalu berubah tergantung meny insert yang sedang Anda aktifkan tipe apa.
Adapun cara mengaktifkannya adalah

 Klik menu window pada menu bar

 Pilih dan klik Properties.
 Selain itu Anda juga dapat mengaktifkan dengan cara tekan Ctr + F3

Menu pada Saat Tabel aktif.

Menu properties akan berubah pada saat Anda mengaktifkan tabel yang Anda buat
melalui menu Insert table atau yang lain. Cobalah dengan membuat tabel
sederhana dan aktifkan dengan mengklik tabel tersebut sehingga menu Properties
akan berubah seperti gambar di bawah ini.

Menu Properties Saat Form Aktif.

Menu akan berubah bentuk dan fungsi saat Anda menggunakan form (formulir)

SMK N 1 BLORA, Multimedia 2015 Page 18

 DREAMWEAVER CS3 WORKSPACE.

DOCUMENT TOOLBAR.

Code View: View or edit the page in HTML.

Split View: View the page in HTML code and
Design view (WYSIWYG) at the same time.
Design View: View or edit the page in the
WYSIWYG (What You See Is What You Get) editor.
Title: Type the Web page title you want
to appear in the title bar of the browser.
File Management: Access already-published
files or upload files directly from the document window.
Preview: Choose from a list of browsers
installed on the computer to preview the page.

Refresh: Click to update changes made to the

SMK N 1 BLORA, Multimedia 2015 Page 19

 page after working on the HTML code.
View options: In Design view, apply a grid or
ruler to the page. In Code view, change how the HTML
code is displayed.
Visual Aids: Choose from different aids to
help you design your pages.
Validate markup: Validate current document
or tag.
Check Browser Compatibility: Check the
compatibility of your document with different Web
browsers.
INSERT TOOLBAR.

Common: includes objects commonly inserted in

a Web page (ex. tables, images)
Layout: insert layout tables and frames on the
page
Forms: insert elements often found in a Web
form (ex. text fields, option buttons, check boxes)
Data: insert Spry data objects and other dynamic
items like update forms.
Spry: includes Spry objects and widgets for
making Spry pages.
Text: apply formatting to text (ex. bold, italic, list
item)
Favorites: allows you to group the buttons you
use most often.

KEYBOARD SHORTCUTS.Keyboard Shortcuts

General
Insert Named <Ctrl>+<Alt>+<A>
Anchor
Add to Library <Ctrl>+<Shift>+<B>
Duplicate <Ctrl> + <D>
Edit Style Sheet <Ctrl>+<Shift>+<E>
Replace <Ctrl> + <H>
Show/Hide Grids <Ctrl> + <G>

SMK N 1 BLORA, Multimedia 2015 Page 20

 Show Invisibles <Ctrl>+<Shift>+<I>
Insert Image <Ctrl> + <Alt> + <I>
Page Properties <Ctrl> + <J>
Create Link <Ctrl> + <L>
Remove Link <Ctrl>+<Shift>+<L>
Insert Table Row <Ctrl> + <M>
Delete Table Row <Ctrl>+<Alt>+<M>
Quick Tag Editor <Ctrl> + <T>
View Head <Ctrl>+<Shift>+<W>
Content
Show/Hide Link <Ctrl>+<Shift>+<Y>
Switch Views <Ctrl> + < ` >
Function Key Shortcuts
Reference <Shift> + <F1>
Reference Panel <Ctrl>+<Shift>+<F1>
Layers <F2>
Frames <Ctrl> + <F2>
Object Panel <Ctrl> + <F2>
Behaviors Panel <Shift> + <F3>
Property Inspector <Ctrl> + <F3>
Hide/Show All <F4>
Floating Windows
Site Files <F5>
Refresh Local <Shift> + <F5>
Switch to Layout <Ctrl> + <F6>
View
Switch to <Ctrl>+<Shift>+<F6>
Standard View
Code Inspector <F10>
History Panel <Shift> + <F10>
Assets Panel <F11>
CSS Styles Panel <Shift> + <F11>
Preview in <F12>
Primary Browser
Preview in <Ctrl> + <F12>
Secondary Browser

PROPERTY INSPECTOR.
General Commands
• Select an item to view its properties.

SMK N 1 BLORA, Multimedia 2015 Page 21

 • To Get Help: Click the Help button for more information on options.
• Format Text in HTML Code: Click the Quick Tag Editor button to
apply an HTML tag to selected text or object.
• To Expand/Contract the Property Inspector: Click the
Expander arrow in the lower right corner to view or hide all the options in
the Property Inspector.

TEXT PROPERTIES.

• To Format Text: Select the text and apply formatting from the Property
Inspector.
• To Create a Hyperlink: Select the text and type the URL in the Link
textbox; or drag the Point-to-File icon to the file in the Site panel; or click
the Folder icon to browse for a file in the Web site.
• Specify Link Target Frame: Specify in which frame the hyperlink
should appear.

IMAGE PROPERTIES.

• To Add a Hyperlink to an Image: Select the text and type the URL in
the Link textbox; or drag the Point-to-File icon to the file in the Site panel; or
click the Folder icon to browse for a file in the Web site.
• To Create an Image Map: Select the Rectangular, Oval, or
Polygon command, draw a shape and set the link location.
• To Edit an Image: Use the image editing buttons.
• To Align an Image: Click the Align button arrow and align the image
relative to text nearby; or click the Left, Center or Right Align button in the
Inspector.
• To Insert an Image: Press <Ctrl> + <Alt> + <I>, or select Insert →
Image from the menu.

SMK N 1 BLORA, Multimedia 2015 Page 22

 TABLE PROPERTIES.

• To View Table Properties: Click a table border.

• To Add or Delete Rows or Columns: Type the number of rows or
columns you want to add or delete in the Rows and Cols text boxes.
• To Change Table Width: Type a number in the W text box.
• To Display the Table in Pixels or Percent: Click the pixels or
percent button arrow and select the display option.
• To Add Cell Padding or Cell Spacing: Enter the amount in the
CellPad or CellSpace text boxes.
• To Add a Background Color: Click the Bg Color list arrow and
select a color from the palette.
• To Add a Border Color: Click the Brdr Color list arrow and select a
color from the palette.
• To Add a Background Image: Type the location in the Bg text box, or
drag the Point-to-File icon to the file in the Site panel; or click the Folder
icon to browse for a file.
• To Add a Table Border: Enter the width in the Border text box.
Right
Align
Apply
Button
Table
Name
Number of
Rows and
Columns
Row Width

Clea

SMK N 1 BLORA, Multimedia 2015 Page 23

 PANELS.

To View or Hide a Panel: Select Window from the menu bar and
select the panel you want to view or hide. Or, click the panel group and select
the panel tab you want to view.
• To View or Hide Panel Groups: Click the Panel group Expander
arrow between the document window and the panel groups.
• There are four panel groups available in Dreamweaver:
CSS
CSS Styles: Apply CSS styles to the current selection
AP Elements: Manage the AP (absolutely positioned) elements in your
document
Application
Databases: Create and inspect database connections, insert database
code
Bindings: Locate and insert dynamic content
Server Behaviors: Create, insert and edit server behaviors into the page
Components: Create, inspect, and insert components or component code
Tag Inspector
Attributes: Edit or add attributes and their values
Behaviors: Attach or modify behaviors to page elements such as tags
Files
File: Track local and remote files, and upload files on the Web
Assets: View and insert site assets such as images, HTML colors, links,
Flash movies, scripts, templates, and library items

Snippets: Create, delete, edit, or insert code snippets in the document

SMK N 1 BLORA, Multimedia 2015 Page 24

 TUTORIAL SEDERHANA DALAM
MENDESAIN WEB.
MEMBUAT TULISAN BERJALAN DI DREAMWEAVER

Untuk membuat seatu web tampak lebih menarik Anda bisa memberikan
efek-efek tertentu terhadap tulisan maupun gambar. Disini saya akan
memberitahukan cara untuk membuat tulisan yang dapat berjalan, ikuti
lagkah-langkah berikut :
1. Buka macromedia dreameweaver sampai lembar kerja yang sudah
ditambahkan tabel

2. Tulislah kata yang Anda inginkan > masuk pada lembar kerja split

SMK N 1 BLORA, Multimedia 2015 Page 25

 3. Tulislah <marquee>………………………..</marquee>

SMK N 1 BLORA, Multimedia 2015 Page 26

 4. Kliklah toolbar preview(bola dunia)

5. Maka akan berjalan

SMK N 1 BLORA, Multimedia 2015 Page 27

SMK N 1 BLORA, Multimedia 2015 Page 28