1
MODUL PERKULIAHAN
P042110007 –
INTERACTIVE AND MULTIMEDIA BROADCASTING
Roll over Image
Abstrak Sub-CPMK (2)
Ketepatan dalam Mampu merancang cara membuat
merancang roll over Roll Over Image
image
Fakultas Bidang Studi Tatap Muka Disusun Oleh
06
Bagus Rizki N, M.Ikom
Fakultas Ilmu Komunikasi Broadcasting
Pembahasan
Web Desain adalah istilah yang sering digunakan untuk menggambarkan
bagaimana tampilan isi suatu website atau situs. Tampilan dari website biasanya
berupa hypertext (HTML) atau hypermedia yang dikirimkan ke user melalui World
Wide Web. Untuk menampilkan suatu desain web atau isi dari suatu website,
dibutuhkan sebuah browser web atau software (perangkat lunak) berbasis web.
Tujuan dari web desain adalah untuk membuat website yang meliputi sekumpulan
konten online termasuk dokumen dan aplikasi yang berada pada web server. Bisa
juga, sebuah website berupa sekumpulan teks, gambar, suara dan konten lainnya,
serta dapat bersifat interaktif maupun statis.
Elemen-elemen seperti teks, forms, images (GIFs, JPEGs, Portable Network
Graphics) dan video dapat diletakkan di dalam halaman menggunakan tag-
tag HTML/XHTML/XML. Browser terkadang juga memerlukan Plug-
ins seperti Adobe Flash, QuickTime, Java, dan sebagainya untuk menampilkan
beberapa media yang diletakkan di dalam halaman web menggunakan tag-
tagHTML/XHTML.
Halaman web dan situs web dapat berupa halaman statis, atau dapat diprogram
secara dinamis sehingga menghasilkan halaman web dengan konten atau
tampilan visual yang diinginkan, tergantung pada berbagai faktor, seperti masukan
dari pengguna akhir, masukan dari Webmaster, atau perubahan dalam
lingkungan komputasi (seperti situs yang terkait dengan database yang telah
diubah).
• Bahasa Markup (seperti HTML, XHTML dan XML)
• Gaya lembar bahasa (seperti CSS dan XSL)
• Client-side scripting (seperti JavaScript dan VBScript)
• Server-side scripting (seperti PHP dan ASP)
• Teknologi database (seperti MySQL dan PostgreSQL)
• Teknologi multimedia (seperti Flash dan Silverlight)
Perancang web atau desainer web (web designer) adalah orang yang memiliki
2021 Interactive and Multimedia Broadcasting
2 Bagus Rizki N, M.Ikom
Biro Bahan Ajar E-learning dan MKCU
http://pbael.mercubuana.ac.id/
keahlian menciptakan konten presentasi (biasanya hypertext atau hypermedia)
yang dikirimkan ke pengguna-akhir melalui World Wide Web, menggunakan Web
browser atau perangkat lunak Web-enabled lain
seperti televisi internet, Microblogging, RSS, dan sebagainya.
Web Terdiri Dari 4 Bagian :
1. HTTP (Hyper Text Type Protocol)
2. URL (Uniform Resource Locator)
3. Client Server
4. HTML (Hyper Text Markup Language)
Cara membuat website mungkin bisa dibilang bukan hal yang sulit bahkan cukup
mudah untuk para webmaster (pembuat website). Namun bagaimana dengan
teman-teman kita yang baru saja 'terjun' di dunia blogging ? apakah mereka juga
menganggap Cara Membuat Website adalah hal yang mudah ? tentu tidak bukan,
atas dasar itulah saya akan mencoba menjelaskan tahap demi tahap Bagaimana
Cara Membuat Website dari Dasar atau Awal untuk para Pemula tentunya.
Tenang saja, Cara Membuat Web yang akan saya berikan ini tidak akan banyak
memakan waktu Anda, karena sesuai judul yang saya buat Cara Membuat
Website ini hanya akan memakan waktu 5 Menit saja, bahkan mungkin bisa
kurang dari itu.
Baiklah, disini saya akan membagi Tutorial Membuat Website ini menjadi 2
Bagian.
• Cara Membuat Website
• Cara Upload File ke Website Menggunakan FTP
• Video Cara Membuat Website
Kedua Cara diatas akan saya jelaskan secara gamblang dengan bahasa yang
sesederhana mungkin. Jadi untuk Anda yang benar-benar buta akan Website
mampu mengikuti Tutorial Membuat Website ini dengan Mudah.
1. Cara Membuat Website
2021 Interactive and Multimedia Broadcasting
3 Bagus Rizki N, M.Ikom
Biro Bahan Ajar E-learning dan MKCU
http://pbael.mercubuana.ac.id/
Sebelum membuat website, hal yang harus Anda persiapkan adalah Hosting +
Domain. Jika Anda bingung apa itu Hosting, maka kita bisa mengibaratkan
Hosting itu ibarat Rumah untuk menyimpan barang-barang (file) dan Domain
• ibarat Nama
Jalannya, agar pengunjung bisa berkunjung.
Untungnya hampir semua penyedia layanan website sekarang ini sudah
menyediakan paket lengkap, yaitu mereka sudah menyiapkan Hosting dan
Domain menjadi satu, jadi pesan Hosting dapat gratis Domain. Karena kita nyari
yang gratisan jadi kita gak akan dapat Domain, melainkan hanya akan mendapat
SubDomain (ada embel-embelnya, semacam blogspot.com atau wordpress.com).
Kembali ke Topik, untuk Cara Membuat Website.
1. Kunjungi situs penyedia Layanan pembuatan Website, disini akan saya beri
contoh menggunakan situs penyedia layanan yang cukup populer di
Indonesia, yaitu IDHostinger. Langsung saja kunjungi
http://www.idhostinger.com/
2. Setelah terbuka, selanjutnya klik Buat Akun. Letaknya ada di pojok kanan
atas, dekat form login.
2021 Interactive and Multimedia Broadcasting
4 Bagus Rizki N, M.Ikom
Biro Bahan Ajar E-learning dan MKCU
http://pbael.mercubuana.ac.id/
3. Di halaman ini Anda diwajibkan mengisi. Nama, E-mail dan Password
Anda. Isikan sesuai tempatnya.
Jangan lupa centang, Saya setuju dengan Ketentuan Penggunaan Layanan.
4. Selanjtunya, kita buka Tab Baru dan masuk ke Email kita, untu mengaktivasi
Akun kita. Nanti ada dua Email dari yang dikirim oleh IDHostinger, Anda lihat saja
yang pertama atau yang paling bawah.
2021 Interactive and Multimedia Broadcasting
5 Bagus Rizki N, M.Ikom
Biro Bahan Ajar E-learning dan MKCU
http://pbael.mercubuana.ac.id/
Tingal Anda klik atau salin link tersebut ke Address Bar dan klik Enter
5. Disini kita akan disuruh memilih Paket Hosting yang akan kita pakai nanti
untuk Membuat Website. Karena kita hanya akan Membuat Web untuk
Belajar saja, maka kita Order saja yang Paket Gratis.
6. Kalau diatas kita sudah memesan Hostingan makan setelah itu kita akan diberi
hadiah SubDomain. Untuk SubDomainnya ada banyak pilihan, silahkan Anda pilih
yang paling cocok atau sesuai dengan selera Anda. Lalu klik Buat.
2021 Interactive and Multimedia Broadcasting
6 Bagus Rizki N, M.Ikom
Biro Bahan Ajar E-learning dan MKCU
http://pbael.mercubuana.ac.id/
7. SubDomain + Hosting Anda akan dibuat, jadi tunggu hingga muncul
pemeberitahuan 'Akun telah dibuat 100%' di pojok kanan bawah.
8. Dari sini kita sudah berhasil membuat akun untuk membuat Websitenya, namun
kita belum memesan Hosting + SubDomain atau dengan kata lain suah berhasi
Mendaftar / Membuat Website. Namun kita harus melanjutkan untuk mengisi
website kita dengan Artikel atau File. Caranya dengan mengklik tombol Kelola.
2021 Interactive and Multimedia Broadcasting
7 Bagus Rizki N, M.Ikom
Biro Bahan Ajar E-learning dan MKCU
http://pbael.mercubuana.ac.id/
8.Cara Membuat Website Sederhana untuk
Pemula (Gambar: 7)
9. Maka Anda akan dibawa ke Cpanel (Control Panel). Disinilah tempat Anda
mengatur segala sesuatu yang berkaitan dengan website Anda. Mulai dari :
a. Menambah Subdomain
b. Parkir Domain
c. Impor Website
d. Impor Database
e. Mengatur Halaman Error
Dan masih banyak lagi. Namun kita tidak akan membahas fitur-fitur yang ada
di Cpanel ini (butuh watu berhari-hari). Tujuan kita masuk Cpanel adalah untuk
mengambil Data mengenai : 'Nama pengguna'.
2021 Interactive and Multimedia Broadcasting
8 Bagus Rizki N, M.Ikom
Biro Bahan Ajar E-learning dan MKCU
http://pbael.mercubuana.ac.id/
Lihat dan silhkan Anda Catat (kalau bisa dikertas atau buku).
Membuat Rollover Image
Posted on May 11, 2013 by larvakecil2013 Standard
Hai jumpa kembali di Tutorial Dreamweaver mempercantik halaman website
kita dengan kolaborasi CSS dan dreamweaver. Pada tutorial belajar
Dreamweaver kali ini penulis akan menjelaskan bagaimana cara membuat atau
memasukkan Rollover Image. Apa yang dimaksud rollover image? Rollover
image adalah suatu image / gambar yang dilengkapi dengan script di dalamnya
sehingga sewaktu gambar (gambar utama/default) itu disorot dengan kursor maka
gambar tersebut akan berganti dengan gambar yang lain (gambar kedua)…
Contohnya: di menu utama ilmuGrafis di atas ketika disorot berubah warna
Jika mungkin belum jelas maka silahkan saja coba ikuti pembuatannya dulu, maka
siapa tahu nanti jadi lebih jelas apa yang dimaksudkan di atas
Dan seperti ini cara’a..
1. buka dreamweaver seperti biasa dan buat file baru berextensi html.. (anda bisa
menggunakan tampilan Split maupun Code, tp saya terbiasa menggunakan
tampilan code)
2. kita buat dulu bagian yang ingin dirollover gambar (backgroundnya) di antara
tag <body></body> dengan menggunakan sebuah div tag dengan nama element
2021 Interactive and Multimedia Broadcasting
9 Bagus Rizki N, M.Ikom
Biro Bahan Ajar E-learning dan MKCU
http://pbael.mercubuana.ac.id/
menggunakan class atau id..
(di sini saya menggunakan element class)
berikut kode tag’a..
<div><a href=”#”>Preview Rollover Image (background)
Dengan CSS</a>
</div>
tampilan tersebut akan membuat sebuah link standar yang biasa digunakan tanpa
ada style apapun..dan berikut kode css yang ditaruh di antara tag <head></head>
<style type=”text/css”>
.rollover a { background:#ffffff url(“*”) 0 0 no-repeat; padding-left:20px;}
.rollover a:hover { background: #ffffff url(“*”) 0 0 no-repeat; padding-left:20px; }
</style>
#ffffff adalah bilangan hexadecimal untuk warna putih yang digunakan sebagai
warna background..(saya menggunakan warna putih karena di halaman preview
berlatarbelakang warna putih..)
* : cari dan isi gambar yang ingin digunakan untuk gambar awal dan gambar
hover..
0 0 : merupakan posisi dari gambar backround 0 pertama adalah untuk posisi x
dan 0 kedua adalah untuk posisi y..
no-repeat : merupakan perulangan dari gambar..no-repeat berarti tidak
menggunakan perulangan..jika kalian ingin menggunakan perulangan..gunakan
repeat-x untuk perulangan horizontal..dan repeat-y untuk perulangan vertical..
padding-left : memberikan jarak dari kiri untuk memperlihatkan gambar dari
tulisan link yang ada..(saya menggunakan 20px karena lebar dari gambar adalah
15px..)
jika ingin menggunakan hover di setiap tag atau class atau id..cukup gunakan
“:hover” setelah nama tag atau nama class atau nama id.. (tanpa kutip)
Daftar Pustaka
2021 Interactive and Multimedia Broadcasting
10 Bagus Rizki N, M.Ikom
Biro Bahan Ajar E-learning dan MKCU
http://pbael.mercubuana.ac.id/
1. http://www.macromedia.com
2021 Interactive and Multimedia Broadcasting
11 Bagus Rizki N, M.Ikom
Biro Bahan Ajar E-learning dan MKCU
http://pbael.mercubuana.ac.id/
