PROJECT 03 NOTES

  1. Creating a Template
    1. Creating templates and editable regions
  2. Templates, Divs, and File Management
    1. Creating Divs and organizing her files
  3. Creating Columns
    1. Used divs and classes to make columns for images
  4. CSS Positioning
    1. Setting a CSS position:
      1. position: value;
      2. top: value;
      3. left: value;
    2. static- default CSS position
    3. relative- positioned relatively to its original static position and change in relation to other elements
    4. aboslute (AP)- specific location, ignore other elements and can overlap them
    5. z-index- sets the overlapping order of elements, higher #s in front of lower (numbers only have value in relation to each other)
    6. fixed- does not move at all
    7. sticky- stays in relative position until you scroll, then it will become fixed
  5. Responsive Design
    1. Websites show up different on different devices
    2. @media - media query set widths for certain elements in certain circumstances
    3. cascading rules- media takes precedent over external
  6. Creating a Media Query
    1. Using CSS Designer and code view to create media queries
  7. Media Query for Mobile Devices
    1. More working with media queries, setting CSS to modify the page for each device with different screen size
  8. Replacing Gallery Placeholders
    1. Adding images to placeholders using properties panel
    2. docment relatvie link- href location is written starting from the current document's location in the root folder (represented with a ../)
      1. more efficient for complicated websites with lots of folders
    3. site root relative link- address location is written starting from the site's root folder, (represented with a /)
      1. easier for smaller websites
    4. absolute links- normally only used to link other files outside of root folder (represented with a http://)
  9. Alt Text and Accessibility
    1. used by screen readers to describe images for visually impaired
    2. also displayed if image fails to load
    3. alt="content"
    4. can also use properties panel or clicking on the image and using the 3 line menu
    5. check for all alt text using site/reports/mssing alt text/run
    6. can use find and replace to find empty alt text tags
  10. Adding Video Files
    1. HTML 5 <video>
      1. only 3 file types supported
        1. .mp4
        2. .ogg
        3. .webm