Pengenalan Dasar Dreamweaver 4

Pengenalan dasar Dreamweaver 4.0 Ido Priyono Hadi Apa yang akan pelajari pada lesson ini ?: 1. 2. 3. 4. 5. 6.

Apa itu Dreamweaver? Basic layout Objects Palette Launcher palette Sekilas tentang Properties Inspector Sebuah halaman dasar [A basic page]

Apa itu Macromedia Dreamweaver Macromedia Dreamweaver is sebuah editor HTML profesional untuk mendesain secara visual dan mengelola website dan halaman web. Konsep WYSYWIG (What You See IS What You Get) HTML (HyperText Mark-up Language) akan memberikan anda membuat membuat halaman web dan web sites secara mudah dan cepat. Tetapi dibalik semuanya itu, dreamweaver juga memberikan anda kemudahan mempelajari DHTML (Dynamic HTML), yang bisa membuat website lebih menarik dan lebih interaktif. Tidak hanya berhenti disini, dreamweaver juga mempunyai fasilitas FTP (File Transfer Protocol) untuk upload situs anda ke Internet ketika proses desain sudah selesai dibuat. Fasilitas Dreamweaver termasuk juga coding tools dan features: HTML, CSS, dan JavaScript reference, a JavaScript Debugger, dan code editors (the Code view and Code inspector) yang bisa untuk mengedit JavaScript, XML, dan dokumen text lainnya secara langsung dalam Dreamweaver. Teknologi Macromedia tentang HTML mengimport dokumen HTML tanpa memformat ulang code nya - dan anda bisa dengan mudah mengeset Dreamweaver untuk membersihkan dan memformat ulang HTML kapan pun anda inginkan.

Layout Screen Dasar Pertama kalai anda start Dreamweaver anda akan disajikan dengan sebuah dokumen tanpa judul [Untitled Document] lihat pojok kiri atas dari gambar. Ini adalah dokumen halaman web anda yang masih kosong sebelum anda memulai dan menambahkan elemen-elemen seperti gambar, text, tabel dsb. Anda juga bisa melihat beberapa dari Dreamweaver's palette's yang tampak dalam gambar 1. Jika tidak, secara sederhana anda membutuhkan agar bisa ke Window menu dan memilih apa yang ada inginkan secara visible dari daftar yang tersedia. Gambar 1 ini menunjukkan Objects tersebut. Launcher dan Properties Inspector palettes terbuka. Ini akan diterangkan kemudian dalam manual ini.

Gambar 1 - sebuah tipikal dari Dreamweaver screen.

Objects palette Pallete pertama yang kita lihat adalah Objects palette (lihat gambar 2). Objects palette mengijinkan anda untuk memasukan (insert) elemen pada halaman web anda. Anda bisa menambahkan apa yang anda suka seperti : Gambar (Images), tabel (tables), Flash movies, Java applets, dsb. Akan tetapi Objects palette mempunyai fungsi lebih lebih dibalik semuanya itu. Saat ini anda sedang melihat pada objects yang biasa dipakai Common objects (lihat bagian atas dari objects palette dalam gambar 2). Dreamweaver juga menawarkan anda 5 fungsi tambahan (lihat gambar 3), termasuk Forms, Characters dan frames. Untuk mengakses palettes tambahan ini sangat gampang tekan icon kecil panah ke bawah di common dan pop-out menu yang muncul (gambar 3). Untuk melihat tiap menu pada icon tsb, sederhana tahan mouse over pada icon yang anda kehendaki dan help tip akan muncul. Kita akan melihat nanti untuk menambahkan elemen yang berbeda ketika kita mulai membuat halaman sederhana yang pertama nanti dalam manual ini.

Gambar 3 - Pop-out menu Gambar 2

Launcher palette Launcher palette (gambar 4) adalah hanya palette yang tidak dibutuhkan secara visible untuk penggunaanya sepertinya pallete merupakan replicated pada bagian kanan bawah dari layar Dreamweaver (lihat gambar 1). Jadi jika anda memfungsikannya buka dan tutup seperlunya untuk menghemat layar anda.

Gambar 4 - The launcher palette. Launcher palette digunakan untuk mengakses beberapa file dari windows/palettes Dreamweaver lainnya . Dari sini anda bisa membuka code tags HTML source editor, Site Map window, Behaviours palette, dsb. Cobalah sekarang, klik pada HTML Source icon. Jangan takut anda bisa menutup window seperti window lainnya dalam Windows 9x dengan mengeklik 'X' pada bagian sudut kanan atas dari window yang ada.

