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

48
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

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

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

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

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

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

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

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 :

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

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

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

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 :

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

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 :

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

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

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

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 :

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

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

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

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

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

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 :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 :

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

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

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

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 :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM]

36 Modul kusus gratis webdesign| www.kursuskomputernaura.com

Kode HTML nya

Kode cssnya

hasilnya

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

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

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

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

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

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 :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

September 23, 2014 [MODUL KURSUS WEBDESIGN WWW.KURSUSKOMPUTERNAURA.COM]

48 Modul kusus gratis webdesign| www.kursuskomputernaura.com