Introduction to Dreamweaver (2009)

  • 1,090 views
Uploaded on

 

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,090
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
14
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • 3/11 i think i finally figured out how to do the templates properly in mx 2004. when you create the template, DO NOT update links. That way the references don’t change to match the .dwt file inside the templates folder. But maybe you just want to do the class without the templates? what does it matter? Or maybe you should do intro class with "simple templates" and the level 2 class with "true templates." ADD (to) PPT SLIDES: Print design vs. web design Flash text and flash buttons Acronyms page Section 508 compliance: http://en.wikipedia.org/wiki/Section_508 *more* ADVANCED TOPICS not to cover in class, but to mention Web photo album feature How to create breadcrumbs? How to create a "bookmark icon" or "favicon" http://www.htmlgoodies.com/tutorials/web_graphics/article.php/3479911 http://www.webdevelopersjournal.com/articles/favicon.html http://photomatt.net/2003/11/13/how-to-create-a-favicon/ MORE? … Tag inspector/selector Behaviors, snippets, breadcrumbs "layout mode"
  • An html editor is two things: A page editor. A site (file) management program.
  • In this step, the web designer would diagram a work-flow or story board for the website. new dreamweaver site: dreamweaver liberty experiments use advanced tab 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. Show here how you can expand the files view to include both local and remote views. Before you close the files panel, you should demonstrate "putting and getting" very briefly.
  • 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.
  • 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 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 heading tag 2 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. 4) Add special characters to the page: TM and © look at the code: formatting, font, size, color note how dreamweaver writes text formatting as CSS styles instead of old-school tags
  • 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. 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. modify hyperlink colors add a background color you can add a background image later, when you do the more complex tables page.
  • 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 take a look at the hyperlinks in the code Document-relative paths Document-relative paths are the most appropriate paths to use for local links in most websites. They’re particularly useful when the current document and the linked document are in the same folder and are likely to remain together. The basic idea of document-relative paths is to omit the part of the absolute URL that is the same for both the current document and the linked document, providing only the portion of the path that differs. Site root-relative paths Site root-relative paths provide the path from the site’s root folder to a document. If you are not familiar with this type of path, you may want to stick to document-relative paths. A site root-relative path begins with a leading forward slash, which stands for the site root folder. For example, /support/tips.html is a site root-relative path to a file (tips.html) in the support subfolder of the site’s root folder. A site root-relative path often provides the best way to specify links in a website in which you need to frequently move HTML files from one folder to another. When you move a document that contains root-relative links, you don’t need to change the links; for example, if your HTML files use root-relative links for dependent files (such as images), then if you move an HTML file, its dependent-file links are still valid.
  • 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 Rez preview commands in Dreamweaver cannot be utilized if the window is maximized! NOTES: It would be nice to have a slide that has the illustrations I normally draw on the board.
  • 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 Rez preview commands in Dreamweaver cannot be utilized if the window is maximized! http://justaddwater.dk/2006/08/17/design-for-browser-size-not-screen-size/ http://www.456bereastreet.com/archive/200611/resolution_vs_browser_size_vs_fixed_or_adaptive_width/ http://www.cameronmoll.com/archives/001220.html http://marylandmedia.com/2006/08/800x600-should-i-really-care/ http://konigi.com/notebook/960-grid-system
  • Talk about combinations of relative and absolute tables (or) “ Variable fixed width layout” Real-world examples follow on the next page Rez preview commands in Dreamweaver cannot be utilized if the window is maximized!
  • It may be a quirk of mx 2004 that the "rigid" text body column is not rigid? But this does seem to work in dreamweaver 8 due to automatic spacer .gif insertion. 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 Add an appropriate subhead at the beginning of the paragraph before the lorem ipsum text: Freedom & Liberty in the 21 st Century 4) deciding on a color scheme for the page: REVIEW THE NEXT 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. set appropriate hyperlink colors. Record this #. here you are going to also change the font for the entire page to sans serif. 7) Add a flash-text header to the center column of the parent table, with appropriate roll-over color. Set link to index.htm to use as additional home link: LibertyIssues.org: a non-profit education & lobbying group 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 two simple images for the page. FOLLOW NOTES FOR SLIDE ON INSERTING IMAGES 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. should these links be document-relative or site relative to avoid problems in mx2004? 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 dreamweaver will not allow you to paste in images? AND drag and drop from a web page will create a "leached" image 4) Experiment with picture toolbars - crop, brightness/contrast, sharpen permanently alter the image in the web - resample the image* 5) Add alt text and a border to an image 6) Add a hyperlink to an image this can be a (redundant) link back to the home (index.htm) page 7) Add a second image: Experiment with v space and h space? Experiment with "align" (text wrap) through the use of surrounding text RETURN TO THE SLIDE ON BUILDING A TABLE image editing features in dreamweaver 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 in Dreamweaver, 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.
  • No longer use templates in the intro class. Wait for the “advanced” class.
  • Create a very basic frameset simply to illustrate how they work.
  • 1) have students test their pages at different resolutions. 2) Before publishing to the fake web server, have students move the historical documents to the root folder and delete the historical_documents folder. This will make it easier for those who want to email the web to themselves. Besides having students publish their web to the fake web server, you could also demonstrate interaction with your own server: ftp.mouselink.biz mouselink@mouselink.biz

