Belajar Web: 2018

MACROMEDIA DREAMWEAVER 8

Ø Macromedia Dreamweaver adalah program untuk

MACROMEDIA DREAMWEAVER 8

Ø Macromedia Dreamweaver adalah program untuk membuat dan mengedit dokumen HTML secara visual dan mengelola halaman sebuah situs. Dreamweaver menyediakan banyak perangkat yang berkaitan dengan pengkodean dan fitur seperti HTML, CSS, JavaScript, PHP, ASP, ColdFusion, dan XML.

Ø Area Kerja Dreamweaver 8

Halaman Awal

Menu Di Dreamweaver

Pada halaman awal Dreamweaver 8 terdapat beberapa menu yang dapat dipilih :

· Open a Recent Item

Pada menu ini akan ditampilkan beberapa file yang sebelumnya pernah kita buka dengan menggunakan Dreamweaver 8. Atau di paling bawah ada Open yang dapat digunakan untuk membuka file yang lain.

· Create New

Pada menu ini kita dapat memilih dokumen baru apa yang akan kita buat dengan menggunakan Dreamweaver 8. Ada banyak pilihan, diantaranya HTML, ColdFusion, PHP, ASP, JavaScript, CSS.

· Create From Samples

Pada menu ini kita dapat membuat file berdasarkan contoh yang sudah diberikan oleh Dreamweaver.

Halaman Utama Dreamweaver 8

Keterangan :

Toolbar Dokumen

Toolbar dokumen digunakan untuk mengubah tampilan dan mengakses fungsi-fungsi penting secara cepat dan mudah. Pada toolbar dokumen terdapat menu untuk berpindah antar dokumen kerja window dan mengatur tampilan area kerja. Untuk mengatur tampilan kita bisa memilih Code, Split dan Design.

Menu Utama

Menu Utama berisi semua perintah yang dapat digunakan untuk bekerja pada Dreamweaver.

Insert Bar

Insert bar merupakan tempat semua perangkat kerja (tombol) tang digunakan untuk membuat halaman web. Insert bar mempunyai dua jenis tampilan, yaitu tampilan sebagai menu dan tampilan sebagai tab.

Ø Tab Common

Berisi semua tombol yang sering atau umum digunakan untuk membuat halaman web. Tombol yang ada di Tab Common antara lain Hyperlink, Email Link, Named Anchor, Table, Images.

Ø Tab Layout

Tab layout digunakan untuk membuat layout halaman web. Terdapat tiga jenis layout yang dapat dipilih, yaitu Standard, Expanded dan Layout.

· Untuk Standard view tampilan dokumen seperti biasa (berupa garis-garis tabel)

· Untuk Expanded view menampilkan border tabel yang direnggangkan sehingga semua rancangan tabel dapat dilihat dengan jelas baik itu baris dan kolomnya.

· Untuk Layout view rancangan tabel ditampilkan sebagai kotak-kotak yang dapat di-drag, dan diatur ulang ukurannya dengan mudah.

Tampilan Insert bar sebagai menu

Ø Tab Form

Tab form digunakan untuk membuat elemen dalam form, misalnya saja textarea, textfield, radio button, checkbox

Ø Tab Text

Tab text digunakan untuk membuat pengaturan text. Misalnya saja membuat text italic, strong, underline, h1.

Ø Tab HTML

Tab HTML digunakan untuk membuat garis horizontal, menambahkan meta tag dalam tag <head>, dan frame.

Ø Tab Application

Tab application digunakan jika aplikasi kita sudah berhubungan dengan suatu bahasa pemrograman dan sebuah database.

Ø Tab Flash elements

Tab flash elements digunakan untuk memasukkan elemen flash dalam dokumen yang kita buat.

Code View

Code View digunakan untuk melihat kode HTML dari halaman web yang sedang kita buat.

Panel Properties

Panel properties merupakan panel yang digunakan untuk melihat dan mengubah property dari semua objek yang ada di area kerja. Masing-masing objek mempunyai property yang berbeda. Untuk melihat property dari objek yang diinginkan, seleksi dulu objek tersebut.

Design View

Design View digunakan untuk melihat tampilan web dari kode HTML yang kita buat.

Panel Group

Panel group terdiri dari beberapa panel yang digunakan sebagai window pembantu untuk bekerja di Dreamweaver. Terdapat lima buah panel yaitu Design, Code, Application, Tag Inspector dan Files.

Ø Pada panel Files berisi semua files (html, image, swf) jika anda telah mendefinisikan suatu site ke dalam area kerja Dreamweaver.

Ø Pada panel code berisi semua penjelasan dari tag-tag HTML dan cara penggunaanya.

Ø Panel Design berisi format-format CSS yang ada pada dokumen yang sedang dikerjakan.

MENDEFINISIKAN SITE DENGAN DREAMWEAVER

Ø Dreamweaver memberikan kemudahan dalam manajemen file yang digunakan dalam membuat halaman web. Untuk itu diperlukan pengaturan agar Dreamweaver mengenali file-file Anda. Mendefinisikan site artinya mendefinisikan project baru kepada area kerja Dreamweaver.

Ø Untuk mendefinisikan site baru, klik menu site > Manage Site

Ø Kemudian pilih New > Site untuk menampilkan window baru yang berisi pengaturan site yang akan dibuat. Atau anda juga dapat mengaksesnya melalui menu utama Site > New Site.

Ø Pilih tab Advanced > Category > Local Info untuk mengatur folder-folder tempat file yang akan digunakan dalam membuat halaman web

Ø Pada isian Site Name, isikan nama project Anda atau nama situs Anda.

Ø Local Root Folder merupakan folder utama project anda. Beri centeng pada refresh local file list Automatically agar file terbaru anda muncul di Dreamweaver.

Ø Default Image Folder merupakan folder tempat file-file gambar anda disimpan. Default Image Folder harus berada di dalam Local Root Folder.

