3827449 Membuat Web Dengan Dream Weaver

download 3827449 Membuat Web Dengan Dream Weaver

of 53

  • date post

    07-Apr-2018
  • Category

    Documents

  • view

    219
  • download

    0

Embed Size (px)

Transcript of 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