Macromedia Dreamweaver 8 2

1,085 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,085
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
19
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • CSU Cooperative Extension 06/07/09 Macromedia Dreamweaver 4 Look at HS website Look at famsite site (kidpix?) Look at template site
  • Macromedia Dreamweaver 8 2

    1. 1. Using Macromedia Dreamweaver MX/8 Webpage Editing and Design Software Jeff Wood Computer Applications Training Specialist Colorado State University Extension
    2. 2. Basic Concepts
    3. 3. What is Dreamweaver? <ul><li>WYSIWYG (What You See Is What You Get) Web page editor </li></ul><ul><li>Writes code for web pages </li></ul><ul><li>You select images, text, colors </li></ul><ul><li>Dreamweaver writes underlying code </li></ul><ul><li>Code is called HTML </li></ul><ul><li>Dreamweaver is a good way to learn HTML (split view between WYSIWYG and HTML) </li></ul>
    4. 4. What is HTML? <ul><li>Hyper Text Markup Language </li></ul><ul><li>Common language understood by all browsers </li></ul><ul><li>Translated differently by different browsers </li></ul><ul><li>View, Page source (Firefox) or Source (Internet Explorer) to see HTML coding </li></ul><ul><li>Dreamweaver has code view as well </li></ul>
    5. 5. HTML tags <ul><li>A tag is an attribute applied to text or an image </li></ul><ul><ul><li>Generally in pairs, opening <B> and closing </B> </li></ul></ul><ul><ul><li>Attribute is applied between tags </li></ul></ul><ul><li>Some tags can take on more modifications </li></ul><ul><ul><li><FONT FACE=”Courier” COLOR=”red” SIZE=”+2”></FONT> </li></ul></ul><ul><ul><li>Font will be courier, red, 2 sizes larger than normal </li></ul></ul><ul><li>O’Reilly reference (Window, Reference) will tell you about any tag you highlight </li></ul><ul><li>DW will highlight bad tags in yellow </li></ul>
    6. 6. Browsers <ul><li>DW allows quick preview of 2 browsers with F12 and Ctrl+F12 </li></ul><ul><li>Preview work in 2 or more browsers: </li></ul><ul><ul><li>IE (Internet Explorer) 7.x a MUST </li></ul></ul><ul><ul><ul><li>IE is 71% of market* </li></ul></ul></ul><ul><ul><li>Mozilla Firefox 2.x a MUST </li></ul></ul><ul><ul><ul><li>Built by Netscape Navigator </li></ul></ul></ul><ul><ul><ul><li>13% of market* </li></ul></ul></ul><ul><ul><li>Other browsers </li></ul></ul><ul><ul><ul><li>Netscape Navigator (4.7 in particular) </li></ul></ul></ul><ul><ul><ul><li>Google Desktop </li></ul></ul></ul><ul><ul><ul><li>Opera, Safari, </li></ul></ul></ul><ul><ul><ul><li>Keep earlier versions of IE, Firefox </li></ul></ul></ul><ul><ul><ul><ul><li>Rename the folder before upgrade </li></ul></ul></ul></ul>*Janco Assc., March 07
    7. 7. Browsers (con’t)
    8. 8. What is a web site? <ul><li>Collection of files and folders on a server computer </li></ul><ul><ul><li>Files are written in HTML </li></ul></ul><ul><ul><li>Server computer is the one people visit when they go to your site </li></ul></ul><ul><li>Two sites involved in building site: </li></ul><ul><ul><li>Local site - on your computer </li></ul></ul><ul><ul><li>Remote site - on a server </li></ul></ul><ul><li>Your computer talks to Remote server using FTP (File Transfer Protocol) </li></ul><ul><ul><li>Local site a mirror image of remote site </li></ul></ul>
    9. 9. Opening Dreamweaver <ul><li>Multiple windows and panels upon start-up </li></ul><ul><ul><li>Not as scary as it looks </li></ul></ul><ul><ul><li>Close what you don’t need </li></ul></ul><ul><li>Arrange it how you like it </li></ul><ul><li>Dreamweaver will remember last placement </li></ul>
    10. 10. Three main elements: <ul><li>Document window </li></ul><ul><ul><li>What the page looks like (and/or underlying code) </li></ul></ul><ul><li>Insert panel above </li></ul><ul><ul><li>Used to insert objects and properties </li></ul></ul><ul><li>Property inspector below </li></ul><ul><ul><li>PI inspects and changes properties of selected objects </li></ul></ul><ul><ul><li>The PI is your best friend! </li></ul></ul>
    11. 11. Document window <ul><li>Main Control center </li></ul><ul><li>WYSIWYG (What You See Is What You Get) </li></ul><ul><ul><li>Not truly WYSIWYG – dependent on user’s browser and user’s settings </li></ul></ul><ul><ul><ul><li>Window size might not be maximized </li></ul></ul></ul><ul><ul><ul><li>Monitor resolution varies </li></ul></ul></ul><ul><ul><ul><ul><li>640 x 480 (1%) </li></ul></ul></ul></ul><ul><ul><ul><ul><li>800 x 600 (29%) </li></ul></ul></ul></ul><ul><ul><ul><ul><li>1024 x 768 and higher (68%) </li></ul></ul></ul></ul><ul><ul><ul><li>Fonts will vary with user defaults </li></ul></ul></ul><ul><ul><ul><li>Colors will vary with OS, browser, monitor, user defaults </li></ul></ul></ul><ul><ul><ul><li>Graphics may be turned off, plug-ins may be missing </li></ul></ul></ul><ul><ul><ul><li>Different browsers translate HTML differently </li></ul></ul></ul>
    12. 12. Document window (con’t) <ul><li>The Document window: </li></ul><ul><ul><li>Title bar - file name and web page name </li></ul></ul><ul><ul><ul><li>* after filename = doc not saved </li></ul></ul></ul><ul><ul><li>Menu bar - all commands for the document window </li></ul></ul><ul><ul><li>Toolbar - buttons for common tasks </li></ul></ul><ul><ul><li>Document viewing area - where you add content (text, images, tables, links) </li></ul></ul><ul><ul><li>Status bar – tags, magnification, window size, dial-up speed </li></ul></ul>
    13. 13. Document window toolbar <ul><li>3 important buttons: </li></ul><ul><ul><li>Code view </li></ul></ul><ul><ul><li>Split view (code/design) </li></ul></ul><ul><ul><li>Design view </li></ul></ul><ul><li>Page title - lets you name or rename page </li></ul><ul><li>Target browsers </li></ul><ul><ul><li>“ Settings” allows you to check for unsupported tags in specific browsers </li></ul></ul><ul><ul><li>‘ Check browser support” shows potential problems </li></ul></ul><ul><li>Validate code (DW8 only) </li></ul><ul><ul><li>“ Settings” allows you to choose what type of doc </li></ul></ul>
    14. 14. Document window toolbar <ul><li>File management - lets you give/take files from web (better to do it from site window) </li></ul><ul><li>Preview - lets you see it in browser </li></ul><ul><ul><li>Set primary (F12) and secondary (Ctrl + F12) browsers here </li></ul></ul><ul><ul><li>Check your work often </li></ul></ul><ul><li>Refresh - updates page (F5) </li></ul><ul><li>View options & visual aids lets you set Document view options </li></ul><ul><ul><li>Word wrap, line numbers (code view) </li></ul></ul><ul><ul><li>Grids, rulers (design view) </li></ul></ul>
    15. 15. Bottom of Document window <ul><li>Tag selector - shows which tags are in play </li></ul><ul><ul><li>Can choose elements from here </li></ul></ul><ul><ul><li>VERY useful when working with tables </li></ul></ul><ul><li>Hand tool, magnification tool (DW8 only) </li></ul><ul><li>Magnification pulldown (DW8 only) </li></ul><ul><li>Window size </li></ul><ul><li>Download speed (25 second rule: under 25 seconds at 28.8 kbps) </li></ul><ul><ul><li>Click the little pull-down arrow to the right of window size, then “Edit Size” to change either </li></ul></ul>
    16. 16. Objects panel <ul><li>Turn on/off in window menu </li></ul><ul><li>Use pulldown to change categories - common is most useful </li></ul><ul><ul><li>Common - most-used commands </li></ul></ul><ul><ul><li>Forms - for creating forms </li></ul></ul><ul><ul><li>Text - inserts special characters and applies headings and lists </li></ul></ul><ul><ul><li>Layout – Standard tables vs. layout tables </li></ul></ul><ul><ul><li>Html – horizontal rules, headings, frames, etc. </li></ul></ul>
    17. 17. Common elements: <ul><li>Link – adds hyperlink (easier to use PI) </li></ul><ul><li>Email link – adds email link </li></ul><ul><ul><li>Mailto:emailaddress in PI another solution </li></ul></ul><ul><li>Named anchor – for links within a page </li></ul><ul><ul><li>One long page strategy </li></ul></ul><ul><li>Tables - easy table layout tool </li></ul><ul><ul><li>Coding tables by hand is HARD </li></ul></ul><ul><li>Images pulldown </li></ul><ul><ul><li>Pulldown for Placeholders, Rollover images, Navigation bars, hotspot drawing tools </li></ul></ul>
    18. 18. Common elements (con’t) <ul><li>Media </li></ul><ul><ul><li>Flash buttons and Flash text easy way to create slick buttons and text with rollover and click behaviors </li></ul></ul><ul><ul><li>Downside – requires Flash </li></ul></ul><ul><li>Date – Inserts date </li></ul><ul><ul><li>Option to “automatically update date on save” keeps you honest about “last updated” info </li></ul></ul><ul><li>Server side include (DW8 only) </li></ul><ul><ul><li>CSUCE Header and Footer good example </li></ul></ul><ul><ul><li>In MX, SSI is in HTML category of insert panel </li></ul></ul><ul><li>Comments </li></ul><ul><ul><li>Comments in the code that don’t show up on the page </li></ul></ul>
    19. 19. Property Inspector <ul><li>Turn on/off in window menu </li></ul><ul><li>The PI is your best friend! </li></ul><ul><li>Will change, depending on what you’re doing </li></ul><ul><li>Default is for text properties </li></ul><ul><ul><li>Select text to format text </li></ul></ul><ul><ul><li>Select an image to format image </li></ul></ul><ul><ul><li>Select a link to format link </li></ul></ul><ul><ul><li>Select a table to format table </li></ul></ul>
    20. 20. Setting up a local site <ul><li>Set up pages on your computer the same way they’ll be set up on the web server </li></ul><ul><ul><li>Remote site = local site </li></ul></ul><ul><li>Figure out where to put your files </li></ul><ul><ul><li>All pictures in one place (images folder) </li></ul></ul><ul><ul><li>All documents in one place (docs folder) </li></ul></ul><ul><ul><ul><li>Divide by year (docs_06) or subject (4h_docs) or both (4h_docs_06) </li></ul></ul></ul><ul><ul><li>Most pages needs own folder </li></ul></ul><ul><ul><li>Logical flow to pages, logical flow to files and folders </li></ul></ul><ul><ul><li>Pencil and paper is best way to start </li></ul></ul>
    21. 21. Sample site structure Hometown Security Awareness Community Mobilization Skill Development Remember the 3 click rule: all info within three clicks of home page Documents and links Documents and links Documents and links Eval Eval form
    22. 22. Sample directory structure Hometown Security – root folder – contains index.(s)html (home page) and ALL OTHER FOLDERS Awareness – contains awa.html Community – contains com.html Skill – contains ski.html Docs – contains all documents Eval – contains eva.html Images – contains all .jpgs & .gifs
    23. 23. Directory structure <ul><li>Folders in DWeaver site window </li></ul>
    24. 24. Setting local information <ul><li>Site menu, New Site, Advanced tab, Local info </li></ul><ul><li>Site name (for your use only) </li></ul><ul><li>Define root folder </li></ul><ul><ul><li>Root folder is the starting place </li></ul></ul><ul><ul><ul><li>EVERYTHING on your site must be inside this folder </li></ul></ul></ul><ul><ul><ul><li>Your home page is a file in this folder (NOT in a folder inside this folder) </li></ul></ul></ul><ul><ul><ul><li>Browse to it using folder icon (or create one) </li></ul></ul></ul>
    25. 25. Setting local information (con’t) <ul><li>Default images folder </li></ul><ul><ul><li>Not available in DWeaver 4 </li></ul></ul><ul><ul><li>DWeaver does image file management for you </li></ul></ul><ul><ul><li>Either browse to “images” folder or create one </li></ul></ul><ul><ul><li>All .jpegs and .gifs are automatically copied into this folder </li></ul></ul><ul><li>Link checker useful to check on broken links or “orphaned” links within the site </li></ul><ul><ul><li>Use complete URL </li></ul></ul><ul><li>Enable cache – “yes” </li></ul>
    26. 26. Setting remote information <ul><li>Remote info you will need: </li></ul><ul><ul><li>Ftp host – (e.g. - yuma.acns.colostate.edu) </li></ul></ul><ul><ul><li>Host directory (WWW/) </li></ul></ul><ul><ul><li>Login – your unique login </li></ul></ul><ul><ul><li>Password – your unique login </li></ul></ul><ul><ul><li>If you choose “Save” you will forget your password, so… </li></ul></ul><ul><li>When you get email from ACNS – save a paper copy, not just the email! </li></ul>
    27. 27. The home page <ul><li>Prefix: index or default </li></ul><ul><li>Extension: htm, html </li></ul><ul><ul><li>Many exceptions </li></ul></ul><ul><ul><ul><li>.shtm or .shtml means interaction w/server needed </li></ul></ul></ul><ul><ul><ul><li>.xhtml is stricter, cleaner version of html </li></ul></ul></ul><ul><ul><ul><li>.asp, .cfm for dynamic pages </li></ul></ul></ul><ul><li>File, New, Basic, then… </li></ul><ul><li>Save As… </li></ul><ul><ul><li>Index.htm </li></ul></ul>
    28. 28. The site window <ul><li>Site menu, Site files or F8 </li></ul><ul><li>Files and folders show up on right </li></ul><ul><li>Use “Expand” icon to see local and remote simultaneously </li></ul><ul><ul><li>One side is local site, other side is remote </li></ul></ul><ul><ul><li>Shows directory structure of both sites </li></ul></ul><ul><li>Do file management (adding, moving, renaming, deleting) here </li></ul><ul><ul><li>Dreamweaver will track most changes </li></ul></ul><ul><ul><li>Always test to make sure </li></ul></ul>
    29. 29. connect refresh get files put files Remote site Local site
    30. 30. Creating content
    31. 31. User defaults <ul><li>Unlike print media, user sets own defaults </li></ul><ul><ul><li>Fonts and font sizes you specify may not be used </li></ul></ul><ul><ul><ul><li>Times New Roman, 12 point is default </li></ul></ul></ul><ul><ul><li>Resolution may differ </li></ul></ul><ul><ul><ul><ul><li>640 x 480 (1%) </li></ul></ul></ul></ul><ul><ul><ul><ul><li>800 x 600 (29%) </li></ul></ul></ul></ul><ul><ul><ul><ul><li>1024 x 768 and higher (68%) </li></ul></ul></ul></ul><ul><ul><li>Graphics, media may be turned off </li></ul></ul><ul><ul><li>Colors vary with monitor, operating system, browser </li></ul></ul><ul><li>Design with these limitations in mind </li></ul><ul><ul><li>800 x 600 </li></ul></ul><ul><ul><li>56 kbps </li></ul></ul><ul><ul><li>Common fonts (Verdana, Times New Roman) </li></ul></ul><ul><ul><li>Web safe colors </li></ul></ul>
    32. 32. Title, description, keywords <ul><li>Add title using doc window toolbar </li></ul><ul><li>Add description and keywords using “Head” in Html category of Insert panel </li></ul><ul><ul><li>Be concise, accurate, inclusive </li></ul></ul><ul><ul><li>Keep it under 50 words </li></ul></ul><ul><ul><li>Use commas to separate keywords </li></ul></ul><ul><ul><li>To add content after the fact, often easier to do it in the code </li></ul></ul>
    33. 33. Text <ul><li>Just start typing, or cut and paste </li></ul><ul><li>Enter = paragraph break (2 lines) </li></ul><ul><li>Enter + shift = line break (1 line) </li></ul><ul><li>Property inspector default is text </li></ul><ul><ul><li>Drop downs to change format, fonts, sizes, colors </li></ul></ul><ul><ul><li>Buttons for attributes, alignment, bulleting, indents </li></ul></ul><ul><li>Writing style for the web: short words, short sentences, short paragraphs </li></ul>
    34. 34. Setting Page Properties <ul><li>Modify> Page properties </li></ul><ul><li>Appearance: </li></ul><ul><ul><li>Set base font, size, color </li></ul></ul><ul><ul><li>Background color or image </li></ul></ul><ul><ul><ul><li>For readability, light background, dark text </li></ul></ul></ul><ul><ul><ul><li>Background images - be careful not to overwhelm text </li></ul></ul></ul><ul><ul><ul><li>You can use a table with solid color for text on top of mage </li></ul></ul></ul><ul><ul><li>Repeat tells DWeaver how to tile background (DW8 only) </li></ul></ul><ul><ul><ul><li>X is vertical, Y is horizontal </li></ul></ul></ul><ul><ul><li>Set margins in pixels </li></ul></ul>
    35. 35. Setting Page Properties (con’t) <ul><li>Links </li></ul><ul><ul><li>Visited, rollover, active colors </li></ul></ul><ul><ul><ul><li>Left blank, they will take on default colors </li></ul></ul></ul><ul><ul><ul><li>You can sample colors of graphics on page to choose colors </li></ul></ul></ul><ul><ul><li>Underline behaviors </li></ul></ul><ul><ul><ul><li>Underline best way to imply link to end user </li></ul></ul></ul><ul><li>Headings </li></ul><ul><ul><li>Set size and color of different headings </li></ul></ul><ul><ul><li>Use the Headings pulldown in PI to apply </li></ul></ul>
    36. 36. Images <ul><li>Images are punctuation, not content </li></ul><ul><ul><li>Insert, Image, or </li></ul></ul><ul><ul><li>Insert Image on the objects panel </li></ul></ul><ul><ul><li>Select image by browsing to it </li></ul></ul><ul><ul><li>Give all images an alt tag for text-to-speech browsers or browsers with image loading turned off </li></ul></ul><ul><ul><ul><li>DWeaver automatically prompts you to do it </li></ul></ul></ul><ul><li>Property inspector will change to allow image manipulation </li></ul>
    37. 37. Manipulating images <ul><li>Best done in outside image editor </li></ul><ul><ul><li>Photoshop is industry standard </li></ul></ul><ul><ul><ul><li>Powerful tool, fun to work with </li></ul></ul></ul><ul><ul><ul><li>Expensive ($170 at CSU Software Cellar) </li></ul></ul></ul><ul><ul><ul><li>Steep learning curve </li></ul></ul></ul><ul><ul><ul><li>I have LOTS of tutorials online and via CD </li></ul></ul></ul><ul><ul><li>Adobe Elements </li></ul></ul><ul><ul><ul><li>Basic, cheaper version of Photoshop ($79) </li></ul></ul></ul><ul><ul><li>You have some image software with your computer (MS PhotoEditor, Kodak Imaging for Windows) </li></ul></ul><ul><ul><li>Digital cameras come with basic imaging software </li></ul></ul>
    38. 38. Image size <ul><li>If you have no image editing software: </li></ul><ul><li>Adjust size using Width/Height boxes in PI or Click-and-drag sizing boxes </li></ul><ul><ul><li>Hold “shift” during drag to avoid stretching image </li></ul></ul><ul><ul><li>Numbers in Width and Height boxes will bold to indicate a changed value </li></ul></ul><ul><ul><li>Use “Reset size” button if you don’t like what you did </li></ul></ul>
    39. 39. Image alignment <ul><li>Align pulldown menu </li></ul><ul><ul><li>Baseline is default (aligns bottom of image with baseline of text or nearest object) </li></ul></ul><ul><ul><ul><li>Baseline = imaginary line under text or object </li></ul></ul></ul><ul><ul><li>Top, Bottom - aligns with top/bottom of nearest object </li></ul></ul><ul><ul><li>Left, right - aligns with margin (and wraps text!) </li></ul></ul><ul><ul><li>Middle - aligns with middle of text baseline </li></ul></ul><ul><ul><li>Text top - aligns with tallest character in nearest text </li></ul></ul><ul><ul><li>Absolute bottom – aligns bottom of image with lowest point in text ( j, g) </li></ul></ul><ul><ul><li>Absolute middle - aligns middle of image with middle of text </li></ul></ul>
    40. 40. Image size and alignment (con’t) <ul><li>Vspace, Hspace - # of pixels between object and surroundings </li></ul><ul><li>Alt tags - text in lieu of image - important to add </li></ul><ul><ul><li>Text-only browsers, image-off options, web phones </li></ul></ul><ul><ul><li>Screen tip text </li></ul></ul><ul><li>Border size - set number in pixels </li></ul><ul><li>Default color is black (must change color in HTML with hex code) </li></ul><ul><li>If it’s a link, border color is link color </li></ul>
    41. 41. Image types <ul><li>JPEG - </li></ul><ul><ul><li>supports lots of colors, longer to download, best for complex imagery </li></ul></ul><ul><ul><li>good for photos </li></ul></ul><ul><li>GIF - </li></ul><ul><ul><li>256 colors (any 256, not predetermined) </li></ul></ul><ul><ul><li>Easier to download, best for large areas of flat color </li></ul></ul><ul><ul><li>Good for cartoon-ish images </li></ul></ul><ul><li>PNG - </li></ul><ul><ul><li>new, captures complex pictures without large file sizes, not supported by all browsers </li></ul></ul>
    42. 42. Page loading tips for images <ul><li>Keep image files small </li></ul><ul><ul><li>Smallest physical size </li></ul></ul><ul><ul><li>Lowest usable quality </li></ul></ul><ul><li>Use alt tags </li></ul><ul><ul><li>Not necessary for small details (borders, bullets, etc) </li></ul></ul><ul><li>Use low source image as transitional image for large file-size images </li></ul><ul><ul><li>Type file name in “low src” text box (or use browse, or drag) </li></ul></ul><ul><li>Reuse images (only need one logo for all pages) </li></ul>
    43. 43. Links
    44. 44. Hyperlinks <ul><li>Links are paths to: </li></ul><ul><ul><li>Your own pages </li></ul></ul><ul><ul><li>Pages on other websites </li></ul></ul><ul><ul><li>Different parts of same page </li></ul></ul><ul><ul><li>Email addresses </li></ul></ul><ul><ul><li>Documents for download </li></ul></ul><ul><li>Can be text or images </li></ul><ul><ul><li>Linked text is usually underlined </li></ul></ul><ul><ul><li>Linked images, or hotspots within images </li></ul></ul>
    45. 45. Pathnames <ul><li>Relative pathnames are for in-site links </li></ul><ul><li>Two types </li></ul><ul><ul><li>Document-relative pathnames </li></ul></ul><ul><ul><ul><li>Address of page or doc within your site </li></ul></ul></ul><ul><ul><ul><li>Path from current page </li></ul></ul></ul><ul><ul><li>Site-root-relative path names </li></ul></ul><ul><ul><ul><li>Address of page or doc within your site </li></ul></ul></ul><ul><ul><ul><li>Path from root directory </li></ul></ul></ul><ul><li>Document-relative is safest bet </li></ul>
    46. 46. Pathnames (con’t) <ul><li>Two more types of paths: </li></ul><ul><ul><li>Absolute pathnames </li></ul></ul><ul><ul><ul><li>For pages not within your own site </li></ul></ul></ul><ul><ul><ul><li>Full address of another website (http://www.ext.colostate.edu/) </li></ul></ul></ul><ul><ul><li>Named anchors </li></ul></ul><ul><ul><ul><li>Links to different spot on same page </li></ul></ul></ul><ul><ul><ul><li>Can create website of one long page - links to different spots on same page from top </li></ul></ul></ul>
    47. 47. Creating Text Links <ul><li>Highlight text </li></ul><ul><li>Pull up Property Inspector </li></ul><ul><li>In link box, browse, type or paste new link </li></ul><ul><ul><li>Copy-and-paste from browser will insure you don’t misspell it </li></ul></ul><ul><ul><li>Link box will also pull down recently used links </li></ul></ul><ul><li>Click somewhere outside of link box </li></ul>
    48. 48. Creating image links <ul><li>Buttons, arrows, logos, or pictures </li></ul><ul><li>Select the image </li></ul><ul><li>Pull up Property Inspector </li></ul><ul><li>In link box, browse, type or paste new link </li></ul><ul><li>Link box will also pull down recently used links </li></ul>
    49. 49. Hotspots within an image <ul><li>For creating a link in section of image </li></ul><ul><ul><li>Select image </li></ul></ul><ul><ul><li>Select drawing tool (rectangle, oval, irregular) in PI to draw hotspot </li></ul></ul><ul><ul><li>Type in link </li></ul></ul><ul><li>Best for multiple links from one image </li></ul><ul><ul><li>Good way to design navbar </li></ul></ul><ul><ul><li>Create hotspots within maps, group photos </li></ul></ul>
    50. 50. Linking to an E-mail address <ul><li>Highlight text </li></ul><ul><ul><li>Use email icon, or </li></ul></ul><ul><ul><li>Document, Insert, Email link </li></ul></ul><ul><ul><li>Dialog box will appear </li></ul></ul><ul><ul><ul><li>Text - what site will say (highlighted text) </li></ul></ul></ul><ul><ul><ul><li>Email - Actual email address </li></ul></ul></ul><ul><ul><ul><li>If highlighed text is actual email address, just click OK </li></ul></ul></ul><ul><li>Default email program of user computer will be used </li></ul><ul><li>Alternate mailbox for these responses only may be helpful </li></ul><ul><li>mailto:email@address in link box another option </li></ul>
    51. 51. Adding CC’s and Subject lines <ul><li>Needs to be done in the code </li></ul><ul><li>Add within quotes, no space </li></ul><ul><li>Find “ mailto:Nancy.Banman@ColoState.edu ” </li></ul><ul><li>For CC: </li></ul><ul><ul><li>Add ?cc=jeffrey.wood@colostate.edu </li></ul></ul><ul><li>For subject: </li></ul><ul><ul><li>Add &Subject=website </li></ul></ul><ul><li>Result: </li></ul><ul><ul><li>mailto:Nancy.Banman@ColoState.edu?cc=jeffrey.wood@colostate.edu&Subject=website </li></ul></ul>
    52. 52. Linking to spots within same page <ul><li>The “One long page” strategy </li></ul><ul><li>Table of contents or alphabet at top </li></ul><ul><ul><li>Links to rest of document </li></ul></ul><ul><ul><li>FAQ’s are commonly done this way </li></ul></ul><ul><ul><li>Alphabetical lists </li></ul></ul><ul><li>Top or bottom of document links also helpful </li></ul><ul><li>Two parts: </li></ul><ul><ul><li>Place where you want to go (Named anchor) </li></ul></ul><ul><ul><li>Link to get there </li></ul></ul>
    53. 53. Linking to spots within same page (con’t) <ul><li>Put cursor in the place on page you want to go </li></ul><ul><ul><li>Click Anchor icon, or </li></ul></ul><ul><ul><li>Insert, Named Anchor </li></ul></ul><ul><li>Name it one word, no spaces, easy to remember </li></ul><ul><ul><li>Anchor icon will appear </li></ul></ul><ul><li>Highlight or select the linked text or image </li></ul><ul><ul><li>In the link box, type #, then the name of the anchor </li></ul></ul><ul><ul><li>No space between # and anchor name (#top) </li></ul></ul>
    54. 54. Linking to sections of a different page <ul><li>For page within website </li></ul><ul><ul><li>Link to Page name#anchor name (webguide.htm#bandwidth) </li></ul></ul><ul><ul><li>Will jump to the page “webguide.htm” and the named anchor called “bandwidth” </li></ul></ul><ul><li>Page in different site </li></ul><ul><ul><li>Link to Web Address#anchor name ( http://www.computer.com/webguide.htm#bandwidth ) </li></ul></ul><ul><ul><li>Will jump to the page “www.webguide.htm” and the named anchor called “bandwidth” </li></ul></ul>
    55. 55. Linking to documents <ul><li>Adobe (.pdf) is good universal format </li></ul><ul><ul><li>In wide use, Government standard </li></ul></ul><ul><ul><li>Adobe Reader free and easy to download </li></ul></ul><ul><ul><li>Doesn’t suggest an endorsement of a specific product (e.g. - Word or Wordperfect) </li></ul></ul><ul><li>Always provide link to page to download Adobe Reader (www.adobe.com) </li></ul><ul><li>Always provide size and type of file in text so they know what they’re downloading - Web Account Request Form (113 kb .pdf file) </li></ul>
    56. 56. Linking to documents (con’t) <ul><li>Select linking text or image </li></ul><ul><li>Have document in folder </li></ul><ul><ul><li>Like images, all documents should be stored together in common folder (“docs”, “06_docs”, “4h_06_docs”) </li></ul></ul><ul><li>In link box, browse to document </li></ul>
    57. 57. Opening links in new windows <ul><li>Why? </li></ul><ul><ul><li>Useful for framed pages </li></ul></ul><ul><ul><li>For an external link, you might want your page to stay up </li></ul></ul><ul><ul><li>Links to a document that has no return link </li></ul></ul><ul><li>Set the link </li></ul><ul><li>In Property Inspector, set target to blank </li></ul><ul><ul><li>Top is default, which replaces the content of current page </li></ul></ul>
    58. 58. Links you need: <ul><li>Email contact (preferably every page) </li></ul><ul><li>CSU </li></ul><ul><ul><li>http://welcome.colostate.edu </li></ul></ul><ul><li>CSU CE </li></ul><ul><ul><li>http://www.ext.colostate.edu </li></ul></ul><ul><li>Disclaimer </li></ul><ul><ul><li>http://welcome.colostate.edu/index.asp?url=info_csu-disclaimer </li></ul></ul><ul><li>EOE statement </li></ul><ul><ul><li>http://welcome.colostate.edu/index.asp?url=info_csu-equalop </li></ul></ul><ul><li>Non-discrimination statement </li></ul><ul><ul><li>http://www.ext.colostate.edu/non-discr.html </li></ul></ul>
    59. 59. Rollovers, Flash Objects, Navigation Bars
    60. 60. Image rollovers <ul><li>What is a rollover? </li></ul><ul><ul><li>Two images stacked on each other </li></ul></ul><ul><ul><li>When an action (rollover, click) is performed, image changes </li></ul></ul><ul><li>Good for buttons – 2 different states </li></ul><ul><li>Different color, same text and size, for each state </li></ul><ul><li>Photoshop makes this very easy </li></ul><ul><li>Free buttons available on web </li></ul>
    61. 61. Rollovers (con’t) <ul><li>Go to objects panel, choose rollover </li></ul><ul><ul><li>Images should be same size </li></ul></ul><ul><ul><li>Second image will conform to first image size </li></ul></ul><ul><li>Browse to original image </li></ul><ul><li>Browse to rollover image </li></ul><ul><ul><li>Add alt text </li></ul></ul><ul><ul><li>Choose link </li></ul></ul><ul><ul><li>Leave “preload” option checked - downloads when page downloads </li></ul></ul>
    62. 62. Flash objects <ul><li>Warning: Flash is a plug-in, not all browsers come with it </li></ul><ul><ul><li>Plug-in = third party add-on software </li></ul></ul><ul><ul><li>Macromedia Flash is plug-in for Flash media, integrates easily with Dreamweaver </li></ul></ul><ul><ul><li>Pre-loaded on vast majority (98%) of browsers </li></ul></ul><ul><li>Slick and easy buttons and text </li></ul><ul><ul><li>Objects have pre-programmed rollover behaviors and click behaviors </li></ul></ul><ul><ul><li>Saves bandwidth because files are very small </li></ul></ul>
    63. 63. Inserting Flash text <ul><li>Use Media pulldown in Objects panel, select Flash Text, or </li></ul><ul><li>Insert, Media, Flash Text </li></ul><ul><li>Dialog box appears </li></ul><ul><ul><li>Choose font, font size </li></ul></ul><ul><ul><ul><li>Font doesn’t have to be loaded onto user computer (it’s a graphic, not text) </li></ul></ul></ul><ul><li>B, I options (affects all text) </li></ul><ul><li>Text alignment buttons (Left, center, right) </li></ul><ul><li>Choose text color, rollover color, background color (may need to match page color) </li></ul>
    64. 64. Flash text (con’t) <ul><li>Type text into text box (check “show font” box for preview) </li></ul><ul><li>Browse or type address of link </li></ul><ul><li>Leave object in current folder </li></ul><ul><ul><li>Exeption to the “images” folder rule </li></ul></ul><ul><ul><li>Name it something memorable (NOT text1.swf) </li></ul></ul><ul><li>OK, click Play in PI to watch rollover effects </li></ul><ul><ul><li>Be sure and click Stop when done </li></ul></ul><ul><li>Or, F12 to Preview </li></ul>
    65. 65. Flash Accessibility Attributes (DW8 only) <ul><li>For screen reader browsers </li></ul><ul><li>Alt tag </li></ul><ul><li>Access key </li></ul><ul><ul><li>That key + Ctrl will trigger the link </li></ul></ul><ul><li>Tab Index </li></ul><ul><ul><li>To relay what order the object will be selected when using the Tab button </li></ul></ul><ul><ul><li>Needed only if there are several objects on page to navigate </li></ul></ul>
    66. 66. Changes after the fact <ul><li>Can move or resize graphic </li></ul><ul><li>2-click to get dialogue box back </li></ul><ul><li>Property inspector allows more: </li></ul><ul><ul><li>Background color changes </li></ul></ul><ul><ul><li>Dimensions </li></ul></ul><ul><ul><li>Alignment </li></ul></ul><ul><ul><li>Vspace, Hspace changes </li></ul></ul>
    67. 67. Creating Flash buttons <ul><li>Use Media pulldown in Objects panel, select Flash Text, or </li></ul><ul><li>Insert, Media, Flash Text </li></ul><ul><li>Dialog box appears </li></ul><ul><ul><li>Browse through, lots to choose from </li></ul></ul><ul><ul><li>Sample box previews behaviors (rollover, l-click) </li></ul></ul><ul><ul><li>“ Get more styles” connects to website with more stuff </li></ul></ul>
    68. 68. Flash buttons (con’t) <ul><li>Type in text in text box </li></ul><ul><li>Choose font </li></ul><ul><li>Font size often non-negotiable </li></ul><ul><li>Background color - eyedropper is good option for page color match </li></ul><ul><li>Link - browse to file or type in address </li></ul><ul><li>Click Play button to see rollover effects </li></ul><ul><ul><li>Click Stop before continuing </li></ul></ul>
    69. 69. Changes after the fact <ul><li>Can move or resize graphic </li></ul><ul><li>2-click to get text box back </li></ul><ul><li>Property inspector allows more: </li></ul><ul><ul><li>Background color changes </li></ul></ul><ul><ul><li>Dimensions </li></ul></ul><ul><ul><li>Alignment </li></ul></ul><ul><ul><li>Vspace, Hspace changes </li></ul></ul>
    70. 70. Navigation bars <ul><li>What is a navigation bar? </li></ul><ul><ul><li>Set of buttons stacked horizontally or vertically inside a table </li></ul></ul><ul><li>You need the images for buttons first </li></ul><ul><ul><li>Many sites to choose from </li></ul></ul><ul><ul><ul><li>Search engine - “html buttons” </li></ul></ul></ul><ul><ul><ul><li>Good for standard buttons (forward, back, home, email) </li></ul></ul></ul><ul><ul><li>Photoshop is fast and easy button-maker </li></ul></ul>
    71. 71. Inserting a navigation bar <ul><li>On objects panel, click Insert Nav bar button </li></ul><ul><li>Up to four images to assign: </li></ul><ul><ul><li>Up image: initial image </li></ul></ul><ul><ul><li>Over image: when mouse moves over it (lit up) </li></ul></ul><ul><ul><li>Down image: when button is clicked (pushed in) </li></ul></ul><ul><ul><li>Over while down: when mouse is over after clicking (lit up, pushed in) </li></ul></ul>
    72. 72. Nav bars (con’t) <ul><li>Type in element name (home, links, etc.) </li></ul><ul><li>When clicked, go to… </li></ul><ul><ul><li>Type in URL (get spelling right!), or </li></ul></ul><ul><ul><li>If in-site, browse to it and select </li></ul></ul><ul><li>Show “Down image” Initially checkbox </li></ul><ul><ul><li>For when user is already there, so you want the button down at outset </li></ul></ul><ul><ul><li>Select button before checking box </li></ul></ul><ul><ul><li>Asterisk will appear </li></ul></ul>
    73. 73. Nav bars (con’t) <ul><li>Create horizontally or vertically using pulldown </li></ul><ul><li>To insert more buttons on nav bar </li></ul><ul><ul><li>Click the “+” button </li></ul></ul><ul><ul><li>Follow same steps </li></ul></ul><ul><li>Change order by selecting image, using up and down arrows </li></ul>
    74. 74. Inserting MS Office documents (Word, Excel, PowerPoint) <ul><li>Strip them of transitions, animations, unnecessary graphics, sounds </li></ul><ul><li>Start in native program, File, Publish to Web </li></ul><ul><li>Choose “Files of Type” as Web Page (*.html) </li></ul><ul><li>Publish file and folders directly into website (create “docs” folder to put it in) </li></ul><ul><li>Another option: allow them to download it by linking to actual file (instead of web version) </li></ul><ul><ul><li>We did this already with .pdf </li></ul></ul><ul><ul><li>Same technique with any document </li></ul></ul>
    75. 75. Inserting MS Office documents (Word, Excel, PowerPoint) (con’t) <ul><li>Creates a file and a folder </li></ul><ul><ul><li>Point links to file; folder will take care of itself </li></ul></ul><ul><li>Commands>Clean Up Word HTML </li></ul><ul><ul><li>Word is very bad at writing code </li></ul></ul><ul><ul><li>Cleans up redundant and MS-centric code </li></ul></ul><ul><ul><li>Clean Up HTML another option </li></ul></ul><ul><ul><li>Simple graphics and text can be added after the fact </li></ul></ul>
    76. 76. Creating tables <ul><li>Good way to structure a web page </li></ul><ul><li>Without tables, content is generally left, center, or right aligned (not a lot of design options </li></ul><ul><li>Think of tables as building boxes to put content into </li></ul>
    77. 77. Tables (cont) <ul><li>Insert>Table, or </li></ul><ul><li>Use table icon in Objects panel </li></ul><ul><li>Set options in dialogue box </li></ul><ul><li># of rows & columns </li></ul><ul><li>Table width </li></ul><ul><li>Border, padding, spacing </li></ul><ul><li>Header </li></ul>

    ×