Desain Web - Repository UNIKAMA

Macrom edia Dream weaver

Tat ik Ret no Murniasih, S.Si., M.Pd.

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
dream weaver 8 gunakan Help> Using
Dream weaver ( F1)

Macrom edia Dream weaver

Macrom edia Dream weaver

Macrom edia Dream weaver
Dream weaver 8 m em punyai t iga

m acam t am pilan unt uk layout ruang
kerj a, diant aranya yait u Code View,
Split dan Design View.

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
m em berikan kem udahan m enyiapkan
sit us t ahap dem i t ahap apabila sudah
paham bisa pilih advanced.

Macrom edia Dream weaver

Macrom edia Dream weaver

Macrom edia Dream weaver

Macrom edia Dream weaver

Macrom edia Dream weaver

Mem buat Dokum en Baru

Menghapus Sit e ( Pilih Rem ove)
pada Manage Sit e

Macrom edia dream weaver
Bekerj a Dengan Teks

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.
4. Mengubah warna t eks = Text > Color

Macrom edia Dream weaver
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
8. Menggunakan List = Text > List

Macrom edia Dream weaver
8. Menyisipkan t anggal = I nsert > Dat e
9. Mem buat link = Modify > Make Link

Macrom edia Dream weaver
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 =
rubah rows dan cols pada propert ies.

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 .
5. Menyisipkan t abel = Modify > t able >
I nsert Row( Colum n) at au klik kanan
pilih Table > I nsert Row( Colum n)

Macrom edia Dream weaver
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.
6. Menggabungkan sel = seleksi baris
at au kolom yang ingin digabungkan
pilih Modify > Table > Merge Cells
at au klik kanan pilih Table > Merge
Cells

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
Colum n( Row) at au klik kanan pilih

Table > Delet e Row( Colum n)

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
warna pada propert i klik Bg pilih color.

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
14. Mengurut kan dat a t abel = seleksi
t abel pilih Com m ands > Sort Table

Macrom edia Dream weaver
I m age
Merupakan elem en pent ing websit e,
karena
bisa
m encerit akan
at au
m engungkapkan art i sebuah m akna dan
biasanya dipakai unt uk m ewakili t eks.
Biasanya dipakai t ype GI F, JPEG dan
PNG. Dengan GI F m aksim al m enam pilkan
256 warna unt uk m em buat im age
t ransparan, JPEG berj ut a warna bagus
unt uk fot o dan PNG berj ut a warna
sebagai penggant i GI F

Macrom edia Dream weaver
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.
3. Windows > Asset s lalu t ekan t om bol
I nsert

Macrom edia Dream weaver
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 baru.
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
kursor pada im age sesuai keinginan.
3. Mem ot ong I m age = pilih I m age lalu
pilih m enu Modify > I m age > Crop lalu

ent er at au pilih crop pada propert y

Macrom edia Dream weaver
I m age
4. Untuk 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
Bright ness/ Cont ras pada propert ies
inspector ( pada Edit ) .

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.
7. Mengat ur Border I m age = seleksi

im age pada propert ies ada isian
border, sem akin besar isian m aka
sem akin t ebal.

Macrom edia Dream weaver
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
panel Com m on pilih insert rollover
im age at au pilih I nsert > I m age Obj ect s
> Rollover I m age akan keluar kot ak
dialog.

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
yang sam a, _t op : m enam pilkan pada
browser)

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 Fireworks, Adobe
Phot oshop dan lain- lain apabila t elah
t erinst al di kom put er.

Macrom edia Dream weaver
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.
3. Mem odifikasi Link = seleksi t eks pilih
Modify > Change Link

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.
6. Mem buat Link Em ail = seleksi t eks
pilih I nsert > Em ail Link.

Macrom edia Dream weaver
Link
7. Mem buat Jum p Menu = seleksi t eks
pilih I nsert > From > Jum p Menu
8. Mem buat Navigasi = pilih I nsert >
I m age Obj ect s > Navigasi Bar.

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
lapisan. Pada HTML layer digunakan
t ag < div> …< / div>

Macrom edia Dream weaver
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
m enj adi t anda ( + ) berart i layer siap
unt uk diberi gam bar.

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
yang ada.

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.
2. Bisa j uga dengan m enekan panah
keyboard setelah layer dipilih.

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.
3. At au bisa dengan drag layer yang
sudah diseleksi.

Macrom edia Dream weaver
Layer
1. Perat aan Layer = seleksi beberapa
layer lalu pilih Modify > Arrange pilih
Align.
2. Menum puk Layer = buat layer
pert am a I nsert > Layout Obj ect s >
Layer lalu t em pat kan kursor pada
layer pert am a pilih lagi m enu I nsert
> Layout Obj ect s > Layer

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
m erupakan daft ar nam a yang dibuat ,
dan z- index m erupakan urut an let ak
layer di at as at au di bawahnya.

Macrom edia Dream weaver
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.
3. Mem buat Scroll Bar = seleksi layer
pada propert ies overflow pilih scroll.

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 .
2. Mem buat fram es = I nsert > HTML >
Fram es.

Macrom edia Dream weaver
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
isikan link pada propert ies pilih t arget
sesuai keinginan.

Macrom edia Dream weaver
Mem buat Fram e dan Fram eset
6. Menyim pan fram eset at au fram e =
pilih fram eset yang akan disim pan
lalu m asuk ke m enu File > Save
Fram eset ( Save Fram eset As)

Macrom edia Dream weaver
Mem buat Form
Form berm anfaat unt uk berint eraksi
dengan websit e, m isalnya unt uk
polling j aj ak pendapat , pendaft aran
em ail, t ransaksi j ual beli, pengisian
buku t am u dan sebagainya.

Macrom edia Dream weaver
Mem buat Tam pilan Websit e

Macrom edia Dream weaver
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
4. cont act .ht m l

Macrom edia Dream weaver
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.
2. Seleksi baris 2 lalu klik kanan m ouse
pilih Table > I nsert Colum n

Macrom edia Dream weaver
Pola Design
3. Seleksi baris 3 pada colum n ( 2 & 3)
lalu klik kanan m ouse pilih Table >
Merge Cells.
4. Letakkan 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 >
colum n> 1 before

5. Lebarkan baris 3.
6. Merger sel di baris 2 ant ara kolom 1
dan 2 ( W isi 200) ,ant ara kolom 4 dan
5 ( W isi 200)

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) , tulisan
pada m enu t ext pilih color put ih.
3. Pada baris 2 t ulis m ulai kolom 1 pilih
m enu I nsert > Media > Flash Text isi
Text = H o m e ( link ke index.ht m l) ,
rollover t ext sesuai keinginan, t it le =
but on1.

Macrom edia Dream weaver
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
( copyright © 2012…) . Pilih I nsert >
HTML > Special charact er unt uk
m em ilih copyright . Set elah it u save
as sebagai index, profile, product dan
cont act .

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
> Media> Flash But t on unt uk But t on