Ø Jika anda sudah mempunyai domain isikan alamat domain Anda di isian HTTP Address agar semua link yang ada pada ahalaman web anda selalu dicek.

Ø Enable Cache memungkinkan Dreamweaver menggunakan temporary file ketika adan mengetes halaman web anda (Preview in Browser) pada browser di computer local. Fungsinya untuk mempercepat proses pengeksekusian file ke browser.

TABEL

Dalam pembuatan website, tabel memiliki fungsi yang tidak kalah penting dengan tag-tag HTML lainnya. Pertama tabel berfungsi untuk menampilkan informasi secara terstruktur, ringkas dan mudah dibaca. Kedua, tabel juga berfungsi untuk mengatur tampilan homepage agar lebih menarik.

Ø Insert -> Table

Ø Table Properties

Ø Cell Properties

Ø Row Properties

Ø Column Properties

IMAGES

Ø Gambar yang biasa digunakan dalam halaman web adalah gambar yang berformat jpg, gif dan png

Ø Insert -> Images

Ø Layout Mode

HYPERLINK

Ø Link ke website lain

Ø Link ke halaman lain

Ø Email Link

Ø Insert -> Hyperlink

Email Link

Ø Insert -> Email Link

FORM

Ø Form digunakan untuk mengumpulkan informasi dari user

Elemen-Elemen Form

Ø Textfield

Berupa kolom isian satu baris yang digunakan untuk memasukkan data

Ø Password Field

Prinsip kerjanya sama dengan textfield, hanya saja karakter yang diinput akan diubah menjadi ******

Ø Textarea

Berupa kolom isian yang bisa lebih dari 1 baris

Ø Checkbox

Kotak pilihan yang bisa diberi tanda “cek” dan bisa dipilih lebih dari 1

Ø Radio Button

Lingkaran pilihan yang bisa diberi tanda “cek” dan hanya bisa dipilih 1 saja

Ø List / Menu

Digunakan untuk membuat daftar pilihan menu yang bisa dipilih oleh user

Ø File Field

Digunakan untuk memilih file pada saat proses upload

Ø Button

1. Submit Button

Digunakan untuk mengirimkan data yang diinputkan

2. Reset Button

Digunakan untuk mengembalikan isian form seperti semula (kosong)

3. Button

Validasi Form

Ø Pada beberapa kasus, kolom isian yang ada pada form harus diisi atau tidak boleh kosong

Ø Misalnya pada saat pengisian form pendaftaran email, maka nama harus diisi. Jika tidak diisi maka tampilkan pesan kesalahan pengisian form dan data tidak akan diproses

MEMBUAT TEMPLATE HALAMAN WEB

Ø Website yang baik adalah website yang konsisten. Konsisten di sini berarti memiliki bentuk, layout dan navigasi yang sama antar satu halaman dengan halaman yang lainnya. Oleh karena itu, jika kita membuat sebuah website, kita harus mempersiapkan sebuah template. Jika kita tidak menggunakan template, tentunya Kita akan kesulitan dalam me-manage web, apalagi jika jumlah halaman yang dibuat cukup banyak. Dengan menggunakan template, maka membuat halaman lainnya tidak menjadi masalah. Sebanyak apapun halaman yang akan Kita buat nanti, Kita hanya tinggal berpatokan pada template yang sudah Kita buat. Jika, ada bagian yang salah, Kita hanya cukup mengubah template saja dan halaman lainnya otomatis akan mengikuti template yang Kita buat.

Ø Jika kita menggunakan template, biasanya ada bagian-bagian tertentu pada website yang harus selalu sama, misalnya saja logo dan navigasi. Bagian-bagian ini nantinya dibuat agar tidak bisa diedit. Kemudian ada juga bagian yang harus bisa diedit, misalnya saja isi website.

Ø Kita dapat membuat template dengan menggunakan Macromedia Dreamweaver. Template yang dibuat dengan menggunakan Dreamweaver akan mempunyai ekstension .dwt

Ø Langkah-langkah membuat template

· Definisikan sebuah situs baru di dreamweaver (sudah pernah dipelajari di pertemuan sebelumnya)

· Buatlah layout halaman web seperti biasa. Kemudian simpan sebagai template. Pilih File -> Save as Template

· Sebagai contoh, simpan dengan nama templateutama. Klik tombol Save

Ø Jika template berhasil dibuat, perhatikan pada Panel Files. Di sana akan terbentuk folder “Templates” dan sebuah file dengan ekstension .dwt

Ø Selanjutnya adalah menentukan bagian-bagian mana saja yang boleh diedit dan tidak boleh diedit. Pada contoh yang diberikan, bagian yang bisa diedit adalah bagian isi yang ada di sebelah kiri. Bagian menu dan header tidak akan berubah.

Ø Dalam contoh ini bagian isi, kita bagi lagi menjadi 2, yaitu judul dan isinya.

Ø Letakkan kursor pada sebelah kiri halaman. Pilih menu Insert -> Template Objects -> Editable Region

Ø Selanjutnya akan muncul window seperti ini :

Ø Beri nama JudulHalaman dan klik OK

Ø Dengan cara yang sama, buat lagi sebuah editable region dan beri nama IsiHalaman. Akan terbentuk 2 buah editable region seperti ini:

Ø Kita sudah berhasil membuat sebuah template. Selanjutnya adalah membuat halaman lain berdasarkan template yang sudah kita buat tadi.

Menggunakan Template Untuk Halaman Lain

Ø Buatlah sebuah file baru dari menu New -> File. Pilih tab Template dan pilih templateutama, kemudian klik tombol Create

Ø Setelah itu akan terbentuk sebuah halaman web yang menggunakan template dan siap untuk diisi kontennya

Ø Lakukan perubahan pada kontennya dan simpan dengan nama home.html

Ø Buatlah 2 halaman lainnya dengan nama kritik.html dan berita.html

Note :

Jika sebuah halaman menggunakan template tertentu, maka halaman tersebut akan otomatis diupdate jika kita mengupdate template

