Macromedia Dreamweaver - repository.unikama.ac.idrepository.unikama.ac.id/201/7/Handout 2.pdfDalam...

Macromedia Dreamweaver

Tatik Retno Murniasih, S.Si., M.Pd.


Merupakan software web design yangberguna untuk merancang web danlayout halaman web.Dalam merancang web bisa dilakukandengan cara mendesain danmemprogram.Untuk mengetahui fasilitasdreamweaver 8 gunakan Help>UsingDreamweaver (F1)


Dreamweaver 8 mempunyai tigamacam tampilan untuk layout ruangkerja, diantaranya yaitu Code View,Split dan Design View.


Membuat situs lokal sebelum situstersebut di upload ke internet. Semuafile yang kita buat tersimpan dikomputer kita. Kita harusmendefinisikan situs yang akan kitabuat pada Site Definision yaitu pilihanBasic dan Advanced. Basicmemberikan kemudahan menyiapkansitus tahap demi tahap apabila sudahpaham bisa pilih advanced.

Membuat Dokumen Baru

Menghapus Site (Pilih Remove)pada Manage Site

Macromedia dreamweaverBekerja Dengan Teks


1. Untuk memformat paragraf gunakanText > Paragrap Format atau menuformat pada properties.

2. Perataan alenia = Text > Align ataupilih icon properties.

3. Menggunakan Font = Text > Fontatau font properties.

4. Mengubah warna teks = Text > Color


5. Mengubah Ukuran Teks = Text > Size6. Mengubah Ketebalan Teks

Text > Style > Bold7. Menyisipkan karakter = Insert >

HTML > Special Characters8. Menggunakan List = Text > List


8. Menyisipkan tanggal = Insert > Date9. Membuat link = Modify > Make Link

Macromedia DreamweaverBekerja dengan Tabel

1. Membuat tabel = Insert > Table2. Seleksi tabel = Klik pada pojok tabel

sehingga terdapat tabel kecil padapojoknya atau letakkan kursor padatabel pilih Modify > Table > Selecttabel atau klik kanan pilih Table >Select Table

3. Menambah kolom dan baris baru =rubah rows dan cols pada properties.


4. Seleksi baris atau kolom letakkankursor pada pojok kiri atau atassehingga menjadi panah hitam ataubisa juga dengan drag atau tekanshift. Perhatikan properties akanmenyeleksi sesuai dengan seleksibaris atau kolom.

5. Menyisipkan tabel = Modify > table >Insert Row(Column) atau klik kananpilih Table > Insert Row(Column)


Default penambahan 1 jika inginmenambah lebih dari satubaris/kolom pilih Modify > Table >Insert Rows or Column.

6. Menggabungkan sel = seleksi barisatau kolom yang ingin digabungkanpilih Modify > Table > Merge Cellsatau klik kanan pilih Table > MergeCells


7. Memecah sel = tempatkan mousepada sel yang akan dibagi menjadibeberapa sel. Lalu pilih Modify >Table > Split Cell atau klik kanan pilihTable > Split Cell

8. Menghapus baris atau kolom =Modify > Table > DeleteColumn(Row) atau klik kanan pilihTable > Delete Row(Column)

9. Mengatur ketebalan tabel = seleksitabel lalu pada properties border isidengan angka yang diinginkan.

10. Menyisipkan tabel dalam tabel =letakkan kursor pada salah satu tabelyang ingin disisipkan pilih Insert >Table.

11. Memberi warna pada tabel = letakkankursor pada tabel yang ingin diberiwarna pada properti klik Bg pilih color.


12. Mengatur besar kecil tabel = seleksitabel pada properties isi W dan Hatau dengan mouse seleksi tabel tarikkanan untuk memperlebar dan tarikbawah untuk mempertinggi tabel.

13. Memformat tabel = seeksi tabel pilihCommands > Format Table

14. Mengurutkan data tabel = seleksitabel pilih Commands > Sort Table

Macromedia DreamweaverImage

Merupakan elemen penting website,karena bisa menceritakan ataumengungkapkan arti sebuah makna danbiasanya dipakai untuk mewakili teks.Biasanya dipakai type GIF, JPEG danPNG. Dengan GIF maksimal menampilkan256 warna untuk membuat imagetransparan, JPEG berjuta warna bagusuntuk foto dan PNG berjuta warnasebagai pengganti GIF

Macromedia DreamweaverMenyisipkan Image

1. Insert > Image muncul Select ImageSource.

