membuat web dengan dreamweaver

Cara membuat website menggunakan Dreamweaver ternyata mudah dipelajari lho, yuk kita lihat tutorial nya.

Setelah semua bahan untuk design dan content web sudah siap, langkah membuat website berikutnya adalah menerjemahkan design yang telah kita buat kedalam bahasa pemrograman. Ada 2 cara untuk membuat script website, yaitu :

• Dengan cara Instant, Instan disini kita bisa dengan mudah menerjemahkan design kita kedalam bahasa pemrograman dengan bantuan software – software semacam dreamweaver, frontpage dan lain – lain.
• Dengan cara manual, Apabila anda lebih prefer membangun website anda secara manual, maka baca ulasan berikut ini: untuk text Anda harus merubahnya ke dalam file yang berformat HTML (umumnya berakhiran .htm atau .html) agar dapat dibaca oleh program Internet Explorer/Firefox (browser Anda). Apabila Anda belum mempelajari bahasa HTML, CSS, Javascript dan lain –lain anda bisa baca – baca artikel yang sudah kami sediakan di web prothelon.com. Untuk pembuatan web secara manual hanya membutuhkan notepad atau notepad++

Nah, untuk kali ini yang akan kita bahas adalah cara membuat website menggunakan dreamweaver. Adobe Dreamweaver memberi kemudahan untuk merancang dan menata halaman demi halaman website, dengan menyediakan berbagai Tools yang siap pakai. Sangat mudah untuk menyisipkan elemen-elemen apapun yang kita perlukan, seperti Text, Gambar, atau Media lain sekalipun (suara, film, animasi flash, dll.)

Dengan cara ini kita bisa membuat halaman website yang canggih dan dilengkapi dengan berbagai media masa kini, tanpa harus tahu sedikitpun pemrograman di dalamnya. Adobe Dreamweaver telah menyiapkan berbagai perangkat siap pakai dan akan menuliskan kode-kode yang diperlukan ketika kita menggunakan perangkat tersebut.

Nah, berikut ini kita akan latihan cara membuat website sederhana dengan bantuan macromedia dreamweaver :

Try This: 4 Langkah Mudah Belajar Cara Membuat Website, Langsung Praktek!

• Buka aplikasi dreamweaver, klik html.
• Membuat table, dengan cara insert – Table – Isikan Rows = 1, Columns = 1, Table Width = 100 %
• Setelah membuat table, arahkan Kursor ke dalam tabel yang kita buat tadi.
• Buat table yang kedua yang nantinya akan digunakan sebagai layout website kita, seperti contoh : Rows = 4, Columns=2 dan Table Width = 900 Pixel, Tabel ini bisa anda atur sesuai dengan kebutuhan anda
• Atur table mulai dari Header, Footer dll
• Membuat menu dengan cara, Insert – Spry – Spry Menu Bar
• Menu ini bisa kita pilih, apakah akan horizontal atau vertical.
• Save!

Catatan Penting : Pembuatan website diatas merupakan salah satu cara perancangan web yang berbasis Table. selain menggunakan table sebetulnya ada cara lain yaitu dengan menggunakan Div atau campuran keduanya Div+Table. kedua cara memiliki plus minus masing-masing dan anda akan mengerti dengan sendirinya seiring dengan pengetahuan dan pengalaman anda dalam membuat website.

Lihat kan? Ternyata cara membuat website menggunakan dreamweaver tidak sedulit yang dibayangkan. Selamat mencoba.

Membuat Menu Bertingkat (Tree Menu) dengan Dreamweaver

Menu atau navigasi merupakan komponen penting di dalam suatu website. Navigasi website sama halnya dengan navigasi sebuah kapal laut, dimana sistem navigasi yang baik tentu akan menuntun nahkoda kapal beserta seluruh penumpangnya menuju ke tujuan dengan cepat. Sebaliknya, navigasi yang buruk bukan tidak mungkin akan membuat kapal terlambat menuju ke tujuan atau bahkan tersesat di tengah laut. Navigasi di dalam website pun akan sama, yaitu jika dirancang dengan baik akan memudahkan pengunjung untuk menemukan apa yang ia cari. Namun jika navigasi tidak dirancang dengan baik atau bahkan tidak ada navigasi sama sekali, dapat mengakibatkan pengunjung tersesat dan akhirnya akan menutup website tersebut.

Dilihat dari bentuk dan susunannya, menu atau navigasi memiliki variasi yang beragam. Ada beberapa navigasi yang disusun mendatar (horizontal), ke bawah (vertical), berbentuk drop-down menu atau dapat juga berupa menu bertingkat (tree-menu). Berdasarkan teknik pembuatannya juga beragam, dari yang menggunakan HTML, CSS, Javascript, gambar sampai yang menggunakan teknologi flash. Masing-masing memiliki kelebihan dan kekurangan.

Di dalam tutorial ini akan disampaikan mengenai bagaimana membuat menu bertingkat (tree-menu) menggunakan fasilitas yang sudah tersedia di salah satu web development software, yaitu Dreamweaver. Langkah-langkah dalam tutorial dicoba menggunakan Macromedia Dreamweaver 8, namun demikian dapat juga dicoba dengan versi-versi terbaru dari Dreamweaver.

Berikut ini langkah-langkahnya

1. Buka Macromedia Dreamweaver dan buatlah sebuah halaman HTML baru dengan mengakses menu File > New.
2. Aktifkan window Behaviors melalui menu Window > Behaviors atau dengan shortcut Shift + F4 (Lihat gambar 1)
3. Buatlah sebuah link dengan text atau gambar, isi halaman tujuan link dengan # yang menandakan bahwa link tersebut jika diklik nantinya akan tetap di halaman yang sama. Sorot (select) link tersebut, kemudian dari window behaviors yang telah diaktifkan di langkah sebelumnya klik tombol Add behaviour yaitu icon dengan tanda [+]. Akan ditampilkan beberapa pilihan behaviour dan pilih Show Pop-Up Menu. Lihat gambar 2.

Gambar 2

4. Selanjutnya akan ditampilkan window Show Pop-Up Menu. Buatlah menu bertingkat sesuai rancangan menu yang diinginkan. Tersedia beberapa tombol yang akan membantu mengatur menu yang akan dibuat. Lihat contohnya di gambar 3. Jika ingin mengatur tampilan dari menu, dapat membuka tab ‘Appearance’  dan jika ingin mengatur posisi dari menu bisa mengaktifkan tab ‘Position’ seperti terlihat pada gambar 4. Klik tombol OK jika menu sudah diatur sesuai keinginan.