Pengenalan Macromedia Dreamweaver MX

download Pengenalan Macromedia Dreamweaver MX

of 17

  • date post

    04-Aug-2015
  • Category

    Documents

  • view

    256
  • download

    3

Embed Size (px)

Transcript of Pengenalan Macromedia Dreamweaver MX

BAB I PENGENALAN MACROMEDIA A. Macromedia Dreamweaver MX Macromedia Dreamweaver MX adalah program aplikasi web editor terpopuler saat ini (penulis : versi terbaru adalah Macromedia Dreamweaver MX 2004). Selain tampilannya yang lebih menarik, kamampuan dan fitur-fitur baru akan memudahkan para pemakainya untuk menciptakan halaman web dengan cepat dan mudah tanpa harus berlama-lama menuliskan baris-baris kode HTML. Salah satu kelebihan Dreamweaver MX adalah memiliki kemampuan yang mendukung pemrograman Script Server Side seperti Active Server Page (ASP), Java Server Page (JSP) dan PHP. Selain itu, Dreamweaver juga mendukung pemrograman Client Side seperti HTML dan Java Script. Mendesain website dengan Macromedia Dreamweaver (selanjutnya disingkat MacDream), kita dapat menggunakan obyek yang dibuat dengan Macromedia Flash dan Macromedia Fireworks yang kemudian kita impor ke MacDream sehingga mendapatkan hasil yang optimal. Ada banyak cara yang digunakan untuk membuat suatu website. Kita dapat mulai dengan menentukan strategi atau tujuan dari website. Jika membuat aplikasi, maka kita harus membuat database yang diperlukan dan setelah itu baru merancang tampilan website. Setelah rancangan selesai, buatlah website dan kode HTML-nya, tambahkan isi dan hal-hal yang interaktif, kemudian buat link (hubungan) antar halaman web dalam website itu. Kemudian lakukan pengujian atas fungsi web untuk mengetahui apakah sudah memenuhi tujuan yang ingin dicapai. Langkah terakhir adalah menerbitkan website tersebut pada sebuah server. Beberapa pembuat website juga melakukan tahapan perawatan (maintenance) untuk menjaga agar website itu tidak ketinggalan jaman (up to date). Jadi singkatnya, langkah-langkah pembuatan website adalah : 1. 2. 3. 4. 5. 6. Merencanakan website Membuat struktur dasar Membuat website Menguji website Menerbitkan website Memperbarui/Merawat website

B. Kebutuhan Sistem Agar MacDream MX berjalan secara optimal, spesifikasi hardware dan software yang harus dipenuhi adalah : 1. Prosesor komputer minimal Intel Pentium III 600MHz atau yang setara (tapi sebaiknya menggunakan Intel Pentium IV atau yang setara)

1

2. Sistem Operasi sebaiknya Windows 2000/XP/Vista 3. RAM minimal 256MB 4. Ruang Harddisk yang tersisa minimal 1 GB (dianjurkan lebih dari 1GB) 5. Resolusi monitor 1024 x 768 pixel atau lebih 6. Sebuah CD-ROM drive C. Memulai Program Setelah MacDream MX kita install ke dalam komputer, untuk menjalankan program caranya (dengan Windows XP) : Klik Start, pilih All Program, pilih Macromedia, lalu klik MacDream MX. Apabila program MacDream baru pertama kali kita jalankan, akan tampil Workspace Setup. Pada Workspace Setup tersebut, ada dua pilihan interface yang harus kita pilih, yaitu Designer dan Coder. Interface Designer menampilkan ruang kerja secara visual, sedangkan Interface Coder menampilkan ruang kerja secara coding yaitu dengan menuliskan scriptnya. Interface Designer banyak dipakai oleh mereka yang tidak menguasai atau tidak suka menulis bahasa pemrograman web yang panjang. Dengan tampilan kerja visual, kita akan lebih mudah merancang dan mendesain web page tanpa harus menulis script yang panjang. Untuk mengganti tampilan Workspace dengan menekan tombol Ctrl-U, lalu klik tombol Change Workspace, pilih workspace, lalu klik OK. Perubahan Workspace dilakukan setelah kita menutup MacDream, dan memanggil kembali. D. Starting Page Saat mulai program MacDream MX, halaman yang pertama kali muncul adalah : (maaf tidak ada contoh gambarnya)

2

BAB 2 RUANG KERJA MACROMEDIA DREAMWEAVER MX A. Workspace Dreamweaver MacDream MX tampil dengan ruang kerja yang menarik, seperti gambar ini : Title Bar Menu Bar Panel Group

Insert

Property Inspector

Nama File HTML Tag Selection Keterangan : Title Bar, adalah baris yang menampilkan nama program dan nama Menu Bar, berisi perintah-perintah untuk merancang dan mengolah Insert Bar, berisi tombol-tombol untuk memasukkan berbagai jenis objek Document Toolbar, terdiri dari tool-tool untuk menentukan model Panel Group, berisi panel-panel dari berbagai fungsi Dreamweaver spt : Tag Selection, menampilkan informasi tag-tag yang sedang aktif Property Inspector, berisi pengaturan-pengaturan untuk diterapkan pada dokumen yang sedang aktif dokumen website ke dokumen website yang sdg kita buat, agar lebih cepat, mudah dan praktis tampilan dan judul halaman website Design, Code, Application, Tag Inspector, Files, Frames, dan History Document Window

suatu objek, sehingga isi dari Property Inspector ini akan berubah sesuai dengan objek yang sedang aktif 3

Document Window, merupakan ruang kerja Dreamweaver sebagai