2. Pada Common Insert Bar pilih IconImage.

3. Windows > Assets lalu tekan tombolInsert


1. Mengganti Image = pilih Image lalutekan tombol Delete pada keyboardlalu ulangi penyisipan yang baru.

2. Mengatur besar kecil image = pilihimage lalu ubah nilai W dan H padainspector atau pilih image lalu dragkursor pada image sesuai keinginan.

3. Memotong Image = pilih Image lalupilih menu Modify > Image > Crop laluenter atau pilih crop pada property


4. Untuk mengembalikan image yangsudah di crop pilih Edit > Undo Crop

5. Mengatur Brightness dan ContrasImage = seleksi gambar yang akandiubah pilih Modify > Image >Brightness/Contrast atau pilihBrightness/Contras pada propertiesinspector (pada Edit).


6. Mempertajam Image = seleksi imagepilih Modify > Image > Sharpen ataupilih sharpen pada propertiesinspector.

7. Mengatur Border Image = seleksiimage pada properties ada isianborder, semakin besar isian makasemakin tebal.


8. Mengatur Perataan Image = seleksiimage pada properties ada pilihan Align

9. Mengatur Jarak Image = padaproperties isikan V Space (spasi atasbawah) dan H Space (spasi kanan kiri).

10. Membuat Rollover pada Image = padapanel Common pilih insert rolloverimage atau pilih Insert > Image Objects> Rollover Image akan keluar kotakdialog.


11. Membuat Link pada Image = seleksiimage pilih Modify > Make Link.

12. Target link bisa dilihat padaproperties target (_blank :menampilkan pada window baru,_parent : menampilkan pada windowdari window yang mengandung link,_self : menampilkan pada windowyang sama, _top : menampilkan padabrowser)


13. Membuat Image Map = seleksiimage pada inspector pilih Map.

14. Mengedit Image bisa dilakukandengan program Fireworks, AdobePhotoshop dan lain-lain apabila telahterinstal di komputer.

Macromedia DreamweaverLink

1. Membuat Link = seleksi teks yangakan diberi link lalu pilih Modify >Make Link atau pilih Insert >Hyperlink.

2. Membuat Anchor = seleksi teks pilihInsert > Named Anchor.

3. Memodifikasi Link = seleksi teks pilihModify > Change Link


4. Menghilangkan Link = seleksi tekspilih Modify > Remove Link atau klikkanan pada teks pilih Remove Link.

5. Mengatur Warna Link = seleksi tekspilih Modify > Page Properties pilihLinks lalu atur font, color dll.

6. Membuat Link Email = seleksi tekspilih Insert > Email Link.


7. Membuat Jump Menu = seleksi tekspilih Insert > From > Jump Menu

8. Membuat Navigasi = pilih Insert >Image Objects > Navigasi Bar.

Macromedia DreamweaverBekerja Dengan Layer

Layer berfungsi menciptakan gambarutuh yang terdiri banyak lapisan.Pada website layer bisa menciptakansatu halaman website dari banyaklapisan. Pada HTML layer digunakantag <div>…</div>

Macromedia DreamweaverMembuat Layer

1. Insert > Layout Objects > Layer2. Atau pilih tombol layer pada tab

Layout dari Insert Bar.3. Setelah itu kursor akan berubah

menjadi tanda (+) berarti layer siapuntuk diberi gambar.

Macromedia DreamweaverSeleksi Layer

Untuk mengedit layer harus menyeleksilayer terlebih dahulu.

1. Munculkan panel layer = Window >Layers.

2. Pilih layer pada batas layer sehinggamuncul kotak seleksi.

3. Untuk memilih banyak layer gunakantombol SHIFT lalu klik batas layeryang ada.

Macromedia DreamweaverMenggeser Layer

Agar layout layer tersusun teratur, perludigeser sesuai tempatnya. Untukmenggeser layer bisa dilakukandengan cara:

1. Pilih layer lalu posisikan mouse padabatas layer sehingga tampak pointeranak panah ke empat jurusan, laludrag sesuai keinginan.

2. Bisa juga dengan menekan panahkeyboard setelah layer dipilih.

Macromedia DreamweaverMengatur Ukuran Layer

1. Seleksi layer yang akan diaturukurannya.

2. Pada properties ubah ukuran W danH sesuai keinginan.

3. Atau bisa dengan drag layer yangsudah diseleksi.

Macromedia DreamweaverLayer

