Membuat Web Dengan Dreamweaver

download Membuat Web Dengan Dreamweaver

of 52

  • date post

    31-May-2018
  • Category

    Documents

  • view

    215
  • download

    0

Embed Size (px)

Transcript of Membuat Web Dengan Dreamweaver

  • 8/14/2019 Membuat Web Dengan Dreamweaver

    1/52

    1

    Andi Sulistiyono,Andi Sulistiyono,S.KomS.Kom

    andi_sulistiyono@yahoo.com

    0813.1972.96960813.1972.9696

    PENGEMBANGANPENGEMBANGAN

    BAHAN BELAJARBAHAN BELAJAR

    BERBASIS WEBBERBASIS WEB

    mailto:andi_sulistiyono@yahoo.commailto:andi_sulistiyono@yahoo.com
  • 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/