Bekerja dengan file dan desain web

Presentasi berjudul: "Bekerja dengan file dan desain web"— Transcript presentasi:

1 Bekerja dengan file dan desain web
Pertemuan 3 Bekerja dengan file dan desain web

2 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 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.

4 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

5 Memberi judul Cara1: Di page properties , masuk ke Title/Encoding
Ketik judul di Title. Cara2 : Menu View, Head Conten, klik ikon title. Cara3 : - Bagian bar Document langsung ketik judulnya di Title.

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

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

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

9 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.

10 Ukuran margin halaman Cara : Masuk ke Page Properties.
Pilih Tab Appearance. Isi kotak Margin: Left margin, Top Margin Right Margin Bottom Margin.

11 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.

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

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

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

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

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

17 Mengatur perataan teks
Cara1: Seleksi text. Menu Format – Align. Pilih jenis perataan. Cara2 : Klik tombol CSS pada panel Properties Pilih jenis Ratanya.

18 Mengatur style teks Cara : Menu Format – Style . Pilih format : Bold
Italic Underline Striketrhough, memberi efek coret pada teks. Teletype, meberi efek seperti pada teks telegram Emphasis, efek penekanan/penegasan. Strong, memberi efek tebal.

19 Memilih bentuk paragraf
Cara : Seleksi teks. Menu Format – Paragraph Format. Pilih salah satu format. Cara lain: Klik tombol HTML pada panel Properties Pilih format. Keterangan: Paragraph, untuk mengatur jarak antar paragrap teks ataupun objek. Heading, memiliki tatanan tabel dengan ukuran tertentu sesuai dengan heading yang dipilih. Preformatted, menampilkan teks tanpa mengabaikan white space/ spasi dan menggunakan font default monospace.

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

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

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