PROJECT 01 NOTES

  1. Project Intro
    1. Review and overview
  2. Setting up the Workspace
    1. Reviewing the setup of DW
    2. Setting up panels, view, toolbar
  3. HTML5 Page Structure
    1. All code must be within <html>
    2. <head> doesn't show up on page
    3. <body> contains everything you see on the site
  4. Adding Text Content
    1. Adding blockquotes <blockquote>, text styles- <em> for italics, <strong> for bold, headings <h1>-<h6> in properties panel
    2. Text content and format
  5. Adding Images
    1. Root folder- top folder in a file system
    2. Be aware of copyright status (creative commons has copyright free)
      1. Attribution- give credit to original copyright owner
      2. Share Alike- can only share new project under same license permissions as the original work
      3. Non-Commercial- may not be used for commercial purposes
      4. No Derivatives- may not changge work in any way
    3. Changing height and width of an image in properties panel
  6. Creating Lists
    1. UL and OL
    2. Using blockquotes to make sub lists
  7. Creating Tables
    1. <table> beginning and end of table
    2. <tbody> header
    3. <tr> rows <td> data
    4. Table editing doesn't really work in live mode
  8. Adding Hyperlinks
    1. <a> creates hyperlink
    2. href- hypertext reference
    3. <a href="URL">Text</a>
    4. absolute hyperlinks- go to a URL on the web
    5. mailto:email (but can also use insert panel)
    6. tel:phone# (NO SHORTCUT FOR THIS)
  9. More about Images
    1. Using assets panel, insert panel, and drag and drop to insert images
    2. Commit Image Size
  10. Copyright and Hotlinking
    1. Hotlinking- avoiding copyright laws by copying image address and inserting it in place of the file name (only shows preview in DW in live view)
    2. Risky!!! DON'T DO IT
  11. Introducing CSS
    1. CSS rules belong inside <head>
  12. Styling body and text
    1. Adding CSS selector rules in CSS designer panel
    2. Stick to default system fonts because visitors don't always have the same fonts installed
    3. Font stacks contain multiple fonts to give the browser backup options
    4. Choose easy to read fonts and contrasting colors
    5. Hex Codes
      1. #00 00 00 - R G B
      2. (#FFFFFF = white #000000 = black)
      3. (A-F)
    6. RGB values
      1. rgba(0, 0, 0)
      2. rgba(255, 255, 255) =white
      3. rgba(0, 0, 0) =black
      4. (0-255)
      5. alpha- % of opacity in decimals
  13. Styling lists, tables, and hyperlinks
    1. list-style-type changes type of bullet point
    2. exclusion in code view- ul li with no comma to be more specific
  14. Project Planner (Super Fan Page)
    1. Just more CSS

Creative Commons