PELATIHAN DESAIN WEB DENGAN ADOBE DREAMWEAVER CS5 Bersama AMIK YMI TEGAL

(1)

PELATIHAN DESAIN WEB DENGAN ADOBE

DREAMWEAVER CS5 Bersama

AMIK YMI TEGAL

(2)

Software yang digunakan

untuk membuat website

(3)

Software yang digunakan

untuk membuat website

(4)

Software yang digunakan

untuk membuat website

(5)

Mengenal Software Dreamweaver

(6)

Adobe Dreamweaver

Adobe Dreamweaver merupakan program penyunting halaman web keluaran AdobeSystems yang dulu dikenal sebagai Macromedia Dreamweaver keluaran Macromedia. Program ini banyak digunakan oleh pengembang web karena fitur - fiturnya yang menarik dan kemudahan penggunaannya. Versi terakhir Macromedia Dreamweaver sebelum Macromedia dibeli oleh Adobe Systems yaitu versi 8.

Software yang akan kita gunakan dalam pelatihan ini

adalah Adobe Dreamweaver CS5 yang dirilis pada 12

April 2011, sedangkan versi terbaru dari Dreamweaver

(7)

Tampilan Dreamweaver

Title Bar Menu Bar

Area Tampilan Desain Toolbar

Document

Tampilan Syntax / Code

Properties Inspector

Status bar

Toolbar Insert

(8)

1. Klik Site pada menubar kemudian pilih New Site

Memulai Dengan Dreamweaver

Memberi nama site

(9)

2. Isi kotak dialog Site Definition for website

Nama site Folder untuk

menyimpan file html Folder untuk

menyimpan file gambar

Membuat folder untuk penyimpanan file

(10)

3. Lihat pada Files

Nama site

Folder untuk gambar

Application Files

(11)

4. Buat file HTML klik kanan pada nama site yang kita buat tadi kemudian pilih New File

Kemudian ketik nama file yang akan anda buat, file utama yang di buat diberi nama index.html

Membuat file HTML

(12)

5. Mengisi file HTML, double klik nama file HTML yang telah kita buat.

Mengisi content file HTML

(13)

(14)

Menyimpan Dokumen

(15)

Klik disini untuk menjalankan program

Menjalankan

program

(16)

Bekerja dengan Code

Tag-tag

HTML

(17)

Tag-tag HTML

Command HTML biasanya disebut TAG, TAG digunakan untuk menentukan tampilan dari document HTML.

<BEGIN TAG> </END TAG>

Setiap document HTML di awali dan di akhiri dengan tag HTML.

<html>

- - -

</html>

Tag tidak case sensitive, jadi anda bisa gunakan <HTML> atau <html> keduanya menghasilkan output yang sama.

Bentuk dari tag HTML sebagai berikut:

<Element Attribute = Value>

Element - nama tag

Attribute - atribut dari tag Value - nilai dari atribut.

Contoh :

<body bgcolor="lavender">

BODY merupakan element, BGCOLOR(Background) merupakan atribut yang memiliki nilai lavender.

Begin Tag

End Tag

(18)

Document HTML bisa di bagi mejadi tiga bagian utama:

Struktur HTML

1. HTML

Setiap document HTML harus di awali dan di tutup dengan tag HTML

<HTML> </HTML>

tag HTML memberi tahu browser bahwa yang di dalam kedua tag tersebut adalah document HTML.

2. HEAD

Bagian header dari document HTML di apit oleh tag <HEAD></HEAD> di dalam bagian ini dimuat tag TITLE yang menampilkan judul dari halaman pada titlenya browser.

<HEAD>

<TITLE> </TITLE>

</HEAD>

3. BODY

Document body di gunakan untuk menampilkan text, image link dan semua yang akan di tampilkan pada web page.

<BODY> </BODY>

(19)

<html>

<head>

<title>

Judul yang ada di pojok kiri atas pada browser

</title>

</head>

<body>

Disini tempat menuliskan teks, menyisipkan tabel, gambar, animasi dll.

</body>

</html>

Contoh 1 :

Preview 1

hasil

(20)

Contoh :

<html>

<head>

<title>Heading Elemet</title>

</head>

<body>

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<h6>Heading 6</h6>

</body>

</html>

Basic HTML Element

Block level element yang sering di gunakan : Heading (H1 sampai H6)

Preview 2

hasil

(21)

Contoh :

<html>

<head>

<title>Formating Paragraf</title>

</head>

<body>

<h3>Pelatihan HTML</h3>

<p>

Palatihan HTML di selenggarakan oleh AMIK YMI TEGAL

</p>

</body>

</html>

Paragraf (P)

Digunakan untuk memulai paragraf baru atau format paragraf

Preview 3

hasil

