CONTOH PEMBUATAN WEBSITE DI DREAMWEAVER

Frameset digunakan dalam pembuatan web statis menggunakan HTML. Frameset sendiri berfungsi untuk menampilkan isi halaman yang lain dan ditampilkan pada satu halaman induk. Nah, berikut ini langkah-langkah dalam menggunakan frameset . Pertama-tama buka program Dreamweaver yang sudah diinstal pada komputer/laptop anda.

Lalu, akan keluar New Document yaitu Page From Sample. Nah, pilih Fixed Top, Nested Right. Agar tampilannya tetap diatas, lalu ada sarang di kanannya. Lalu klik create. Setelah itu keluar tampilan Frame Tag Accessibility Attributes. Framenya kita ubah menjadi mainframe. Lalu, klik Ok. Setelah itu, klik di tempat yang bergaris (Fixed Top, Nested Right)nya. Lalu dibawah ada Properties. Nah, Bordersnya kita pilih Yes, lalu Border widthnya kita ketik 10 dan untuk border color terserah selera kalian, tapi saya memilih warna merah untuk border colornya. Setelah itu, ketik iLab Gunadarma di atas atau di tempat Fixed Topnya, dan untuk di Nested Rightnya ketik Home, Pretest, Posttest, Login, dan Profile.

Agar tampilan lebih menarik. Pada tempat iLab GUNADARMA atau di Fixed Top , kita pilih Modify, Lalu klik Page Properties. Maka akan keluar tampilannya. Lalu kita tentukan Page Font, size, text colornya, dan background colornya sesuai keinginan kita. Saya memilih Page fontnya Times New Roman, Times, Serif. Dan buat sizenya saya memilih 24 pixels. Text colornya saya memilih warna netral saja yaitu warna hitam. Untuk background colornya saya pilih warna ungu.

Selanjutnya, untuk yang di Nested Right dan yang di target mainframe lakukan seperti langkah tersebut. Kalau saya memilih nested rightnya untuk fontnya tetap Times New Roman, sizenya 12, text colornya hitam dan untuk background colornya saya pilih warna pink keunguan. Sedangkan untuk target main framenya saya pilih font dan text colornya sama dengan fixed top dan nested right, kecuali untuk size dan background colornya. Untuk size saya 18 dan background colornya warna ungu muda.

Setelah itu pilih File lalu klik new untuk file baru. Lalu pilih Blank Page lalu klik create. Nah, untuk halaman ini kita save lalu namanya kita tuliskan home.html. Di file baru ini kita tuliskan tentang perkenalan Ilab GUNADARMA lalu atur Page Font, size, text colornya, dan background colornya. Misalnya di judulnya kita tulis “Selamat Datang di Ilab GUNADARMA” kita ingin agar tulisan tersebut dapat bergerak dari kanan ke kiri. Kita tinggal blok tulisan tersebut. Lalu pilih insert klik tag lalu pilih HTML tags setelah itu klik marquee. Nah, marquee ini yang menyebabkan tulisannya bergerak. Lalu klik 1x pada insert. Nah, kita dapat menambahkan kata profile di halaman ini, yang akan difungsikan bila kita klik profile maka halaman akan pindah ke halaman profile. Profile kita taruh posisinya di kanan bawah. Agar tampilan tidak memakan banyak tab. Saya akan memindahkan halaman profile itu tetap berada di target mainFramenya. Tetapi, kita harus buat terlebih dahulu halaman profilenya.

Setelah itu, kita masuk lagi ke ilab gunadarma atau tampilan yang awal. Nah, di nested right kita blok homenya lalu kita pilih link. Linknya itu home.html atau halaman yang untuk pengenalan Ilab GUNADARMA. Setelah itu kita pilih target, targetnya kita pilih mainframe. Maka nanti home di nested right akan berfungsi seperti link untuk pindah halaman tanpa adanya tab baru lagi itu ditandai warna biru dan ada garis bawah di homenya.

