Anda di halaman 1dari 10

Web Design Menggunakan Dreamweaver

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….

1. 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 memilih
format 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 klik Pengenalan
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>

selesai… demikianlah sedikit artikel dari saya. kurang lebihnya mohon maaf..

BELAJAR Membuat WEBSITE - Basic HTML


Publish: 20 Desember 2010 | Author & Copyright: Johan | Status: FREE tutorial

Mungkin anda yang masih awam bertanya - tanya, bagaimana cara membuat website? Ada
beberapa tahapan dan langkah yang harus kita lalui untuk membuat sebuah Website yang baik. Lain
halnya dengan instan CMS maupun instan blog yang kita tinggal mendaftar saja di penyedia layanan
blog seperti Blogspot, Wordpress, dll. Maupun CMS seperti Joomla, Mambo, dll yang tinggal instal
saja seperti. Disini kita belajar manual web (membuat website secara manual) walaupun masih
sederhana dan statis. Untuk membuat website pertama-tama kita harus belajar bahasa HTML yaitu
sebuah "bahasa program" yang memungkinkan kita membuat halaman web yang bisa ditampilkan
dalam browser (Chrome, Firefox, Internet Explorer, Netscape, Opera, dll).

Nah, kini kita mulai dari langkah awal yaitu belajar bahasa HTML.

BELAJAR WEBSITE
Dewasa ini, hampir semua dokumen web dibuat dengan bahasa HTML (Hypertext Mark-up
Language). Meskipun anda bisa saja membuat web page (halaman web) tanpa mengerti sedikitpun
HTML, Sangat disarankan bahkan nyaris diharuskan, agar anda mengerti bahasa HTML. Untuk itu
langkah pertama bagi Anda yang bercita-cita memiliki website sendiri adalah belajar HTML.

HTML (Hypertext Markup Language) adalah bahasa program yang digunakan untuk menulis format
dokumen yang dapat digunakan dalam Web. Dengan HTML, teks ASCII (file *.txt) dapat dipoles (di-
mark-up) dengan kode-kode tertentu yang disebut tag untuk menjadi dokumen HTML (file *.htm
atau *.html). Oleh karena itu, untuk membuat dokumen HTML, anda bisa menggunakan semua
program teks editor biasa, mulai dari Notepad hingga Dreamweaver. Untuk mudahnya, kita gunakan
program Dreamweaver.

Apa yang dimkasud dengan file HTML?

- HTML merupakan kependekan dari Hyper Text markup Language

- Sebuah file HTML merupakan sebuah file teks yang berisi tag-tag markup

- Tag markup memberitahukan browser bagaimana harus menampilkan sebuah


halaman

- File HTML harus memiliki ekstensi htm atau html


- File HTML dapat dibuat menggunakan editor teks yang biasa kamu pakai.
PENGENALAN KODE HTML
>>New >> Basic Page >> HTML , setelah itu atur ke mode Code

disini anda akan menemui tag - tag semacam ini:

<HTML>
</HTML>
Penjelasan:
Masing-masing baris di atas disebut tag. Tag adalah kode yang digunakan untuk me-mark-up
(memoles) teks ASCII menjadi file HTML. Setiap tag diapit dengan tanda kurung runcing.
Ada tag pembuka yaitu <HTML> dan ada tag penutup yaitu </HTML> yang ditandai dengan tanda
slash (garis miring) di depan awal tulisannya.
Tag di atas memberikan faidah bahwa yang akan ditulis diantara kedua tag tersebut adalah isi dari
dokumen HTML. Perlu anda ketahui bahwa tag-tag html dapat ditulis dengan huruf besar ataupun
huruf kecil. Artinya, penulisan <HTML> atau <html> atau <Html> sama saja hasilnya. Namun perlu
selalu diingat bahwa penulisan tag yang salah meskipun hanya satu karakter akan berpengaruh
terhadap dokumen HTML anda, bahkan bisa berakibat dokumen HTML anda tidak bisa ditampilkan
dalam browser.

Sekarang kita akan beralih pada tag selanjutnya.

<HTML>
<BODY>
</BODY>
</HTML>
Isi dari dokumen HTML yang sesungguhnya adalah yang ditulis diantara tag <BODY>. Coba tuliskan:

