Kelompok 5 - Dreamweaver

Click here to load reader

  • date post

    01-Jan-2016
  • Category

    Documents

  • view

    272
  • download

    0

Embed Size (px)

description

dreamwaver

Transcript of Kelompok 5 - Dreamweaver

  • MAKALAH KOMPUTER

    MACROMEDIA DREAMWEAVER

    DISUSUN OLEH:

    Kelompok 5

    Rini I (11.k40064)

    Santi I (11.k40067)

    Sarah R (11.k40068)

    Septiana N (11.k40069)

    Wiwin S (11.K40073)

    SEKOLAH TINGGI TEKNOLOGI TEKSTIL

    BANDUNG

    2012

  • KATA PENGANTAR

    Puji syukur kami panjatkan kepada Allah SWT , karna berkat rahmatnya kami bisa

    menyelesaikan tugas komputer mengenai Macromedia Dreamwaver.

    Dalam penyusunan ini, tidak terlalu banyak kesulitan namun terdapat kekurangan dalam penulisan

    atau penyajian materi karena dalam tahap pembelajaran.

    Kritik dan saran, kami harapan untuk proses menjadi lebih baik lagi. Semoga yang kita sajikan dalam

    makalah ini, dapat bermanfaat.

    Kelompok 5

    Macromedia Dreamweaver

  • DAFTAR ISI

    Kata pengantar............................................................................................................ i

    Daftar Isi..................................................................................................................... ii

    1. Pendahuluan.................................................................................................... 1

    1.1 Latar Belakang............................................................................................ 1

    1.2 Rumusan Masalah...................................................................................... 1

    1.3 Tujuan......................................................................................................... 1

    2. Teori dasar........................................................................................................ 2

    2.1 situs websaite............................................................................................ 2

    2.2 sejarah websaite........................................................................................ 2

    2.3 fungsi websaite......................................................................................... 4

    2.4 cara membuat websaite........................................................................... 4

    3. Pembahasan..................................................................................................... 6

    3.1 pengertian Dreamweaver......................................................................... 6

    3.2 Sejarah Perkembangan Dreamweaver..................................................... 6

    3.3 Keunggulan Dreamveaver........................................................................ 6

    3.4 Membuat Situs Dreamweaver.................................................................. 7

    Daftar Pustaka............................................................................................................ 21

  • BAB I

    PENDAHULUAN

    A. LATAR BELAKANG

    Globalalisasi merupakan era dimana segala aspek kehidupan bermasyarakat sangatlah

    berkembang,baik dalam hal teknologi,budaya, maupun ilmu pengetahuan. Teknologi

    dalam hal ini ditandai dengan munculnya berbagai aplikasi dan program terbaru yang

    canggih dan praktis dalam hal penggunaannya. Salah satu contohnya adalah penggunaan

    program dream weaver untuk mendesain halaman website.

    B. RUMUSAN MASALAH

    Dari latar belakang di atas dapat diambil suatu permasalahan yaitu bagaimana cara

    menggunakan program dream weaver.

    C. TUJUAN

    Untuk memenuhi tugas yang diberikan oleh dosen mata kuliah Pengatar Komputer.

  • BAB II

    TEORI DASAR

    SITUS WEB (WEBSAITE )

    Sebuah situs web (website) merupakan kumpulan dari berbagai jenis file. Sebagian

    besar diantaranya merupakan file HTML. Jenis lainnya dapat berupa file image, multimedia

    dan animasi seperti video dan flash. Kesemuanya harus dapat disatukan menjadi satu

    kesatuan. Sebuah situs web yang baik harus dapat menyajikan setiap komponen dengan

    serasi, konsisten dan indah. Saat ini boleh dikatakan tidak ada (atau belum ada) satu software

    atau perangkat lunak yang dapat digunakan untuk membangun sebuah situs secara

    keseluruhan, mulai dari merancang, membuat halaman HTML, mengedit image, multimedia

    dan animasi, sampai menampilkannya sekaligus. Namun, dalam merancang situs web, kita

    harus menggunakan beberapa perangkat lunak (aplikasi) sekaligus. Perangkat lunak yang

    diperlukan dalam membangun situs web, setidaknya dapat dibagi menjadi:

    1. Editor program (code editor)

    Editor program (code editor) merupakan suatu aplikasi yang dapat digunakan untuk

    membantu dalam membuat program tertentu.

    2.Web browser

    merupakan sebuah perangkat lunak (aplikasi) yang digunakan untuk menampilkan

    halaman- halaman web. Halaman web yang dimaksud adalah file HTML dan beberapa

    file lainnya seperti CSS dan Javascript.

    3.Editor gambar (image editor)

    merupakan unsur yang cukup penting dalam design web. Editor gambar (image editor)

    merupakan perangkat lunak atau aplikasi yang dapat digunakan untuk membuat dan

    mengedit gambar.

    4.Editor multimedia (multimedia editor)

    Seperti halnya gambar, kita juga terkadang ingin menampilkan beberapa file multimedia

    dan animasi di situs web.

    5. Editor warna (Color editor)

    merupakan komponen yang cukup berpengaruh dalam design web. Untuk itu, untuk

    mengoptimalkan hasil dalam mendesign situs web, kita memerlukan suatu software atau

    aplikasi yang dapat membantu pendesign situs dalam memilih warna yang tepat.

    Sejarah Website

    Website yang kita kenal sekarang ditemukan oleh Sir Timothy John Tim Berners-Lee. Beliau bekerja di European Laboratory for Particle Physics (CERN). Sekitar bulan

    Maret 1989, Tim mengusulkan suatu protokol sistem distribusi di internet untuk pertukaran informasi di internet. Akhirnya situs web pertama diluncurkan pertama kali pada tanggal 6

    Agustus 1991 dengan situs http://info.cern.ch/ . Situs WWW dinyatakan sebagai situs yang

    bisa digunakan oleh setiap orang alias gratis pada 30 April 1993. Sebuah website ditulis

    dengan menggunakan format HTML(Hyper Text Markup Language). HTML merupakan

    suatu kode tag yang menginstruksikan suatu browser untuk menghasilkan sesuai dengan

    keinginan pembuatnya.

  • Pada bulan September 1994, Tim mendirikan World Wide Web Consortium (W3C) yang merupakan organisasi internasional utama yang mengurus tentang standar dari website yang

    ada sekarang.

    Perkembangan website berdasarkan teknologi dan cara penggunaannya menurut pada praktisi

    informatika adalah sebagai berikut:

    1. Web 1.0

    Web 1.0 merupakan teknologi awal dari website, dimana pembuat sebagai pemberi

    informasi dan pengguna hanya sebagai pembaca (seperti membaca koran lewat computer,

    aktifitasnya hanya searching saja). Bahasa yang digunakan pada web ini masih berupa

    HTML saja.

    2. Web 2.0

    Web 2.0 muncul sekitar tahun 2003 atau 2004, dimana para pengguna website-pun

    dapat berkomunikasi 2 arah dan memiliki berbagai kelebihan lainnya.

    Kelebihan dari web ini adalah sebagai berikut (menurut OReilly media):

    The Web as Platform (Pengerjaan suatu aplikasi/tulisan dapat langsung dikerjakan di

    media internet tanpa harus mengerjakannya terlebih dahulu di windows desktop).

    Harnessing Collective Intelligence (Web 2.0 memiliki kinerja untuk memanfaatkan

    tulisan orang lain untuk mengisi konten web secara kolektif (tidak hanya webmaster

    yang mengisi konten sendiri), contohnya seperti youtube).

    Data is the Next Intel Inside (merupakan suatu garansi kepercayaan dari para pemberi

    data kepada pemilik website bahwa pada era web 2.0 data sangatlah penting dan harus

    di update setiap waktu).

    End of the Software Release Cycle (pada web 2.0 aplikasi software dapat langsung

    digunakan lewat internet/internet menjadi platform menjalankan program).

    Lightweight Programming Models (pembuatan web 2.0 menggunakan bahasa yang

    ringan dan mendukung pengembagan program).

    3. Web 3.0

    Web ini diperkirakan akan berkembang pada tahun 2010-2020 dan saat ini masih

    dalam tahap pengembangan.

    Menurut PC magazine karakteristik dari web 3.0 adalah :

    Semantic Web (web dengan kemampuan membaca situs semudah manusia

    membacanya sehingga informasi dapat disajikan dengan cepat dan tepat)

    The 3D Web (web dengan kemampuan visual 3D dan interaksi secara realtime)

  • The Media-Centric Web (Photo, audio, dan video akan menjadi cara lain untuk

    mencari informasi yang kita inginkan selain keyword)

    The Pervasive Web (Web yang mudah diakses dengan berbagai cara dan alat berbeda

    kapan saja dan dimana saja)

    FUNGSI WEBSAITE

    Websaite mempunyai fungsi yang bermacam-macam tergantung dari tujuan dan jenis

    websaite yang dibangun, namun secara garis besar dapat berfungsi sebagai berikut:

    Media Promosi

    Websaite yang berfungsi sebagai search engine atau toko online, atau sebagai

    pengunjung promosi utama, namun websaite dapat berisi informasi yang ebih lengkap

    dari pada promosi offline seperti koran atau majalah.

    Media Pemasaran

    Pad toko online atau system afilasi, websaite merupakan media pemasaran yang

    cukup baik, karena dibandingkan sengan toko sebagaimana didunia nyata, untuk

    membangun toko online diperlukan modalyang relatif kecil, dan dapat beroperasi 24

    jam walaupun pemilik websaite tersebut sedang istirahat.

    Media Informasi

    Websaite portal dan radio atau tv online menyediakan informasi yang bersifat

    global karena dapat diakses dari mana sajasehingga dapat terhubung ke internet.

    Media Pendidikan

    Ada komunitas yang membangun websaite khusus berisi informasi atau artikel

    yang sarat dengan informasi ilmiah misalnya wikipedia.

    Media Komunikasi

    Sekarang banyak terdapat websaite yang dibangun khusus untuk berkomunikasi

    seperti forum yang dapat memberikan fasilitas bagi para anggotanya untuksaling

    berbagi informasi atau membantu pemecahan masalah tertentu.

    Cara membuat websaite

    berikut langkah-langkah mudah dalam membuat sebuah website:

    1. Persiapkan alamat website (domain)

    Nama domain merupakan nama unik yang diberikan untuk mengidentifikasi nama

    server komputer seperti web server atau email server di internet. Nama domain

    memberikan kemudahan pengguna di internet untuk melakukan akses ke server dan

    mengingat server yang dikunjungi dibandingkan harus mengenal deretan nomer atau yang

    dikenal IP.

    Untuk itulah perusahaan membutuhkan "nama doamain" (misalnya alamat domain berupa

    "www.PerusahaanAnda.com" atau "www.PerusahaanAnda.co.id"). Dengan membeli nama

    domain tersebut, pengguna internet cukup memasukan "www.PerusahaanAnda.com" ke

    internet explorer (browser) mereka untuk mengunjung website yang dibuat perusahaan.

    Sebagai contoh: untuk mengunjungi wabsite Yahoo, cukup memasukan

  • "www.yahoo.com" atau "yahoo.com" ke internet explorer. Nama domain tersebut yang

    akan mengantarkan pengguna internet ke website perusahaan.

    2. Hosting

    Setelah mendapatkan alamat website/ nama doamain, kemudian dibutuhkan servis yang

    dinamakan web hosting. Web hosting adalah menyewakan ruangan hard disk dan fasilitas

    di server internet untuk mendapatkan dokumen-dokumen web (html, database, audio,

    video, dsb) Sehingga menjadi situs web yang dapat dikunjung dari seluruh dunia.

    3. Tentukan isi dari website

    Menyiapkan segala informasi yang dibutuhkan, seperti:

    a. Content: informasi yang akan dimuat kedalam website yang berupa text dan kumpulan

    foto-foto.

    b. Design: tampilan yang dibuat untuk keindahan tampilan di website sehingga menarik

    perhatian para pengunjung agar betah melihat website perusahaan, sehingga tertarik

    melihat seluruh informasi yang telah disiapkan oleh perusahaan.

    Cara membuat design atau isi website

    design dari website tergantung dari jiwa seni masing-masing perusahaan, yang tentunya

    hal ini mempengaruhi ketertarikan pengunjung untuk melihat web secara keseluruhan.

    Membuat halaman web bisa menggunakan software apa saja, tetapi yang harus diketahui

    script apa yang digunakan. untuk script atau perintah dasar dari html bisa dipelajari

    melalui :

    http://www.rumahweb.com/journal/dasar-dasar-html-i.htm

    Tapi ada juga beberapa software yang memang khusus digunakan untuk membuat design

    tampilan website. Seperti yang banyak digunakan adalah untuk tampilan awal biasa

    menggunakan software adobe photoshop yang biasa digunakan untuk mengedit foto dan

    mempercantik gambar yang akan ditampilkan di website. kemudian dapat dimodifikasi

    dengan menggunakan software macromedia dreamwaver, tetapi software ini harus

    memiliki banyak pengetahuan mengenai script atau perintah HTML. ada juga yang

    menggunakan software notepad untuk melakukan sedikit perubahan pada file html tadi.

  • BAB III

    PEMBAHASAN

    PENGERTIAN DREAMWEAVER

    Dreamweaver merupakan sebuah perangkat software HTML editor profesional yang

    digunakan untuk mendesain secara visual dan mengelola situs web ataupun halaman web.

    SEJARAH PERKEMBANGAN DREAMWEAVER

    Pada tahun 1997 Macromedia merilis DreamWeaver pertama versi 1.0 hanya untuk Mac

    OS, pada Maret 1998 Macromedia merilis Dreamweaver versi pertama untuk Windows. Pada

    tahun 2007 Adobemerilis Dreamweaver versi CS3dan memasukkan Dreamweaver dalam

    aplikasi program Adobe. Dan pada tahun 2008 Adobe merilis Dreamweaver versi CS4.

    Program ini banyak digunakan oleh pengembang web karena fitur-fiturnya yang menarik

    dan kemudahan penggunaannya. Versi terakhir Macromedia Dreamweaver sebelum

    Macromedia dibeli oleh Adobe Systems yaitu versi 8. Versi terakhir Dreamweaver keluaran

    Adobe Systems adalah versi 10 yang ada dalam Adobe Creative Suite 4 (sering disingkat

    Adobe CS4).

    Beberapa keunggulan Macromedia Dreamweaver yang menjadikannya banyak digunakan

    dalam membangun situs web, antara lain:

    1. Tampilan (interface) Dreamweaver mudah dimengerti oleh pengguna dari semua tingkat keahlian, bahkan bagi orang awam sekalipun.

    2. Dreamweaver cukup tangguh untuk membangun berbagai tipe situs web. 3. Dreamweaver selalu menjadi perangkat lunak pertama yang selalu mendukung

    teknologi web terkini.

    4. Dreamweaver merupakan editor berbasis WYSIWYG (What You Say Is What You Get), artinya apa yang tampak di editor, sama seperti apa yang akan

    ditampilkan di web browser.

    5. Dreamweaver terintegrasi dengan produk Macromedia lainnya, seperti Macromedia FreeHand, Fireworks, dan Flash.

    Dalam membangun situs web, kita akan menggunakan Macromedia Dreamweaver untuk

    membuat dan mengedit 3 (tiga) jenis script, yaitu HTML, CSS dan Javascript.

  • MEMBUAT SITUS SEDERHANA DENGAN DREAMWEAVER

    Langkah-langkah untuk membuat situs sederhana sebagai berikut:

    1. Membuat folder utama yang akan diisi dengan semua file yang dibutuhkan

    untuk membuat situs

    2. Mendefinisikan situs

    3. Membuat file index.html dan file-file lain yang dibutuhkan untuk hyperlink

    4. Mempublish situs

    Berikut ini akan ditunjukkan langkah-langkah membuat situs sederhana dengan

    menggunakan bahan-bahan (file gambar, video, teks) yang telah disediakan oleh

    Macromedia Dreamweaver 8 dalam folder cafe_townsend.

    1. Membuat folder utama

    Saat membuat situs lokal, semua file yang dibutuhkan (gambar, text, video dll) harus

    diletakkan di sebuah folder lokal (folder utama untuk situs tsb).

    1. Buatlah folder baru dengan nama local_sites di drive E.

    2. Buka C:\Program Files\Macromedia\Dreamweaver 8\Tutorial_assets\

    cafe_townsend\.

    3. Copy folder cafe_townsend ke dalam folder local_sites.

    Folder cafe_townsend adalah folder yang akan digunakan sebagai folder utama

    (main folder) untuk situs lokal yang akan dibuat.

    2. Mendefinisikan situs

    Setelah menyiapkan folder tempat menyimpan semua file yang akan digunakan

    untuk membuat situs, langkah selanjutnya adalah mendefinisikan situs yang akan

    dibuat.

    Untuk mendefinisikan situs, mulailah dengan membuka program macromedia

    Dreamweaver 8, melalui Start All Programs Macromedia Macromedia Dreamweaver 8.

    1. Pilih menu Site Manage Sites. Muncul kotak dialog Manage Sites, seperti gambar 2.

  • 1. Klik Tombol New, pilih site . Kotak Site Definition akan tampil, seperti tampak

    dalam gambar 3.

    2.Klik tabulasi Advanced dan pilih Local Info dari daftar Category

  • 3. Pada kotak Site Name, ketikkan Cafe Townsend sebagai nama situs

    4. Pada kotak Local Root Folder, klik tombol browse untuk menentukan folder

    cafe_townsend yang berada dalam folder local_sites, sehingga berisi

    E:\local_site\cafe_townsend\

    5. Pada kotak Default Images Folder, tentukan folder yang berisi images, yaitu

    E:\local_site\cafe_townsend\images\

    6. Klik OK.

    7. Klik Done untuk menutup kotak dialog Manage Sites.

    3. Membuat file index.html

    Setelah mendefinisikan site, langkah selanjutnya adalah membuat file index.html,

    yang merupakan file utama dalam membangun sebuah halaman web.

    1. Pilih menu File New.

    2. Pada tabulasi General, pilih Basic Page pada daftar Category, pilih HTML pada

    daftar Basic Page, dan klik tombol Create.

    3. Pilih File Save As. Pada kotak save in, tentukan folder untuk menyimpan berada pada jalur E:\local_site\cafe_townsend\

    4. Simpan dengan nama index.html. Klik tombol Save.

    5. Klik pada kotak Document Title text di bagian atas jendela, ketikkan Cafe

    Townsend (lihat gambar 5)

  • 6. Simpan kembali file index.html dengan Klik tombol Save.

    File index.html akan diisi dengan gambar, teks, animasi, dan video seperti tampak

    dalam gambar 6.

    Untuk membuat halaman tersebut, langkah-langkah yang dilakukan adalah:

    a. Membuat tabel dan mengatur propertinya

    b. Memasukkan gambar

    c. Memasukkan animasi flash

    d. Memasukkan video

    e. Memasukkan teks

    a. Membuat tabel dan mengatur propertinya

    1. Klik di pojok kiri atas halaman index.html untuk meletakkan insertion point

    2. Pilih Insert Table. Pada kotak dialog Insert Table, masukkan data-data sebagai berikut:

    o Ketikkan 3 pada kotak Rows dan 1 pada kotak Column

    o Ketikkan 700 pada kotak Table Width.

    o Pilih Pixels pada menu pop-up Table Width.

    o Ketikkan 0 pada kotak Border Thickness, Cell Padding dan Cell Spacing

  • 3. Klik OK.

    Pada halaman index.html akan muncul tabel 3 baris 1 kolom yang tidak memiliki

    border, seperti ditunjukkan dalam gambar 8.

    4. Klik di sebelah kanan tabel

    5. Klik Insert Table untuk memasukkan tabel kedua. Atur isian pada kotak dialog sebagai berikut.

    o Ketikkan 1 pada kotak Rows dan 3 pada kotak Column

    o Ketikkan 700 pada kotak Table Width.

    o Pilih Pixels pada menu pop-up Table Width.

    o Ketikkan 0 pada kotak Border Thickness, Cell Padding dan Cell Spacing

    6. Klik OK.

    7. Klik di sebelah kanan tabel

    8. Klik Insert Table untuk memasukkan tabel ketiga. Atur isian pada kotak dialog sebagai berikut.

    o Ketikkan 1 pada kotak Rows dan 1 pada kotak Column

    o Ketikkan 700 pada kotak Table Width.

    o Pilih Pixels pada menu pop-up Table Width.

    o Ketikkan 0 pada kotak Border Thickness, Cell Padding dan Cell Spacing

    9. Klik OK.

    Ketiga tabel yang telah dimasukkan akan tampak seperti gambar 9.

  • Mengatur properti tabel

    1. Pilih View -> Table Mode -> Expanded Table Mode.

    Saat muncul kotak dialog Getting Started with Expanded Tables Mode, klik OK.

    2. Klik pada baris pertama tabel pertama

    3. Pada Property inspector (Window > Properties), ketikkan 90 pada kotak Cell

    Height (H) dan tekan enter.

    4. Klik pada baris kedua

    5. Pada Property inspector, isikan 166 pada kotak Cell Height (H), tekan Enter

    6. Klik pada baris ketiga

    7. Pada Property inspector, isikan 24 pada kotak Cell Height, tekan enter

    8. Klik kolom pertama tabel kedua.

    9. Pada Property inspector, isikan 140 pada Cell Width (W), tekan Enter

    10. Klik kolom kedua tabel kedua.

    11. Pada Property inspector, isikan 230 pada Cell Width, tekan Enter

    12. Tentukan lebar (width) kolom ketiga menjadi 330.

    13. klik pada baris terkahir

    14. Pada Property inspector, isikan 24 pada kotak Cell Height dan tekan Enter

    Layout tabel akan menjadi seperti gambar berikut:

  • 15. Klik Exit link Expanded Tables Mode di bagian atas jendela Document

    16. Simpan kembali halaman index.html.

    Memasukkan image placeholder

    Image placeholder adalah grafik yang digunakan sampai dengan grafik atau gambar

    akhir siap digunakan dalam halaman web. Image placeholder sangat bermanfaat dalam

    menyiapkan tata letak halaman web yang berisi gambar, sebelum gambar yang akan

    digunakan benar-benar siap.

    1. Klik dalam baris pertama tabel pertama

    2. Pilih Insert > Image Objects > Image Placeholder.

    3. Pada kotak Image Placeholder, isikan berikut ini::

    o ketik banner_graphic pada kotak Name.

    o Isikan 700 pada kotak Width dan 90 pada kotak Height.

    o Klik kotak color box dan pilih warna pada color picker. Pilih reddish

    brown (#993300).

    4. Klik OK.

    5. Simpan halaman web tersebut, File save.

    Memberi warna pada halaman

    Memberi warna dapat dilakuka sebagai berikut:

    1. Klik di dalam sel pertama pada tabel kedua yang teridiri dari 3 kolom

    2. Klik tag di bagian kiri bawah untuk memilih sel tersebut.

    3. Pada Property inspector (Window > Properties), klik di dalam kotak Background

    Color .

    The text box is located directly next to the Background Color (Bg) color box.

    4. Pada kotak Background Color, isikan bilangan hexadecimal #993300 dan tekan

    Enter. Maka warna sel akan menjadi coklat kemerahan

  • 5. Klik pada sel kedua

    6. Klik

    7. Pada Property inspector, klik pada kotak Background Color, isikan #F7EEDF,

    dan tekan Enter.

    8. Atur warna sel ketiga sama dengan sel kedua

    9. Klik di luar sel tersebut

    Sekarang warna background halaman akan diubah melalui page properties.

    1. Pilih Modify -> Page Properties.

    2. Pada kategori Appearance dari Page Properties, klik Background Color dan pilih

    warna hitam.

    3. Klik OK.

    4. Simpan kembali halaman web tersebut.

    Mengisi image placeholder

    1. Dobel-klik image placeholder, banner_graphic, pada bagian atas halaman.

    2. Pada kotak Select Image Source, cari folder images yang berada dalam folder

    cafe_townsend.

    3. Pilih file banner_graphic.jpg dan klik OK.

  • Dreamweaver akan mengganti image placeholder dengan gambar seperti dalam

    gambar 15.

    4. Simpan (File -> Save).

    Selain menggunakan image placeholder, sebuah gambar dapat langsung dimasukkan ke

    halaman web dengan menggunakan menu insert.

    1. Klik pada kolom kedua, tabel kedua

    2. Pada Property inspector (Window > Properties), pilih Center pada pop-up menu

    Horz, dan pilih Top pop-up menu Vert.

    3. Tekan tomobl enter sekali untuk memberi ruang kosong di bagian atas sel

    4. Pilih insert images. 5. Pada kotak Select Image Source, cari folder images yang berada dalam folder

    cafe_townsend.

    6. Pilih file street_sign.jpg dan klik OK

    Memasukkan dan menjalankan file Flash

    File Flash yang akan dimasukkan adalah flexible messaging area--or file FMA 1. Klik di baris kedua pada tabel pertama

  • 2. Pada Property inspector (Window > Properties), pilih Center pada menu pop-up

    Horz dan pilih Middle pada menu pop-up Vert.

    3. Pilih Insert -> Media -> Flash.

    4. Pada kotak Select File, pilih file flash_fma.swf, dan klik OK

    Pemilihan file flash_fma.swf

    5. Saat kotak Object Tag Accessibility Attributes muncul, klik OK.

    6. Pada Property inspector (Window > Properties), klik Play.

    Klik tombol Play pada property inspector

    Dreamweaver akan menjalankan file Flash tersebut, tampilannya seperti

    ditunjukkan dalam gambar 20.

    Gambar 20. Tampilan file flash_fma.swf

  • 7. Pada Property inspector, klik Stop untuk berhenti

    8. Simpan kembali file index.html.

    Memasukkan file Flash Video

    1. Klik di atas gambar street_sign.jpg dalam kolom kedua pada tabel kedua

    Gambar 21. Insertion poin berada pada kolom kedua tabel

    kedua

    2. Pilih Insert -> Media -> Flash Video.

    3. Pada kotak Insert Flash Video, pilih Progressive Download Video dari pop-up

    menu Video type.

    4. Pada kotak URL text box, klik browse untuk menentukan folder yang berisi file

    cafe_townsend_home.flv,

    5. Pilih Halo Skin 2 pada pop-up menu Skin.

    6. Pada kotak Width isi 180 dan pada kotak Height isikan 135.

    Pengaturan isi kotak dialog Insert Flash Video

    7. Klik OK

    8. Simpan kembali index.html.

    Memasukkan body text

    1. Pada panel Files, dobel klik file sample_text.txt untuk membukanya. Cara lain

    adalah memilih menu File Open , cari file tersebut (di folder cafe_townsend)

  • Isi file sample_text.txt

    2. Tekan tombol Control+A untuk memilih seluruh teks. Pilih Edit -> Copy untuk

    mengcopy teks.

    3. Tutup file sample_text.txt

    4. Pada halaman index.html, klik di kolom ketiga tabel kedua (tabel yang berisi 3

    kolom)

    5. Pilih Edit -> Paste.

    Tampilan halaman web setelah diisi body text

    6. Pada Property inspector (Window > Properties), pilih Top dari pop-up menu

    Vert.

    7. Simpan kembali index.html

    Memasukkan teks navigasi

    Teks navigasi adalah teks yang memuat link, yang akan mengarahkan ke dokumen lain.

    1. klik pada kolom pertama pada tabel yang berisi 3 kolom

    2. ketikkan kata Cuisine.

    3. tekan spasi dan ketikkan kata Chef Ipsum.

    4. ulangi langkah tersebut untuk kata-kata berikut: Articles, Special Events,

  • Location, Menu, Contact Us.

    Jangan menekan Enter pada saat mengetik kata-kata tersebut. Gunakan spasi

    untuk memisahkan antar kata, teks akan ditempatkan secara otomatis sesuai

    dengan lebar tabel.

    5. Klik tag di bagian kiri bawah

    Tag selector

    6. Pada Property inspector (Window > Properties), pilih Top dari pop-up menu

    Vert.

    7. Simpan.

    Membuat link

    Sebuah link adalah referensi pada sebuah halaman yang merujuk pada dokumen lain.

    Langkah-langkah membuat link adalah sebagai berikut:

    1. Pilih kata Cuisine

    2. Pada Property inspector (Window > Properties), klik ikon folder di dekat kotak

    Link.

    Klik ikon folder untuk menentukan file

    3. Pada kotak Select File, cari file menu.html, klik OK

    4. Hasilnya, kata Cuisine akan bergaris bawah dan berwarna biru yang

    mengindikasikan teks tersebut adalah link.

    5. Ulangi langkah-langkah 1- 3 untuk kata-kata Chef Ipsum, Articles, Special

    Events, Location, Menu, dan Contact Us.

    6. Simpan kembali file index.html.

    Mem-preview halaman pada web browser

    1. Pastikan file index.html sudah terbuka

    2. Tekan tombol F12 pada keyboard

    Maka akan ditampilkan halaman web pada browser Mozilla seperti berikut.

  • Hasil preview

  • DAFTAR PUSTAKA

    http://www.adobe.com/support/dreamweaver/

    blog.duniascript.com/sekilas-tentang-macromedia-dreamweaver.html

    denz22.blogspot.com/.../pengertian-macromedia-dreamweaver.html

    http://jeprybaru.wordpress.com/2010/02/11/sejarah-perkembangan-websaite/