Microsoft FrontPage Essentials welcome & course outline (2007)

1,420 views
1,339 views

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,420
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
22
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Redo the list of class topics and link up the menu. Go through the workbook more thoroughly. Add any additional correct page numbers to outline. Find an appropriate place to do a brief demonstration of frontpage HELP Treat ms frontpage as a more basic web design class, simpler, not as in-depth in technical topics. Students pay less for this class. I get paid less for this class.
  • What we are aiming for here is a comprehensive project (set of web pages) from start to finish.
  • An html editor is two things: A page editor. A site (file) management program.
  • For this slide you will want to draw out (illustrate) a typical website directory structure. Use the upcoming Liberty website as an example.
  • For this slide you will want to draw out (illustrate) a typical website directory structure. Use the upcoming Liberty website as an example.
  • In this step, the web designer would diagram a work-flow or story board for the website. new site: frontpage liberty experiments 2) include separate folders for a) local site b) faux remote site
  • In a minute we will go over all the different parts of the application window. create two initial pages at the root level: index.htm and preamble.htm create folder: a) Historical_documents move preamble.htm inside previous folder create an additional file inside this folder: bill_of_rights.htm we will create additional pages ( liberty, freedom, links , etc) at a later time. Before you move away from the files panel, you should demonstrate "publish site" very briefly.
  • 1) Open the initial blank file: preamble.htm 2) Take the time to go over all the basic elements of the entire application window. 3) Type heading: " The Preamble to the Constitution of the United States of America" 4) Type in the preamble text. "understanding different views" comes next.
  • 1) Preview the page using a) file: preview in browser b) Preview button c) Keyboard shortcut F12 d) frontpage's own preview 2) Note how the text on the page FLOWS according to the changing size of the window
  • practice basic character formatting, step-by-step with the slide remember: "select, then affect." apply a heading tag to "The Preamble to the Constitution of the United States of America" the smaller the number, the larger the heading. Other font choices override heading sizes. look at the code: formatting, font, size, color 4) Add special characters to the page: TM and ©
  • 1) Open the document bill_of_rights.htm 2) Search, copy, and paste the text from the web into the blank document you can paste the text into wordpad/notepad first to strip away all formatting, including the named anchors in the html. 3) Use shift vs. control-shift in the document to insert line breaks and paragraph breaks 4) experiment with alignment buttons to show how block-level formatting is contained within <p> 5) Add horizontal rule
  • Work with page properties in the document. add a page title add key words & description
  • Work with page properties in the document. add a background color modify hyperlink colors OPTIONAL add a background image from http://www.backgroundcity.com why would you want to define both? Choose an image from a website download to local site folder define as background
  • Add internal links – don’t worry about target Use "home" as link to index.htm from both pages this is why its important to have added additional pages to the web. add a link from each page to the other: b ill_of_rights.htm and preamble.htm add external link to liberty.com – specify target to open in new window add an email link at the bottom of each page add anchor links in bill_of_rights.htm to each amendment [1] [2] [3] include [back to top] link also 6) Validate links in document? File: Check Page: Check Links
  • take a look at the code for all the links: site-relative links, the root-level link vs. the link inside a directory, email links, anchor links, etc Reemphasize key point: why is it so important to do your site file management inside the application?
  • First illustrate a rigid, left-justified design Then illustrate a flexible centered design. Talk about combinations of relative and absolute tables Real-world examples follow on the next page NOTES: It would be nice to have a slide that has the illustrations I normally draw on the board.
  • Use index.htm for this complete exercise 2) create a complete page table (with nested table) to illustrate the process, using both relative and absolute definitions Parent table: 100% width = 3 columns: 15% x 70% x 15% Nested table: 100% width = 3 columns: define by absolute pixel widths 3) Add 8 paragraphs of lorem ipsum to the appropriate column from lipsum.com. Test the page to see the effects on the text. Note that if you try to click into the left column that the cursor is half way down the page. Set the vertical alignment to TOP for all three nested columns 4) decide on a color scheme for the page. REVIEW THE SLIDE ON BACKGROUND IMAGES 5) Download a background image from allfreebackgrounds.com. Save to images folder. Set page properties. 6) Set a matching background color for the page with the ink-dropper, with appropriate hyperlink colors. Record this #. 7) Add a header to the page. Set link to index.htm to use as additional home link. make sure to set the background color the same as the # for the page background. make sure to name the swf file appopriately. 8) Include a simple image for the page. FOLLOW NOTES FOR SLIDE ON IMAGE FORMATS 9) since this page will be USED AS A MENU: Create individual flash buttons for each of the following: HOME, FREEDOM, LIBERTY, CIVIL RIGHTS use control-enter <br /> between the buttons make sure to set the background color for the buttons the same as the # for the page background. make sure to name the swf files the same as the pages/links. 10) Below this, create three additional simple text links Preamble, Bill of Rights, Liberty.com (make sure this final link includes target="_blank" set the entire column to right-justified. OPTIONAL Give the page a title, and include meta tag information. Include an additional 3-column nested table at the bottom of the page for company contact information. © 2006 libertyissues.org Denver, CO 80226 email@libertyissues.org 1234 Street ADVANCE TO THE SLIDE ON UTILIZING TEMPLATES
  • RETURN TO THE SLIDE ON BUILDING A TABLE
  • RETURN TO THE SLIDE ON BUILDING A TABLE
  • Save an appropriate image from the internet directly into the web 2) Experiment with picture toolbars - crop, brightness/contrast, sharpen permanently alter the image in the web - resample the image* 3) Add alt text and a border to an image OPTIONAL: Experiment with "align" (text wrap) through the use of surrounding text in order to do this, DL a 2 nd image and use it in the body text of the page. 4) experiment with v space and h space? 5) Add a hyperlink to an image this can be a (redundant) link back to the home (index.htm) page RETURN TO THE SLIDE ON BUILDING A TABLE image editing features only work with .jpg and .gif *Image resampling adds or subtracts pixels from a resized JPEG and GIF image files to match the appearance of the original image as closely as possible. Resampling an image reduces an images file size, resulting in improved download performance. When you resize an image, you can resample it to accommodate its new dimensions. When a bitmap object is resampled, pixels are added to or removed from the image to make it larger or smaller.
  • Create a very basic frameset simply to illustrate how they work.
  • Microsoft FrontPage Essentials welcome & course outline (2007)

    1. 1. Microsoft FrontPageMicrosoft FrontPage 2003 www.freeu.com www.compuskills.com your instructor: matthew wyllyamz m.wyllyamz@gmail.com
    2. 2. 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
    3. 3. Colorado Free UniversityColorado Free University 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?
    4. 4. Colorado Free UniversityColorado Free University 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.
    5. 5. 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 Colorado Free UniversityColorado Free University
    6. 6. Colorado Free UniversityColorado Free University 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: how to make this a better classhow to make this a better class
    7. 7. 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 … how to make this a better classhow to make this a better class Colorado Free UniversityColorado Free University
    8. 8. most importantly …most importantly … Make it fun!Make it fun! how to make this a better classhow to make this a better class Colorado Free UniversityColorado Free University
    9. 9. Colorado Free UniversityColorado Free University 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
    10. 10. Moving on …Moving on … Colorado Free UniversityColorado Free University
    11. 11. Colorado Free UniversityColorado Free University copyright © 2007 by m.wyllyamzcopyright © 2007 by m.wyllyamz
    12. 12. Colorado Free UniversityColorado Free University 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 <b>words go here</b> The importance of syntax Understanding different "flavors." eg: XHTML "Deprecated" tags And so what is an HTML editor? … http://www.w3schools.com
    13. 13. Colorado Free UniversityColorado Free University 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 …
    14. 14. Colorado Free UniversityColorado Free University 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!!!
    15. 15. Colorado Free UniversityColorado Free University 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
    16. 16. Colorado Free UniversityColorado Free University 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?
    17. 17. Colorado Free UniversityColorado Free University 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
    18. 18. Colorado Free UniversityColorado Free University 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
    19. 19. Colorado Free UniversityColorado Free University 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%."
    20. 20. Colorado Free UniversityColorado Free University 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?
    21. 21. Colorado Free UniversityColorado Free University 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
    22. 22. Colorado Free UniversityColorado Free University Essential formatting:Essential formatting: 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 <p> </p> (vs.) "Shift-enter" or <br> or <br /> Paragraph or "block-level" formatting is different than character-level formatting – Block-level formatting always applies to entire blocks of text within <p> Alignment, indents, bulleted & numbered lists Horizontal lines <hr> or <hr /> XHMTL Syntax
    23. 23. Colorado Free UniversityColorado Free University 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"
    24. 24. Colorado Free UniversityColorado Free University 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 understand if you are working with frames pages.
    25. 25. Colorado Free UniversityColorado Free University 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!
    26. 26. Colorado Free UniversityColorado Free University 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!
    27. 27. Colorado Free UniversityColorado Free University copyright © 2007 by m.wyllyamzcopyright © 2007 by m.wyllyamz
    28. 28. Colorado Free UniversityColorado Free University 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!
    29. 29. Colorado Free UniversityColorado Free University 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 …
    30. 30. Colorado Free UniversityColorado Free University 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
    31. 31. Colorado Free UniversityColorado Free University 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
    32. 32. Colorado Free UniversityColorado Free University 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
    33. 33. Colorado Free UniversityColorado Free University 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
    34. 34. Colorado Free UniversityColorado Free University 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?
    35. 35. Colorado Free UniversityColorado Free University 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
    36. 36. Colorado Free UniversityColorado Free University 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.
    37. 37. Colorado Free UniversityColorado Free University 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
    38. 38. Colorado Free UniversityColorado Free University 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
    39. 39. Colorado Free UniversityColorado Free University 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!
    40. 40. Colorado Free UniversityColorado Free University Applying predefined themesApplying predefined themes (pgs. 70-72)(pgs. 70-72)
    41. 41. Colorado Free UniversityColorado Free University 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)
    42. 42. Colorado Free UniversityColorado Free University 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"
    43. 43. Colorado Free UniversityColorado Free University Utilizing third partiesUtilizing third parties Blogging tools Message boards / forums Online photo sharing Scripts and additional functionalities
    44. 44. Colorado Free UniversityColorado Free University 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
    45. 45. Colorado Free UniversityColorado Free University What is "Web 2.0"?What is "Web 2.0"?
    46. 46. Colorado Free UniversityColorado Free University 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
    47. 47. Colorado Free UniversityColorado Free University

    ×