<HTML>
<BODY>
Tulisan ini akan tampak dalam browser by ilmugrafis.
</BODY>
</HTML>
Sekarang simpanlah file ini dengan meng-klik menu File lalu Save. Nah, lihatlah hasil karya anda yang
pertama dengan menekan F12 disitu akan muncul tulisan "Tulisan ini akan tampak dalam browser by
ilmugrafis." tanpa tag HTML. Sekarang anda mungkin mulai mengerti cara kerja HTML dan markup
tag, begitulah cara kerjanya, jadi yg muncul di broser hanya tulisan saja sedangkan tagnya hanya
merupakan suatu perintah bagi browser untuk menampilkan perintah kita.

Apakah tag BODY fungsinya sekedar penanda tubuh atau isi dari dokumen web? Tidak, dalam tag
BODY ini bisa kita sisipkan bermacam-macam atribut yang akan berpengaruh terhadap format atau
tampilan halaman web secara keseluruhan. Pada kesempatan ini kita mengambil contoh bagaimana
mengubah warna latar belakang dan warna tulisan dari halaman web dengan penambahan atribut
ke dalam tag BODY.

<HTML>
<BODY BGCOLOR="yellow" TEXT="red">
Tulisan ini akan tampak dalam browser by ilmugrafis.
</BODY>
</HTML>
Simpanlah kembali file ini (klik File lalu Save). Untuk melihat bagaimana hasilnya tekan F12 atau klik
tombol Refresh pada browser atau bisa juga dengan menekan tombol F5 pada keyboard. Dengan
demikian, browser akan memanggil ulang file yang kini sudah mengalami perubahan. Maka akan
tampaklah hasilnya:

Perlu diketahui bahwa penentuan warna pada HTML bisa dengan nama warna (dalam bahasa
Inggris) dan bisa pula dengan kode warna. Kode warna ditulis dalam format heksa contohnya seperti
#rrggbb.

Ok setelah menguasai tag di atas maka kita lanjutkan ke inspeksi tag HEAD dan TITLE. Di sini terlihat
bahwa kita mempunyai tag <HEAD> dan tag <TITLE>. Tag HEAD berfungsi untuk mengapit berbagai
macam fungsi dan informasi yang berkenan dengan halaman web yang bersangkutan. Pada latihan
kali ini, kita memasukkan tag TITLE diantara tag HEAD. Sesuai namanya, tag TITLE ini berfungsi untuk
mengapit kalimat yang menjadi judul dari halaman web tersebut. Sekarang mari kita tuliskan judul
halaman web ini:

<HTML>
<HEAD>
<TITLE>WEBSITE BUATANKU</TITLE>
</HEAD>
<BODY BGCOLOR="yellow" TEXT="red">
Tulisan ini akan tampak dalam browser.
</BODY>
</HTML>
Simpan lagi file ini dengan meng-klik File lalu Save. Sekarang kita akan melihat bagaimana
perubahannya dalam browser. Lakukan lagi Refresh seperti di atas. Maka anda akan melihat di baris
teratas (yang dinamakan Title Bar) dari program browser akan menampilkan judul atau titel dari
halaman web anda yaitu: WEBSITE BUATANKU
previewnya kurang lebih seperti ini, disini saya menggunakan browser Firefox:
Alhamdulillah, selesailah latihan pertama Belajar Membuat Website - HTML.
Selamat belajar HTML di Dreamweaver
Sampai ketemu lagi di Tutorial berikutnya
Semoga Bermanfaat ^_^/

Pengenalan JQuery Website


Publish: 16 Mei 2012 | Author & Copyright: Mifta Afina | Status: FREE tutorial

Setelah menjamurnya konsep blogazine pada blog, jQuery sekarang telah menjadi bahan wajib bagi
web desainer maupun blogger. Sebenarnya apa itu jQuery?
jQuery adalah library javascript, jQuery berisi kumpulan kode-kode/fungsi-fungsi yang siap pakai
sehingga mempermudah dan mempercepat waktu kita dalam menuliskan kode javascript, karena
kita hanya memanggil fungsi-fungsi yang kita butuhkan yang tentu saja sudah ada dalam jQuery
tersebut, serta tidak perlu lagi menyusun kode javascript dari nol.Tentunya ini sesuai dengan slogan
jQuery itu sendiri, yakni "Write less, do more".

