Karyagata 2016
Kebomas Gresik
085730037200
PERSIAPAN
1. Pastikan sudah menginstall WEBSERVER
2. Buat sebuah Folder dengan nama Websiteku dan 2 Folder didalamnya yaitu assets dan css
b. Ketikkan websiteku pada bagian Site name, dan pada bagian Local Site Folder arahkan
ke server local yang aktif kemudian tekan tombol Save.
5. Pastikan File Index.html ditempatkan pada folder websiteku dan ubah Title/judul nya dengan
Website Pertamaku
PEMBUATAN CSS
CSS UNTUK BODY TAG
1. Klik tanda + pada candela CSS Style
2. Pada bagian New CSS Rule setting seperti pada gambar dibawah ini kemudian tekan tombol OK.
3. Simpan dengan nama global.css dan pastikan tersimpan didalam folder css yang sudah dibuat
sebelumnya.
4. Setting CSS untuk katergori Type seperti pada gambar dibawah ini
5. Setting CSS untuk katergori Background seperti pada gambar dibawah ini, pilih tombol Browse
dan cari gambar. Untuk gambar background sudah disediakan pengajar
6. Setting CSS untuk katergori Box seperti pada gambar dibawah ini
2. Pada bagian New CSS Rule setting seperti pada gambar dibawah ini kemudian tekan tombol OK.
3. Setting CSS untuk katergori Type seperti pada gambar dibawah ini
Heading 2 (H2)
1. Klik tanda + pada candela CSS Style
2. Pada bagian New CSS Rule setting seperti pada gambar dibawah ini kemudian tekan tombol OK.
3. Setting CSS untuk katergori Type seperti pada gambar dibawah ini
4. Setting CSS untuk katergori Box seperti pada gambar dibawah ini
LINKS
1. Klik tanda + pada candela CSS Style
2. Pada bagian New CSS Rule setting seperti pada gambar dibawah ini kemudian tekan tombol OK.
3. Setting CSS untuk katergori Type seperti pada gambar dibawah ini
CLASS
1. Klik tanda + pada candela CSS Style
2. Pada bagian New CSS Rule setting seperti pada gambar dibawah ini kemudian tekan tombol OK.
5. Setting CSS untuk katergori Type seperti pada gambar dibawah ini
6. Tambahkan kode seperti pada gambar dibawah ini pada file global.css
2. Ketik outercontainer didalam ID, kemudian tekan tombol New CSS Rule
4. Setting pada kategori Box sesuai dengan gambar dibawah ini, kemudian tekan OK. Akan dibawa
kembali ke jendela awal, langsung saja klik OK.
Insetcontainer
1. Pastikan outercontainer terseleksi
3. Ketik insetcontainer didalam ID, kemudian tekan tombol New CSS Rule
Navcontainer
1. Pastikan outercontainer terseleksi
3. Ketik navcontainer didalam ID, kemudian tekan tombol New CSS Rule
Header
1. Klik Insert Div Tag yang ada di jendela Insert
2. Pada Kotak Insert pilih After Tag, dan <div id=navcontainer. Ketik header didalam ID,
kemudian tekan tombol New CSS Rule
Content
1. Klik Insert Div Tag yang ada di jendela Insert
2. Pada Kotak Insert pilih After Tag, dan <div id=header. Ketik content didalam ID, kemudian
tekan tombol New CSS Rule
Footer
7. Klik Insert Div Tag yang ada di jendela Insert
8. Pada Kotak Insert pilih After Tag, dan <div id=content. Ketik footer didalam ID, kemudian
tekan tombol New CSS Rule
10. Setting pada kategori Background sesuai dengan gambar dibawah ini.
11. Setting pada kategori Box sesuai dengan gambar dibawah ini.
12. Setting pada kategori Border sesuai dengan gambar dibawah ini.
NAVIGASI
1. Seleksi outercontainer
4. Pastikan kursor berada dalam menu-menu yang sudah dibuat sebelumnya, klik tanda + pada
jendela CSS Styles
5. Pada jendela yang muncul setting seperti pada gambar dibawah ini. Kemudian klik tombol OK.
KONTEN GAMBAR
GAMBAR LOGO
1. Seleksi Content for id "header" Goes Here, kemudian hapus.
2. Klik ikon image yang ada di jendela Insert
3. Pada jendela yang muncul, arahkan ke gambar logo yang mau dimasukkan. Gambar sudah
disediakan pengajar.
GAMBAR SIGNIN
1. Pastikan kursor masih di depan logo.
2. Klik ikon image yang ada di jendela Insert
3. Pada jendela yang muncul, arahkan ke gambar signin yang mau dimasukkan. Gambar sudah
disediakan pengajar.
4. Pastikan gambar signin masih terpilih, buat sebuah class dengan nama floatright dan tekan
tombol OK.
GAMBAR HERO (gambar hero adalah gambar besar yang ada di dalam website)
1. Ubah isi Blok content dengan tulisan web desain dg css seperti pada gambar dibawah ini,
gunakan H1 (Heading1) sebagai formatnya.
2. Untuk membuat gambar HERO Letakkan kursor di depan tulisan tersebut. Kemudian klik ikon
Insert Div Tag yang ada di jendela insert dan buat sebuah class dengan nama hero dan klik
tombol New CSS Rule.
4. Pada kategori background, ketik tombol browse dan arahkan ke gambar yang akan dijadikan
gambar hero, dan pada bagian Background-image : pilih no-repeat
2. Buat class dengan nama herotext dan klik tmbol New CSS Rule, klik OK pada jendela yang
muncul
8. Pada bagian selector klik tombol Less Spesific untuk mengurangi struktur selector sehingga akan
tampak seperti pada gambar dibawah ini dan klik tombol OK.
9. Pada bagian kategori Type setting seperti pada gambar dibawah ini.
10. Pada bagian kategori Box setting seperti pada gambar dibawah ini.
13. Membuat box Heroteks menjadi transparent dengan menambahkan kode berikut ini kedalam
global.css
Opacity:0.5;
15. Biar gambar dapat 100% menyesuaikan besarnya layar harus menambahkan kode berikut
kedalam global.css
background-size:100% auto;
KONTEN KOLOM
1. Pastikan kursor berada di depan </div> dibawah <p>Belajar Desain Web itu Mudah</p> (lihat
anak panah)
2. Masukkan Div Tag baru dengan nama story, kemudian tekan tombol New CSS Rule, klik OK
untuk jendela yang keluar.
3. Pada bagian Kategori Box setting seperti pada gambar dibawah ini
4. Klik OK dan OK
5. Ubah isi dari Div story dengan isi yang di inginkan misalnya seperti pada gambar dibawah ini.
6. Buat tombol Selengkapnya; pastikan kursor berada dibagian paling bawah dari teks yang sudah
dibuat. Kemudian klik ikon Insert Div Tag, dan berikan nama class nya tombol kemudian tekan
tombol New CSS Rule. Klik OK pada jendela yang muncul.
7. Pada bagian Kategori Background setting seperti pada gambar dibawah ini.
8. Pada bagian Kategori Block setting seperti pada gambar dibawah ini.
9. Pada bagian Kategori Box setting seperti pada gambar dibawah ini.
10. Klik OK dan OK. Dan ubah isinya dengan teks Tombol
11. Membuat lengkung disemua sisi tombol, dengan cara menambahkan kode border-radius:8px;
kedalam global.css lihat gambar dibawah untuk lebih jelas.
12. Mengubah hover link tombol menjadi putih; letakkan kursor di teks tombol, kemudian klik tanda
+ pada jendela CSS Style
13. Klik tombol Less Specific sehingga dalam kotak Selector Name hanya tersisi .tombol a; kemudian
tekan tombol OK
14. Pada kategori Type setting seperti pada gambar dibawah ini.
16. Perbanyak Div story sebanyak 3 buah dengan cara menduplikasi kodenya, lihat gambar dibawah
ini untuk lebih jelas.
Sebelum diperbanyak
Sesudah diberbanyak
17. Ubah isi hasil duplikasi kolom dengan isi teks yang lainya
18. Membuat Tag Div dengan nama clear, tujuannya untuk memberikan jarak antara div story
dengan div footer. Pastikan kursor sudah berada dipaling ujung div story yang ketiga. Klik ikon
Insert Div Tag dan isikan dengan nama class nya clear; kemudian klik tombol New CSS Rule.
19. Pada kategori Box isikan setting seperti pada gambar dibawah ini.
20. Klik tombol OK dan OK dan hapus teks Content for class "clear" Goes Here
21. Hasil akhir pembuatan Div story
22. Hapus teks Content for id "footer" Goes Here dan gantikan dengan Copyright websiteku.com
2016