Membuat Web Dengan Dreamweaver

download Membuat Web Dengan Dreamweaver

of 52

Transcript of Membuat Web Dengan Dreamweaver

  • 8/14/2019 Membuat Web Dengan Dreamweaver

    1/52

    1

    Andi Sulistiyono,Andi Sulistiyono,S.KomS.Kom

    [email protected]

    0813.1972.96960813.1972.9696

    PENGEMBANGANPENGEMBANGAN

    BAHAN BELAJARBAHAN BELAJAR

    BERBASIS WEBBERBASIS WEB

    mailto:[email protected]:[email protected]
  • 8/14/2019 Membuat Web Dengan Dreamweaver

    2/52

    2

    Pendidikan SD Negeri 2 Sadang - Kudus SMP Negeri 1 Jekulo - Kudu

    s 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 MateriPokok dan Pengetahuan Populer, Pengkaji media penyusunan GBIM,JM, Naskah pengetahuan populer dan Materi Pokok.

    Curriculum VitaeCurriculum Vitae

  • 8/14/2019 Membuat Web Dengan Dreamweaver

    3/52

    3

    digunakan untukdigunakan untuk

    membuat websitemembuat website

  • 8/14/2019 Membuat Web Dengan Dreamweaver

    4/52

    4

    digunakan untukdigunakan untuk

    membuat websitemembuat website

  • 8/14/2019 Membuat Web Dengan Dreamweaver

    5/52

    5

    digunakan untukdigunakan untuk

    membuat websitemembuat website

  • 8/14/2019 Membuat Web Dengan Dreamweaver

    6/52

    6

    Mengenal SoftwareMengenal SoftwareDreamweaverDreamweaver

  • 8/14/2019 Membuat Web Dengan Dreamweaver

    7/52

    7

    TampilanTampilan

    DreamweaverDreamweaver

    TitleBarMenu

    Bar

    Toolbar Insert

    ToolbarDocument

    ToolbarStandar

    PropertiesInspector

    Status

    bar

    ToolApplication

  • 8/14/2019 Membuat Web Dengan Dreamweaver

    8/528

    Title BarTitle Bar

    Menu BarMenu Bar

    Standart toolbarStandart toolbar

    DocumentDocument

    ToolbarToolbar

    Status BarStatus Bar

    Properties InspectorProperties Inspector

  • 8/14/2019 Membuat Web Dengan Dreamweaver

    9/529

    1. Klik Site pada menubar kemudian pilih New Site

    Memulai Dengan DreamweaverMemberi nama site

  • 8/14/2019 Membuat Web Dengan Dreamweaver

    10/5210

    2. Isi kotak dialog Site Definition for website

    Nama site

    Folder untuk

    menyimpan file html

    Folder untuk

    menyimpan file gambar

    Membuat folder untuk penyimpananfile

  • 8/14/2019 Membuat Web Dengan Dreamweaver

    11/5211

    3. Lihat pada Application Files

    Nama site

    Folder untuk gambar

    Application Files

  • 8/14/2019 Membuat Web Dengan Dreamweaver

    12/5212

    4. Buat file HTML klik kanan pada nama site yang

    kita buat tadi kemudian pilih New File

    Kemudian ketik nama fileyang akan anda buat,

    file utama yang di buat

    diberi nama index.html

    Membuat file HTML

  • 8/14/2019 Membuat Web Dengan Dreamweaver

    13/52

    13

    5. Mengisi file HTML, double klik nama fileHTML yang telah kita buat.

    Mengisi content file HTML

  • 8/14/2019 Membuat Web Dengan Dreamweaver

    14/52

    14

  • 8/14/2019 Membuat Web Dengan Dreamweaver

    15/52

    15

    Menyimpan DokumenMenyimpan Dokumen

  • 8/14/2019 Membuat Web Dengan Dreamweaver

    16/52

    16

    Klik disini untukmenjalankan

    program

    MenjalankanMenjalankanprogramprogram

  • 8/14/2019 Membuat Web Dengan Dreamweaver

    17/52

    17

    Bekerja denganCode

    Tag-tagTag-tagHTMLHTML

  • 8/14/2019 Membuat Web Dengan Dreamweaver

    18/52

    18

    Tag-tag HTMLCommand HTML biasanya disebut TAG, TAG digunakan untuk menentukan tampilan

    dari document

    HTML.

    Setiap document HTML di awali dan di akhiri dengan tag HTML.

    --

    -

    Tag tidak case sensitive, jadi anda bisa gunakan atau keduanyamenghasilkan

    output yang sama.Bentuk dari tag HTML sebagai berikut:

    Element - nama tagAttribute - atribut dari tagValue - nilai dari atribut.Contoh :

    BODYmerupakan element,BGCOLOR(Background) merupakan atribut yangmemiliki nilai

    BeginTag

    End Tag

  • 8/14/2019 Membuat Web Dengan Dreamweaver

    19/52

    19

    Document HTML bisa di bagi mejadi tiga bagian utama:

    StrukturStruktur

    HTMLHTML

    1. HTMLSetiap 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. HEADBagian header dari document HTML di apit oleh tag di dalam bagian

    ini dimuat tag TITLE yang menampilkan judul dari halaman pada titlenya browser.

    3. BODYDocument body di gunakan untuk menampilkan text, image link dan semua yang akan

    di tampilkan pada web page.

  • 8/14/2019 Membuat Web Dengan Dreamweaver

    20/52

    20

    Judul yang ada di pojok kiri atas padabrowser

    Disini tempat menuliskan teks,menyisipkan tabel, gambar, animasi dll.

    Contoh 1 :

    Preview 1

    hasilhasil

    http://html/preview1.htmlhttp://html/preview1.html
  • 8/14/2019 Membuat Web Dengan Dreamweaver

    21/52

    21

    Contoh :

    Heading Elemet

    Heading 1Heading 2Heading 3Heading 4Heading 5Heading 6

    Basic HTML ElementBlock level element yang sering di gunakan : Heading (H1 sampaiH6)

    Preview 2

    hasilhasil

    http://html/heading.htmlhttp://html/heading.html
  • 8/14/2019 Membuat Web Dengan Dreamweaver

    22/52

    22

    Contoh :

    Formating Paragraf

    Pelatihan HTML

    Palatihan HML di selenggarakanoleh Pustekkom Diknas

    Paragraf (P)Digunakan untuk memulai paragraf baru atau format paragraf

    Preview 3

    hasilhasil

    [

    http://html/heading.htmlhttp://html/heading.html
  • 8/14/2019 Membuat Web Dengan Dreamweaver

    23/52

    23

    1. Unordered List / tidak berurutan (Bullet) :

    Contoh :Unordere ListContoh penggunaan Unordered List

    SeninselasaRabu

    KamisJumatSabtuMinggu

    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

    hasilhasil

    http://html/unorderedlist.htmlhttp://html/unorderedlist.html
  • 8/14/2019 Membuat Web Dengan Dreamweaver

    24/52

    24

    BulletKotak

    Bullet Titik

    BulletLingkaran

    SQUAREDISCCIRCLE

    TYPE

    DescriptionValueAttributeTag

    Unordered List / tidak berurutan(Bullet) :

  • 8/14/2019 Membuat Web Dengan Dreamweaver

    25/52

    25

    List Item (LI)2. Ordered List / Berurutan

    (Numbering)

    Contoh :Ordere ListScedule Pelatihan HTML

    Senin

    Pengenalan HTMLMembuat halaman

    web

    SelasaMembuat Tabelmenambahkan

    Gambar

    Rabu

    Membuat Link

    Preview 5

    hasil

    http://html/orderedlist.htmlhttp://html/orderedlist.html
  • 8/14/2019 Membuat Web Dengan Dreamweaver

    26/52

    26

    Begin NumbernSTART

    Lower RomanUper RomanUppercase

    Lowercase

    IiA

    a

    TYPE

    DescriptionValueAttribute

    Tag

    Ordered List / Berurutan(Numbering)

  • 8/14/2019 Membuat Web Dengan Dreamweaver

    27/52

    27

    PemformatanHalaman1. Begin row (BR)

    Tag
    di gunakan untuk memulai baris baru pada document

    HTML.Contoh:brHALAMAN WEB PUSTEKKOM

    Pustekkom Depdiknas
    Jl. Cendrawasik Km 15.5

    Link terkaitwww.e-dukasi.net

    Preview 6

    hasil

    Ganti baris

    http://html/br.htmlhttp://html/br.html
  • 8/14/2019 Membuat Web Dengan Dreamweaver

    28/52

    28

    2. Format Font

    Dengan tag anda bisa menentukan format tampilan font dalam documentHTML

    seperti color, size, style dan lainya.

    Contoh:

    Pelatihan Produksi PengPopPelatihan Produksi PengPop Tahap 1

    Preview 7

    hasil

    http://html/formatfont.htmlhttp://html/formatfont.html
  • 8/14/2019 Membuat Web Dengan Dreamweaver

    29/52

    29

    Untuk menentukan jenis font biasanya dalam satu listada beberapafont dan akan di baca mulai dari yangpaling kiri.

    face

    Untuk menentukan ukuran dari font 1 - 7Size

    Untuk menentukan warna font, anda bisa menggunakan nama font

    atau hexadecimal(#000000 - #ffffff)

    Color

    DescriptionAttribute

    Attribute Format Font

  • 8/14/2019 Membuat Web Dengan Dreamweaver

    30/52

    30

    Alignment

    Align attribute digunakan untuk menentukan perataan object dalam documentHTML baik berupa text, object, image, paragraph, division dan lain-lain.

    Rata kanankiri

    Justify

    Ratatengah

    Center

    Rata kananRight

    Rata KiriLeft

    DescriptionValue FormatText

    Subcript text>

    Superscript text

    Untuk memberigaris di

    tengah text

    Untuk ukuran yanglebih

    kecil dari normal

    Untuk ukuran yanglebih

    besar dari normal

    Cetak garis bawah

    Cetak miring

    Cetak tebal

    DescriptionTag

  • 8/14/2019 Membuat Web Dengan Dreamweaver

    31/52

    31

    Navigasi / HyperlinkBerfungsi untuk memanggil halaman lain yang terkait baik dalam satu alamat webtersebut atau ke alamat web lain.

    Contoh :Halaman web Pustekkom yang memanggil halaman webedukasinet

    Link 1HALAMAN WEB PUSTEKKOM

    Pustekkom Depdiknas
    Jl. Cendrawasih Km 15.5

    Link terkaitwww.e-dukasi.net

    Preview 8

    http://html/link.htmlhttp://html/link.html
  • 8/14/2019 Membuat Web Dengan Dreamweaver

    32/52

    32

    Navigasi / Hyperlink

    Link 2HALAMAN WEB EDUKASINET


    materi pokok | modulonline | pengetahuan populer | uji kompetensi

    Materi Pokok

    Modul Online

    Hyperlink dalam satu halaman web (Anchor)

    Preview 9

    http://html/anchor.htmlhttp://html/anchor.htmlhttp://html/anchor.html
  • 8/14/2019 Membuat Web Dengan Dreamweaver

    33/52

    33

    Tabel

    Tag digunakan untuk membuat table dalam document HTML,bagian pokok dari table adalah cell yang didefinisikan dengan

    menggunakan tag .Contoh :tabel 1TABEL

    Tabel dengan single cellTabel dengan dua cellTabel dengan tiga cellTabel dengan empat cell

    ABCD

    Preview 10

    http://html/tabel3.htmlhttp://html/tabel3.html
  • 8/14/2019 Membuat Web Dengan Dreamweaver

    34/52

    34

    Menambahkan gambar &animasiAnda dapat menambahkan gambar dan animasi pada halaman web yanganda buat.

    Contoh :Contoh :

    GambarGambar

    Insert GambarInsert Gambar

    Insert gambar di siniInsert gambar di sini

    Preview 11

    http://html/gambar.htmlhttp://html/gambar.html
  • 8/14/2019 Membuat Web Dengan Dreamweaver

    35/52

    35

    Bekerja dengan DesignBekerja dengan Design

    ViewView

    Area anda

    mengetiknaskah

    Input title disiniInput title disini

  • 8/14/2019 Membuat Web Dengan Dreamweaver

    36/52

  • 8/14/2019 Membuat Web Dengan Dreamweaver

    37/52

    37

    Page Properties - LinksPage Properties - Links

  • 8/14/2019 Membuat Web Dengan Dreamweaver

    38/52

    38

    Page Properties-Page Properties-

    HeadingHeading

  • 8/14/2019 Membuat Web Dengan Dreamweaver

    39/52

    39

    Properties InspectorDigunakan untuk memformat teks

    Font faceFont face

    Font SizeFont Size

    Font colorFont color

    AlignmentAlignment

    HyperlinkHyperlink

    di

  • 8/14/2019 Membuat Web Dengan Dreamweaver

    40/52

    40

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

    Pilih file gambarnyaPilih file gambarnya

    1. Insert Image

    Insert Image & Media

  • 8/14/2019 Membuat Web Dengan Dreamweaver

    41/52

    41

    Insert Image & Media

    2. Insert Animasi

    Insert Image & Media

  • 8/14/2019 Membuat Web Dengan Dreamweaver

    42/52

    42

    Insert Image & Media

    3. Insert Flash Button

    Rollover Image

  • 8/14/2019 Membuat Web Dengan Dreamweaver

    43/52

    43

    Rollover Image

    Gambar1Gambar2

    Table

  • 8/14/2019 Membuat Web Dengan Dreamweaver

    44/52

    44

    TableMenambahkan tabel ke dalam lembar kerja

    atau

    Table Properties

  • 8/14/2019 Membuat Web Dengan Dreamweaver

    45/52

    45

    Table PropertiesDigunakan untuk memberikan attribut-attribut pada tebal

    banyaknya

    baris & kolomlebar & tinggi

    tabelJarak spasidalam cell

    Jarak spasiantar cell

    Warnabackground

    Gambar latarbelakang

    Perataan

    ketebalangaris pinggir

    warna garispinggir

    Navigasi/Hyperlink

  • 8/14/2019 Membuat Web Dengan Dreamweaver

    46/52

    46

    Navigasi/HyperlinkDigunakan untuk menghubungkan antar file html dalam satu website atau denganwebsite lain.

    Atau pada properties inspector

    1. Hyperlink ke alamat website lain

    Navigasi/Hyperlink

  • 8/14/2019 Membuat Web Dengan Dreamweaver

    47/52

    47

    Navigasi/Hyperlink

    2. Anchor / Link dalam satu halamanweb

    1. Blok bagian yangakan di panggil

    2. Klik iconAnchor

    Ketik nama anchordisini

    Navigasi/Hyperlink

  • 8/14/2019 Membuat Web Dengan Dreamweaver

    48/52

    48

    Navigasi/Hyperlink

    2. Anchor / Link dalam satu halamanweb

    Blok menu yang digunakan untukmemanggil/link

    Ketik nama bagian yangakan di panggil (anchor)

  • 8/14/2019 Membuat Web Dengan Dreamweaver

    49/52

    49

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

    Klik tanda +untuk

    menambah css

  • 8/14/2019 Membuat Web Dengan Dreamweaver

    50/52

    50

    Cascading Style Sheet (CSS)

  • 8/14/2019 Membuat Web Dengan Dreamweaver

    51/52

    51

    Cascading Style Sheet (CSS)

    Ketik namacss

  • 8/14/2019 Membuat Web Dengan Dreamweaver

    52/52

    TerimaTerimakasihkasih

    Sukses Untuk KitaSukses Untuk Kita