microsoft frontpage essentials welcome & course outline (2007)

Microsoft FrontPage Microsoft Front003www.freeu.com www.compuskills.com

your instructor: matthew [email protected]

Colorado Free UniversityColorado Free University

getting started todaygetting started today

quick introductions -- customizing this coursequick introductions -- customizing this course administriviaadministrivia how to make this a better classhow to make this a better class menu of possible class topics and tasksmenu of possible class topics and tasks


quick introductionsquick introductionscustomizing this coursecustomizing this course

who are you and what do you do?who are you and what do you do? what is your experience with computers, what is your experience with computers,

the Internet, and the World Wide Web?the Internet, and the World Wide Web? what is your experience with web design, what is your experience with web design,

FrontPage, and HTML?FrontPage, and HTML? what are your goals today? what do you what are your goals today? what do you

hope to get from this class?hope to get from this class? what is something interesting about you?what is something interesting about you?


quick introductionsquick introductions

matthew wyllyamzsoftware instructor since 1993, with an emphasis on multimedia, graphics, and

internet development.taught Apple Macintosh classes exclusively for five years.have created courses for Jefferson County Adult Ed, CCU in Lakewood,

Productivity Point, and the DOD (at Rocky Flats).corporate webmaster for two years, blogmaster for seven years.learned HTML in 1995. used MS FrontPage exclusively for 10 years. recently

converted to Macromedia Dreamweaver and Flash for web development.independent contractor, technical & creative consultant, artist, amateur

photographer, and author. BA in english writing, and have sold three books.

administriviaadministrivia

class tickets and/or confirmation numbersclass tickets and/or confirmation numbers facilities …facilities …

– bathrooms, vending, free coffee & water, microwave …bathrooms, vending, free coffee & water, microwave …– the projection systemthe projection system

course schedule: 9am – 4pmcourse schedule: 9am – 4pm– Two morning sessions (10-15 min short break)Two morning sessions (10-15 min short break)– One hour lunch break around 12 or 12:30One hour lunch break around 12 or 12:30– Two afternoon sessions (10-15 min short break)Two afternoon sessions (10-15 min short break)

class evaluationsclass evaluations



please set pagers and cell phones to silent or turn off.please set pagers and cell phones to silent or turn off. understand the nature of understand the nature of concentrated computer trainingconcentrated computer training

– class is part discussion, part lecture, part hands-on– breaks can be short, but effective.– bathroom visits: anytime is the right time!– watch me, then try it yourself.– PARTICIPATE! ask questions. answer questions. take notes.– this is a cooperative learning environment:

We are here to learn from each other.

keep in mind that this course was designed for akeep in mind that this course was designed for aparticular level of student:particular level of student:

how to make this a better classhow to make this a better class

keep in mind that this course was designed for a particular keep in mind that this course was designed for a particular level of student:level of student:

Created for- a semi-experienced computer user with a comfortable working knowledge of the Windows environment.- the beginning FrontPage user who knows what the Web and HTML are, but has never or rarely used this specific software.

NOT created for- the beginning computer user.

- the more intermediate or advanced FrontPage user.

most importantly …most importantly …



most importantly …most importantly …

Make it fun!Make it fun!




menu of possible class topicsmenu of possible class topics

Site design vs. page designUnderstanding different viewsUnderlying website structureA bit about HTMLBasic page formattingRelative vs. absolute addressingAll about hyperlinksInserting images & understanding graphicsWeb page propertiesHow frames pages workLaying out web pages with tablesTesting your pages & publishing your web… and a word about your book

Moving on …Moving on …Moving on …Moving on …


An introduction to HTMLAn introduction to HTML

Do you need to know it? The more you understand the limits of HTML,

the more it will help you in your page designs. A markup language, not a programming language The structure of tag nesting words go here

The importance of syntax Understanding different "flavors." eg: XHTML "Deprecated" tags And so what is an HTML editor? …

http://www.w3schools.com


Site design vs. page designSite design vs. page design

