MODUL KULIAH

PROGRAM KULIAH KARYAWAN & PROFESIONAL

STTI ITECH

Mata kuliah Aplikasi Berbasis Web ( 3 sks )

Semester

Kelas PKKP

Dosen Jefri Rahmadian M.Kom

Pertemuan : 9 (Sembilan) Waktu : Minggu,....... 2011

Modul 9 (Sembilan)

Topik Desain Content

Sub Topik Merancang content Aplikasi Berbasis Web

Materi  Merancang Tombol Navigasi

 Menambahkan Text
 Menambahkan Image
 Menambahkan Layer (Ap Div)
Tujuan Mahasiswa memahami dan mengetahui cara merancang navigasi
serta menambahkan objek pendukung dan memodifikasi tampilan
content pada aplikasi berbasis web
Ketika dokumen Adobe Photoshop tersimpan dalam bentuk web maka secara otomatis akan
membuat tag html sendiri sehingga tidak perlu bersusah payah mengetik kode html. Anda
dapat membuktikan sendiri seperti nampak pada gambar berikut.

Editing Awal (mengubah objek menjadi Background)

1. Pertama bukalah file index.html menggunakan Adobe Dreamweaver.
2. Posisikan tampilan yang sudah dibuat berada ditengah screen dengan cara klik
bagian pojok dari desain
3. Ganti option Align pada pannel properties Menjadi center

4. Setelah file terbuka, tentukan terlebih dahulu image atau gambar mana saja yang
akan di jadikan latar belakang dan bagian mana saja yang akan dijadikan sebagai
tombol. Sebagai contoh, klik image banner

5. Pada bagian Properties, tertulis Src = images/index_01.gif hal itu berarti kita tidak
dapat memasukan teks di atas gambar tersebut karena objek tersebut adalah image,
bukan merupakan background. Tekan Del untuk menghapusnya.
 6. Klik pada Background URL of cell untuk memilih gambar yang akan dijadikan latar
belakang (background). Oleh karena nama file yang baru saja dihapus adalah
index_01.gif maka gunakan file tersebut sebagai latar belakang.

7. Pilih images/index_01.gif pada kolom Bg

8. Lakukan hal yang sama pada bagian lain apabila ingin dijadikan sebagai latar
belakang agar kita dapat memasukkan objek berupa teks, animasi, maupun gambar.

Membuat Button RollOver

1. Delete Image button yang akan kita jadikan rollover dengan cara select image
yang akan kita ganti kemudian tekan Del.
2. Bagian button yang akan di rollover masih terseleksi, kemudian klik menu insert 
Image Objects  Rollover Image

3. Kemudian isikan image name sesuai dengan tombol yang kita jadikan rollover.
Isikan original image dengan file image yang awal dalam hal ini index_04.gif.
Kemudian untuk Rollover image masukan file image yang sudah terlebih dahulu
diedit sehingga ada perbedaan dengan image awal. Setelah selesai tekan ok
 4. Lakukan langkah 1 sampai 3 untuk button selanjutnya.

Menambahkan Objek
Berikut ini akan membahas masalah teknik memasukkan objek berupa teks. Ada beberapa
cara untuk menambahkan teks yaitu :
A. Menambahkan secara langsung
1. Letakkan kursor pada tempat yang akan ditambahkan teks

2. Pada panel Properties, aturlah beberapa spesifikasi untuk mengatur posisi teks
seperti nampak pada gambar berikut .
3. Ketikkan beberapa kalimat yang berisi berita, kemudian aturlah format teks tersebut
seperti nampak pada gambar berikut

B. Menambahkan dengan bantuan Table

1. Letakkan kursor pada tempat yang akan ditambahkan teks sama seperti diatas

2. Tambakan table dengan klik pada tombol yang terdapat pada panel
common
3. Lakukan pengaturan pada windows table tentukan jumlah rows dan column
disesuaikan dengan kebutuhan, begitu juga dengan Table widht disesuaikan
dengan ukuran desain yang digunakan seperti gambar dibawah

4. Maka akan terlihat seperti gambar dibawah. Untuk pengaturan ukuran bisa
menggunakan kursor dengan melakukan resize secara menual dangan cara menarik
garis dari kolom atau row sesuai dengn keinginan (masih didalam dan sesuai dengan
desain)
4. Ketikkan beberapa kalimat yang berisi berita, kemudian aturlah format teks tersebut
seperti nampak pada gambar berikut

5. Akan terlihat seperti gambar berikut

6. Untuk mengatur posisi teks agar tidak terlalu dekat dengan garis maka seleksi
tabel dimana teks berada dan lakukan pengaturan pada gambar berikut
 CellPad memberikan pengaturan terhadap jarak antara teks dengan table,
sementara CellSpace memberikan jarak antara tabel jika tabel yang dibuat lebih dari
1 kolom atau row

5. Kita juga bisa menambahkan image atau gambar pada tabel yang yang lainnya

dengan cara klik pada tabel yang akan dimasukan gambar dan kemudian klik
yang terdapat pada panel common, kemudian pilih gambar yang ingin anda
masukan.
7. Usahakan gambar yang dimasukan menggunakan ukuran yang proporsional dan
jangan terlalu besar karena tabel akan menyesuaikan dengan ukuran gambar
sehingga bisa melebihi ukuran dari layout yang kita buat. Hasilnya terlihat seperti
gambar dibawah

C. Menambahkan dengan menambahkan layer (Draw AP Div)

1. Ada 2 cara menambahkan layer kedalam desain yang dibuat, dalam hal ini akan
dimasukan kedalam tabel. Cara tersebut yaitu
 Melalui menu, pilih insert  Layout Objects  Div Tag
  Yang kedua dengan melalui pannel Layout dengan memilih icon
Draw AP Div. Untuk penggunaan dengan cara ini adalaha klik icon dan
kemudian drag & drop pada bagian desain yang akan kita terapkan layer
tersebut.

2. Setelah layer tersedia, dapat ditambahkan tabel didalamnya atau juga menerapkan
langsung teks pada layer tersebut seperti gambar dibawah

Ada beberapa hal yang harus dipahami yaitu :

 bahwa layer yang kita buat akan menyesuaikan dengan teks atau gambar
yang kita masukan
 jika ingin me resize layer lakukan pengaturan hanya pada garis sebelah
kanan atau bawah atau secara diagonal pada bagian sudut sisi sebelah
kanan bawah. Ini bertujuan agar ketika di lihat di browser teks tersebut tetap
pada tempatnya tidak berpindah.
  Jangan menggeser kotak putih pada sudut kanan atas, karena bisa
menyebabkna layer tidak konsisten berada pada tempatnya ketika dilihat
pada browser

3. Keuntungan dari penggunaan layer adalah ketika teks yang dimasukan melebihi dari
ukuran content atau desain yang dibuat kita bisa menambahkan fungsi scroll,
Pengaturannya adalah dengan mengatur Overflow nya, biarkan layer tetap
terseleksi kemudian atur Overflow dan pilih auto seperti gambar dibawah

Visible : akan memunculkan layer

Hidden : akan menyembunyikan layer
Scroll : akan memunculkan scroll walaupun teks atau isi layer masih belum
mebutuhkan scroll
Auto : akan memunculkan scroll disaat isi dari layer telah melebihi dari ukuran
Layer semula yang telah dibuat

4. Scroll akan muncul dan terlihat hanya pada saat dilihat dengan browser.
Tampilannya akan terlihat seperti gambar berikut