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

Mari kita lihat gambar berikut :
Kemudian klik dua kali tulisan html maka akan dibuatkan kode kode standar
sebuah html gambarnya seperti berikut

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 :

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

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 :

Nah berikut hasil tampilanya di dreamweaver cara nya klik tab design seperti pada
gambar untuk melihat hasilnya
Berikut hasilnya di tab design :

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

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 :

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

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

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 :

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

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

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

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

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

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

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

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

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

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

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

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 :

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

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 :

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

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

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

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

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

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

Kalau tidak ada kesalahan maka Akan tampil sebuah lighbox diman saat gambar
di klik maka akan membesar seperti gambar dibawah ini

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

Kemudian kita akan membuat kode css untuk mempercantik form kita adapun
kode lihat pada gambar dibawah ini

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

Kode HTML nya
Kode cssnya
hasilnya

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

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

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 :

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

Copy kodenya dan pindahkan diantara tag head dari file profile.html berikut
contohnya :
Kemudian tambahkan kode dibawah ini di dalam div class kotak bungkus

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

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

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

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

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

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

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

More Related Content

What's hot

Viewers also liked

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

Recently uploaded

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