BAB VI MEMBUAT FRAME

6.1 Membuat Frame dan Frameset

Frame adalah bagian atau lokasi bebas di dalam jendela browser yang menampilkan halaman web berbeda dengan bagian yang lain.

Frameset adalah file HTML yang mengammbarkan layout dan properties , termasuk jumlah frame , ukuran serta penempatan frame dan URL dari masing masing halaman yang pertama kali ditampilkan pada masing masing frame.

Dengan menggunakan Frame sebagai pembagi halaman akan mengurangi beban server dalam enjalankan proses, karena server hanya bekerja sekali saja untuk menampilakan halaman yang permanen. 

6.2 Menambahkan Frameset dari Sample

Cara menampilkan border frame :

Menu View – Visual Aids – Frame Border

Menambah Frame di halaman aktif:

Cara1 : Menu Insert – HTML – Frames – Pilih Frame

Cara2 : Klik Panel Insert di kategory Layout – Klik 

tombol Frames – Pilih salah satu 

Menambah Frame saat pertama kali membuat file baru caranya:

--> File – New – Kategory Framesets – Pilih Framesetnya dan Create

6.3 Membuat Frameset Sendiri

Aktifkan jendela dokumen atau di dalam frame yang akan dipecah.

1. Menu Modify – Frameset.

2. Pilih item:

- Spilt Frame Left, menambah frame baru di sebelah kiri frame yang aktif atau memecah halaman aktif menjadi 2 frame (kanan kiri)

- Split Frame Right, menambah frame baru di sebelah kanan frame yang aktif atau memecah halaman aktif menjadi 2 frame (kanan kiri)

- Split Frame Up, menambah frame baru di atas frame yang aktif atau memecah halaman aktif menjadi 2 frame (atas dan bawah)

- Split Frame Down, menambah frame baru di bawah frame yang aktif atau memecah halaman aktif menjadi 2 frame (atas dan bawah) 

6.4 Memecah,Menghapus dan Mengubah Ukuran Frame

Memecah Frame:

Cara1 : Klik tahan dan geser border di tepi halaman ke tengah halaman di tampilan Design.

Cara2 : Untuk memecah frame menggunakan border frame yang tidak di tepi, gunakan kobinasi Alt dan klik tahan dan geser.

Menghapus Frame :

Klik tahan dan geser border frame ke luar halaman.

Mengubah ukuran frame:

Cara1 : Klik tahan dan geser border frame.

Cara2 : Untuk ukuran yang pasti ketik di properti.

6.5 Menyeleksi Frame dan Frameset

Seleksi frame dapat menggunakan Panel Frames.

Bila terseleksi maka akan ada garis putus putus.

Untuk menampilkan panel frame: 

Menu Windows – Frames atau Shift + F2.

Cara menyeleksi :

- Untuk memilih frame, klik langsung pada kotak frame.

- Untuk memilih frameset, klik border/bingkai di sekeliling frameset.

Cara lain memilih frame tekan Shift + Alt dan klik frame di dalam frame pada tampilan jendela Design.

6.6 Membuka dokumen di dalam Frame

Kita dapat menentukan isi frame dengan menambahkan isi baru ke dalam dokumen atau membuka dokumen yang telah ada ke dalam frame:

1. Tempatkan pointer ke dalam frame.

2. Menu File – Open in Frame.

3. Pilih dokumen.

4. Ok.

6.7 Menyimpan Frame atau Frameset

Sebelum menampilkan di jendela browser , kita harus menyimpannya dahulu:

1. Seleksi Frameset mengunakan Panel Frames

2. Menu File – Save Frameset.

3. Pastikan lokasi penyimpanan.

4. Ketik nama file.

5. Save.

6.8 Menampilkan dan Mengatur Properti Frame

Langkah mengatur properti frame :

1. Seleksi Frame:

Cara1 : Tekan Alt dan klik pada frame di jendela dokumen 

Cara2 : Tampilkan Panel Frames, Klik frame yg diinginkan.

6.9 Menampilkan dan Mengatur Properti Frame

Keterangan properti frame :

