Pelatihan Web Dengan Dreamweaver

68
1 PELATIHAN DESAIN WEB DENGAN ADOBE DREAMWEA VER CS5 Bersama AMIK YMI TEGAL

Transcript of Pelatihan Web Dengan Dreamweaver

Page 1: Pelatihan Web Dengan Dreamweaver

8/12/2019 Pelatihan Web Dengan Dreamweaver

http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 1/68

1

PELATIHAN DESAIN WEB

DENGAN ADOBE

DREAMWEAVER CS5

BersamaAMIK YMI TEGAL

Page 2: Pelatihan Web Dengan Dreamweaver

8/12/2019 Pelatihan Web Dengan Dreamweaver

http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 2/68

2

Software yang digunakanuntuk membuat website

Page 3: Pelatihan Web Dengan Dreamweaver

8/12/2019 Pelatihan Web Dengan Dreamweaver

http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 3/68

3

Software yang digunakanuntuk membuat website

Page 4: Pelatihan Web Dengan Dreamweaver

8/12/2019 Pelatihan Web Dengan Dreamweaver

http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 4/68

4

Software yang digunakanuntuk membuat website

Page 5: Pelatihan Web Dengan Dreamweaver

8/12/2019 Pelatihan Web Dengan Dreamweaver

http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 5/68

5

Mengenal Software Dreamweaver

Page 6: Pelatihan Web Dengan Dreamweaver

8/12/2019 Pelatihan Web Dengan Dreamweaver

http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 6/68

 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 menarik dan 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 12 April 2011, sedangkan versi terbaru dari Dreamweaveryaitu Adobe Dreamweaver CS6 yang dirilis pada 21 April

2012

Page 7: Pelatihan Web Dengan Dreamweaver

8/12/2019 Pelatihan Web Dengan Dreamweaver

http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 7/68

7

Tampilan Dreamweaver

Title Bar

Menu Bar

 Area Tampilan Desain

Toolbar

Document

Tampilan Syntax / Code

Properties Inspector

Status bar

Toolbar Insert

Page 8: Pelatihan Web Dengan Dreamweaver

8/12/2019 Pelatihan Web Dengan Dreamweaver

http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 8/688

1. Klik Site pada menubar kemudian pilih New Site

Memulai engan reamweaverMemberi nama site

Page 9: Pelatihan Web Dengan Dreamweaver

8/12/2019 Pelatihan Web Dengan Dreamweaver

http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 9/689

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

Page 10: Pelatihan Web Dengan Dreamweaver

8/12/2019 Pelatihan Web Dengan Dreamweaver

http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 10/6810

3. Lihat pada Files

Nama site

Folder untuk gambar 

  pplication Files

Page 11: Pelatihan Web Dengan Dreamweaver

8/12/2019 Pelatihan Web Dengan Dreamweaver

http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 11/68

Page 12: Pelatihan Web Dengan Dreamweaver

8/12/2019 Pelatihan Web Dengan Dreamweaver

http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 12/6812

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

Mengisi content file HTML

Page 13: Pelatihan Web Dengan Dreamweaver

8/12/2019 Pelatihan Web Dengan Dreamweaver

http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 13/68

Page 14: Pelatihan Web Dengan Dreamweaver

8/12/2019 Pelatihan Web Dengan Dreamweaver

http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 14/68

14

Menyimpan Dokumen

Page 15: Pelatihan Web Dengan Dreamweaver

8/12/2019 Pelatihan Web Dengan Dreamweaver

http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 15/68

15

Klik disini untuk menjalankan program

Menjalankan  program 

Page 16: Pelatihan Web Dengan Dreamweaver

8/12/2019 Pelatihan Web Dengan Dreamweaver

http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 16/68

16

Bekerja dengan Code

Tag-tagHTML 

Page 17: Pelatihan Web Dengan Dreamweaver

8/12/2019 Pelatihan Web Dengan Dreamweaver

http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 17/68

17

