NOTES:
• This score on this project is not eligible to be dropped as your lowest independent project score.
• No GUI editors may be used to complete this project. You must generate all code yourself.
In this project, we will use the more advanced CSS properties that have been presented in the past few weeks. This should include box model properties, positioning properties, and the various types of selector rules (child, siblings, descendant, etc.) as appropriate. Please note that as I grade your independent projects, a good portion of your grade will be based on how extensively and effectively you are using CSS. With current industry standards placing the formatting, positioning, and style rules completely separate from the HTML5 code that adds the page content, both HTML and CSS knowledge are necessary in order to create professional Web pages. In order to assess your learning, you need to demonstrate you can effectively use both. You may create a page that has the required content that only scores a C, or average, grade if you aren’t showing you can correctly implement and apply the advanced CSS techniques we are covering.
Many professional and commercial web sites use a layout similar to the two-column layout below:
On the left side, the page has a column that contains a navigation bar: a list of links that take the user to other pages or places within the web site. The top section often displays the heading for the site, such as the company logo, tagline, links to main content areas (such as the log in page, customer service, shopping cart, etc). The large bottom right section contains the main text and images for the page (and sometimes is also divided into multiple areas). This layout then serves as the template for all pages in the site. That is, every page has the navigation bar on the left, the heading section at the top, and the bulk of the page content in the content area. This type of design gives the surfer a good sense of where he/she is at all times and prevents surfers from getting lost among the links. Use positioning to accomplish this layout! Tables are NOT to be used in this project.
The web site you are going to create in this assignment is a book store site which will display a variety of books by category. The links on the navigation bar will list at least three categories (e.g. Mystery, Science Fiction, Textbooks, Romance, Non-fiction, or similar) plus the link back to the Home page. On the right, the page content will be displayed. I am also going to have you add a footer area with the store contact info.
You do not need to include a shopping cart or the functionality associated with actually purchasing the products. This will be an ‘informational’ product catalog site only to keep the scope a bit more manageable.
You may use images from the Web since we are not publicly publishing your sites. I am not requiring you to cite your sources or provide references.
Continued
Perform the following tasks:
Remember, you must generate the code for this project; do not use a GUI HTML editor to do the work for you.
No base files are provided. Use HTML5 and place all CSS in an external style sheet. All files and folders associated with this project should be in a folder named
BookStore_YourLastnameFirstname. Appropriate subdirectories should be included to keep content organized.
Collect images on the Internet for a variety of books. Save the images in a subfolder named “images”. Be sure to use images with appropriate file sizes.
Create the store’s home page. You should have a header area with a minimum of company name and logo, left navigation area with your minimum of three page links plus the link to the Home page, main content area, and a footer with the store contact information. In the content area for the home page, display a bit of information about your company, general information you feel appropriate for your store’s home page, and include a section that shows a few images of featured or sale items.
Create at least three other HTML pages, one for each category you will be using. These category pages should include the header, navigation, content, and footer areas seen on the home page. In the content area for these pages, please show an image of a product that falls under that category, along with details of the product, such as a description and price. Use CSS to wrap the product detail text so the details/product descriptions appear next to the picture instead of having the image on a line by itself.
Each page should use the same stylesheet, which will serve as a template for the layout.
Be sure to use CSS to create a professional appearing site that represents your company well. All images should be styled using box model properties to demonstrate your mastery of how to use them. Page color scheme should be aesthetically pleasing and appropriate for a business setting. Feel free to use one of the color tools found in the Resources area of our Blackboard classroom if you need help selecting cohesive colors. Images are to be consistently formatted. Pages should be designed to try to accommodate all users with appropriate accessibility features.