tempat untuk membuat halaman website B. Icon-Icon Insert Bar Pada Insert Bar terdapat icon-icon yang berfungsi untuk memasukkan berbagai macam objek ke dalam halaman website. Icon-icon tersebut dikelompokkan kedalam tab-tab, yaitu : Common, Layout, Forms, Text, HTML, Application, Flash elements, dan Favorites. Tab Common, terdiri dari : Hyperlink, email link, Named Anchor, Table, Image, Flash, Date, Comment, Template, dan Tag Chooser. Tab Layout, terdiri dari : Table, Insert Div Tag, Draw Layer, Layout Table, Draw Layout Cell, Insert Row Above, Insert Row Below, Insert Column to the left, Insert Column to the right, Frame, dan Tabular data. Tab Form, terdiri dari : Form, Text Field, Hidden Field, Text Area, Check Button, Radio Button, Radio Group, List/Menu, Jump Menu, Image Field, File Field, Button, Label, dan Field Set. Tab Text, terdiri dari : Font Tag Editor, Bold, Italic, Strong, Emphasis, PRE, Heading 1, Heading 2, Heading 3, Unordered List, Ordered List, List Item, Definition List, Definition Term, Definiton Description, dan Characters. Tab HTML, terdiri dari : Horizontal Rule, Head Content, Table, Frame, Script dll. C. Property Inspector Property Inspector adalah bagian ruang kerja MacDream yang berfungsi untuk mengatur property objek yang sedang aktif. Property ini berada pada bagian paling bawah Workspace Dreamweaver, yaitu dibawah Tag Selection. Tampilan dan isi Property Inspector akan berubah sesuai dengan objek yang sedang aktif. D. Panel Group Panel Group adalah bagian ruang kerja Dreamweaver yang berisi panel-panel yang terletak pada satu jendela. Panel Groups standarnya berada dibagian paling kanan Workspace Dreamweaver. Masing-masing panel berisi menu-menu yang ditampilkan dalam bentuk tab. Apabila kita membuka salah satu panel tersebut, misalnya panel file, maka terlihat filefile yang kita gunakan dalam suatu website. E. Document Window Document Window adalah ruang kerja Dreamweaver yang digunakan sebagai tempat untuk membuat halaman web. Ada tiga model tampilan pada Document Window, yaitu : Code, Split, dan Design. Code View menampilkan dokumen web dalam bentuk kode. Split View menampilkan dokumen web dalam bentuk kode dan desain. Sedangkan Design View menampilkan dokumen web dalam bentuk desain.

4

BAB 3 MEMBUAT WEBSITE A. Merencanakan Website Membuat website adalah proses yang rumit. Biasanya diperlukan suatu team yang terdiri dari banyak orang dengan berbagai peran untuk memastikan bahwa website itu berisi informasi yang akurat, tampilannya menarik dan kerjanya lancar. Agar suatu website dapat diakses di internet, website harus dimasukkan ke suatu web server dengan alamat IP (Internet Protocol) yang permanent. Alamat IP adalah serangkaian angka yang menjadi alamat di Internet (penulis : untuk penjelasan IP dapat mengikuti kuliah Sistem Jaringan/Internet). Untuk mengakses suatu website, dapat mengetik alamat IP (yang tidak lazim) atau nama domainnya. Nama domain adalah alamat web yang sudah mewakili alamat IP (IP public) dan biasanya nama usaha yang diwakili oleh website itu. Merencanakan website adalah hal penting dari suatu proyek pembuatan website. Untuk memulainya, buatlah daftar pertanyaan dan jawaban mengenai website itu. Contoh daftar pertanyaan dan jawaban : NO 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. PERTANYAAN Siapa target penggunanya ? Bagaimana cara website dapat menjangkau target ? Apa tujuan website/situs ini ? Bagaimana cara mengumpulkan informasi Dari mana bahan/materi untuk situs multimedia ? Berapa anggarannya ? Berapa lama waktu untuk membuat website Siapa yang masuk dalam tim Seberapa sering situs harus diperbarui Siapa yang bertanggungjawab merawat situs ini JAWABAN Orang dewasa, remaja, anak-anak atau semua umur Kata-kata, gambar, animasi, gabungan dll. Menjual produk, menyediakan informasi Menggunakan dokumen yang ada, mencari informasi diluar, merekrut karyawan yang kompeten Perusahaan sendiri atau dari luar Terbatas, cukup, sangat banyak 1 bulan, 2 bulan, 1 tahun Sendiri, 1 orang, 2 orang atau banyak orang dan disesuaikan dengan kebutuhan Setiap hari/minggu/bulan/per periodic a/t tergantung kebutuhan Sendiri atau anggota tim

5

Bagian lain dari perencanaan adalah membuat rancangan struktur dasar website (sketsa). Sketsa menunjukkan berapa halaman web yang diperlukan dalam website itu. Contoh sketsa : HOME PAGE

ABOUT US

CONTACT US

PRODUCTS

CUSTUMER SERVICE

KOMPUTER

PRINTER

B. Membuat Website Setelah membuat sketsa, kita mulai mempersiapkan file-file yang akan digunakan untuk membuat halaman web, seperti : teks, gambar, animasi, video. Beberapa file mungkin dari software lain atau dari dreamweaver. Halaman web yang terlalu banyak gambar dan animasi akan membutuhkan waktu lama untuk muncul dilayar, sehingga pengunjung website mungkin akan meninggalkan web tersebut. C. Membuat Folder gambar Setelah membuat situs/web, lalu kita membuat folder untuk menampung file-file gambar. Misal nama foldernya adalah assets. Kemudian folder tsb. kita jadikan default untuk menyimpan gambar. Kita juga dapat membuat subfolder pada folder assets untuk menyimpan file-file tertentu, seperti file animasi, grafik, dan suara/sound.

6

BAB IV MEMBUAT DOKUMEN WEBSITE Setelah kita memb