MEMBUAT ROLLOVER IMAGES

Ø Rollover images adalah sebuah image yang akan berubah (digantikan dengan image lain) ketika kursor berada di atas image tersebut. Image seperti ini biasa digunakan dalam menu dan tombol. Berikut ini adalah contoh membuat rollover images.

Ø Masuk ke menu Insert -> Image Objects -> Rollover Image. Kemudian akan muncul kotak dialog sebagai berikut :

MEMBUAT FLASH BUTTONS

Ø Flash Buttons merupakan sebuah tombol yang digunakan sebagai menu. Flash Buttons adalah sebuah flash image.

Ø Untuk membuat flash buttons, pilih menu Insert -> Media -> Flash Button.

Ø Style digunakan untuk memilih jenis tombol yang akan digunakan.

Ø Kolom Button Text digunakan untuk tulisan yang akan diletakkan di atas tombol tersebut.

Ø Kolom Font dan Size digunakan untuk menentukan jenis dan ukuran huruf.

Ø Kolom Link adalah URL yang akan dituju jika gambar diklik.

Ø Kolom Bg color digunakan untuk menentukan warna background.

Ø Kolom Save as digunakan utntuk menyimpan file swf.

Ø Kolom Image name adalah nama image tersebut.

Ø Kolom Original Image adalah image yang aslinya (image yang akan muncul di awal).

Ø Kolom Rollover Image adalah image yang akan menggantikan image asli ketika kursor berada di atas image asli.

Ø Checkbox Preload rollover image jika dicek, maka rollover image akan diload ketika halaman diload. Jadi, akan mencegah waktu download yang lama ketika kursor melewati image.

Ø Kolom Alternate image digunakan sebagai keterangan pada gambar.

Ø Kolom When clicked, Go to URL adalah URL yang akan dituju jika gambar diklik.

MEMBUAT FLASH TEXT

Ø Flash text hampir sama dengan rollover, bedanya flash text hanya merubah warna huruf saja.

Ø Masuk ke menu Insert -> Media -> Flash Text.

Ø Pilih jenis huruf, ukuran dan atribut font lainnya.

Ø Kolom Color digunakan untuk menentukan warna huruf

Ø Kolom Rollover Color digunakan untuk menentukan warna huruf ketika kursor melewati huruf awal.

Ø Kolom text adalah text yang akan ditampilkan

Ø Kolom Link adalah URL dari text tersebut ketika diklik

Ø Bg Color digunakan untuk menentukan latar belakang huruf

Ø Kolom save as adalah nama file yang akan disimpan

MEMBUAT NAVIGASI BAR

Ø Navigasi bar merupakan sekumpulan image yang digunakan seperti menu untuk menjelajahi isi web tersebut.

Ø Masuk ke menu Insert -> Image Objects -> Navigation Bar

Ø Tanda + dan – digunakan untuk menambahkan atau mengurangi menu.

Ø Kolom Element name digunakan untuk menentukan nama menu

Ø Kolom Up image digunakan untuk memilih gambar awal

Ø Kolom Over Image digunakan untuk mengganti gambar awal ketika kursor meleawti gambar awal

Ø Kolom Down image digunakan untuk mengganti gambar awal ketika kursor diklik

Ø Kolom Over while down image digunakan untuk mengganti gambar jika gambar yang asli belum selesai diload

Ø Kolom alternate text digunakan untuk text alternative

Ø Kolom When clicked, go to URL digunakan untuk menentukan URL jika menu diklik

Ø Checkbox Preload Images digunakan untuk menentukan apakah gambar akan diload sebelumnya

Ø Checkbox Show “Down image” initially digunakan untuk menentukan apakah gambar pada Kolom Over while down image akan diload paling awal

Ø Menu Insert digunakan untuk menentukan apakah menu akan dibuat secara vertical atau horizontal.

CASCADING STYLE SHEETS

Ø CSS (Cascading Style Sheet) digunakan untuk melengkapi file HTML, dan tugas utamanya adalah menetapkan aturan tampilan/style yang akan digunakan pada sebuah website.

Ø CSS adalah sebuah dokumen yang berdiri sendiri dan dapat dimasukkan dalam kode HTML atau sekedar mejadi rujukan oleh HTML dalam pendefinisian style. CSS menggunakan kode-kode yang tersusun untuk menetapkan style pada elemen HTML atau dapat juga digunakan membuat style baru yang biasa disebut class

Ø CSS dapat mengubah besar kecilnya text, mengganti warna background pada sebuah halaman, atau dapat pula mengubah warna border pada tabel, dan masih banyak lagi hal yang dapat dilakukan oleh CSS. Singkatnya, CSS digunakan untuk mengatur susunan tampilan pada halaman HTML.

Ada 3 tipe CSS berdasarkan peletakannya dalam sebuah dokumen HTML

· External Style

External style sheets merupakan dokumen css yang disimpan dalam file berbeda dengan file HTML. File ini berekstension .css

· Untuk menyertakan file css, letakkan tag berikut ke dalam

<head>

</head>

Biasa dipakai jika beberapa halaman akan menggunakan style yang sama.

Internal Style : CSS diletakkan di antara tag

<head>

letakkan css di sini

</style>

</head>

Inline Style : CSS diletakkan di dalam tag HTML

Dreamweaver dan CSS Panel

Ø Untuk membuat CSS di Dreamweaver, telah tersedia CSS Panel. CSS Panel dapat dimunculkan melalui menu Window >> CSS Styles

All Mode

Ø All Rules

Menampilkan semua styles yang ada.

Ø Properties

Menampilkan spesifik style yang terpilih

Current Mode

Ø Summary for Selection

Menampilkan spesifik style yang terpilih (tidak bisa diedit)

Ø Rules

Menampilkan nama style dan pada tag mana style ini digunakan

Ø Properties

Menampilkan spesifik style yang terpilih dan bisa diedit

