M4: Introduction to CSSClass Recap: In this module, you learned another very very important skill. Using CSS to control/design your web pages. CSS adds a whole new dimension (as well as a new layer of complexity) to the material covered thus far. CSS is a powerful technology that is relatively easy to learn. With practice, it will become second nature to design and build websites using its powerful features. Later on, you will be able to explore some advanced CSS styling, which makes the pages FUN. You were introduced three different methods of including CSS styling in your site. For 99% of the time, you should rely on external CSS. In this module, CSS syntax was also introduced, as was the proper way to write and use the many CSS selectors.
In this module, a very important concept is introduced: using selectors. Especially using child selectors, adjacent selectors and descendant selectors. By using this selectors, you are able to control your page more precisely. You also learned some important pseudo selectors in this module. Student Outcomes:
|
M4 Discussion
Now that you have seen a bit of what CSS can do, are you intimidated or inspired by its power?
<click here> to participate class discussion. (Participation points)
<click here> to participate class discussion. (Participation points)
M4 Homework:
1. View the videos in M5 and complete the tasks
2. Finish your Site Map + Design for Midterm Project
Due Date:
Description:
For this assignment, you will be creating a small website that takes your viewer on a tour of a Bay Area city. It will consist of five HTML pages: one home page with an introduction, and four other pages that have stops on your tour.
For this assignment, you will be creating a small website that takes your viewer on a tour of a Bay Area city. It will consist of five HTML pages: one home page with an introduction, and four other pages that have stops on your tour.
- First plan your tour. It can be your four favorite buildings, 4 favorite used book stores, 4 favorite locations in your neighborhood, 4 cheap places for students in the Bay Area, etc. Be creative and pick something that will be fun for you and your viewers.
- Next you will need to photograph each location. Don’t forget extra image(s) for the home page.
- For this week, please select your topic and visit the location(s), take many pictures, then prepare your site map and design concepts/layouts. (Minimum: 2 different ideas/ home page layouts)
Purpose:
This assignment reinforces the topics covered in the module.
This assignment incorporates knowledge and skills developed through the first half of this course. It also demonstrates an ability to organize content, plan user interaction, and design for the web -- It introduce the process of creating a website from the beginning to completion.
This assignment reinforces the topics covered in the module.
This assignment incorporates knowledge and skills developed through the first half of this course. It also demonstrates an ability to organize content, plan user interaction, and design for the web -- It introduce the process of creating a website from the beginning to completion.
Tools:
Any code editing software of your choice. Photoshop for layout.
Any code editing software of your choice. Photoshop for layout.
Submission Direction:
Your url should look like:
http://yourdomain.com/AAU/wnm249/m4/sitemap.html
http://yourdomain.com/AAU/wnm249/m4/concept1.html
http://yourdomain.com/wnm/WNM249/m4/concept2.html
- Create a project folder inside wnm249 named m4
- Create you site map, save it as an image (gif, png or svg)
- Create a webpage named sitemap.html with the sitemap image on the page
- Create at least two concept layouts including your home page and at least one sub-page.
- Create web pages with each concept on its own page, and title them concept1.html, concept2.html, etc.
- <click here> to post your url on homework submission discussion page (please follow example when posting your work)
Your url should look like:
http://yourdomain.com/AAU/wnm249/m4/sitemap.html
http://yourdomain.com/AAU/wnm249/m4/concept1.html
http://yourdomain.com/wnm/WNM249/m4/concept2.html
Grading Criteria:
Exceeds expectations (A/B) | Meets expectations (C) | Does not meet expectations (D/F) | |
---|---|---|---|
Sitemap | Sitemap is complete, and well organized. The site structure helps site visitors easily find information. | Sitemap is complete, and organized. | Incomplete Sitemap. |
3pts | 2pts | 1pt | |
Concept | Design concepts are intriguing, ideas provided for discussion. Two design concepts are both unique in terms of ideas. | Design concepts
|
At least one design concept provided for discussion. |
3pts | 2pts | 1pt | |
Technical | Concepts are linked from web pages as required. Each concept include a home page design and a sub-page desing. Both images are linked on the same page. |
Design layouts created, however they are not presented on a web page as required. | |
2pts | 1pt | ||
Meeting Deadline | The assignment was turned in on time | The assignment was turned in late. | |
2pts | 0pt |