Web Design-Lecture2-QN-2003

Web Design

Microsoft FrontPage®

Web Design-Lecture2-QN-2003

Second Lecture

Use table in Microsoft FrontPage to format layoutInserting graphicsInserting hyperlinks

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 tagsEverything you put on the screen will be displayed the same in browserOther tools: Netscape Composer, Macromedia Dreamweaver

Web Design-Lecture2-QN-2003

Getting Started

Open FrontPageFile New WebChoose “One Page Web”Specify the location you’d like the files to be storedClick OK

Web Design-Lecture2-QN-2003

Overview – Look at your Screen

Menu and Toolbars (standard Microsoft Office menu and toolbars)Main window pane – edit your pageFolder List – navigate through directoriesViews Bar

Folders – looks like Windows ExplorerHyperlinks – to see links between objects

Web Design-Lecture2-QN-2003

Start – Using Tables

Using table is the easiest option to create layout for your pageEverything will be lined up and consistentSee example

Divided into 3 columnsThe blue image at the top actually spans across 2 columns

Web Design-Lecture2-QN-2003

Insert Table

3x3 sizeDrag cell borders to specify column widthMerge cellsDelete row

Web Design-Lecture2-QN-2003

Insert Images

Use the Insert Image iconGet it from the source you wish

Clip-ArtThe InternetScannerLocal disk (browse)

Click an left.jpg and click OKRepeat the same thing for top.jpg and right.jpg

Web Design-Lecture2-QN-2003

Show All

Click the buttonYou’ll see something like P (paragraph) and little skinny arrows on the page.

P <P> (press Enter button to create it)little skinny arrow <BR> (press Shift+Enter buttons to create it)

Web Design-Lecture2-QN-2003

Cell Alignments

Default: left (horizontal) and middle (vertical)Fix into: left and topRight 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

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 oneYou may want a page background colour, click Page Properties... and specify colours from the Background tabThat’s it! Your layout is done.

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.txtFormat the text just like you use other Office™ products.

Logical formatting – StylesPhysical formatting – bold, font size, etc

Web Design-Lecture2-QN-2003

Hyperlinks

Browse – a website needs to have some hyperlinksSelect the text you want to use as a hyperlink, e.g. Love Quotes

Click hyperlink iconBrowse, and select the file you want to link

Hyperlinks could be:images or other types of file (binary)other websiteemail address

Web Design-Lecture2-QN-2003

Tips

Refresh button – to refresh view of Folder ListPage 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

Web Design-Lecture2-QN-2003

Read more...

FrontPage icons (menu/toolbars) http://www.cs.ui.ac.id/kuliah/webdesign/frontpage.html