Cara Membuat website dengan Dreamweaver Pajrin Wurika Sahara Wurika.sahara@gmail.com Abstrak Dreamweaver adalah software aplikasi desain web visual yang biasa dikenal dengan istilah WYSIWYG What You See Is What You Get intinya Anda tidak harus berurusan dengan tag-tag HTML untuk membuat sebuah situs. Macromedia belum lama ini telah mengeluarkan rilis terbaru dari Dreamweaver yaitu Dreamweaver MX, dengan penambahan beberapa fasilitas baru di dalamnya. Dreamweaver tidak hanya dapat digunakan oleh para desainer web, namun juga dapat digunakan oleh programer untuk membangun halaman internaktif karena Dreamweaver MX mendukung pula PHP, ColdFusion, ASP.NET dan lain-lain. Kata Kunci: coldfusion, ASP. Pendahuluan Adobe Dreamweaver merupakan program penyunting halaman web dari Adobe Systems yang dulu dikenal sebagai Macromedia Dreamweaver dari Macromedia. Program ini banyak digunakan oleh pengembang web karena fitur-fiturnya yang lengkap serta kemudahan dalam penggunaannya. Dreamweaver juga sebagai program untuk membuat, mendesain dan mengedit dokumen HTML secara visual dan mengelola halaman sebuah situs. Dreamweaver menyediakan banyak perangkat yang berkaitan dengan pengkodean dan fitur seperti HTML, CSS, JavaScript, PHP, ASP, ColdFusion, dan XML. Pembahasan Untuk membuat website di dreamweaver yang pertama yang perlu kita lakukan adalah membuat file index.php. Website yang akan kita buat memiliki bagian : 1. Header 2. Menu navigasi 3. Konten 4. Sidebar 5. Footer Langsung saja kita akan membuat website di dreamweaver, Dreamweaver anda, Create new pilih PHP buka program Adobe
Simpan file tersebut, tekan CTRL + S simpan dengan nama index.php dalam folder tempat anda menginstal XAMPP. Berikutnya anda membuat file baru, tekan CTRL + N pada Blank Page pilih CSS kemudian klik create,simpan dengan nama style.css dalam folder yang sama dengan file index.php Kembai ke file index.php, klik tab index.php pada document toolbar, kemudian klik Code, tambahkan script berikut di atas tag </head> <link href="style.css" rel="stylesheet" type="text/css" /> Script tersebut berfungsi menghubungkan file CSS dengan index.php Mengatur Body Website Masih dalam file index.php, klik icon New CSS Rule yang ada di bagian kanan, jika di layar anda tidak terdapat CSS Stylenya anda bisa menekan Shift + F11 untuk menampilkan tab CSS Style.
Setelah muncul Window New CSS Rule, isi pengaturan sebagai Selector : body Jika sudah klik Ok. Maka akan muncul jendela CSS Rule Definition for body in style.css, isikan pengaturan sebagai Type = Font : Arial, Helvetica, sans-serif, size:13 pixel, color : #000000 Background = Background color : #CCCCCC Box = width : 900 pixel Jika sudah klik OK, simpan file index.php dan style.css anda tekan CTRL + S Mengatur Link Website Sekarang kita akan mengatur warna, ukuran, dan style Link secara default. Klik i con New CSS Rule, isi pengaturannya sebagai Selector : a Setelah muncul CSS Rule Definition for a in style.css, isikan pengaturannya sebagai
Type: Color : #ff6000 Pada Decoration centang None Jika sudah klik ok. Selanjutnya kita akan mengatur css link pada saat hover atau pada saat cursor berada di atas link. Klik kembali icon New CSS Rule, isi pengaturannya sebagai Selector : a:hover Setelah muncul CSS Rule Definition for a in style.css, isikan pengaturannya sebagai Type: Pada Decoration centang Underline Jika anda ingin mengubah warna link pada saat hover klik icon kotak yang ada di sebelah tulisancolor, kemudian pilih warnanya. Jika sudah klik Ok. Membuat Header Website Setelah tadi kita mengatur bagian body dan link website, sekarang saatnya mengatur bagian header dari website. Pilih file index.php, kemudian ketikkan script berikut dan letakkan di bawah tag <body> <div id="header"></div> Sekarang kita akan mengatur CSS untuk headernya, caranya sama seperti mengatur CSS pada body. Klik icon New CSS Rule, isi pengaturannya sebagai Selector : #header Setelah muncul CSS Rule Definition for #header in style.css, isikan pengaturannya sebagai Type:
Size : 12 pixel Color : #FFFFFF Background: Background image : klik browse pilih header.jpg dalam folder images Repeat : no-repeat Box : Width : 860 pixel Float : Left Height : 110 pixel Padding : centang same for all, kemudian isikan 20 pixel Jika sudah klik OK, kemudian simpan file style.css anda. Untuk melihat preview website anda tekan F12. Selanjutnya kita akan memasukkan logo website dan deskripsi website kedalam header, caranya klik cursor anda setelah <div id= header > kemudian klik insert = > image = > logo.jpg Usahakan logo yang anda buat tingginya / weight tidak lebih dari 80pixel, jika logo anda melebihi dari 80 pixel, anda dapat merubah ukurannya dengan cara : Melalui Design View, klik gambar logo anda kemudian pada panel Property yang secara default berada di bagian bawah, pada H / Height isikan 80 Masih tetap pada Panel Property, pada Link klik icon folder yang ada di sebelah kiri tulisan Edit, kemudian pilih file index.php. Ini berfungsi pada saat logo di klik akan mengarah ke halaman index atau halaman depan website anda. Pada bagian border isikan 0, dan pada Alt ketikkan logo websiteku atau nama website nama anda. Dibawah code : <a href="index.php"><img src="images/logo.png" alt="logo websiteku" border="0" /></a> Ketikkan : <p>deskripsi website anda disini</p> Ganti tulisan deskripsi website anda disini dengan deskripsi / penjelasan website anda.
Simpan file index.php dan style.css tekan CTRL + S, kemudian lihat previewnya tekan F12 atau refresh browser anda tekan F5. Membuat Menu Navigasi Website Setelah kita membuat Header, selanjutnya kita akan membuat navigasi website yang berada di bagian bawah header. Navigasi isi akan berisi link link yang akan mengarah ke halaman tertentu seperti profile, gallery, atau contact. Pilih file index.php, kemudian ketikkan script berikut dan letakkan di atas </body> <div id="navigasi"></div> Sekarang kita akan mengatur CSS untuk navigasinya. Klik icon New CSS Rule, isi pengaturannya sebagai Selector : #navigasi Setelah muncul CSS Rule Definition for #navigasi in style.css, isikan pengaturannya sebagai Background: Background image : klik browse pilih bg-nav.jpg dalam folder images Repeat : no-repeat Box : Width : 860 pixel Float : Left Height : 35 pixel Pada bagian padding hilangkan centang same for all, left :20 pixel dan right: 20 pixel Pada bagian margin centang same for all isikan 0 pixel Jika sudah klik ok, simpan file index.php dan style.css. Selanjutnya pada Design View, klik di dalam Menu Navigasi kemudian klik Insert > Table
Setelah muncul jendela Table, isikan pengaturannya sebagai Rows : 1 Columns : 4 Table Width : kosongkan saja Border Thickness : kosongkan / delete saja. Cell Padding : 5 Cell Spacing : 5 Jika sudah klik ok. Selanjutnya didalam kolom table ketikkan menu website anda, perhatikan gambar Sekarang kita akan memberikan link pada menu tersebut, caranya blok tulisan Home => pada panel property cari kolom Link klik icon folder kemudian pilih file index.php, lakukan hal yang sama pada menu lainnya, tetapi pada kolom link isikan saja # karena kita belum mempunyai filenya.
Untuk halaman profile dan yang lainnya akan kita bahas pada artikel berikutnya. Sekarang kita akan mengubah warna link dari menu navigasi dengan mengatur CSS nya, caranya klik tulisan Home => klik icon New CSS Rule, isi pengaturannya sebagai Selector : #navigasi a Setelah muncul CSS Rule Definition for #navigasi a in style.css, isikan pengaturannya sebagai Type: Color : #FFFFFF Jika sudah klik Ok. Simpan file index.php dan style.css anda tekan CTRL + S, kemudian preview tekan F12 Membuat Konten Website Sekarang kita akan membuat konten website, konten ini adalah tempat berita atau artikel anda. Pilih file index.php, kemudian ketikkan script berikut dan letakkan di atas </body> <div id="content-wrapper"> Klik icon New CSS Rule, isi pengaturannya sebagai Selector : #content-wrapper Setelah muncul CSS Rule Definition for #content-wrapper in style.css, isikan pengaturannya sebagai Background: Background color : #DDDDDD
Box : Width : 860 pixel Float : Left Pada bagian margin centang same for all, isikan 0 pixel Pada bagian padding hilangkan centang same for all, isikan top: 0 pixel, bottom: 0 pixel, right: 20 pixel, left: 0 pixel Pilih file index.php, kemudian ketikkan script berikut dan letakkan di bawah <div id= content-wrapper > <div id="content"></div> Sehingga kodenya menjadi seperti <div id="content-wrapper"> <div id="content"></div> </div> Klik icon New CSS Rule, isi pengaturannya sebagai Selector : #content Setelah muncul CSS Rule Definition for #content in style.css, isikan pengaturannya sebagai Background: Background color : #FFFFFF Box : Width : 600 pixel Float : Left Pada bagian padding centang same for all, isikan 20 pixel Jika sudah klik ok, simpan file index.php dan style.css. Membuat Sidebar Konten Sidebar adalah kolom yang ada di sebelah kanan / kiri konten website anda, biasanya berisi menu menu seperti berita terbaru atau link link tertentu.
Pilih file index.php, kemudian ketikkan script berikut dan letakkan di bawah <div id= content ></div> <div id="sidebar"></div> Klik icon New CSS Rule, isi pengaturannya sebagai Selector : #sidebar Seleah muncul CSS Rule Definition for #sidebar in style.css, isikan pengaturannya sebagai Box : Width : 200 pixel Float : Left Pada bagian margin centang same for all, isikan 0 pixel Pada bagian padding centang same for all, isikan 10 pixel Jika sudah klik ok, simpan file index.php dan style.css. Hasil : <div id="content-wrapper"> <div id="content"></div> <div id="sidebar "></div> </div> Membuat Footer Website Footer adalah bagian bawah dari website yang biasanya bisa di isi dengan menu atau link tertentu, dan copyright anda. Pilih file index.php, kemudian ketikkan script berikut dan letakkan di atas </body> <div id="footer"></div> Sekarang kita akan mengatur CSS untuk footer. Klik icon New CSS Rule, isi pengaturannya sebagai Selector : #footer
Setelah muncul CSS Rule Definition for #footer in style.css, isikan pengaturannya sebagai Background: Background image : klik browse pilih footer.jpg dalam folder images Repeat : no-repeat Block: Text align : Center Box : Width : 860 pixel Float : Left Height : 80 pixel Pada bagian padding centang same for all, isikan 20 pixel Pada bagian margin centang same for all, isikan 0 pixel Jika sudah klik ok, simpan file index.php dan style.css. Penutup Itulah cara mudah pembahasan cara membuat website dengan menggunakan dreamweaver. Referensi http://blog.ub.ac.id/kiasatinamalia/2012/03/12/artikel-tentang-html-5/ http://blogke-bas.blogspot.com/2012/04/pengertian-adobe-dreamweaver.html http://acmuve.blogspot.com/2012/05/normal-0-false-false-false-in-x-none-ar.html Biografi Nama saya Pajrin Wurika Sahara, saya kelahiran bandung 19 desember 1993 pada saat ini saya sedang menuntut ilmu di salah satu perguruan tinggi di Raharja dan mengambil jurusan Teknik informatika dengan jurusa MAVIB (multimedia audio visual broadcasting ).