Kata Pengantar.

Transkripsi

1

2 Kata Pengantar Saat ini Dreamweaver MX telah menjadi program yang paling banyak di gunakan sebagai program pembuat web. Meskipun di pasaran telah banyak beredar web authoring yang lain, tetapi keberadaan Dreamweaver tetap menjadi pilihan utama. Hal tersebut tidak terlepas dan kemudahan dan banyaknya fasilitas yang ada pada program ini. Selain DreamweaverVersi MX, saat ini telah dirilis Dreamweaver MX 2004 tetapi penyusun cenderung lebih menyukai Dreamweaver Versi MX karena memiliki pilihan untuk menentukan ruang kerja. Ruang kerja pada versi 2004 terasa lebih sempit sedangkan fitur tambahannya masih terasa minim. Selain itu, ada beberapa fitur yang justru di hilangkan pada versi tersebut, misalnya fitur Timeline pada Behaviour. Meskipun begitu, kita masih dapat dengan leluasa menggunakan buku inii untuk di aplikasikan pada Dreamweaver versi MX 2004 tanpa banyak kesulitan. Buku ini di susun dengan teori dan tutorial secara bergantian agar kita lebih mudah mencerna bahasan-bahasan yang ada. Semoga bahasan yang ada pada buku ini dapat membantu kita untuk menguasai Dreamweaver dengan baik. 2

3 Pendahuluan Pengantar Macromedia Dreamweaver MX adalah editor HTML untuk melakukan desain, menuliskan kode dan sebagai program untuk mengolah dan membangun website, halaman web dan aplikasi web yang lain. Dreamweaver MX mengijinkan kita untuk membangun dan mengembangkan web baik dengan menggunakan kode HTML (jika kita terbiasa dengan bahasa HTML) maupun dengan menggunakan tampilan visual yang cocok untuk pengguna yang kurang terbiasa dengan penggunaan tag HTML. Fitur editing visual pada Dreamweaver MX mengijinkan kita untuk dapat membuat halaman web dengan cepat tanpa perlu menulis sepenggal kode-pun. Bagi kita yang telah terbiasa dan akrab dengan kode HTML, Dreamweaver menyediakan berbagai fitur dan peralatan yang dapat kita gunakan untuk mempermudah kerja kita ketika melakukan penulisan kode HTML. Selain itu, Dreamweaver MX juga menyediakan banyak fitur yang dapat membantu kita ketika ingin membuat sebuah halaman web dinamis dengan menggunakan beberapa bahasa pemrograman semacam ASP, ASP.NET, ColdFusion Markup Language (CFML), JSP, dan PHP. Kebutuhan sistem Untuk dapat menjalankan Dreamweaver MX dengan balk, setidaknya komputer kita memiliki persyaratan seperti di bawah ini : Untuk sistem operasi Windows Prosesor Intel Pentium II atau yang setara dengan kecepatan 300 MHz atau yang lebih cepat. Sistem operasi Windows 98, Windows 2000, Windows NT (dengan Service Pack 3 atau yang lebih baru), Windows ME, atau Windows XP Microsoft Internet Explorer atau Netscape Navigator Versi 4.0 atau yang lebih baru sebagal browser. Memory RAM minimal 96 MB (di sarankan 128 MB).Ruang pada harddisk sebesar 275 MB. Monitor yang mampu menampilkan 256 warna dengan resolusi minimal 800 x 600 pixel (atau sebaiknya 1024 x 768). Sebuah CD-ROM drive Untuk sistem operasi Macintosh Power Macintosh G3 atau yang lebih baru. Sistem operasi OS 9.1, Mac OS 9.2.1, atau Mac OS X 10.1 atau yang lebih baru. Mac 05 Runtime for Java (MRJ) 2.2 atau di atasnya (biasanya telah di ikutkan pada program installasi Dreamweaver MX) Microsoft Internet Explorer atau Netscape Navigator Versi 4.0 atau yang lebih baru sebagai browser. Memory RAM minimal 96 MB (di sarankan 128 MB). Ruang pada harddisk sebesar 275 MB. Monitor yang mampu menampilkan 256 warna dengan resolusi minimal 800 x 600 pixel (atau sebaiknya 1024 x 768). Sebuah CD-ROM drive. 3

