CSS 2: Layouts. Getting Ready: Downloading Files for this Tutorial. Fixed-Width Layouts

Transcription

1 CSS 2: Layouts This lesson will walk you the process of building a fluid layout for a webpage using CSS, based on Tutorial 8 on the Max Design Website - Visit this site to see the whole tutorial and to view other CSS tutorials. Getting Ready: Downloading Files for this Tutorial For this lesson, all you need is a page written in HTML where you can practice writing CSS. You can download practice files at: Right-click on the files needed and choose "Save Link As" to download to your "public_html" folder in EdShare (or any other folder where you want to store your web files). 1. start_index.html 2. catposter_sm.png Fixed-Width Layouts Fixed-width layouts are set to a fixed value (pixels): The wrapper has a fixed width, and all the elements have widths measured in pixels or percentages. The designer has percise control over placement of elements and the width of objects. Therefore, the design of the page will always remain the same no matter the user's screen resolution. Fixed-width layouts are fast and easy to produce, cutting down on time spent on testing and taking multiple resolutions into account. Position and shape of elements are predictable. Centering your design is recommended if you want to avoid excessive white space to the right of the design. "Choosing between a fixed-width layout and another type is a question of how much freedom the designer is willing to give the user. The former entails that design decisions are more in the hands of the designer than the user, while the latter entails that components like fonts, images and columns will scale fluidly according to the user s preferences." - smashingmagazine.com/smashing-book-1/the-art-and-science-of-css-layouts CSS 2: Layouts - 1

2 Fluid/Liquid Layouts Fluid (Liquid) Layouts use percentage values: Elements inside the container are defined in percentages and therefore adjust their size accordingly to the shape of the user's browser window. This style of layout is highly adaptable, making the most of existing real estate in the browser's viewport. Content is then expands or contracts proportionally to fill the space. Understanding relationships between elements is key - width of a child element measured in percentages is determined by the parent element. Elastic Layouts "A pixel is an unscalable dot on a computer screen, whereas an em is a square unit of font size. Font sizes vary, and the em is a relative unit that adjusts to users text-size preferences (Elastic Design, Consequently, designers size fonts in em units relative to the font-size value of their parent elements. By using ems for both layout blocks and text elements, designers are able to make a Web layout scale consistently, maintain optimal line length for the body copy and create realistic zoom effects. The result: when the user increases the font size, the layout stretches automatically, just as you would expect from an elastic object." Sources/Recommended Reading: CSS 2: Layouts - 2

3 CSS Box Model All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout. The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content. The box model allows us to place a border around elements and space elements in relation to other elements. 1. Margin - Defines the amount of space to the border of an element from its parent container. 2. The margin does not have a background color, it is completely transparent. 3. Border - A border that goes around the padding and content. The border is affected by the background color of the box 4. Padding - Clears an area around the content. The padding is affected by the background color of the box 5. Content - The content of the box, where text and images appear Sources: w3schools.com/css/css_boxmodel.asp innovativephp.com/css-liquid-layout-tutorial-for-designing-blog-post-page Learn more about the CSS box model and positioning: CSS 2: Layouts - 3

4 Semantically marked up code A div element <div> divides a page into specific content areas, each with a unique ID selector name. The basic building block of the CSS layout is the div - an HTML element that acts as a container for text, images, and other page elements, allowing the designer to use CSS to style each content area. In this example, our page will contain five seperate divs: one large "container" element to hold the four other areas, including a sidebar, a header (located at the top of the page), content, and a footer (located across the bottom of the page). These ID names are commonly used. It's important to remember that when you name your div areas, the names are based on their meaning, rather than their appearance. Add Container <div> First, we need to add the <div> which wraps around the entire page's content to hold all of our subsquent <div> elements together. 1. Highlight all the content in the <body> in code view, but not the tags themselves. In this example, highlight from the <h1> to the closing paragraph tag right before the closing body tag. CSS 2: Layouts - 4

5 2. From the Insert Panel, select the Insert Div Tag button. 3. In the Insert Div Tag dialog box, type container in the ID text box. 5. Click on OK. Follow similar steps to add the header, sidebar, content and footer <div> elements: Add Header <div> 1. Highlight the heading 1 now located after the opening container <div> tag - make sure to select the whole element including the closing tag. 2. From the Insert Panel, select the Insert Div Tag button. 3. In the Insert Div Tag dialog box, type header in the ID text box. 4. Click on OK. Add Sidebar <div> Since we don't have content for our sidebar we will just insert an empty <div> called sidebar. 1. Place your cursor on a new line right after the closing header </div> tag. 2. From the Insert Panel, select the Insert Div Tag button. 3. In the Insert Div Tag dialog box, type sidebar in the ID text box. 4. Click on OK. CSS 2: Layouts - 5

