1. Creating Your Book Review Web Site

2. Select Your Book and create a slide for each of the following in PowerPoint-
Plot
Theme
Characters (These should each have separate slides)
Review
Author/Illustrator
Cover Art

3. Sketch Out Your Layout for your Home Page
You will sketch out your other pages too!

4. 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.

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

6. Content- Make sure that you have some content on your home page.
It 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.

7. Write the .html
Write the .html for your document, creating divs when needed.
My entire .html for this homepage is here: .html
Notice that I created the following divs
Container
Nav
Sidebar
Middle
Content
Ruby

8. Write the css to stylize and position your text.
My css document is here.
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

9. Using CSS to position your text
My css document is here.
Notice that you can position the text 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; }

10. 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

11. Here is an example of how I used my CSS to stylize my 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.

12. 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!