4 Ruang Kerja Pengantar Pada sistem operasi Windows, Dreamweaver MX m enyediakan dua lay out ruang kerja yang dapat kita pilih yaitu layout ruang kerja yang keseluruhan jendelanya terintegrasi atau ruang kerja dengan jendela yang terpisah seperti Dreamweaver 4. Pada sistem operasi Macintosh, hanya atau ruang kerja dengan jendela yang terpisah seperti Dreamweaver 4 yang tersedia. Memilih layout ruang kerja (Windows) Pada sistem operasi Windows, ketika pertama kali kita menjalankan Dreamweaver, sebuah kotak dialog untuk memilih layout ruang kerja akan muncul. Selain melalui kotak dialog tersebut, kita dapat merubah layout ruang kerja melalui kotak dialog Preferences. Mengganti ruang kerja melalui kotak dialog Preferences Kilk Edit> Preferences. Pada kotak dialog Preferences, klik pada Category General. Catatan: Tampilan pada langkah ini sama dengan tampilan ketika Dreamweaver MX pertama kali memberikan penawaran untuk memilih layout ruang kerja. Ada dua jenis layout yang dapat kita pilih yaitu: Dreamweaver MX Workspace Ruang kerja ini adalah ruang kerja yang saling terintegrasi berbasis teknologi MDI (Multiple Document Interface), yaitu sebuah teknologi di mana semua jendela dokumen dan panel terintegrasi pada satu jendela besar, dengan panel grup yang berada di sisi kanan. Bagi kita yang ingin memperoleh tampilan baru dapat memilih tampilan ini. 4

5 Dreamweaver 4 Workspace Pilihan ini menyediakan layout ruang kerja yang persis seperti layout ruang kerja pada Dreamweaver 4, di mana setiap dokumen akan berada pada jendela yang terpisah. Kelebihan dari layout ini adalah kebebasan bagi kita untuk memindahkan jendela-jendela yang ada untuk mendapatkan tampilan yang sesuai dengan keinginan kita. Jika kita telah terbiasa dengan tampilan ruang kerja Dreamweaver 4 dan tidak ingin beralih ke tampilan lain, sebaiknya kita memilih ruang kerja ini. Jendela dan panel Sebelum melangkah ke bagian lain, sebaiknya kita mengenal terlebih dahulu elemen yang ada pada ruang kerja Dreamweaver MX untuk mempermudah kerja kita nantinya. Jendela dan panel pada Dreamweaver MX Document toolbar Berisi tombol dan pop-up menu yang menyediakan beberapa cara untuk menampilkan dokumen (seperti Design view dan Code view), beberapa option dan beberapa operasi umum seperti melakukan preview dokumen ke browser. 5

6 Document toolbar Berisi tombol dan pop-up menu yang menyediakan beberapa cara untuk menampilkan dokumen (seperti Design view dan Code view), beberapa option dan beberapa operasi umum seperti melakukan preview dokumen ke browser. Tempat di mana kita dapat merubah beberapa properti yang di miliki oleh obyek atau teks yang kita pilih. Tiap jenis obyek atau teks memiliki properti yang berbeda. Panel groups Kumpulan beberapa panel sejenis yang di letakkan pada satu tempat. Menu pada Dreamweaver MX Di bawah ini keterangan singkat mengenai menu yang ada pada Dreamweaver MX. Menu berisi sub menu yang biasanya di tampilkan sebagai drop down menu yang akan muncul ketika kita menekan tombol menu utama. Menu File dan Edit Berisi menu standart untuk menu File dan Edit, seperti New, Open, Save, Cut, Copy, dan Paste. File menu juga berisi beberapa perintah tambahan seperti Preview in Browser dan Print Code. Edit menu juga berisi perintah seleksi dan pencarian, seperti Select Parent Tag dan Find and Replace, dan menyediakan akses ke Keyboard Shortcut Editor dan Tag Library Editor. Menu View Mengijinkan kita untuk melihat tampilan dokumen dengan beberapa cara (seperti Design view dan Code view) dan untuk menampilkan atau menyembunyikan beberapa elemen pada dokumen dan peralatan yang di miliki Dreamweaver. Menu Insert Berisi alternatif untuk memasukkan obyek pada dokumen. Menu Modify Pada menu ini kita bisa merubah properti elemen halaman web atau item lainnya yang kita pilih. Dengan menggunakan menu ini, kita bisa mengedit atribut tag, merubah tabel dan elemen tabel dan menampilkan beberapa tindakan yang dapat kita lakukan untuk item pada library dan template. 6

