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

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

3/53

digunakan untuk membuat website

3

4/53

4

5/53

5

6/53

Mengenal Software Dreamweaver

6

7/53

Tampilan DreamweaverToolbar Insert

Menu Bar

Title Bar

Toolbar Document

Tool Application

Toolbar Standar Properties Inspector

Status bar

7

8/53

Title Bar Menu Bar Standart toolbar

Document Toolbar Status Bar Properties Inspector

8

9/53

Memulai Dengan DreamweaverMemberi nama site1. Klik Site pada menubar kemudian pilih New Site

9

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

11/53

Application Files3. Lihat pada Application Files

Nama site

Folder untuk gambar

11

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

13/53

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

13

14/53

14

15/53

Menyimpan Dokumen

15

16/53

Klik disini untuk menjalankan program

Menjalankan program

16

17/53

Bekerja dengan Code

Tag-tag HTML

17

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

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

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

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

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

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

24/53

Unordered List / tidak berurutan (Bullet) :

Tag Attribute

Value SQUARE DISC CIRCLE

Description Bullet Kotak Bullet Titik Bullet Lingkara n

24

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

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

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

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

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

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

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

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

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

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

35/53

Bekerja dengan Design ViewInput title disini

Area anda mengetik naskah

35

36/53

Page Properties Appearance

36

37/53

Page Properties - Links

37

38/53

Page PropertiesHeading

38

39/53

Properties InspectorDigunakan untuk memformat teks

Font face

Font Size

Hyperlink

Font color

Alignment

39

40/53

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

1. Insert Image

Pilih file gambarnya

40

41/53

Insert Image & Media2. Insert Animasi

41

42/53

Insert Image & Media3. Insert Flash Button

42

43/53

Rollover Image

Gambar 1 Gambar 2

43

44/53

TableMenambahkan tabel ke dalam lembar kerja

atau

44

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

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

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

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

49/53

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

Klik tanda + untuk menambah css

49

50/53

Cascading Style Sheet (CSS)

50

51/53

Cascading Style Sheet (CSS)Ketik nama css

51

52/53

Terima kasihSukses Untuk Kita Semua52

53/53