Belajar Membuat Bahan Ajar berbasis Web

 

Membuat Bahan Aj ar berbasis Web
dengan Adobe Dreamweaver CS3
Bab I
MEMBUAT SITE dan HALAMAN BARU

A3

1 | By. A3 

MEMBUAT SITE dan HALAMAN BARU

Membuat Site
Sebelum m em buat halam an- halam an web Anda harus m em buat Sit e t erlebih dahulu, unt ukm em udahkan dalam m engelola sit us yang akan dibuat .
Saat pert am a kali m enj alankan program dream weaver CS3 akan m uncul j endela sepert i di
bawah ini.

1

1. Pilih D r e a m w e a ve r Sit e pada pilihan Cr e a t e N e w .

Selanj ut nya akan m uncul j endela dialog Sit e de fe n it ion for Un n a m e d Sit e 1 sepert i berikut .

By. A3

2

 

Memberi Nama Situs
2
1. Ket ikkan nam a sit us dari
bahan aj ar yang akan
dibuat . ( disini nam anya
bahan j ar) .
2. Pilih Advanced pada t ab
m enu.

1

Mengatur Penyimpanan File

Situs

1
2

1. Klik m ouse pada gbr folder,
kem udian at ur/ buat folder
unt uk t em pat penyim panan
file- file halam an web yang
akan dibuat .
2. Klik m ouse pada gbr folder,
kem udian at ur/ buat folder
unt uk t em pat penyim panan
file- file gam bar/ im ages
unt uk halam an web yang
akan dibuat .
3. Pilih OK

3

By. A3

3

Membuat Halaman Baru
3

2

4
1. Pilih File > N e w
2. Pilih Bla n k pa ge
3. Pilih H TM L pada Pa ge
t ype
4. Pilih < none > pada La you t
5. Pilih Cr e a t e

5

Mengatur Properti Halaman

1. Klik m ouse pada page
propert ies yang t erdapat di
j endela propert ies.

2

3

2. Klik m ouse Appearance
3. Pilih j enis font / huruf yang
akan digunakan unt uk t eks
isi halam an web.

1

4. At ur ukuran font yang akan
digunakan.
5. At ur warna font yang akan
digunakan.

4
5
6

6. At ur warna unt uk halam an
web yang akan dibuat .

By. A3

4

 
7. At ur ukuran m argin unt uk
halam an w eb yang akan
dibuat .

8
8. klik Links unt uk m engat ur
propert i link.

7

9. Pilih Heading unt uk m engat ur heading.

10

9

10.At ur j enis font unt uk t eks
heading.
11.At ur ukuran font unt uk t iap
j enis heading.

11

12.At ur warna t eks unt uk t iap
heading.

12
13. Pilih OK.

13

By. A3

5

Set elah propert i halam an selesai diat ur, selanj ut nya halam an web siap dikerj akan. Dengan
rancangan halam an web yang dibuat m em punyai banner di bagian at as, m enu di bagian
sam ping kiri dan uraian m at eri di bagian kanan, unt uk it u perlu m enggunakan t abel.

Menambahkan/ Insert Tabel.
1

1. Pilih ikon Tabel at au pilih
I n se r t > Ta ble

2
3
4

5

2. Ket ikkan nilai Row s = 3
dan Colou m n s = 3
3. Ket ikkan nilai Ta ble w idt h
= 8 0 0 pix e ls
4. Ket ikkan nilai Bor de r s
t h ick r e ss = 0
5. Ket ikkan nilai Ce l spa cin g
= 5

6

2

6 . Pilih OK

Mengatur Tabel untuk Banner.
1. Blok colom 1, 2, dan 3
pada row pert am a.

2. Pilih M odify > Ta ble >
M e r ge Ce lls , at au
Klik kanan m ouse pilih >
Ta ble > M e r ge Ce lls

1

Langkah ini unt uk m enggabungkan 3 colom yang akan
digunakan unt uk banner.

Mengatur Tabel untuk Judul
2

1

1. Blok colom 1, 2, dan 3
pada row kedua.
2. Pilih M odify > Ta ble >
M e r ge Ce lls , at au
Klik kanan m ouse pilih >

Ta ble > M e r ge Ce lls
Langkah ini unt uk m enggabungkan 3 colom yang akan
digunakan unt uk j udul.

By. A3

6

 

Insert Image untuk Banner.
2

Dengan asum si im age unt uk
banner t elah disiapkan.
1. Klik m ouse di row pert am a
pada t abel.

1

2. Pilih I n se r t > I m a ge ,
at au
Klik I k on in se r t > im a ge
3. Pilih folder t em pat im age
banner berada.

3

4. Pilih file im age banner. Pilih
OK
5. Pilih OK.

4

5

Memberi Judul
1. Klik m ouse di row kedua
pada t abel.
2. Pilih H e a din g 1 pada For m a t di j endela Pr ope r t ie s

4

1

3. Pilih j enis perat aan t eks
( Align) .
4. Ket ikkan j udul dari bahan
aj ar yang dibuat .

2

By. A3

3

7

Insert Tabel untuk Menu
1. Klik m ouse di kolom pert am a, row ket iga pada t abel.

2

2. Pilih ik on I n se r t t a be l

3

3. Masukkan :
Row = j um lah m enu yang
akan dibuat .
Colum ns = 0
Table widt h = 200
Cell spacing = 5

