Step By Step Membuat Website Dengan Mudah

Pengenalan dasar

Dreamweaver MX

Step by Step membuat Website dengan mudah

Dipl.- Wirtschaftsinformatikerin (FH) Dipl.- Technische Redakteurin (FH) Dian Suprapto

Copyright Kharisma 2005

DAFTAR ISI: 1. MENGENAL DESKTOP DREAMWEAVER MX..........................3 2. MEMBUAT HALAMAN PERTAMA (INDEX)............................5 2.1. 2.2. 2.3. 2.4. 2.5. 2.6. 2.7.

Define Site...............................................................5 Membuat kerangka layout dengan tabel ..................7 Memformat text.......................................................8 Memasukkan gambar ..............................................9 Membuat Hyperlinks.............................................. 10 Menentukan page properties ................................. 10 Kontrol tampilan di browser .................................. 11

3. BEKERJA DENGAN FRAME ............................................... 12 3.1 Menyiapkan file untuk dimasukan ke frame .......... 13 3.2. Cara membuat frame ............................................. 15 3.3. Mengisi frame........................................................ 15 3.4. Mengubah frame.................................................... 15

2

1.

MENGENAL DESKTOP DREAMWEAVER MX

Software DreamWeaver ini merupakan salah satu software untuk mendesain website atau homepage, selain software FrontPage yang sering kita dengar. Untuk memahami cara bekerja dengan DreamWeaver paling tidak ada tiga komponen yang perlu dimengerti pengguna software ini: -

Halaman utama: untuk desain website itu sendiri (tampilan web maupun kode HTML)

-

Obyek / Tool: terdiri dari common, layout, text, frames, forms, templates, character, head, script dan application. Fungsinya adalah memasukan obyekatau sifat obyek yang Anda inginkan, misalnya memasukan table dan segala sifat-sifatnya, atau membubuhkan sifat text.

-

Properties: berfungsi sebagai alat pengedit obyek yang sedang Anda olah. Proporties akan berubah sesuai dengan obyek yang sedang Anda olah.

Bila object atau properties tidak tampak pada layar Anda, klik Windows Æ insert atau properties.

3

DreamWeaver menyediakan tiga metode dalam mendesain website. Pertama, mendesain dengan menggunakan kode HTML (bahasa dasar dalam membuat website). Metode pertama ini tentunya bagi pendesain yang sudah mahir kode HTMLnya. Kalau kita memilih metode pertama ini, maka layar di tampilan utama ini murni kode-kode HTML. Sekali lagi ini cukup merepotkan bagi pemula. Karenanya tidak dianjurkan bagi pemula menggunakan metode pertama ini. Kedua, kita bisa desain juga dengan visualisasinya seperti kita mengetik melalui editor word prosesor (MS WORD, misalnya). Metode kedua ini cocok bagi pemula. Karena pendesain tidak perlu repot-repot memikirkan kode HTML. Anda cukup klik tool yang Anda perlukan, DreamWeaver akan membuat sendiri HTML kodenya. Jadi pada dasarnya tool hanya membuat HTML kode. Berbeda dengan metode pertama, layar tampilan yang nampak sama seperti di website. Dalam dunia Desktop Publishing disebut WYSIWYG (What you see is what you get = Apa yang Anda lihat itulah tampilan sebenarnya). Atau metode yang ketiga, yaitu perpaduan keduanya, mendesain secara visual tapi juga bisa mengedit dengan kode HTML. Metode ini sebetulnya lebih tepat daripada hanya mengAndalkan WYSIWYG. Sebab koreksi akan lebih tepat dilakukan dengan kode HTML daripada sekedar tools.

4

2.

MEMBUAT HALAMAN PERTAMA (INDEX)

Di bab ini Anda akan belajar: - Define Site: menentukan folder, FTP login/password, dll… - Cara meletakkan gambar, obyek atau text dengan menggunakan kerangka dasar yaitu table. - Memformat text dengan tool atau properties. - Memasukan grafik - Membuat hyperlinks - Membuat ketentuan-ketentuan halaman (warna background halaman, judul halaman, dll…) Bila Anda mengikuti petunjuk step by step di bab ini, Anda akan mendapatkan halaman index seperti pada gambar dibawah ini:

Gbr 2.1: Halaman pertama, Index.

2.1.

Define Site

