1. Book / movie report
Web design

2. Select Book/movie and create a slide for each of the following in PowerPoint
Home
Theme
Characters (These should each have separate slides)
Review
Author/Director

3. Create the Background Image in Photoshop
It may take a few class periods to get it to look the way you want it.
That is ok, don’t worry, that is time well spent.

4. Some Considerations…
What will the dimensions Be? (These were 1100px Width by 1280 Height.)
Font Style, Color,
Size, and Position!
What about background
Color or gradient?
Where to put the
Navigation Bar or
List of Links.
Where will the
Content be housed?
What type of Images
And where will they go?

5. Content Make sure that you have some content on your home page.
Summary might be a quote from the book, or a short overview of the story, something like a movie trailer would have.
Add more info by telling If it is a series or if the author has other books in the works, or perhaps something that might inspire others to read it, too.

6. Write the .html
Write the .html for your document, creating divs when needed.
Create the following divs
Container
Nav
Sidebar
Middle
Footer

7. Write the css to stylize and position text.
Notice that you can position the text in your divs with
.sidebar{
position:absolute;
top:327px;
left:25px;
width:225px;
margin-top:15px;
margin-left:10px;
margin-right:30px;
font-family:arial;
font-size:14;
text-align:justify; }
NOTE!
Make the position:relative; for the
Container-the largest div that
‘contains’ the rest of the content

8. Using CSS to position
Notice that you can position the text & pictures in your divs with tags like these
.sidebar{
position:absolute;
top:327px;
left:25px;
width:225px;
margin-top:15px;
margin-left:10px;
margin-right:30px;
font-family:arial;
font-size:14;
text-align:justify; }

9. Positioning an image
You can try just inserting the image in your html or
You can give your image a div tag and use the css to position the div tag.
My div for the shoes is <div=“ruby”>
.ruby{
float:right;
z-index:2; }
THE Z INDEX
Means that the image will be
on top of the other elements

10. how to stylize links
a:link {
text-decoration:none;
color:green; }
a:visited {
a:hover {
color:red;
a:active {
This means that my links are not automatically underlined
This means that the text for my unclicked links is green
This means that when the links have been clicked on, they go back to being green
This means that if you hover over the link, it will turn red
This means that the link will be red when you click down on it.

11. A Few Words of Advice Have faith
You can do this! Be patient with yourself!
Get help when you need it, but try to figure it out the rest of the time.
Remember to pat yourself on the back, when you get it right!