Be thinking of both as you prepare and as you work. Remember, not all web pages are contained within

a web site. "Information architecture" or …

Planning and designing your site (pgs. 4, 88-90)

– Defining the objectives of the site: audience, purpose, image …

– Diagramming work flow

– Storyboarding page designs, and …


The underlying structure of a websiteThe underlying structure of a website

What is a "home page" really? How is site/page addressing affected by file and

directory names? Folders or "directories"

– Understanding the nature of root levels Understanding index.htm as the "magical file name"

The importance of managing files from within the site management application!!!


Site managementSite management

To work on a site, you should create a local copy.

Defining local and remote sites

Utilization of the files panel Publishing your site


Creating new pages/folders in your webCreating new pages/folders in your web

Creating new web structures is easy.

Organizing your site with folders File and folder naming conventions:

– Lowercase, no spaces, no special characters

– Remember: file names = web page addresses

– Search engines use key words in file names to help rank your pages' importance

Is there a difference between .htm and .html?


An overview of the application windowAn overview of the application window

(pgs. 2-3) Primary toolbars, buttons, menus, and

panels Everything customizable Remember your visual clues


Understanding different viewsUnderstanding different views

Utilizing site or folder views Design vs. Code vs. Split … Previewing your pages in different web

browsers– You are going to want to preview your pages

constantly: F12


What exactly is a "web browser"?What exactly is a "web browser"?

"A web browser is a software application that enables a user to display and interact with text, images, and other information typically located on a web page at a website on the World Wide Web or a local area network. Web browsers allow a user to quickly and easily access information provided on many web pages at many websites by traversing these links. Web browsers convert HTML coding for display, so the appearance of a web page may differ between browsers. Web browsers available for personal computers include Internet Explorer, Mozilla Firefox, Safari, Netscape, and Opera in order of descending popularity (as of August 2006)."

• More than 10 years ago, Netscape Navigator was the widest used graphical-based client and server program for the Internet with 71% market share.

• As a web designer, you must give a lot of thought to the browsers people are using and test your pages accordingly.

"2005: Market share for the open-source Mozilla Firefox climbed above 6%, while Microsoft's Internet Explorer share dropped below 90%."


Today the two most popular browsersfor the WWW are:

MS Internet Explorer (60%) Mozilla Firefox (32%)

Current and updated browser statistics

Which browsers should you test your pages in?Which browsers should you test your pages in?


Essential formatting:Essential formatting:words, words, paragraphs, and pagesparagraphs, and pages

Basic character-level formatting

– Bold, italic, underline, etc. …

– Size: relative vs. absolute definitions

(Prefer pixels [px] as the measurement of choice for web dev.)

– Understanding the "web-safe" color palette's 216 colors and their hexadecimal codes

Adding special characters

Essential formatting:Essential formatting:words,words, paragraphs, paragraphs, and pages and pages

Importing content from other documents or applications

– Beware of unexpected results …

Two different kinds of line breaks

– "Enter" or (vs.) "Shift-enter" or or 

Paragraph or "block-level" formatting is different thancharacter-level formatting

– Block-level formatting always applies to entire blocks of text within 

Alignment, indents, bulleted & numbered lists

Horizontal lines <hr> or <hr />

XHMTL Syntax


Essential formatting:Essential formatting:words,words, paragraphs, paragraphs, and pagesand pages

Keep revisiting your … PAGE PROPERTIESPAGE PROPERTIES

The page title, different than the file name

– Page titles are used to identify your pages in …» The web page's title bar» Browser histories and bookmarks/favorites» Search engine results lists

– Search engines also use page titles to rank your pages

» Therefore page titles should also be descriptive and use key words

Description & key words "meta tags"


Essential formatting:Essential formatting:words,words, paragraphs, paragraphs, and pagesand pages

Modifying hyperlink colors

Defining the background

– Background color vs. background image

– Keep readability as your primary concern

– Free background images on the web

Margins: Don't mess with them unless you have to.

The location of all these attributes is important to understandif you are working with frames pages.


