Scribd Logo
Unggah

Selamat datang di Scribd!

  • Konsep Pembuatan Web Sederhana Dengan Dreamweaver

    Diunggah oleh

    istina
    10 tayangan12 halaman
    adobe dreamweaver

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    DOCX, PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini
    adobe dreamweaver

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai DOCX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    10 tayangan12 halaman

    Konsep Pembuatan Web Sederhana Dengan Dreamweaver

    Diunggah oleh

    istina
    adobe dreamweaver

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai DOCX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 12

    KONSEP PEMBUATAN WEB SEDERHANA DENGAN

    DREAMWEAVER
    Sebelum acara dijelaskan mengenai komponen utama HTML.
    <HTML>
    <HEAD>
    <BODY>
    Pengertian HTML
    HTML adalah singkatan dari HyperText Markup Language yaitu bahasa
    pemrograman standar yang digunakan untuk membuat sebuah
    halaman web, yang kemudian dapat diakses untuk menampilkan
    berbagai informasi di dalam sebuah penjelajah web Internet (Browser).
    HTML dapat juga digunakan sebagai link link antara file-file dalam situs
    atau dalam komputer dengan menggunakan localhost, atau link yang
    menghubungkan antar situs dalam dunia internet.
    Langkah-langkah pembuatan website sederhana:
    Keterangan:
    Home adalah halaman awal website
    Profil dapat diisi mengenai profil anda
    Berita dapat diisi dengan berita pada hari ini
    Galeri dapat diisi gambar-gambar atau foto-foto kegiatan
    Kontak dapat diisi alamat dan nomor telepon yang dapat dihubungi
    Untuk membuat website tsb berikut langkah yang dapat dilakukan:
    1. Buka dahulu program Adobe Dreamweaver
    Lembar Kerja Adobe Dreamweaver

    2. Untuk manajemen dalam membuat website, lakukan langkah


    berikut Klik Site -> New Site

    3. Akan masuk jendela baru sbb:

    4. pada kolom site name silahkan isikan nama situs anda,


    misal Latihan, untuk local site folder adalah letak menyimpan
    seluruh dokumen (file-file) website anda.
    5. Klik tombol pada sebelah kanan, maka akan muncul lokasi untuk
    menyimpan seluruh file anda sbb
    6. Sebagai contoh, lokasi di F:/Websiteku
    7. Lihat pada sidebar kanan Adobe Dreamweaver anda maka akan
    muncul folder tempat anda menyimpan dokumen website anda
    8. Next step, adalah membuat dokumen HTML untuk website kita

    9. Klik pada menu File->New, lalu pilih Blank Page->HTML lalu klik
    Create

    10.
    Langkah selanjutnya, kita akan membuat halaman utama,
    simpan file ini dengan nama index.html. Buat Layout utama
    (layout contoh 1) sebagai berikut:
    Buat tabel dengan cara klik Insert->table, gunakan parameter
    sbb:

    11.klik OK maka akan muncul tampilan sbb:

    12.
    Untuk menyesuaikan dengan layout 1, maka pada baris
    paling atas (untuk header) lakukan merge cell, dengan cara:

    13.

    Maka akan menjadi:

    14.
    Karena kita akan menggunakan banyak gambar, alangkah
    baiknya jika kita membuat folder khusus untuk lokasi
    penyimpanan gambar, dengan cara sbb:

    15.
    Pilih New Folder, beri nama folder baru dengan nama
    gambar

    16.
    Selanjutnya adalah buka direktori di F:/websiteku/gambar,
    copykan semua gambar ke folder tsb, contoh:

    17.
    Setelah kita masukkan gambar ke folder gambar, kita cek
    pada dreamweaver pada area kerja seperti di bawah, lalu klik F5
    (refresh) maka gambar yang sudah dikopi akan diload oleh
    dreamweaver sbb:

    18.
    Pada contoh hanya ada 1 file gambar yaitu header.jpg
    karena sebelumnya hanya mengkopi 1 file gambar.
    Selanjutnya, kita simpan dahulu file ini dengan nama index.html
    dengan cara pilih menu File->Save
    Selanjutnya kita masukkan gambar sebagai header dengan cara
    pada baris 1, kita sorot lalu pilih menu Insert->image sbb

    19.

    Buka folder gambar

    20.

    Buka folder gambar

    21.

    pilih file header.jpg, lalu klik OK, maka akan menjadi sbb:

    22.
    Selanjutnya kita akan membuat menu utama di kolom 1
    baris ke 2

    23.
    Sesuaikan parameter seperti di atas (Horz: default,
    Vert:Top). Selanjutnya kita buat tabel pada cell tsb dengan cara
    pilih menu insert->table dengan parameter

    24.

    Lanjutkan dengan membuat menu utama seperti berikut:

    25.
    Selanjutnya kita akan membuat kode menggunakan
    tag. Tag ini untuk menentukan lokasi halaman yang muncul

    26.
    Kita kembali ke split view, tuliskan tag berikut pada posisi
    lokasi iframe

    27.
    Sampai di sini halaman utama sudah kita buat. Langkah
    selanjutnya adalah membuat konten sesuai dengan menu yang
    sudah kita tentukan. Sebelumnya kita telah membuat sebuah tag
    iframe dengan atribut src=welcome.html, artinya ketika
    halaman index.html pertama kali diload/dibuka, maka iframe
    seharusnya berisi file welcome.html, jika kita lihat melalui browser
    (tekan F12) sbb:

    28.
    muncul keterangan File not found, mengapa? karena kita
    belum membuat file dengan nama welcome.html. Lalu apa yang
    harus kita lakukan? yap, benar sekali kita harus membuat sebuah
    file baru lagi dengan nama welcome.html. Caranya, silahkan buat
    kembali dokumen HTML baru lalu simpan dengan nama
    welcome.html

    29.
    setelah kita buat file welcome.html, kita buka kembali file
    index.html melalui browser:

    30.
    Sekarang kita buat file selanjutnya, profil.html dimana file
    ini merupakan file yang akan dituju ketika tombol Profil pada
    Menu Utama diklik

    31.
    Sekarang kita kembali ke halaman index.html, kita akan
    menautkan (link) tombol Profil ke file profil.html sbb:

    32.
    Pada kolom Link, isikan: profil.html (artinya ketika tombol
    Profil diklik, maka halaman profil.html akan dibuka)
    Pada kolom Target, isikan: isiwebsite, mengapa? coba kita lihat
    kembali ke atas pada tag:
    lihat pada tag artinya file profil.html akan ditampilkan
    pada iframe isiwebsite, sehingga jika kita buka file index.html
    pada browser dan kita klik pada tombol Profil, maka:

    33.

    Selesai

    Anda mungkin juga menyukai