Chapter 7 Reviews: Although no points are earned for the Quizlet tests, it is highly recommended that students know the answers. It is an excellent way to prepare for both the weekly quizzes and major tests.
Test 2 Review Sheet: Test 2 Review It is highly recommended that students work through the test review sheets as each chapter is studied. It will help with learning the material and may reduce the amount of study time required for the major tests.
This week... will be a busy week! Get started early! Do not wait until the last minute!
I hope you are up to the challenge.
Be sure you have a good understanding of the concepts before you begin the assignment. It will make the assignments go more quickly.
As I mentioned in the past, it is highly recommended that you complete all of the tutorials in the chapter. (I hope you are doing this!) These items may be on the test even if they are not required for your weekly assignments. (It would be impossible to cover all of the concepts in the assignments.) Be sure to work through each of these and understand them thoroughly.
Unfortunately, the assignment does not include a three column layout. So it is more important than ever that you complete the following so that you have experience in this area.
p. 304 Hands-On Practice 7-5 (Three-column layout)
p. 313 Hands-On Practice 7-6
(Print)
p. 322 Hands-On Practice 7-7
(Mobile and media query)
p. 325 Hands-On Practice 7-8
(Responsive web design)
p. 330 Hands-On Practice 7-9
(Flexbox layout)
If you have questions or are not certain about a concept, post to the Discussion List, contact me, or get with one of the tutors in the Student Computer Center. Whatever you do, please do not wait too long to get help. We are here waiting for you!
Chapter 7:
p. 296, Relative Link Examples
Take time to really understand this. While the author place all files in one folder, that is not a good practice for large sites. Imagine if your computer had no folders. Everything was in the main folder. Could you imagine how difficult it would be to find a file? Or imagine a big box with all of a company's bills and receipts for the last ten years. It would be virtually impossible to find anything. Most well-organized sites organize the web files. In this class, the minimum requirement is an images folder so that the images are separated from the web pages.
Also, I want to take this opportunity to again emphasize the importance of relative links versus absolute links within the same website. If a link within a website was created from the homepage to the resources page using the following absolute link of href="http://apollo.occc.edu/user/resources.html", the link would work as long as the website was located on the apollo server. If the site was move to, say, saturn.occc.edu the link would have to be modified to href="http://saturn.occc.edu/user/resources.html". This might not be bad for one link, but if there were maybe 50 to 100 pages in the website and all links were absolute, this could become a daunting task. If the original link had been coded using a relative link such as href="resources.html", no modifications would be needed when the site was moved to a new server.
p. 298, Fragment Identifiers
If any of you have previously worked with HTML, you might remember named anchors. Fragment identifiers basically have the same functionality. Instead of using the anchor tag to name the target, the id is used.
p. 300, Landmark Roles with Aria
The YouTube video referenced in the text provides an excellent overview of this accessibility feature. However, at the time of this writing, the link in the text did not work. The correct link is http://youtu.be/IhWMou12_Vk
p. 304, Three-Column CSS Page Layout
Again, it is important that you take the time to do Hands-On Practice 7.5
p. 311, Configure Font Size and Color for Printing
I want to emphasize the importance of changing background colors and/or images for print purposes. It could user a great deal of toner/printer ink. In conjunction with that, the text mentions changing the font color to black. This is an excellent suggestion for two reasons. Some colors may look great on the screen but print a great deal lighter than expected making them hard to read. Second, if the web page has a dark background with white or light text and the background color/image is not printed, what happens? White text on a white background..and the user cannot read the printed copy!
When grading assignments requiring a print version, I purposely set it to print the background. This will allow me to make sure the necessary adjustments to background and text colors have been made.
FireFox: in Print check the boxes for "Print Background Colors” and "Print Background Images".
Internet Explorer: in Page Setup check "Print Background Color and Images"
Safari: in Print check "Print Backgrounds"
Chrome: under Options select "Background Color and Images"
Although the book does not state this, @media queries should go at the end of the CSS file. Do not place it at the beginning. Students who have placed them at the beginning have found that the styles are not applied to the web pages. One theory is that the browser executes the code at the top of the file first, and then works its way down the page. Thus, the specific @media styles are overwritten by the more generic code that applies to all web pages. So, be sure to place the @media queries at the end of the CSS file.
p. 326, Testing Mobile Display
The text gives an number of options for testing mobile websites and responsive design. In an effort to use the KISS principle (Keep it Short and Simple! -- Okay, so some of you may know it as Keep it Simple, Stupid! However, that version is not appropriate for an academic environment - so I am going with the more professional interpretation!)
When using the Web Developer Toolbar, select Resize-->View Responsive Layout. Another item you might want to select is Display Window Size or Display Window Size in Title (Note: Available in FireFox. This will allow it to appear on the tab. If the window is resized, the page must be reloaded/refreshed for the window size to be changed.)
Note: This should already be installed on your computer but if needed, the link is: http://chrispederick.com/work/web-developer/
It is available for Chrome, FireFox, and Opera.
Resize Menu in Chrome
Example of Responsive Design
