Tampilkan postingan dengan label Dreamweaver. Tampilkan semua postingan
Tampilkan postingan dengan label Dreamweaver. Tampilkan semua postingan
Pengenalan Dreamweaver dan Layout
Karena banyaknya request dari sana sini dan situ aduh pokoknya dari mana - mana bagaimana cara mengoperasikan Dreamweaver dan tentang web desain dengan Dreamweaver maka saya akhirnya melaunching tutorial Dreamweaver di ilmugrafis rubrik dan kategori web desain...
Seperti kata Pak Patah eh salah itu nama tetangga saya :) maksudnya Kata PEPATAH "Tak kenal maka tak sayang" oleh karena itu alangkah baiknya bila kita menilik apa itu Dreamweaver?
DREAMWEAVER (dulu milik dari macromedia namun sekarang menjadi milik dari Adobe) adalah software aplikasi desain web visual yang biasa dikenal dengan istilah WYSIWYG — What You See Is What You Get — dalam bahasa sansekerta artinya ( Apa yang kamu lihat akan menjadi seperti apa yang kamu inginkan) masih bingung ya intinya Kita tidak harus berurusan dengan tag-tag HTML untuk membuat sebuah situs karena sudah disiapkan secara instant seperti membuat Table, Membuat Hyperlink, Memasukkan Gambar, termasuk memasukkan Flash Animasi, dll. Dreamweaver tidak hanya dapat digunakan oleh para desainer web, namun juga dapat digunakan oleh programer untuk membangun halaman internaktif karena Dreamweaver mendukung pula PHP, ColdFusion, ASP.NET dan lain-lain. Mantab Bukan!!!
Gambar 1 . Tampilan LogoDreamweaver
Gambar 2 . Tampilan / Layout Dreamweaver
Berikut ini penjelasan untuk elemen-elemen workspace seperti telah tertera pada gambar.
- LEMBAR KERJA DREAMWEAVER adalah tempat di mana Anda dapat membuat halaman web secara visual, kode, atau keduanya.
- INSERT TOOLBAR adalah tempat Anda dapat memasukan image, Flash movie, table, atau elemen lain. Untuk memunculkan panel ini, klik Windows > Insert atau tekan Ctrl-F2.
- PENGATURAN HALAMAN berguna untuk melakukan pengeditan pada suatu elemen di Document Window.
- PANEL GROUP merupakan kumpulan dari panel-panel Dreamweaver.
Tunggu Edisi Selanjutnya...
Semoga Bermanfaat
Memasukkan Animasi Flash Ke Dalam Website
Pada tutorial belajar Dreamweaver kali ini penulis akan menjelaskan bagaimana cara memasukkan animasi flash berektension *.swf ke dalam website dengan dreamweaver...
Langkah - langkahnya:
1. Buka Dreamweaver dan pilih File - New
Atau tekan CTRL + N = Untuk membuat project baru sebagai latihan
2. Cara I : Pada Menu Utama
(help: untuk mengetahui letak menu utama bisa klik Pengenalan Dreamweaver dan Layout ) lalu pilih:
Insert - Media - Flash -
atau
Cara II : tekan CTRL + ALT + F
Ket:
swf = adalah extensi file animasi hasil olahan flash, file ini dapat dijalankan jika kita menginstal flash player ke dalam browser kita
Adobe Flash Player for Browser klik icon di atas untuk download adobe flash Player
3. Lalu pilih file berformat *.swf yang diinginkan
Disini penulis menggunakan contoh:
butterfly.swf yang dapat di download langsung disini password: ilmugrafis
berbagai macam contoh animasi untuk kebutuhan website kamu:
Langsung download aja
download Bom | Password: ilmugrafis
Download Bendera Indonesia | Password: ilmugrafis
Download Jam Analog
Tunggu Tutorial Dreamweaver Berikutnya...
Semoga Bermanfaat
Memasukkan Video Youtube ke Website
Langkah - langkahnya:
1. Buka Dreamweaver dan pilih File - New
Atau tekan CTRL + N = Untuk membuat project baru sebagai latihan
2. Buka Youtube.com dan cari video yang akan dimasukkan, disini saya memilih video penyanyi favorit saya yaitu "hitomi no junin", hehehe...
bagi yang bingung bisa cari di search youtube
3. Pada masukkan / copy script yang ada di embed youtube dan paste pada sela antara TAG <body></body>
Ok selesai, tinggal upload file tersebut ke server dan video akan otomatis jalan saat dibuka oleh browser
Membuat Rollover Image
Hai jumpa kembali di Tutorial Dreamweaver mempercantik halaman website kita dengan kolaborasi CSS dan dreamweaver. Pada tutorial belajar Dreamweaver kali ini penulis akan menjelaskan bagaimana cara membuat atau memasukkan Rollover Image. Apa yang dimaksud rollover image? Rollover image adalah suatu image / gambar yang dilengkapi dengan script di dalamnya sehingga sewaktu gambar (gambar utama/default) itu disorot dengan kursor maka gambar tersebut akan berganti dengan gambar yang lain (gambar kedua)...
Contohnya: di menu utama ilmuGrafis di atas ketika disorot berubah warna
Jika mungkin belum jelas maka silahkan saja coba ikuti pembuatannya dulu, maka siapa tahu nanti jadi lebih jelas apa yang dimaksudkan di atas
Dan seperti ini cara'a..
1. buka dreamweaver seperti biasa dan buat file baru berextensi html.. (anda bisa menggunakan tampilan Split maupun Code, tp saya terbiasa menggunakan tampilan code)
2. kita buat dulu bagian yang ingin dirollover gambar (backgroundnya) di antara tag <body></body> dengan menggunakan sebuah div tag dengan nama element menggunakan class atau id..
(di sini saya menggunakan element class)
berikut kode tag'a..
tampilan tersebut akan membuat sebuah link standar yang biasa digunakan tanpa ada style apapun..
dan berikut kode css yang ditaruh di antara tag <head></head>
#ffffff adalah bilangan hexadecimal untuk warna putih yang digunakan sebagai warna background..(saya menggunakan warna putih karena di halaman preview berlatarbelakang warna putih..)
* : cari dan isi gambar yang ingin digunakan untuk gambar awal dan gambar hover..
0 0 : merupakan posisi dari gambar backround 0 pertama adalah untuk posisi x dan 0 kedua adalah untuk posisi y..
no-repeat : merupakan perulangan dari gambar..no-repeat berarti tidak menggunakan perulangan..jika kalian ingin menggunakan perulangan..gunakan repeat-x untuk perulangan horizontal..dan repeat-y untuk perulangan vertical..
padding-left : memberikan jarak dari kiri untuk memperlihatkan gambar dari tulisan link yang ada..(saya menggunakan 20px karena lebar dari gambar adalah 15px..)
jika ingin menggunakan hover di setiap tag atau class atau id..cukup gunakan ":hover" setelah nama tag atau nama class atau nama id.. (tanpa kutip)
Cara Lainnya::
Bagi yang masih kebingungan dengan permainan Tag dan CSS jangan kuatir karena ada cara alternatif dalam menampilkan rollover image karena di dalam aplikasi dreamweaver telah disediakan :)
1. Buka aplikasi Dreamweaver
2. Pilih Insert >> Image Objects >> Rollover Image
3. Maka akan muncul pop up yang harus anda lengkapi
Penjelasan:
Image name: adalah nama / judul Rollover image anda (isi sesuka anda)
Original image: gambar utama/default Rollover image
Rollover image: gambar kedua (gambar yang akan muncul saat kursor disorot)
Arternate text : adalah penjelasan tentang gambar tersebut mengenai apa (boleh dikosongi/ boleh diisi sesuka anda)
When Clicked, Go to URL: isi dengan URL link yang anda inginkan, bisa web anda, paman google, atau web IG yaitu >> http://www.ilmugrafis.com :)
Nah setelah selesai Klik OK, mudah bukan,
sekarang coba buka halaman yang anda buat dengan browser anda (IE, Mozzila, Opera) whatever... yang penting minumnya teh sak kotaknya... wkwkwk :P
Just pudding
Semoga Bermanfaat ^_^/
BELAJAR Membuat WEBSITE - Basic HTML
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>
|
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>
|
<HTML>
<BODY>
Tulisan ini akan tampak dalam
browser by ilmugrafis.
</BODY>
</HTML>
|
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>
|
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>
|
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 ^_^/
Menu - Menu Animasi Menarik di Dreamweaver
Seorang Web desainer pasti akan melakukan segala cara untuk membuat tampilan websitenya menarik, salah satunya mungkin dengan cara membuat menu animasi. Cara itu antara lain dengan belajar Photoshop, Flash, dan juga Firework. Namun Pada tutorial Dreamweaver kali ini kita lupakan dulu hal itu karena kita akan belajar membuat menu yang menarik tanpa harus belajar animasi flash karena pada dreamweaver terdapat template - template animasi siap pakai yang sayang jika dilewatkan :)
Ok, berikut langkah - langkahnya:
1. Buka Program Dremaweaver anda, disini saya menggunakan Dremweaver 8 , namun cara ini bisa diterapkan untuk semua versi Dremweaver mulai dari MX , 8 hingga yang terbaru yaitu Adobe Dremweaver CS5
Start >> All Program >> Dreamweaver
2. kalau anda tidak / belum punya website untuk project anda bisa mengklik Create new: pilih HTML
3. Sebelum kita mulai membuat menunya maka kita diharuskan save (menyimpan) dulu project kita dengan menekan CTRL + S , pilih direktori / tempat penyimpanan lalu berikan nama file yang anda inginkan. klik Save
4. Setelah itu pilih menu Insert >> Media >> Flash Button
5. Pilih template tombol menu animasi yang anda inginkan
Disini ada berbagai macam tombol yang WOW, menarik bukan... sebagai contoh maka saya pilih saja salah satunya yaitu Glass-Silver
Button Text berfungsi untuk menambahkan judul / kata apa yang terdapat di dalam button nantinya
Font : jenis font yang dipakai
Size : ukuran font yang diinginakan
Link : tautan untuk menu nantinya
Tekan OK, untuk title isi saja
OK
klo 1 menu kurang maka buat lagi sebanyak yang anda perlukan untuk menu di website anda dengan mengulangi langkah di atas
Contoh hasilnya:
untuk mengetesnya tekan F12 untuk melihat hasilnya :)
Sampai ketemu lagi di Tutorial Dremweaver berikutnya
Semoga Bermanfaat ^_^/
Floating Back To Top Page
Pada Tutorial Dreamweaver dan HTML kali ini saya akan menjelaskan bagaimana cara membuat flating Back To Top Page kalau dalam bahasa Indonesianya adalah Tombol melayang untuk Kembali ke Halaman Atas. Maksudnya atas disini adalah kembali ke atas halaman. Misalnya kita mempunyai halaman posting yang panjang atau pengunjung loyal yang suka berkomentar di website atau blog anda dan sudah menscroll sampe bawah lalu kita ingin kembali ke menu utama yang ada di atas maka kita tidak perlu menscrol lagi ke atas jadi kita cukup mengKlik tombol back to top page saja. Jadi dengan shortCut ini maka kembali ke main menu menjadi Sangat praktis dan menghemat waktu dan tenaga tentunya.
Berikut ini cara dan Script Floating Back to Topnya:
1. Buka Dreamweaver, buka dan edit halaman web anda dengan Dreamweaver
2. Masukkan Script ini di antara tag <body> </body>
Sedikit penjelasan: tag "img scr" disini adalah untuk menload image yang kita inginkan
daripada mengetik IG sudah menyiapkan Script code floating top page
bisa dicopy dan paste ke code dreamweaver anda
Simpan (Save), upload file ke server
Tapi bagi anda pemakai blogger tidak perlu bersedih karena script di atas bisa juga dipakai di blogger. Caranya:
1. Login ke Blogger
2. Go to Layout -> Add a Gadget -> HTML/JavaScript type
3. Masukkan kode di atas, Save
Jika belum keluar di halaman utama konten blog anda maka Refresh Blogger anda dengan menekan tombol F5 di keyboard
Terima kasih
Sampai ketemu lagi di Tutorial Dremweaver berikutnya
Semoga Bermanfaat ^_^/
Membuat Server Lokal pada Laptop atau PC
Pada tutorial Website kali ini kita akan sedikit belajar tentang bagaimana cara membuat komputer atau laptop kita menjadi sebuah server (web server lokal atau dikenal dengan localhost). Server ini gunanya untuk menjalankan pemrograman PHP yang disertai DATABASE dan MySQL, JQUERY, maupun AJAX karena untuk menjalankan program - program scripting kita perlu menggunakan SERVER. Nah sebagai pemula maka kita terlebih dahulu belajar membuat website secara offline bukan? untuk itulah perlunya membuat server di PC atau Laptop kita sehingga kita bisa mengetes Program maupun Script yang telah kita buat.
Sebagai contoh, dalam keadaan OFFLINE web berformat *.Php dengan berformat *.Html. keduanya sama - sama bentuk extensi dari sebuah halaman website, namun ketika kita mengakses web dengan extensi php maka file web tersebut tidak akan terbuka pada browser kita. coba jika extensi tersebut adalah html (web statis) maka meskipun tanpa bantuan server, halaman web tersebut akan tetap bisa terbaca oleh browser kita.
Disini saya memberikan contoh file php dan contoh file html. bisa Didownload disini, agar tahu perbedaannya buka kedua file tersebut menggunakan browser anda (bisa firefox, chrome, internet explorer, safari, opera, dll)
Nah sekarang kembali ke cara membuatnya severnya (web server lokal atau localhost) bagaimana?
Ada beberapa jenis Software untuk Membangun Web Server lokal atau Localhost yang support Windows diantaranya adalah :
1. WampServer, Download di http://www.wampserver.com
2. XAMPP, Download di http://www.apachefriends.org/en/xampp-windows.html
3. AppServ, Download di http://www.appservnetwork.com
4. Php Triad, bisa dicari di Google Search atau http://sourceforge.net/projects/phptriad/
Software di atas merupakan gabungan dari php, mysql database dan apache. Semuanya memiliki fungsi dan kemampuan yang sama untuk membangun sebuah Webserver lokal pada Komputer PC maupun Laptop anda. Tidak perlu di instal semuanya, cukup pilih salah satu saja program dari 4 program yang saya contohkan di atas, disini saya menggunakan XAMPP. Program XAMPP merupakan sebuah paket instalasi untuk PHP, APACHE dan MySQL. Dengan menggunakan XAMPP, kita tidak perlu lagi repot menginstall ketiga software itu secara terpisah.
Bagaimana cara instalasinya? Seperti biasa tinggal download lalu instal seperti program windows pada umumnya.
Setelah selesai instalasi Langkah selanjutnya adalah menjalankan servicenya, maka Jalankan file xampp
Caranya:
1. klik kiri2x XAMPP Control Panel yang ada di desktop. Atau anda juga dapat menjalankan XAMPP Control Panel dari menu Start -> All Programs -> apachefriends -> xampp -> xampp control panel
Tekan Start pada Apache dan MySql
2. Buka web browser anda, lalu ketikkan ---> http://localhost <lalu tekan enter>. Jika tampilannya seperti di bawah ini, maka apache sudah terinstall dengan benar
3. Dari tampilan yang muncul Anda dapat melakukan berbagai administrasi untuk server Anda termasuk membuat database SQL di Phpmyadmin, pilih English
4. Untuk menonaktifkan server lokal Anda, keluar dari XAMPP Control Panel. Caranya, pada XAMPP Control Panel, klik [Stop] pada masing-masing [Apache] dan [MySql], lalu tutup jendela kontrol panel (klik X pada pojok kanan atas)
5. Agar terbaca pada server maka kita harus meletakkan file - file php kita di document root milik XAMPP terletak pada folder
(jika anda menginstal di directory file C) maka C:\Program Files\apachefriends\xampp\htdocs\(folder web anda)\index.php
Contoh: disini saya membuat offline www.ilmugrafis.com , maka di dalam htdocs saya membuat folder bernama "www.ilmugrafis.com" untuk project saya
(catatan penting: index.php --> file pertama yang dibaca oleh browser adalah index jadi untuk halaman utama wajib diberi nama index.php)
Untuk mengakses filenya, di browser tinggal ketik, http://localhost/(nama folder yang ada di htdocs)/index.php
Contoh: http://localhost/www.ilmugrafis.com/index.php
Maka di browser akan tampil isi dari index.php yang ada di folder www.ilmugrafis.com
Menarik bukan bermain web server di Komputer / Laptop. hehehe... Tunggu tutorial selanjutnya yang lebih seru, seperti membuat database sederhana di Server lokal, JQuery, dll
Terima kasih, Semoga Bermanfaat ^_^/
Pengenalan JQuery Website
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
Membuat Drop Down Menu Sederhana di Website
Pada tutorial Dreamweaver kali ini saya akan mencoba memberikan penjelasan bagaimana cara membuat drop down menu yang simple dan sederhana agar bisa dan mudah dipelajari serta dikembangkan mungkin nantinya oleh para calon web developer maupun web designer yang singgah di website ilmugrafis. Sedikit penjelasan, Dropdown Menu merupakan menu yang bila kita sorot dengan mouse maka menu tersebut akan memunculkan menu yang lain (sub menu). Saat ini banyak sekali yang sudah menggunakan Drop Down menu karena alasan terlihat lebih modern dan canggih, menambah keindahan website sampai menghemat space/ruang di websitenya karena dengan drop down kita bisa memberikan sub menu tersembunyi pada menu di website kita.
Ok, mari kita mencoba membuatnya:
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 */ |
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="#" class="dropdown">Menu One</a></li> <li class="sublinks"> <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="#" class="dropdown">Menu Two</a></li> <li class="sublinks"> <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 --> |
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, dan hasilnya kira - kira seperti ini
Gambar: Drop down menu sederhana
Drop down menu telah selesai dibuat, Lihat Demo Drop Down menu ini Disini. Anda bisa mengganti menu - menu sesuai keinginan anda dengan mengedit teks "Menu One" atau "Menu Two" dan Sub menu "Link 1" sampai dengan "Link 5" pada halaman coding HTML, silahkan dikembangkan sesuai keinginan. Sampai ketemu di tutorial website lainnya. Source code Drop Down menu ini bisa anda download disini. Terima kasih, semoga bermanfaat. Jika ada Saran maupun pertanyaan silahkan kontak saya. Terima kasih, semoga bermanfaat
Langganan:
Postingan (Atom)
