Cara Membuat Navigasi

Kita akan membuat sebuah navigasi sederhana pada yang latihan ini misalnya link dari home > Profile > Contact
1. Buka program Dreamweaver ( bisa menggunakan Macromedia dan Adobe )
2. Tulislah Home, Profile dan Contact ( Align: Left, Font Size:12 ) serta dibawahnya juga ditulis Home ( Align: Center, Font size: 36).


3. Kemudian simpan ( File> Save) dengan nama file : home.html ( Di usahakan diletakan pada 1 folder )


4. Buatlah file baru ( tujuannya untuk membuat halaman profile ) dengan cara pilih file > new > pilih html > create > sehingga muncul halaman baru.


5. Tulislah Home, Profile dan Contact ( Align: Left, Font Size:12 ) serta dibawahnya juga ditulis Profile ( Align: Center, Font size: 36).


6. Pilih file > save > tulis file namenya profile.html


7. File > New > untuk membuat halaman contact caranya sama seperti langkah 5 dan 6, tetapi untuk tulisan ( font size: 36 ) diganti dengan Contact. Kemudian save dengan nama contact.html
8. Langkah berikutnya yaitu membuat link. Kembali ke halaman home > blok tulisan home > pada panel propertis klik link > pilih home.html


9. Sehingga akan muncul link:home.html > dan pilih target:_self.( link untuk home sudah selesai ) lakukanlah pada Profile dan Contact caranya sama seperti cara 1-8.


10. Jika semua link sudah dibuat > untuk menjalankan ke browser tekan f12 pada keyboard sehingga akan tampil ke jendela browser.




Artikel Menarik Lainnya :



6 comments:

Ferdinand on 17 February 2010 at 09:56 said...

Wah Siip Bro....jelas N tuntas tutorialnya hhe...

Klo buat integrasiin Dreamwheaver N Photoshop or Corel gmn Sob...???

Ilmu Desain on 17 February 2010 at 11:55 said...

Biasanya dalam mengintegrasi antara Dreamweaver, Photoshop dan Corel biasa di gunakan param web designer untuk membuat sebuah desain web yang menarik. Untuk penjelasan Mengintegrasi ketiga aplikasi tersebut kalau saya jabarkan secara detail akan cukup panjang tapi intinya Untuk mengIntegrasi dari ketiganya Tentunya harus bisa mengekspor graphic symbols, layouts dan components untuk Flex environment.
untuk lebih jelasnya kamu bisa baca artikel di http://bundabiz.net/vmchk/Pembuatan-Web/CD-tutorial-web-desain-menggunakan-photoshop-dan-dreamweaver/flypage.tpl.html >>>
Kemudian pada Corel Draw anda bisa membuat symbol berbasis vector dan mengekspornya sebagai file SWF, yang siap untuk digunakan dan di impor ke dalam Flex. Sebagai contoh anda bisa mengekspor symbol vector anda dan kemudian gunakan mereka untuk merubah style tombol Flex component, gunakan script :

overSkin: Embed(source='styles.swf', symbol='mysymbol');
upSkin: Embed(source='styles.swf', symbol='mysymbol');
downSkin: Embed(source='styles.swf', symbol='mysymbol');

Mudah2n bermanfaat >>>dan bisa di fahami..untuk lebih jelasnya anda juga bisa tanyakan ke Om Google ya..hehehe karena saya juga masih belajar dan masih banyak sekali kekurangannya...

Alwi on 17 February 2010 at 21:23 said...

Ikutan menyimak ... totorial yang sangat bermanfaat .......

Ilmu Desain Grafis on 17 February 2010 at 21:58 said...

@Alwi: Boleh...boleh...boleh....

putra on 6 September 2011 at 21:35 said...

wah makasih bgd nih.. infonya kebetulan msh
belajar n butuh byk sumber… btw ada tutorial mengenai smarty n javascript ga??? coz blm dpt penjelasan lengkap..
jika sempat silahkan berkunjung ya ke http://cakraindah.net
ditunggu saran n komentarnya terima kasih

Muryan Awaludin on 7 September 2011 at 08:29 said...

@Putra : ya sama2 sob, saya juga masih belajar..kita sama2 belajar..untuk tutorial mengenai smarty n javascript mulai dari dasar silahkan klik link >> http://www.ilmudesain.web.id/search/label/Tutorial%20JavaScript >> Insya Allah kedepannya untuk tingkat menengah sampai tingkat mahir...Ok saya langsung mampir sob di blog antum....

Post a Comment

Please Your Comment

Entri Populer

Kontak Saya

HP/WA : 08562616116

Total Pageviews

Teman-Teman Blogger

Dapatkan Update artikel IDG ke email Anda

Ilmu Desain Grafis Copyright © 2009 Community is Designed by Bie | development by Muryan Awaludin