materi front page 2003 for smp sbi

1 ICT MATERIAL - FRONTPAGE2003 SMPN 1 GRESIK

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

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

will display


III. WEB COMPONENT 1. Klik Insert, klik 2. You will see variety of Component type

IV. MEMASUKKAN MARQUEE. 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

V. MEMBUAT PHOTO GALLERY 1. Klik Insert, klik 2. Pick Photo Gallery 3. Choose Photo Gallery Option on the right side 4. Then Follow the steps..

VI. MEMASUKKAN TOMBOL/BUTTON Klik Insert, pick Interactive button…

VII. MEMASUKKAN BACKGROUND HALAMAN WEB

Insert Page Background 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.

The Button’s collection. pick your choice

Change your button’s text

Write your link address or browse to locate your link file Your

The Button’s Font color

The Button’s Font color on mouseover

The Button’s Font color when pressed

Change The button’s width and height

will display


Klik to Change the title

VIII. PAGE TITLE

To give the web page title in the top of the browser. You can give the title by : 1st 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

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 3. klik Browse to locate the 2nd image file to swap 4. give thick on Restore on mouseout event 5. Klik Ok. 6. Then you will see an Events and Action on the right side.

3

4 5

6

Klik the arrow to see The Collection of Events

2


XI. H Y P E R L I N K 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. Preview view lebih sering dipakai untuk menampilkan ide2 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…

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.

Klik to locate

- 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


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. 2. In the Component type : click

3. Then choose 4. Click Next > 5. Find Windows Media Player on the Control list, but if not

there… 6. Click 7. Find Windows Media Player, then give thick , Klik OK

8. Back to Choose a Control: then click Windows Media Player 9. click Finish 10. you will show the Windows Media Player box. 11. Right click the Player, click ActiveX Control Properties… 12. Click Browse to get your Video file 13. Uncheck on Playback option 14. Click OK 15. Save your website, and try to preview in Internet Explorer Browser.

XVI. HOTSPOT Hotspot is a hyperlink area that created from selected specific area on object ( picture/image ). So you can klik that area and link to another menu. --- 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

3

4

6 7 8

9

10

11

12

13

14

2

Rectanguter hotspot

Circular hotspot

Polygonal hotspot 3

1 4

materi front page 2003 for smp sbi

Documents