MODUL VI, WEB 1

BEKERJA DENGAN FRAME
 

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

                                            

3.      PRAKTEK
Terlebih dahulu dalam praktek ini kita harus membuat web-webyang akan dipasangkan dalam frame yang kita buat ini. Setidaknya kita perlumembuat web untuk ditampilkan pada frame atas, kiri, tengah, kanan dan bawahkarena kita akan membuat tampilan web beberapa macam. Ada yang terbagi menjadi2 bagian, ada yang menjadi 3 bagian  (adayang kiri kanan, ada juga yang atas bawah) dan ada yang  sekaligus menjadi empat bagian. Untuk mencobakita 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 tigabagian secara vertical. Sangat sederhana dan mudah sekali. Tidakperlu membuat head dan title termasuk body cukup dengan html saja serta satuscript frameset. Kita dapatmengetahui bahwa frame tersebut terbagi secara vertical atau secara horizontaldapat melihat dari tag setelah frameset tersebut. Kita lihat di sini ada tagcols=”20%,50%,30%”. Ini berarti bahwa layar web akan terbagi secara vertikaldari statemen cols sebanyak 3 buah karena disitu tertulisa sama dengan 20%,50%dan 30%. 205 menyatakan kolom paling kiri/frame paling kiri besarnya 20%, frametengah sebesar 50% dan frame paling kanan 30%. Selanjutnya untuk mengisiframe-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”>     

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

                 

Sebelum kita mengeksekusi web di atas terlebih dahulukita harus membuat satu web yang akan kita load pada frame kiri dengan namalink_frame.html sebagaimana kita lihat di atas sudah kita isikan nama padaframse src=”link_frame.html”. Dan inilah yang perlu dijelaskan khusus padaframe kedua dimana ada pernyataan name=”showframe”. Taq ini mempunyai artisebagai inisial bahwa link-link yang akan diciptakan dalam web link_frame.htmldi bawah ini akan mengarah ke frame kedua tersebut. Wal hasil apabila link padaframe sebelah kiri tersebut di klik maka pada frame sebelah kanan akanmenampilkan hasil dari link. Namun kita perlu menambahkan satu perintah agarlink tersebut mengarah pada frame yang tertulis inialisasi name, yaitu dengantaq target=showframe. Yang mengartikan bahwa link yang diciptakan akan mengarahkepada 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 framemenjadi horizontal sebagaimana di bawah. Prosentase yang pertama yaitu 20%menjadi frame paling atas, kemudian prosen kedua yaitu 50% menjadi frame tengahdan frame ke tiga yang terletak dipaling bawah sebesar 30%.
Beri nama frame_rows.html

                  -0

Memodifikasi latihan target framemenjadi vertical.
Dengan satu contoh lagi diharapkan kita dapat memahamisecara penuh fungsi frameset cols dan rows. Sehingga pada saat kita dimintauntuk membuat frame kombinasi dapat melakukannya dengan baik dan benar.Sebagaimana pada tugas di bawah ini, kita harus membuat frame dengan konsepkombinasi antara cols dan rows. Dengan membuat model frameset rows pertama kalidan dengan indikator ”20%,50% dan 30%. Kemudian frame yang tengah dipecah lagidengan frameset cols=”200,*”. Ini artinya frame mengalami kombinasi,di suatuframe ada frame lagi. Pada frame tengah dibuat lagi satu frame pemecah,sehingga nanti dapat kita saksikan dalampengerjaan tugas. Bagaimana suatu framedipecah 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:
Yangpertama 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 dimanahalaman web diformat menjadi frame. Sedangkan frame_header.html diletakkan padaframe pertama bagian atas, kemudian frame_midle.html sampei frame_midle3.htmladalah web yang akan dilinkkan pada frame tengah. Klik_frame.html adalah fileweb yang digunakan untuk  memanggilhalaman frame yang akan diletakkan di tengah yaitu frame_midle.html s/dframe_midle3.html dan ini diletakkan di frame sebelah kiri tengah. Yangterakhir adalah halaman web frame_footer.html yang diletakkan di frame palingbawah. Ketika kita mengklik Link1 pada menu di tengah kiri maka gambar animasiakan berubah sesuai target yang ditentukan, sampai kepada Link4.
Untuk sintaknya tidak perlu kita bahas karena sudah kitabahas pada awal laporan praktikum ini. Untuk itu coba simak pembuatan tugasberikut 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
Silahkananda Pilih:

  • Link1
  • Link2
  • Link3
  • Link4
  • 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 kitadapat membagi tampilan layar web menjadi terbagi dalam beberapa bagian yangberbeda.
    ·        Degan frametampilan lebih menarik dan hidup karena kita dapat memunculkan web dalam frameyang kita tentukan dengan mengambil frame lain sebagai media pemanggilan, walhasil pengguna merasa nyaman tidak berlu bolak-balik untuk mencari webpemanggil pada saat membutuhkan link yang diinginkannya.
    ·        Dalam membuatframe hampir semudah dalam membuat tabel bahkan saat kita praktekkan jauh lebihmudah. Dan ini merupakan web rangkumen dimana web-web lain dapat dimasukkannyauntuk dianggap sebagai window dari suatu kerangka yang lebih besar.
    ·        Dalam menggunakanukuran frame (% atau pixel) kita dapat merandang berdasarkan dari kemungkinanweb tersebut diakses oleh para penikmat internet, apakah besar kemungkinan akanmengalami proses dibesar kecilkan atau tidak. Jika sering alangkah baiknya agarweb 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