Define Site penting Anda lakukan bila Anda bekerja online atau meng-upload homepage Anda ke internet. Dengan fungsi ini DreamWeaver akan meletakkan semua file websites Anda ke dalam sebuah root folder (sebuah direktori). Direktori beserta isinya ini yang nantinya akan di upload ke server. 1. 2. 3. 4. 5. 6.

Klik menu Site Æ New Site... Muncul dialog Site definition for unnamed Site 1 Tulis Site Name yang Anda inginkan pada kolom yang tersedia. Klik next. Pada dialog berikutnya tentukan apakah Anda akan menggunakan server technology. Klik next Pilih direktori tempat menyimpan file. Klik next Dialog berikutnya (lihat gbr di bawah) penting untuk mengupload website Anda.

5

Upload biasanya dilakukan dengan FTP (File Transfer Protocol). Ketik hostname Anda (www.alamat.de), berikut FTP login dan password. Klik next, selesaikan dialog dan done. Semua files situs Anda akan disimpan dalam satu root folder dan akan ditampilkan oleh dreamweaver secara otomatis seperti misalnya contoh dibawah ini:

Gbr 2.3: contoh site yang sudah ter-define

6

2.2.

Membuat kerangka layout dengan tabel

Tabel merupakan perangkat yang sangat berguna untuk merancang tata letak desain website. Tabel terdiri dari tiga bagian utama, yaitu baris, kolom dan sel yang merupakan pertemuan antara baris dan kolom. Setelah membuat suatu table, Anda bisa memasukkan elemen apa saja dalam tabel tersebut, seperti teks, gambar, form dan lainnya. Bahkan bisa juga kita membuat tabel dalam tabel untuk memanipulasi tampilan Anda di website. Misalnya saja halaman pertama website Kharisma terdiri dari beberapa tabel yang dijadikan sebagai kerangka layout. Tentu saja user kharisma tidak akan melihat kerangka tabel, karena tabel sudah di-set “blind” atau invisible.

Gbr 2.4: tabel sebagai kerangka layout halaman pertama kharisma. Bagaimana cara meletakkan teks “Selamat datang di website kami”, agar terlihat center secara horisontal maupun vertikal? Mungkin Anda akan berpikir: -

agar terletak center secara horisontal, klik simbol

-

agar terletak center secara vertikal, klik Enter berkali-kali sampai terlihat ditengah halaman.

Solusi diatas sangat tidak tepat. Mengapa? Sebab besarnya halaman pada layar monitor setiap user internet tergantung dari resolusi layar dan besarnya window yang dipilih user, tidak seperti ukuran kertas yang sudah pasti. Solusi yang tepat adalah dengan menggunakan tabel invisible. Untuk membuat halaman seperti pada gbr. 2.1 ikuti langkah berikut:

7

Cara membuat tabel: pada kumpulan common 1. Klik simbol 2. Beri ketentuan seperti dibawah:

Keterangan: - Width = 100 Percent menAndakan tabel berukuran 100 % sama dengan layar monitor tempat Website dibuka. - Border = 0 menAndakan tabel tidak kelihatan “blind”. Cara memformat tabel dengan menggunakan layar propertie: 1. Klik tabel yang sudah Anda buat 2. Isi propertie dengan

ketentuan

sbb.:

Keterangan: W = 100% dan H = 100% menAndakan table berukuran sama dengan layar monitor tempat Website dibuka.

2.3. Memformat text Setelah teks yang ingin digunakan sudah Anda masukkan pada jendela (layar) dokumen, Anda dapat menformat teks tersebut seperti membuat teks menjadi tebal, iring bergaris bawah, mengubah warna dan jenis font teks beserta besar kecil eksnya. Teks juga bisa diformat rata kiri, kanan tengah atau rata kiri dan kanan. Untuk menformat teks terebut, Anda gunakan layar properti Teks. Jika kotak properti itu belum tampak di layar, Anda dapat menampilkannya dengan menggunakan menu Window Æ Properties. Atau bisa juga dengan short cut dengan menekan Ctrl+F3. Dengan properti teks, Anda dapat juga membuat list (daftar) berurut (orderred

8

list) dan daftar tanpa berurutan (unordered list). Daftar berurut dapat menggunakan tAnda penomoran dengan angka atau huruf. Daftar tanpa berurutan menggunakan tAnda bulatan atau kotak.

