California Career and Technical Education Standards

• IT.B.B5.1 Understand the purpose, scope, and development of a Web site.

• Lecture - Lecture

  If you attempt to type directly into an AP Div tag, the text will automatically line up at the top and top right of the tag. In order to have space around your text, we will use Cascading Style Sheets (CSS) padding and margins. By requesting students do their work with the split screen (coding and design) showing. Students will begin to see the role AP Divs and CSS play together when coding a page.

   
• Modeling - Demo / Modeling

  On the right side of Dreamweaver, you will see a pannel called CSS Styles. If you do not see CSS Styles, go to Windows and locate CSS Styles on the drop down menu or use Shift+F11 as a shortcut key.

  Look for All Rules in the CSS panel . Underneath All Rules you will see a box with a + in it and <style>. Underneath <style> you will see #logo, #banner, #content, etc. The name of these AP Tags appear because you named them under Properties in  CSS-P Elements in the previous assignment "Creating a basic layout using AP Div tags."

  Double click on #content.  A CSS Rule Definition box will appear in the document area of Dreamweaver. Here you are able to select the way you want your information to appear, known as style. You are able to select: Type, Background, Block, Box, Border, List, Positoning and Extensions. For now, select a font-famiy, font-size and color.
  
  Select Box.
  Padding is the area within your AP Div tag.
  You can add padding to the top, right, bottom or left of your AP Div tag. (A quick way to remember top, right, bottom or left is (TRBL). In the boxes below Padding, type how many pixels you want around your text. Try 10px in each box.

  Margin is the area around the outside of  your AP Div tags.
  You can add margins around your AP Div tags as a design tool.  The selections are the same top, right, bottom or left of your AP Div tag. (A quick way to remember top, right, bottom or left is (TRBL). Margin adds seperation between the AP Div tags.

  
   
• Adding padding and margins - Independent Practice

  Finish adding padding and margins for each AP Div tag. Use 10px for padding and 5px for margins. This may require you to readjust your AP Div tags, but you can resize using the handles.
• Using Filler text - Guided Practice

  Go to www.lipsum.com and you will find a site that allows you to cut and paste filler text. This will give you an idea of what the site would look like with text. WARNING: Try and place filler text using a different color than black, so it will stand out and you will know you need to change it to actual text.

  Copy and paste filler text into the content, bio, and other area for a visual to see if your padding worked.

  Be sure to only copy enough text to fill the boxes. The boxes have a fixed height, so text will overflow.

  • Lipsum - Filler Text [ Go to Site ] null
• Adjusting Margins - Independent Practice

  In order for your site to remain with they 1024px width. Following the attached guideline, students will change margins on their document as shown on the attached document.