MODUL VI, WEB 1

BEKERJA DENGAN FRAME
 

1.      TUJUAN
Mahasiswa mampu membuat frame dan mengatur bagian dalam frame untuk ditampilkan dalam dokumen web sehingga ada keterkaitan antara satu frame dengan grame lainnya. Dengan demikian frame tersebut dapat dimanfaatkan sebagai media link yang sangat menarik.
2.      TEORI SINGKAT
         Format baku pembuatan frame adalah
        

                                            

3.      PRAKTEK
Terlebih dahulu dalam praktek ini kita harus membuat web-web yang akan dipasangkan dalam frame yang kita buat ini. Setidaknya kita perlu membuat web untuk ditampilkan pada frame atas, kiri, tengah, kanan dan bawah karena kita akan membuat tampilan web beberapa macam. Ada yang terbagi menjadi 2 bagian, ada yang menjadi 3 bagian  (ada yang kiri kanan, ada juga yang atas bawah) dan ada yang  sekaligus menjadi empat bagian. Untuk mencoba kita cukup membuat web yang sederhana-sederhaa saja agar cepat dan mudah.
Simpan dengan nama Frame_kiri.html

Frame Kiri

Simpan dengan nama Frame_tengah.html

Frame Tengah

Simpan dengan nama Frame_kanan.html

Frame Kanan

Membuat frame vertical
Di bawah ini adalah cara membuat frame menjadi tiga bagian secara vertical. Sangat sederhana dan mudah sekali. Tidak perlu membuat head dan title termasuk body cukup dengan html saja serta satu script frameset. Kita dapat mengetahui bahwa frame tersebut terbagi secara vertical atau secara horizontal dapat melihat dari tag setelah frameset tersebut. Kita lihat di sini ada tag cols=”20%,50%,30%”. Ini berarti bahwa layar web akan terbagi secara vertikal dari statemen cols sebanyak 3 buah karena disitu tertulisa sama dengan 20%,50% dan 30%. 205 menyatakan kolom paling kiri/frame paling kiri besarnya 20%, frame tengah sebesar 50% dan frame paling kanan 30%. Selanjutnya untuk mengisi frame-frame yang sudah kita buat kita masukkan taq frame src=”alamat web.html” yang menjadi pengisi frame. Sudah, selesai. Cukup mudah kan?
Beri nama frame_cols.html

            <frame src="frame_tengah.html”>      

Pada frame yang kita buat di bawah ini membagi secara vertikal layar dengan lebar dalam ukuran pixel bukan % (persentase) sebagaimana contoh di atas. Dengan frameset cols=”200,*” artinya bahwa frame sebelah kiri lebar 200 pixel dan bintang ”*” berarti sisa dari 100% atau sebesar 824 pixel untuk komputer yang menggunakan layar 1024, menjadi frame yang kedua. Namun ada kalanya suatu web tidak di vew secara maksimal sehingga dengan pembagian pixel ini akan memathok frame bagian kiri tidak berubah sama sekali. Jika dalam prosentase maka secara automatic frame akan mengalami penciutan ketika windows web browser kita kecilkan secara manual.  Inilah kiranya agar kita cukup jeli dalam menentukan harus menggunakan ukuran prosen atau pixel. Apabila web ini kita coba maka frame sebelah kiri tidak akan mengalami penciutan ketika window web browser kita besar kecilkan.
Memberi nama dengan frame_lain.html
     

                 

Sebelum kita mengeksekusi web di atas terlebih dahulu kita harus membuat satu web yang akan kita load pada frame kiri dengan nama link_frame.html sebagaimana kita lihat di atas sudah kita isikan nama pada framse src=”link_frame.html”. Dan inilah yang perlu dijelaskan khusus pada frame kedua dimana ada pernyataan name=”showframe”. Taq ini mempunyai arti sebagai inisial bahwa link-link yang akan diciptakan dalam web link_frame.html di bawah ini akan mengarah ke frame kedua tersebut. Wal hasil apabila link pada frame sebelah kiri tersebut di klik maka pada frame sebelah kanan akan menampilkan hasil dari link. Namun kita perlu menambahkan satu perintah agar link tersebut mengarah pada frame yang tertulis inialisasi name, yaitu dengan taq target=showframe. Yang mengartikan bahwa link yang diciptakan akan mengarah kepada inisialisasi frame yang sudah dibuat.
Memberi nama dengan link_frame.html
<html>
      Frame Kiri
      Frame Tengah
      Frame Kanan
