MAKALAH INI DISUSUN UNTUK MEMENUHI

TUGAS MATA PELAJARAN PEMROGRAMAN WEB

Guru Pengampu : a. Yenny Oktafitriana Arbi ,S.Pd

b. Agus Giyanto S.Pd

Modul Dreamweaver CS5

Penyusun : 1. Siti Solekah (26)

2. Wayunita Robiatu Sholikhah (30)

SMK N 1 BLORA

MULTIMEDIA

2015

Adobe Dreamweaver merupakan program penyunting halaman web 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. Adobe Dreamweaver CS5 dirilis tanggal 12 April 2010. Perbedaan versi ini

dengan sebelumnya ( CS4 ),

1. Ada toolbox baru di CS5, AP Element dan Adobe AIR.

2. Perbedaan yang paling menonjol dalam CS5 ini adalah pengorganisasian

menunya. Salah satu contohnya ada di menu site manager, CS4 dan CS5 sudah

berbeda sekali.

Adobe Dreamweaver juga memiliki kelebihan dan kelemahan seperi sofware pada

umumnya,

Kelebihan :

1. Kemampuan membuat halaman web yang terlihat konsisten.

2. Kemudahan dan efisiensi dalam penggunaan.

3. Mudah untuk mengupload melalui FTP.

4. Dapat dikustom.

Kekurangan :

1. Harga software yang cukup mahal.

Tampilan Pada Dreamweaver CS5

Gambar 1.1

Keterangan :

1 => Dokumen toolbar

2 => Menu bar

3 => Workspace switcher

4 =>Panel groups

5 => Tag selector

6 => Properti inspector

7 => Dokumen window

Menu Bar

Gambar 1.2

1. File, sub menunya :

New

Open

Browser in bridge

Open recent

Open in frame

Close

Close all

Share my screen

Save

Save as

Save all

Save all related file

Save as template

Revert

Print code

Import

Export

Comvert

Preview in browser

Check page

Valided

Compire with remote server

Design notes

Exit

2. Edit, sub menunya :

Undo

Redo

Cut

Copy

Paste

Paste special

Clear

Select all

Select parent tag

Select child

Find and replace

Find selection

Find next

Go to line

Show code hints

Refresh code hints

Code hints tools

Indent code

Outdent code

Balance braces

Repreating entries

Code collapse

Edit with external editor

Tag libraries

Keyboard shortcut

Preferences

3. View, sub menunya :

Zoom in

Zoom out

Magnification

Fit selection

Width code

Split code

Design code

Code and design

Split vertikal

Design view on left

Switch views

Refresh design view

Refresh styles

Live view

Live view options

Live view browser

Live code

Inspect

Head contents

Noscript content

Table mode

Visuals aids

Style rendering

Code view options

Rules

Grid

Guides

Trasing image

Plugins

Display external files

Color icon

Head panel

Toolbars

Related files

Related file options

Code navigator

Show spry tooltips

4. Insert, sub menunya :

Tag

Image

Image objects

Media

Table

Table objects

Layout objects

Form

Hiperlink

Email link

Named anchor

Date

Server-side include

Comment

HTML

Template objects

Recent snippets

Widget

Spry

InContext editing

Data objects

Customize favorites

Get more objects

5. Modify, sub menunya :

Page properties

Template properties

Selection properties

CSS style

Edit tag

Quick tag editor

Make link

Remove link

Open linked page

Link target

Table

Image

Frameset

Arrange

Convert

Library

Templates

6. Format, sub menunya :

Indent

Outdent

Paragraph format

Align

List

Font

Style

CSS style

Color

7. Commands, sub menunya :

Start recording

Play recorded commands

Edit commands list

Get more commands

Get AIR extension

Manage extensions

Check spelling

Apply source formatting

Apply source formatting to selection

Clean up XHTML

Clean up word HTML

Externalize javascript

Romove FLV detection

Optimize image

Sort table

8. Site, sub menunya :

New site

Manage sites

Get

Check out

Put

Check in

Undo check out

Show checked by

Located in side

Reports

Site – specific code hints

Shiynchronize sitewide

Check links sitewide

Change links sitewide

Advanced

9. Window, sub menunya :

Insert

Properties

CSS style

AP element

Business catalyst

Databases

Bindings

Server behaviors

Components

Files

Assets

Snippet

Tag inspector

Behaviors

History

Frames

Code inspector

Results

Extensions

Workspace layout

Hide panels

Application bar

Cascade

Tile horizontally

Tale vertically

1untitled – 1

10. Help, sub menunya :

Dreamweaver help

Spry framework help