7 Menu Text Menu ini menyediakan perintah yang kita butuhkan untuk melakukan pemformatan pada teks. Perintah yang ada pada menu Command Berisi akses untuk beberapa macam perintah, termasuk untuk membuat album foto dengan cepat dan melakukan optimasi gambar menggunakan program lain. Menu Site Berisi item menu untuk membuat, membuka dan mengedit site Menu Window Berisi akses ke semua panel, inspectors, dan jendela pada Dreamweaver. Menu Help Berisi akses ke dokumentasi yang di miliki oleh Dreamweaver MX, termasuk petunjuk cara penggunaan Dreamweaver MX, membuat extensions untuk Dreamweaver MX, dan material lainnya yang dapat membantu kita untuk menggunakan Dreamweaver dengan lebih baik. Catatan: Sebagai tambahan pada menu bar untuk tiap menu, Dreamweaver MX menyediakan banyak context menus, yang akan mempermudah kita untuk dengan mudah mengakses perintah-perintah penting yang sesuai dengan seleksi yang sedang kita lakukan. Untuk menampilkan context menu, klik kanan (Windows) atau Control-click (Macintosh) salah satu item pada jendela. Semua context menus juga dapat kita lihat pada menu bar. 7

8 Dasar 2 Dreamweaver M X Menseleksi elemen pada jendela dokumen Untuk menseleksi elemen pada jendela dokumen, perintah yang biasa di lakukan adalah dengan melakukan klik pada elemen tersebut. Jika elemen yang kita inginkan tidak terlihat, kita harus mengatur agar elernen tersebut terlihat terlebih dahulu pada jendela dokumen. Untuk menseleksi elemen, lakukan salah satu langkah di bawah ini : Untuk menseleksi elemen yang terlihat pada jendela dokumen, klik pada elemen tersebut atau lakukan drag di atasnya. Untuk mensele ksi elemen yang tidak terlihat pada jendela dokumen, klik menu View > Visual Aids > Invisible Elements lalu pada tanda yang mewakili elemen tersebut pada jendela dokumen. Catatan : Beberapa obyek akan terlihat pada tempat yang berbeda dengan tempat kode dimasukkan. Sebagai contoh, sebuah layer bisa berada di mana saja pada dokumen, tetapi simbol kode akan berada pada tempat yang tetap (biasanya ditempatkan di pojok kiri atas jendela dokumen). Ketika sebuah elemen tersembunyi tersebut di tampilkan, Dreamweaver akan menampilkan sebuah icon yang mewakili elemen tersebut. Kita dapat menseleksi elemen tersebut dengan melakukan klik pada simbolnya. Untuk menseleksi keseluruhan tag bersama isinya, klik salah satu tag pada tag selector yang berada di kiri bawah jendela dokumen (Tag selector akan terlihat baik ketika kita memilih Design view atau Code view.) Tag selector selalu menampilkan obyek yang terseleksi atau suatu kondisi yang sedang ada pada insertion point. Melihat kode HTML suatu teks atau obyek yang ters eleksi Untuk melihat kode HTML suatu teks atau obyek yang terseleksi, lakukan salah satu Iangkah di bawah ini: Pada Document toolbar, klik tombol Show Code View. Klik menu View> Code. Pada Document toolbar, klik tombol Show Code and Design Views. Klik menu View> Code and Design. Klik menu Window > Others> Code Inspector. Menggunakan visual guides pada proses desain Dreamweaver menyediakan beberapa macam visual guides untuk membantu kita ketika melakukan desain dan memprediksikan bagaimana desain kita kelak akan di tampilkan pada browser. Hal-hal yang dapat kita lakukan dengan visual guides antara lain: Melihat bagaimana suatu elemen akan di tampilkan dengan benar pada halaman web sesuai dengan ukuran jendela. Gunakan penggaris (rulers) untuk mendapatkan sim ulasi yang tepat untuk posisi dan ukuran layer dan tabel. Gunakan tracing image sebagai gambar background untuk membantu kita saat melakukan desain. Tracing Image hanya terlihat pada jendela dokumen 8

