| |
PENGENALAN MACROMEDIA DREAMWEAVER |
Macromedia Dreamweaver |
Keunggulan 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 Macromedoa FreeHand, Fireworks, dan Flash
|
| |
|
Setelah Dreamweaver terinstal, kita dapat membukanya dengan memilih menu start > All Programs > Macromedia > Macromedia Dreamweaver cs 6.
|
| |
| Memulai Dreamweaver 2 |
| Open a Recent Item |
menampilakan file-file yang terakhir dibuka (recent files) |
| |
| Create New |
| 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 |
| |
| Top Features |
| Dipilih 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 didalam list dapat dipilih menu More... tampilannya terlihat seperti berikut :
|
| |
| Memulai Dreamweaver 4 |
Pada kolom Category terdapat beberapa kategori file baru yang dapat dibuat
- Blank 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 Digunakan 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 Menampilkan pilihan untuk membuat file baru yang berupa template. Template tersebut dapat berupa template untuk HTML, PHP atau yang lainnya. |
| |
| Memulai Dreamweaver 5 |
Other Menampilkan jenis file yang tidak ada di tiga kategori sebelumnya, antara lain file Text, Java, dan seterusnya.
CSS Style Sheets Berisi beberapa contoh halaman CSS siap pakai.
Framesets Jika ingin membuat situs dengan menggunakan frame, maka pilihlah kategori ini.
Page Designs (CSS) Menampilkan beberapa contoh layout halaman situs yang didesain dengan CSS.
Starter Page Menampilkan pilihan beberapa layout halaman depan situs.
Page Designs Menampilkan berbagai format dasar halaman web. |
| |
| HOSTING |
- Apabila seseorang mengklik domain kita kemudian bagaimana caranya agar domain HTML yang ada pada komputer kita bisa ditampilkan?
- Dokumen-dokumen HTML pada komputer kita harus disimpan ditempat lain, jangan di komputer kita. kita harus menyewa tempat diperusahaan Hosting untuk menyimpan dokumen kita.
- Jadi hosting merupakan tempat untuk menyimpan dokumen HTML kita. Biasanya perusahaan yang menjual hosting juga menjual domain jadi kita membeli domain sekaligus menyewa hosting untuk menyimpan file HTML kita, Pembayaran hosting biasanya bulanan. |
| |
| Tampilan Dreamweaver |
|
| |
| Tampilan Dreamweaver |
| 1. Menu Utama |
|
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 webbrowser.
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. Untuk menambahkan suatu objek atau komponen, seperti form, frame dan image ke dalam halaman web.
Modify. Digunakan untuk mengubah properties dari objek yang sedang aktif. Dan juga digunakan untuk melakukan convert table ke layer dan sebaliknya.
Text. Digunakan untuk mengatur tampilan (style) text.
Commands. Terdiri dari beberapa perintah berhubungan dengan source-formating dan HTML-cleaning. Menu ini juga memiliki sub menu untuk membuat web photo album.
Site. Berhubungan dengan manajemen file dan situs.
Window. Digunakan untuk pengaturan tampilan (show-and hide) window properties.
Help. Merupakan menu bantuan mengenai penggunaan Dreamweaver. |
| |
| 2. Insert Bar |
| Common. Berisi komponen-komponen HTML yang sering digunakan, seperti table, div, image, komentar, hyperlink. |
|
| |
| Layout. Berisi pengaturan pilihan tampilan standar, expanded atau layout. Standar digunakan jika kita akan men-design layout dengan tabel, layout di |
|
| |
| Forms. Digunakan untuk menambahkan elemen form ke dalamhalaman. |
|
| |
| Text. Berisi pengaturan-pengaturan (formating) text. |
|
| |
| HTML. Digunakan untuk menambahkan elemen-elemen HTML, seperti HR, table, frame dan script |
|
| |
| Application. Digunakan untuk menambahkan elemen-elemen dalamwebsite dinamis, seperti database, procedure, field. |
|
| |
| Flash elements. Digunakan untuk menambahkan elemen flash ke dalamsitus. |
|
| |
| Favorites. Untuk menambahkan elemen-elemen atau objek objek sesuai keinginan kita. Untuk menambahkannya, klik kanan pada bar dan pilih submenu Customize Favorite Objects... |
|
| |
|
| 3. 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.
|
| |
| Perbandingan tampilan layar dokumen utama : |
 |
|
| |
| 4. 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. |
 |
|
| |
5. Panel Pendukung |
 |
Panel CSS. Digunakan untuk pengaturanCSS 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 disatu halaman |
| Panel Application. Merupakan panel pengaturan untuk teknologi server yang digunakan. Dari sini dapat diatur dan didefinisikan server-side-scripting yang digunakan, jugadapat diatur koneksi dengan data base tertentu |
| Panel Tag. Menampilkan daftar atribut yang berlakudi suatu tagHTML yang sedang aktif. Dari panel ini juga dapat diatur dan ditambahkan beberapa event dan fungsi javascript (behaviors) pada tag(elemen) yang sedang aktif |
| Panel Files. 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 keserver via FTP |
|
|
| |
| Mendefinikan Situs Baru |
| Langkah-langkah mendefinisikan situs baru di Dreamweaver 8.
1. 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?) |
|
| |
| 3. Pada window berikutnya akan diminta untuk memilih teknologi server yang digunakan |
|
| |
| 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 |
|
| |
| 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 |
|
| |
| 6. Akan ditampilkan window berisi informasi pendefinisian situs yang telah kita lakukan. Klik tombol Done untuk menyimpan pendefinisian situs |
|
| |
| 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. 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. |
| Tampilan struktur situs setelah semua folder dibuat menjadi sebagai berikut: |
|
|
| |
Untuk lebih memahami dan kelanjutan materi pada pertemuan ini, saya sudah membuat video tutorial nya, dengan mengakses link sebagai berikut :
- Video 1: link youtube 1
- Video 2: link youtube 2
- Video 3: link youtube 3 |
| |
|
|
.png){kind=logo}