6 Add Content <div> 1. Highlight all the content from below the sidebar <div> to the closing paragraph tag right above the closing container </div> tag. 2. From the Insert Panel, select the Insert Div Tag button. 3. In the Insert Div Tag dialog box, type content in the ID text box. 4. Click on OK. Add Footer <div> 1. Place your cursor on a new line after the content's closing </div> tag and before the container's closing </div> tag. 2. From the Insert Panel, select the Insert Div Tag button. 3. In the Insert Div Tag dialog box, type footer in the ID text box. 4. Click on OK. CSS 2: Layouts - 6

7 New CSS Rule - #container To add width, margin and other styles to the container <div>, we need to declare a new CSS Rule. 1. Click on the New CSS Rule icon in the CSS Styles Panel. 2. In the New CSS Rule dialog box make sure the following settings are set: - Selector Type: choose ID from the drop-down menu. - Selector Name: type container (same as the <div> ID name) - Rule Definition: the stylesheet attached to your HTML document should already be selected. If this is your first CSS rule, choose New Style Sheet File to begin a new external style sheet. 3. Click on OK. CSS 2: Layouts - 7

8 #container - Box Category In the dialog box appears, choose the Box category in the menu to the left. - Width: type 90 for the value then choose % from the drop-down menu. - Margin: uncheck Same for all and type the following values: Top: 10 px (select pixels from the drop down menu) Right: auto Bottom: 10px Left: auto Writing this in code looks like: #container { width: 90%; margin: 10px auto; In this case we will use a width of 90% so the CSS declaration used is: "width: 90%". Any width could be used, including 100%, which would force the content to the left and right edges of the viewport. To center the div in the viewport, we apply "auto" margins to left and right. To move the div away from the top and bottom of the viewport we use a margin of 10px. These can be combined into one shorthand CSS declaration: "margin: 10px auto". This will apply a margin of 10px to the top and bottom and auto margins to the left and right. CSS 2: Layouts - 8

9 #container - Background Category In the Background category, you may specify a background style for this specific <div>. In Background Color: type #FFF or select a color by clicking on the color picker. The CSS code for our container style so far looks like: #container { width: 90%; margin: 10px auto; background-color: #FFF; #container - Border Category In the Border category select the following or similar options: - For Style check Same for all then type Solid - For Width check Same for all then type 1 px (select pixels from the drop down menu) - For Color check Same for all then type #333 or select a color by clicking on the color picker. The CSS code for our container style: #container { width: 90%; margin: 10px auto; background-color: #FFF; border: 1px solid #333; CSS 2: Layouts - 9

10 To preview the changes first click Apply and make additional changes if necessary. Once satisfied with the styles for #container click OK. New CSS Rule - #header 1. Click on the New CSS Rule icon in the CSS Styles Panel. 2. In the New CSS Rule dialog box: - Selector Type: choose ID - Selector Name: type header - Rule Definition: leave your default style sheet selected 3. Click on OK. #header - Background Category In the Background category type #DDD in the Background-color field or select a color by clicking on the color picker. #header - Box Category In the Box category, go to Padding, check Same for all (should be checked by default) and type.5 em (select ems from the drop down menu). CSS 2: Layouts - 10

11 #header - Border Category In the Border category select the following or similar options: - Style: uncheck Same for all then for bottom choose Solid - Width: uncheck Same for all then for bottom type 1 px (select pixels from the drop down menu) - Color: uncheck Same for all then for bottom type #333 or select a color by clicking on the color picker. The CSS code for our header style: #header { padding:.5em; background-color: #ddd; border-bottom: 1px solid gray; Descendant Selectors Inside the top header there is an <h1> element. We want the words to sit.5em in from the top and left edge of the <div>. Browsers add different amounts of padding above an <h1>, so it is easiest to remove all padding and margin from this h1 and let the <div> provide the padding. This is achieved by using a descendant selector - "#header h1 { CSS 2: Layouts - 11

12 padding: 0; margin: 0;". New CSS Rule - #sidebar 1. Click on the New CSS Rule icon in the CSS Styles Panel. 2. In the New CSS Rule dialog box: - Selector Type: choose ID - Selector Name: type sidebar - Rule Definition: leave your default style sheet selected 3. Click on OK. #sidebar - Box Category In the Box category: - Width: type 12 for the value then select em from the drop-down menu - Float: choose left - Padding: type 1 and select em Since the element is floated, a width must be given. Padding creates white space within this <div>. The CSS code for the sidebar: #sidebar { float: left; width: 12em; padding: 1em; CSS 2: Layouts - 12

