Membuat Web Dengan Dream Weaver

PENGEMBANGAN BAHAN BELAJAR BERBASIS WEB
Andi Sulistiyono, S.Kom

andi_sulistiyono@yahoo.com 0813.1972.9696
1
Curriculum Vitae
Pendidikan SD Negeri 2 Sadang - Kudus SMP Negeri 1 Jekulo - Kudus SMA Negeri 2 Kudus Malang Sistem Informasi Universitas Dian Nuswantoro Semarang Pengalaman Kerja Tahun 1998 - 2000 Asisten Laboratorium Komputer Universitas Dian Nuswantoro Semarang Tahun 2000 - 2002 Instruktur Komputer di Sentra Pendidikan Bisnis Magistra Utama Semarang Tahun 2004 masuk Pustekkom sebagai Programmer Multimedia, penulis naskah pengetahuan populer, Team Leader pengerjaan Content Materi Pokok dan Pengetahuan Populer, Pengkaji media penyusunan GBIM, JM, Naskah pengetahuan populer dan Materi Pokok.
digunakan untuk membuat website
Mengenal Software Dreamweaver
Tampilan Dreamweaver
Toolbar Insert
Menu Bar
Title Bar
Toolbar Document
Tool Application
Toolbar Standar Properties Inspector
Status bar
Title Bar Menu Bar Standart toolbar
Document Toolbar Status Bar Properties Inspector
Memulai Dengan Dreamweaver

Memberi nama site
1. Klik Site pada menubar kemudian pilih New Site
Membuat folder untuk penyimpanan file

2. Isi kotak dialog Site Definition for website
Nama site Folder untuk menyimpan file html Folder untuk menyimpan file gambar
10
Application Files
3. Lihat pada Application Files
Nama site
Folder untuk gambar
11
Membuat file HTML

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
12
Mengisi content file HTML

5. Mengisi file HTML, double klik nama file HTML yang telah kita buat.
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>
Begin Tag End Tag
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
18
Struktur HTML bisa di bagi mejadi tiga bagian utama: Document 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
Contoh 1 :
<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> Preview 1
hasil
20
Basic HTML Element