9 Dreamweaver MX dan tidak akan terlihat pada browser. Kita bisa memanfaatkan tracing image sebagai cetak biru desain kita. Gunakan grid untuk meletakkan dan mengatur ukuran layer dengan benar. Grid yang terlihat pada jendela dokumen akan membantu kita untuk mengatur layer, dan ketika kita mengaktifkan opsi penempelan (snap), layer akan menempel secara otomatis pada grid terdekat ketika kita memindahkan atau merubah ukurannya. Menampilkan penggaris Penggaris (ruler) dapat kita tampilkan mulai dan pojok kiri atas halaman, dengan satuan pixel, inchi atau centimeter. Untuk merubah mengatur penggaris, lakukan salah satu Iangkah di bawah ini : Menampilkan atau menghilangkan penggaris, klik menu View> Rulers > Show. Untuk mengatur dan memindahkan penggaris, drag icon penggaris ke sembarang tempat pada dokumen ( icon terlihat pada pojok kiri atas jendela dokumen pada Design view). Untuk mengembalikan posisi penggaris seperti semula, klik menu View> Rulers> Reset Origin. Untuk merubah satuan penggaris, pilih Pixels, Inches, atau Centimeters dan menu View> Rulers. 9

10 Head Dokumen Pengantar Sebuah dokumen HTML terbagi menjadi dua bagian utama yaitu head dan body. Body section menjadi bagian utama dan dokumen yang berisi teks, gambar dan elemen lain yang akan terlihat pada browser. Sedangkan head section tidak akan terlihat pada browser kecuali title halaman (document title), yang akan terlihat pada title bar pada browsers dan pada jendela dokumen Dreamweaver. Head section berisi informasi penting yang dapat mempengaruhi tampilan dan kepentingan halaman web kita seperti jenis dokumen, bahasa pemrograman, JavaScript dan fungsi VBScript, keywords dan isinya yang berisi informasi untuk Search Engines, dan beberapa informasi lainnya. Kita tidak harus meletakkan semua elemen tersebut pada dokumen kita. Untuk dapat melihat isi head dan dokumen, kita harus menggunakan jendela Code view (dapat kita pilih dan dan menu View), atau dan Code inspector. Melihat element pada head sebuah dokumen Untuk dapat melihat isi dan head dokumen HTML, lakukan langkah sebagai berikut : Klik menu View> Head Content. Catatan: Pada desain view, untuk setiap elemen pada head content, akan di tandai dan akan terlihat di bagian atas jendela dokumen. Jika kita telah mengatur jendela dokumen ke show only Code view, maka perintah dan View > Head Content tidak akan berfungsi. Memasukkan elemen pada head section Lakukan salah satu Iangkah di bawah ini : Pada Insert bar, pada kategori Head, klik pada salah satu tom bol obyek. Masukkan opsi untuk elemen yang anda pilih pada kotak dialog yang muncul, atau pada Property inspector. Mengedit elemen pada head section Kita dapat melakukan pengeditan pada elemen head yang telah kita lakukan dengan cara sebagai berikut : KIik menu View> Head Content. Klik salah satu icon pada head section untuk mulai melakukan pengeditan pada section yang kita inginkan (meta, keyword, description atau yang lainnya). Mengatur Meta properties Meta tag adalah elemen pada head section yang merekam informasi tentang sebuah dokumen seperti pembuat, hak cipta dan kata kunci (keyword). Selain itu, kita juga bisa menambahkan informasi untuk server seperti batas waktu untuk dokumen, waktu refresh dan rating PICS untuk halaman web (PICS, Platform for Internet Content Selection, merupakan sebuah metode untuk mendapatkan rating, seperti rating film, ke halaman web). Elemen yang ada pada meta tag antara lain adalah: Attribute 10