Aspects of hyperlinksAspects of hyperlinks

(pgs. 40-49)

A hyperlink has two parts– Its form: text or image– Its coding: address & optional target

Remember relative vs. absolute addresses The wording of your links is important. Several different methods of inserting links Specifying targets for onsite and offsite links Utilizing "bookmark" or "anchor" links Email links Always test your links!


Understanding web server addressing: Understanding web server addressing: hyperlinks, images, and other contenthyperlinks, images, and other content

Addressing appears in the HTML code for:links, images, and other embedded content.

Absolute vs. relative addresses (pg. 41) Understanding paths The whole / and ../ thing Let the application do the addressing for you!


How monitor size & screen resolution affect web designHow monitor size & screen resolution affect web design

Understanding the situation – everybody's computer is different!

– Varying monitor sizes, resolutions, web browsers, and OSs make controlling web page output impossible.

This issue affects:

Table layouts, divisions/layers, framesets, and background images.

Different methods of dealing with this phenomenon:

– Rigid designs vs. flexible designs (and combinations)

– Left-justified designs vs. centered designs

– Using "spacer images" to prevent collapsing columns

Utilizing resolution preview commands

Test your pages everywhere you possibly can!


http://www.alltm.orgcolumn at 100%-window, makes reading body text very difficult, looks amateur.

http://www.abos-littleton.com simple, small, rigid, left-justified design, even works in 640x480.

http://www.lacitybeat.com centered rigid columns with flexible "white space" side bars, optimized for 800x600 and 1024x768, but "fails gracefully" in 640x480.

You can use these design methods to your advantage, but each has its drawbacks also.

As a general rule, optimize your pages for 1024 x 768,but they should also look good in 800 x 600 … and on larger displays.

http://www.markhorrell.com/tools/browser.html http://www.useit.com/alertbox/screen_resolution.html

http://www.netmechanic.com/news ...

How monitor size & screen resolution affect web designHow monitor size & screen resolution affect web design

examples …


Using tables to format pages & columns

(pgs 51-67, 91-95)

Tables are a key element of HTML page design. Relative vs. absolute size definitions Methods of creating tables Making selections within a table Table and cell properties Merging and splitting cells Nesting tables within tables


Understanding more about background imagesUnderstanding more about background images

(pgs. 79-82)

Images can be set as backgrounds of pages, frames, tables, table cells, and "layers."

Background images automatically tile when they are smaller than the set area.

Combine this understanding with an appreciation of how monitor size and screen resolution can affect your designs.

You can use this to your design advantage, but it has its drawbacks also.

Use background images appropriately.

– Page text and background color/image should contrast.

– Readability of online documents is key!

Free background images on the web


Different image formats and their usesDifferent image formats and their uses

(pg. 18)

JPG: good compression can lead to poor quality GIF: transparencies and animation PNG: smaller files, better quality, less support

Understanding resolution and "resampling."

The Rule: You can sample down, but not up.The Rule: You can sample down, but not up.

Using image "slices" for faster downloads How big should a web page be?

– For all files loading on a single page:Dial-up: 50kBroadband: 100k


Inserting images and understanding graphicsInserting images and understanding graphics

How images are saved into your web– A web page is simple text, typed as code– Multimedia content is NOT embedded into the

page– It is simply addressed or linked to

Picture properties and toolbars– "Alt text" and "accessibility"– Basic image editing within the app

Prefer to use "camera-ready" images Understanding text wrap and alignment Placeholders, borders, and image margins


Working with frames pagesWorking with frames pages

Should you use frames?

A frameset is contained within a master frames page.

Each frame is an individual HTML page.

The master frames page …

– includes title, key words, etc.

– defines the properties of the frameset

Creating, saving, and editing framesets

Relative vs. absolute size definitions

– Also works with table definitions

Frame properties

Link targets and frames

Web Style Guide: Frames To Frame or Not to Frame?


Working with frames pagesWorking with frames pages

_self is the same as the default target or no target at all _blank always loads the hyperlink into a new window _top loads the link into the full browser window, thereby removing all

