Web Design Menggunakan Dreamweaver

Mar20 by: may joly

Apa sih Macromedia Dreamweaver itu ??
Macromedia Dreamweaver adalah sebuah HTML editor profesional untuk mendesain secara visual dan mengelola situs web maupun halaman web. Bilamana kita menyukai untuk berurusan dengan kode-kode HTML secara manual atau lebih menyukai bekerja dengan lingkungan secara visual dalam melakukan editing, Dreamweaver mambuatnya menjadi lebih mudah dengan menyediakan tool-tool yang sangat berguna dalam peningkatan kemampuan dan pengalaman kita dalam mendesain web.
Dreamweaver MX dalam hal ini digunakan untuk web desain.dreamweaver MX mengikutsertakan banyak tool untuk kode-kode dalam halaman web beserta fasilitas-fasilitasnya, antara lain : Referensi HTML, CSS dan Javascript, Javascript debugger, dan editor kode ( tampilan kode dan Code inspector) yang mengizinkan kita mengedit kode Javascript, XML, dan dokumen teks lain secara langsung dalam Dreamweaver. Teknologi Dreamweaver Roundtrip HTML mampu mengimpor dokumen HTML tanpa perlu memformat ulang kode tersebut dan kita dapat menggunakan Dreamweaver pula untuk membersihkan dan memformat ulang HTML bila kita menginginkannya.
Selain itu Dreamweaver juga dilengkapi kemampuan manajemen situs, yang memudahkan kita mengelola keseluruhan elemen yang ada dalam situs. Kita juga dapat melakukan evaluasi situs dengan melakukan pengecekan broken link, kompatibilitas browser, maupun perkiraan waktu download halaman web.
Contoh pembuatan Design Web menggunakan Dreamweaver..
Di bawah ini adalah cara membuat website menggunakan drreamweaver, dan tutorial ini saya dapatkan dari
http://www.ilmugrafis.com/dreamweaver.php?page=membuat-drop-down-menu-sederhana-website
Yap.. Langsung aja gan….

Buka aplikasi dreamweaver kita, disini saya menggunakan Dreamweaver 8 karena ringan di komputer saya. Bagi yang sudah menggunakan dreamweaver CS5 bahkan CS6 tenang saja karena cara ini bisa diaplikasikan untuk semua dreamweaver

(start >> all program >> Dreamweaver)
2. buat CSS file, caranya.
Klik File >> New >> Tab General >> Basic Page >> Css
tulis Kode CSS di bawah ini

/ * CSS untuk drop down menu dimulai */
ul
{
list-style:none;
padding:0px;
margin:0px
}
ul li
{
display:inline;
float:left;
}
ul li a
{
color:#ffffff;
background:#990E00;
margin-right:5px;
font-weight:bold;
font-size:12px;
font-family:verdana;
text-decoration:none;
display:block;
width:100px;
height:25px;
line-height:25px;
text-align:center;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border: 1px solid #560E00;
}
ul li a:hover
{
color:#cccccc;
background:#560E00;
font-weight:bold;
text-decoration:none;
display:block;
width:100px;
text-align:center;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border: 1px solid #000000;
}
ul li.sublinks a
{
color:#000000;
background:#f6f6f6;
border-bottom:1px solid #cccccc;
font-weight:normal;
text-decoration:none;
display:block;
width:100px;
text-align:center;
margin-top:2px;
}
ul li.sublinks a:hover
{
color:#000000;
background:#FFEFC6;
font-weight:normal;
text-decoration:none;
display:block;
width:100px;
text-align:center;
}
ul li.sublinks
{
display:none;
}
/* CSS drop down menu sederhana end */

wow banyak bener, tenang copy dan paste saja CSS ini ke CSS yang baru anda buat dengan dreamweaver,
kemudian save dan beri nama “dropdown. css”
3. Sekarang buat halaman web, pakai saja HTML agar lebih simple, karena jika memilihformat PHP butuh bantuan Sever untuk mengoprasikannya
caranya mirip css tadi, cuma urutannya
File >> New >> Basic Page >> Html >> Ok
sekarang panggil css yang kita buat, caranya:
klik browse, lalu ambil “dropdown.css”, OK
Nah setelah langkah di atas benar maka akan ada code seperti ini di halaman html kita.
itu artinya style (CSS) yang kita buat telah masuk ke halaman html
4. Masukkan kode ini ke code html kita. pilih code

<!– Menu Pertama Dimulai –>
<ul>
<li><a href=”#”>Menu One</a></li>
<li>
<a href=”#”>Link 1</a>
<a href=”#”>Link 2</a>
<a href=”#”>Link 3</a>
<a href=”#”>Link 4</a>
<a href=”#”>Link 5</a>
</li>
</ul>
<!– Menu Pertama Selesai –>
<!– Menu Kedua Dimulai –>
<ul>
<li><a href=”#”>Menu Two</a></li>
<li>
<a href=”#”>Link 1</a>
<a href=”#”>Link 2</a>
<a href=”#”>Link 3</a>
<a href=”#”>Link 4</a>
<a href=”#”>Link 5</a>
</li>
</ul>
<!– Menu Kedua Selesai –>
<!– dan seterusnya –>

copy dan paste code di atas di bagian antara <body> …. </body> , bagi yang belum mengerti tag seperti ini lihat tutorial BELAJAR WEBSITE HTML
4. Tambahkan JQuery Script, wow apa lagi ini ya? tenang… lebih jelasnya klikPengenalan JQuery Website
tulis codenya, Letakkan di bawah tag Title
setelah itu tambahkan code Javascript ini,
letakkan di bawah tag JQuery

<script type=”text/javascript”>
$(function(){
$(‘.dropdown’).mouseenter(function(){
$(‘.sublinks’).stop(false, true).hide();
var submenu = $(this).parent().next();
submenu.css({
position:’absolute’,
top: $(this).offset().top + $(this).height() + ‘px’,
left: $(this).offset().left + ‘px’,
zIndex:1000
});
submenu.stop().slideDown(300);
submenu.mouseleave(function(){
$(this).slideUp(300);
});
});
});
</script>

sekian dari saya mohon d ma’afkan ya jika ada kesalahan atau kekurangnya

tutorial komputer

Kamis, 11 Juli 2013

cara membuat web design menggunakan dteamweaver

Web Design Menggunakan Dreamweaver

Tidak ada komentar:

Posting Komentar