Properties Inspector Properties Inspector fungsi kerjanya agak berbeda dalam Palettes lain pada Dreamweaver, sepertinya konteknya agak sensitif. Dalam penggunaan sederhana yang berarti bisa diubah tergantung pada apa yang sedang anda edit atau buat. Contohnya, ketika anda sedang mengedit text, Property Inspector akan tampak seperti gambar [gambar 5]. Tambahkan sebuah tabel maka Properties Inspector akan tampak seperti gambar 6

Gambar 5 - Properties Inspector untuk text.

Gambar 6 - Properties Inspector untuk tables. Seperti yang anda lihat, dua Properties Inspectors sangat berbeda. Anda akan menjadi sangat familiar dengan Properties Inspector nantinya, seperti anda sedang bekerja dengan Propert Inspectors sementara anda sedang mendesain dan mengedit halaman web/ situs

.

Halaman dasar Setelah kita melihat secara sekilas Dreamweaver sekarang kita akan mendefinisikan dan melihat dalam page properties (gambar 7). Yang termasuk dalam opsi ini adalah page colour, page title, background image, dsb. Seperti diterangkan sebelumnya, ketika anda membuka Dreamweaver secara otomatis akan ditunjukkan pada sebuag dokumen blank untitled page (lihat gambar 1 lagi). Untuk mengakses halaman Properties pada dialogue box anda mempunyai 3 pilihan. Anda bisa dengan right-click dimanapun pada dokumen blank tsb dan memilih Page Properties. Anda bisa ke menu Modify dan pilih opsi pertama, Page Properties or atau anda bisa tekan CTRL+J pada keyboard.

Gambar 7 - Page Properties. Seperti anda lihat dalam gambar 7 ada beberapa pilihan yang tersedia ketika anda setting the properties untuk halaman blank web anda. Kebanyakan opsi tsb tidak pernah digunakan ketika anda membuat halaman, jadi kita akan konsentrasi pada opsi common saja. Title : Ini adalah nama yang akan muncul pada menu bar dari browser anda. Jangan bingung dengan nama file halaman web anda. Title ini akan lebih berguna bila dokumen akan di simpan [save as] atau di di print out. Background image : Anda bisa memasukan sebuh gambar untuk dijadikan background dalam halaman web. Anda beribu-ribu websites dimana anda bisa download secara gratis [free background tiles] atau anda bisa membuat sendiri dalam sebuah program komputer seperti Adobe Photoshop. Background: Jika anda tidak ingin menggunakan sebuah gambar sebagai background untuk halaman web anda, secara sederhana anda bisa menggunakan sebuag warna [a colour]. Untuk memilih warbna yang kita inginkan klick pada icon colour chip (the small square) setelah itu anda akan membuat pilihan warna. Hal yang sangat bagus dengan pilihan warna adalah bahwa warna yang anda berikan untuk semua halaman web adalah safe colours. Text: Secara default text colour yang digunakan sudah tersedia. Note : Ini hanya relevan untuk current page dan tidak semua halaman web yang anda punya dibuat juga atau halaman berikutnya. Links: Pilihan 3 links sharusnya tidak dirubah seperti browser yang menunjukkan halaman yang akan dilihat pada

Marilah kita membuat halaman web blank. Dalam latihan sederhana ini akan membawa anda pada beberapa fungsi sederhana yang bisa anda coba, plus kita juga akan melihat dokumen setelah disimpan dan dilihat pada sebuah browser untuk melihat bagaimana tampilan dokumen tsb. Dalam Page Properties dialog box lakukan langkah-langkah berikut.

1. Dalam Title option, hapus 'Untitled Document' dan ketikan 'My first page'. 2. Rubahlah Background dengan yang lebih bagus misal, a nice pale blue. 3. Rubahlah Text ke warna hitam. Akhirnya klik Apply untuk melihat hasil perubahan yang terjadi pada screen. Sekarang ketikan nama anda dan latar belakang anda sendiri agar supaya anda mempunyai beberapa text pada screen. Sekarang sebelum kita melihat hasilnya, kita perlu melakukan langkag save as dulu. > File menu > pilih Save As. > Ketikan nama file mypage.htm. Yakinkan anda tidak menggunakan spasi atau hruf besar dalam nama file anda. Ini bisa menjadi masalah ketika anda mengupload file tsb ke internet. > Pilih lokasi save untuk file tsb dan klik Save. > untuk melihat hasilnya seolah-olah tampil dalam web tekan F12 pada keyboard. Selesai