Pertemuan ke 12 Desain dan Penerapan Bais Data

Membuat dan Merancang Desain Web LANJUTAN.

12. Bahan Praktikum: [ Membuat File Baru & Situs Lokal ]

12.1 Membuat File Baru

a. Bukalah dreamweaver, akan langsung ditampilkan kotak dialog DreamWeaver

b. Pada bagian Create New, klik HTML, halaman web yang baru atau masih kosong akan
ditampilkan dan siap untuk diisikan dengan berbagai gambar dan teks informasi didalamnya.
Perhatikan gambar 1.1.

c. Atau dengan cara mengklik File→New, akan tampil kotak dialog New Document. Pilih Pada
bagian Category: Basic page dan pada Basic page: HTML, lalu klik tombol Create, akan tampil
gambar 1.1.

Gambar 1.1. Kotak dialog New Document

d. Kemudian klik pilih Create, akan tampil gambar 1.2

Gambar 1.2. Lokasi Desain dan Kode Program HTML

12.2. Mendefenisikan Situs Lokal

Situs lokal merupakan suatu tempat dalam hardisk komputer anda yang berfungsi untuk
menampung atau menyimpan file-file halaman web dalam bentuk root folder dan subfolder. Setelah
kita selesai mendefenisikan situs lokal untuk situs yang akan kita buat di dreamweaver, nantina

1
secara otomatis semua file dan gambar akan tersimpan ke folder yang telah kita defenisikan dalam
situs lokal. Ikutilah langkag-langkah berikut ini :

a. Buatlah folder dalam hardisk anda [dalam buku ini dibuat pada :
c:\apache\httdocs\ErwinProject\Project1]

b. Pada DreamWeaver, klik menu Site → Mange Site, maka akan tampil kotak dialog:

Gambar 1.3. Kotak dialog Mange Site

c. Pilih New, akan tampil dua pilihan yaitu: Site dan FTP & RDS Server, pilihlah Site, perhatikan
gambar 1.4.

Gambar 1.4. Manage Site setelah memilih New

d. Kemudian akan tampil kotak dialog Site Defenition, klik tab Advanced, lalu isikan pada bagian :

Site Name : SitusPertamaku

Local root folder : C:\apache\htdocs\ErwinProject\Project1\

Default image folder : C:\apache\htdocs\ErwinProject\Project1\Images\ , gbr 1.5.

Gambar 1.5. Kotak dialog Site Defenition

Lalu klik Ok, hingga tampil gambar 1.6.

2
 Gambar 1.6. SitusPertamaku dalam kotak dialog Manage Site

Artinya bahwa kita telah mempunyai sebuah situs lokal yang telah kita defenisikan pada
dreamweaver 2004, lalu jangan lupa mengklik Done.

12.3. Menyimpan File

Setelah selesai mendefenisikan situs lokal atau bekerja di suatu file, simpanlah hasil
pekerjaan tersebut dengan mengklik File→Save As, akan tampil kotak dialog penyimpanan file
seperti gambar 1.7.

Gambar 1.7. Menyimpan File Project1.htm

[File tsbt otomatis akan tersimpan pd folder c:\apache\htdocs\ErwinProject\Project1\Project1.htm]

12.4. Bentuk Layout SitusPertamaku

Untuk memudahkan kita dalam membuat suatu layout web, maka sebaiknya gambarlah
terlebih dahulu di kertas bentuk layout yang kita inginkan, misalnya kita ingin membuat
SitusPertamaku seperti tampilan gambar 1.8.

Gambar 1.8. Layout Web ErwinComputindo.htm

3
Maka bentuk layout dari situs tersebut kita gamabar seperti berikut :

Gambar 1.9. Bentuk layout yang sesuai dengan situs erwincomputindo.htm

Untuk dipahami bahwa bagian-bagian dari tabel pada dreamweaver adalah sebagai berikut:

Gambar 1.10. Bagian-bagian tabel pada dreamweaver 2004

12.5. Menggunakan Macromedia Dreamweaver 2004 Membuat Layout SitusPertamaku

a. Jalan Macromedia Dreamweaver

b. Klik menu Insert → Table, akan tampil kotak dialognya. Isikan pada Rows : 4, Columns : 3, Table
width : 790 pixels, Border thickness : 0, Cell padding : 0, Cell spacing : 0 dan pilih None pada
bagian Header. Lihat gambar 1.10.

