cathiemurphy.files.wordpress.com€¦ · Web viewformat and design a Web page by ... it tells the...
13
3/13/2017 Chapter 4: Design & Layout of Web Pages ESSENTIAL OUTCOME 4. Students will create, format and design a Web page by: a) Utilizing id and class selectors as well as grouping selectors b) Styling horizontal relative navbar links c) Inserting background images d) Order of element & section selectors e) Color Choices f) Connecting key terms in the chapter with application. !Template In this chapter, you will learn about using templates for your exercises. A template is a sample document that already has some coding and can be adapted for use when creating another document. When you are creating and saving an HTML document as a template, you want to put an exclamation point (!) in front of the file name (!template.html). When you put the (!) point in the front, it tells the computer to place the document at the top of the list of file names in a folder. When you use a template, the first step is to re-save the document under another file name so that you do not lose your template. When you re-save the template under another file name, you do not include the exclamation (!) point. What information is included in a template? When you create a template for your Web site, you want to include all of the information that will be every page within your Web site. Usually this information will include the following: 1. HTML Shell 2. Language tag 3. Metadata tags 4. The Four Sections 1
-
Upload
truongdien -
Category
Documents
-
view
212 -
download
0
Transcript of cathiemurphy.files.wordpress.com€¦ · Web viewformat and design a Web page by ... it tells the...
3/13/2017
Chapter 4: Design & Layout of Web Pages
ESSENTIAL OUTCOME
4. Students will create, format and design a Web page by:a) Utilizing id and class selectors as well as grouping selectorsb) Styling horizontal relative navbar linksc) Inserting background images d) Order of element & section selectorse) Color Choicesf) Connecting key terms in the chapter with application.
!Template
In this chapter, you will learn about using templates for your exercises. A template is a sample document that already has some coding and can be adapted for use when creating another document. When you are creating and saving an HTML document as a template, you want to put an exclamation point (!) in front of the file name (!template.html). When you put the (!) point in the front, it tells the computer to place the document at the top of the list of file names in a folder. When you use a template, the first step is to re-save the document under another file name so that you do not lose your template. When you re-save the template under another file name, you do not include the exclamation (!) point.
What information is included in a template? When you create a template for your Web site, you want to include all of the information that will be every page within your Web site. Usually this information will include the following:
1. HTML Shell2. Language tag3. Metadata tags4. The Four Sections5. Relative, Absolute, Social, Image & Email links (provided all of these are appropriate) &
they should be linked6. Any text with tags that will be included on every page (if you do not want the
information on every page, they do not include it in the template)7. Footer information
Id Selectors
In the Chapter 2, you learned how to set up inline CSS by inserting the style attribute inside a HMTL tag. <p style=“color: #ffffff; font-size: 2em;”>. In Chapter 3, you learned how to use element selectors to style HTML tags inside the <body> tag. Element selectors are placed inside the <style></style> within the <head> tag. The element selectors are responsible for setting the styling for all of the HTML tags that are placed inside the <body> tag such as the header, nav,
1
3/13/2017
div, footer, paragraph tags, etc. In this Chapter, you will now learn how to style Web pages by using the id selector. The id selector is used to style only one element on the page.
Id Selector Rules
When applying an id selector to a tag, you need to follow these rules:
Each element can have only one special ID or nameEach page can have only one element with that ID
If you have more than one id selector on more than one element, your code will not pass the CSS validation check.
Now, here is the catch with id selectors. You have to place the id selector in two locations. First you need to place the id name given to the id selector inside its HTML tag that is located somewhere between the opening and closing <body> tag; and second, you will have to go to the <style> tag inside the <head> tag and add the id selector.
First step: In the example to the left, the heading 1 HTML tag has an id name. This id name is placed inside the <h1> tag, and targets ONLY this specific <h1> tag. Any other <h1> tag on the page will not be affected.
Second step: After writing the id name inside the HTML tag, the second step is to write the #h1 id selector between the <style> tag. All id selectors start with a hash (#) character, followed by the specific id name of the element. NOTE: An id name cannot start with a number!
Summary: In Figure 1, the id name was set for only the <h1> tag in the <header> section using the “id” name. In Figure 2, the id selector was established to target only that <h1> tag with a specific font color and a font-family.
Practice Exercise 1: Create a folder inside your Chapter 4 folder called “Practice”. You are to save your practice template inside the practice folder. The practice template should have been shared with you on Google Drive. Change the file name to “practice_1.html”.
2
Figure 1: id name
Figure 2: id selector
3/13/2017
1. Open up the practice template for the exercise shared with you on the shared drive in Google. Run the template in the browser. Notice that the font color is white, the background color is black, and the font family is Arial.
2. Now, to override the universal selector, you are going to use an id selector to change only the <h1> element that is located inside the <header> tag.
3. First, come up with a unique id name for the selector. It is advisable to use a name that relates to the element itself so it is easy to identify the various selectors. Let’s use an id name called “h1”. This way we know that the changes we make apply only to the heading 1 tag.
4. The first step is to go to the <body> section and find the <h1> tag in the <header> section and add the following id name inside the <h1> HTML tag:
5. The last step is to actually set the id selector in the <style> tag following the universal selector. All id selectors start with the (#) hash tag followed by the id name. Then we will change the color.
6. Run the page. The main heading should now be the color yellow. The rest of the text on the page is still white (due to the universal selector).
7. You are now going to add another property-value for the heading 1 selector. Change the font family to Old English Text MT. Since “Old English Text MT” is more than one word, make sure you put it inside quotation marks.
8. Run the page. The heading 1 tag should still be yellow and the font family now should be Old English Text MT. The rest of the text on the page will remain Arial with white font.
9. Header section: you are now going to add one more element selector. Between the #h1 id selector and the universal selector, add the following (see image to right). The header selector will be an element selector that will apply to the header section.
10. Review your work: When you reach this point, please show me your completed work.
3
3/13/2017
Class Selectors
You have just learned how to use the id selector to change one HTML tag on a page. What do you do if you have a series of HTML tags that you want to all look the same? Instead of writing separate element selectors for each one of them, you can assign them a “class”. So, this is where you would use the class selector to style those various HTML tag.
Class Selector Rules:
You can use the same class on multiple elements.You can use multiple classes on the same element.
Now, here is the catch with class selectors. You have to place the class selector in two locations (just like the id selector). First you need to place the name given to the class selector in its HTML tags inside the <body> tag; and second, you will have to go to the <style> tag inside the <head> tag and add the class selector.
First step: In the example to the right, the first two h2 tags will be become class selectors. The third h2 tag will not be given the class name.
This class name is placed inside the <h2> tags, using the class name followed by the value (h2). The class name chosen is related to the tag that we apply the class to. We will target two out of the three <h2> tags. The third <h2> tag will not be affected (see Figure 3).
Second step: After writing the class name inside the HTML tag, the second step is to write the #h2 class selector between the <style> tag (see Figure 4). All class selectors start with a period ( . ) character, followed by the specific class name of the element. NOTE: A class name cannot start with a number! Both of these h2 tags will be styled with color and a font family name (see Figure 4).
4
Figure 3: Class name
Figure 4: Class selectorFigure 4: Class selectorFigure 4: Class selectorFigure 4: Class selectorFigure 4: Class selectorFigure 4: Class selectorFigure 4: Class selectorFigure 4: Class selectorFigure 4: Class selectorFigure 4: Class selector
3/13/2017
Practice Exercise 2: Open up the file name “practice_1.html” in Notepad++.
1. Go to the <div> section on the page. You want to change the colors of the <h2>s in that section. We want the 1st, 3rd & 5th to be the color #ff00ff. The 2nd, 4th and 6th to be #ffff00.
2. The first step is to go to the <body> tag and find the 1st, 3rd & 5th <h2> tags and add the class selector (see image to the right). When you have finished, there should be
3. Now, go up into the style tag, following the #h1 id selector and add the class selector for the h2 tags. NOTE: the class selector starts with a dot ( . ) rather than a # character.
4. Run the Webpage in a browser. The 1st, 3rd, & 5th heading 2s should be the color pink.
5. The next step is to step up another class selector for the 2nd, 4th & 6th heading 2 tags. Make the color of the h2, #ffff00. The class name is “h22”.
6. Now, go up into the style tag, following the #h2 class selector and add the class selector for the h22 tags. NOTE: the class selector starts with a dot ( . ) rather than a # character.
7. Run the Webpage in a browser. The 2nd, 4th and 6th side headings should be the color yellow.
8. Nav & Div section: using the idea of grouping elements, add the nav & div element selectors following the header element selector separated by commas in the style tag.
9. Run the page. Notice that the div section has an overflow. We need to fix this.
10. Inside the div element: go to the div tag in the <body> section. Add an id name called div. Then create an id selector call #div following the header, div element selectors. Add the overflow property with the scroll value and padding.
11. The Footer: the last step is to set up the footer. We want the footer to have the same property values as the header and div section. So, all we need to do is add the “footer” to the “header, div” element selectors, separated by a comma.
5
3/13/2017
12. Footer id selector: since we want the text in the footer to be centered, create an id selector for the footer that centers the text. The footer id selector should be placed AFTER the div id selector.
13. Nav id selector: create an id selector for the nav section that will change the font size of the links to 1.3em. The nav id selector is placed right above the div id selector.
14. Image: add an image tag that is related to the theme of the Web page BEFORE the <h1> tag in the <header> section.
a. Create an img selector that contains the width and height for the image.b. Center the image (see image selector for correct procedure for centering image).c. Add a border-radius of 5%.d. Adjust the “max-height” in the header, nav, div and
footer group selector to 300px. If the <h1> and the image still do not fit inside the header section, adjust the px until it does.
e. In the #h1 id selector, center the heading on the page.15. Anchor selector: the last step is to add an anchor selector
that changes the font color to yellow or pink (it’s your choice). The anchor selector should follow the img selector. NOTE: don’t forget to add your email address for “Contact Us” in the footer.
16. Run the page in the browser. When you have finished, the page should look as follows.
17. Review: call me over to review your work.
Horizontal Relative Navbars
Horizontal relative navbars are links that run from left margin to right margin and provide the links for pages within the Website. As you know, when you set up the unordered list, it functions as a block-level element.
The first step is to create space between each of the line item tags by adding non-character, horizontal spacing between each line tag (see Figure 5).
The next step is to trick CSS into changing the vertical set up of an unordered list to a horizontal set-up. Up to this point, we have used the li selector to set up the navbar. However, we need to get a little more detailed in order to learn how to set up a full horizontal navbar. You are going to use the Practice Exercise 3 to learn how to set up an official horizontal navbar.
6
Figure 5: Horizontal spacing
3/13/2017
Practice Exercise 3: Setting up a professional horizontal navbar.
1. Return to Notepad++ Go to the header, nav, div and footer group selector and change the max-width to 1000px.
2. Add the body selector with margins for the top, right, bottom and left.3. Find the nav id selector. Place your cursor
after the nav, and add a comma. Then add the selector, ul a (see diagram to right).
4. Above the font-size, add the text-decoration: none; property value. This value removes the underline from the link.
5. Run the Webpage in the browser tab.6. After the #nav, ul a selector, you will add
another #nav li selector. This selector will include the following property values:a. list-style-type: none; removes the bullets.b. display: inline; sets the list as horizontalc. padding: will help center the links on the
page.7. You have already set the color of the anchor
tag by using the anchor selector. However, the next selector will set the link so that when your cursor rolls over the link, it will change the anchor color as well as display the underline.
8. Run the page in the browser.
Adding a Background Image
You can also add a background image (image that is placed behind text) to a Web page or inside a block element. When you add an image to the background of the Web
7
Figure 6: Li element selector
3/13/2017
page, place the background image declaration inside the body selector. If you want the image inside a block level element, use the specific element selector. When you use an image for a page background, you do not need to include the height and width of the image. However, you want to make sure the image is large enough so that it does not tile. Tiling is a form of layering that keeps applying the same image over and over again until it fills up the entire page. By default, a background-image is repeated both vertically and horizontally.
In the following example, a background image has been added to the Web page using the declaration on the right.
Prevent Tiling: If you do not want your image to tile in the background, you can add the following no-repeat value. For more options on preventing tiling, click here.
NOTE: in order to add the bar and spacing between each of the links, use the non-break horizontal space ( )
character code. In order to get an equivalent of one space, you need to add two non-break horizontal space character codes.
9. Return to Notepad++.10. Find a “dark” ocean or water image to use as a background to your page. Try to find the
largest picture you can find (somewhere around 1500 pixels for width or larger).11. Use the body selector to insert an image as the background to your document.12. Review: show me your work when you have finished. Close out of the document.
ORDER OF SELECTORS
When you are setting up selectors, follow these norm standards:
1. universal selectors2. body selector3. section selectors (groupings of selectors, header, nav, div, footer)4. id section selectors (usually follows the specific section selector)5. grouping class selectors (usually follow the specific section selector)6. HTML element selectors7. HTML id selectors (usually follows the specific HTML selector)8. HTML class selectors (usually follows the specific HTML selector)
8
3/13/2017
Color Choices for Websites
Up to this point, we have been using color choices that are polar opposites so that you could see what each block of text was doing in regards to styling. However, this is NOT the proper use of coloring for a page. When you choose color choices, you need to think in “similar” opposites. For example, if you have a dark background color to your page, then the color for you font should be a “light” color that is similar to the dark color used (not a medium color). You want contrast so that the font text is easy to read.
Now, let’s say that you want to use a dark purple for your background. The color choice for your font should be a light version of purple. NOTE: you could also use a light yellow or white.
If you review the color chart to the right (taken from the W3C School), you will see that there are a lot of choices for a lighter purple color for text. You would not use a medium purple due to the fact that it may be difficult to read by some users.
If you choose a black background, you would NEVER use a medium red or blue for the font color. Rather, you would choose a very light version of red or blue. If you choose a very light color for your background, then you need to choose a very DARK color for you text.
In general, do not use more than three colors on a web page.
To Top of Document
9