1. Perataan Layer = seleksi beberapalayer lalu pilih Modify > Arrange pilihAlign.

2. Menumpuk Layer = buat layerpertama Insert > Layout Objects >Layer lalu tempatkan kursor padalayer pertama pilih lagi menu Insert> Layout Objects > Layer

Macromedia DreamweaverMenggunakan Layer Panel

1. Munculkan panel layer = Window >Layers

2. Ada 3 bagian layer panel = icon matauntuk menampilkan ataumenyembunyikan layer, Namemerupakan daftar nama yang dibuat,dan z-index merupakan urutan letaklayer di atas atau di bawahnya.

Macromedia DreamweaverLayer

1. Menyisipkan gambar = seleksi layerlalu pada properties pilih gambarpada Bg Image.

2. Mewarnai Layer = seleksi layer lalupilih Bg Color.

3. Membuat Scroll Bar = seleksi layerpada properties overflow pilih scroll.

Macromedia DreamweaverMembuat Frames dan Frameset

Frames untuk membagi halamanwebsite menjadi beberapa bagian.Sedangkan frameset adalah halamanwebsite yang mengandung frames.

1. Membuat frameset = File > New pilihframeset.

2. Membuat frames = Insert > HTML >Frames.

Macromedia DreamweaverMembuat Frame dan Frameset

3. Membuat frames panel = Window >Frames atau tekan tombol SHIFT +F2 pada keyboard.

4. Menghapus frames = drag borderdari frame kembali ke parent frame.

5. Link dalam frame = seleksi teks laluisikan link pada properties pilih targetsesuai keinginan.

Macromedia DreamweaverMembuat Frame dan Frameset

6. Menyimpan frameset atau frame =pilih frameset yang akan disimpanlalu masuk ke menu File > SaveFrameset (Save Frameset As)

Macromedia DreamweaverMembuat Form

Form bermanfaat untuk berinteraksidengan website, misalnya untukpolling jajak pendapat, pendaftaranemail, transaksi jual beli, pengisianbuku tamu dan sebagainya.

Macromedia DreamweaverMembuat Tampilan Website

Macromedia DreamweaverManage Site

Klik kanan pada site pilih New File buat:1. index.html2. profil.html3. product.html4. contact.html

Macromedia DreamweaverPola Design

Pada Common pilih tabel lalu isiRows=4, Column=3, Width=800,border thickness=0

1. Seleksi baris 1 dan 4 lalu klik kananmouse pilih Table > Merge Cells.

2. Seleksi baris 2 lalu klik kanan mousepilih Table > Insert Column

Macromedia DreamweaverPola Design

3. Seleksi baris 3 pada column (2 & 3)lalu klik kanan mouse pilih Table >Merge Cells.

4. Letakkan kursor pada baris 3 kolom 1lalu > Insert row or column >column>1 afterLetakkan kursor pada baris 3 kolom 3lalu > Insert row or column >column>1 before

5. Lebarkan baris 3.6. Merger sel di baris 2 antara kolom 1

dan 2 (W isi 200),antara kolom 4 dan5 (W isi 200)

Macromedia DreamweaverHeader dan Footer

1. Pada baris 1 tulis www.tutorial.com,learning by watching, dasar tulisanbiru tua (Bg pada properties), tulisanpada menu text pilih color putih.

3. Pada baris 2 tulis mulai kolom 1 pilihmenu Insert > Media > Flash Text isiText = H o m e (link ke index.html),rollover text sesuai keinginan, title =buton1.

Macromedia DreamweaverHeader dan Footer

Dengan cara yang sama buat menuProfile (link ke profile.html), Product(link ke product.html) dan Contact(link ke Contact.html).

4. Baris ke 4 beri tulisan(copyright©2012…). Pilih Insert >HTML > Special character untukmemilih copyright. Setelah itu saveas sebagai index, profile, product dancontact.

Macromedia DreamweaverMaterial Body

5. Pada baris 3 tuliskan pada kolom 1, 2dan 3 masing-masing New Product,Selamat Datang di www.tutorial.comdan Articles. Insert kolom agarterlihat indah.

6. Pada contact insert> Form untuknama,emaildan komentar. Insert>Media>Flash Button untuk Button

Macromedia Dreamweaver - repository.unikama.ac.idrepository.unikama.ac.id/201/7/Handout 2.pdfDalam...

Documents

Transcript of Macromedia Dreamweaver - repository.unikama.ac.idrepository.unikama.ac.id/201/7/Handout 2.pdfDalam...