Microsoft FrontPage:An Introduction

Eva M. FernándezQueens LOTE ConsortiumLOTE@qc.edu

May 5, 2003

How to build a website in 10 steps (or less!)1. have a specific PROJECT in mind

2. outline or define the STRUCTURE of the site

3. write the CONTENT

4. create HTML FILES with the content

5. add DESIGN features to facilitate browsing

6. TEST the site

7. if using web authoring tools, PUBLISH the files

8. UPLOAD the files to your server

9. CHECK your newly-uploaded files

10.TELL ALL YOUR FRIENDS TO GO VISIT!

1. have a specific PROJECT in mind

2. outline or define the STRUCTURE of the site

3. write the CONTENT

4. create HTML FILES with the content

5. add DESIGN features to facilitate browsing

6. TEST the site

7. if using web authoring tools, PUBLISH the files

8. UPLOAD the files to your server

9. CHECK your newly-uploaded files

10.TELL ALL YOUR FRIENDS TO GO VISIT!

What’s in a website?

fancied-up text files: *.html, *.htm, *.xml, …

text with hyperlinks and other features

*.txt, *.pdf, *.rtf, *.doc, … text with and without formatting

maybe also: images (*.gif, *.jpg, …) sounds (*.wav, *.au, *.mp3, …) movies (*.mov, *.avi, …) …

How will your visitors know where to go?

a good site has…

a solid underlying organization or

hierarchy design features that directly reflect this

hierarchy

navigation bars cross-links

For example…

home

03/08 04/15 04/22

bio publi-cations

links lecturenotes

usefulinfo

Building a website using FrontPage

focus on:4. creating HTML FILES with the content

5. adding DESIGN features to facilitate browsing

6. TESTING the site

7. PUBLISHING the files

some brief comments on: using built-in FP themes using cascading style sheets using framesets

Starting up FP

opening a new web the “Page” view the “Folders” view

Working within a file

various modes of operation “Normal”, “HTML”, “Preview”

working with text adding, formatting (& using styles),

hyperlinking working with images

adding, formatting, hyperlinking working with tables

positioning text on a page setting table & cell parameters

Creating a hierarchy of files

the “Navigation” view the “Folders” view

Navigation bars & FP’s borders

“Insert” > “Navigation Bar…” pages listed in bar are those specified in

“Navigation” view file names in “Navigation” view are those

used in Navigation Bar

“Format” > “Shared Borders…” add a border to all pages or one page in

the current web local changes will be updated in all pages

Framesets

“File” > “New” > “Frames Pages”…

set component pages “Frames” menu, to set (among other

things) frame properties size, margins, scrollbars, etc.

“No Frames” view “Frames Page HTML” and “HTML” views

Adding fancy design features

FP’s templates “Format” > “Theme”

CSS templates “File” > “New” > “Style Sheets” or “Format” > “Style Sheet Links…” cascading style sheets

documentation: http://www.w3.org/Style/CSS/ downloadable examples:

http://www.stylebank.f2s.com/

Checking the site’s looks before “Publishing” it

“Preview” mode v. preview button avoiding the where are my files? problem

test using different screen resolutions, different browsers probably not much variation among visitors Queens LOTE Web visitors:

Microsoft’s Internet Explorer, 5.x (75%) Windows 98 (62%) 800 600 (53%) or 1024 768 (35%) screen

resolution

after “Publishing” it

Checking the site’s links and file components “Reports” view “Hyperlinks” view

“Folders” view changing file names and/or locations

Publishing the files

Compatibility with target server… “Tools” > “Page Options” >

“Compatibility” enabled v. disabled MS FP Server Extensions

“Publish Web” function… specify location: local v. remote determine additional options

Uploading the Files: direct FTP using FP’s “Publish” function

“destination”: ftp://forbin.qc.edu/public_html/ system will prompt for username and password

files will be uploaded to: /usr/users/~username/public_html/ /usr/users/~efernand/public_html/

difficult for departmental webs, whose files are sited off the root directory: /htdocs/queens/deptname/ /htdocs/queens/LCD/

Uploading the Files: publish + FTP

first, publish to local directory: “destination”, e.g.: c:\MyDocuments\

ToUpload\

then, upload files to destination directory on server, using WS-FTP Lite (Limited Edition)

Download: http://www.ftpplanet.com/download.htm

using SSH Secure Shell Instructions & download:

http://www.qc.edu/OIT/SSH/

For more information…

http://office.microsoft.com/ designs & templates product updates tutorials & help information

http://www.qc.edu/LOTE/, SUPPORT area if you want another copy of this handout

LOTE@qc.edu or 718-997-2992 if you have any questions about today’s

workshop