2.4. Memasukkan gambar Sebelum memasukan gambar, pastikan bahwa gambar tersebut ada di dalam direktori (root folder) yang sama dengan file html Anda atau di bawah direktori html tersebut (sub direktori). Semisal Anda buat direktori di C:/website untuk menyimpan semua file html Anda, maka Anda buat sub direktori gambar untuk menyimpan semua file gambar, C:/website/gambar. Kegunakan dari sub direktori khusus gambar tersebut adalah untuk memudahkan Anda dalam memilih dan memilah file html dan gambar. Akan terasa lebih bermanfaat jika file html Anda sangat banyak dan tentunya file gambar Anda akan banyak pula.

pada kumpulan object 1. Klik simbol 2. Pilih gambar yang akan dimasukan 3. Pastikan gambar yang Anda pilih berada dalam satu direktori. Bila file belum Anda copy di root folder site Anda, gambar tidak akan bisa di upload ke server, walaupun gambar nampak di layar monitor DreamWeaver Anda. Bila file diluar root folder Anda, akan muncul dialog seperti dibawah ini:

9

Klik Yes: DreamWeaver akan mengcopy file di root folder site Anda. 4. Gunakan propertie untuk meletakkan gambar di tengah (loihat gbr. 2.1)

2.5. Membuat Hyperlinks Kalau Anda mempunyai lebih dari satu file html maka Anda tentu harus menggunakan link. Link adalah salah satu tag (perintah) dalam html yang berfungsi untuk menghubungkan dengan file html atau program yang lain. Sama seperti waktu akan memasukkan gambar, Anda usahakan berkerja dalam satu root folder. Anda dapat membuat link: - dengan teks: link teks adalah link yang diakses dengan menekan teks yang dipilih. - dengan gambar: link gambar adalah link yang diakses dengan menekan gambar tertentu yang dipilih. Dalam workshop ini, Anda akan membuat link teks “Enter”: 1. Sorot teks „Enter“ 2. Isi propertie dengan ketentuan sbb.:

Keterangan: - Link = frame.htm: Dengan menekan text Enter, user akan mendapatkan halaman kedua yaitu halaman frame.htm. Anda bisa mengetiknya, atau browse pada simbol disampingnya. Mengenai halaman ini akan dibicarakan di bab berikutnya. - Target = _parent: halaman baru akan muncul pada window yang sama - Target = _blank: halaman baru akan muncul pada window baru

2.6. Menentukan page properties Page Properties mendefinisikan ketentuan-ketentuan halaman, seperti batas kiri, kanan atas bawah, judul halaman, dan gambar background: 1. Klik Modify Æ Page Properties 2. Beri ketentuan seperti berikut:

10

- Margin: batas tepi diberikan 0, berarti tanpa tepi. - Link dan active Links: diberi warna #FFCCOO (kuning) - Visited Link: links yang sudah dikunjungi berubah warna menjadi #3366CC

2.7. Kontrol tampilan di browser Walaupun Dreamweaver adalah suatu WYSIWYG-Editor tetap saja Anda harus mengkontrol tampilan Website di Browser. 1. Pastikan Anda telah men-save html-file Anda. . Dreamweaver akan menampilkan automatis 2. Klik simbol halaman yang Anda buat di browser.

Perhatikan tampilan Anda di Browser Internet-Explorer (IE) belum tentu sama di Browser Netscape! Bila Anda melakukan perubahan pada html-file Anda (di Dreamweaver-Editor) tapi tampilan di Browser tidak berubah, pastikan: 1. Anda telah men-save html-file Anda di Dreamweaver. 2. klik refresh Selamat Anda telah berhasil membuat halaman pertama! Sebuah website tentunya tidak hanya terdiri dari satu halaman. Berikutnya Anda akan membuat halaman kedua. Ikuti step berikutnya.

11

3. BEKERJA DENGAN FRAME Masih ingat? Jika user klik “Enter” pada halaman index maka akan muncul halaman kedua. Bila Anda mengikuti petunjuk step by step bab ini, Anda akan membuat halaman seperti di bawah ini:

