Desain Web - Repository UNIKAMA

(1)

Macrom edia Dream weaver

(2)

Macrom edia Dream weaver

Merupakan soft ware web design yang berguna unt uk m erancang web dan layout halam an web.

Dalam m erancang web bisa dilakukan dengan cara m endesain dan

m em program .

Unt uk m enget ahui fasilit as

(3)

(4)

(5)

Dream weaver 8 m em punyai t iga

(6)

Macrom edia Dream weaver

Mem buat sit us lokal sebelum sit us

t ersebut di upload ke int ernet . Sem ua file yang kit a buat t ersim pan di

kom put er kit a. Kit a harus

m endefinisikan sit us yang akan kit a buat pada Sit e Definision yait u pilihan Basic dan Advanced. Basic

(7)

(8)

(9)

(10)

(11)

(12)

(13)

(14)

(15)

Macrom edia Dream weaver

1. Unt uk m em form at paragraf gunakan Text > Paragrap Form at at au m enu form at pada propert ies.

2. Perat aan alenia = Text > Align at au pilih icon propert ies.

3. Menggunakan Font = Text > Font at au font propert ies.

(16)

5. Mengubah Ukuran Teks = Text > Size 6. Mengubah Ket ebalan Teks

Text > St yle > Bold

7. Menyisipkan karakt er = I nsert > HTML > Special Charact ers

(17)

Macrom edia Dream weaver

(18)

Bekerj a dengan Tabel

1. Mem buat t abel = I nsert > Table

2. Seleksi t abel = Klik pada poj ok t abel sehingga t erdapat t abel kecil pada poj oknya at au let akkan kursor pada t abel pilih Modify > Table > Select t abel at au klik kanan pilih Table > Select Table

3. Menam bah kolom dan baris baru =

[image:18.792.41.754.34.570.2]

(19)

Macrom edia Dream weaver

4. Seleksi baris at au kolom let akkan kursor pada poj ok kiri at au at as

sehingga m enj adi panah hit am at au bisa j uga dengan drag at au t ekan

shift . Perhat ikan propert ies akan m enyeleksi sesuai dengan seleksi baris at au kolom .

(20)

Default penam bahan 1 j ika ingin m enam bah lebih dari sat u

baris/ kolom pilih Modify > Table > I nsert Rows or Colum n.

(21)

Macrom edia Dream weaver

7. Mem ecah sel = t em pat kan m ouse pada sel yang akan dibagi m enj adi beberapa sel. Lalu pilih Modify >

Table > Split Cell at au klik kanan pilih Table > Split Cell

8. Menghapus baris at au kolom = Modify > Table > Delet e

[image:21.792.40.762.34.564.2]

(22)

9. Mengat ur ket ebalan t abel = seleksi t abel lalu pada propert ies border isi dengan angka yang diinginkan.

10. Menyisipkan t abel dalam t abel =

let akkan kursor pada salah sat u t abel yang ingin disisipkan pilih I nsert >

Table.

11. Mem beri warna pada t abel = let akkan kursor pada t abel yang ingin diberi

[image:22.792.41.755.36.568.2]

(23)

Macrom edia Dream weaver

12. Mengat ur besar kecil t abel = seleksi t abel pada propert ies isi W dan H

at au dengan m ouse seleksi t abel t arik kanan unt uk m em perlebar dan t arik bawah unt uk m em pert inggi t abel.

13. Mem form at t abel = seeksi t abel pilih Com m ands > Form at Table

[image:23.792.41.760.34.560.2]

(24)

I m age

(25)

Menyisipkan I m age

1. I nsert > I m age m uncul Select I m age Source.

2. Pada Com m on I nsert Bar pilih I con I m age.

(26)

I m age

1. Menggant i I m age = pilih I m age lalu t ekan t om bol Delet e pada keyboard lalu ulangi penyisipan yang bar u.

2. Mengat ur besar kecil im age = pilih im age lalu ubah nilai W dan H pada inspect or at au pilih im age lalu drag kur sor pada im age sesuai keinginan.

(27)

Macrom edia Dream weaver

I m age

4. Unt uk m engem balikan im age yang sudah di crop pilih Edit > Undo Crop 5. Mengat ur Bright ness dan Cont ras

I m age = seleksi gam bar yang akan diubah pilih Modify > I m age >

Bright ness/ Cont rast at au pilih

(28)

Macrom edia Dream weaver

I m age

6. Mem pert aj am I m age = seleksi im age pilih Modify > I m age > Sharpen at au pilih sharpen pada propert ies

inspect or.

(29)

I m age

8. Mengat ur Perat aan I m age = seleksi im age pada propert ies ada pilihan Align 9. Mengat ur Jarak I m age = pada

propert ies isikan V Space ( spasi at as bawah) dan H Space ( spasi kanan kiri) . 10. Mem buat Rollover pada I m age = pada

(30)

Macrom edia Dream weaver

I m age

11. Mem buat Link pada I m age = seleksi im age pilih Modify > Make Link.