Ø Attach Style Sheet

Menampilkan dialog box untuk menambahkan external style sheet pada dokumen

Ø New CSS Rule

Menampilkan dialog box untuk membuat aturan CSS yang baru

Ø Edit Style Sheet

Menampilkan dialog box untuk mengubah aturan CSS yang sedang dipilih

Ø Delete CSS Rules

Menghapus aturan CSS yang sedang terpilih

Ø Show Category View

Membagi CSS properties meenjadi 9 kategori. Font, Background, Block, Border, Box, List, Positioning. Extentions, dan Tables, Content, Quotes

Ø Show List View

Menampilkan CSS properties berdasarkan alphabet secara berurutan

Ø Show Only Set Properties

Hanya menampilkan CSS properties yang diipilih saja

Istilah Dalam Style Sheets

Style rule

Ø Cascading style sheet merupakan kumpulan aturan yang mendefinisikan style dari document. Sebagai contoh kita bisa membuat aturan style yang menentukan bahwa semua <H1> di tampilkan dengan warna biru.

Ø Selector

Ø selector { property1: value; property2:value, . . .}

Ø H1{ color:green; background-color:orange}

Style sheets terdiri dari dua bagian:

Ø Selector , adalah nama dari style, bisa berupa tag seperti <p> atau nama lain seperti .header

Bagian pertama sebelum tanda “{}” disebut selector

Ø Declaration, adalah spesifikasi dari elemen pada style

Terdiri dari property dan value

Antara property yang satu dan yang lainnya dipisahkan dengan tanda ; (titik koma)

Meng-attach Style Sheet ke dalam dokumen HTML

Ø Anda dapat menyertakan style sheet yang sudah ada ke dalam dokumen HTML

Ø Klik kanan pada dokumen HTML yang sedang diedit di Dreamweaver, pilih CSS Styles >> Attach Style Sheet

Ø Pilih file CSS yang akan di-attach

Ø Anda bisa memilih radio button Add as Link, jika ingin meng-attach sebagai external style

Ø Atau pilih Import jika ingin menjadikannya internal style

Ø Menambahkan style baru atau style yang sudah ada

Ø Untuk menambahkan style baru, bisa melalui beberapa cara

Ø Klik kanan di bawah CSS Panel dan pilih New

Ø Melalui menu Text >> CSS Styles >> New

Ø Setelah tampil dialog box di atas, pilih dahulu selector type Class, membuat style yang dapat digunakan untuk banyak content halaman seperti text, gambar, layer.

Ø Pada kotak name tuliskan nama style dan diawali dengan tanda titik (.) Misalnya .kotak

Ø Tag , mendefiniskan ulang tag HTML yang sudah ada. Pada kotak name pilih tag HTML yang ada.

Ø Advanced, membuat style yang merupakan kombinasi dari tag HTML, dan tag dengan spesifik id. Misalnya saja a:hover, a:link, a:visited Pada pilihan define in, pilih

Ø New Style Sheet File, jika Anda ingin membuat style CSS pada file yang baru

Ø This document only, jika Anda ingin membuat CSS pada dokumen yang sedang aktif

Ø Klik OK, sehingga akan muncul dialog box rule definition

Kategori-kategori yang ada pada CSS Properties

Ø Type

Ø Background

Ø Block

Ø Border

Ø Box

Ø List

Ø Positioning

Ø Extentions

Membuat Menu Navigasi dengan CSS

Ø Sebenarnya menu navigasi bisa kita buat dengan menggunakan tabel. Tapi, kali ini kita akan menggunakan css. Kita membutuhkan dua buah file dalam tutorial ini , yaitu menuhoriz.html dan menuhoriz.css. Awalnya kita akan membuat sebuah list item dan kemudian list item kita buat menjadi menu horizontal.

<!—simpan dengan nama menuhoriz.html - ->

<html>

<head>

<title>Menu Navigasi</title>

</head>

<body>

<div

<ul>

<li><a href="about.html">About Me</a></li>

<li><a href="articles.html">Articles</a></li>

<li><a href="contact.html">Contact Us</a></li>

</ul>

</div>

</body>

</html>

Ø menuhoriz.html di atas adalah kode HTML untuk membuat list. Tampilannya akan seperti ini :

Ø Selanjutnya akan kita buat sebuah file menuhoriz.css untuk membuat tulisan menjadi huruf tebal, merubah jenis font dan ukuran font.

Ø Dalam file menuhoriz.html juga kita tambahkan tag

<link rel="stylesheet" type="text/css" href="menuhoriz.css" />

Maksudnya adalah agar file menuhoriz.css dapat kita jadikan external style sheet.

<html>

<head>

<title>Menu Navigasi</title>

</head>

<body>

<ul>

<li><a href="about.html">About Me</a></li>

<li><a href="articles.html">Articles</a></li>

<li><a href="contact.html">Contact Us</a></li>

</ul>

</div>

</body>

</html>

/* simpan dengan nama menuhoriz.css*/

#navigation {

font-family: Arial, Helvetica, sans-serif;

font-size: 13px;

font-weight: bold;

}

Ø Langkah berikutnya adalah kita akan menghilangkan lingkaran yang dibuat dengan menggunakan tag <ul>. Tambahkan style berikut ke dalam file menuhoriz.css anda.

#navigation ul {

list-style: none; /* untuk menghilangkan bullet */

margin: 0; /* gak usah dikasih jarak dengan elemen lain*/

padding: 0; /* antara border dan elemen tidak usah dikasih jarak*/

padding-top: 4px; /* tapi antara border atas dan elemen kita beri jarak 4px*/

}

Ø Karena kita akan membuat menu horizontal, maka elemen <li> akan kita jadikan horizontal. Tambahkan style berikut ke dalam file menuhoriz.css anda

#navigation li {

display: inline; /* membuat li menjadi horizontal */

}