Menurut pengalaman saya dan teman-teman lainnya, jQuery sangatlah ringan sehingga dengan
menggunakan jQuery tidak akan membuat halaman web kita menjadi lambat untuk di load, dengan
porsi yang tidak berlebihan, tentunya. Sebelum mempelajari jQuery, ada baiknya Anda sudah
menguasai dasar-dasar HTML, CSS serta JavaScript. Untuk dapat menggunakan library ini, Anda
dapat mendownload jQuery dari situs resminya yaitu www.jquery.com lalu menaruhnya pada
direktori tempat Anda menyimpan file halaman web, dan jangan lupa pula untuk memanggil file
jQuery di setap halaman web diantara tag <head></head> Anda dengan cara:

<script type="text/javascript" src="jquery.js"></script>

Tulisan yang berwarna merah menandakan nama file, nama file tersebut harus di sesuaikan
dengan nama file jQuery yang telah kita download. Untuk lebih lanjut mengenai tutorial
dasar desain web dengan jQuery akan dibahas pada tutorial berikutnya.
|==============|
Sintaks pada jQuery |
|==============|
Penting!
sama seperti PHP, untuk mempraktikkan tutorial ini anda harus mempunyai Localhost
dengan cara mengubah komputer / laptop anda menjadi Server terlebih dahulu dan
meletakkan file jquery di dalam localhost.

jQuery --sama seperti halnya library lainnya-- juga memiliki sintaks, biasanya sintaks yang
dipakai adalah untuk memilih elemen-elemen HTML lalu melakukan suatu aksi terhadap
elemen tersebut atau elemen lain. Ini mirip dengan gaya bahasa visual basic yang pada
visual basic diistilahkan dengan konsep 'even driven' dimana suatu reaksi terjadi jika suatu
aksi tertentu dilakukan.

Analoginya begini, misal: kita menuangkan sirup strawberry kedalam gelas yang berisi air
putih, maka air putih tersebut akan berubah warna dari putih (bening) menjadi merah. Nah,
Yang kita lakukan yakni menuangkan sirup adalah aksi, sedangkan peristiwa berubahnya
warna pada gelas dinamakan reaksi.

Sintaks pada jQuery adalah sebagai berikut: $(selector).action()


Penjelasan!
$ biasa saya sebut dengan "cash", digunakan untuk mendefinisikan jQuery
selector) digunakan untuk menunjukkan elemen yang dipilih atau dituju
action() adalah aksi yang akan dilakukan terhadap elemen yang telah di seleksi atau dipilih.

agar lebih jelas saya beri contoh sebagai berikut:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Web Design | ilmugrafis.com</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000);
});
})
</script>
</head>
<body>
<p>Tulisan ini akan bereaksi</p>
<button>Klik tombol ini</button>
</body>
</html>
<script type="text/javascript" src="jquery.js"></script>

Penjelasan!
Seperti yang telah dijelaskan pada tutorial sebelumnya baris ini digunakan untuk memanggil
file jquery.js.
$(document).ready(function(){
Ini dimaksudkan kode javascript yang ada pada baris dibawahnya berjalan pada saat halaman
web di load.

$("button").click(function(){
$("p").hide(1000);
});

Baris diatas bermakna: ketika elemen “button” di klik oleh pengguna, maka elemen “p” (paragraph)
disembunyikan dengan kecepatan selama 1000 mili detik.
Hasilnya:

kok cuma gambar, tenang karena ilmugrafisTeam telah menyiapkan Tester JQuery script di atas
tersebut disini klik Test JQuery agar kalian bisa mengetahui maksud dari elemen “p” (paragraph)
disembunyikan :)

Coba Anda ubah sendiri kode diatas, misalnya dengan mengganti angka 1000 menjadi 2000,
mengubah selector dari “button” menjadi “p” atau sebaliknya, dan lain-lain. Selamat bereksplorasi.
Sampai disini dulu pengenalan JQuery, Sampai ketemu di tutorial - tutorial yang lain. Terima kasih,
semoga bermanfaat