Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM]
1 Modul kusus gratis webdesign| www.kursuskomputer...
September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM]
2 Modul kusus gratis webdesign| www.kursuskomputer...
September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM]
3 Modul kusus gratis webdesign| www.kursuskomputer...
September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM]
4 Modul kusus gratis webdesign| www.kursuskomputer...
September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM]
5 Modul kusus gratis webdesign| www.kursuskomputer...
September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM]
6 Modul kusus gratis webdesign| www.kursuskomputer...
September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM]
7 Modul kusus gratis webdesign| www.kursuskomputer...
September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM]
8 Modul kusus gratis webdesign| www.kursuskomputer...
September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM]
9 Modul kusus gratis webdesign| www.kursuskomputer...
September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM]
10 Modul kusus gratis webdesign| www.kursuskompute...
September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM]
11 Modul kusus gratis webdesign| www.kursuskompute...
September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM]
12 Modul kusus gratis webdesign| www.kursuskompute...
September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM]
13 Modul kusus gratis webdesign| www.kursuskompute...
September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM]
14 Modul kusus gratis webdesign| www.kursuskompute...
September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM]
15 Modul kusus gratis webdesign| www.kursuskompute...
September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM]
16 Modul kusus gratis webdesign| www.kursuskompute...
September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM]
17 Modul kusus gratis webdesign| www.kursuskompute...
September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM]
18 Modul kusus gratis webdesign| www.kursuskompute...
September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM]
19 Modul kusus gratis webdesign| www.kursuskompute...
September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM]
20 Modul kusus gratis webdesign| www.kursuskompute...
September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM]
21 Modul kusus gratis webdesign| www.kursuskompute...
September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM]
22 Modul kusus gratis webdesign| www.kursuskompute...
September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM]
23 Modul kusus gratis webdesign| www.kursuskompute...
September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM]
24 Modul kusus gratis webdesign| www.kursuskompute...
September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM]
25 Modul kusus gratis webdesign| www.kursuskompute...
September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM]
26 Modul kusus gratis webdesign| www.kursuskompute...
September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM]
27 Modul kusus gratis webdesign| www.kursuskompute...
September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM]
28 Modul kusus gratis webdesign| www.kursuskompute...
September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM]
29 Modul kusus gratis webdesign| www.kursuskompute...
September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM]
30 Modul kusus gratis webdesign| www.kursuskompute...
September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM]
31 Modul kusus gratis webdesign| www.kursuskompute...
September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM]
32 Modul kusus gratis webdesign| www.kursuskompute...
September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM]
33 Modul kusus gratis webdesign| www.kursuskompute...
September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM]
34 Modul kusus gratis webdesign| www.kursuskompute...
September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM]
35 Modul kusus gratis webdesign| www.kursuskompute...
September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM]
36 Modul kusus gratis webdesign| www.kursuskompute...
September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM]
37 Modul kusus gratis webdesign| www.kursuskompute...
September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM]
38 Modul kusus gratis webdesign| www.kursuskompute...
September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM]
39 Modul kusus gratis webdesign| www.kursuskompute...
September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM]
40 Modul kusus gratis webdesign| www.kursuskompute...
September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM]
41 Modul kusus gratis webdesign| www.kursuskompute...
September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM]
42 Modul kusus gratis webdesign| www.kursuskompute...
September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM]
43 Modul kusus gratis webdesign| www.kursuskompute...
September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM]
44 Modul kusus gratis webdesign| www.kursuskompute...
September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM]
45 Modul kusus gratis webdesign| www.kursuskompute...
September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM]
46 Modul kusus gratis webdesign| www.kursuskompute...
September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM]
47 Modul kusus gratis webdesign| www.kursuskompute...
September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM]
48 Modul kusus gratis webdesign| www.kursuskompute...
Nächste SlideShare
Wird geladen in …5
×

Modul dan ebook belajar membuat website untuk pemula dengan dreamweaver css dan html