Ø Menu di atas sudah hampir jadi, hanya saja garis bawah yang ada dalam link sebaiknya dihilangkan. Tambahkan background dan ubah warna huruf. Tambahkan style berikut ke dalam file menuhoriz.css.

#navigation a:link, #navigation a:visited {

padding: 3px 10px 2px 10px; /* menentukan jarak batas atas kanan bawah dan kiri masig-masing elemen*/

color: #ffffff; /* merubah warna huruf*/

background-color: #F38901; /* mengganti background color */

text-decoration: none; /* menghilangkan garis bawah*/

border: 1px solid #711515; /* memberikan border*/

}

Ø Langkah terakhir adalah memberikan efek ketika kursor berada di atas link tersebut. Hal ini dimaksudkan untuk memberi perbedaan menu ketika user akan memilih sebuah menu.

#navigation a:hover {

color: #0099ff; /* merubah warna huruf*/

background-color: #ffffff; /* mengganti background color */

font-size : 15px; /* merubah ukuran huruf */

cursor: crosshair; /* merubah bentuk kursor */

}

Ini adalah isi lengkap file menuhoriz.css

/* simpan dengan nama menuhoriz.css */

#navigation {

font-family: Arial, Helvetica, sans-serif;

font-size: 13px;

font-weight: bold;

}

#navigation ul {

list-style: none; /* untuk menghilangkan bullet */

margin: 0; /* gak usah dikasih jarak dengan elemen lain*/

padding: 0; /* antara border dan elemen tidak usah dikasih jarak*/

padding-top: 4px; /* tapi antara batas atas dan elemen kita beri jarak 4px*/

}

#navigation li {

display: inline; /* membuat li menjadi horizontal */

}

#navigation a:link, #navigation a:visited {

padding: 3px 10px 2px 10px; /* menentukan jarak batas atas kanan

bawah dan kiri masig-masing elemen*/

color: #ffffff; /* merubah warna huruf*/

background-color: #F38901; /* mengganti background color */

text-decoration: none; /* menghilangkan garis bawah*/

border: 1px solid #711515; /* memberikan border*/

}

#navigation a:hover {

color: #0099ff; /* merubah warna huruf*/

background-color: #ffffff; /* mengganti background color */

font-size : 15px; /* merubah ukuran huruf */

cursor: crosshair; /* merubah bentuk kursor */

}

membuat dan mengedit dokumen HTML secara visual dan mengelola halaman sebuah situs. Dreamweaver menyediakan banyak perangkat yang berkaitan dengan pengkodean dan fitur seperti HTML, CSS, JavaScript, PHP, ASP, ColdFusion, dan XML.

Ø Area Kerja Dreamweaver 8

Halaman Awal

Menu Di Dreamweaver

Pada halaman awal Dreamweaver 8 terdapat beberapa menu yang dapat dipilih :

· Open a Recent Item

Pada menu ini akan ditampilkan beberapa file yang sebelumnya pernah kita buka dengan menggunakan Dreamweaver 8. Atau di paling bawah ada Open yang dapat digunakan untuk membuka file yang lain.

· Create New

Pada menu ini kita dapat memilih dokumen baru apa yang akan kita buat dengan menggunakan Dreamweaver 8. Ada banyak pilihan, diantaranya HTML, ColdFusion, PHP, ASP, JavaScript, CSS.

· Create From Samples

Pada menu ini kita dapat membuat file berdasarkan contoh yang sudah diberikan oleh Dreamweaver.

Halaman Utama Dreamweaver 8

Keterangan :

Toolbar Dokumen

Menu Utama

Menu Utama berisi semua perintah yang dapat digunakan untuk bekerja pada Dreamweaver.

Insert Bar

Insert bar merupakan tempat semua perangkat kerja (tombol) tang digunakan untuk membuat halaman web. Insert bar mempunyai dua jenis tampilan, yaitu tampilan sebagai menu dan tampilan sebagai tab.

Ø Tab Common

Berisi semua tombol yang sering atau umum digunakan untuk membuat halaman web. Tombol yang ada di Tab Common antara lain Hyperlink, Email Link, Named Anchor, Table, Images.

Ø Tab Layout

Tab layout digunakan untuk membuat layout halaman web. Terdapat tiga jenis layout yang dapat dipilih, yaitu Standard, Expanded dan Layout.

· Untuk Standard view tampilan dokumen seperti biasa (berupa garis-garis tabel)

· Untuk Expanded view menampilkan border tabel yang direnggangkan sehingga semua rancangan tabel dapat dilihat dengan jelas baik itu baris dan kolomnya.

· Untuk Layout view rancangan tabel ditampilkan sebagai kotak-kotak yang dapat di-drag, dan diatur ulang ukurannya dengan mudah.

Tampilan Insert bar sebagai menu

Ø Tab Form

Tab form digunakan untuk membuat elemen dalam form, misalnya saja textarea, textfield, radio button, checkbox

Ø Tab Text

Tab text digunakan untuk membuat pengaturan text. Misalnya saja membuat text italic, strong, underline, h1.

Ø Tab HTML

Tab HTML digunakan untuk membuat garis horizontal, menambahkan meta tag dalam tag <head>, dan frame.

Ø Tab Application

Tab application digunakan jika aplikasi kita sudah berhubungan dengan suatu bahasa pemrograman dan sebuah database.

Ø Tab Flash elements

Tab flash elements digunakan untuk memasukkan elemen flash dalam dokumen yang kita buat.

Code View

Code View digunakan untuk melihat kode HTML dari halaman web yang sedang kita buat.

Panel Properties

Design View

Design View digunakan untuk melihat tampilan web dari kode HTML yang kita buat.

Panel Group

Panel group terdiri dari beberapa panel yang digunakan sebagai window pembantu untuk bekerja di Dreamweaver. Terdapat lima buah panel yaitu Design, Code, Application, Tag Inspector dan Files.

Ø Pada panel Files berisi semua files (html, image, swf) jika anda telah mendefinisikan suatu site ke dalam area kerja Dreamweaver.

