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


4


5

Mengenal Software Dreamweaver

Adobe Dreamweaver

Adobe Dreamweaver merupakan program penyuntinghalaman web keluaran AdobeSystems yang dulu dikenalsebagai Macromedia Dreamweaver keluaranMacromedia. Program ini banyak digunakan olehpengembang web karena fitur - fiturnya yang menarikdan kemudahan penggunaannya. Versi terakhirMacromedia Dreamweaver sebelum Macromedia dibelioleh Adobe Systems yaitu versi 8.

Software yang akan kita gunakan dalam pelatihan iniadalah Adobe Dreamweaver CS5 yang dirilis pada 12April 2011, sedangkan versi terbaru dari Dreamweaveryaitu Adobe Dreamweaver CS6 yang dirilis pada 21 April2012

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 DreamweaverMemberi 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

14

Menyimpan Dokumen

15

Klik disini untukmenjalankan program

Menjalankanprogram

16

Bekerja dengan Code

Tag-tag HTML

17

Tag-tag HTMLCommand 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 tagAttribute - atribut dari tagValue - 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. HTMLSetiap 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. HEADBagian 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. BODYDocument 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 padabrowser</title></head>

<body>Disini tempat menuliskan teks, menyisipkantabel, gambar, animasi dll.</body></html>

Contoh 1 :

Preview 1

hasil

..\pelatihan\preview1.html

file:///F:/AMIK Tegal/Pelatihan Web/Preview/Preview 1.html

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 ElementBlock level element yang sering di gunakan : Heading (H1 sampai H6)

Preview 2

hasil

file:///F:/AMIK Tegal/Pelatihan Web/Preview/Preview2.html

21

Contoh :

<html><head><title>Formating Paragraf</title></head><body>

<h3>Pelatihan HTML</h3><p>

Palatihan HTML di selenggarakanoleh 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><ul type="circle">

<li>Senin</li><li>selasa</li><li>Rabu</li><li>Kamis</li><li>Jumat</li><li>Sabtu</li><li>Minggu</li>

</ul></body></html>

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:

Preview 4

hasil

html\unorderedlist.html

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><ol start="1" type="I"><li>Senin</li>

<ol type="a"><li>Pengenalan HTML</li><li>Membuat halaman web</li></ol>

<li>Selasa</li><ol type="A"><li>Membuat Tabel</li><li>menambahkan Gambar</li></ol>

<li>Rabu</li><ol type="i"><li>Membuat Link</li></ol>

</ol></body></html>Preview 5

hasil

html\orderedlist.html

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 Halaman1. Begin row (BR)

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

Contoh:<html><head><title>br</title></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 terkaitAmiktegal.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><font color="#0000FF" size=”2” face="Verdana,

Arial, Helvetica, sans-serif">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 / HyperlinkBerfungsi 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></html>

Preview 8

html\link.html

31

Navigasi / Hyperlink

<html><head><title>Link 2</title></head><center><h1><font face="Verdana, Arial, Helvetica, sans-serif" color="#0033FF">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">modulonline</a> | pembuatan website| uji kompetensi</font></h4><p align="left"><font face="Verdana, Arial, Helvetica, sans-serif" color="#FF9900">Materi Pokok</font><a name="mapok"></a></p></center><font face="Verdana, Arial, Helvetica, sans-serif" color="#FF9900">Modul Online</font> <a name="mol"></a></p></body></html>

Hyperlink dalam satu halaman web (Anchor)

Preview 9

html\anchor.html

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><table border="1"><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>

<td align="center">A</td><td>B</td><td>C</td><td>D</td>

</tr></table></body></html>

Preview 10

html\tabel3.html

33

Menambahkan gambar & animasiAnda 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

html\gambar.html

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 InspectorDigunakan untuk memformat teks

Font face

Font Size

Font color

Alignment

Hyperlink

39

Insert Image & MediaDigunakan 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

TableMenambahkan tabel ke dalam lembar kerja

atau

44

Table PropertiesDigunakan untuk memberikan attribut-attribut pada tebal

banyaknya

baris & kolomlebar & tinggi

tabelJarak spasidalam cell

Jarak spasiantar cell

Warnabackground

Gambar latarbelakang

Perataan

ketebalan garispinggir

warna garispinggir

45

Navigasi/HyperlinkDigunakan 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

Ketik nama anchor disini

47

Navigasi/Hyperlink

2. Anchor / Link dalam satu halaman web

Blok menu yang di gunakanuntuk 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

Desain Layout

Menu Website

Home = index.html

Gallery = gallery.html

About Us = about.html

Contact Us = contact.html

Step by step desain web (Manage Site)

1. Siapkan halaman awal yaitu index.htmldan buka dengan Dreamweaver.

2. Manage sitePilih Site -> Manage Site

Step by step desain web (Header)

3. Siapkan gambar header. Header yang digunakan pada contoh berukuran826x326 piksel.

Step by step desain web (TabelDasar)

4. Buat tabel dasar dengan cara Insert -> Table. Atur dengan pengaturan sbb:

Step by step desain web (Tampilan TabelDasar)

5. Hasil Pembuatan Tabel

Step by step desain web (insert header)

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

6. Tempatkan kursor pada baris pertama tabel danmasukkan gambar dengan Insert -> Image.Kemudian pilih gambar header.jpeg.

Step by step desain web

Navigasi7. Tempatkan kursor di baris kedua tabel dan

masukkan tabel baru untuk navigasi lewat Insert -> Table dengan pengaturan sebagai berikut :

Navigasi

Navigasi8. Beri menu navigasi sesuai dengan yang telah

didesain sebelumnya. Kita bisa memberikan warnapada menu navigasi.

Navigasi Link9. Beri link pada tiap menu lewat menu Link pada

panel Properties.

Contents Designing10.Tempatkan pada baris ke-3. Dan sesuai dengan

layout dasar, kita akan buat tabel di dalamnyadengan melalui Insert -> Table denganpengaturan sebagai berikut :

Step by step desain web

Footer 11.Pada baris terakhir (footer) ganti warna dan

ketikkan teks pada footer. Jangan lupa untukmelakukan Centering text alias membuat teks ditengah cell tabel. Kita biasanya menulis copyrightdan 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

Terima kasih

PELATIHAN DESAIN WEB DENGAN ADOBE DREAMWEAVER CS5 Bersama AMIK YMI TEGAL

Documents

Transcript of PELATIHAN DESAIN WEB DENGAN ADOBE DREAMWEAVER CS5 Bersama AMIK YMI TEGAL