11 Value Content Mengatur Title properties Title akan terlihat pada title bar pada jendela dokumen. Pada Dreamweaver MX dan pada browser, title akan terlihat pada title bar. Mengatur Keywords Properties Sebagian besar search-engine menggunakan program yang s ering di identifikasikan sebagai robot pencari (program yang secara otomatis akan mencari kata kunci pada muka halaman web untuk indeks) untuk mencari sebuah halaman web. Robot pencari ini menggunakan kata kunci (Keyword) yang ada pada meta tag suatu halaman web sebagai acuan untuk meng-indeks halaman web tersebut dan memasukkannya pada database mereka. Catatan: Beberapa search engines membatasi jumlah kata kunci (keyword) atau karakter yang akan mereka indeks, bahkan beberapa search engine tidak akan memasukkan halaman web yang memiliki kata kunci melebihi ketentuan mereka, sebaiknya anda hanya memasukkan kata kunci yang benar -benar sesuai dengan halaman web anda. Anda bisa memasukkan beberapa kata kunci dan memisahkannya dengan menggunakan tanda koma pada kotak teks Keywords. Mengatur Refresh properties Kita bisa menngunakan elemen Refresh untuk mengatur agar browser secara otomatis merefresh halaman web kita, yaitu melakukan loading ulang halaman tersebut sesuai dengan waktu yang telah kita tentukan dan selanjutnya membuka halaman yang lain Elemen ini biasanya di aplikasikan pada redirect page, atau halam an yang secara otomatis akan mengarahkan user dan satu halaman ke halaman yang lain. Delay Untuk mengatur waktu (dalam satuan detik) sebelum sebuah halaman di refresh. Untuk merefresh halaman web secepatnya, masukkan angka 0 pada kotak teks. Action Mengatur bagaimana seharusnya browser berpindah ke halaman lain, atau bagaimana browser merefresh halaman setelah jeda waktu tertentu. Untuk membuka halaman web yang lain, klik tombol Browse, lalu cari file halaman yang akan di load sesuai keinginan kita. Mengatur Base properties Pada elemen Base kita bisa mengatur bagaimana sebuah pengalamatan antar link di atur. 11

12 Href Adalah kode dasar pengalamatan. Klik pada tombol Browse lalu cari dan pilih file, atau ketikkan alamat file pada kotak teks. Target Menentukan bagaimana frame atau jendela pada dokumen yang terhubung akan terbuka. _blank ; membuka halaman web pada jendela baru. _parent ; membuka halaman web pada frame utama atau pada frame tempat link berada. _self ; membuka halaman web pada frame atau jendela yang sama. Opsi ini menjadi default pada Dreamweaver MX. _top ; membuka halaman web pada jendela penuh, jika halaman web memiliki frame, frame akan hilang. 12

13 Bekerja dengan Tabel Pengantar Tabel menjadi bagian penting pada proses desain. Hampir semua proses desain pada Dreamweaver MX melibatkan penggunaan tabel. Biasanya, tabel di gunakan untuk mengatur tata letak elemen-elemen yang ada pada halaman web, misalnya gambar, teks atau tombol navigasi. Pada bagian ini kita akan mempelajari penggunaan dan pengeditan yang dapat kita lakukan terhadap tabel dan pengaruhnya pada desain halaman web kita. Standard view menjadi tampilan standart ketika kita pertama kali membuka Dreamweaver MX. Kita dapat menggunakan perintah Insert Table. Untuk membuat tabel pada Standard view. Dreamweaver akan membuat tabel berdasarkan option yang kita pilih pada kotak dialog Insert Table yang muncul ketika kita menggunakan perintah Insert Table. Selanjutnya, kita dapat dengan mudah memodifikasi tabel tersebut untuk membuat desain yang Iebih rumit dan komplek dengan menggabung dan memisahkan sel tabel, menambah baris dan kolom sampai dengan membuat nested tabel (tabel tersarang, yaitu tabel yang di tempatkan di dalam tabel). Kita dapat dengan mudah melakukan kontrol pada saat menempatkan teks dan gambar pada sel tabel. Kita juga dapat menyembunyikan struktur desain kita dengan menyembunyikan tabel agar tidak terlihat pada browser ketika halaman web di buka. Untuk membuat dan memodifikasi tabel pada standart view, lakukan langkahlangkah awal seperti di bawah ini: Pada Dreamweaver, klik File> New. Pada kotak dialog New Document pada daftar Basic Page, klik HTML, lalu klik Create untuk membuat dokumen HTML yang baru Pada kotak Title pada Document toolbar, ketikkan Table Design untuk membuat judul bagi dokumen kita. KIik File > Save, lalu simpan dokumen kita pada local site folder. 13