Setelah itu buat lagi halaman baru yaitu profile.html. Nah, pilih File lalu klik new untuk file baru. Lalu pilih Blank Page lalu klik create. Nah, untuk halaman ini kita save. Di file baru ini kita tuliskan tentang profile  Ilab GUNADARMA lalu atur Page Font, size, text colornya, dan background colornya. Nah, jangan lupa logo GUNADARMANYAnya di bawah tulisan tentang isi profil Ilab GUNADARMA. Nah, caranya pilih insert lalu kilik image. Lalu pilih logo GUNADARMA yang diinginkan. Setelah itu , kita tambahkan kata back di halaman ini, yang akan difungsikan halaman akan pindah ke halaman ilab atau halaman awal. Back kita taruh posisinya di sebelah kiri bawah. Agar tampilan tidak memakan banyak tab. Saya akan memindahkan halaman back itu tetap berada di target mainFramenya.

Sebelum itu kita selesaikan terlebih dahulu halaman awal yang ada di Nested Right yaitu profile. blok profile lalu kita pilih link. Linknya itu profile.html atau halaman yang untuk profil Ilab GUNADARMA. Setelah itu kita pilih target, targetnya kita pilih mainframe. Maka nanti profile di nested right akan berfungsi seperti link untuk pindah halaman tanpa adanya tab baru lagi itu ditandai warna biru dan ada garis bawah di profilenya.

Dan untuk bagian yang pindah halaman yang bertulis profile yang berada di halaman home. Seperti biasa, kita blok profile lalu kita pilih link. Linknya itu profile.html atau halaman yang untuk profil Ilab GUNADARMA. Setelah itu kita pilih target, targetnya kita pilih _self. Nah, self ini berfungsi agar balik ke profilenya sendiri tanpa adanya buka tab baru lagi. Maka nanti profile di halaman home berfungsi seperti link untuk pindah halaman. Halaman yang akan pindah ke halaman profile.

Nah, sesudah selesai tentang link profilenya kita selesaikan link buat backnya yang ada di halaman awal. Blok back lalu kita pilih link. Linknya itu link halaman awal. Saya mengesave halaman awal yaitu ilab.html. Setelah itu kita pilih target, targetnya kita pilih _parent. Agar tidak keluar lagi halaman seperti halaman awal tesebut di mainframe maupun di tab baru.

Setelah itu, kita buat halaman baru lagi. Nah, kita akan buat halaman buat login. Dengan pilih File lalu klik new untuk file baru. Lalu pilih Blank Page lalu klik create. Nah, untuk halaman ini kita save lalu namanya kita tuliskan login.html. Di file baru ini kita buat untuk masuk atau login ke dalam Ilab GUNADARMA lalu atur Page Font, size, text colornya, dan background colornya. Nah, kita buat kotak untuk mengetikan user dan di halaman ini, lalu buat tanda klik agar kita dapat login. Nah, untuk membuat kotak dalam mengetikkan nama user dan passwordnya itu dengan cara pilih insert pilih Form setelah itu pilih lagi text field lalu tekan Ok.  Lalu untuk membuat tanda loginnya agar masuk ke dalam Ilab GUNADARMA. Pilih insert pilih Form setelah itu pilih lagi Button. Setelah ada tombol submit kita klik kanan lalu pilih label lalu ketik login di value nya.

Setelah itu, kita masuk lagi ke ilab gunadarma atau tampilan yang awal. Nah, di nested right kita blok login lalu kita pilih link. Linknya itu login.html atau halaman yang untuk masuk ke dalam Ilab GUNADARMA. Setelah itu kita pilih target, targetnya kita pilih mainframe. Maka nanti login di nested right akan berfungsi seperti link untuk pindah halaman tanpa adanya tab baru lagi itu ditandai warna biru dan ada garis bawah di loginnya. Setelah halaman semuanya sudah selesai yaitu ada 4 halaman (ilab, home, profile, dan login). Kita coba dengan menekan F12.

-FEBISARFINA-