Gambar 1.11. Kotak dialog Table pada Dreameaver 2004

4
c. Klik Ok, akan terbentuk tabel dengan 4 baris, 3 kolom, lihat gambar 1.11

Gambar 1.12. Tabel dengan 4 baris dan 3 kolom

d. Agar tabel selalu berada ditengah halaman web yang akan kita bangun pilih tabel kemudian pada
propertiesnya bagian Align: Center, perhatikan gambar 1.12.

Gambar 1.13. Properties Table dengan Align: Center

e. Blok semua kolom pada baris kedua menggunakan mouse, kemudian klik Modify → Table →
Merge Cell, maka kolom-kolom pada baris kedua akan menyatu menjadi satu kolom dan hasilnya
seperti ditunjukkan gambar 1.13.

Gambar 1.14. Menggabungkan kolom baris kedua menjadi satu kolom

f. Pada baris ketiga, kita memerlukan hanya dua kolom, maka bloklah kolom 2 dan kolom 3, lalu
klik Modify → Table → Merge Cell, hasilnya seperti gambar 1.14.

Gambar 1.14. Menggabungkan kolom 2 dan kolom 3 pada baris ketiga

g. Terakhir menggabungkan semua kolom yang ada pada baris keempat, Bloklah semua kolom
yang ada dibaris keempat, lalu klik Modify → Table → Merge Cell, hasilnya:

Gambar 1.15. Menggabungkan semua kolom pada baris keempat

5
12.6. Menghias header SitusPertamaku

Untuk membuat header Situs Pertamaku ini seluruh gambar-gambar yang diperlukan telah
disediakan pada folder c:\apache\htdocs\ErwinProject\Project1\Image, untuk itu lakukanlah
langkah-langkah berikut ini :

a. Pada baris pertama dari layout SitusPertamaku, letakkan kursor pada kolom pertama, lalu klik
Insert → Image, akan tampil kotak dialog seperti gambar 1.16.

Gambar 1.16. Kotak dialog select image source

b. Pilih header_01.jpg, lalu Ok maka akan terlihat seperti gambar 1.17

Gambar 1.17. Gambar header_o1.jpg telah masuk ke kolom 1 baris pertama

c. Lakukan hal yang sama untu kolom ke 2, dan kolom ke 3 sehingga terbentuk seperti gambar 1.18.

Gambar 1.18. Header SitusPertamaku baris pertama

12.7. Hiasan header pada baris kedua

Pada bagian ini akan diisikan teks berjalan dari kanan ke kiri(Marquee), ikutilah langkah-
langkah berikut ini:

