Download - 3827449 Membuat Web Dengan Dream Weaver
-
8/3/2019 3827449 Membuat Web Dengan Dream Weaver
1/53
PENGEMBANGAN BAHAN BELAJAR BERBASIS WEBAndi Sulistiyono, [email protected] 0813.1972.96961
-
8/3/2019 3827449 Membuat Web Dengan Dream Weaver
2/53
Curriculum VitaePendidikan 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.
2
-
8/3/2019 3827449 Membuat Web Dengan Dream Weaver
3/53
digunakan untuk membuat website
3
-
8/3/2019 3827449 Membuat Web Dengan Dream Weaver
4/53
digunakan untuk membuat website
4
-
8/3/2019 3827449 Membuat Web Dengan Dream Weaver
5/53
digunakan untuk membuat website
5
-
8/3/2019 3827449 Membuat Web Dengan Dream Weaver
6/53
Mengenal Software Dreamweaver
6
-
8/3/2019 3827449 Membuat Web Dengan Dream Weaver
7/53
Tampilan DreamweaverToolbar Insert
Menu Bar
Title Bar
Toolbar Document
Tool Application
Toolbar Standar Properties Inspector
Status bar
7
-
8/3/2019 3827449 Membuat Web Dengan Dream Weaver
8/53
Title Bar Menu Bar Standart toolbar
Document Toolbar Status Bar Properties Inspector
8
-
8/3/2019 3827449 Membuat Web Dengan Dream Weaver
9/53
Memulai Dengan DreamweaverMemberi nama site1. Klik Site pada menubar kemudian pilih New Site
9
-
8/3/2019 3827449 Membuat Web Dengan Dream Weaver
10/53
Membuat folder untuk penyimpanan file2. Isi kotak dialog Site Definition for website
Nama site Folder untuk menyimpan file html Folder untuk menyimpan file gambar
10
-
8/3/2019 3827449 Membuat Web Dengan Dream Weaver
11/53
Application Files3. Lihat pada Application Files
Nama site
Folder untuk gambar
11
-
8/3/2019 3827449 Membuat Web Dengan Dream Weaver
12/53
Membuat file HTML4. 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
-
8/3/2019 3827449 Membuat Web Dengan Dream Weaver
13/53
Mengisi content file HTML5. Mengisi file HTML, double klik nama file HTML yang telah kita buat.
13
-
8/3/2019 3827449 Membuat Web Dengan Dream Weaver
14/53
14
-
8/3/2019 3827449 Membuat Web Dengan Dream Weaver
15/53
Menyimpan Dokumen
15
-
8/3/2019 3827449 Membuat Web Dengan Dream Weaver
16/53
Klik disini untuk menjalankan program
Menjalankan program
16
-
8/3/2019 3827449 Membuat Web Dengan Dream Weaver
17/53
Bekerja dengan Code
Tag-tag HTML
17
-
8/3/2019 3827449 Membuat Web Dengan Dream Weaver
18/53
Tag-tag HTMLCommand HTML biasanya disebut TAG, TAG digunakan untuk menentukan tampilan daridocument HTML. Setiap document HTML di awali dan di akhiri dengan tag HTML.
Begin Tag End Tag
Tag tidak case sensitive, jadi anda bisa gunakan atau keduanya menghasilkan output yang sama. Bentuk dari tag HTML sebagai berikut: Element - nama tag Attribute - atribut dari tag Value - nilai dariatribut. Contoh : BODY merupakan element, BGCOLOR(Background) merupakan atribut yang memiliki nilai
18
-
8/3/2019 3827449 Membuat Web Dengan Dream Weaver
19/53
Struktur HTML bisa di bagi mejadi tiga bagian utama: Document HTML1. HTML Setiap document HTML harus di awali dan di tutup dengan tag 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 di dalam bagian ini dimuat tag TITLE yang menampilkan judul dari halaman pada titlenya browser. 3. BODY Document bodydi gunakan untuk menampilkan text, image link dan semua yang akan di tampilkan
pada web page.
19
-
8/3/2019 3827449 Membuat Web Dengan Dream Weaver
20/53
Contoh 1 :
Judul yang ada di pojok kiri atas pada browser Disini tempat menuliskan teks, menyisipkan tabel, gambar, animasi dll. Preview 1
hasil
20
-
8/3/2019 3827449 Membuat Web Dengan Dream Weaver
21/53
Basic HTML ElementBlock level element yang sering di gunakan : Heading (H1 sampai H6) Contoh : Heading Elemet Heading 1 Heading 2 Heading 3 hasil Heading 4 Heading 5 Heading 6
Preview 2
21
-
8/3/2019 3827449 Membuat Web Dengan Dream Weaver
22/53
Paragraf (P)Digunakan untuk memulai paragraf baru atau format paragraf Contoh : Formating Paragraf Pelatihan HTML
Palatihan HML di selenggarakan oleh Pustekkom Diknas
hasil
Preview 3
[22
-
8/3/2019 3827449 Membuat Web Dengan Dream Weaver
23/53
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 : Unordere List Contoh penggunaan Unordered List
Senin selasa Rabu hasil Kamis Jumat Sabtu Minggu
Preview 423
-
8/3/2019 3827449 Membuat Web Dengan Dream Weaver
24/53
Unordered List / tidak berurutan (Bullet) :
Tag Attribute
Value SQUARE DISC CIRCLE
Description Bullet Kotak Bullet Titik Bullet Lingkara n
24
-
8/3/2019 3827449 Membuat Web Dengan Dream Weaver
25/53
List Item (LI)2. Ordered List / Berurutan (Numbering) Contoh : Ordere List Scedule Pelatihan HTML
hasil Senin Pengenalan HTML Membuat halaman web
Selasa Membuat Tabel menambahkanGambar Rabu Preview 5 Membuat Link
25
8/3/2019 3827449 Membuat Web Dengan Dream Weaver
26/53
Ordered List / Berurutan (Numbering)
Tag
Attribut e TYPE
Value I i A a n
Description Lower Roman Uper Roman Uppercase Lowercase Begin Number
START
26
8/3/2019 3827449 Membuat Web Dengan Dream Weaver
27/53
Pemformatan 1. Begin row (BR) HalamanTag
di gunakan untuk memulai baris baru pada document HTML. Contoh: br
HALAMAN WEB PUSTEKKOM
Pustekkom Depdiknas
Jl. Cendrawasik Km 15.5
Link terkait www.e-dukasi.net
hasil
Preview 6
Ganti baris 27
8/3/2019 3827449 Membuat Web Dengan Dream Weaver
28/53
2. Format FontDengan tag anda bisa menentukan format tampilan font dalam document HTMLseperti color, size, style dan lainya. Contoh: Pelatihan Produksi PengPop Pelatihan Produksi PengPop Tahap 1
hasil
Preview 7
28
8/3/2019 3827449 Membuat Web Dengan Dream Weaver
29/53
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 mul
ai dari yangpaling kiri.
Size face
29
8/3/2019 3827449 Membuat Web Dengan Dream Weaver
30/53
AlignmentAlign 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>
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
8/3/2019 3827449 Membuat Web Dengan Dream Weaver
31/53
Navigasi / HyperlinkBerfungsi 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 Link 1 HALAMAN WEB PUSTEKKOM
Pustekkom Depdiknas
Jl. Cendrawasih Km 15.5
Link terkait www.e-dukasi.net Preview 831
8/3/2019 3827449 Membuat Web Dengan Dream Weaver
32/53
Navigasi / HyperlinkHyperlink dalam satu halaman web (Anchor)
Link 2 HALAMAN WEB EDUKASINET
materi pokok modul online pengetahuan populer uji kompetensi
Materi Pokok
Modul Online Preview 9
32
8/3/2019 3827449 Membuat Web Dengan Dream Weaver
33/53
TabelTag digunakan untuk membuat table dalam document HTML ,bagian pokok daritable adalah cell yang didefinisikan dengan menggunakan tag . Contoh : tabel 1 TABEL
Tabel dengan single cell Tabel dengan dua cell Tabel dengan tiga cell Tabel dengan empat cell A B C D Preview 10
33
8/3/2019 3827449 Membuat Web Dengan Dream Weaver
34/53
Menambahkan gambar & Anda dapat menambahkan gambar dan animasi pada halaman webyang animasi anda buat.Contoh : Gambar Insert Gambar
Insert gambar di sini
Preview 11
34
8/3/2019 3827449 Membuat Web Dengan Dream Weaver
35/53
Bekerja dengan Design ViewInput title disini
Area anda mengetik naskah
35
8/3/2019 3827449 Membuat Web Dengan Dream Weaver
36/53
Page Properties Appearance
36
8/3/2019 3827449 Membuat Web Dengan Dream Weaver
37/53
Page Properties - Links
37
8/3/2019 3827449 Membuat Web Dengan Dream Weaver
38/53
Page PropertiesHeading
38
8/3/2019 3827449 Membuat Web Dengan Dream Weaver
39/53
Properties InspectorDigunakan untuk memformat teks
Font face
Font Size
Hyperlink
Font color
Alignment
39
8/3/2019 3827449 Membuat Web Dengan Dream Weaver
40/53
Insert Image & MediaDigunakan untuk menambahkan gambar atau media lain(animasi/video) ke dalam lembar kerja
1. Insert Image
Pilih file gambarnya
40
8/3/2019 3827449 Membuat Web Dengan Dream Weaver
41/53
Insert Image & Media2. Insert Animasi
41
8/3/2019 3827449 Membuat Web Dengan Dream Weaver
42/53
Insert Image & Media3. Insert Flash Button
42
8/3/2019 3827449 Membuat Web Dengan Dream Weaver
43/53
Rollover Image
Gambar 1 Gambar 2
43
8/3/2019 3827449 Membuat Web Dengan Dream Weaver
44/53
TableMenambahkan tabel ke dalam lembar kerja
atau
44
8/3/2019 3827449 Membuat Web Dengan Dream Weaver
45/53
Table PropertiesDigunakan untuk memberikan attribut-attribut pada tebal banyaknya baris & kolomlebar & tinggi tabel Jarak spasi dalam cell
Perataan
warna garis pinggir
Warna background
Gambar latar belakang
Jarak spasi antar cell
ketebalan garis pinggir
45
8/3/2019 3827449 Membuat Web Dengan Dream Weaver
46/53
Navigasi/Hyperlink1. Hyperlink ke alamat website lainDigunakan untuk menghubungkan antar file html dalam satu website atau dengan website lain.
Atau pada properties inspector
46
8/3/2019 3827449 Membuat Web Dengan Dream Weaver
47/53
Navigasi/Hyperlink2. Anchor / Link dalam satu halaman web2. Klik icon Anchor
1. Blok bagian yang akan di panggil
Ketik nama anchor disini 47
8/3/2019 3827449 Membuat Web Dengan Dream Weaver
48/53
Navigasi/Hyperlink2. Anchor / Link dalam satu halaman web
Blok menu yang di gunakan untuk memanggil/link Ketik nama bagian yang akan di panggil (anchor)
48
8/3/2019 3827449 Membuat Web Dengan Dream Weaver
49/53
Cascading Style Sheet (CSS)CSS digunakan untuk mempermudah dalam pemformatan tampilan halaman web
Klik tanda + untuk menambah css
49
8/3/2019 3827449 Membuat Web Dengan Dream Weaver
50/53
Cascading Style Sheet (CSS)
50
8/3/2019 3827449 Membuat Web Dengan Dream Weaver
51/53
Cascading Style Sheet (CSS)Ketik nama css
51
8/3/2019 3827449 Membuat Web Dengan Dream Weaver
52/53
Terima kasihSukses Untuk Kita Semua52
8/3/2019 3827449 Membuat Web Dengan Dream Weaver
53/53