1
4. Pilih OK

4
Insert Image untuk Menu
2

Dengan asum si im age unt uk
m enu sudah disiapkan.
1. Klik m ouse di row pert am a,
pada t abel m enu.
2. Pilih ik on I n se r t im a ge

1

3. Pilih I m age unt uk m enu
pert am a.

3
4

4. Pilih OK
5. Lakukan hal yang sam a
unt uk m enu lainnya, hingga
sem ua m enu t erisi.

5

8

By. A3

 

Mengatur Kolom untuk Isi Mat eri
1. At ur kolom ket iga unt uk
isi m at eri agar m em punyai
ruang yang cukup luas.

1

Memberi nama SubJudul
1. klik m ouse pada kolom m at eri

1

3

2. Pilih H e a din g 2 pada For m a t di j endela propert ies.
3. Ket ikkan nam a dari isi m at eri ( m isal kom pet ensi)

2

By. A3

9

Memberi Link pada Menu
1. Klik m ouse pada im age
m enu pert am a ( Kom pet ensi)
2. Ket ikkan nam a dari file
yang akan dipanggil ( link)
disini diisi in de x .h t m l
( pada um um nya unt uk file
pert am a halam an sebuah
sit us diberi nam a in de x .
h t m l)

1
3

3. Klik m ouse pada im age
m enu kedua ( Pengant ar)
4. Ket ikkan nam a dari file
yang akan dipanggil ( link)
disini diisi pe n ga nt a r .h t m l
( sebaiknya penam aan diisi
dengan nam a t om bol m enu
yang sesuai)

2

5. Lakukan hal yang sam a
unt uk t om bol m enu yang
lain hingga sem ua link nya
t erisi.

1
Menyimpan file
Set elah sem ua link t erisi selanj ut nya file dapat disim pan.
1. Pilih File > Sa ve
2. Ket ikkan nam a in de x .h t m l
3. Pilih Sa ve
Perlu diperhat ikan dalam m enyim pan file ini harus ke dalam folder saat m em buat sit e.

3
2

10

By. A3

 

Membuat Halaman Web Isi
Unt uk m em buat halam an web
isi lainnya, t idak perlu m engulang langkah dari awal cukup
dengan m engedit file yang ada
kem udian di save as.
1. Ubah sub j udul dari Kom pet ensi ke Pengant ar.

1

3

2. Ket ikkan isi dari pengant ar

2

3. Pilih File > Sa ve a s ( ingat
bu k a n Sa ve !)
4. Beri nam a pe n ga nt a r .
htm l
5. Pilih Sa ve

Dalam m em buat halam an web isi ini yang harus diperhat ikan adalah saat pem berian nam a.
Nam a- nam a yang digunakan harus sam a dengan nam a saat m em berikan link pada m enu.
Sebagai cont oh:
unt uk halam an isi pe n ga n t a r disim pan pe n ga nt a r .h t m l
unt uk halam an isi Pe n gola h k a t a disim pan pe ngola h_ k a t a .h t m l
unt uk halam an isi Pe n gola h ga m ba r disim pan pe n gola h _ ga m ba r .h t m l
unt uk halam an isi La t iha n disim pan la t ih a n .h t m l
unt uk halam an isi Te s disim pan t e s.h t m l
Hal ini bert uj uan agar link pada m enu dapat berfungsi dengan sem purna.

1

Memasukkan/ insert Animasi ke
Halaman Isi

3

Halam an yang dibuat t erkadang m em but uhkan anim asi.
Anim asi yang dapat dim asukkan/ insert ke dalam halam an
web harus dalam bent uk file
swf.
Unt uk m em asukkan anim asi
kedalam halam an langkahnya
sebagai berikut .

2
1. Pilih File > Ope n > Pilih
halam an yang akan diberi
anim asi ( m isal lat ihan.
ht m l)
2. Klik m ouse pada lokasi dim ana anim asi akan dit em pat kan.
3. pilih ik on I n se r t m e dia >
Fla sh
By. A3

11

4. Pilih File anim asi yang akan
dim asukkan.
5. Pilih OK

4

5

6. Pilih Ye s

6

7. Pilih lokasi folder sit us yang
t elah dibuat sebelum nya

7

8. Buat folder baru, beri nam a
anim asi

8

9. Beri nam a ( Boleh nam a
yang ada at au diubah)
10.Pilih Sa ve

10
9

12
By. A3

 

11.Ket ikkan nam a pada kolom
Tit le.

12
11

12.Pilih OK

13.Dengan m engklik m ouse
pada salah sat u t it ik t am pilan sw f, at ur ukuran t am pilan agar sesuai dengan
area uraian m et eri.

13

Menj alankan Web di Browser.
Unt uk m elihat hasil dari halam an web yang dibuat lakukan
langkah berikut .
2

1. Pilih File > Sa ve ( halam an
web yang akan dipreview
harus selalu disave t erlebih
dahulu agar perubahan
yang dilakukan dapat t erlihat hasilnya)
2. Pilih ik on Pr e vie w >
Pr e w ie v in I n t e r n e t Ex plor e r at au brow ser yang
lainnya.

By. A3

13

File anim asi berupa file swf
( flash) hanya akan t erlihat
pada saat di preview di browser.
Pada halam an kerj a di Dream weaver file swf hanya akan
t erlihat berupa kot ak abu- abu
dengan logo sw f.

14
By. A3