MEMAHAMI
COMPONENT DAN CONTEN PADA WEBSITE
Langsung
saja ya … jangan bertele tele
Langkah pertama
buka dreamwaver kalian
Klik html
pada bagian bar atas :
Kemudian munculah tampilan
dreamwaver sebagai berikut
Kemudian
buat table dengan row isi dengan 3 dan colom isi 1 lihat pada contoh berikut :
Insert table
pada bar dengan type commond
Setelah selesai
klik tombol okkk
Kemudian
minimize dreamwaver masuk pada photoshop dan di row pertama kita akan membuat
header supaya mempercantik header kalian ikuti tutorial nya
Sesudah masuk pada photoshop klik
file =è>
new isi preset dengan custom dan size width isi dengan = 1024 dan height = 200
Kemudian
kalian main dengan imginasi kalian untuk mendesain header nya kalian bisa
gunakan gradsi tool dan masking gambar
Okkk saya
ajarin dehh >>>
Create new
layer pada bar properties
Kemudian dengan menkan g pilih
gradasi dengan warna yang kalian inginkan ,kemudian drag diatas layer tersebut
dan kasih text contoh nya rpl 3
Kemudian
pilih open dan import gambar
Setealah
itu drag gambar pada layer banner contoh nya seperti berikut
Klik add
layer mask pada layer 2 kemudian dengan menekan tool gradasi atau hurup sorot
drag gambar seperti berikut:
Add masking tool
Setelah berhasil
save gambar berikut dengan type jpg .AWAS jangan lupa kalia bikin folder dengan
nama kalian masing masing dan dan di dalam folder berikut bikin lagi folder
denggan nama images
Okk
sudah kan …..
Sekarang
buka lagiiii dreamwaver nya ,kemaudian pada row pertama pilih insert
>>> images >> dan pilih
gmabar didalam folder kalian ..ok cuyyy
Maka hasilnya
eperti berikut :
Images
Setelah itu
kalian table dio row kedua dengan row 1 dan colomb 4 guna buat menunya
Inget row
kedua yaaaa row
=1 colomb =4
Klik ok
.. setelah itu ketik dimasing masing kolom
home ===== about us ====== gallery === contact
Lihat seperti contoh berikut …. Kemudian
jangan lupa di alighment klik yang tengah … setelah selesai tulis ini adalah
halaman home di row ketiga
Klik save
as simpan di folder kalian yang telah dibuat jangan lupa simpen nya di luar
folder images ..simpan dengan nama index…..
Coba kalian
run dengan menekan tombol F 12
Setelah selasai blok tulisan home pada kolom ke
2 dan kemudian kalian ketik di link yanga ada dibawah bar
Dengan
nama index.html…
Setelasi
selasai tekan enter … ter..ter..ter
Okkk kemudan
save …
Kemudian
di kolom about us kalian blok text about us .. isi link dibawah seperti gambar
di atas tapi dengan nama aboutus.html .
…
lakukan langkah yang sama pada gallery dan contact … ok coyyy paham kann …………..
Setelah selesai
semua .. kalian save dan preview maka ketika diklik about us maka tampilan nya
seperti ini :
Waduhhhhhhhhhhhh
ko begini …. Santai browwwwwwwwwwwww ……..kalain belum membuat konten nya brow …
Ok buat
satu persatu konten nya .. jklik file kemudian save as dengan nama aboutus
extensinya harus sama dengan konten yang ada di daftar link
Aboutus.html
Setelah selesai kemudian kalian rubah text yang ada pada row
ke 3 dengan text ini halaman about us
Septt…. Kemudian tekan
control + s atau save dan coba run maka hasilnya ketika kalik klik about us
maka akan muncul seperti berikut
About us
Lakukan hal
yang sama pada seperti diatas pada gallery dan contact .. save us beri nama gallery
.dan rumbah text nya semau kalian .. kemudian save .. dan save us lagi beri
nama contact . rubah text nya …
kemudian save .. kemudian run lihat hasilnya
GAMPANG
KANNNNNNNNNN
Berarti
kalian sudah benar benar paham tentang membuat content pada web statis ..oleh
karena itu lanjutkan download file nya untuk melanjutkan modul bagian 2
mendesain tombol
perlu diingat kalian harus
bisa mengembangkan potensi kalian drai materi yang diajar kan ok
