pelatihan web dengan dreamweaver
Post on 03-Jun-2018
224 Views
Preview:
TRANSCRIPT
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
8/12/2019 Pelatihan Web Dengan Dreamweaver
http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 2/68
2
Software yang digunakanuntuk membuat website
8/12/2019 Pelatihan Web Dengan Dreamweaver
http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 3/68
3
Software yang digunakanuntuk membuat website
8/12/2019 Pelatihan Web Dengan Dreamweaver
http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 4/68
4
Software yang digunakanuntuk membuat website
8/12/2019 Pelatihan Web Dengan Dreamweaver
http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 5/68
5
Mengenal Software 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
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
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
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
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
8/12/2019 Pelatihan Web Dengan Dreamweaver
http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 11/68
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
8/12/2019 Pelatihan Web Dengan Dreamweaver
http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 13/68
8/12/2019 Pelatihan Web Dengan Dreamweaver
http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 14/68
14
Menyimpan Dokumen
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
8/12/2019 Pelatihan Web Dengan Dreamweaver
http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 16/68
16
Bekerja dengan Code
Tag-tagHTML
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
8/12/2019 Pelatihan Web Dengan Dreamweaver
http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 18/68
8/12/2019 Pelatihan Web Dengan Dreamweaver
http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 19/68
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
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
[
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
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) :
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
8/12/2019 Pelatihan Web Dengan Dreamweaver
http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 25/68
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
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
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
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>
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
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
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
8/12/2019 Pelatihan Web Dengan Dreamweaver
http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 33/68
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
8/12/2019 Pelatihan Web Dengan Dreamweaver
http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 35/68
35
Page Properties - Appearance
8/12/2019 Pelatihan Web Dengan Dreamweaver
http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 36/68
8/12/2019 Pelatihan Web Dengan Dreamweaver
http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 37/68
37
Page Properties-Heading
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
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
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
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
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
8/12/2019 Pelatihan Web Dengan Dreamweaver
http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 43/68
Table Properties
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
8/12/2019 Pelatihan Web Dengan Dreamweaver
http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 45/68
Navigasi/Hyperlink
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
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)
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
8/12/2019 Pelatihan Web Dengan Dreamweaver
http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 49/68
49
Cascading Style Sheet (CSS)
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
8/12/2019 Pelatihan Web Dengan Dreamweaver
http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 51/68
Desain Layout
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
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
8/12/2019 Pelatihan Web Dengan Dreamweaver
http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 54/68
Step by step desain web (Tabel
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:
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
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.
8/12/2019 Pelatihan Web Dengan Dreamweaver
http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 58/68
Step by step desain web
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 :
8/12/2019 Pelatihan Web Dengan Dreamweaver
http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 60/68
Navigasi
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.
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.
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 :
8/12/2019 Pelatihan Web Dengan Dreamweaver
http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 64/68
Step by step desain web
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 .
8/12/2019 Pelatihan Web Dengan Dreamweaver
http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 66/68
66
Pengin Mendalami
Cara Membuat
Website ??
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
8/12/2019 Pelatihan Web Dengan Dreamweaver
http://slidepdf.com/reader/full/pelatihan-web-dengan-dreamweaver 68/68
Terima kasih
top related