Web Authoring 1 - Final Assignment Due in last class.
- Create a 3 page website •
Project to be built using Adobe Photoshop, Dreamweaver &/or possibly NotePad or TextEdit.
Your Root directory should look like this:
Beginning Instructions:
1. Use Dreamweaver or NotePad++ to build your site.
If using Dreamweaver here is a link to setting up your site when you begin and work on your project. How to video
2. Root folder must contain a folder named "images" for images & a folder named "CSS" for your css file.
3. Must Use One External Cascading Style Sheet for all CSS styles. Name it "yourLastName.css" and save it in the CSS folder.
4. Make sure all your images and css file are in their proper folders before making html files.
5. As soon as you create a new html file SAVE IT IMMEDIATELY! (especially in Dreamweaver. This will ensure your links work as relative links.)
6. Create a CSS style sheet and sve it in the CSS folder. All files will link to this common CSS file.
Details for Each Page:
Home Page:
A- Must name your home page "index.html"
B - Must create a graphic Navigation Bar using a Table with 1 row and 3 columns with 3 Graphics as links to other pages.
You will need to create the graphic buttons as jpgs in Photoshop.
Buttons will link to Home, Page 2 and Page 3. (use 2 empty paragraphs under the table to create space.)
- This should be on each page.
C - Insert your Name and format it to H1.
D - Add paragraph with some BOLD words in it.
E - Include a second table below the first table with 1 Row and 2 columns.
Inside the left cell Include a 300 x 300 pixels square image.
Inside the right cell Put an H2 title and a list below it. Align text to center of table cell and add colour to table cell background.
This table will have a border created with the CSS Class style named "profile".
F- Add a hypertect Link that links to an external website.
Page2 :
HTML - link file to your CSS stylesheet.
A - Include the same Navigation bar as on Home page.
B - Add 3 images on page and position them to unique locations using CSS.
CSS
1. Attibutes listed in screenshots below.
Page 3 - link file to your CSS stylesheet.
HTML
A- Add a Div tag and use CSS to create size, background colour, border, absolute position location and adjustable width by percentage.
CSS
1. Attibutes listed in screenshots below.
CSS file summary:
Should have these items:
1." body" selector style - for default font and background colour
2." h1" selector style - apply Colour & Size to your Name
3. "img" selector style- apply property - display: block to get rid of white line on bottom of photos in a table cell.
4. class style called "profile" - for Table border on Home page
5. class style called "divstretch" - for Div Tag on page 3
6. ID called "dog01" (using position:absolute) - for image on page 3
7. ID called "dog02"
(using position:absolute) - for image on page 3
8. ID called "dog03"
(using position:absolute) - for image on page 3
Screenshots of CSS Details
Selectors
Class Styles
ID Styles
Hand In - Upload Zipped Root folder to CANVAS