Gbr 3.1: Halaman 2 Halaman diatas sebetulnya menggunakan Frame (kerangka) yang terdiri dari tiga html-file, seperti yang tertera pada gambar 3.2: - Top: berisi file top.htm, - Left: berisi file left.htm, - Content: berubah-ubah, berisi file bab1_1.htm atau bab2_1.htm Dengan Frame Anda bisa mendapatkan seperti ini: - Bila Anda klik Bab 1 , maka akan muncul bab 1 di bagian content. - Sedangkan bila Anda klik Bab 2, bab 1 akan berganti bab 2 di bagian content.

12

Gbr 3.2: Frame yang terdiri dari 3 file

3.1

Menyiapkan file untuk dimasukan ke frame

Sebelum membuat dan mengisi Frame siapkan dulu file yang diperlukan: - top.htm - content.htm - left.htm File Bab1.htm /Bab2.htm 1. Insert text (copy paste misalnya) untuk file bab1 2. Ubah penampilan text dengan properties 3. save as bab1.htm misalnya.

Dengan cara yang sama, Anda membuat halaman bab2.htm File left.htm 1. klik file Æ new, category basic Page 2. insert table:

13

3. Ubah lebar kolom pertama dengan menggunakan layar propertie. Sorot kolom pertama, masukan di propertie: w=20 4. Isi tabel dengan text home, bab 1, bab 2 dan masukan nav_arrow.gif (panah) pada kolom pertama 5. pastikan Anda membuat tabel berisi text dan gambar seperti dibawah ini:

20 pixel 80 pixel

6. Tentukan links Home = index, Bab 1 = bab1.htm, bab2 = bab2.htm. 7. Tentukan warna background dan margin halaman.

7. save as left.htm File Top.htm 1. insert grafik workshop.gif 2. Tentukan margin halaman top.htm dengan Left , Top Margin = 10 misalnya. 3. save as top.htm

14

3.2. Cara membuat frame Tidak setiap frame mempunyai kerangka seperti gambar 3.2. Anda mempunyai pilihan membuat frame seperti di bawah ini misalnya:

Untuk keperluan Workshop kita lakukan langkah-langkah seperti dibawah: 1. Klik file Æ new, category frameset 2. Pilih bentuk frame fixed left, nested top:

3. beri nama frame misalnya frame.htm: save frameset as…

3.3. Mengisi frame 1. Letakkan cursor pada frame bagian atas. 2. Klik file Æ open in Frame Æ pilih top.htm Dengan cara yang sama Anda dapat mengisi kerangka bagian kiri dan tengah.

3.4. Mengubah frame Anda dapat dengan mudah memberi nama, merubah file atau lebar kerangka bagian atas, kanan dan content. Gunakan layar properties

15

1. Gunakan bersamaan klik kerangka bagian atas. 2. Beri ketentuan di layar propertie seperti di bawah ini:

Dengan cara yang sama Anda dapat memanggil layar propertie frame kanan dan tengah. Beri nama Frame kanan dengan FrameName = left, dan Frame tengah dengan FrameName = content. (Lihat gbr 3.2) Perhatikan pada layar propertie frame content , pilih Scroll = Default. Keterangan: No Resize = lebar dan tinggi kerangka tidak bisa dirubah user No Scroll = tidak disediakan scrollbar. Default Scroll = scrollen akan muncul otomatis bila teks panjang ke bawah. Scrollen hanya penting untuk kerangka content.

3.5. Menentukan target Target adalah tempat file-html dibuka. Hal ini sudah kita singgung di bab sebelumnya bagian hyperlinks. Dua target yang sudah disebut di bab sebelumnya: _ parent dan _blank Sekarang Anda akan membuat target seperti contoh dibawah ini: - Bila user klik home, akan muncul halaman index pada window yang sama - Bile user klik bab 1, akan muncul halaman bab1.htm di frame content - Bila user kilk bab 2, akan muncul halaman bab2.htm di frame content Pastikan Anda berada pada file left.htm 1. Sorot Home 2. Pada properties beri target = _parent Hyperlink membuka file home di window yang sama 3. Sorot Bab 1 4. Pada properties beri Scr = bab1_1.htm 5. Pada properties beri target = content Hyperlink Bab 1 membuka file bab1_1 di frame content 6. lakukan serupa untuk bab 2 Keterangan: - Target harus sama dengan nama frame yang Anda buat. Perhatikan penulisan besar dan kecil. Tips: Untuk menghindari kekeliruan, sebaiknya memberi nama file dan frame gunakan semuanya dengan huruf kecil.

16