Web Design and Implementation

Size: px

Start display at page:

Download "Web Design and Implementation"

Jasper Hodges
6 years ago
Views:

1 Study Guide 3 - HTML and CSS - Chap Name: Alexia Bernardo Due: Start of class - first day of week 5 Your HTML files must be zipped and handed in to the Study Guide 3 dropbox. Chapter 13 - Boxes CSS treats each HTML element as if it sits in its own box. 1) If you don t set the height and width of a box, how big will it be? By default a box is sized just big enough to hold its contents. To set the dimensions for a box you can use the height and width properties. 2) Some page designs can expand and shrink to fit the size of the browser window. What are the two CSS properties that can be used to set a minimum and maximum size of a box (element)? The min-width property specifies the smallest size a box can be displayed at when the browser window is narrow, and the max-width property indicates the maximum width a box can stretch to when the browser window is wide. Go check out the minimum width example on the book website: 3) What CSS properties are used to control the minimum height and maximum height of a box? This is achieved using the min-height and max-height properties. 4) Imagine a paragraph is not big enough to hold its content, write a CSS rule (with a selector) that will hide this extra content. The overflow property tells the browser what to do if the content contained within a box is larger than the box itself. p.hide { overflow: hidden; } 5) Now write another rule for the same paragraph that will instead cause scroll bars to appear when there is too much content to fit in the paragraph. p.scroll { overflow: scroll; }

2 6) What are the three properties available to boxes that can be adjusted to control their appearance Border: The border separates the edge of one box from another. Margin: Sits outside the edge of the border. Padding: The space between the border of a box and any content contained within it. 7) True or False. If you add padding to a 400px box, the box won t get any bigger. Instead the content area of the box will get smaller. True. 8) True or False. Margins sit outside of a box. True. 9) True or False. Padding goes inside of a box and adds space between the content and the borders of the box. True. 10) Notice how using margin and padding to create white space and vertical margins makes this page: look better than this page: Borders 11) Give the property used to control the width of borders. border-width 12) List the 8 values for the border-style CSS property. solid: a single solid line

3 dotted: a series of square dots (if your border is 2px wide, then the dots are 2px squared with a 2px gap between each dot) dashed: a series of short lines double: two solid lines (the value of the border-width property creates the sum of the two lines) groove: appears to be carved into the page ridge: appears to stick out from the page inset: appears embedded into the page outset: looks like it is coming out of the screen hidden/none: no border is shown 13) Give the property used to control the color of borders. border-color Note that the border property can be used as as shorthand for the above 3 properties. Padding Note that the bottom box on page 313 has more padding and this makes the text easier to read. 14) For the following shorthand padding declaration, label the left, right, top, and bottom padding: padding: 10px 5px 20px 10px; padding-top: 10px; padding-right: 5px; padding-bottom: 20px; padding-left: 10px; 15) CSS margins collapse - what does this mean? (page 314) If one box sits on top of another, margins are collapsed, which means the larger of the two margins will be used and the smaller will be disregarded.

4 16) Note the trick of centering a box (page 315) margin-left: auto; margin:right: auto If you want to center text (rather than the entire box), use text-align: center display 17) Describe what the following CSS properties do: display : inline; This causes a block-level element to act like an inline element. display: block; This causes an inline element to act like a block-level element. display: inline-block; This causes a block-level element to flow like an inline element, while retaining other features of a block-level element. display: none; This hides an element from the page. In this case, the element acts as though it is not on the page at all (although a user could still see the content of the box if they used the view source option in their browser). 18) How is visibility: hidden different from display: none? If the visibility of an element is set to hidden, a blank space will appear in its place. If you do not want a blank space to appear, then you should use the display property with a value of none instead. 19) Which CSS property is used to add drop shadows to a box? box-shadow 20) Which CSS property is used to add rounded corners to a box, or even to give it an elliptical shape? border-radius Look over the The Analog Specialists example at:

Be sure to View Source to see the HTML and CSS. Note how display:inline has put the navigation links all on one line, and that margin:auto has centered the #page div.

5 Be sure to View Source to see the HTML and CSS. Note how display:inline has put the navigation links all on one line, and that margin:auto has centered the #page div. **** HW-3 Part I **** Give the recipe page s unordered list of ingredients an elliptical border (something asymmetrical, it doesn t have to look exactly like this), and a visible drop shadow. See pages 320 and 322 for how to do this. If the text doesn t fit, that s OK, we ll fix it in the next section.

Chapter 14 - Lists, Tables & Forms CSS for Lists 1) Read over the CSS list pages (331-366) and **** HW-3 Part II **** - Change the

