Scribd Logo
Unggah

Selamat datang di Scribd!

  • Membuat Frame

    Diunggah oleh

    Reza Flash
    11 tayangan8 halaman
    Membuat Frame HTML

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    DOC, PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini
    Membuat Frame HTML

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai DOC, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    11 tayangan8 halaman

    Membuat Frame

    Diunggah oleh

    Reza Flash
    Membuat Frame HTML

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai DOC, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 8

    Modul Ajar Disain Web Politeknik Elektronika Negeri Surabaya (PENS)

    Bab 8 Membuat Frame

    Frame HTML dapat digunakan untuk menampilkan beberapa web page yang ditampilkan dalam satu window browser. Model ini sering dipakai untuk memperjelas penyajian informasi dengan menu-menu yang ada selalu ditampilkan. Kekurangan penggunaan frame : Developer web harus menjaga dokumen HTML lebih banyak ulit untuk men!etak "print# semua halaman web. Tag Frameset : Tag $frameset% mendefinisikan bagaimana membagi window ke dalam framframe. etiap frameset mendefinisikan sebuah set baris "row# atau kolom "!olom# etiap nilai rows&!olumn menunjukkan jumlah tampilan area setiap row&!olomn. Tag Frame Tag $frame% tag mendefinisikan nama dokumen HTML yang dimasukkan dalam frame. ebagai !ontoh dibawah ini adalah frameset dengan dua kolom. 'olom pertama dengan lebar ()* dari browser window. 'olom kedua dengan lebar +)* dari browser window. Dokumen HTML ,frame-.html, diletakkan pada kolom pertama dan dokumen HTML ,frame(.html, diletakkan di kolom kedua.
    <frameset cols="25%,75%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> </frameset>

    Tag tag Frame Tag Keterangan $frameset% Mendefinisikan kumpulan frame $frame% $noframes% $iframe% Mendefinisikan bagian dari windows "sebuah frame# Mendefinisikan bagian noframe untuk browser yang tidak dapat menangani frame Mendefinisikan suatu frame inline

    8.1 Cara membuat frame HTML dengan dreamweaver :


    .uka halaman web baru 'lik /nsert 0 HTML 0 Frame

    Modul Ajar Disain Web Politeknik Elektronika Negeri Surabaya (PENS)

    1ilih model frame2!ontoh 3 top nested left

    ehingga akan mun!ul design frame sebagai berikut 3

    4ambar 5.-. Design frame Tampilan di atas terdiri dari tiga frame2 yaitu frame top2 frame left dan frame main. ehinnga untuk menyimpannya perlu disimpan dengan empat nama file. 6aitu file untuk frame top "frametop.html#2 frame left "frameleft.html#2 frame main "framemain.html# dan frame gabungannya2 misalkan disebut frame utama "frameutama.html#. S ur!e C de L"st"ng 8.1: frameutama.html
    <html> <head> <title>Frame Utama</title> </head> <frameset rows="8 ,!" cols="!" frameborder=""es" border="2" frames#aci$%="2"> <frame src="frameto#.html" $ame="to#Frame" scrolli$%="&'" $oresi(e> <frameset rows="!" cols=")*2,!" frames#aci$%="2" frameborder=""es" border="2"> <frame src="frameleft.html" $ame="leftFrame" scrolli$%="&'" $oresi(e> <frame src="framemai$.html" $ame="mai$Frame">

    Modul Ajar Disain Web Politeknik Elektronika Negeri Surabaya (PENS) </frameset> </frameset> <$oframes><bod"> </bod"></$oframes> </html>

    S ur!e C de L"st"ng 8.# : frametop.html


    <html> <head> <title>Frame +o#</title> </head> <bod"> Frame +o# </bod"> </html>

    S ur!e C de $ L"st"ng 8.% : frameleft.html


    <html> <head> <title>Frame ,eft</title> </head> <bod"> Frame ,eft </bod"> </html>

    S ur!e C de $ L"st"ng 8.& : framemain.html


    <html> <head> <title>Frame -ai$</title> </head> <bod"> Frame -ai$ </bod"> </html>

    Has"' d" Br wser :

    Modul Ajar Disain Web Politeknik Elektronika Negeri Surabaya (PENS)

    4ambar 5.(. 7ontoh hasil frame

    8.# Frame K ' m


    .erikut ini adalah !ontoh frameset vertikal untuk tiga dokumen yang berbeda. C nt ( : S ur!e C de $ L"st"ng 8.) : frameab!.html
    <html><title>Frame ti%a .olom</title> <frameset cols="25%,5 %,25%"> <frame src="framea.html"> <frame src="frameb.html"> <frame src="framec.html"> </frameset> </html>

    S ur!e C de $ L"st"ng 8.* : framea.html


    <html> <head> <title>Frame /</title> </head> <bod" b%color="0FF1F55"> <stro$%>Frame / </stro$%> </bod"> </html>

    S ur!e C de $ L"st"ng 8.+ : frameb.html


    <html> <head> <title>Frame 1</title> </head> <bod" b%color="0FF1FFF"> <stro$%>Frame 1 </stro$%> </bod"> </html>

    S ur!e C de $ L"st"ng 8.8: frame!.html


    <html> <head> <title>Frame 2</title> </head> <bod" b%color="033FFFF"> <stro$%>Frame 2 </stro$%> </bod"> </html>

    Modul Ajar Disain Web Politeknik Elektronika Negeri Surabaya (PENS)

    4ambar 5.8. Frame kolom

    8.% Frame Bar"s


    .erikut ini adalah !ontoh frameset hori9ontal untuk tiga dokumen yang berbeda. C nt ( $ L"st"ng 8., : frame8baris.html
    <html><title>Frame ti%a baris</title> <frameset rows="4 %,4 %,* %"> <frame src="framea.html"> <frame src="frameb.html"> <frame src="framec.html"> </frameset><$oframes></$oframes> </html>

    4ambar 5.:. Frame baris

    Modul Ajar Disain Web Politeknik Elektronika Negeri Surabaya (PENS)

    8.& Frame -av"gas"


    .erikut ini adalah !ontoh membuat frame navigasi. ;avigasi berisi sebuah dartar link dengan frame kedua sebagai target. Frame kedua menampilkan dokumen yang dilink.frame target disebelah kanan dinamakan ,showframe, C nt ( : S ur!e C de $ L"st"ng 8.1.: framenavigasi.html
    <html><title>frame $a5i%asi</title> <frameset cols=")2 ,!"> <frame src="frame$a5me$6.html"> <frame src="frame$a5isi.html" $ame="showframe"> </frameset> </html>

    S ur!e C de $ L"st"ng 8.11: framenavmenu.html


    <html> <head> <title>me$6</title> </head> <bod"> <#><a href="framea.html" tar%et="showframe">frame /</a></#> <#><a href="frameb.html" tar%et="showframe">frame 1</a></#> <#><a href="framec.html" tar%et="showframe">frame 2</a></#> </bod"> </html>

    S ur!e C de $ L"st"ng 8.1#: framenavisi.html


    <html> <head> <title>isi</title> </head> <bod"> <#>7elamat 8ata$%</#> <#>9ercobaa$ Frame &a5i%asi </bod"> </html>

    </#>

    Modul Ajar Disain Web Politeknik Elektronika Negeri Surabaya (PENS)

    4ambar 5.). 7ontoh navigasi <ika di-klik menu frame =2 maka akan mun!ul 3

    4ambar 5.>. 7ontoh navigasi

    8.) Frame /n'"ne


    .erikut ini adalah !ontoh membuat frame inline "frame di dalam sebuah dokumen HTML#. C nt ( : S ur!e C de $ L"st"ng 8.1% : frameinline.html
    <html> <bod"> <iframe src="home.html"></iframe> <#>7ome older browsers do$:t s6##ort iframes.</#> <#>;f the" do$:t, the iframe will $ot be 5isible.</#> </bod"></html>

    Modul Ajar Disain Web Politeknik Elektronika Negeri Surabaya (PENS)

    S ur!e C de $ L"st"ng 8.1&: home.html


    <html> <head> <title><ome</title> </head> <bod"> <h)>1ela=ar >eb 8esi%$ <h2>1ela=ar >eb 8esi%$ <h4>1ela=ar >eb 8esi%$ <h*>1ela=ar >eb 8esi%$ <h5>1ela=ar >eb 8esi%$ <h?>1ela=ar >eb 8esi%$ </bod"> </html>

    </h)> </h2> </h4> </h*> </h5> </h?>

    4ambar 5.+. Frame inline

    Anda mungkin juga menyukai