Microsoft Frontpage 2003 is one of web design application program part of Microsoft office , and it’s used to design,

and to edit a
website. Microsoft Frontpage give the facilities to edit the website using Design view then you can preview your design instanly. And
also enables you to edit the website using source code editor.
To make easy in design website, first we should have a plan about the layout of our website. The following are some examples of
layout design using Layer.
Untuk memudahkan dalam pembuatan website, sebelumnya kita harus punya rencana gambaran tentang tampilan atau layout yang akan dipakai
dalam mendesign website. Berikut adalah contoh-contoh bentuk design sederhana menggunakan Layer.

I. CREATE LAYER
Membuat ‘Layer’ untuk meletakkan elemen-elemen object yang bisa berupa teks, tombol,gambar/foto, background dll, ke dalam layer tersebut
agar memudahkan dalam pengaturan posisi object atau menu tersebut.
Create a ‘Layer’, (the arrangeable rectangle line) used to put the objects elements in text, button , picture , shape , background image, or etc
inside the layer. So that will make us easy to arrange the objects positions.
Steps : 1. klik menu Insert, choose and klik Layer 2. klik & drag the layer as you need

will display

II. MEMASUKKAN BACKGROUND IMAGE DALAM LAYER .

Inserting Background Image inside the Layer.
Steps : 1. Right klik the layer box, choose Layer properties..
2. Klik Border and Shading
3. klik Shading, klik Browse to locate the file. Then klik OK

will display

ICT MATERIAL - FRONTPAGE2003 SMPN 1 GRESIK 1

III. WEB COMPONENT
1. Klik Insert, klik IV. MEMASUKKAN MARQUEE.
2. You will see variety of Component type Add Marquee, the moving text scroll horizontally across the screen
1. On the Insert menu, click Web Component.
2. Under Component type, click Dynamic Effects.
Under Choose an effect, double-click Marquee

will display

V. MEMBUAT PHOTO GALLERY

1. Klik Insert, klik VII. MEMASUKKAN BACKGROUND HALAMAN WEB
2. Pick Photo Gallery Insert Page Background
3. Choose Photo Gallery Option on the right side Steps:
4. Then Follow the steps.. 1. Klik Format, pick Background…
2. Or …Right klik in the middle of the page, pick Page Properties…
3. klik Formatting, then give check on Background picture
4. klik Browse to locate your picture’s file
1. klik Format, pilih Background…
2. atau..klik kanan di daerah yg kosong pada
webdesign, lalu pilih Page Properties…
3. pilih menu Formatting,
4. beri cawang pada  Background picture
5. klik Browse untuk mencari lokasi file image.

VI. MEMASUKKAN TOMBOL/BUTTON

Klik Insert, pick Interactive button…

The Button’s
collection.
pick your choice

Change The
button’s width
and height
Change your
button’s text

The Button’s
Font color when
The Button’s pressed
Write your link The Button’s Font color on
address or browse to Font color mouseover
locate your link file
Your

ICT MATERIAL - FRONTPAGE2003 SMPN 1 GRESIK 2

VIII. PAGE TITLE
To give the web page title in the top of the browser.
You can give the title by :
st
1 way :
1. Save the webpage that you build, klik Save…
2. Give the filename
3. Klik Change title …type the title, then klik OK
4. Klik Save
Klik to Change the title
another way :
1. Right klik on a blank spot in your web page,
2. Choose Page Properties…
3. Write the title
4. Klik OK

IX. BEHAVIORS
1. In your webpage, select one of element — for example,
text or a graphic — that you want to give behaviors. Then
Click 1x.
2. click Format Menu-- click Behaviors…, you will see Behaviors
on right side
3. In the Behaviors task pane, click Button Insert, and then pick
one of the Behaviors action.
1. klik salah satu elemen (bisa text, button, image dll) yang
akan ditambahkan Behaviors..
2. klik Format, klik Behaviors… , akan muncul di sebelah kanan.
3. Klik tombol Insert, pilih salah satu behavior. Misal play
sound, popup message, swap image, open browser dll

X. BEHAVIORS ACTION  SWAP IMAGE

1. First, klik on the image or picture on your webpage that
you want to swap with another.
2. Klik Insert on Behavior task pane, click Swap Image Klik the arrow to see
nd
3. klik Browse to locate the 2 image file to swap The Collection of Events
4. give thick  on Restore on mouseout event
5. Klik Ok.
6. Then you will see an Events and Action on the right side.

6
3

5
4 

ICT MATERIAL - FRONTPAGE2003 SMPN 1 GRESIK 3