a. Letakkan kursor pada baris kedua, lalu pilih propertiesnya, dan pada bagian Bg:
Merah(#FF0000), seperti gambar 1.19.
b.
6
 Gambar 1.19.Properties baris kedua dengan Bg:Merah

c. Kemudian klik View→Code and Design, maka akan tampil mode code di atas mode design,
lalu tuliskan teks dan tag : <marquee> Konsultan Proyek-proyek Pengembangan Perangkat
Lunak Berbasis Jaringan </marquee>, hasilnya seperti gambar 1.20.

Gambar 1.20. Penulisan teks dan tag marquee dimode Code

d. Blok teks tersebut dan ubahlah font menjadi Arial, Size =16 pada propertiesnya.
12.8. Mengisi content SitusPertamaku

Content pada situspertamaku dimulai dari baris ketiga yang terdiri dari dua kolom, pada
kolom pertama akan di tempati tombol-tombol yang berfungsi sebagai navigasi (beberapa tombol
yang dilinkkan ke halaman lain), pada situspertamaku akan dibuat tujuh tombol flash yang sudah
disediakan oleh dreamweaver, ikuti langkah-langkah berikut ini :

a. Letakkan kursor pada kolom pertama baris ketiga, lalu pilih pada propertiesnya bagian Horz :
Center dan Vert : Top, perhatikan gambar 1.21.

Gambar 1.21. Properties Kolom pertama dengan Horz : Center dan Vert :Top

b. Tekan enter pada keyboard untuk membuat pragraf baru, lalu klik menu Insert→ Table, akan
tampil kotak dialognya, isikan pada Rows : 7, Columns : 1, Tablewidth : 110 pixels, Border
Thickness : 0, Cell padding : 0 Cell spacing : 5, hasilnya seperti gambar 1.22.

7
 Gambar 1.22. Tabel pada kolom 1 baris ke 3 situs pertamaku berisi 7 baris

c. Pada tabel yang baru saja dibuat, letakkan kursor pada baris pertama, lalu klik
Insert→Media→Flash Button, akan tampil kotak dialog insert flash button seperti gambar
1.23, Pilih pada Style : Beveled Rect-Blue, Button text : HOME dan Link: Project1.htm.

Gambar 1.23. Kotak dialog Insert Flash Button

Klik ok, hasilnya seperti gambar 1.24.

Gambar 1.24. Tombol Home di Link ke Project1.htm

d. Lakukan hal yang sama seperti pada point langkah c di atas satu-persatu kita hanya perlu
mengubah pada bagian Button txt dan linknya saja, sehingga secara lengkapnya diperoleh
seperti gambar 1.25.

8
 Gambar 1.25. Navigasi situspertamaku

12.9. Content untuk kolom informasi utama

Content dari situspertamaku berada pada baris ketiga kolom kedua yang berisi informasi
utama dari ERWINCOMPUTINDO, langkah-langkah pembuatannya :

a. Letakkan kursor pada kolom kedua baris ketiga situspertamaku, lalu pada propertiesnya pilih
bagian Vert: Top, tekan tombol Shift+Enter pada keyboard untuk pindah baris. Tuliskan Teks
salam pembuka “Selamat Datang di ERWIN COMPUTINDO”, aturlah format teksnya pada
properties, hasilnya seperti gambar 1.26.

Gambar 1.26. Teks salam pembuka pada baris 3 kolom 2

b. Kemudian tekan tombol enter pada keyboard untuk membuat pragraf baru. Klik menu
Insert→ Image, akan tampil kotak dialog pencarian gambar, carilah gambar keluarga.jpg,
hasilnya seperti gambar 1.27.

9
 Gambar 1.27. Memasukkan gambar keluarga dibawah teks salam pembuka

c. Tuliskan informasi secukupnya disebelah kanan gamabar keluarga, gambar 1.28

Gambar 1.28. Menuliskan teks disebelah kanan Gambar keluarga

d. Kemudian pilih gambar keluarga tersebut dan atur propertiesnya, isikan pada H Space: 20
dan pilih pada Align : Left seperti gambar 1.29.

Gambar 1.29. Properties gambar keluarga dengan H Space: 20 dan Align : Left

e. Informasi yang baru diketik akan berpindah ke sebelah kanan tepat berdampingan dengan
gambar keluarga, lihat gambar 1.30.

Gambar 1.30. Teks tepat berdampingan disebelah kanan gambar keluarga

10
 f. Tambahkanlah beberapa teks hingga diperoleh seperti gambar 1.31.

Gambar 1.31. Hasil penambahan beberapa Teks

12.10. Bagian Footer

Bagian footer terletak pada baris keempat dan hanya mempunyai 1 kolom, pada kolom
tersebut isikanlah copyrigt dari ERWINCOMPUTINDO dan tahun pembuatan situspertamaku seperti
langkah berikut ini:

a. Letakkan kursor pada baris keempat, lalu pilih pada propertiesnya bagian Bg: #FF0000

b. Tuliskan teks “Copyright@ 2006 ERWINCOMPUTINDO. All right reserved”. Hasilnya seperti gambar
1.32.

Gambar 1.32. Penulisan copyright pada baris terakhir situspertamaku

12.11. Menjalankan situspertamaku lewat Web browser pada Webserver Apache

a. Jalankan internet explorer

b. Pada +Enter, akan
segera tampil seperti halaman web berikut ini:

11
 Gambar 1.33. http://localhost/ErwinProject/project1/Project1.htm

IV. Tugas-Pertemuan 12 :

1. Koleksi dan desainlah foto-foto diri atau keluarga, maupun gambar-gambarmenarik lainnya
menggunakan Adobe Photoshop
2. Desainlah foto-foto tersebut agar sesuai dengan kebutuhan di Halaman Web
3. Desain juga bentuk tombol-tombol atau Navigasi yang anda hiasi menggunakan Adobe
Photoshop maupun soft ware lainnya.

12