Dreamweaver dan CSS

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

3. Buat sebuah Site Project

a. Klik Menu Site > New Site

b. Ketikkan websiteku pada bagian Site name, dan pada bagian Local Site Folder arahkan
ke server local yang aktif kemudian tekan tombol Save.

c. Pastikan pada Window File sudah keluar struktur foldernya

4. Buat sebuah halaman Html dan simpan dengan nama index.html

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

7. Klik tombol OK.

CSS UNTUK HEADLINE DAN LINK TAG

Heading 1 (H1)
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

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

5. Klik tombol OK.

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

4. Klik tombol OK.

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

PEMBUATAN STRUKTUR DIV

Outercontainer
1. Klik Insert Div Tag yang ada di jendela Insert

2. Ketik outercontainer didalam ID, kemudian tekan tombol New CSS Rule

3. Pada jendela yang muncul klik OK

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

2. Klik Insert Div Tag yang ada di jendela Insert

3. Ketik insetcontainer didalam ID, kemudian tekan tombol New CSS Rule

4. Pada jendela yang muncul klik OK

5. Setting pada kategori Background sesuai dengan gambar dibawah ini.

6. Setting pada kategori Box sesuai dengan gambar dibawah ini.

7. Setting pada kategori Border sesuai dengan gambar dibawah ini.

8. Klik Tombol OK dan OK.

Navcontainer
1. Pastikan outercontainer terseleksi

2. Klik Insert Div Tag yang ada di jendela Insert

3. Ketik navcontainer didalam ID, kemudian tekan tombol New CSS Rule

4. Pada jendela yang muncul klik OK

5. Setting pada kategori Background sesuai dengan gambar dibawah ini.

6. Setting pada kategori Box sesuai dengan gambar dibawah ini.

7. Setting pada kategori Border sesuai dengan gambar dibawah ini.

8. Klik Tombol OK dan OK.

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

3. Pada jendela yang muncul klik OK

4. Setting pada kategori Box sesuai dengan gambar dibawah ini.

5. Setting pada kategori Border sesuai dengan gambar dibawah ini.

6. Klik Tombol OK dan OK.

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

3. Pada jendela yang muncul klik OK

4. Setting pada kategori Box sesuai dengan gambar dibawah ini.

5. Setting pada kategori Border sesuai dengan gambar dibawah ini.

6. Klik Tombol OK dan OK.

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

9. Pada jendela yang muncul klik OK

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.

13. Klik Tombol OK dan OK.

NAVIGASI
1. Seleksi outercontainer

2. Pada bagian Properties klik ikon Bullet List

3. Ketik Menu Home, Product dan About Us

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.

6. Setting pada kategori Type sesuai dengan gambar dibawah ini.

7. Setting pada kategori Block sesuai dengan gambar dibawah ini.

8. Setting pada kategori Box sesuai dengan gambar dibawah ini.

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.

5. Pada kategori Box setting seperti pada gambar dibawah ini.

6. Tekan tombol OK.

7. Pada bagian Properties arahkan ke dropdown class dan pilih floatright

8. Hasil pembuatan tombol signin yang berada disebelah kanan

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.

3. Klik Ok pada jendela yang muncul

4. Pada kategori background, ketik tombol browse dan arahkan ke gambar yang akan dijadikan
gambar hero, dan pada bagian Background-image : pilih no-repeat

5. Klik tombol OK, OK

6. Hasil akhir pembuatan gambar HERO.

HERO TEXT (adalah teks yang ada di dalam gambar hero)

1. Seleksi teks Content for class "hero" Goes Here kemudian pilih ikon Insert Div Tag pada jendela
Insert

2. Buat class dengan nama herotext dan klik tmbol New CSS Rule, klik OK pada jendela yang
muncul

3. Pada kategori Background setting seperti pada gambar dibawah ini

4. Pada kategori Positioning setting seperti pada gambar dibawah ini

5. Klik OK dan OK.

6. Ubah teks Content for class "hero" Goes Here menjadi Belajar Desain Web itu Mudah. Dan
berikan format sebagai Paragraph

7. Klik tombol + pada jendela CSS Style,

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.

11. Klik tombol OK.

12. Hasil pembuatan HEROTEKS

13. Membuat box Heroteks menjadi transparent dengan menambahkan kode berikut ini kedalam
global.css
Opacity:0.5;

14. Hasil penambahan Opacity

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.

15. Hasil akhir pembuatan tombol

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