materi pertama buat web statis

Modul 1

download tutorial lengkapnya disisni 

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

 Buat new layer

 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