BAB IPengenalan Dreamweaver1.

Pedahuluan
Merancang sebuah website tidak terlepas dari pembuatan desain tampilan web tersebut, karenadesain web
merupakan langkah awal dari pembuatan website.Dasar pembuatan website menggunakan bahasa HTML
(HyperText Markup Language) yaitu bahasapemrograman dalam pembuatan web. Penggunaan HTML dalam
pembuatan web tidak semua orang dapatmenggunakannya untuk mempermudah dalam pembuatan web
ini kita dapat menggunakan aplikasi editorweb yang bersifat visual.Salah satu aplikasi untuk melakukan
perancangan desain web secara visual adalah AdobeDreamweaver. Aplikasi ini secara umum sudah sangat
poluler digunakan untuk merancang desain website.Aplikasi Adobe Dreamweaver menyediakan banyak
fasilitas yang dapat memudahkan user dalammenghasilkan sebuah website yang interaktif dan menarik.

1.2

Menggunakan Adobe Dreamweaver

Untuk menjalankan program Adobe dreamweaver dapat kita buka dari menu start|Program|
AdobeDreamweaver CS5, akan muncul tampilan Starter Page berikut:

 Bagian dari Starter Page diantaranya sebagai berikut:

1. Bagian kiri, yaitu Open a Recent Item merupakan alternatif untuk membuka file, atau
recent file.Untuk membuka file, pilih Open pada Starter Page.
2. Bagian tengah yaitu Create New digunakan untuk membuat halaman web baru.
Terdapat beberapamacam tipe file untuk format halaman web yang dapat Anda buat
seperti:

a. HTML merupakan dasar untuk pembuatan desain web. File HTML berisi suatu instruksi
tertentuyang dapat memberikan sebuah format pada dolumen yang akan ditampilkan
pada WWW(World Wide Web).
b. Coldfusion merupakan bahasa script yang digunakan oleh Adobe Coldfusion, Bluedragon,
dansebagainya yang digunakan untuk scripting server-side.
c. PHP (HyperText Preprocessor) adlah sebuah bahasa pemgrograman yang umum dipakai
untukscripting server-side. PHP biasanya terpasang pada HTML. Dengan bahasa
pemrograman inidapat dibuat suatu website yang dinamis.
d. ASP VBScript (ASP Visual Basic Script). VBScript merupakan bahasa scripting turunan
daribahasa pemrograman Visual Basic.

Pada Starter Page di atas pada CreateNew pilihlah HTML, maka tampilan dari Adobe
Dreamweaver adalahsebagai berikut:
2

1.2.1

Menu Bar
Menu bar pada Adobe Dreamweaver yaitu File, Edit, View, Insert, Modify, Format, Commands,
Site,Window, dan Help. Setiap menu mempunyai beberapa submenu sesuai dengan kategorinya,
selain itu jugamempunyai fungsi yang berbeda-beda

1.2.2

Document Window
Document windows menampilkan dokument dari halaman web yang aktif, atau dokumen
yangsedang diedit. Pada Document Window terdapat Title Bar yang menampilkan judul
halaman,fasilitas Zoom, Document Toolbar, dan Tag Selector

1.2.3

Document Toolbar
Dokumen Toolbar berisi tombol-tombol yang digunakan untuk mengatur layar kerja dokumen
padadengan cepat, diantaranya show Code view, Show Code and Design views, dan Show Design
view.

 Show Code ViewMode pada layar Code hanya akan menampilkan kode-kode script dari
halaman web. Di sebelah kirilayar kerja terdapat Coding tool yang digunakan untuk
mengatur kode atau script tersebut. Untukmengaktifkan tampilan layar Code, Kita
dapat menggunakan salah satu cara berikut:

Pada Menu Bar klik View > Code 5