1.138 Aufrufe

Veröffentlicht am

Ebook gratissssssss dari kursus komputer naura cara membuat website untuk pemula menggunakan dreamweaver css dan html
LPK Naura Kursus Komputer Pondok gede-Menyelenggarakan kursus bersertifikat, kursus web master,vb.net,ms.office, excel vba, desain grafis,seo dengan harga terjangkau lokasi jakarta-bekasi

www.kursuskomputer.web.id
www.kursuskomputernaura.com
www.kursusweb.net
www.dientrimedia.com

Veröffentlicht in: Bildung
  • Als Erste(r) kommentieren

Modul dan ebook belajar membuat website untuk pemula dengan dreamweaver css dan html

  1. 1. September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM] 1 Modul kusus gratis webdesign| www.kursuskomputernaura.com Membangun Layout Web Dengan teknik Div Menggunakan Css Dan Html 1.merancang layout 1.a membuat folder project Pertama tama anda siapkan dulu folder untuk menampung hasil project kita misalkan buat folder bernama latihan web caranya klik kanan layar desktop kemudian pilih new ->new folder kemudian beri nama latihan web contohnya seperti gambar berikut Kemudian hasilnya seerti gambar berikut Barulah kita buka aplikasi kesayangan kita untuk membuat kode kode html dan cssnya disini penulis memakai editor dreamweaver cs5,untuk memudahkan seorang pemula untuk belajar web,karena banyak fitur yang memudahkan baiklah
  2. 2. September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM] 2 Modul kusus gratis webdesign| www.kursuskomputernaura.com Mari kita lihat gambar berikut : Kemudian klik dua kali tulisan html maka akan dibuatkan kode kode standar sebuah html gambarnya seperti berikut
  3. 3. September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM] 3 Modul kusus gratis webdesign| www.kursuskomputernaura.com Kemudian kita simpan di folder yang sudah kita buat tadi kemudian beri nama index.html maka akan tersimpan sebuah shortcut pada folder tersebut yang artinya anda sudah mempunyai sebuah dokumen index.html Kemudian kita buat lagi sebuah file baru bernama style.css kita simpan di folder project kita yang tadi juga caranya klik file ->new kemudian pilih css dan klik 2 x Lihat contohnya pada gambar berikut :
  4. 4. September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM] 4 Modul kusus gratis webdesign| www.kursuskomputernaura.com Jika sudah baru kita link kan file css tersebut ke index html kita sehingga kode kode pembuat rangka (file html) terpisah dengan aturan tampilan dan propertinya ( file css) baiklah mari kita lihat gambar berikut Kemudian klik ok lalu ok lagi maka akan ditambahkan satu baris kode yang membuat link antara file html dengan css untuk lebih jelasnya lihat gambar
  5. 5. September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM] 5 Modul kusus gratis webdesign| www.kursuskomputernaura.com Kemudian barulah kita mengetikkan kode kode htmlnya di file index.html ketikkan kode berikut diantara tag body kemudian simpan Lalu kita berpindah ke lembar kerja css dengan cara klik tab style.css yang berada di samping tab source code berikut gambarnya : Kemudian kita ketikkan kode kode untuk membuat tampilannya agar sirangka rangka html tadi menjadi berbentuk layout template html yang sueedap di pandong mato he… baiklah berikut kode kodenya :
  6. 6. September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM] 6 Modul kusus gratis webdesign| www.kursuskomputernaura.com Nah berikut hasil tampilanya di dreamweaver cara nya klik tab design seperti pada gambar untuk melihat hasilnya Berikut hasilnya di tab design :
  7. 7. September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM] 7 Modul kusus gratis webdesign| www.kursuskomputernaura.com Kalau anda ingin melihat hasilnya di browser maka klik tab preview kemudian pilih dan klik browser yang akan menampilkan hasil kode kita di website seperti gambar berikut: Dan berikut hasilnya di browser 2.Membuat menu Dropdown Untuk memudahkan sebuah website dijelajahi maka anda memerlukan sebuah navigasi nah maka dari itu kita akan membuat sebuah halaman navigasinya
  8. 8. September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM] 8 Modul kusus gratis webdesign| www.kursuskomputernaura.com Caranya cukup mudah pertama tempatkan dulu kursor kita di antara tag div class menu enter 2x kemudian kembali ke atas dan tekan tombol tab maka posisinya seperti gambar berikut : kemudian klik tab insert lalu pilih spry kemudian pilih sprymenubar setelah muncul kotak dialog pilih yang horizontal kemudian klik ok lihat contohnya pada gambar berikut gambar berikut :
  9. 9. September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM] 9 Modul kusus gratis webdesign| www.kursuskomputernaura.com Maka kita akan dibuatkan kode otomatis untuk membuat tampilan menu dari dreamweaver berikut skrinsutnya : kemudian simpan dengan menekan tombol ctrl dan S bersamaan dan akan muncul dialog seperti gambar langsung klik ok saja
  10. 10. September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM] 10 Modul kusus gratis webdesign| www.kursuskomputernaura.com Kemudian kembali ketampilan design dan lihat hasilnya seperti gambar berikut Nah kalo yang ini kan masih belang belang maka kita selaraskan dulu dengan warna background kita caranya kita klik tab sprymenubar.css lihat contohnya di gambar Dan kita akan dialihkan ke lembar kerja file sprymenubar.css yang sudah dibuatkan oleh sidreamweaver tadi,kemudian kita ke baris 93 lalu kita hapus baris tersebut dan kita ganti backgroundnya menjadi transparent seperti gambar berikut : Kemudian kita tambahkan juga sebuah property background setelah baris 39 dimana warnanya harus sama dengan background menu kita berikut gambarnya
  11. 11. September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM] 11 Modul kusus gratis webdesign| www.kursuskomputernaura.com Nah sekarang coba preview hasilnya di browser lihat gambar beerikut : Dan hasilnya bias dilihat pada gambar berikut : Setelah itu baru kita atur deh teks dari menu menu navigasi kita caranya kembali ke tab design klik window kemudian centang pilihan propertinya maka kita akan di tampilkan jendela untuk mengatur propertinya seperti gambar berikut :
  12. 12. September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM] 12 Modul kusus gratis webdesign| www.kursuskomputernaura.com Rubahlah semua Menu menu utamanya pada kolom text dan hilangkan sub menu yang tidak perlu dengan mengklik tulisannya terlebih dahulu baru tanda minus pada jendela property seperti terlihat pada gambar diatas dan bias dilihat hasil akhirnya seperti gambar berikut : Buat link disini misalnya index.html
  13. 13. September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM] 13 Modul kusus gratis webdesign| www.kursuskomputernaura.com 3.Membuat animasi pada halaman web menggunakan Easyrotator Pada bahasan kali ini kita akan mencoba membuat animasi tampilan slider gambar untuk mempercantik halaman web kita pertama tama yang kita siapkan adalah sebuah plugin untuk dreamweaver yang bernama easyrotator bias anda download di website resminya di http://www.dwuser.com/easyrotator/ kemudian anda extract hasilnya pada sebuah folder agar lebih rapi,lihat seperti gambar Dan hasilnya seperti berikut kemudian klik dua kali easyrotator-windows untuk menginstall di komputer anda kemudian muncul dialog klik tombol run seperti gambar berikut Dan kemudian muncul gambar dialog dari easy rotatornya dan beberapa pilihan biarkan saja secara standar diatur langsung saja klik continue terlihat seperti gambar dibawah ini
  14. 14. September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM] 14 Modul kusus gratis webdesign| www.kursuskomputernaura.com jika muncul dialog lagi untuk menginstall aplikasi tambahan adobeair aplikasi tersebut diperlukan untuk menjalan kan easy rotator diweb kita, tinggal klik yes saja untuk melanjutkan instalasi maka easy rotator sudah terinstall di computer kita dan akan ditampilkan seperti ini berikutnya untuk mulai membuat slider diweb kita langkah pertamanya adalah kita membuat sebuah file html baru untuk menampung kode hasil eksekusi dari easyrotatoor tersebut sebelum kita salin ke template kita nantinya ikuti langkah langkahnya pada bab selanjutanya 3.1 Mulai membuat slider pertama kita siapkan terlebi dahulu sebuah folder bernama gambar pada folder project kita dimana didalam folder gambar tersebut kita taruh gambar gambar untuk slider kita nanti terlihat seperti gambar berikut
  15. 15. September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM] 15 Modul kusus gratis webdesign| www.kursuskomputernaura.com Jika sudah baru kita kembali ke editor dreamweaver kita ,buat file baru misalnya bernama slider.html caranya klik file->new->klik 2x pada tulisan html kemudian simpan dengan nama slider seperti gambar berikut Kalau sudah kita buka aplikasi easyrotator dari start menu atau all program seperti gambar berikut : Kemudian muncul window untuk memulai easyrotator klik tombol seperti terlihat pada gambar dan pilih file slider.html lalu klik open .Artinya pada slider.html tempat kita menyematkan kode yang nantinya akan degenerate oleh easyrotator
  16. 16. September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM] 16 Modul kusus gratis webdesign| www.kursuskomputernaura.com Kemudian klik lagi tombol dibawahnya untuk mengarahkan folder penyimpananya yang artinya penyimpanannya terletak di folder project kita tadilah adanya si file slider.html bila muncul kotak dialog langsung klik saja select folder terlihat seperti gambar berikut Kalau sudah kemudian klik continue terlihat seperti gambar berikut Klik tombol add photo yang dibawah kemudian muncul add photo klik dan akan diarahkan kedialog pencarian folder seperti terlihat pada gambar sebelah kanan
  17. 17. September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM] 17 Modul kusus gratis webdesign| www.kursuskomputernaura.com Lalu muncul dialog seperti berikut pilih folder gambar kemudian select folder Jika sudah maka klik akan ditampilkan isi dari seluruh folder gambar tersebut kemudian pilih semua gambar dengan cara klik kiri,tahan kemudian arahkan cursor memblok seluruh gambar lalu klik tombol add photo maka akan tampil berikutnya seperti gambar disebelah kanan Kemudian pilih template yang akan kita gunakan dengan memilih tombol layout presentation,kemudian scroll kebawah untuk melihat macam macam templatenya jika sudah ketemu yang cocok klik di templatenya maka akan tampil window untuk mengapply template tersebut kemudian klik ok
  18. 18. September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM] 18 Modul kusus gratis webdesign| www.kursuskomputernaura.com Kemudian kita pindah ke tab general,kemudian kita arahkan ke pilihan autoplay kita pilih yes lalu klik tombol save and exit Setelah selesai kemudian kita beralih ke editor dreamweaver kita ke file slider.html yang kita buat tadi maka akan muncul kotak dialog seperti gambar berikut langsung klik yes artinya apakah anda setuju untuk membuat perubahan pada file html anda oleh easy rotator? Maka jawab yes Maka akan dibuatkan kode otomatis oleh dreamweaver,maka kita copy kode yang baru dibuat tersebut ke bagian div animasi kita dari awal kode sampai akhir kodenya seperti gambar berikut Sampai ke Jika sudah maka tempatkan kursor diantara tag siku class animasi dan enter 2x lalu naik keatas lagi dan tekan tombol tab lihat contohnya pada gambar
  19. 19. September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM] 19 Modul kusus gratis webdesign| www.kursuskomputernaura.com Kalau sudah kemudian simpan dengan menekan tombol ctrl dan s secara bersamaan kemudian preview hasilnya di browser Membuat Gambar untuk Header Website Dengan Photosop Untuk mempercantik Tampilan heade website kita maka kita perlu mendesignnya dengan menggunakan editor photo yaitu photosop disini penulis menggunakan editor photosop cs5 Baiklah langsung kita mulai untuk membuat lembar kerja baru dengan cara klik menu file-> new dan akan tampil window dialog seperti berikut kita isikan sesuai dengan header website kita yaitu 900 X 200 px maka akan tercipta sebuah lembar kerja baru terlihat seperti gambar
  20. 20. September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM] 20 Modul kusus gratis webdesign| www.kursuskomputernaura.com kemudian klik tool gradient dan sesuaikan kombinasi warnanya setelah itu kita posisikan cursor pada tengah atas kanvas klik tahan dan tarik sampai kanvas bawah maka tampilan akan seperti gambar berikut Setelah selesai kemudian kita drag gambar ke kanvas kita contohnya lihat pada gambar dibawah ini Jika sudah maka kita akan terlihat hasilnya seperti dibawah ini
  21. 21. September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM] 21 Modul kusus gratis webdesign| www.kursuskomputernaura.com Lalu kita ganti tool menjadi eraser tool kemudian klik kan ke bagian background untuk menghilangkan backgroundnya lihat gambar Kemudian Kita tambahkan kembali gambar dan teks untuk memberi informasi tentang apakah isi dari website kita untuk hasil akhirnya bias dilihat pada gambar berikut Kemudian kita simpan menjadi bertype jpeg beri nama headerweb.jpg berikut langkah langkahnya klik save as kemudian klik ok terlihat seperti gambar
  22. 22. September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM] 22 Modul kusus gratis webdesign| www.kursuskomputernaura.com Kemudian kembali lagi ke editor kesayangan kita Dreamweaver ,nah kita memberi perubahan pada kode dibagian class kepala untuk menempelkan gambar yang barusan kita buat melalui css kodenya seperti berikut menjadi Maka template kita sekarang sudah mempunyai gambar header
  23. 23. September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM] 23 Modul kusus gratis webdesign| www.kursuskomputernaura.com Kemudian kita rubah background class animasi agar warnanya tidak belang belang dengan gambar slider kita caranya klik tab style.css kemudian ganti baris kode untuk background untuk lebih jelasnya lihat pada gambar menjadi Kemudian kita beri warna pada body website kita caranya dengan menambahkan baris kode pada file css kita taruh di paling atas dari kode html kita berikut kodenya Maka sekarang latar belakang website kita sudah mempunyai background seperti terlihat pada gambar berikut :
  24. 24. September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM] 24 Modul kusus gratis webdesign| www.kursuskomputernaura.com Membagi dua bagian Isi menjadi Dua bagian Untuk mempermudah dan menambah fasilitas pada website kita maka kita akan membagi dua halaman isi dari website kita yaitu bagian kira dan kanan misalkan dibagian kiri kita buat menu kedua dari website dan dibagian kanan untuk isi dari artikel kita Nah untuk membuatnya kita tambahkan kode seperti yang terlihat pada gambar Lalu kita buatlah kode cssnya dan sedikit perubahan di class isinya di file style.css kita adapun kodenya seperti yang terlihat pada gambar berikut Maka akan terlihat hasilnya seperti berikut gambar disamping kanan,kemudian kita coba tambahkan lagi div diantara div class isi-kiri untuk membuat wadah menu untuk menu kedua kita berikut contoh kodenya
  25. 25. September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM] 25 Modul kusus gratis webdesign| www.kursuskomputernaura.com Maka akan tampil sebuah menu disamping kiri terlihat seperti gambar, Kemudian kita tambahkan dua buah div lagi untuk membungkus konten artikel disebelah kanan , kodenya bias dilihat seperti dibawah ini : Kemudian tambahkan kode cssnya dan tampilan sesudahnya seperti berikut :
  26. 26. September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM] 26 Modul kusus gratis webdesign| www.kursuskomputernaura.com Untuk membuat isi di bagian beranda anda bisa mengetikkan artikel seperti dimana kita memasukkan gambar pada artikel seperrti yang terlihat pada gambar gambar dengan width/lebar =150 dan height atau tinggi =120 align atau posisi dikiri lihat contoh berikut di bawah ini: Dan bisa dilihat hasilnya seperti gambar dibawah ini : Membuat Yahoo mesengger Setelah selesai sekarang coba kita tambahkan script untuk memunculkan yahoo messenger diweb kita agar pengunjung mudah berkomunikasi dengan kita sebagai pengelola web berikut kodenya
  27. 27. September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM] 27 Modul kusus gratis webdesign| www.kursuskomputernaura.com Membuat facebook like box Membuat facebook like box di website kita caranya cukup mudah syaratnya kita sudah memiliki sebuah akun facebook kemudian pastikan anda sudah login maka ketikkan alamat berikut https://developers.facebook.com/docs/plugins/like-box-for-pages Kemudian ganti urlnya menjadi url profil dari facebook anda setelah selesai klik tombol Get code ,kemudian copy gambar sebelah kanan atas ke awal setelah tag <body> Dan untuk kode yang dibawahnya kita copykan ke div class yang ingin kita tampilkan facebook like box kita lihat contohnya pada gambar Berikut gambar cara menyisipkan kodenya : Kemudian untuk gambar penyisipan kode yang kedua
  28. 28. September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM] 28 Modul kusus gratis webdesign| www.kursuskomputernaura.com Maka akan tampil gambarnya seperti dibawah ini kelihatan lebih menarik kan sekarang websitenya? Membuat link dan menautkannya ke halaman web kita yang lain Pertama tama kita ke editor dreamweaver kita kemudian kita aktifkan tab propertinya caranya lihat pada halaman 11 dan 12 kemudian kita buat link satu persatu untuk setap judul navigasi diweb kita seperti contoh berikut Kata beranda adalah navigasi yang tampil pada menu navigasi sedangkan index.html adalah nama file sebenarnya yang akan dituju Kemudian coba buat lagi untuk link profile lihat contohnya sebagai berikut Nah demikianlah buat satu persatu linknya dengan cara yang sama untuk semua menu navigasi yang sudah kita buat ,dan perlu diperhatikan untuk tulisan link sebaiknya gunakan huruf kecil semua agar nanti tidak keliru saat pemanggilan file dengan file sebenarnya yang akan kita buat berikutnya
  29. 29. September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM] 29 Modul kusus gratis webdesign| www.kursuskomputernaura.com Membuat Halaman-halaman Pelengkap Membuat halaman profile.html Yang dimaksud halaman halaman pelengkap disini adalah halaman profile,produk,portfolio gallery dan kontak,agar link yang sudah kita buat diatas mempunyai keterhubungan.Adapun caranya sangat mudah kita klik file->save as kemudian simpan dengan nama profile.html lihat gambar berikut sebagai contohnya : Kemudian simpan dengan nama profile.html lihat seperti gambar Ketikkan isi dari artikel profil seperti yang terlihat pada gambar disamping kanan atas
  30. 30. September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM] 30 Modul kusus gratis webdesign| www.kursuskomputernaura.com Membuat Halaman Produk Membuat halaman produk Hampir sama dengan dengan membuat membuat halaman profile namun kali ini kita akan melatih kemampuan bermain dengan tag tag pembuat table karena data yang kita buat tersaji dalam bentuk table,baiklah silahkan klik file->save as kemudian simpan dengan nama produk.html,kalaukurang jelas silahkan lihat caranya seperti halaman diatas dan untuk isi dari div class isi kanan ketikkan kode seperti dibawah ini Dan hasilnya bias anda lihat pada gambardibawah ini
  31. 31. September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM] 31 Modul kusus gratis webdesign| www.kursuskomputernaura.com Membuat Halaman Portfolio Untuk membuat halaman portfolio ini sama dengan cara diatas namun kali ini kita akan menambahkan jquery untuk membuat tampilan data yang cantik baiklah ketikkan kode seperti dibawah ini ketikkan kode berikut diantara tag head web perhatikan baris kodenya agar tidak salah paste
  32. 32. September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM] 32 Modul kusus gratis webdesign| www.kursuskomputernaura.com Kalau tidak ada kesalahan maka Akan tampil sebuah lighbox diman saat gambar di klik maka akan membesar seperti gambar dibawah ini
  33. 33. September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM] 33 Modul kusus gratis webdesign| www.kursuskomputernaura.com Membuat Halaman Kontak Pada halaman kontak ini untuk pembuatannya sama seperti pembuatan halaman diatas klik file->save as kemudian simpan dengan nama kontak html Nah jika sudah pada bahasan ini kita akan diasah untuk membuat css untuk mempercantik form dimana form yang tadinya biasa saja menjadi lebih sedap dipandang mata untuk kodenya silahkan lihat gambar berikut Maka akan tampil hasilnya seperti gambar dibawah ini sebuah informasi kontak dan form isian untuk menghubungi admin website
  34. 34. September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM] 34 Modul kusus gratis webdesign| www.kursuskomputernaura.com Kemudian kita akan membuat kode css untuk mempercantik form kita adapun kode lihat pada gambar dibawah ini
  35. 35. September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM] 35 Modul kusus gratis webdesign| www.kursuskomputernaura.com Membuat Halaman Back end (Administrator) Merancang Halaman Login Untuk Membuat halaman Administrator maka kita memerlukan sebuah folder lagi didalam didalam folder project caranya klik kanan pilih new ->new folder berinama administrator lihat seperti gambar : Kemudian buat sebuah file baru dari dreamweaver beri nama index.html dan simpan pada folder administrator,kemudian buat juga sebuah file css berinama login.css simpan pada folder administrator anda seperti terlihat pada gambar disebelah kiri kemudian kita link kan file css dengan index.html kita caranya bisa dilihat di halaman 4 dan hasilnya bias dilihat pada gambar sebelah kanan Kemudian kita ketikkan kode kode div classnya pada dokumen html kita adapun kodenya bias dilihat pada gambar dibawah ini
  36. 36. September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM] 36 Modul kusus gratis webdesign| www.kursuskomputernaura.com Kode HTML nya Kode cssnya hasilnya
  37. 37. September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM] 37 Modul kusus gratis webdesign| www.kursuskomputernaura.com Membuat Halaman Dashboard Nah baru kita membuat halaman dashboardnya,caranya sama kita tambahkan ,sebuah file bernama dashboard.html,kemudian sebuah file css bernama dashboard.css kalau belum jelas atau lupa silahkan lihat di halaman 2 sampai halaman Nah sekarang kita coba mengetikkan kode kode HTML rangkanya dan cssnya berikut contohnya : Kode html Kode cssnya Jika sudah maka preview hasilnya di browser maka akan tampil seperti gambar dibawah ini
  38. 38. September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM] 38 Modul kusus gratis webdesign| www.kursuskomputernaura.com Gambar Layout Halaman Administrator Kemudian kita tambahkan menu spry horizontal pada div class menu untuk caranya bisa dilihat dari halaman 8 sampai dengan halaman 12 atur tampilannya seperti gambar berikut : Kemudian jika sudah selesai maka saatnya kita tambahkan link pada setiap menu navigasi caranya bisa dilihat pada halaman 11 Sampai 12 kemudian kita lanjutkan dengan membuat halaman halaman untuk masing masing menu navigasi kita adapun source codenya bisa dilihat pada gambar dibawah ini caranya tinggal di save as sesuai nama file link yang kita buat lihat gambar
  39. 39. September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM] 39 Modul kusus gratis webdesign| www.kursuskomputernaura.com Membuat halaman beranda Halaman beranda adalah halaman dashboard.html itu sendiri yang membedakan dengan halaman lain adalah isi dari masing masing kontennya Nah mari kita mulai mengetik kode seperti berikut pada tab html source codenya : Dan berikut kode cssnya Dan hasil tampilannya di browser sebagai berikut :
  40. 40. September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM] 40 Modul kusus gratis webdesign| www.kursuskomputernaura.com Membuat Halaman profil pada pembahasan kali ini kita akan menggunakan tag table ,jquery,form dan css untuk mempercantik tampilan form kita baiklah berikut langkah-langkahnya,pada folder administrator copykan dua buah folder dari file materi yang di cd maka tampilannya akan seperti gambar di bawah ini Kalau sudah kita save as halaman dashboard kita yang tadi menjadi profile.html kemudian buka file index html pada folder table ke dreamweavaer untuk lebih jelasnya lihat gambar di bawah ini : Namun sebelumnya kita copykan dulu kode berikut diantara tag headnya file profile.html adapun kodenya bisa dilihat pada folder table index.html kemudian klik kanan dan open with dreamweaver untuk lebih jelasnya lihat gambar di bawah ini
  41. 41. September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM] 41 Modul kusus gratis webdesign| www.kursuskomputernaura.com Copy kodenya dan pindahkan diantara tag head dari file profile.html berikut contohnya : Kemudian tambahkan kode dibawah ini di dalam div class kotak bungkus
  42. 42. September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM] 42 Modul kusus gratis webdesign| www.kursuskomputernaura.com Dan ketik kode berikut setelah kode diatas Pada gambar diatas terdaftar div class tambah data diatas maka kita buatkan kode cssnya seperti berikut : Kemudian kita tambahkan lagi kode untuk mengaktifkan text editor wyswig seperti ms.word untuk mempercantik tampilan textarea adapun kodenya bisa diampil di folder tinymcpuk berikut gambar cara menyematkan nya diantara tag headnya,tempatkan setelah javascript dari tabel
  43. 43. September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM] 43 Modul kusus gratis webdesign| www.kursuskomputernaura.com Kemudian buka file editornya yang terletak didalam folder tinymcpuk kemudian copykan lagi dibawah kode diatas yang sudah dicopykan tadi berikut gambarnya Nah akan tampil sebuah texteditor yang cuantik terlihat seperti gambar berikut
  44. 44. September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM] 44 Modul kusus gratis webdesign| www.kursuskomputernaura.com Membuat Halaman Produk Membuat halaman produk tidak terlalu sulit kita tinggal klik file save as kemudian simpan dengan nama produk.html kemudian kita tambahkan beberapa baris kode pada formnya untuk lebih jelasnya kita lihat kode berikut Maka akan tampil form baru seperti gambar dibawah ini
  45. 45. September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM] 45 Modul kusus gratis webdesign| www.kursuskomputernaura.com Nah sudah selesai halaman produknya sekarang kita akan membuat halaman portfolio untuk Portfolio kita hanya membutuhkan,form input judul,gambar dan keterangan jadi tinggal kita save as portfolio.html dan kita hilangkan dua buah form input yang tidak kita perlukan,sehingga kodenya menjadi seperti berikut Dan hasilnya di browser akan tampak seberti gambar di bawah ini
  46. 46. September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM] 46 Modul kusus gratis webdesign| www.kursuskomputernaura.com Membuat Halaman management kontak Save as halaman produk.html dengan cara file->new ->save as kemudian simpan dengan nama kontak.html dan rubah baris skripnya didalam tag form seperti terlihat pada gambar dibawah ini
  47. 47. September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM] 47 Modul kusus gratis webdesign| www.kursuskomputernaura.com Dan berikut hasil tampilannya di browser Nah demikianlah materi dari webdesign semoga bermanfaat dan bisa memudahkan anda dalam membuat website salam dari kami lembaga computer www.kursusweb.net
  48. 48. September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM] 48 Modul kusus gratis webdesign| www.kursuskomputernaura.com

×