Ø Pada panel code berisi semua penjelasan dari tag-tag HTML dan cara penggunaanya.

Ø Panel Design berisi format-format CSS yang ada pada dokumen yang sedang dikerjakan.

MENDEFINISIKAN SITE DENGAN DREAMWEAVER

Ø Untuk mendefinisikan site baru, klik menu site > Manage Site

Ø Kemudian pilih New > Site untuk menampilkan window baru yang berisi pengaturan site yang akan dibuat. Atau anda juga dapat mengaksesnya melalui menu utama Site > New Site.

Ø Pilih tab Advanced > Category > Local Info untuk mengatur folder-folder tempat file yang akan digunakan dalam membuat halaman web

Ø Pada isian Site Name, isikan nama project Anda atau nama situs Anda.

Ø Local Root Folder merupakan folder utama project anda. Beri centeng pada refresh local file list Automatically agar file terbaru anda muncul di Dreamweaver.

Ø Default Image Folder merupakan folder tempat file-file gambar anda disimpan. Default Image Folder harus berada di dalam Local Root Folder.

Ø Jika anda sudah mempunyai domain isikan alamat domain Anda di isian HTTP Address agar semua link yang ada pada ahalaman web anda selalu dicek.

TABEL

Ø Insert -> Table

Ø Table Properties

Ø Cell Properties

Ø Row Properties

Ø Column Properties

IMAGES

Ø Gambar yang biasa digunakan dalam halaman web adalah gambar yang berformat jpg, gif dan png

Ø Insert -> Images

Ø Layout Mode

HYPERLINK

Ø Link ke website lain

Ø Link ke halaman lain

Ø Email Link

Ø Insert -> Hyperlink

Email Link

Ø Insert -> Email Link

FORM

Ø Form digunakan untuk mengumpulkan informasi dari user

Elemen-Elemen Form

Ø Textfield

Berupa kolom isian satu baris yang digunakan untuk memasukkan data

Ø Password Field

Prinsip kerjanya sama dengan textfield, hanya saja karakter yang diinput akan diubah menjadi ******

Ø Textarea

Berupa kolom isian yang bisa lebih dari 1 baris

Ø Checkbox

Kotak pilihan yang bisa diberi tanda “cek” dan bisa dipilih lebih dari 1

Ø Radio Button

Lingkaran pilihan yang bisa diberi tanda “cek” dan hanya bisa dipilih 1 saja

Ø List / Menu

Digunakan untuk membuat daftar pilihan menu yang bisa dipilih oleh user

Ø File Field

Digunakan untuk memilih file pada saat proses upload

Ø Button

1. Submit Button

Digunakan untuk mengirimkan data yang diinputkan

2. Reset Button

Digunakan untuk mengembalikan isian form seperti semula (kosong)

3. Button

Validasi Form

Ø Pada beberapa kasus, kolom isian yang ada pada form harus diisi atau tidak boleh kosong

Ø Misalnya pada saat pengisian form pendaftaran email, maka nama harus diisi. Jika tidak diisi maka tampilkan pesan kesalahan pengisian form dan data tidak akan diproses

MEMBUAT TEMPLATE HALAMAN WEB

Ø Kita dapat membuat template dengan menggunakan Macromedia Dreamweaver. Template yang dibuat dengan menggunakan Dreamweaver akan mempunyai ekstension .dwt

Ø Langkah-langkah membuat template

· Definisikan sebuah situs baru di dreamweaver (sudah pernah dipelajari di pertemuan sebelumnya)

· Buatlah layout halaman web seperti biasa. Kemudian simpan sebagai template. Pilih File -> Save as Template

· Sebagai contoh, simpan dengan nama templateutama. Klik tombol Save

Ø Jika template berhasil dibuat, perhatikan pada Panel Files. Di sana akan terbentuk folder “Templates” dan sebuah file dengan ekstension .dwt

Ø Dalam contoh ini bagian isi, kita bagi lagi menjadi 2, yaitu judul dan isinya.

Ø Letakkan kursor pada sebelah kiri halaman. Pilih menu Insert -> Template Objects -> Editable Region

Ø Selanjutnya akan muncul window seperti ini :

Ø Beri nama JudulHalaman dan klik OK

Ø Dengan cara yang sama, buat lagi sebuah editable region dan beri nama IsiHalaman. Akan terbentuk 2 buah editable region seperti ini:

Ø Kita sudah berhasil membuat sebuah template. Selanjutnya adalah membuat halaman lain berdasarkan template yang sudah kita buat tadi.

Menggunakan Template Untuk Halaman Lain

Ø Buatlah sebuah file baru dari menu New -> File. Pilih tab Template dan pilih templateutama, kemudian klik tombol Create

Ø Setelah itu akan terbentuk sebuah halaman web yang menggunakan template dan siap untuk diisi kontennya

Ø Lakukan perubahan pada kontennya dan simpan dengan nama home.html

Ø Buatlah 2 halaman lainnya dengan nama kritik.html dan berita.html

Note :

Jika sebuah halaman menggunakan template tertentu, maka halaman tersebut akan otomatis diupdate jika kita mengupdate template

MEMBUAT ROLLOVER IMAGES

Ø Masuk ke menu Insert -> Image Objects -> Rollover Image. Kemudian akan muncul kotak dialog sebagai berikut :

MEMBUAT FLASH BUTTONS

Ø Flash Buttons merupakan sebuah tombol yang digunakan sebagai menu. Flash Buttons adalah sebuah flash image.

Ø Untuk membuat flash buttons, pilih menu Insert -> Media -> Flash Button.

Ø Style digunakan untuk memilih jenis tombol yang akan digunakan.

Ø Kolom Button Text digunakan untuk tulisan yang akan diletakkan di atas tombol tersebut.

Ø Kolom Font dan Size digunakan untuk menentukan jenis dan ukuran huruf.