Tag-tag HTMLCommand HTML biasanya disebut TAG, TAG digunakan untuk menentukan tampilan dari documentHTML.

<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 menghasilkanoutput 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 nilailavender.

Begin Tag

End Tag

Page 18: Pelatihan Web Dengan Dreamweaver

8/12/2019 Pelatihan Web Dengan Dreamweaver

http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 18/68

Page 19: Pelatihan Web Dengan Dreamweaver

8/12/2019 Pelatihan Web Dengan Dreamweaver

http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 19/68

Page 20: Pelatihan Web Dengan Dreamweaver

8/12/2019 Pelatihan Web Dengan Dreamweaver

http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 20/68

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 

Page 21: Pelatihan Web Dengan Dreamweaver

8/12/2019 Pelatihan Web Dengan Dreamweaver

http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 21/68

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 

[

Page 22: Pelatihan Web Dengan Dreamweaver

8/12/2019 Pelatihan Web Dengan Dreamweaver

http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 22/68

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) maupunyang tidak berurutan (unordered list).

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

Preview 4

hasil 

Page 23: Pelatihan Web Dengan Dreamweaver

8/12/2019 Pelatihan Web Dengan Dreamweaver

http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 23/68

23

Tag Attribute Value Description

<UL> TYPE SQUARE

DISC

CIRCLE

Bullet Kotak

Bullet Titik

Bullet Lingkaran

Unordered List / tidak berurutan (Bullet) :

Page 24: Pelatihan Web Dengan Dreamweaver

8/12/2019 Pelatihan Web Dengan Dreamweaver

http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 24/68

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 

Page 25: Pelatihan Web Dengan Dreamweaver

8/12/2019 Pelatihan Web Dengan Dreamweaver

http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 25/68

Page 26: Pelatihan Web Dengan Dreamweaver

8/12/2019 Pelatihan Web Dengan Dreamweaver

http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 26/68

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 terkait

 Amiktegal.ac.id</body></html>

Preview 6

hasil 

Ganti baris

Page 27: Pelatihan Web Dengan Dreamweaver

8/12/2019 Pelatihan Web Dengan Dreamweaver

http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 27/68

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 AdobeDreamweaver CS5</font></body></html>

Preview 7

hasil 

Page 28: Pelatihan Web Dengan Dreamweaver

8/12/2019 Pelatihan Web Dengan Dreamweaver

http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 28/68

28

Attribute Description

Color  Untuk menentukan warna font, anda bisa menggunakan nama fontatau 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

Page 29: Pelatihan Web Dengan Dreamweaver

8/12/2019 Pelatihan Web Dengan Dreamweaver

http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 29/68

29

 Alignment

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

Value Description

Left Rata Kiri

Right Rata kanan

Center Rata tengah

Justify Rata kanan kiri

Format TextTag 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 ditengah text

<SUP>…</SUP> Superscript text

<SUB>…</SUB> Subcript text>

Page 30: Pelatihan Web Dengan Dreamweaver

8/12/2019 Pelatihan Web Dengan Dreamweaver

http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 30/68

30

Navigasi / Hyperlink Berfungsi untuk memanggil halaman lain yang terkait baik dalam satu alamat web tersebut atau kealamat 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

Page 31: Pelatihan Web Dengan Dreamweaver

8/12/2019 Pelatihan Web Dengan Dreamweaver

http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 31/68

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

Page 32: Pelatihan Web Dengan Dreamweaver

8/12/2019 Pelatihan Web Dengan Dreamweaver

http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 32/68

32

Tabel

Tag <TABLE> digunakan untuk membuat table dalam document HTML ,bagianpokok 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

Page 33: Pelatihan Web Dengan Dreamweaver

8/12/2019 Pelatihan Web Dengan Dreamweaver

http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 33/68

Page 34: Pelatihan Web Dengan Dreamweaver

8/12/2019 Pelatihan Web Dengan Dreamweaver

http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 34/68

34

Bekerja dengan Design View 

 Area anda

mengetik naskah 