13 New CSS Rule - #content 1. Click on the New CSS Rule icon in the CSS Styles Panel. 2. In the New CSS Rule dialog box: - Selector Type: choose ID - Selector Name: type content - Rule Definition: leave your default style sheet selected 3. Click on OK. #content - Box Category 1. In the Box category: - Padding: type 1 and select em from the drop-down menu - Margin: uncheck Same for all and type the following values: Right: 10 px Left: 13 em 2. Adding a left border: Borders (and background colors) are useful to visually separate areas of content. 3. Setting a max-width: Standards-compliant browsers will not allow the content area to go wider than the width you specify - keeping the line length comfortable to read no matter how large the screen resolution. The CSS Code for our header style so far looks like (added or changed items in bold): #content { margin-left: 13em; margin-right: 10px; padding: 1em; max-width: 36em; border-left: 1px solid gray; CSS 2: Layouts - 13

14 Removing Top Margins Browsers use different amounts of margin above paragraphs and headings. It is safe to remove all top margins, as long as there are bottom margins to keep the paragraphs and headings separate from elements below them: p {margin: 0 0 1em 0 New CSS Rule - #footer 1. Click on the New CSS Rule icon in the CSS Styles Panel. 2. In the New CSS Rule dialog box: - Selector Type: choose ID - Selector Name: type footer - Rule Definition: leave your default style sheet selected 3. Click on OK. #footer - Box Category To style the footer, we first need to set it to "clear: both" in the Box category. This is critical, as it will force the footer below any floated elements above. For some Padding, enter.5 em. #footer { CSS 2: Layouts - 14

15 clear: both; padding:.5em; CSS Validation and Testing your Webpage Just like validating the HTML, all style sheets should be tested to see if its up to standards by validating them with a CSS validator. Websites should be tested in many browsers on different computers and devices to make sure that no possible audience is missing out on the information you are trying to communicate. Validating your CSS: Pre-Made CSS Layouts in Dreamweaver When creating a new site in Dreamweaver, you can create one that already contains a CSS layout. Dreamweaver comes with several different CSS layouts you can choose from. Additionally, you can create your own CSS layouts and add them to the configuration folder so that they appear as layout choices in the New Document dialog box. 1. Select File > New. 2. In the New Document dialog box, select the Blank Page category. (It s the default selection.) 3. For Page Type, select HTML. 4. For Layout, select the CSS layout you want to use. The Preview window shows the layout and gives a brief description of the selected layout. Note that there are layout options for HTML5 as well. CSS 2: Layouts - 15

16 5. Select a location for the layout s CSS from the "Layout CSS" drop-down menu. Choose "Create New File" if this is a new site with no existing CSS or "Link to Existing File" if you have a style sheet already started for your site. (When you select the Link to Existing File option, the file you specify must already have the rules for the CSS file contained within it.) (Optional: You can also attach CSS style sheets to your new page (unrelated to the CSS layout) when you create the page. To do this, click the Attach Style Sheet icon above the Attach CSS file pane and select a CSS style sheet.) 6. If you selected "Create New File,", click Create, and then specify a name for the new external file in the Save Style Sheet File As dialog box. If you selected Link to Existing File from the Layout CSS in pop up menu, add the external file to the Attach CSS file text box by clicking the Add Style Sheet icon (chain link icon), and browsing for the external style sheet file. When you re finished, click OK, then Create in the New Document dialog box. Note: Internet Explorer conditional comments (CCs), which help work around IE rendering issues, remain embedded in the head of the new CSS layout document, even if you select New External File or Existing External File as the location for your layout CSS. NEW in Dreamweaver CS6: Fluid Grid Layouts If you want to build a site that is truly "responsive," Dreamweaver now offers a WYSIWYG solution for designing different layouts (depending on browser size) for the same page. For a detailed demo video for how to get started with Dreamweaver's Fluid Grid Layouts, watch: CSS 2: Layouts - 16

17 Pre-Made CSS Layout Inspiration Online Here are some possible websites that allow you to download their templates and modify them for your own specific content. However, you will want to notice if they ask you to put a link back to the creator of the design. - Open Source Web Design : - Free CSS Templates : - Open Web Design.org : - Layout Gala: - Free HTML5 Templates: Web Design Resources & Further Learning Visit our curated list of resources, tools and articles to improve your web skills: Contact Information St. Edward's University Instructional Technology Training training@stedwards.edu Watch our screencasts online: Register for more free workshops: Need time to work on your website with assistance from a Trainer? Come by the training room during Innovation Creation Lounge hours. CSS 2: Layouts - 17

18 CSS Shorthand Cheat Sheet by Example leigeber.com Margin & Padding margin-top: 0; margin-right: 5px; margin-bottom: 10px; margin-left: 15px; (auto, 0, px, pt, em or %) margin:0 5px 10px 15px; (top right bottom left) margin-top: 10px; margin-right: 20px; margin-bottom: 0; margin-left: 20px; margin:10px 20px 0; (top right/left bottom) margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; margin:0 auto; (top/bottom left/right) margin-top: 50px; margin-right: 50px; margin-bottom: 50px; margin-left: 50px; margin:50px; (top/right/bottom/left) Border border-width: 5px; (thin, thick, medium or set value) (default = medium) border-style: dotted; (solid, dashed, dotted, double, etc) (default = none) border-color: blue; (named, hex, rgb or 0-255) (default = value of elements/ elements parent color property) border:5px dotted blue; border-right-width: 2px; border-right-style: solid; border-right-color: #666666; border-right:2px solid #666; border-top-width: 3px; border-right-width: 2px; border-bottom-width: 3px; border-left-width: 2px; border-width:3px 2px; Background background-color: #CCCCCC; (named, hex, rgb or 0-255) (default = transparent) background-image: url(images/bg.gif); (url or none) (default = none) background-repeat: no-repeat; (repeat, repeat-x, repeat-y or no-repeat) (default = repeat) background-attachment: scroll; (fixed or scroll) (default = scroll) background-position: top left; (top, right, left, bottom or center) (default = 0% 0%) background:#ccc url(images/bg.gif) no-repeat 0 0; Font font-family: Verdana, Arial, Helvetica; (Verdana, Arial, Times New Roman, etc) (default = browse based) font-size: 12px; (xx-small, medium, x-large, set value, etc) (default = medium) font-weight: bold; (normal, bold, bolder, lighter, or inherit) (default = normal) font-style: italic; (normal, italic or oblique) (default = normal) font-variant: normal; (normal or small-caps) (default = normal) line-height: 1.5; (normal, px, pt, em, num or %) (default = normal) font:italic bold 12px/1.5 Verdana, Arial, Helvetica; List list-style-image: url(images/bullet.gif); (url or none) (default = none) list-style-position: inside; (inside or outside) (default = outside) list-style-type: square; (circle, disc, square, etc) (default = disc) list-style:square inside url(images/bullet.gif); Color Aqua: #00ffff to #0ff Black: # to #000 Blue: #0000ff to #00f Dark Grey: # to #666 Fuchsia:#ff00ff to #f0f Light Grey: #cccccc to #ccc Lime: #00ff00 to#0f0 Orange: #ff6600 to #f60 Red: #ff0000 to #f00 White: #ffffff to #fff Yellow: #ffff00 to #ff0

19 Website Evaluation Checklist So you ve got a website up and running - now it s time to go through and look at your finished site to add or adjust the finishing touches. This list is also helpful to go through periodically as your site grows and changes over time to keep your site working and manageable. 1. Clean up your code. First things first! Check that your site is meeting W3C standards using their validator ( Correct the errors the validator finds it even tells you on what exact line of code the error is on! 2. Take a step back to evaluate your layout. Pull up your site online and step away from the computer. Does the overall design of your site look nicely balanced or is the page cluttered with too much text, images and video? While space is precious, you can get away with a busy site if your design is clean. Do you need to re- think your layout? * Don t fear whitespace! Use spaces between content and images to prevent your site from looking smashed together. You can have a tightly packaged site while still not looking like a tabloid. * What does your site look like at various resolutions? On a tablet or smartphone? 3. Re- read your copy. Is your site saying what you mean it to say? Are there areas you may need to clarify? Are there long blocks of text that no one would ever read online? Consider if the writing is web- friendly while still conveying what you need to get across. 3b. Re- examine your images. Do your images relate to the page s topic? Do they take up too much space and crowd out important text? Should you add or change a picture? 4. Check your loading time. Are loooooong pages or giant graphics taking too long to load? You may need to consider scaling back and moving stuff around if your pages scroll on forever or if every image you use is gigantic.

20 5. Where s your navigation? The most user- friendly navigation is a system that is clear and consistent across every page of your site. If it s a list of links in a bar across the top of your page, it should stay there. Keep your navigation easy to see and readily clickable. * Can you find your way around? Is information readily available to your visitors? 6. Test your links! Do all of your links work? It can be very irksome when links on a site are broken. A periodic check to make sure that your site s links work will prevent disappointed visitors and make you look better in Google s eyes (search engines want to see your links work). 7. Revisit content on a regular basis. Due to the nature of your site, it may require more frequent updates than others. However, don t make the web 1.0 mistake of putting up a website and never changing it again. Returning visitors will expect recent additions or news, so give it to them! From an SEO (search engine optimization) perspective, the more you update your site, the more frequent your visits from search bots who are responsible for finding the websites that return in online searches like Google s.