Ø Kolom Link adalah URL yang akan dituju jika gambar diklik.

Ø Kolom Bg color digunakan untuk menentukan warna background.

Ø Kolom Save as digunakan utntuk menyimpan file swf.

Ø Kolom Image name adalah nama image tersebut.

Ø Kolom Original Image adalah image yang aslinya (image yang akan muncul di awal).

Ø Kolom Rollover Image adalah image yang akan menggantikan image asli ketika kursor berada di atas image asli.

Ø Checkbox Preload rollover image jika dicek, maka rollover image akan diload ketika halaman diload. Jadi, akan mencegah waktu download yang lama ketika kursor melewati image.

Ø Kolom Alternate image digunakan sebagai keterangan pada gambar.

Ø Kolom When clicked, Go to URL adalah URL yang akan dituju jika gambar diklik.

MEMBUAT FLASH TEXT

Ø Flash text hampir sama dengan rollover, bedanya flash text hanya merubah warna huruf saja.

Ø Masuk ke menu Insert -> Media -> Flash Text.

Ø Pilih jenis huruf, ukuran dan atribut font lainnya.

Ø Kolom Color digunakan untuk menentukan warna huruf

Ø Kolom Rollover Color digunakan untuk menentukan warna huruf ketika kursor melewati huruf awal.

Ø Kolom text adalah text yang akan ditampilkan

Ø Kolom Link adalah URL dari text tersebut ketika diklik

Ø Bg Color digunakan untuk menentukan latar belakang huruf

Ø Kolom save as adalah nama file yang akan disimpan

MEMBUAT NAVIGASI BAR

Ø Navigasi bar merupakan sekumpulan image yang digunakan seperti menu untuk menjelajahi isi web tersebut.

Ø Masuk ke menu Insert -> Image Objects -> Navigation Bar

Ø Tanda + dan – digunakan untuk menambahkan atau mengurangi menu.

Ø Kolom Element name digunakan untuk menentukan nama menu

Ø Kolom Up image digunakan untuk memilih gambar awal

Ø Kolom Over Image digunakan untuk mengganti gambar awal ketika kursor meleawti gambar awal

Ø Kolom Down image digunakan untuk mengganti gambar awal ketika kursor diklik

Ø Kolom Over while down image digunakan untuk mengganti gambar jika gambar yang asli belum selesai diload

Ø Kolom alternate text digunakan untuk text alternative

Ø Kolom When clicked, go to URL digunakan untuk menentukan URL jika menu diklik

Ø Checkbox Preload Images digunakan untuk menentukan apakah gambar akan diload sebelumnya

Ø Checkbox Show “Down image” initially digunakan untuk menentukan apakah gambar pada Kolom Over while down image akan diload paling awal

Ø Menu Insert digunakan untuk menentukan apakah menu akan dibuat secara vertical atau horizontal.

CASCADING STYLE SHEETS

Ø CSS (Cascading Style Sheet) digunakan untuk melengkapi file HTML, dan tugas utamanya adalah menetapkan aturan tampilan/style yang akan digunakan pada sebuah website.

Ada 3 tipe CSS berdasarkan peletakannya dalam sebuah dokumen HTML

· External Style

External style sheets merupakan dokumen css yang disimpan dalam file berbeda dengan file HTML. File ini berekstension .css

· Untuk menyertakan file css, letakkan tag berikut ke dalam

<head>

</head>

Biasa dipakai jika beberapa halaman akan menggunakan style yang sama.

Internal Style : CSS diletakkan di antara tag

<head>

letakkan css di sini

</style>

</head>

Inline Style : CSS diletakkan di dalam tag HTML

Dreamweaver dan CSS Panel

Ø Untuk membuat CSS di Dreamweaver, telah tersedia CSS Panel. CSS Panel dapat dimunculkan melalui menu Window >> CSS Styles

All Mode

Ø All Rules

Menampilkan semua styles yang ada.

Ø Properties

Menampilkan spesifik style yang terpilih

Current Mode

Ø Summary for Selection

Menampilkan spesifik style yang terpilih (tidak bisa diedit)

Ø Rules

Menampilkan nama style dan pada tag mana style ini digunakan

Ø Properties

Menampilkan spesifik style yang terpilih dan bisa diedit

Ø Attach Style Sheet

Menampilkan dialog box untuk menambahkan external style sheet pada dokumen

Ø New CSS Rule

Menampilkan dialog box untuk membuat aturan CSS yang baru

Ø Edit Style Sheet

Menampilkan dialog box untuk mengubah aturan CSS yang sedang dipilih

Ø Delete CSS Rules

Menghapus aturan CSS yang sedang terpilih

Ø Show Category View

Membagi CSS properties meenjadi 9 kategori. Font, Background, Block, Border, Box, List, Positioning. Extentions, dan Tables, Content, Quotes

Ø Show List View

Menampilkan CSS properties berdasarkan alphabet secara berurutan

Ø Show Only Set Properties

Hanya menampilkan CSS properties yang diipilih saja

Istilah Dalam Style Sheets

Style rule

Ø Selector

Ø selector { property1: value; property2:value, . . .}

Ø H1{ color:green; background-color:orange}

Style sheets terdiri dari dua bagian:

Ø Selector , adalah nama dari style, bisa berupa tag seperti <p> atau nama lain seperti .header

Bagian pertama sebelum tanda “{}” disebut selector

Ø Declaration, adalah spesifikasi dari elemen pada style

Terdiri dari property dan value

Antara property yang satu dan yang lainnya dipisahkan dengan tanda ; (titik koma)

Meng-attach Style Sheet ke dalam dokumen HTML

Ø Anda dapat menyertakan style sheet yang sudah ada ke dalam dokumen HTML

Ø Klik kanan pada dokumen HTML yang sedang diedit di Dreamweaver, pilih CSS Styles >> Attach Style Sheet

Ø Pilih file CSS yang akan di-attach

Ø Anda bisa memilih radio button Add as Link, jika ingin meng-attach sebagai external style

