Mengetahui Dasar dari Dreamweaver


MERENCANAKAN SEBUAH WEBSITE

Dalam membuat website kita harus merencanakan dahulu apa tujuan dari pembuatan website ini, informasi-informasi apa yang akan diberikan dan kepada siapa informasi-informasi tersebut dituju.

Macromedia Dreamweaver adalah salah satu program pembuatan website yang mempunyai banyak sekali menu-menu dan tools-tools yang dapat dipergunakan untuk mendesain website yang lebih kreatif, anda dapat membuat sebuah site yang komplit. Untuk mendapatkan hasil lebih bagus, anda harus mendesain dan merencanakan wesite anda lebih dahulu untuk tiap-tiap halaman site yang ada.

Rencana dan desain sebuah site

Ketika memulai merencanakan membuat website, kamu diharapkan melakukannya secara bertahap dan terencana untuk memastikan situs kamu baik dan berhasil. Walaupun kamu hanya akan membuat homepage

pribadi yang hanya akan dilihat dan dikunjungi oleh teman dan keluarga. Bagi seorang pelajar situs pribadi ini bisa digunakan untuk memberikan informasi dan layanan ajar online untuk teman kamu.

 

Menentukan tujuan anda

Menentukan tujuan site adalah langkah pertama kali yang harus anda ambil untuk pembuatan sebuah website. Tanya pada diri sendiri atau teman tentang sebuah website. Apa yang kamu harapkan bila kamu mempunyai situs pribadi? Tulis semua tujuan dan harapan kamu agar kamu dapat mengingatnya saat proses mendesain website. Tujuan-tujuan tersebut akan sangat membantu kamu agar tetap terfokus dan mempunyai target terhadap websiteyang anda inginkan. Sebuah website yang memberikan berita-berita dengan subjet tertentu sangat berbeda dengan website yang menjual produk atau komersial.

 

Memilih sasaran pengunjung situs

Setelah anda menentukan apa yang anda inginkan untuk menyelesaikan website anda, anda harus menentukan siapa saja, atau sasaran pengunjung situs kamu. Sebenarnya ini adalah pertanyaan bodoh, siapa saja didunia dapat mengunjungi situs kamu. Banyak orang mengunakan browser berbeda satu dengan lainnya, kecepatan yang berbeda, dan punya atau tidak punya media plug-in tambahan (contoh=speaker).

Semua faktor-faktor tersebut dapat mempengaruhi dalam menggunakan situs anda. Maka anda harus menentukan target audience, setelah itu dapat mendesain website anda.

 

MEMBUAT, MEMBUKA, DAN MENYIMPAN DOKUMEN HTML

Dreamweaver menawarkan berbagai macam cara untuk membuat suatu dokumen. Kamu dapat membuat baru, dokumen HTML yang kosong. Kamu dapat membuka dokumen HTML yang sudah ada, atau jika untuk mempersingkat waktu, anda dapat membuat dokumen baru berdasarkan template (blangko).

Membuat dokumen HTML kosong baru :

Pada tampilan windows, pilih menu File > New.

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.

 

Untuk mengganti judul halaman :

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 kamu 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 kamu 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 <body> 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.

Mengatur ukuran window

Pada status bar di dokumen window menampilkan dimensi atau ukuran

window saat itu (dalam pixel). Jika anda mengklik ukuran window ini,

Dreamweaver menampilkan menu window size pop-up, dimana kamu dapat mengatur ukuran yang cocok untuk tampilan pada monitor kamu. Untuk mendesain sebuah halaman pada ukuran spesifik yang terbaik, kamu dapat memilih pada ukuran yang sudah ditentukan, mengatur ukuran yang sudah ditentukan itu sesuai dengan keinginan kamu atau membuat ukuran baru.

Catatan : Pada ukuran window menggambarkan ukuran dimensi pada

browser. Untuk contoh, anda menggunakan ukuran “536 x 196 (640 x 480, default)” jika pengunjung situs anda yang menggunakan Microsoft Internet Explorer atau Netscape Navigator, maka konfigurasi tampilan mereka 640 x 480.

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 kamu secara visual.

• Untuk merubah nama dokumen, klik pada title lalu ubah nama dokumen sesuai dengan keinginan kamu.

• kamu dapat melihat halaman web secara browser (Internet Explorer) dengan mengklik button Preview Browser.

• Pada Options menu, kamu dapat memilih tampilan desain yang kamu inginkan , contoh : kamu dapat menambahkan tampilan Rulers(garis ukuran) untuk memudahkan kamu 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.

Memasukkan sebuah Object :

Klik icon button pada Object panel, tergantung pada object yang dipilih

setelah anda mengkik salah satu button maka akan tampil Dialog Box

yang harus anda isi untuk memasukkan object tersebut.

Object panel terdiri dari 7 kategori : Character, Common, Form, Frames,

Head, Invisibles dan Special. Semua kategori tersebut menampilkan

button untuk merubah tampilan : Standard dan Layout.

Untuk saat ini kita hanya akan membicarakan kategori Common atau

kategori yang umum dan biasa dipakai dan kategori Character.


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.

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.

kamu tinggal memilih warna-warna sesuai dengan keinginan kamu.

Memilih warna pada Dreamweaver :

walaupun sifatnya informasi dasar, semoga dapat membantu para pembaca. Tujuannya saya untuk memberitahu seperti apa dreamweaver, tools-tools apa saja yang digunakan. untuk lebih lengkap dan jelas, silahkan cari di google atau tutorial tentang dreamweaver.

TERIMA KASIH

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: