1. Web Design-Lecture2-QN-2003 Web Design Microsoft FrontPage®

2. Web Design-Lecture2-QN-2003 Second Lecture Use table in Microsoft FrontPage to format layout Inserting graphics Inserting hyperlinks

3. Web Design-Lecture2-QN-2003 Microsoft FrontPage® 2000 FrontPage tour at http://www.microsoft.com/ It allows you to create a HTML page without having to type HTML tags Everything you put on the screen will be displayed the same in browser Other tools: Netscape Composer, Macromedia Dreamweaver

4. Web Design-Lecture2-QN-2003 Getting Started Open FrontPage File  New  Web Choose “One Page Web” Specify the location you’d like the files to be stored Click OK

5. Web Design-Lecture2-QN-2003 Overview – Look at your Screen Menu and Toolbars (standard Microsoft Office menu and toolbars) Main window pane – edit your page Folder List – navigate through directories Views Bar Folders – looks like Windows Explorer Hyperlinks – to see links between objects

6. Web Design-Lecture2-QN-2003 Start – Using Tables Using table is the easiest option to create layout for your page Everything will be lined up and consistent See example Divided into 3 columns The blue image at the top actually spans across 2 columns

7. Web Design-Lecture2-QN-2003 Insert Table 3x3 size Drag cell borders to specify column width Merge cells Delete row

8. Web Design-Lecture2-QN-2003 Insert Images Use the Insert Image icon Get it from the source you wish Clip-Art The Internet Scanner Local disk (browse) Click an left.jpg and click OK Repeat the same thing for top.jpg and right.jpg

9. Web Design-Lecture2-QN-2003 Show All Click the button You’ll see something like P (paragraph) and little skinny arrows on the page. P  (press Enter button to create it) little skinny arrow  (press Shift+Enter buttons to create it)

10. Web Design-Lecture2-QN-2003 Cell Alignments Default: left (horizontal) and middle (vertical) Fix into: left and top Right click on cell, then click “Cell Properties…” You may also remove the ticks from Specify width and Specify height so that the cell is only as big as the image in it

11. Web Design-Lecture2-QN-2003 Fix Some Things You need the left image to be going down the page, simply insert another copy. Don’t forget to use Shift+Enter instead of Enter to get the second image under the first one You may want a page background colour, click Page Properties... and specify colours from the Background tab That’s it! Your layout is done.

12. Web Design-Lecture2-QN-2003 Text – The Information! Simply copy and paste texts from any sources of texts (.txt or.doc files) According to the example, try body- text.txt and side-text.txt Format the text just like you use other Office™ products. Logical formatting – Styles Physical formatting – bold, font size, etc

13. Web Design-Lecture2-QN-2003 Hyperlinks Browse – a website needs to have some hyperlinks Select the text you want to use as a hyperlink, e.g. Love Quotes Click hyperlink icon Browse, and select the file you want to link Hyperlinks could be: images or other types of file (binary) other website email address

14. Web Design-Lecture2-QN-2003 Tips Refresh button – to refresh view of Folder List Page properties – you can change the colours of hyperlinks in your page (other than browser’s default) You may want to preview your work in different browsers, esp. when you use physical text formatting

15. Web Design-Lecture2-QN-2003 Read more... FrontPage icons (menu/toolbars) http://www.cs.ui.ac.id/kuliah/webdesign/frontpage.html