Ø Atau pilih Import jika ingin menjadikannya internal style

Ø Menambahkan style baru atau style yang sudah ada

Ø Untuk menambahkan style baru, bisa melalui beberapa cara

Ø Klik kanan di bawah CSS Panel dan pilih New

Ø Melalui menu Text >> CSS Styles >> New

Ø Setelah tampil dialog box di atas, pilih dahulu selector type Class, membuat style yang dapat digunakan untuk banyak content halaman seperti text, gambar, layer.

Ø Pada kotak name tuliskan nama style dan diawali dengan tanda titik (.) Misalnya .kotak

Ø Tag , mendefiniskan ulang tag HTML yang sudah ada. Pada kotak name pilih tag HTML yang ada.

Ø Advanced, membuat style yang merupakan kombinasi dari tag HTML, dan tag dengan spesifik id. Misalnya saja a:hover, a:link, a:visited Pada pilihan define in, pilih

Ø New Style Sheet File, jika Anda ingin membuat style CSS pada file yang baru

Ø This document only, jika Anda ingin membuat CSS pada dokumen yang sedang aktif

Ø Klik OK, sehingga akan muncul dialog box rule definition

Kategori-kategori yang ada pada CSS Properties

Ø Type

Ø Background

Ø Block

Ø Border

Ø Box

Ø List

Ø Positioning

Ø Extentions

Membuat Menu Navigasi dengan CSS

<!—simpan dengan nama menuhoriz.html - ->

<html>

<head>

<title>Menu Navigasi</title>

</head>

<body>

<div

<ul>

<li><a href="about.html">About Me</a></li>

<li><a href="articles.html">Articles</a></li>

<li><a href="contact.html">Contact Us</a></li>

</ul>

</div>

</body>

</html>

Ø menuhoriz.html di atas adalah kode HTML untuk membuat list. Tampilannya akan seperti ini :

Ø Selanjutnya akan kita buat sebuah file menuhoriz.css untuk membuat tulisan menjadi huruf tebal, merubah jenis font dan ukuran font.

Ø Dalam file menuhoriz.html juga kita tambahkan tag

<link rel="stylesheet" type="text/css" href="menuhoriz.css" />

Maksudnya adalah agar file menuhoriz.css dapat kita jadikan external style sheet.

<html>

<head>

<title>Menu Navigasi</title>

</head>

<body>

<ul>

<li><a href="about.html">About Me</a></li>

<li><a href="articles.html">Articles</a></li>

<li><a href="contact.html">Contact Us</a></li>

</ul>

</div>

</body>

</html>

/* simpan dengan nama menuhoriz.css*/

#navigation {

font-family: Arial, Helvetica, sans-serif;

font-size: 13px;

font-weight: bold;

}

Ø Langkah berikutnya adalah kita akan menghilangkan lingkaran yang dibuat dengan menggunakan tag <ul>. Tambahkan style berikut ke dalam file menuhoriz.css anda.

#navigation ul {

list-style: none; /* untuk menghilangkan bullet */

margin: 0; /* gak usah dikasih jarak dengan elemen lain*/

padding: 0; /* antara border dan elemen tidak usah dikasih jarak*/

padding-top: 4px; /* tapi antara border atas dan elemen kita beri jarak 4px*/

}

Ø Karena kita akan membuat menu horizontal, maka elemen <li> akan kita jadikan horizontal. Tambahkan style berikut ke dalam file menuhoriz.css anda

#navigation li {

display: inline; /* membuat li menjadi horizontal */

}

Ø Menu di atas sudah hampir jadi, hanya saja garis bawah yang ada dalam link sebaiknya dihilangkan. Tambahkan background dan ubah warna huruf. Tambahkan style berikut ke dalam file menuhoriz.css.

#navigation a:link, #navigation a:visited {

padding: 3px 10px 2px 10px; /* menentukan jarak batas atas kanan bawah dan kiri masig-masing elemen*/

color: #ffffff; /* merubah warna huruf*/

background-color: #F38901; /* mengganti background color */

text-decoration: none; /* menghilangkan garis bawah*/

border: 1px solid #711515; /* memberikan border*/

}

Ø Langkah terakhir adalah memberikan efek ketika kursor berada di atas link tersebut. Hal ini dimaksudkan untuk memberi perbedaan menu ketika user akan memilih sebuah menu.

#navigation a:hover {

color: #0099ff; /* merubah warna huruf*/

background-color: #ffffff; /* mengganti background color */

font-size : 15px; /* merubah ukuran huruf */

cursor: crosshair; /* merubah bentuk kursor */

}

Ini adalah isi lengkap file menuhoriz.css

/* simpan dengan nama menuhoriz.css */

#navigation {

font-family: Arial, Helvetica, sans-serif;

font-size: 13px;

font-weight: bold;

}

#navigation ul {

list-style: none; /* untuk menghilangkan bullet */

margin: 0; /* gak usah dikasih jarak dengan elemen lain*/

padding: 0; /* antara border dan elemen tidak usah dikasih jarak*/

padding-top: 4px; /* tapi antara batas atas dan elemen kita beri jarak 4px*/

}

#navigation li {

display: inline; /* membuat li menjadi horizontal */

}

#navigation a:link, #navigation a:visited {

padding: 3px 10px 2px 10px; /* menentukan jarak batas atas kanan

bawah dan kiri masig-masing elemen*/

color: #ffffff; /* merubah warna huruf*/

background-color: #F38901; /* mengganti background color */

text-decoration: none; /* menghilangkan garis bawah*/

border: 1px solid #711515; /* memberikan border*/

}

#navigation a:hover {

color: #0099ff; /* merubah warna huruf*/

background-color: #ffffff; /* mengganti background color */

font-size : 15px; /* merubah ukuran huruf */

cursor: crosshair; /* merubah bentuk kursor */

}

Belajar Web

Senin, 14 Mei 2018

Komentar