Get started with business c`atalys incontext editing

Omniture

ColdFusion help

Reference

Dreamweaver support center

Dreamweaver exchange

Manage extensions

CSS advisorates

Adobe online forums

Product registration

Deactivate

Updates

Adobe product improvement program

About dreamweaver

Tool Bar

Code View : Tampilkan kode dan hanya kode menggunakan pandangan ini.

Dreamweaver membantu Anda untuk memecahkan kode dengan tag kode warna,

atribut, CSS, dan elemen lainnya.

Split View : Memilih opsi ini membagi jendela dokumen antara Kode dan Desain

pandangan. Pandangan ini bisa sangat membantu karena Anda melihat kedua desain

dan kode secara bersamaan.

Design View : Opsi ini menampilkan halaman Anda dalam Design view dalam

jendela dokumen.

Live Code : Ketika Live View diaktifkan, Anda dapat melihat kode sumber dari

dokumen Anda sebagai pengguna akan melihatnya di browser, tetapi Anda tidak

dapat mengedit kode halaman dalam pandangan ini.

Check Browser Compatibility: Menu ini menunjukkan pilihan yang memungkinkan

Anda memeriksa integritas halaman, seperti aksesibilitas, atau apakah aturan CSS

Anda yang kompatibel di seluruh browser yang berbeda.

Live View : Live View merender halaman Anda seolah-olah itu di browser, bebas

dari perbatasan, panduan, dan alat bantu visual lainnya. Di Live View, Anda tidak

dapat mengedit konten dulu, tapi Anda dapat melompat ke Code, Split, atau melihat

Desain dan memodifikasi konten halaman Anda.

Inspect : Tombol baru Periksa bekerja dengan Live View untuk

mengungkapkan aturan CSS yang elemen Format pada halaman Anda. Ketika Anda

memilih elemen pada halaman dengan Inspect diaktifkan, panel CSS Styles

mengungkapkan sifat yang memformat elemen itu, dan memungkinkan Anda untuk

menonaktifkan atau mengubah sifat tertentu dan lihat hasilnya.

Preview/Debug in Browser : Klik tombol ini untuk melihat atau men-debug

dokumen Anda di salah satu diinstal browser Web Anda, Adobe BrowserLab, atau

Device Central.

Visual Aids : Klik tombol ini untuk memilih alat bantu visual yang berbeda (seperti

perbatasan dan panduan) untuk membantu Anda melihat berbagai elemen dan

membuat merancang halaman Anda lebih mudah.

Refresh Design View : Klik tombol ini untuk menyegarkan Design view dokumen

setelah Anda membuat perubahan dalam tampilan Kode. Perubahan yang Anda buat

dalam tampilan Kode tidak muncul secara otomatis dalam Design view sampai Anda

melakukan tindakan tertentu, seperti menyimpan file atau klik tombol ini.

Document Title : Masukkan nama dokumen Anda dalam bidang ini.

File Management :Klik tombol ini untuk menampilkan menu pop-up File

Management. Gunakan menu ini untuk memeriksa dokumen Anda atau ketika

diaktifkan untuk situs Anda.

Setelah membaca dan memahami materi diatas, berikut beberapa contoh tutorial dalam

pembuatan website menggunakan dreamweaver CS5 :

a) Membuat animasi flash slide show pada dreamweaver

Pertama yang harus dilakukan adalah menyiapkan gambar yang akan di masukkan ke dalam

animasi, siapkan 2 atau lebih gambar.

Selanjutnya,Klik Menu INSERT >> MEDIA >> Pilih dan klik IMAGE VIEWER >> Lalu

ketik nama file dan pilih dimana file animasi akan disimpan. Lalu akan muncul gambar

seperti dibawah ini :

Gambar 1.1

pada menu sebelah kanan terdapat Menu Tag <Object>>> Flash Element yang di dalamnya

terdapat pengaturan animasi yang kita buat tadi. Berikut gambar menunya di bawah ini :

Gambar 1.2

Pada menu Flash Element, Pilih dan klik ikon Kertas pingsil pada pilihan imageURLs

['img.jpg','img2,j.... , setelah anda klik maka akan muncul tampilan seperti di bawah ini :

Gambar 1.3

pilih dan klik ikon folder pada img1.jpg dan isikan alamat gambar yang akan dimasukkan ke

dalam animasi, untuk menambah gambar anda bisa melakukan dengan cara klik tanda Ples

(+) atau untuk mengurangi gambar klik Min ( - ). jika semuanya sudah selesai maka akan

muncul tampilan seperti gambar di atas. jika sudah langsung klik OK. Lalu kita kembali lagi

ke menu Flash Element, Kita atur ShowControl menjadi NO,SlideAutoPlay menjadi YES,

SlideLoop menjadi YES. untuk mengatur cepat slide lambatnya pergantian gambar kita bisa

mengaturnya pada SlideDelay.

untuk menjalankan animasi, simpan file dokumen anda sesuai dengan server anda tadi, bisa

menggunakan PHP,dll. saya menyimpan dengan nama test.html.mari kita jalankan

menggunakan browser yang mendukung animasi Flash.

Gambar 1.4

b) Membuat menu bertingkat

- Buka Macromedia Dreamweaver dan buatlah sebuah halaman HTML baru dengan

mengakses menu File > New.

- Aktifkan window Behaviors melalui menu Window > Behaviors atau dengan shortcut

Shift + F4.

- Buatlah sebuah link dengan text atau gambar, isi halaman tujuan link dengan # yang

menandakan bahwa link tersebut jika diklik nantinya akan tetap di halaman yang sama. Sorot

(select) link tersebut, kemudian dariwindow behaviors yang telah diaktifkan di langkah

sebelumnya klik tombol Add behaviour yaitu icon dengan tanda [+]. Akan ditampilkan

beberapa pilihan behaviour dan pilih Show Pop-Up Menu. Lihat gambar 1.

Gambar 1

- Selanjutnya akan ditampilkan window Show Pop-Up Menu. Buatlah menu bertingkat

sesuai rancangan menu yang diinginkan. Tersedia beberapa tombol yang akan membantu

mengatur menu yang akan dibuat. Lihat contohnya di gambar 2. Jika ingin mengatur tampilan

dari menu, dapat membuka tab ‘Appearance’ dan jika ingin mengatur posisi dari menu bisa

mengaktifkan tab ‘Position’ seperti terlihat pada gambar 4. Klik tombolOK jika menu sudah

diatur sesuai keinginan.

Gambar 2

Gambar 3

- Simpan halaman dan tampilkan hasilnya di browser dengan mengakses menu

File > Preview in browser… atau shortcut F12. Contoh tampilan menu terlihat

di gambar 4.

Gambar 4