Cara Cepat Mengatur Alignment Center Halaman Frameset Web
oleh salsabel pada Feb.22, 2009, dalam kategori Internet, Web Design
“Saya punya sebuah web lama dengan bahasa HTML Native dengan 3 Frameset. Dulu tampilan ini bagus ditampilkan pada monitor 14″ dan 15″. Tapi sekarang tampilannya terlihat semrawut jika dilihat dari monitor 17″ ke atas. Saya tahu hal ini muncul karena perbedaan resolusi screen monitor. Web tersebut dioptimalkan untuk monitor dengan lebar 1024px, sehingga jika ditampilkan pada monitor dengan lebar 1280 tampilannya jadi aneh. Saya kepikiran membuat web ini tampil dengan ukuran 1024 dengan alignment=center alias rata tengah, bagaimana cara melakukannya?”
Itu tadi permasalahan yang pernah saya alami saat meng-online-kan konten halaman web HTML karya bareng rekan-rekan ini. Setelah konsultasi dan baca-baca beberapa artikel, saya temukan dua cara sederhana. Jika Anda punya masalah yang sama, silakan ikuti langkahnya berikut:
1. Dengan memanipulasi halaman web.
Salah satu forum menyarankan untuk menambahkan baris perintah berikut:
<frameset rows=”*,400,*” frameborder=”NO” border=”0″ framespacing=”0″>
<frame src=”banner.htm” name=”topFrame” scrolling=”NO” noresize >
<frameset cols=”*,700,*” frameborder=”NO” border=”0″ framespacing=”0″>
<frame src=”menu.htm” name=”leftFrame” scrolling=”NO” noresize>
<frame src=”about: blank” name=”mainFrame”>
<frame src=”beranda.htm” name=”rightFrame” scrolling=”NO” noresize>
</frameset>
<frame src=”footer.htm” name=”bottomFrame” scrolling=”NO” noresize>
</frameset>
Keterangan:
mainFrame adalah frame yang berada di tengah. Di sinilah konten utama web saya.
topFrame dan bottomFrame berada di posisi paling atas dan paling bawah web.
leftFrame dan rightFrame bertugas mengetengahkan posisi mainFrame dari kedua sisi.
Pada contoh di atas, Anda perhatikan bahwa semua file source/rujukan untuk tiap frame berupa blank.htm kecuali frame utama yang berisi konten sebenarnya.
mainFrame sendiri berupa halaman kosong. Anda dapat memanggil file tersendiri atau menempatkan iframe di sana. Jika Anda memilih cara ini berarti anda akan memposisikan iframe dalam frameset yang telah kita manipulasi.
2. Dengan Menggunakan IFrame.
Sebenarnya fungsi MainArea dalam Frameset adalah untuk menampilkan konten IFRAMES. Namun saya ingin keseluruhan Frameset terletak pas di tengah, bukan hanya konten utamanya saja. Frameset saya berisi tiga halaman yakni; Area Banner-Atas, area Navigasi Kiri, dan Area Target Utama. Banner Atas dan Navigasi kiri merupakan konten statis, hanya dipanggil sekali dan selanjutnya hanya konten Target Utama yang berubah sesuai dengan navigasi yang dipilih.
Untuk mengetengahkan seluruh Frameset, buatlah index.htm dan sisipkan baris perintah berikut ini diantara kode <body> dan </body>.
<div style=”text-align:center; display:block”>
<iframe src=”http://www.websiteanda.com” width=”1024px” height=”768px”></iframe>
</div>
Masukkan alamat URL Anda pada www.websiteanda.com. Atau jika Anda lebih suka, Anda dapat mengganti URL Iframe tersebut dengan halaman index frameset Anda. Sehingga kurang lebih tampilan hirarkinya akan tampak seperti berikut:
index.htm –> index2.htm (frameset) –> banner.htm, menu.htm, beranda.htm (file konten frameset)
Saya memilih dan merekomendasikan cara ini karena lebih mudah dan halaman web tampil dengan rata tengah persis seperti yang saya inginkan.
Silakan periksa sendiri hasilnya di sini.
Bagaimana dengan karya Anda?
Tulisan ini dikembangkan dari sini dan tutorial ini.
4 Komentar atas tulisan ini
Balas komentar
Hai! Selamat datang di GBK!
Terimakasih sudah berkenan mampir! Jangan sungkan untuk sekedar memberikan komentar, berdiskusi atau mengikuti perkembangan info dengan mendaftarkan diri di RSS feed GBK.
Anda mencari sesuatu? Silakan cari di sini:
Saya mengundang Anda untuk bergabung dengan ratusan anggota lain yang telah mendaftarkan diri sebagai pembaca Guntingbatukertas. Bagi Anda yang belum bergabung, silakan gunakan menu navigasi
Administrasi > Registeruntuk melakukan pendaftaran. Anda juga bisa menjalin link dengan jejaring para pembaca GBK yang telah bergabung dalamGoogle Connect.Saya yakin Anda juga mau dan bisa berbagi. Jika Anda merasa terbantu dengan artikel GBK dan juga berbaik hati ingin membantu Anda bisa mengawalinya dengan meng-klik iklan GBK. Satu klik saja berarti Anda mendukung proses sharing tetap berlanjut. Namun demikian saya tidak menyarankan Anda untuk termakan begitu saja isi iklan tersebut. Silakan cermati, pahami dan pilih dengan bijak. Terimakasih dan selamat membaca!
Sponsor
May 21st, 2009 on 6:33 PM
thank artikelnya.. saya lagi bljr frameset ^-^
May 22nd, 2009 on 6:43 AM
@joni14jbi
trims kembali.. wah jadi inget dah lama ga maen kode.. hehehe
July 12th, 2009 on 7:29 PM
makasih mas tutorialnya
July 14th, 2009 on 1:33 AM
@ raiderhost
terimakasih kembali. senang bisa membantu Anda.