Frame Name ,pemberian nama frame sangat penting sbg referensi script dan target link( tidak boleh tanda spasi, titik,minus,harus diawali dengan huruf.

Src, menentukan sumber dokumen frame.

Scroll,menampilkan scroll/batang penggulung frame

No Resize,Menonaktifkan perubahan ukuran frame.

Borders, Mengatur border frame.

Border Color, Mengatur warna border.

Margin Width, Mengatur batas kanan dan kiri.

Margin Height, mengatur jarak margin atas dan bawah 

6.10 Menampilkan dan Mengatur Properti Frameset

Seleksi frameset.

1. Tampilan:

Keterangan:

- Border, mengatur tampilan border frameset.

- Border width, mengatur semua lebar border frameset.

- Border color, mengatur warna border frameset 

- Row, mengatur tinggi baris atau lebar kolom yang dipilih 

- Unit, mengatur lebar/tinggi frameset(satuan)

- RowCol Selection, memilih bagian kolom atau baris dengan klik tabulasinya.

6.11 Membuat Link pada Frame

Seleksi teks atau objek link pada jendela Design.

1. Dengan mengunakan kotak Link pada properti HTML:

Cara1 : Klik Browse to File, pilih file di dia;og Select File.

Cara2 : Klik Point to File, klik tahan dan geser ikon tersebut ke file tujuan link yang terdapat di panel File.

2. Di kotak Target , pilih frae /jendela yangb akan dihubungkan dengan dokumen yang harus ditampilkan.

6.12 Membuat Link pada Frame

Keterangan pilihan dalam kotak target:

- _blank , membuka dokumen yang dihubungkan dala jendale browser , serta membiarkan jendela sebelumnya tetap terbuka.

- _parent , membuka dokumen yang dihubungkan dalam fremeset induk link yang ditampilkan, kemudian mengganti seluruh frame.

- _self , mebuka dokumen yang dihubungkan dengan frame yang sedang dipilih atau aktif yang menjadi lokasi teks link, lalu mengganti isi frame tersebut.

- _top , membuka dokumen yang dihubungkan dalam jendela browser , lalu mengganti seluruh frame.

- Nama nama frame juga ditampilkan pada bagian ini, kita dapat memilihnya untuk membuka dokumen dalam frame tersebut

BAB VII

BEKERJA DENGAN GAMBAR

7.1 Menyisipkan Gambar
Tipe file Gambar :
1. GIF (Graphic Interchange Format). Maks 256 warna.
2. JPEG (Joint Photographic Experts Group).jutaan warna.
3. PNG (Portable Network Group)

Cara Menyisipkan Gambar :
Cara 1 : Panel Insert, klik ikon tombol Image.
Cara 2 : Panel Insert , Klik tahan geser ikon Image ke jendela dokumen.

Cara 3 : Menu Insert – Image.
Cara 4 : Panel Asset – klik tahan dan geser gambar ke dokumen.
Cara 5 : Panel File , klik tahan dan geser gambar.
Cara 6 : Ctrl + Alt + I
Catatan : “Setiap gambar di simpan di Root Site”


7.2 Mengatur Properti Gambar
Panel properties digunakan untuk mengatur seluruh properti gamabar seperti :
- ID, memberi id atau nama objek gambar.
- W dan H, mengisi ukuran lebar dan tinggi gambar.
- Src, tampilkan lokasi penyimpanan file, tentukan gambar
- Link, mengisi link gambar.
- Align, menetukan perataan gambar.
- Alt, menampilkan teks alternatif saat gambar ditampilkan di browser.
- Class, menentukan nama class CSS yang digunakan untuk memformat gambar.
- Map Name, megisi nama area hotspot
- Vspace dan Hspace, menentukan jarak spasi di sekitar gambar

7.3 Mengatur Properti Gambar
- Hotspot tools, membuat area hotspot.
- Target, memilih frame atau dokumen yang harus ditampilkan.
- Border, memasang ukuran border gambar (pixel).
- Edit, mengedit gambar dengan program editor lain.(photoshop)
- Edit Image Setting, mengubah aturan gambar (ukuran tipe gambar)
- Crop, memotong gambar.
- Resample, menampilkan hasil perubahan ukuran gambar dan peningkatan kualitas foto pada ukuran dan jenis.
- Brightness and Contrass, mengatur pencahayaan dan kontras gambar.
- Sharpen, mengatur ketajaman gambar.
- Reset Size, mengembalikan ukuran lebar dan tinggi gambar ke ukuran semula.


7.4 Mengatur Ukuran Gambar
Cara 1 :
- Pilih gambar.
- Pada panel Properties masukan nilai W dan H.

Cara 2 :
- Seleksi gambar.
- Arahkan pointer pada kotak handle.
Tekan Reset Size untuk mengembalikan ukuran semula.

7.4 Memberi Border pada Gambar
Cara membuat border :
1. Pilih gambar.
2. Pada properties beri nilai di kotak Border.
3. Enter.


7.5 Memotong Gambar
Cara cropping :
1. Pilih gambar.
2. Modify – Image – Crop.
3. Atur area cropping.
4. Tekan Enter atau klik ikon Crop lagi.

7.6 Mengatur Ketajaman Gambar
Cara mengatur ketajaman :
1. Pilih gambar.
2. Modify – Image – Sharpen atau klik ikon Sharpen
3. Masukan nilai atau geser slider.
4. Ok.


7.8 Mengatur Brightness dan Contrast
Cara mengatur gelap terang dan kontras:
Pilih gambar.
Modify – Image - Brightness dan Contrast.
Geser slider atau beri nilai. Ok.


7.9 Memberi Link pada Gambar
Cara memberi link pada gambar:
1. Pilih gambar.
2. Isi kotak Link atau mengunakan Point to File.


7.10 Membuat Link dengan Image Map
Image Map adalah suatu gambar yang memiliki daerah tertentu yang dapat diberi link.
1. Pilih gambar.
2. Pada properties klik ikon Hotspot Tool.
3. Seleksi daerah yang ingin di beri link.
4. Masukan file link tujuan.
5. Simpan.

7.11 Menggunakan Rollover Image
Rollover Image digunakan untuk menganti tampilan awal gambar dengan tampilan gambar lain ketika pointer diarahkan pada gambar awal.

1. Aktifkan pointer di dokumen.
2. Klik di panel Insert pilih drop down di Image.
3. Pilih Rollover Image.
4. Isi Original dan Rollover Image.
5. Ok.


7.12 Membuat Swap Image

Behavior Swap Image mempunyai fungsi yang sama seperti Rollover Image, yaitu menganti gambar dengan gambar lain, swap image tidak ditentukan link ke alamat URL sebagai link tujuan.

1. Pilih gambar.
2. Beri ID gambar.
3. Aktifkan panel behavior klik tombol +
4. Pilih gambar penganti di Browse.
5. Ok.



KEMBALI BAB V ===>>> KLIK DISINI <<<===
NEXT PAGE ====>>> KLIK DISINI <<<====