[

(22)

1. Unordered List / tidak berurutan (Bullet) : Contoh :

<html>

<head>

<title>Unordere List</title>

</head>

<body>

Contoh penggunaan Unordered List

<p>

<li>Senin</li>

<li>selasa</li>

<li>Kamis</li>

<li>Jumat</li>

<li>Sabtu</li>

<li>Minggu</li>

List Item(LI)

List item di gunakan untuk mengelompokkan data baik berurutan (ordered list) maupun yang tidak berurutan (unordered list).

Ada 2 macam list yang bisa anda tambahkan ke document HTML:

hasil

(23)

Tag Attribute Value Description

<UL> TYPE SQUARE DISC CIRCLE

Bullet Kotak Bullet Titik

Bullet Lingkaran

Unordered List / tidak berurutan (Bullet) :

(24)

List Item (LI)

2. Ordered List / Berurutan (Numbering)

Contoh :

<html>

<head>

<title>Ordere List</title>

</head>

<body>

Scedule Pelatihan HTML

<p>

<li>Senin</li>

<li>Pengenalan HTML</li>

<li>Membuat halaman web</li>

</ol>

<li>Selasa</li>

<li>Membuat Tabel</li>

<li>menambahkan Gambar</li>

</ol>

hasil

(25)

Tag Attribute Value Description

<OL> TYPE I

i A

a

Lower Roman Uper Roman

Uppercase Lowercase

<OL> START n Begin Number

Ordered List / Berurutan (Numbering)

(26)

Pemformatan Halaman

1. Begin row (BR)

Tag <BR> di gunakan untuk memulai baris baru pada document HTML.

Contoh:

<html>

<head>

</head>

<body>

<center>HALAMAN WEB AMIK YMI TEGAL</center>

<p>

Akademi Manajemen Informatika dan Komputer<br>

Jl. Raya Dampyak Km 4 - Tegal <br><br>

Link terkait Amiktegal.ac.id

</body>

</html>

Preview 6

hasil

Ganti baris

(27)

2. Format Font

Dengan tag <FONT> anda bisa menentukan format tampilan font dalam document HTML seperti color, size, style dan lainya.

Contoh:

<html>

<head>

<title>Pelatihan Membuat Website</title>

</head>

<body>

Pelatihan Membuat Website dengan Adobe Dreamweaver CS5

</font>

</body>

</html>

Preview 7

hasil

(28)

Attribute Description

Color Untuk menentukan warna font, anda bisa menggunakan nama font atau hexadecimal(#000000 - #ffffff)

Size Untuk menentukan ukuran dari font 1 - 7

face Untuk menentukan jenis font biasanya dalam satu list ada beberapa font dan akan di baca mulai dari yangpaling kiri.

Attribute Format Font

(29)

Alignment

Align attribute digunakan untuk menentukan perataan object dalam document HTML baik berupa text, object, image, paragraph, division dan lain-lain.

Value Description

Left Rata Kiri

Right Rata kanan

Center Rata tengah

Justify Rata kanan kiri

Format Text

Tag Description

<B>…</B> Cetak tebal

<I>…</I> Cetak miring

<U>…</U> Cetak garis bawah

<BIG>…</BIG> Untuk ukuran yang lebih besar dari normal

<SMALL>…</SMALL> Untuk ukuran yang lebih kecil dari normal

<STRIKE>…</STRIKE> Untuk memberi garis di tengah text

<SUP>…</SUP> Superscript text

<SUB>…</SUB> Subcript text>

(30)

Navigasi / Hyperlink

Berfungsi untuk memanggil halaman lain yang terkait baik dalam satu alamat web tersebut atau ke alamat web lain.

Contoh :

Halaman web SMK BP TALANG yang memanggil halaman web AMIK YMI TEGAL

<html>

<head>

<title>Link 1</title>

</head>

<body>

<center>LATIHAN WEB SMK BHAKTI PRAJA TALANG</center>

<p>

Jurusan Teknik Komputer Jaringan<br>

Jl. Raya Talang Balamoa – Kab. Tegal<br><br>

Link terkait

<a href="link2.html">http://amiktegal.ac.id</a>

</body>

(31)

Navigasi / Hyperlink

</head>

HALAMAN WEB AMIK YMI TEGAL</font></h1></center>

<br>

<center><h4><font face="Verdana, Arial, Helvetica, sans-serif"

color="#0033FF">

<a href="#mapok">materi pokok</a> | <a href="#mol">modul online</a> | pembuatan website| uji kompetensi

</font></h4>

Materi Pokok</font><a name="mapok"></a></p>

</center>

Modul Online</font> <a name="mol"></a></p>

</body>

</html>

Hyperlink dalam satu halaman web (Anchor)

Preview 9

(32)

Tabel

Tag <TABLE> digunakan untuk membuat table dalam document HTML ,bagian pokok dari table adalah cell yang didefinisikan dengan menggunakan tag <TD>.

Contoh :

<html>

<head>

<title>tabel 1</title>

</head>

<body>

<center><h1>TABEL</h1></center>

<p>

<tr>

<td>Tabel dengan single cell</td>

<td>Tabel dengan dua cell</td>

<td>Tabel dengan tiga cell</td>

<td>Tabel dengan empat cell</td>

</tr>

<tr>

(33)

Menambahkan gambar & animasi

Anda dapat menambahkan gambar dan animasi pada halaman web yang anda buat.

Contoh :

<html>

<head>

<title>Gambar</title>

</head>

<body>

<center><h1>Insert Gambar</h1></center>

<p>

Insert gambar di sini

<p><img src="image/header.jpg" height="500"

width="369">

</body>

</html>

Preview 11

(34)

Bekerja dengan Design View

Area anda

mengetik naskah

Input title disini

(35)

Page Properties - Appearance

(36)

Page Properties - Links

(37)

Page Properties-Heading

(38)

Properties Inspector

Digunakan untuk memformat teks

Font face

Font Size

Font color

Hyperlink

(39)

Insert Image & Media

Digunakan untuk menambahkan gambar atau media lain(animasi/video) ke dalam lembar kerja

Pilih file gambarnya

1. Insert Image

(40)

Insert Image & Media

2. Insert Animasi

(41)

Insert Image & Media

3. Insert Flash Button

(42)

Rollover Image

Gambar 1 Gambar 2

(43)

Table

Menambahkan tabel ke dalam lembar kerja

atau

(44)

Table Properties

Digunakan untuk memberikan attribut-attribut pada tebal

banyaknya

baris & kolom lebar & tinggi

tabel Jarak spasi dalam cell

Jarak spasi antar cell Warna

background Gambar latar belakang

Perataan

ketebalan garis pinggir warna garis

pinggir

(45)

Navigasi/Hyperlink

Digunakan untuk menghubungkan antar file html dalam satu website atau dengan website lain.

Atau pada properties inspector

1. Hyperlink ke alamat website lain

(46)

Navigasi/Hyperlink

2. Anchor / Link dalam satu halaman web

1. Blok bagian yang akan di panggil

2. Klik icon Anchor

(47)

Navigasi/Hyperlink

2. Anchor / Link dalam satu halaman web

Blok menu yang di gunakan untuk memanggil/link

Ketik nama bagian yang akan di panggil (anchor)

(48)

Cascading Style Sheet (CSS)

CSS digunakan untuk mempermudah dalam pemformatan tampilan halaman web

Klik tanda + untuk menambah css

(49)

Cascading Style Sheet (CSS)

(50)

Cascading Style Sheet (CSS)

Ketik nama css

(51)

Desain Layout

(52)

Menu Website

Home = index.html Gallery = gallery.html About Us = about.html

Contact Us = contact.html

(53)

Step by step desain web (Manage Site)

1. Siapkan halaman awal yaitu index.html dan buka dengan Dreamweaver.

2. Manage site

Pilih Site -> Manage Site

(54)

Step by step desain web (Header)

3. Siapkan gambar header. Header yang digunakan pada contoh berukuran

826x326 piksel.

(55)

Step by step desain web (Tabel Dasar)

4. Buat tabel dasar dengan cara Insert -> Table.

Atur dengan pengaturan sbb:

(56)

Step by step desain web (Tampilan Tabel Dasar)

5. Hasil Pembuatan Tabel

(57)

Step by step desain web (insert header)

5. Atur Align pada panel Properties menjadi Center untuk membuat tabel berada di tengah halaman.

6. Tempatkan kursor pada baris pertama tabel dan masukkan gambar dengan Insert -> Image.

Kemudian pilih gambar header.jpeg.

(58)

Step by step desain web

(59)

Navigasi

7. Tempatkan kursor di baris kedua tabel dan masukkan tabel baru untuk navigasi lewat Insert -

> Table dengan pengaturan sebagai berikut :

(60)

Navigasi

(61)

Navigasi

8. Beri menu navigasi sesuai dengan yang telah

didesain sebelumnya. Kita bisa memberikan warna

pada menu navigasi.

(62)

Navigasi Link

9. Beri link pada tiap menu lewat menu Link pada

panel Properties.

(63)

Contents Designing

10. Tempatkan pada baris ke-3. Dan sesuai dengan

layout dasar, kita akan buat tabel di dalamnya

dengan melalui Insert -> Table dengan

pengaturan sebagai berikut :

(64)

Step by step desain web

(65)

Footer

11. Pada baris terakhir ( footer ) ganti warna dan

ketikkan teks pada footer . Jangan lupa untuk

melakukan Centering text alias membuat teks di

tengah cell tabel. Kita biasanya menulis copyright

dan sejenisnya pada footer .

(66)

Pengin Mendalami Cara Membuat

Website...??

(67)

Kuliah di

AMIK YMI TEGAL

Jl. Raya Dampyak KM.4 Tegal (Sebelah Timur SPBU MURI)

Hub. Bu ELVI 0857 0008 1905 - http://amiktegal.ac.id

(68)