Microsoft FrontPage Essentials welcome & course outline (2007)

Microsoft FrontPageMicrosoft FrontPage 2003
www.freeu.com www.compuskills.com
your instructor: matthew wyllyamz
m.wyllyamz@gmail.com

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 introductions
customizing 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 youwhat 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 wyllyamz
software 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 ofunderstand 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 a
particular level of student:particular level of student:

keep in mind that this course was designed for a particularkeep 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 design
Understanding different views
Underlying website structure
A bit about HTML
Basic page formatting
Relative vs. absolute addressing
All about hyperlinks
Inserting images & understanding graphics
Web page properties
How frames pages work
Laying out web pages with tables
Testing your pages & publishing your web
… and a word about your book

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 browsers
for 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

words,words, paragraphs,paragraphs, and pagesand 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 than
character-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

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"

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 understand
if 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.org
column 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: 50k
Broadband: 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 & feedsUnderstanding 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/200

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)

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Microsoft FrontPage Essentials welcome & course outline (2007)

Semelhante a Microsoft FrontPage Essentials welcome & course outline (2007) (20)

Mais de Matteo Wyllyamz

Mais de Matteo Wyllyamz (12)

Último

Último (20)

Microsoft FrontPage Essentials welcome & course outline (2007)

Notas do Editor