XI. H Y P E R L I N K
Klik to locate
A hyperlink is a link from one of Web page address or file to
another, including a picture or multimedia file. When you
click the hyperlink, the destination is displayed in a Web
browser

Create a hyperlink to an existing page or file

1. Klik the text or the picture that you want to use as the
hyperlink
2. click Insert, pick

Or klik icon

or right klik, choose Hyperlink…

3. Locate your local file that you want to use as your link.(the
file can be a web file(html), picture, sound, movie,
wordprocessing,pdf etc..) or type the URL internet
address. Example:
http://www.facebook.com/login2386Krft..

XII. PREVIEW YOUR PAGE IN FRONTPAGE

By using Preview view, you can quickly determine whether the
page you are designing will appear as expected in a Web browser.
Because you can use Preview view without saving your Web
page— whereas using Preview in Browser requires you to save
your changes. Preview view is often more useful for previewing
design ideas that you're not yet ready to commit to.
Dengan menggunakan Preview view, kita bisa menentukan
secara langsung webpage yang telah kita disain akan
tampil seperti yang terlihat di browser. Karena kita bisa
menggunakan Preview view tanpa harus menyimpan
desain terlebih dulu, karena untuk bisa ditampilkan di
browser, desain web harus di save dulu.
2
Preview view lebih sering dipakai untuk menampilkan ide
hasil desain sebelum merasa yakin siap untuk di
publikasikan.

XIII. PREVIEW IN BROWSER

To show your web design in browser :
1. Klik File,
2. Klik Preview in Browser, then choose
the browser.
3. Or … just press F12 button.

If you want to set another browser :

1. klik Edit Browser List…
2. klik Add…

- type the name of the browser, ex. Mozilla or opera, or

else
- klik Browse… and then find the location of the
browser program.
for mozilla  C:\Program files\Mozilla\firefox.exe
for opera  c:\Program Files\Opera\opera.exe
etc…
- klik OK

XIV. SAVE YOUR WEBDESIGN

In every website has homepage. Homepage is the first page that
shows on website when you run the URL address internet. So, in
your web design, you should save your homepage called
index.htm.And put all that file and other files you have made
together in one folder.
Setiap website pasti punya homepage, Homepage merupakan
halaman awal yang tampil pada saat membuka alamat website di
internet. Jadi, simpan homepage yang kamu design dengan nama
index.htm Dan letakkan file tersebut dan file-file lainnya dalam
satu folder.

ICT MATERIAL - FRONTPAGE2003 SMPN 1 GRESIK 4

XV. INSERTING WINDOWS MEDIA PLAYER IN WEBSITE
You can put your video file, so you can play that video in your website.
First, create a layer to put your player inside your page, so it’s easy for you
to arrange the player position.
--- kita bisa memasukkan video player (WindowsMediaPlayer)
Yang bisa dijadikan menu ke dalam webdesain. Kemudian bisa diputar
di browser.
Untuk memudahkan, buat dulu Layer agar mudah dalam mengatur
posisinya, lalu masukkan video playernya.

Steps:
1. On the Insert menu, click Web Component. 8. Back to Choose a Control: then click Windows Media Player
2. In the Component type : click 9. click Finish
10. you will show the Windows Media Player box.
3. Then choose 11. Right click the Player, click ActiveX Control Properties…
4. Click Next > 12. Click Browse to get your Video file
5. Find Windows Media Player on the Control list, but if not 13. Uncheck on Playback option
there… 14. Click OK
6. Click 15. Save your website, and try to preview in Internet Explorer Browser.
7. Find Windows Media Player, then give thick , Klik OK

8
6 7
2

4
9

10
12

13

11

14

XVI. HOTSPOT
Hotspot is a hyperlink area that created from selected
specific area on object ( picture/image ). 1
So you can klik that area and link to another menu. 4
--- hotspot adalah suatu hyperlink area yg dibuat dengan
cara menyeleksi daerah tertentu pada suatu object
(image/picture).
sehingga area tadi bisa diklik dan terhubung ke menu lain.

The Steps :
1. First, klik your picture or image on your webdesign that
you want to create hotspot.
2. When you klik your picture, then it will show the
drawing properties at the bottom.
3. Choose & klik your hotspot rectangle area
4. Then go to your picture, Select the area that you want
to give hyperlinks.
5. After finish selection, then it will show the hyperlink
box address, then insert the location of the link file.
2

Rectanguter hotspot 3 Polygonal hotspot

Circular hotspot

ICT MATERIAL - FRONTPAGE2003 SMPN 1 GRESIK 5