Input title disini 

Page 35: Pelatihan Web Dengan Dreamweaver

8/12/2019 Pelatihan Web Dengan Dreamweaver

http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 35/68

35

Page Properties - Appearance

Page 36: Pelatihan Web Dengan Dreamweaver

8/12/2019 Pelatihan Web Dengan Dreamweaver

http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 36/68

Page 37: Pelatihan Web Dengan Dreamweaver

8/12/2019 Pelatihan Web Dengan Dreamweaver

http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 37/68

37

Page Properties-Heading

Page 38: Pelatihan Web Dengan Dreamweaver

8/12/2019 Pelatihan Web Dengan Dreamweaver

http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 38/68

38

Properties InspectorDigunakan untuk memformat teks

Font face 

Font Size 

Font color 

 Alignment 

Hyperlink 

di

Page 39: Pelatihan Web Dengan Dreamweaver

8/12/2019 Pelatihan Web Dengan Dreamweaver

http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 39/68

39

Insert Image & MediaDigunakan untuk menambahkan gambar atau media lain(animasi/video) ke dalam lembar kerja

Pilih file gambarnya 

1. Insert Image

Insert Image & Media

Page 40: Pelatihan Web Dengan Dreamweaver

8/12/2019 Pelatihan Web Dengan Dreamweaver

http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 40/68

40

Insert Image & Media

2. Insert Animasi 

Insert Image & Media

Page 41: Pelatihan Web Dengan Dreamweaver

8/12/2019 Pelatihan Web Dengan Dreamweaver

http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 41/68

41

Insert Image & Media

3. Insert Flash Button 

Rollover Image

Page 42: Pelatihan Web Dengan Dreamweaver

8/12/2019 Pelatihan Web Dengan Dreamweaver

http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 42/68

42

Rollover Image

Gambar 1

Gambar 2

Page 43: Pelatihan Web Dengan Dreamweaver

8/12/2019 Pelatihan Web Dengan Dreamweaver

http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 43/68

Table Properties

Page 44: Pelatihan Web Dengan Dreamweaver

8/12/2019 Pelatihan Web Dengan Dreamweaver

http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 44/68

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

Page 45: Pelatihan Web Dengan Dreamweaver

8/12/2019 Pelatihan Web Dengan Dreamweaver

http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 45/68

Navigasi/Hyperlink

Page 46: Pelatihan Web Dengan Dreamweaver

8/12/2019 Pelatihan Web Dengan Dreamweaver

http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 46/68

46

Navigasi/Hyperlink 

2. Anchor / Link dalam satu halaman web

1. Blok bagian yang akandi panggil

2. Klik icon Anchor

Ketik nama anchor disini

Navigasi/Hyperlink

Page 47: Pelatihan Web Dengan Dreamweaver

8/12/2019 Pelatihan Web Dengan Dreamweaver

http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 47/68

47

Navigasi/Hyperlink 

2. Anchor / Link dalam satu halaman web

Blok menu yang di gunakanuntuk memanggil/link 

Ketik nama bagian yangakan di panggil (anchor)

Page 48: Pelatihan Web Dengan Dreamweaver

8/12/2019 Pelatihan Web Dengan Dreamweaver

http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 48/68

48

Cascading Style Sheet (CSS)CSS digunakan untuk mempermudah dalam pemformatan tampilan halaman web

Klik tanda + untukmenambah css

Page 49: Pelatihan Web Dengan Dreamweaver

8/12/2019 Pelatihan Web Dengan Dreamweaver

http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 49/68

49

Cascading Style Sheet (CSS)

Page 50: Pelatihan Web Dengan Dreamweaver

8/12/2019 Pelatihan Web Dengan Dreamweaver

http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 50/68

50

Cascading Style Sheet (CSS)

Ketik nama css

Page 51: Pelatihan Web Dengan Dreamweaver

8/12/2019 Pelatihan Web Dengan Dreamweaver

http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 51/68

Desain Layout