Transcript

  • 1. Macromedia DreamweaverMacromedia Dreamweaver MX 2004 www.freeu.com www.compuskills.com your instructor: matthew wyllyamz m.wyllyamz@gmail.com
  • 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. 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, Dreamweaver, and HTML?Dreamweaver, 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. quick introductionsquick introductions matthew wyllyamz software instructor since 1993, with an emphasis on multimedia, graphics, and Internet development. have created courses for Jefferson County Adult Ed, CCU in Lakewood, Productivity Point, and the DOD (at Rocky Flats). taught Apple Macintosh classes exclusively for five years, and have been using the Internet since 1994. learned HTML circa 1996. used MS FrontPage exclusively for 10 years. recently converted to Macromedia Dreamweaver and Flash for web development. corporate webmaster for two years ('97-'99), blogmaster for seven years. ('99-'05) TODAY: independent contractor, technical & creative consultant, artist, amateur photographer, and author. BA in English writing, and have sold three books. Colorado Free UniversityColorado Free University
  • 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. 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 the screen, 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. 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 Dreamweaver 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 Dreamweaver user. most importantly …most importantly … how to make this a better classhow to make this a better class Colorado Free UniversityColorado Free University
  • 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. Colorado Free UniversityColorado Free University menu of possible class topicsmenu of possible class topics 1st day web page essentials An introduction to HTML Site design vs. page design Underlying website structure Site management Creating new web objects Application window overview Different views & previews What exactly is a "web browser"? Essential formatting: words, paragraphs, pages Aspects of hyperlinks Web server addressing 2nd day more sophisticated designs How monitor size & screen rez affect web design Using tables to format pages How background images work Different image formats Understanding web graphics Utilizing templates Frames pages? Publishing your web What you need for a site Summary of best SEO techniques Conclusions … … and a word about your book
  • 10. Moving on …Moving on … Colorado Free UniversityColorado Free University
  • 11. Colorado Free UniversityColorado Free University copyright © 2007 by m.wyllyamzcopyright © 2007 by m.wyllyamz
  • 12. Colorado Free UniversityColorado Free University An introduction to HTMLAn introduction to HTML (pages 44-45, 48-53) 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 XHMTL Syntax
  • 13. Colorado Free UniversityColorado Free University Site managementSite management (pages 20-21) To work on a site, you should create a local copy. Defining local and remote sites (246-247) Utilization of the files panel (pg. 241) Publishing your site, or … "Putting" and "getting" (250-255)
  • 14. Colorado Free UniversityColorado Free University Creating new web objectsCreating new web objects Creating new web structures is easy. (page 22) Organizing your site with folders (244-245) 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? (pages, folders, etc.)
  • 15. 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 – Defining the objectives of the site: audience, purpose, image … – Diagramming work flow – Storyboarding page designs To safely work on a site, you should create a local copy.
  • 16. 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" (page 25) The importance of managing files from within the site management application!!!
  • 17. Colorado Free UniversityColorado Free University An overview of the application windowAn overview of the application window (page 12) Primary toolbars, buttons, menus, and panels – Everything customizable (pg. 30) – Remember your visual clues The multi-talented "insert bar" The context-sensitive "properties inspector" (32-33) Panels: files, assets, history, CSS, etc (36-37) Don’t forget about the Help system! (16-17)
  • 18. Colorado Free UniversityColorado Free University Understanding different viewsUnderstanding different views Utilizing site or folder views Design vs. Code vs. Split … (pages 31, 46-47) Previewing your pages in different web browsers (pg. 26, 242-243) – You are going to want to preview your pages constantly: F12 – Predefining your preview browsers (pg. 27) – Prefer the "Temporary File Option" to avoid having to save before each and every preview.
  • 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. Colorado Free UniversityColorado Free University Today the two most popular browsers for the WWW are: MS Internet Explorer (60%) Mozilla Firefox (30%) Current and updated browser statistics Which browsers should you test your pages in?Which browsers should you test your pages in?
  • 21. Colorado Free UniversityColorado Free University Essential formatting:Essential formatting: Basic character-level formatting – Bold, italic, underline, etc. … – "Font combination groups" for web design (pages 33, 70-71) Changing the entire page vs. altering individual text selections – Size: relative vs. absolute definitions (pg. 72) (Prefer pixels [px] as the measurement of choice for web dev.) – Heading (format) tags do more than effect size, but also designate the *importance* of the content. (60-61) – Understanding the "web-safe" color palette's 216 colors and their hexadecimal codes (pg. 75) Adding special characters (68-69) – Non-breaking spaces: Ctrl Shift spacebar Using HTML Heading Tags words, paragraphs, and pages
  • 22. Colorado Free UniversityColorado Free University Essential formatting:Essential formatting: Importing content from other documents or applications (pages 76-77) – Beware of unexpected results … Two different kinds of line breaks (62-64) – "Enter" or <p> </p> (vs.) "Shift-enter" or <br> or <br /> Paragraph or "block-level" formatting is different than character-level formatting (65-67) – Block-level formatting always applies to entire blocks of text within <p> Alignment, indents, bulleted & numbered lists Horizontal lines <hr> or <hr /> words, paragraphs, and pages
  • 23. Colorado Free UniversityColorado Free University Essential formatting:Essential formatting: The page title, different than the file name (page 23) 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" (54-55) Keep revisiting your page properties. (74-75) words, paragraphs, and pages
  • 24. Colorado Free UniversityColorado Free University Essential formatting:Essential formatting: Modifying hyperlink colors (pages 124-125) Defining the background – Background color vs. background image (pg. 96) – Keep readability as your primary concern – More advanced background options exist when using CSS – 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. words, paragraphs, and pages
  • 25. Colorado Free UniversityColorado Free University Aspects of hyperlinksAspects of hyperlinks (pages 108- 111) A hyperlink has two parts – Its form: text or image (112-113), Its coding: address & optional target – The wording of your links is important. Several different methods of inserting links (pg. 120) – Properties inspector, insert bar/menu, right-click, and … – The "point to file" icon Understanding absolute & relative paths – Absolute paths: http://www.macromedia.com/support/dreamweaver/contents.html – Document-relative paths: dreamweaver/contents.html – Site-root relative paths: /support/dreamweaver/contents.html Specifying targets for onsite and offsite links (pg. 121) "Jump" links, aka: "bookmark" or "anchor" links (114-115) Email links (34, 122) Image maps or "hotspots" (118-119) Always test your links! (pg. 123)
  • 26. Colorado Free UniversityColorado Free University Understanding web server addressing:Understanding web server addressing: Addressing appears in the HTML code for: links, images, and other embedded content. Absolute vs. relative addresses Understanding paths The whole / and ../ thing Let the application do the addressing for you! hyperlinks, images, and other content
  • 27. Colorado Free UniversityColorado Free University copyright © 2007 by m.wyllyamzcopyright © 2007 by m.wyllyamz
  • 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: – Understanding "relative" vs. "absolute" size definitions – Rigid designs vs. flexible designs (and combinations) – Left-justified designs vs. centered designs – Using images to prevent collapsing columns Utilizing Dreamweaver's resolution preview commands Test your pages everywhere you possibly can!
  • 29. Colorado Free UniversityColorado Free University http://www.alltm.org column at nearly 100% of window, looks more amateur, body text more difficult to read. 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. There are varying design methods you can use to your advantage, but realize that each may have 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. 1024px1024px 768px768px 60%60% 800px800px 600px600px 20%20% 640px640px 480px480px < 1%< 1% How monitor size & screen resolution affect web designHow monitor size & screen resolution affect web design Rigid, left-justified designsRigid, left-justified designs higherhigher 20%20% Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce non ipsum quis magna faucibus dictum. Etiam ac tellus ut velit lacinia porttitor. Curabitur in lectus consequat mauris lacinia sollicitudin. Nulla facilisi. Pellentesque tellus felis, ullamcorper et, tincidunt eu, aliquet sit amet, pede. Nulla pede elit, volutpat eu, eleifend varius, facilisis vel, est. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut mollis dapibus sem. Sed nulla neque, hendrerit sed, pulvinar a, mollis vitae, nunc. Duis egestas, neque ut lacinia bibendum, nisi lacus cursus massa, a facilisis risus mauris in mauris. Sed consectetuer, arcu eu malesuada scelerisque, velit massa nonummy lectus, eu malesuada enim massa a erat. Aenean condimentum. Sed lectus. Maecenas dignissim elit sit amet dolor. Vestibulum ornare nibh eget lectus. Aliquam ligula. Nunc sollicitudin sem vel quam. Duis sit amet quam sed leo faucibus venenatis. Aliquam condimentum magna in massa. Vivamus posuere lorem nec leo. Morbi suscipit luctus tellus. Aliquam erat volutpat. Aenean eleifend erat id nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent non quam a quam nonummy aliquam. Aliquam sollicitudin aliquet nibh. Maecenas metus felis, consectetuer eget, pellentesque sit amet, rhoncus quis, diam. Aenean feugiat. Vestibulum sed est. Donec est nisl, bibendum ut, porttitor sed, eleifend sit amet, dui. Nulla arcu dolor, tristique in, commodo in, vehicula eget, tellus. Donec ullamcorper tellus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras interdum dolor ac arcu. Vivamus sit amet diam et pede eleifend dignissim. Nullam placerat, nunc ac iaculis consequat, turpis nisl egestas turpis, id tristique odio massa eu leo. Aliquam nonummy, libero ac ornare blandit, lacus elit luctus arcu, nec hendrerit lacus erat quis purus. Vestibulum velit leo, nonummy luctus, consectetuer vel, aliquet a, enim. Vestibulum vel est sit amet lacus tempus iaculis. Nunc aliquet lectus eu tortor. Nulla eget est nec velit euismod egestas. Donec leo urna, pellentesque quis, ultricies et, malesuada tincidunt, purus. Ut dui. Vivamus vestibulum, augue auctor condimentum mattis, turpis pede suscipit tortor, quis ornare tellus nibh ac tellus. Quisque egestas semper sem. Nulla facilisi. Donec nunc. Cras a urna sit amet libero mollis suscipit. Phasellus porta ipsum id urna. Cras pharetra ipsum ut arcu. Aenean eu erat. esque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent non quam a quam nonummy aliquamesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent non quam a quam nonummy Naviganda Meno una Meno duo Meno treo Meno katra Meno penta Flexible "white space" or optional content Two columns = 760px Rigid table set to 955px wide Rigid column 220px Rigid column 540px Optional content rigid 195px .GIF 190px .JPG 540px http://www.abos-littleton.com simple, small, rigid, left-justified design, even works in 640x480.
  • 31. 1024px1024px 768px768px 60%60% How monitor size & screen resolution affect web designHow monitor size & screen resolution affect web design Flexible, centered designsFlexible, centered designs 800px800px 600px600px 20%20% Naviganda Meno una Meno duo Meno treo Meno katra Meno penta Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce non ipsum quis magna faucibus dictum. Etiam ac tellus ut velit lacinia porttitor. Curabitur in lectus consequat mauris lacinia sollicitudin. Nulla facilisi. Pellentesque tellus felis, ullamcorper et, tincidunt eu, aliquet sit amet, pede. Nulla pede elit, volutpat eu, eleifend varius, facilisis vel, est. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut mollis dapibus sem. Sed nulla neque, hendrerit sed, pulvinar a, mollis vitae, nunc. Duis egestas, neque ut lacinia bibendum, nisi lacus cursus massa, a facilisis risus mauris in mauris. Sed consectetuer, arcu eu malesuada scelerisque, velit massa nonummy lectus, eu malesuada enim massa a erat. Aenean condimentum. Sed lectus. Maecenas dignissim elit sit amet dolor. Vestibulum ornare nibh eget lectus. Aliquam ligula. Nunc sollicitudin sem vel quam. Duis sit amet quam sed leo faucibus venenatis. Aliquam condimentum magna in massa. Vivamus posuere lorem nec leo. Morbi suscipit luctus tellus. Aliquam erat volutpat. Aenean eleifend erat id nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent non quam a quam nonummy aliquam. Aliquam sollicitudin aliquet nibh. Maecenas metus felis, consectetuer eget, pellentesque sit amet, rhoncus quis, diam. Aenean feugiat. Vestibulum sed est. Donec est nisl, bibendum ut, porttitor sed, eleifend sit amet, dui. Nulla arcu dolor, tristique in, commodo in, vehicula eget, tellus. Donec ullamcorper tellus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras interdum dolor ac arcu. Vivamus sit amet diam et pede eleifend dignissim. Nullam placerat, nunc ac iaculis consequat, turpis nisl egestas turpis, id tristique odio massa eu leo. Aliquam nonummy, libero ac ornare blandit, lacus elit luctus arcu, nec hendrerit lacus erat quis purus. Vestibulum velit leo, nonummy luctus, consectetuer vel, aliquet a, enim. Vestibulum vel est sit amet lacus tempus iaculis. Nunc aliquet lectus eu tortor. Nulla eget est nec velit euismod egestas. Donec leo urna, pellentesque quis, ultricies et, malesuada tincidunt, purus. Ut dui. Vivamus vestibulum, augue auctor condimentum mattis, turpis pede suscipit tortor, quis ornare tellus nibh ac tellus. Quisque egestas semper sem. Nulla facilisi. Donec nunc. Cras a urna sit amet libero mollis suscipit. Phasellus porta ipsum id urna. Cras pharetra ipsum ut arcu. Aenean eu erat. esque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent non quam a quam nonummy aliquamesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent non quam a quam nonummy .GIF 190px .JPG 540px Rigid column 540pxRigid column 220px Two columns = 760px http://www.lacitybeat.com centered rigid columns with flexible "white space" side bars, optimized for 800x600 and 1024x768, but "fails gracefully" in 640x480. FlexibleFlexible column:column: whitewhite spacespace 15%15% FlexibleFlexible column:column: whitewhite spacespace 15%15% Flexible table set to 100% wide
  • 32. Colorado Free UniversityColorado Free University Using tables to format pages & columns This technique separates the amateurs from the more advanced web page layout artists. (pages 128-137) Tables are a key element of HTML page design. –Divisions/layers are an alternative, but with older browsers, the results may be unpredictable. Methods of creating tables Making selections within a table Inserting/deleting rows/columns (138-139) Merging and splitting cells (140-141) Relative vs. absolute size definitions Table and cell properties (142-143) Nesting tables within tables Understanding invisible spacer images (pg. 149)
  • 33. Colorado Free UniversityColorado Free University Understanding more about background imagesUnderstanding more about background images (pages 94-96) 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. (pg. 95) 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
  • 34. Colorado Free UniversityColorado Free University Different image formats and their usesDifferent image formats and their uses (page 81) 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? (pg. 83) – For all files loading on a single page: Dial-up: 50k Broadband: 100k – The closer a page is to the top of your site, the faster it should be.
  • 35. Colorado Free UniversityColorado Free University Inserting images and understanding graphicsInserting images and understanding graphics (pages 80-81) 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 – Basic image editing within the app (86-89) – "Alt text" and "accessibility" (pg. 97) Prefer to use "camera-ready" images. (87, 89) Understanding text wrap and alignment (82-83, 92-93) Placeholders, borders, and image margins
  • 36. Colorado Free UniversityColorado Free University Utilizing templatesUtilizing templates (page 186) The difference between simple templates & true templates Creating a template (196-197) Adding and/or removing editable regions (198-199) Creating pages from your template (200-201) Editing the template, updating the site (202-203)
  • 37. Colorado Free UniversityColorado Free University Working with frames pagesWorking with frames pages Should you use frames? Frames can be a very good idea when working with third-party content holders. Each frame is an individual HTML page. A frameset is contained within a master frames page. (page 152) This master frames page … – includes title and meta data – defines the properties of the frameset Creating, saving, and editing framesets (153-157, 162-163) Relative vs. absolute size definitions also apply here. Frame properties (158-159, 163, 166-169) Adding content to frames, including off-site pages (160-161) Link targets and frames (164-165) Web Style Guide: Frames To Frame or Not to Frame?
  • 38. 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
  • 39. Colorado Free UniversityColorado Free University Publishing your webPublishing your web (page 240) Importing pages and entire webs is possible. Working live or remotely vs. working locally – Backing up your site with this method – How to edit existing pages without ruining them Publishing your site, or … "Putting" and "getting" (250-253) – Connecting to the remote web server (248-249) – You can publish your site in any "direction." – Synchronizing local & remote sites (254-255)
  • 40. 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: google, etc.
  • 41. 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 "format headings" to highlight important text on the page. Use alt text tags in images. More recently updated pages get a better page rank. Register many (if not all) of your site's pages in as many places as you can. Register your site under multiple domain names. 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. Avoid any and all spamdexing.
  • 42. 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!