Block level element yang sering di gunakan : Heading (H1 sampai H6) Contoh : <html> <head> <title>Heading Elemet</title> </head> <body> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> hasil <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> </body> </html>
Preview 2
21
Paragraf (P)
Digunakan untuk memulai paragraf baru atau format paragraf Contoh : <html> <head> <title>Formating Paragraf</title> </head> <body> <h3>Pelatihan HTML</h3> <p> Palatihan HML di selenggarakan oleh Pustekkom Diknas </p> </body> </html>
hasil
Preview 3
[
22
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: 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> hasil <li>Kamis</li> <li>Jumat</li> <li>Sabtu</li> <li>Minggu</li> </ul></body> </html>
Preview 4
23
Unordered List / tidak berurutan (Bullet) :
Tag Attribute <U TYPE L >
Value SQUARE DISC CIRCLE
Description Bullet Kotak Bullet Titik Bullet Lingkara n
24
List Item (LI)

2. Ordered List / Berurutan (Numbering) Contoh : <html> <head> <title>Ordere List</title> </head> <body> Scedule Pelatihan HTML <p> hasil <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"> Preview 5 <li>Membuat Link</li> </ol>
25
Ordered List / Berurutan (Numbering)
Tag <OL>
Attribut e TYPE
Value I i A a n
Description Lower Roman Uper Roman Uppercase Lowercase Begin Number
<OL>
START
26
Pemformatan 1. Begin row (BR) Halaman

Tag <BR> di gunakan untuk memulai baris baru pada document HTML. Contoh: <html> <head> <title>br</title> </head> <body> <center>HALAMAN WEB PUSTEKKOM</center> <p> Pustekkom Depdiknas<br> Jl. Cendrawasik Km 15.5 <br><br> Link terkait www.e-dukasi.net </body> </html>
hasil
Preview 6
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 Produksi PengPop</title> </head> <body> <font color="#0000FF" size=2 face="Verdana, Arial, Helvetica, sans-serif"> Pelatihan Produksi PengPop Tahap 1 </font> </body> </html>
hasil
Preview 7
28
Attribute Format Font
Attribute Color
Description Untuk menentukan warna font, anda bisa menggunakan nama font atau hexadecimal(#000000 - #ffffff) Untuk menentukan ukuran dari font 1 - 7 Untuk menentukan jenis font biasanya dalam satu list ada beberapa font dan akan di baca mulai dari yangpaling kiri.
Size face
29
Alignment
Align attribute digunakan untuk menentukan perataan object dalam document HTML baik berupa text, object, image, paragraph, division dan lain-lain.
Value Left Right Center Justify
Description Rata Kiri Rata kanan Rata tengah Rata kanan kiri
Format Text Tag

<B></B> <I></I> <U></U> <BIG></BIG> <SMALL> </SMALL> <STRIKE> </STRIKE> <SUP></SUP> <SUB></SUB>
Description Cetak tebal Cetak miring Cetak garis bawah Untuk ukuran yang lebih besar dari normal Untuk ukuran yang lebih kecil dari normal Untuk memberi garis di tengah text Superscript text 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 Pustekkom yang memanggil halaman web edukasinet <html> <head> <title>Link 1</title> </head> <body> <center>HALAMAN WEB PUSTEKKOM</center> <p> Pustekkom Depdiknas<br> Jl. Cendrawasih Km 15.5 <br><br> Link terkait <a href="link2.html">www.e-dukasi.net</a> </body> </html> Preview 8
31
Navigasi / Hyperlink
Hyperlink dalam satu halaman web (Anchor)
<html><head> <title>Link 2</title> </head> <center> <h1><font face="Verdana, Arial, Helvetica, sans-serif" color="#0033FF"> HALAMAN WEB EDUKASINET</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> | pengetahuan populer | 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> Preview 9 </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> Preview 10 </html>
33
Menambahkan gambar & Anda dapat menambahkan gambar dan animasi pada halaman web yang animasi 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/satu.jpg" height="500" width="369"> </body> </html>
Preview 11
34
Bekerja dengan Design View

Input title disini
Area anda mengetik naskah
35
Page Properties Appearance
36
Page Properties - Links
37
Page PropertiesHeading
38
Properties Inspector
Digunakan untuk memformat teks
Font face
Font Size
Hyperlink
Font color
Alignment
39
Insert Image & Media

Digunakan untuk menambahkan gambar atau media lain(animasi/video) ke dalam lembar kerja
1. Insert Image
Pilih file gambarnya
40

2. Insert Animasi
41

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
Perataan
warna garis pinggir
Warna background
Gambar latar belakang
Jarak spasi antar cell
ketebalan garis pinggir
45
Navigasi/Hyperlink
1. Hyperlink ke alamat website lain
Digunakan untuk menghubungkan antar file html dalam satu website atau dengan website lain.
Atau pada properties inspector
46
Navigasi/Hyperlink
2. Anchor / Link dalam satu halaman web
2. Klik icon Anchor
1. Blok bagian yang akan di panggil
Ketik nama anchor disini 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
50

Ketik nama css
51
Terima kasih
Sukses Untuk Kita Semua
52

Membuat Web Dengan Dream Weaver

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Membuat Web Dengan Dream Weaver

Uploaded by

Copyright:

Available Formats

PENGEMBANGAN BAHAN BELAJAR BERBASIS WEB

Andi Sulistiyono, S.Kom

digunakan untuk membuat website

digunakan untuk membuat website

digunakan untuk membuat website

Mengenal Software Dreamweaver

Toolbar Standar Properties Inspector

Title Bar Menu Bar Standart toolbar

Document Toolbar Status Bar Properties Inspector

Memulai Dengan Dreamweaver

Membuat folder untuk penyimpanan file

Folder untuk gambar

Membuat file HTML

Mengisi content file HTML

Klik disini untuk menjalankan program

Bekerja dengan Code

Begin Tag End Tag

Basic HTML Element

Unordered List / tidak berurutan (Bullet) :

Tag Attribute <U TYPE L >

Value SQUARE DISC CIRCLE

Description Bullet Kotak Bullet Titik Bullet Lingkara n

List Item (LI)

Ordered List / Berurutan (Numbering)

Description Lower Roman Uper Roman Uppercase Lowercase Begin Number

Pemformatan 1. Begin row (BR) Halaman

Attribute Format Font

Value Left Right Center Justify

Format Text Tag

Bekerja dengan Design View

Area anda mengetik naskah

Page Properties Appearance

Page Properties - Links

Insert Image & Media

Pilih file gambarnya

Insert Image & Media

Insert Image & Media

warna garis pinggir

Gambar latar belakang

Jarak spasi antar cell

ketebalan garis pinggir

Atau pada properties inspector

1. Blok bagian yang akan di panggil

Ketik nama anchor disini 47

Cascading Style Sheet (CSS)

Klik tanda + untuk menambah css

Cascading Style Sheet (CSS)

Cascading Style Sheet (CSS)

You might also like