6 Chapter 14 - Lists, Tables & Forms CSS for Lists 1) Read over the CSS list pages ( ) and **** HW-3 Part II **** - Change the ingredients list style type to a square - Change the list style position to inside 2) Read over the rest of the chapter (HTML Table and HTML Form CSS)

7 3) Note the CSS for styling the cursor on page 347. Write a CSS rule that turns the cursor into a question mark (help) a { cursor: help; } 4) Look over the List, Table and Forms examples at: Be sure to view source to see the CSS.

8 Chapter 15 - Layout Block-level elements start on their own line and act as the main building blocks of any layout, while inline boxes flow between surrounding text. If one block-level element sits inside another block level element then the outer box is know as the containing or parent element. There s quite a bit to know in this area - we ll be spending the next 2-3 weeks on this. Be sure to view the examples (and the source) for this chapter at: Positioning Schemes 1) Normal flow (the default, position:static) each block-level element sits on top of the next one. 2) Relative Positioning (position:relative) moves an element from the position it would be in normal flow, shifting it to the top, right, bottom, or left of where it would have been placed. 3) Absolute Positioning (position:absolute) causes a box to be used with box offset properties to tell the browser how far from the top or bottom and left or right it should be placed. 4) Fixed Positioning (position:fixed) positions the element in relation to the browser window. When a user scrolls down the page elements with fixed positioning do not affect the position of surrounding elements and they do not move. 5) Overlapping elements - when using relative, fixed, or absolute positioning elements can overlap. Which CSS property is used to determine which element is on top? In normal flow, each block-level element sits on top of the next one. Since this is the default way in which browsers treat HTML elements, you do not need a CSS property to indicate that elements should appear in normal flow but you can specify the positioning scheme using the position property in CSS. 6) Floating Elements - the float property allows you to make an element in normal flow and position it to the far left or right of a containing box. 7) Which CSS property should be used with float so that it functions consistently?

9 When you use the float property, you should also use the width property to indicate how wide the floated element should be. If you do not, results can be inconsistent but the box is likely to take up the full width of the containing element (just like it would in normal flow). 8) Floating allows boxes to site next to each other, but sometimes the results can be strange. clear is sometimes used as as solution. What does clear: left do? The left-hand side of the box should not touch any other elements appearing in the same containing element. 9) Note the Floated Elements: Problem and Solution. Setting the parent element to overflow:auto and width:100% was the solution. 10) Read over the multi-column layout with floats section - easy! 11) Give 2 advantages and 2 disadvantages of using Fixed Width Layouts Advantages Pixel values are accurate at controlling size and positioning of elements. The designer has far greater control over the appearance and position of items on the page than with liquid layouts. You can control the lengths of lines of text regardless of the size of the user's window. The size of an image will always remain the same relative to the rest of the page. Disadvantages You can end up with big gaps around the edge of a page. If the user's screen is a much higher resolution than the designer's screen, the page can look smaller and text can be harder to read. If a user increases font sizes, text might not fit into the allotted spaces. The design works best on devices that have a site or resolution similar to that of desktop or laptop computers. The page will often take up more vertical space than a liquid layout with the same content. 12) Give 2 advantages and 2 disadvantages of using Liquid Layouts. Advantages Pages expand to fill the entire browser window so there are no spaces around the page on a large screen.

10 If the user has a small window, the page can contract to fit it without the user having to scroll to the side. The design is tolerant of users setting font sizes larger than the designer intended (because the page can stretch). Disadvantages If you do not control the width of sections of the page then the design can look very different than you intended, with unexpected gaps around certain elements or items squashed together. If the user has a wide window, lines of text can become very long, which makes them harder to read. If the user has a very narrow window, words may be squashed and you can end up with few words on each line. If a fixed width item (such as an image) is in a box that is too small to hold it (because the user has made the window smaller) the image can overflow over the text. 13) Be sure to check out the Fixed Layout and Liquid Layout examples in the book and on the Web Site. 14) Designers commonly use a 960-pixel wide layout with 12 columns (60 pixels wide, 10 pixel margins). This 960 pixel grid allows a multitude of column layouts, which you can see on pages ) Look and the <link> tag and understand what they do. 16) Finally, look over the final chapter example, which uses 960.gs Submission: ZIP up this completed document, the improved recipe page (Part I and II) and associated files and post to dropbox.

TAG STYLE SELECTORS. div Think of this as a box that contains things, such as text or images. It can also just be a

TAG STYLE SELECTORS. div Think of this as a box that contains things, such as text or images. It can also just be a > > > > CSS Box Model Think of this as a box that contains things, such as text or images. It can also just be a box, that has a border or not. You don't have to use a, you can apply the box model to any