14 Memasukkan tabel Sekarang kita telah siap untuk memasukkan tabel pada dokumen. Pada ruang kerja kita, letakkan insertion point pada tempat yang kita inginkan lalu salah satu langkah ini: Klik Insert > Table. Atau pada Insert di kategori Common, klik icon Insert Table. Kotak dialog muncul lalu lakukan langkah-langkah ini, Pada kotak dialog, set seperti ini : Pada kotak Rows, isi dengan 2. Pada kotak Columns, isi dengan 2. Pada kotak Width, isi dengan 600, lalu pilih Pixels pada drop down menu di sisi kanan kotak Width. Pada kotak Border, masukkan nilai 1 untuk memberi garis batas di sekeliling table dan table sel sebesar 1 pixel. Memodifikasi tabel Pada bagian ini, kita akan memodifikasi tabel yang telah kita buat dengan melakukan penambahan baris dan kolom pada tabel, juga menggabungkan dan memisahkan sel untuk membuat layout halaman yang lebih menarik. Seleksi bagian kiri kolom dengan cara klik sisi kiri atas sel lalu drag ke bawah ke arah dasar baris. Menggabung dan memisahkan sel Dengan melakukan penggabungan dan pemisahan sel, kita dapat mengatur tabel agar sesuai dengan kebutuhan desain kita. Selanjutnya, kita akan mengetahui penggunaan menu options dan Property inspector untuk menggabung dan memisahkan sel tabel 14

15 Pembuatan Page Pengantar Ketika kita mengetikkan teks, menambahkan gambar atau memberikan elemen lain pada halaman web, pada dreamweaver akan membuat rangkaian kode html. Pada dasarnya dreamweaver mengijinkan kita untuk menampilkan dokumen pada dua cara yaitu design view dan code view secara bersamaan. code view design view Membuat halaman kedua Ada beberapa cara membuat halaman kedua diantaranya dengan mengcopy halaman pertama yang sudah dibuat atau dengan membuat design yang lain tergantung kebutuhan akan halaman tersebut. Cara yang lain adalah dengan membuat template terlebih dahulu agar layout yang lain sama bentuk designnya. Cara membuat copy halaman pertama (index.htm) adalah dengan cara: 1. Pada site panel, klik kanan, tunjuk halaman index.htm 2. Dari context menu muncul, klik duplicate 3. Seleksi hasil copy dan tunggu sebentar dan klik di rename 4. Ganti nama file hasil copy dengan nama lain 15

16 Menambahkan link teks antar halaman Kita dapat membuat dan menempatk an link pada sembarang tempat dan kapanpun juga pada halaman web, caranya: 1. Sorotlah teks yang akan digunakan sebagai link ke halaman lain 2. Buka property inspector, windows, properties 3. Browse file yang akan dilink pada local root folder Membuat rollover utu k link berbasis gambar Gambar rollover adalah gambar yang ditampilkan dimana tampilannya dapat berubah apabila pengunjung mengarahkan mouse-nya ke gambar tersebut, sehingga pastinya kita sudah menyiapkan 2 buah gamar untuk itu dengan dimensi yang sama tentunya. menu home, tata tertib, pkl dll dibuat dengan menyiapkan 2 gambar 16