12. Target link bisa dilihat pada propert ies t arget ( _blank :

m enam pilkan pada window baru,

_parent : m enam pilkan pada window dari window yang m engandung link, _self : m enam pilkan pada window

(31)

Macrom edia Dream weaver

I m age

13. Mem buat I m age Map = seleksi im age pada inspect or pilih Map. 14. Mengedit I m age bisa dilakukan

dengan program Firew orks, Adobe

(32)

Link

1. Mem buat Link = seleksi t eks yang akan diberi link lalu pilih Modify > Make Link at au pilih I nsert >

Hyperlink.

2. Mem buat Anchor = seleksi t eks pilih I nsert > Nam ed Anchor.

(33)

Macrom edia Dream weaver

Link

4. Menghilangkan Link = seleksi t eks pilih Modify > Rem ove Link at au klik kanan pada t eks pilih Rem ove Link. 5. Mengat ur Warna Link = seleksi t eks

pilih Modify > Page Propert ies pilih Links lalu at ur font , color dll.

(34)

Link

7. Mem buat Jum p Menu = seleksi t eks pilih I nsert > From > Jum p Menu

(35)

Macrom edia Dream weaver

Bekerj a Dengan Layer

Layer berfungsi m encipt akan gam bar ut uh yang t erdiri banyak lapisan.

Pada websit e layer bisa m encipt akan sat u halam an websit e dari banyak

(36)

Mem buat Layer

1. I nsert > Layout Obj ect s > Layer

2. At au pilih t om bol layer pada t ab Layout dari I nsert Bar.

3. Set elah it u kursor akan berubah

(37)

Macrom edia Dream weaver

Seleksi Layer

Unt uk m engedit layer harus m enyeleksi layer t erlebih dahulu.

1. Munculkan panel layer = Window > Layers.

2. Pilih layer pada bat as layer sehingga m uncul kot ak seleksi.

3. Unt uk m em ilih banyak layer gunakan t om bol SHI FT lalu klik bat as layer

(38)

Macrom edia Dream weaver

Menggeser Layer

Agar layout layer t ersusun t erat ur, perlu digeser sesuai t em pat nya. Unt uk

m enggeser layer bisa dilakukan dengan cara:

1. Pilih layer lalu posisikan m ouse pada bat as layer sehingga t am pak point er anak panah ke em pat j urusan, lalu drag sesuai keinginan.

(39)

Macrom edia Dream weaver

Mengat ur Ukuran Layer

1. Seleksi layer yang akan diat ur ukurannya.

2. Pada propert ies ubah ukuran W dan H sesuai keinginan.

(40)

Layer

1. Perat aan Layer = seleksi beberapa lay er lalu pilih Modify > Arrange pilih Align.

2. Menum puk Layer = buat layer

(41)

Macrom edia Dream weaver

Menggunakan Layer Panel

1. Munculkan panel layer = Window > Layers

2. Ada 3 bagian layer panel = icon m at a unt uk m enam pilkan at au

m enyem bunyikan layer, Nam e

(42)

Layer

1. Menyisipkan gam bar = seleksi layer lalu pada propert ies pilih gam bar

pada Bg I m age.

2. Mewarnai Layer = seleksi layer lalu pilih Bg Color.

(43)

Macrom edia Dream weaver

Mem buat Fram es dan Fram eset

Fram es unt uk m em bagi halam an

websit e m enj adi beberapa bagian.

Sedangkan fram eset adalah halam an websit e yang m engandung fram es.

1. Mem buat fram eset = File > New pilih fram eset .

(44)

Mem buat Fram e dan Fram eset

3. Mem buat fram es panel = Window > Fram es at au t ekan t om bol SHI FT + F2 pada keyboard.

4. Menghapus fram es = drag border

dari fram e kem bali ke parent fram e. 5. Link dalam fram e = seleksi t eks lalu

(45)

Mem buat Fram e dan Fram eset

(46)

Macrom edia Dream weaver

Mem buat Form

Form berm anfaat unt uk berint eraksi dengan websit e, m isalnya unt uk

(47)

(48)

Manage Sit e

Klik kanan pada sit e pilih New File buat :

1. index.ht m l

2. profil.ht m l

3. product .ht m l

(49)

Pola Design

Pada Com m on pilih t abel lalu isi

Rows= 4, Colum n= 3, Widt h= 800, border t hickness= 0

1. Seleksi baris 1 dan 4 lalu klik kanan m ouse pilih Table > Merge Cells.

(50)

Pola Design

3. Seleksi baris 3 pada colum n ( 2 & 3) lalu klik kanan m ouse pilih Table > Merge Cells.

4. Let akkan kursor pada baris 3 kolom 1 lalu > I nsert row or colum n >

colum n> 1 aft er

Let akkan kursor pada baris 3 kolom 3 lalu > I nsert row or colum n >

(51)

5. Lebarkan baris 3.

(52)

Macrom edia Dream weaver

Header dan Foot er

1. Pada baris 1 t ulis www.t ut orial.com , learning by wat ching, dasar t ulisan

biru t ua ( Bg pada propert ies) , t ulisan pada m enu t ext pilih color put ih.

(53)

Header dan Foot er

Dengan cara yang sam a buat m enu Profile ( link ke profile.ht m l) , Product ( link ke product .ht m l) dan Cont act ( link ke Cont act .ht m l) .

4. Baris ke 4 beri t ulisan

(54)

Macrom edia Dream weaver

Mat erial Body

5. Pada baris 3 t uliskan pada kolom 1, 2 dan 3 m asing- m asing New Product , Selam at Dat ang di www.t ut orial.com

dan Art icles. I nsert kolom agar t erlihat indah.

6. Pada cont act insert > Form unt uk nam a,em aildan kom ent ar. I nsert