BAB III BEKERJA DENGAN FILE DAN DESAIN WEB

3.1 Beberapa type file
- CSS, (Cascading Style Sheet) ekstensi .css . Untuk format isi HTML dan mengendalikan posisi berbagai unsur unsur halaman.
- GIF (Graphics Interchange Format) ekstensi .gif .Untuk kartun, logo, grafis, area trasparan, dan animasi. Memiliki maksimum 256 jenis warna.
- JPEG (Joint Photographic Experts Group) ekstensi .jpg . Untuk foto dan gambar dengan kualitas warna tinggi, mengatasi untuk 256 jenis warna.
- XML (Extensibel Markup Language) ekstensi .xml . File ini berisi data di dalam suatu form mentah yang dapat diformat dengan menggunakan XSL.
- XLS (Extensibel Stylesheet Language) ekstensi .xsl atau .xslt . Untuk tipe data XML yang akan ditapilkan di halaman web
- CFML (ColdFusion Markup Language) ektensinya .cfm . Untuk halaman dinamis
- PHP (Hypertext Preprocessor) ektensinya .php . Untuk halaman dinamis


3.2 Layout css menyediakan kolom
- Fixed, lebar kolom telah ditetapkan dala satuan pixel. User tidak bisa merubah di browser.
- Elastic, Lebar kolom ditetapkan berdasarkan suatu unit pengukuran (ems) yang sesuai dengan ukuran teks. Desain akan menyesuaikan jika pengunjung merubah setting teks tanpa merubah ukuran dasar jendela browser.
- Liquid, Lebar kolom ditetapkan berdasarkan persentasi dari lebar browser pengunjung site. Desain akan menyesuaikan mengubah browser menjadi panjang pendek tanpa mengubah setting teks.
- Hybrid, Kolo kombinasi dari tiga pilihan sebelumnya.


3.3 Page properties
Cara 1: Cara 2:
- Menu Modify - Ctrl + J
- Page Properties

Ada 6 Kategory:

Apperance(CSS), mengatur properties halaman menggunakan bahasa css. Apperance(HTML), mengatur properties halaman dalam bentuk kode html. Links (CSS), menentukan font,ukuran,warna links. Heading (CSS), menentukan style untuk teks naskah. Title/Encoding, untuk mengisi judul. Tracing Image, menampilkan gambar sementara pada latarbelakang 

3.4 Memberi judul
Cara1:
- Di page properties , masuk ke Title/Encoding
- Ketik judul di Title.

Cara2 :
- Menu View, Head Co

nten, klik ikon title.
- Ketik judul di Title.

Cara3 :
- Bagian bar Document langsung ketik judulnya di Title.

3.5 Background gambar
Cara :
- Masuk ke Page Properties.
- Pilih Tab Appearance(HTML) atau (CSS).
- Browse bagian Backgroung Image.
- Pilih, OK.
- Apply.

3.6 Background warna
Cara :
- Masuk ke Page Properties.
- Pilih Tab Appearance.
- Klik menu drop-down pada bagian Backgroud Color.
- Pilih warna.

3.7 Mengatur warna teks

Cara :
- Masuk ke Page Properties.
- Pilih Tab Appearance.
- Klik menu drop-down pada bagian Text Color.
- Pilih warna.

3.8 Mengatur warna link
Cara :
- Masuk ke Page Properties.
- Pilih Tab Links.
Ada pilihan:
- Links Color, warna semua teks yang ada link.
- Visited Links, warna pada link yang sudah pernah dikunjungi
- Active Links, warna pada saat link saat di masih tekan.
- Rollover Links, warna yang digunakan saat pointer melewati link tersebut.

3.8 Ukuran margin halaman
Cara :
- Masuk ke Page Properties.
- Pilih Tab Appearance.
- Isi kotak Margin:

1. Left margin,
2. Top Margin
3. Right Margin
4. Bottom Margin.

3.9 Menyisipkan karakter khusus

Cara1 :
- Menu Insert – HTML - Special Character.
- Pilih karakter khusus.

Cara2 :
- Klik Insert di panel group, ganti kategory menjadi Teks.
- Pilih karakter khususnya.

3.10 Menambah tanggal
Cara:
- Taruh Pointer di objek.
- Menu Insert – Date.
- Pilih Format.
- Centang “Update Automatically on Save”
- Ok

3.11 Menyisipkan garis horizontal
Cara :
- Taruh Pointer di objek.
- Pilih menu Insert.
- HTML
- Horizontal Rule

3.12 Mengatur format/font huruf
Cara :
- Seleksi teks.
- Menu Format – Font.
- Plih Font.
- Ok.


3.13 Mengatur warna
Cara :
- Selesi teks yang akan dirubah.
- Menu Format – Color.
- Pilih warna, Ok.

3.14 Mengubah ukuran
Cara :
- Seleksi teks.
- Klik CSS pada panel Properties
- Size
- Pilih ukuran.

3.15 Mengatur perataan teks
Cara1:
- Seleksi text.
- Menu Format – Align.
- Pilih jenis perataan.

Cara2 :
- Seleksi text.
- Klik tombol CSS pada panel Properties
- Pilih jenis Ratanya.


3.16 Mengatur style teks
Cara :
- Menu Format – Style .
- Pilih format :
1. Bold
2. Italic
3. Underline
4. Striketrhough, memberi efek coret pada teks.
5. Teletype, meberi efek seperti pada teks telegram
6. Emphasis, efek penekanan/penegasan.
7. Strong, memberi efek tebal.

3.17 Memilih bentuk paragraph
Cara :
- Seleksi teks.
- Menu Format – Paragraph Format.
- Pilih salah satu format.

Cara lain:
- Klik tombol HTML pada panel Properties
- Pilih format.
Keterangan:
1. Paragraph, untuk mengatur jarak antar paragrap teks ataupun objek.
2. Heading, memiliki tatanan tabel dengan ukuran tertentu sesuai dengan heading yang dipilih.
3. Preformatted, menampilkan teks tanpa mengabaikan white space/ spasi dan menggunakan font default monospace.

3.18 Mengatur identasi teks
Merupakan jarak teks / paragraf dari tepi halaman.
Cara :
- Seleksi paragraf.
- Menu Format - Indent
Untuk menghapus / menghilangkan :
- Menu Format - Outdent

3.19 Membuat list
Cara :
- Tempatkan kursor di area kerja
- Menu Format – List
- Pilih :
1. Ordered List , List atau daftar yang memiliki urutan, bisa berupa angka, huruf atau romawi.
2. Unordered List, List yang tidak memiliki urutan, dapat berupa linkaran hitam/putih, kotak.
- Untuk mengakhiri list enter dua kali

3.20 Mengatur properties list
Cara :
- Menu – Format - List – properties
- Pilih type dan style.
- Ok.

KEMBALI BAB II ===>>> KLIK DISINI <<<===

NEXT PAGE ====>>> KLIK DISINI <<<====