Upload
others
View
7
Download
0
Embed Size (px)
Citation preview
MODUL PRAKTIKUM
PERANCANGAN WEB
Oleh :Sri Herawati, S.Kom, M.Kom
TEKNIK MULTIMEDIA DAN JARINGANFAKULTAS TEKNIK
UNIVERSITAS TRUNOJOYO2014
MODUL 1
1
TABEL DAN GAMBAR
I. TUJUAN PRAKTIKUM
Peserta Praktikum dapat memahami dan mengimplementasikan penggunaan tabel dan
gambar
II. TUGAS PENDAHULUAN
1. Apa perbedaan website, web page dan homepage? Jelaskan dan beri contoh!
2. Sebutkan fitur-fitur yang ada pada Insert Bar? Jelaskan dan beri contoh!
3. Sebutkan kegunaan dari fungsi merge cells dan split cells dalam tabel?
4. Apa perbedaan antara insert Colums atau Rows dengan split cells? Jelaskan dan beri
contoh!
III. LANDASAN TEORI
Tabel membantu dalam membagi ruang halaman web. Tabel ini mirip tabel yang ada
pada word atau Excel, tetapi tabel dalam web dapat digunakan dengan cara yang lebih
fleksibel. Tabel memberikan pilihan untuk membuat ukuran halaman web yang tetap atau
membuat halaman sesuai dengan jendela pengguna. Tabel menjamin bahwa letak teks dan
gambar tidak berubah jika dilihat pada layar dengan resolusi atau web browser yang berbeda.
Selain itu, tabel berfungsi menampilkan informasi secara terstruktur, ringkas dan mudah
dibaca serta mengatur tampilan homepage agar lebih menarik. Atribut-atribut yang dimiliki
oleh tabel antara lain :
Rows digunakan untuk menentukan jumlah baris
Columns digunakan untuk menentukan jumlah kolom
Width digunakan untuk mengatur lebar tabel
Border thickness digunakan untuk mengatur ketebalan border. Jika memilih 0
berarti border tidak terlihat.
Cell padding digunakan untuk mengatur spasi antara border dengan tulisan, sehingga
menambahkan ruang dalam sel. Masukkan 0 untuk tidak ada spasi atau nomor untuk
menambah spasi.
Cell spacing digunakan untuk menambah ruang antara sel-sel tabel. Masukkan 0 untuk
tidak ada ruang atau nomor untuk menambah ruang.
Header digunakan untuk memilih letak header tabel, terdapat empat pilihan header
yaitu: None, Left, Top dan Both.
2
IV. PRAKTIKUM
1. Menambahkan Tabel
Untuk menambahkan tabel, ikuti langkah-langkah berikut :
a. Pada menu utama, klik Insert > Table, sehingga muncul tampilan sebagai
berikut:
b. Masukkan jumlah baris (Rows) diisi dengan 3 dan kolom (Columns) diisi
dengan 3
c. Atur lebar tabel (Table width) 600 piksel.
d. Atur ketebalan border dengan 1.
e. Cell padding diisi dengan 5 dan cell spacing diisi dengan 0.
f. Pada pilihan header, pilih None
g. Klik OK, sehingga akan menunjukkan hasil sbb:
3
2. Menggabungkan beberapa cell
Langkah-langkah untuk menggabungkan beberapa cell dalam tabel antara lain :
a. arahkan mouse pada sel pertama (kiri atas atau kanan bawah),
b. kemudian drag beberapa sel sampai sel-sel yang diinginkan dalam keadaan
terpilih
c. klik kanan samapi muncul menu pilih Table, kemudian pilih Merge Cells.
d. hasil dari penggabungan sel seperti ditunjukkan pada gambar berikut:
Catatan : grup sel yang terpilih tadi sekarang menjadi satu sel yang lebih besar. Jika
ada 2 sel atau lebih yang memiliki isi di dalamnya (baik berupa tulisan, gambar, tabel,
dsb) dan dilakukan operasi merge, maka isi-isi sel tadi akan dijadikan satu.
3. Menyisipkan satu sel
4
Langkah-langkah untuk menyisipkan satu sel sebagai berikut :
a. Letakkan kursor pada sel yang ingin disisipkan. Kemudian klik kanan mouse.
b. Muncul menu konteks, pilih Table, kemudian Split Cell. Maka muncul Split
Cell dialog box.
c. Jika ingin menyisipkan sel tersebut menjadi beberapa baris, maka
- klik radio button Rows,
- masukkan jumlah baris yang diinginkan, misalnya 2
- klik OK, maka hasil dari menyisipkan baris sebagai berikut:
d. Jika ingin menyisipkan sel menjadi beberapa kolom, maka
- klik radio button Columns
- masukkan jumlah kolom yang diinginkan, misalnya 2
- klik OK, maka hasil menyisipkan beberapa kolom sebagai berikut :
4. Menambah atau mengurangi baris dan kolom
5
Langkah-langkah untuk menambah atau mengurangi baris dan kolom sebagai berikut:
a. Letakkan posisi kursor pada sel yang diinginkan
b. Klik tombol kanan mouse, sehingga muncul menu konteks pilihan Table.
c. Kemudian muncul menu pilihan yaitu :
- Insert Row digunakan untuk menyelipkan satu baris diatas sel yang terpilih.
- Insert Column digunakan untuk menyelipkan satu kolom di sebelah kiri sel
yang terpilih.
- Insert Row or Column digunakan untuk menyelipkan baris atau kolom
seperti ditunjukkan pada gambar berikut :
Jika ingin menambahkan baris,maka :
klik pada radio button Rows, masukkan jumlah baris yang ingin
ditambahkan.
pilih apakah baris akan ditambahkan di atas sel terpilih (Above the
Selection) ataukah di bawah sel terpilih (Below the Selection).
klik OK, maka hasil dari penambahaan dua baris seperti ditunjukkan pada
gambar berikut:
Jika ingin menyelipkan kolom,maka:
klik pada radio button Columns, masukkan jumlah kolom yang ingin
diselipkan,
pilih apakah kolom akan ditambahkan sebelum sel terpilih (Before
current Column) ataukah sesudah sel terpilih (After current Column).
6
klik OK, maka hasil dari penambahan satu kolom seperti ditunjukkan
pada gambar berikut :
- Delete Row digunakan untuk menghapus baris.
- Delete Column digunakan untuk menghapus kolom.
5. Memasukkan gambar
Langkah-langkah untuk memasukkan gambar sebagai berikut :
a. Pilih menu Insert > Image
b. Tampak dialog box untuk memilih file gambar, kemudian pilih gambar yang
akan ditampilkan.
c. Klik select, maka gambar akan dimasukkan pada halaman web seperti
ditunjukkan pada gambar berikut :
6. Membuat rollover gambar
Rollover image merupakan perubahan gambar yang akan terjadi ketika pointer dari
mouse diarahkan pada gambar tersebut. Rolover image terdiri dari 2 gambar yaitu
gambar pertama yang akan tampak pada saat pertama kali ditampilkan pada browser,
dan gambar kedua akan tampil ketika pointer diarahkan pada gambar tersebut. Untuk
membuat rollover gambar, pastikan kedua gambar mempunyai ukuran yang sama,
supaya tampilan web tampak konsisten.
Langkah-langkah untuk membuat rollover gambar sebagai berikut:
7
a. Klik button image rollover pada object panel, maka akan muncul dialog box
yang harus diisi nama rollover gambar tersebut,
b. Pilih gambar pertama dan memilih rollover image atau image kedua.
Sehingga hasil dari penambahan rollover gambar seperti ditunjukkan pada gambar
berikut:
Ketika pointer mouse diletakkan diatas gambar, maka akan muncul tampilan sebagai
berikut:
V. KESIMPULAN
- Tabel membantu dalam membagi ruang halaman web supaya lebih mudah diatur dan
tampilan lebih menarik
- Rollover image merupakan perubahan gambar yang akan terjadi ketika pointer dari
mouse diarahkan pada gambar tersebut.
VI. TUGAS PRAKTIKUM
8
1. Buat tampilan web dengan menggunakan tabel dan gambar seperti ditunjukkan pada
gambar di bawah ini. Tampilan dan isi website bisa juga dibuat sesuai dengan kreatifitas
masing-masing peserta praktikum.
Ketika pointer mouse diletakkan diatas gambar, maka tampilan gambar akan berubah
seperti ditunjukkan pada gambar berikut:
9