Tutorial, Belajar Macromedia Dreamweaver Untuk Pemula
Berikut adalah cara membuat web dengan menggunakan Macromedia Dreamweaver, cocok untuk pemula
Macromedia Dreamweaver adalah salah satu program pembuatan website yang mempunyai banyak sekali menu-menu dan tool-tool yang dapat dipergunakan untuk mendesain website yang lebih kreatif, anda dapat membuat sebuah site yang komplit.
CARA MEMBUAT DOKUMEN HTML
Dreamweaver menawarkan berbagai macam cara untuk membuat suatu dokumen. Anda dapat membuat baru, dokumen HTML yang kosong; Anda dapat membuka dokumen HTML yang sudah ada, atau jika untuk mempersingkat waktu, anda dapat membuat dokumen baru berdasarkan template
Untuk membuka file HTML yang sudah ada :
Pilih menu File > Open
Anda dapat memilih file HTML yang anda inginkan.
Membuat dokumen baru berdasarkan template :
• Pilih menu File > New from Template. Akan tampak dialog box, daftar template-template yang ada (anda harus membuat sebuah template terlebih dahulu sebelum membuat dokumen baru berdasarkan template)
• Pilih salah satu template. Dokumen baru akan dibuat berdasarkan template tersebut.
Menyimpan dokumen :
• Pilih menu File > Save.
• Ketik nama file dan tentukan dimana anda ingin menyimpan file tersebut. Catatan : Dreamweaver akan secara otomatis menyimpan file tersebut dalam bentuk htm atau html.
• Klik button Save untuk menyimpan file tersebut. Mengatur document properties Judul halaman, background image dan warna-warna, teks dan
warna link adalah dasar dari semua dokumen HTML. Judul halaman merupakan identitas dan nama dokumen. Background image atau gambar background dari halaman (kita bisa juga memakai warna untuk background) diatur untuk keseluruhan tampilan dari dokumen tersebut. Teks dan warna link membantu untuk pengunjung situs membedakan teks mana yang bisa masuk kehalaman lain, dan juga bisa membedakan dari warna teks link sudah dikunjungi atau belum.
Merubah judul halaman
Judul dari halaman HTML sangat membantu pengunjung tetap dapat memberitahu site apa yang sedang pengunjung buka, dapat dilihat pada menu bar windows dibawah. Jika anda memberi judul pada halaman tersebut maka tidak akan tampak identitas halaman tersebut pada tampilan window.
Langkah-langkah :
• Pilih menu Modify > Page Properties.
• Klik kursor anda pada daerah kosong di halaman web. Lalu pilih Page Properties dengan mengklik kanan mouse anda. Masukkan judul untuk halaman tersebut pada title text box.
DREAMWEAVER WORK AREA
Kita mulai dengan overview dari dreamweaver work area atau daerah kerja dreamweaver.
• Jika anda belum masuk ke dalam program dreamweaver, klik 2 kali pada icon shortcut dreamweaver atau klik pada start menu pilih program lalu pilih program macromedia dreamweaver 4 , klik 1 kali pada icon dreamweaver 4. Pada area kerja dreamweaver 4 akan tampak seperti di bawah ini :
• Pada tampilan di atas adalah tampilan dimana dokumen yang akan anda buat dan edit.
• Pada object panel terdapat icon-icon yang dapat anda klik untuk memasukkan object pada dokumen anda dan untuk merubah cara anda dalam pembuatan halaman web.
• Launcher bar terdapat button-button untuk membuka dan menutup panel-panel icon dimana anda sering menggunakannya dalam bekerja.
• Pada property inspector ditampilkan properti-properti dari object atau text yang dipilih dan anda dapat memodifikasi properti tersebut. (contoh = jenis text, ukuran text, dan sebagainya)
Untuk membuka tampilan windows, inspector dan panel-panel, gunakan menu Window. Beri tanda check untuk memilih tampilan mana yang anda perlukan pada tampilan window.
DOCUMENT WINDOW
Pada baris judul dari tampilan document window ditunjukkan judul halaman, nama folder dan nama file ada dalam tanda kurung. Bila file anda belum disimpan akan terdapat tulisan unsaved.
Status bar, didapat pada bagian paling bawah document window, menunjukkan informasi-informasi tentang dokumen yang sedang anda buat.
Pada tag selector menampilkan HTML control pada text atau object yang anda pilih. Klik salah satu text atau object maka pada tag selector akan tampak HTML control, contoh anda dapat mengklik pada dokumen window, pada tag selector akan tampak tulisan disini menunjukan anda sedang bekerja pada body dari dokumen secara HTML.
Pada Window size pop-up menu dapat melihat ukuran window yang ditampilkan dan anda dapat mengedit tampilan ukuran yang anda inginkan .
Disebelah kanan menu window size pop-up dapat anda lihat ukuran besarnya file dokumen dan waktu yang dibutuhkan untuk download file pada tampilan window. Launcher bar yang terdapat di sebelah kanan bawah pada tampilan window, pada setting awal launcher bar buttons akan menampilkan Asset panel, HTML styles panel, CSS styles panel, Behaviors panel, History panel dan Code inspector.
TOOLBAR
Toolbar dreamweaver terdapat button-button yang dapat anda pilih dalam menampilkan dokumen anda secara cepat : Code (HTML), desain, dan gabungan keduanya yaitu tampilan secara HTML dan desain.Toolbar juga menampilkan button-button perintah yang terdapat pada sebelah kanan nama dokumen.
• Untuk menampilkan dan menyembunyikan Toolbar, pilih menu View > Toolbar.
• Untuk tampilan dokumen secara kode atau HTML , klik button Code View pada toolbar. Disini anda dapat mengedit atau membuat halaman web anda secara HTML
• Untuk tampilan dokumen secara kode dan desain, klik button Code & Design View
• Untuk tampilan dokumen secara desain, klik button Design View. Disini anda bisa mengedit atau membuat halaman web anda secara visual.
• Untuk merubah nama dokumen, klik pada title lalu rubah nama dokumen sesuai dengan keinginan anda.
• Anda dapat melihat halaman web secara browser (Internet Explorer) dengan mengklik button Preview Browser.
• Pada Options menu, anda dapat memilih tampilan desain yang anda inginkan , contoh : anda dapat menambahkan tampilan Rulers(garis ukuran) untuk memudahkan anda dalam mendesain
sebuah web.
OBJECT PANEL
Pada Object panel terdapat button-button untuk membuat dan memasukkan object seperti tabel, layer dan images. Untuk menampilkan dan menyembunyikan Objects panel, pilih menu Window > Objects.
Common
Kategori Common pada Object panel terdiri dari :
- Image Memasukkan sebuah gambar atau image pada cursor. Dialog Box akan tampil sehingga anda dapat secara spesifik memilih file image yang anda inginkan.
- Rollover Image Anda dapat secara khusus memilih 2 file image yang akan anda masukkan dan membuat 2 file image tersebut ditampilkan secara rollover. Rollover adalah bila sebuah gambar atau image akan berubah menjadi gambar yang lain bila mouse pointer dikenakan pada image tersebut.
- Table Menempatkan atau membuat tabel.
- Tabular Data Membuat tabel, lalu mengisi tabel tersebut dengan data dari file yang lain (seperti Microsoft Excel atau dari database).
- Navigation Bar Memasukkan beberapa image untuk Navigasi masuk ke site yang lain.
- Horizontal Rule Menempatkan garis horizontal pada halaman web.
- Layer Membuat sebuah layer. Klik button layer, lalu tempatkan mouse pointer pada halaman kerja dan drag untuk mengatur ukuran dan lokasi dari layer tersebut.
- E-Mail Link Membuat link sebuah e-mail.
- Date Menempatkan tanggal pada halaman web. Dialog Box akan muncul untuk spesifikasi format dari tanggal, Dreamweaver akan mengupdate dari tanggal secara otomatis setiap kali anda menyimpan file.
- Server-Side Include Memasukkan server-side termasuk dalam web page. Dialog Box akan tampil dimana anda dapat memilih sumber file yang ada di server.
-Fireworks HTML Memasukkan file HTML yang sudah dibuat atau sudah ada yang dibuat dari program Fireworks.
- Flash Button Memasukkan Flash Button pada halaman web.
- Flash Text Membuat Flash text object.
- Shockwave Menempatkan movie dari Macromedia Shockwave pada halaman web. Dialog Box akan muncul agar anda dapat memilih sumber file DCR daripada movie, atau anda dapat menggunakan Property inspector untuk menspesifikasi sumber file.
- Generator Menempatkan object Macromedia Generator pada halaman web.
- Layout and View Pada bagian View daripada Object panel terdapat button-button untuk anda pilih mode tampilan, Standard atau Layout.
- Draw Layout Cell Membuat tabel cell secara individu pada tampilan Design View.
- Draw Layout Table Membuat tabel secara individu pada tampilan Design View.
Character
Pada kategori ini anda dapat memasukkan macam-macam karakter dari teks atau object. Pilih kategori Charackter ini dengan mengklik button paling atas di Object panel, pilih Character.
Kategori Character ini terdiri dari :
- Line Breaking , membuat alinea baru.
- Non-Breaking Space , memasukkan spasi pada teks atau object.
- Copyright , memasukkan karakter Copyright.
- Registered , memasukkan karakter registered
- Trademark , memasukkan karakter Trademark
Dan berbagai macam karakter yang bisa anda masukkan pada dokumen
anda.
Bekerja dengan macam-macam warna
Pada Dreamweaver, ada bermacam-macam dialog box, seperti juga pada Property inspector ada menu untuk kotak-kotak pilihan warna untuk teks. Anda tinggal memilih warna-warna sesuai dengan keinginan anda.
Memilih warna pada Dreamweaver :
Memilih Jenis Font
Pada Property inspector bar, anda diberikan fasilitas dalam memilih jenisjenis teks atau font untuk penulisan pada pembuatan halaman web anda.
0 komentar:
Posting Komentar