Pertama kali dijalankan setelah proses instalasi selesai, user akan diberikan pilihan Workspace Setup. Workspace Setup berfungsi untuk menentukan workspace yang akan kita pakai selanjutnya, apakah Workspace Dreamweaver MX apakah Workspace Dreamweaver 4. Di sini kita gunakan Workspace Dreamweaver MX, apabila dikemudian hari kita ingin menggunakan workspace Dreamweaver 4, kita dapat merubahnya melalui Menu Edit Preferences.
Workspace Dreamweaver MX tersebut memiliki tampilan window seperti pada gambar 2. Window Dreamweaver MX ini dibagi menjadi 7 bagian, yaitu : Insert Bar, Document Toolbar, Document Window, Panel Groups, Tag Selector, Property Inspector dan Files Panel.
Senin, 22 Desember 2008
Workspace Dreamweaver MX
Software Web Design
Software Web Design
Software web design merupakan perangkat lunak yang berguna untuk membangun/membuat/mendisain halaman-halaman web, baik yang bersifat statis maupun dinamis. Saat ini terdapat berbagai macam software web design yang dikeluarkan oleh vendor yang berbeda-beda. Setiap software web design itu menawarkan berbagai macam fitur unggulannya masing-masing. Software web design terpopuler yang ada saat ini antara lain: Adobe Image Ready, Macromedia Dreamweaver, Macromedia Fireworks, Microsoft Frontpage dan lain sebagainya.
Pengertian dari HTML
HTML yang merupakan kepanjangan dari Hyper Text MarkUp Language memiliki fungsi untuk memformat dokumen teks biasa agar bisa digunakan pada World Wide Web (WWW). HTML bukan merupakan suatu bahasa pemrograman, karena sifatnya yang hanya memberikan tanda (marking up) pada suatu dokumen teks dan bukan sebagai program.
Pada awalnya HTML dikembangkan sebagai subset SGML (Standart Generalized Mark-Up Language). Karena HTML didedikasikan untuk ditransmisikan melalui media internet, maka HTML relatif lebih sederhana daripada SGML yang lebih ditekankan pada format dokumen yang berorientasi pada aplikasi.
File-file HTML merupakan dokumen teks yang diformat menggunakan HTML, maka untuk melakukan penulisan maupun editing dokumen HTML dapat menggunakan berbagai macam editor, dalam hal ini digunakan Notepad.
Struktur dasar dokumen HTML berisi elemen-elemen atau tag
Keterangan :
a) : mendefinisikan bahwa teks yang berada diantara kedua tag tersebut adalah file HTML.
b) : mendefinisikan head dalam sebuah file HTML.
c)
d) : mendefinisikan teks beserta formatnya yang hendak ditampilkan sebagai isi halaman web.
Pengelolaan File Halaman Web
Pengelolaan file halaman web di sini dimaksudkan sebagai pemrosesan dasar sebuah file yang nantinya akan menjadi halaman web. Pengelolaan file ini meliputi : pembuatan file baru (create new), penyimpanan (save) dan penyimpanan dengan nama lain (save as). Dalam Macromedia Dreamweaver disediakan fasilitas pendefinisian site, yang akan memudahkan pengorganisasian halaman-halaman web sesuai dengan situsnya.
Terdapat 2 cara pendefinisian site, yaitu Basic dan Advance. Pilihan Basic memberikan kemudahan dalam menyiapkan situs, pilihan Basic inilah yang akan digunakan dalam modul ini. Untuk melakukan pendefinisian site, klik Define Site pada Files Panel.
Langkah pertama pendefinisian site adalah menentukan nama site, yang kemudian akan diikuti dengan pemilihan tipe dokumen dinamis atau dokumen statis. Pada gambar 20 dipilih option yang menyatakan bahwa kita tidak menggunakan dokumen dinamis, sehingga tidak menggunakan teknologi server.
Berikutnya akan ditampilkan kotak dialog untuk menentukan cara pengelolaan file, dalam Dreamweaver direkomendasikan agar file-file halaman web selalu disimpan terlebih dahulu dalam drive lokal.
Pada kotak dialog berikutnya, dilakukan penentuan web server yang digunakan. Untuk bekerja secara lokal, dipilih Local/Network yang kemudian diikuti dengan penentuan direktori lokal untuk menyimpan seluruh file halaman web yang dibuat.
Berikutnya akan ditanyakan apakah akan dilakukan testing ke web server atau tidak. Setelah proses pendefinisian site selesai akan ditampilkan ringkasan pendefinisian site
Hasil dari definisi site dapat dilihat pada Files Panel, dimana Files Panel telah menampilkan root folder lokal untuk situs pengoperasian_dreamweaver beserta daftar halaman-halaman web yang telah ada didalamnya
Menyisipkan Text Field di dreamweaver
Text field merupakan sarana untuk memasukkan teks ke dalam form. Text field menampung informasi yang berupa teks atau karakter lainnya, seperti nama, alamat e-mail, komentar dan lain sebagainya.
Terdapat 3 jenis tipe text field :
a)Single line, merupakan tipe default text field yang beruap kotak satu baris. Biasa digunakan untuk menampung nama & alamat e-mail.
b)Multi line, merupakan tipe text field yang menyediakan kotak teks dengan beberapa baris di dalamnya. Biasa dipergunakan untuk menampung data keterangan, komentar, saran dan lain sebagainya.
c)Password, tipe text field yang dipergunakan untuk mengisikan password, biasa dipergunakan pada halaman web yang memerlukan pengamanan. Data yang dimasukkan pada text field ini akan ditampilkan dalam bentuk bintang-bintang.
Menyisipkan Text Area pada dreamweaver
Menyisipkan Text Area
Text area memiliki bentuk tampilan yang sama persis dengan multi line text field, sehingga dapat dikatakan bahwa text area merupakan nama lain dari multi line text field.
Untuk menyisiokan text area, klik tombol teks area pada tab Form dalam Insert bar.
Menyisipkan Tabel dalam Dokumen di dreamweaver
Sebelum mempelajari cara menyisipkan tabel ke dalam dokumen, terlebih dahulu harus disiapkan dokumen yang hendak disisipi tabel. Misalnya, kita gunakan file index.html yang telah dibuat sebelumnya. Jika file index.html ini telah ditutup, buka kembali file ini dengan klik File Open index.html, atau dapat pula dilakukan dengan klik double pada file index.html dalam Files Panel.
Kemudian yakinkan bahwa Document window file index.html aktif, selanjutnya pilih lokasi dalam dokumen index.html yang hendak disisipi tabel. Klik menu Insert Table, atau dapat juga dengan menekan kombinasi tombol Ctrl+Alt+T pada keyboard
Keterangan :
a)Rows : menentukan banyaknya baris tabel.
b)Columns : menentukan banyaknya kolom tabel.
c)Width : menentukan ukuran lebar tabel beserta sataun ukuran yang digunakan, Percent atau Pixels.
d)Border : mengatur ketebalan border atau batas tabel.
e)Cell padding : mengatur jarak antara isi sel dengan batas tepi sel.
f)Cell spacing : mengatur jarak antarsel dalam tabel.
Jika parameter-parameter default pada kotak dialog Insert tabel diikuti (dengan meng-klik OK), maka pada document window akan tampil seperti gambar berikut :
Tabel yang telah tampil dalam Document Window tersebut dapat diatur dan dimodifikasi lagi dengan menggunakan properti tabel pada Property Inspector yang terletak di bagian bawah Document Window,
Pengaturan dan modifikasi tabel melalui properti tabel tersebut antara lain berupa : mengubah ukuran tabel, mengubah jumlah baris dan kolom tabel, menentukan warna, perataan tabel dan pengaturan tabel lainnya. Untuk mengisikan teks (data) pada sel-sel dalam tabel, dilakukan dengan mengisikan langsung ke sel yang diinginkan pada Document window. Simpan perubahan yang telah dilakukan dengan klik menu File Save, atau dengan kombinasi tombol Ctrl + S, kemudian preview file index.html yang telah disisipi tabel dalam web browser.
Menyisipkan Radio group di dreamweaver
Menyisipkan Radio group
Radio group merupakan kumpulan dari beberapa radio button. Radio group memudahkan proses pembuatan daftar pilihan, karena tidak perlu menyisipkan radio button sebanyak daftar pilihan yang hendak dibuat, tetapi cukup dengan memasukkan nilai dan label dari radio button tersebut pada kotak dialog radio group.
Untuk menyisipkan radio group, klik tombol radio group pada tab Form dalam Insert bar. Selanjutnya akan tampil kotak dialog untuk melakukan setting parameter radio button
Menyisipkan Radio Button di dreamweaver
Menyisipkan Radio Button
Radio button memiliki fungsi yang sama dengan checkbox, yaitu untuk menentukan pilihan dari suatu daftar pilihan. Hanya saja, pada radio button pengguna hanya dapat memilih satu pilihan saja.
Untuk menyisipkan radio button, klik tombol radio button pada tab Form dalam Insert bar.
Menyisipkan Obyek di dreamwever
Menyisipkan Obyek
a)Menyisipkan gambar
Seperti halnya pada proses menyisipkan tabel, untuk menyisipkan gambar ke dalam document halaman web terlebih dulu pastikan kita berada pada Document window dan klik lokasi yang hendak disisipi gambar. Kemudian klik ikon image pada Insert bar, atau dapat juga dengan klik Insert Image.
Melalui kotak dialog tersebut, kita memilih file gambar yang akan disisipkan, kemudian klik OK. Jika file gambar yang dipilih belum berada dalam direktori root, setelah klik OK akan muncul kotak dialog seperti gambar 35. Kotak dialog ini mengkonfirmasi agar file gambar yang disisipkan ikut disalin ke dalam direktori tempat file halaman web yang disisipi berada. Hal ini bertujuan untuk menghindari tidak ditampilkannya gambar saat halaman web dijalankan di browser.
Menyisipkan List dan Menu di dreamweaver
List dan Menu memungkinkan pemberian berbagai macam pilihan yang ditampilkan pada area yang ringkas untuk ditampilkan kepada pengunjung. List menyediakan scroll bar yang memungkinkan pengunjung melakukan navigasi pada keseluruhan item. Scrolling list memungkinkan penampilan banyak pilihan di dalam suatu area (spasi). Pengunjung dapat menggulung list yang ada dan memilih lebih dari satu pilihan. Seperti halnya pada checkbox.
Menu merupakan sebuah obyek yang digunakan untuk menampung beberapa pilihan dalam bentuk drop-down. Dalam menu. Pengunjung hanya dapat memilih satu pilihan saja, seperti pada radio button.
Untuk menyisipkan List/Menu, klik tombol list menu pada tab Form dalam Insert bar. Selanjutnya pada document window akan tampil seperti gambarberikut :
Properti Height dan Selections hanya aktif pada tipe List, Height berfungsi untuk menentukan jumlah baris yang ditampilkan pada kotak teks. Sedangkan Selections berfungsi untuk mengijinkan atau tidak pengunjung untuk melakukan pemilihan banyak pilihan.
Untuk menentukan isi dari pilihan-pilhan yang hendak ditampilkan, klik tombol List Values yang kemudian akan memunculkan kotak dialog
Berikut ini hasil tampilan pada web browser untuk tipe List dan Menu dari parameter-parameter yang diisikan pada kotak dialog List Values di atas.
Menyisipkan Link di dreamweaver
Menyisipkan Link
Link adalah suatu obyek yang dapat berupa teks atau gambar yang dipakai dalam dokumen HTML untuk melompat dari satu dokumen ke dokumen atau tempat lain pada dokumen yang sama. Untuk menyisipkan link pada teks/gambar yang telah ada dalam document window yang harus dilakukan adalah meletakkan kursor pada teks/gambar tersebut, kemudian isi fiel Link pada Property Inspector dengan nama dokumen atau alamat URL yang akan dituju.
Selain langkah tersebut di atas, link juga dapat dibuat dengan klik kanan pada obyek yang akan disisipi link dan pilih menu Make Link
Menyisipkan Gambar di dreamweaver
Menyisipkan Gambar
1)Atribut ukuran gambar, bila tidak dituliskan, maka ukuran gambar sesuai ukuran aslinya. Namun ukuran gambar bisa dibuat dengan nilai tertentu dengan cara menuliskan atribut height dan width.
2)Pelurusan gambar, posisi gambar terhadap teks sebelum dan sesudahnya bisa fleksibel, misalnya lurus atas :
3)Teks alternatif untuk gambar, dimaksudkan untuk mengganti gambar apabila browser tidak mampu menampilkan gambar tersebut.
4)Atribut border dan spasi, jika atribut ini tidak disertakan, maka gambar ditampilkan tanpa garis tepi.
5)Gambar sebagai hyperlink.
6)Gambar sebagai background
7)Background warna
Menyisipkan Frame di dreamweaver
Frame merupakan sebuah teknologi yang dipakai untuk menggabungkan beberapa halaman web menjadi satu halaman yang utuh. Dapat juga dikatakan bahwa frame merupakan sarana untuk membagi halaman web menjadi beberapa bagian. Dalam penggunaan frame pada pembuatan halaman-halaman web, dikenal istilah frame dan frameset. Frameset adalah suatu frame induk yang dapat menampung beberapa frame di dalamnya dan dapat memiliki frameset sendiri. Sedangkan frame sendiri adalah dokumen yang terdapat di dalam frameset dengan border yang mengelilinginya.
Langkah-langkah menyisipkan frame :
a)Pastikan bahwa tidak ada dokumen yang sedang aktif.
b)Pilih menu File New, pada kotak dialog New Document aktifkan tabulasi General, lalu pilih kategori Framesets hingga muncul tampilan seperti pada gambar 39.
c)Setelah memilih salah satu frame, klik Create sehingga frame yang dipilih tampil pada document window.
Menyisipkan Form di dreamweaver
Untuk menyisipkan obyek form, terlebih dahulu harus disiapkan wadah yaitu form itu sendiri untuk menampung obyek form tersebut. Tujuannya adalah agar informasi yang dimasukkan ke dalam form itu nantinya dapat terkirim.
Beberapa obyek yang terdapat pada form antara lain adalah text field, image field, list box, checkbox, menu pop-up, filed password, button dan radio button. Berikut insert form yang terdapat pada Insert bar :
Langkah-langkah menyisipkan form :
a)Aktifkan tabular Form pada Insert bar, kemudian klik Form.
b)Pada document window akan muncul obyek form dengan tampilan, sebagai berikut :
c)Pada Property Inspector akan tampil seperti pada gambar 44 :
Tampilan form dapat menjadi lebih rapi jika ditambahkan dengan tabel di dalam form sebagai tempat meletakkan obyek form. Tanpa menggunakan bantuan tabel, penataan dan pengaturan obyek form akan menjadi lebih sulit.
Menyisipkan File Field di dreamwever
File field digunakan untuk mengirimkan (upload) file ke server. Untuk dapat memanfaatkan file field digunakan method post atau IIS untuk action dari form. Tampilan Fiel Field ini sama seperti Text Field, hanya saja di sebelah kanan obyek File Field terdapat sebuah tombol bernama Browse yang berfungsi untuk mencari file yang hendak di-upload. Namun, pengguna juga dapat secara langsung mengetikkan nama file beserta path-nya secara lengkap pada kotak teks.
Untuk menyisipkan File Field, klik tombol new pada tab Form dalam Insert bar.
Menyisipkan Checkbox di dreamweaver
Checkbox adalah sebuah kotak yang disediakan bagi pengunjung halaman web untuk memilih informasi yang disediakan. Jumlah checkbox yang disisipkan dapat disesuaikan dengan kebutuhan. Checkbox memungkinkan pengguna halaman web untuk memilih obyek yang terseleksi.
Untuk menyisipkan checkbox, klik tombol checkbox pada tab Form dalam Insert bar.
Menyisipkan Button di dreamweaver
Button merupakan sebuah tombol yang dipergunakan untuk melakukan proses tertentu, seperti submit atau reset. Kedua tombol ini digunakan dalam sebuah proses di dalam form. Tombol submit berfungsi untuk mengirimkan data yang telah dimasukkan ke dalam form untuk selanjutnya diolah di dalam server. Sedangkan tombol reset berguna untuk mengosongkan atau mengembalikan ke nilai default dari suatu data yang terletak di dalam form.
Untuk menyisipkan Button, klik tombol button yang terdapat pada tab Form dalam Insert bar. Berikut tampilan Property Inspector untuk Button.
a)Button name, menentukan nama button.
b)Label, menentukan label button.
c)Action, menentukan fungsi button, sebagai tombol Submit atau Reset.
Menyimpan Dokumen Dreamweaver
Untuk menyimpan dokumen baru, klik File kemudian klik Save, maka akan muncul kotak dialog Save As, dimana direktori default untuk menyimpan dokumen tersebut ditentukan pada root direktori web, sesuai pada definisi site sebelumnya.
Agar document pada tampilan gambar 26, dapat ditampilkan (diujicoba) pada web browser, kita simpan document tersebut menjadi dokumen HTML dengan nama file index.html. Kemudian klik kanan nama file tersebut pada Files Panel, pilih menu Preview in browser.
Mengenal Macromedia Dreamweaver MX
Macromedia Dreamweaver yang merupakan salah satu software web design terpopuler dipilih sebagai software web design yang akan digunakan dalam proses pemelajaran dalam modul ini. Macromedia Dreamweaver dipilih karena kompatibilitas dan dukungannya terhadap berbagai bahasa pemrograman web, antara lain : ASP, JSP, CFM, ASP.NET, PHP, JavaScript, CSS dan XML disamping keunggulan-keunggulan lainnya dibandingkan dengan software web design yang lain. Saat ini Macromedia Dreamweaver telah sampai pada versi 2004 yang lebih sering disebut dengan Macromedia Dreamweaver MX 2004.
Mengatur properti frameset di dreamweaver
Untuk mengatur properti frane set, sebelumnya aktifkan dahulu frame-setnya. Dapat langsung dilakukan dengan memilih pada Document window dengan meng-klik salah satu border frame-nyaatau dengan memilih border frame terluar pada panel frame. Selanjutnya pada Property Inspector akan tampil properti frameset.
a)Border width in pixels : untuk mengatur lebar semua border pada frameset.
b)3D Borders : untuk mengatur tampilan border frameset, apakah untuk ditampilkan atau disembunyikan.
c)Frameset color : untuk mengatur warna pada border frameset.
d)RowCol Selection : untuk memilih bagian kolom atau baris dengan klik bagian atas dan samping tampilan.
e)Row/column size : untuk mengatur tinggi baris atau lebar kolom yang dipilih.
f)RowCol size units : untuk mengatur ukuran lebar dan tinggi frame.
Mengatur properti frame
Untuk melakukan pengaturan sebuah frame, gunakan kombinasi tombol Alt + Klik pada frame yang diinginkan. Maka akan muncul Property Inspector Frame
Keterangan :
a)Frame Name : nama frame, berfungsi sebagai referensi script dan target hyperlink. Pemberian nama frame tidak boleh diawali dengan huruf, tanpa spasi dan tanpa tanda minus (-) dan titik (.).
a)Frame Source : untuk menentukan sumber dokumen frame.
b)3D Borders : untuk mengatur border pada frame.
c)Frame border color : untuk mengatur warna pada border.
d)Disable frame resize : untuk mengatur diperbolehkan atau tidaknya perubahan ukuran frame oleh web browser.
e)Frame scrollbars : untuk menampilkan scroll (batang penggulung) pada frame.
f)Margin width in pixels : untuk mengatur batas kanan dan kiri margin.
g)Margin height in pixels : untuk mengatur jarak margin atas dan bawah pada frame.
Membuat Tabel
Tabel merupakan cara untuk menampilkan informasi dalam bentuk sel yang terdiri dari kolom dan baris. Berikut contoh untuk membuat sebuah tabel yang terdiri dari 2 kolom dan 2 baris.
Keterangan :
a)
b)
| : table division, mendefinisikan isi dari suatu kolom, tag ini selalu berada di dalam tag |
| diantara tag menunjukkan banyaknya kolom dalam suatu baris. |
