Modifying an Existing Template Assignment-1
You will be working with the "design- portfolio-template".
This assignment is intended to aid you in identifying the structure and key components of existing pages or templates in order to make modifications to suit your needs. This template was chosen primarily for the "image boxes", which is the structural element you are going to use for displaying images.
Your assignment will be to identify the following key elements of this template:- Components of the Header
- The header background image
- What creates the background color
- List the components of the main body of the page e.g.; main-content, sidebar, etc...
Once that is done, these will be the changes that are expected to be done to the page:
- The new file should have the new HTML5 Dtd (Doctype decleration).
- Use only the accompanying style sheet for your CSS, do not use inline or style blocks!
- Replace the header background with an image that will represent an auto dealership or your personal interest in automobiles.
- Replace the logo and slogan which is outlined in red in the above screenshot, with your own.
- Change the color scheme to colors of your choice, as long as it does not use any of the original colors!
- Remove the sidebar without disrupting the flow of the page.
- Add text in the area between the header and the image boxes consisting of a bio or description.
- The content width, which is the area designated by the orange line on the above screenshot, should be set for 960px.
- Utilize the image boxes to display pictures of different vehicles. Make at least three images for this purpose (there are many existing automobile related images in the HTML 101 folder). Here is a hint, note the dimensions of the image boxes you plan on using and resize the images accordingly, even if you have to create containers in Artweaver. Treat the images with importance to your project, so do not skimp on the quality (if you were displaying your personal vehicle for show on the web would you use a cockeyed or skewed pic?).
- Create a hyperlink from the image box (thumbnail you created to the existing full sized image).
- Whichever images you choose, optimize the size to match the containers that you will be using (large, small, or rectangular image boxes).
- Replace the footer with something consistent to the new design and should only contain the designers information.
- Remove all JavaScript related code.
- Remove all unnecessary code from the page.
Modifying an Existing Template Assignment-2
You will be working with the "Heavenly Bliss template".
As with the last assignment, this one is also going to have you indentify structure and key components of the existing templates in order to make modifications to suit your needs. This template was chosen specifically for its 3-column lay-out and overall generic look.
Your assignment will be to identify the following key elements of this template:- Name the different wrappers used
- Note the different components within the wrappers (<div id>)
- What do those components do?
- List the components of the main body of the page e.g.; main-content, sidebar, etc...
- The new file should have the new HTML5 Dtd (Doctype decleration).
- Use only the accompanying style sheet for your CSS, do not use inline or style blocks!
- Make the navigation bar fixed so that it will be displayed even when scrolling down.
- Replace the banner image.
- Change the body background color to a gradient. There is more than one way to accomplish this, the simplest being to create a strip in "Artweaver" and setting it to repeat along the appropriate axis it in your stylesheet.
- Match the menu background with the body background
- Change the anchor text to a blue to match the background
- As you will see in the image of Example-2 above, each wrapper segment is
labeled ("sidebar", "content", "sidebar 2").
- Make the background for "sidebar" transparent
- Add a subtle background to "content using alpha-blending.
- Make the text-color in "content" white
- Make the background for "sidebar" transparent
- Add the same background from content to the footer.
Save the results in your HTML 201 folder.
This excersise was intended to show you how some quick and simple changes in the stylesheet can do. Total time to complete this project should be less than 10 minutes.