LATIHAN:
Dapat kita perhatikan pada seting frame di bawah ini, dengan mengubah cols menjadi rows akan mengubah seting tampilan pembagian frame menjadi horizontal sebagaimana di bawah. Prosentase yang pertama yaitu 20% menjadi frame paling atas, kemudian prosen kedua yaitu 50% menjadi frame tengah dan frame ke tiga yang terletak dipaling bawah sebesar 30%.
Beri nama frame_rows.html

                  -0

Memodifikasi latihan target frame menjadi vertical.
Dengan satu contoh lagi diharapkan kita dapat memahami secara penuh fungsi frameset cols dan rows. Sehingga pada saat kita diminta untuk membuat frame kombinasi dapat melakukannya dengan baik dan benar. Sebagaimana pada tugas di bawah ini, kita harus membuat frame dengan konsep kombinasi antara cols dan rows. Dengan membuat model frameset rows pertama kali dan dengan indikator ”20%,50% dan 30%. Kemudian frame yang tengah dipecah lagi dengan frameset cols=”200,*”. Ini artinya frame mengalami kombinasi,di suatu frame ada frame lagi. Pada frame tengah dibuat lagi satu frame pemecah, sehingga nanti dapat kita saksikan dalampengerjaan tugas. Bagaimana suatu frame dipecah lagi menjadi frame yang lain.
Berinama frame_lain2.html
     

<frameset font-size:10.0pt;font-family:"courier="" mso-bidi-font-family:"times="" new";="" new="" roman""="" rows="100,*                  

TUGAS:
Yang pertama kita lakukan adalah membuat web sebanyak yang ingin kita tampilkan, yaitu:
o   frame_header.html
o   frame_footer.html
o   frame_midle.html
o   frame_midle1.html
o   frame_midle2.html
o   frame_midle3.html
o   klik_link.html
o   frame_tugas.html
Frame_tugas.html merupakan induk frame, atau dimana halaman web diformat menjadi frame. Sedangkan frame_header.html diletakkan pada frame pertama bagian atas, kemudian frame_midle.html sampei frame_midle3.html adalah web yang akan dilinkkan pada frame tengah. Klik_frame.html adalah file web yang digunakan untuk  memanggil halaman frame yang akan diletakkan di tengah yaitu frame_midle.html s/d frame_midle3.html dan ini diletakkan di frame sebelah kiri tengah. Yang terakhir adalah halaman web frame_footer.html yang diletakkan di frame paling bawah. Ketika kita mengklik Link1 pada menu di tengah kiri maka gambar animasi akan berubah sesuai target yang ditentukan, sampai kepada Link4.
Untuk sintaknya tidak perlu kita bahas karena sudah kita bahas pada awal laporan praktikum ini. Untuk itu coba simak pembuatan tugas berikut ini.
Simpan dengan nama frame_header.html

Header

Simpan dengan nama frame_midle.html

Gambar Animasi

Simpan dengan nama frame_footer.html

Footer

Simpan dengan nama kiri_link.html
Silahkan anda Pilih:

  • Link 1
  • Link 2
  • Link 3
  • Link 4
  • Simpan dengan nama frame_midle.html

    Gambar Animasi

    Simpan dengan nama frame_midle1.html

    Gambar Animasi

    Simpan dengan nama frame_midle2.html

    Gambar Animasi

    Simpan dengan nama frame_midle3.html

    Gambar Animasi

    Simpan dengan nama frame_tugas.html

         

         

         

         

    KESIMPULAN:
    ·         Dengan frame kita dapat membagi tampilan layar web menjadi terbagi dalam beberapa bagian yang berbeda.
    ·         Degan frame tampilan lebih menarik dan hidup karena kita dapat memunculkan web dalam frame yang kita tentukan dengan mengambil frame lain sebagai media pemanggilan, wal hasil pengguna merasa nyaman tidak berlu bolak-balik untuk mencari web pemanggil pada saat membutuhkan link yang diinginkannya.
    ·         Dalam membuat frame hampir semudah dalam membuat tabel bahkan saat kita praktekkan jauh lebih mudah. Dan ini merupakan web rangkumen dimana web-web lain dapat dimasukkannya untuk dianggap sebagai window dari suatu kerangka yang lebih besar.
    ·         Dalam menggunakan ukuran frame (% atau pixel) kita dapat merandang berdasarkan dari kemungkinan web tersebut diakses oleh para penikmat internet, apakah besar kemungkinan akan mengalami proses dibesar kecilkan atau tidak. Jika sering alangkah baiknya agar web utama tidak terpengaruh maka diset dengan ukuran pixel.

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s