frames _parent is the most complicated one:

"_parent" is used in the situation where a frameset file is nested inside another frameset file. A link in one of the inner frameset documents which uses "_parent" will load the new document where the inner frameset file had been. If the current document's frameset file does not have any "parent", then "_parent" works exactly like "_top": the new document is loaded in the full window. Note that "_parent" does not work in a frameset which is merely nested inside another framset in the same frameset file.

When you have defined frames, other options will appear, such as _mainframe


Summary of best SEO techniquesSummary of best SEO techniques

Page titles & filenames should use descriptive keywords– If possible make each page of your web different

Put effort into your key word and description meta tags. Use HTML headings to highlight important text on the page. Use alt text tags in images. Register many (if not all) of your site's pages in as many

places as you can. Incoming links are the best way to boost your page rank.

– The more sites the better.

– The better their page rank, the more it helps.

More recently updated pages get a better page rank. Register your site under multiple domain names. Avoid any and all spamdexing.


Publishing your webPublishing your web

(pg. 109)

Finding the right "web host" Importing pages and entire webs is possible. Working live or remotely vs. working locally Backing up your site with this method (pg. 117) How to publish your site (pgs. 114-116) You can publish your site in any "direction." How to edit existing pages without ruining them


What do you need to have your own site?What do you need to have your own site?

An appropriate computer system w/ Internet access The tools:

– Text editor or HTML editor

– Image editor

– Web browsers for testing

Web "hosting." eg: godaddy.com

http://www.webhostingratings.com

A delivery method: FrontPage, Dreamweaver, web publishing wizard, or straight FTP

A domain name is optional, but preferred.

Register your domain at networksolutions.com Register your site all over the web


Conclusions …Conclusions …

You cannot learn the violin in a day or two.

Web design is a skill – like any other – that requires gradual & continual practice & improvement.

Approach everything on a need-to-know basis, and don't worry about that which you do not yet understand.

Stay upbeat!… but if you get frustrated, remember:

You can always turn off the machine and walk away. :)

Good luck. Best wishes.And get in touch if you need more help!


Applying predefined themesApplying predefined themes(pgs. 70-72)(pgs. 70-72)


Understanding RSS tags & feeds Understanding RSS tags & feeds

"RSS is a family of XML file formats for web syndication used by news websites and weblogs. They are used to provide items containing short descriptions of web content together with a link to the full version of the content. This information is delivered as an XML file called RSS feed, webfeed, RSS stream, or RSS channel."

You can personally subscribe to RSS feeds You can define content on your site as an RSS feed You can include/embed RSS feeds into your own pages

http://en.wikipedia.org/wiki/RSS_(protocol)


Should your site be a blog?Should your site be a blog?

Adding interactivity to your site

– Message boards or forums– Allowing comments– Posts by multiple authors– Enlisting your audience– "Going viral"


Utilizing third partiesUtilizing third parties

Blogging tools Message boards / forums Online photo sharing Scripts and additional functionalities


What is "Web 2.0"?What is "Web 2.0"?

A relatively new buzz-word indicating:

– A move towards a more social and participatory World Wide Web

– The anticipated development of companies moving software applications and even entire computing platforms (OSs) to the Internet

http://en.wikipedia.org/wiki/Web_2.0

http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html


What is "Web 2.0"?What is "Web 2.0"?


What is a "wiki"?What is a "wiki"?

A relatively new buzz-word indicating:

– "A type of website that allows users to easily add, remove, or otherwise edit and change some available content, sometimes without the need for registration. This ease of interaction and operation makes a wiki an effective tool for collaborative authoring."

– Utilizes "group intelligence" or "the wisdom of crowds"– From a Hawaiian word meaning, " hurry, quick."

http://en.wikipedia.org/wiki/Wiki

microsoft frontpage essentials welcome & course outline (2007)

Technology

free coffee water

web design

web pages

better classhow

web development

world wide web

graphics web page properties

beginning frontpage