Page 52: Pelatihan Web Dengan Dreamweaver

8/12/2019 Pelatihan Web Dengan Dreamweaver

http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 52/68

Menu Website

Home = index.html

Gallery = gallery.html

 About Us = about.html

Contact Us = contact.html

Step by step desain web (Manage

Page 53: Pelatihan Web Dengan Dreamweaver

8/12/2019 Pelatihan Web Dengan Dreamweaver

http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 53/68

Step by step desain web (ManageSite)

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

2. Manage sitePilih Site -> Manage Site

Page 54: Pelatihan Web Dengan Dreamweaver

8/12/2019 Pelatihan Web Dengan Dreamweaver

http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 54/68

Step by step desain web (Tabel

Page 55: Pelatihan Web Dengan Dreamweaver

8/12/2019 Pelatihan Web Dengan Dreamweaver

http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 55/68

Step by step desain web (TabelDasar)

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

Page 56: Pelatihan Web Dengan Dreamweaver

8/12/2019 Pelatihan Web Dengan Dreamweaver

http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 56/68

Step by step desain web (Tampilan TabelDasar)

5. Hasil Pembuatan Tabel

Page 57: Pelatihan Web Dengan Dreamweaver

8/12/2019 Pelatihan Web Dengan Dreamweaver

http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 57/68

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.

Page 58: Pelatihan Web Dengan Dreamweaver

8/12/2019 Pelatihan Web Dengan Dreamweaver

http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 58/68

Step by step desain web

Page 59: Pelatihan Web Dengan Dreamweaver

8/12/2019 Pelatihan Web Dengan Dreamweaver

http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 59/68

Navigasi

7. Tempatkan kursor di baris kedua tabel danmasukkan tabel baru untuk navigasi lewat Insert -> Table dengan pengaturan sebagai berikut :

Page 60: Pelatihan Web Dengan Dreamweaver

8/12/2019 Pelatihan Web Dengan Dreamweaver

http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 60/68

Navigasi

Page 61: Pelatihan Web Dengan Dreamweaver

8/12/2019 Pelatihan Web Dengan Dreamweaver

http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 61/68

Navigasi

8. Beri menu navigasi sesuai dengan yang telahdidesain sebelumnya. Kita bisa memberikan warnapada menu navigasi.

Page 62: Pelatihan Web Dengan Dreamweaver

8/12/2019 Pelatihan Web Dengan Dreamweaver

http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 62/68

Navigasi Link 

9. Beri link pada tiap menu lewat menu Link  padapanel Properties.

Page 63: Pelatihan Web Dengan Dreamweaver

8/12/2019 Pelatihan Web Dengan Dreamweaver

http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 63/68

Contents Designing

10.Tempatkan pada baris ke-3. Dan sesuai denganlayout dasar, kita akan buat tabel di dalamnyadengan melalui Insert -> Table denganpengaturan sebagai berikut :

Page 64: Pelatihan Web Dengan Dreamweaver

8/12/2019 Pelatihan Web Dengan Dreamweaver

http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 64/68

Step by step desain web

Page 65: Pelatihan Web Dengan Dreamweaver

8/12/2019 Pelatihan Web Dengan Dreamweaver

http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 65/68

Footer

11.Pada baris terakhir (footer ) ganti warna danketikkan teks pada   footer . Jangan lupa untuk  melakukan Centering text alias membuat teks ditengah cell tabel. Kita biasanya menulis copyright

dan sejenisnya pada footer .

Page 66: Pelatihan Web Dengan Dreamweaver

8/12/2019 Pelatihan Web Dengan Dreamweaver

http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 66/68

66

Pengin Mendalami

Cara Membuat

Website ??

Page 67: Pelatihan Web Dengan Dreamweaver

8/12/2019 Pelatihan Web Dengan Dreamweaver

http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 67/68

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 

Page 68: Pelatihan Web Dengan Dreamweaver

8/12/2019 Pelatihan Web Dengan Dreamweaver

http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 68/68

Terima kasih