CIS 195 - Web Authoring 1
Lab 5 Instructions
Using CSS to Control Web Page Layout
You will practice using CSS by applying it to the review web site you made in labs 2 and 4.
Part 1
You will use the single web page from lab 4, part 1 (originally done for lab 2, part 1, it was a single page with a review of something) as your starting point.
- Create an external CSS file with rules that:
- Set a background image.
- Set a fixed width for the body of the page.
- Use the float property to move the figure to the right side of the page.
- Use the clear property to end the float.
Part 2
Use lab 4, part 2 as a starting point. (Originally done for lab 2, part 2. It was a review site with a home page and at least three review pages.)
- Use float and other appropriate CSS properties to create navigation links on each page. The navigation list should be arranged horizontally and links should look like buttons (have a colored background, no bullets, etc.) rather than links.
- On at least one figure:
- Add padding, a visible border, and margin.
- Make the corners of the figure rounded.
- Use relative positioning to place the figure somewhere other than its original location.
- For the header of each page (including the home page):
- Add a background image.
- Set the Z order so that the heading (H1) is on top.
Check your pages using the W3C HTML Validator and the W3C CSS Validator.
Submission
Publishing to citstudent
- Use FileZilla to upload the folders containing your web site to citstudent.
- Do not zip the files.
- If both parts 1 and 2 are in the same web site (as they should be), you can just upload that one web site.
- Record the URL (web address) of your home page so that you can enter it on Canvas. Hint: remember that public_html is not part of the URL.
Submitting to Canvas
-
Zip the web site (assuming parts 1 and 2 are in the same web site).
-
Upload the zip file to Canvas.
-
Enter the URL (web address) of your site’s home page in the “Online Text” box for this assignment on Canvas. This is important—without this, I won’t be able to find your web page on the internet.
Web Authoring Lab Instructions by Brian Bird are licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.