Pengenalan Macromedia Dreamweaver

Desain dan Pemrograman Web 1 PG110 – 3 SKS

PENGENALAN MACROMEDIA DREAMWEAVER PERTEMUAN 04

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

Memulai Dreamweaver (1) Setelah Dreamweaver terinstall, kita dapat membuka nya dengan memilih menu Start > All Programs > Macromedia > Macromedia Dreamweaver 8.

Memulai Dreamweaver (2) Open a Recent Item Menampilkan file-file yang terakhir dibuka (recent files) Create New U ntuk 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. Create From Samples Di 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.

Memulai Dreamweaver (3) Jika jenis file yang akan dibuat tidak terdapat di dalam list, dapat dip ilih menu More... Tampilannya terlihat seperti berikut :

Memulai Dreamweaver (4) Pada kolom Category terdapat beberapa kategori file baru yang dapat dibuat Basic page D igunakan untuk membuat file-file dasar situs web. File yang termasuk dalam kategori ini antara lain file HTML, CSS, Javascript dan XML. Dynamic page D igunakan untuk membuat file-file dinamis , file atau script berbasis server (server-side-scripting). Masuk dalam kategori ini antara lain PHP, ASP, ColdFusion dan JSP. Tempate page M enampilkan pilihan untuk membuat file baru yang berupa template. Template tersebut dapat berupa template untuk HTML, PHP atau yang lainnya.

Memulai Dreamweaver (5) Other M enampilkan jenis file yang tidak ada di tiga kategori sebelumnya, antara lain file Text, Java, dan seterusnya. CSS Style Sheets B erisi beberapa contoh halaman CSS siap pakai. Framesets Jika ingin membuat situs dengan menggunakan frame, maka pilihlah kategori ini. Page Designs (CSS) M enampilkan beberapa contoh layout halaman situs yang didesain dengan CSS. Starter Page Men ampilkan pilihan beberapa layout halaman depan situs. Page Designs M enampilkan berbagai format dasar halaman web.

Tampilan Dreamweaver 8 (2) Menu Utama File . M erupakan 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.

Tampilan Dreamweaver 8 (3) Insert . Untuk menambahkan suatu objek atau komponen, seperti form, frame dan image ke dalam halaman web . Modify . D igunakan untuk mengubah properties dari objek yang sedang aktif. Dan juga digunakan untuk melakukan convert table ke layer dan sebaliknya. Text . D igunakan untuk mengatur tampilan (style) text. Commands . T erdiri dari beberapa perintah berhubungan dengan source-formating dan HTML-cleaning. Menu ini juga memiliki sub menu untuk membuat web photo album. Site . B erhubungan dengan manajemen file dan situs. Window . D igunakan untuk pengaturan tampilan (show-and-hide) window properties. Help . M erupakan menu bantuan mengenai penggunaan Dreamweaver.

Tampilan Dreamweaver 8 (4) Insert Bar Common . B erisi komponen-komponen HTML yang sering digunakan, seperti table, div, image, komentar, hyperlink. Layout . B erisi 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.

Tampilan Dreamweaver 8 (5) Forms . D igunakan untuk menambahkan elemen form ke dalam halaman. Text . B erisi pengaturan-pengaturan (formating) text. HTML . D igunakan untuk menambahkan elemen-elemen HTML, seperti HR, table, frame dan script.

Tampilan Dreamweaver 8 (6) Application . D igunakan untuk menambahkan elemen-elemen dalam website dinamis, seperti database, procedure, field. Flash elements . D igunakan untuk menambahkan elemen flash ke dalam situs. Favorites . Untuk menambahkan elemen-elemen atau objek-objek sesuai keinginan kita. Untuk menambahkannya, klik kanan pada bar dan pilih submenu Customize Favorite Objects...

Tampilan Dreamweaver 8 (7) Layar Dokumen Utama M erupakan 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 .

Tampilan Dreamweaver 8 (8) Perbandingan tampilan layar dokumen utama :

Panel 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. 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. Tampilan Dreamweaver 8 (9)

Tampilan Dreamweaver 8 (10) Panel P endukung Panel CSS . D igunakan untuk pengaturan CSS Style halaman web. Panel ini memiliki dua tab, yaitu tab CSS Styles dan Layers. Tab Layers digunakan jika ingin mengatur div atau layer yang ada di satu halaman. Panel Application . M erupakan panel pengaturan untuk teknologi server yang digunakan. Dari sini dapat di atur dan di definisikan server-side-scripting yang digunakan , juga dapat di atur koneksi dengan database tertentu.

Tampilan Dreamweaver 8 (11) Panel Tag . M enampilkan daftar atribut yang berlaku di suatu tag HTML yang sedang aktif. Dari panel ini juga dapat di atur dan dit ambahkan beberapa event dan fungsi javascript (behaviors) pada tag (elemen) yang sedang aktif. Panel Files . D igunakan 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.

Mendefinisikan Situs Baru (1) L angkah-langkah mendefinisikan situs baru di Dreamweaver 8. P ilih menu Site > Site New... atau jika kita berada di halaman awal (start-page) Dreamweaver, pilih menu Dreamweaver Site... pada kolom Create New . 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?).

Mendefinisikan Situs Baru (3) Pada window berikutnya akan diminta untuk memilih teknologi server yang digunakan.

Mendefinisikan Situs Baru (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.

Mendefinisikan Situs Baru (5) Pada window selanjutnya 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 .

Mendefinisikan Situs Baru (6) Akan ditampilkan window berisi informasi pendefinisian situs yang telah kita lakukan. Klik tombol Done untuk menyimpan pendefinisian situs.

Mendefinisikan Situs Baru (7) Hasil pendefinisian situs tampak pada window Files yang terletak di sebelah kanan layar dokumen utama Dreamweaver.

Mengatur Struktur Folder Situs (1) Tidak ada aturan baku untuk pengaturan file dan folder situs . Namun , pengaturan file dan folder yang baik akan memudahkan kita dalam mengatur situs kita.

Mengatur Struktur Folder Situs (2) 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).

Mengatur Struktur Folder Situs (3) Untuk membuat folder baru dalam situs, klik kanan pada nama situs dan pilih sub menu New Folder dan ketikkan nama foldernya.

Mengatur Struktur Folder Situs (4) Tampilan struktur situs setelah semua folder dibuat menjadi sebagai berikut:

Terima Kasih Fakultas Teknologi Informasi Universitas Budi Luhur http://fti.bl.ac.id

Pengenalan Macromedia Dreamweaver

More Related Content

What's hot (18)

Similar to Pengenalan Macromedia Dreamweaver (20)

More from Achmad Solichin (20)

Recently uploaded (20)

Pengenalan Macromedia Dreamweaver