Dec 10 2009

Adding a Logo, Footer and Slideshow

Whew! I am glad we are through the DIVs. They are going to be an integral part of the rest of this series. If you don’t understand them, take a moment or two and go back over my previous post.

 

Today’s goal it to add a Logo image in the upper section of the page and to add a footer to the bottom of the page.

 

This will require an image for the logo and some text for the footer. You should determine the exact size of the image in pixels. I used Photoshop. Both these elements will be enclosed within DIVs. The DIVs will have an ID so that we can style those elements in the css file.

 

Here goes.

 

Create a directory called “images” (lower case) within your website directory. If you are following this tutorial from the beginning the path would be – c:\website\images

Place your logo in that directory. Create a blank page as we have done previously. Add the following code to a blank page.

 

<div id=”logotoleft”>

  <img src=”images/horizontallogo.png” width=”651″ height=”133″ border=”0″>

</div>  <!– End of Div  –>

 

The DIV ensures the logo will be placed in the upper left hand corner (my menu will occupy the upper right). The place the following code in the css file we created earlier.

#logotoleft

{

float: left;

}

 

The #logotoleft identifies the code. The float: left; places items inside the div up against the left side of the page.

 

Save the .css file and your new web page. Then run the web page. Your logo should be displayed in the upper left hand corner of the page.

 

Let’s add a footer to the page. I want my footer centered. I will use a DIV to center the text. Here is an odd thing about this DIV. I want to center the text within the DIV and not the DIV itself. I want to ensure nothing occurs before or after the DIV so I make the DIV’s width 100%. Then I align the text within the DIV with the text-align: center; statement. There is an important difference between centering the DIV on the page and centering text within the DIV. If you center the DIV and not the text your text will be left aligned.

 

#footer

{

text-align: center;

width: 100%;

}

 

That’s it. We now have a page with a logo on the left and a centered footer. You can download the zip file to see my code in the actual page and css file.

 

http://www.patrickdillonphotography.com/computer/blog/logo.zip

 

That was too easy. Let’s add a slide show to our page. I will use ProShow Gold in my example.

 

My goal is to produce a flash file that I can place on my web site. I also want ProShow Gold to produce the code to place in my web page. Here is how all of that is done.

 

I have created screenshots of each step. They can be downloaded from

 

http://www.patrickdillonphotography.com/computer/blog/proshowgoldscreenshots.zip

 

Open your slide show (Create a slide show first. Refer to their web site if you are new to ProShow Gold.)

Choose Create Output – step1.jpg

Choose Flash – Flash video for the web – step2.jpg

 

I didn’t want menus and I wanted the slide show to begin playing as soon as the web page is loaded. I choose the No Menu choice – step3.jpg.

 

From the Shows tab, I thought about having an intro slideshow but decided against it in the end. Notice the Intro Slideshow check box is not checked – step4.jpg

 

From the Options tab, slide5.jpg, I set the final options before I created the slideshow. Under Video Player Options, I knew I didn’t want controls on my page so this checkbox is unselected.

I also want to have the show loop continuously. This option is checked under the Output Options section.

Everything else on the page that I circled in red relates to output file size. I wanted to get the slideshow to load a quickly as possible. I adjusted the Size of the display, the bandwidth for which it is optimized and the Frame Rate until I go what I felt was a good balance of quality vs. speed.

 

Lastly, I choose the View Html button, slide6.jpg, to get the code to paste into my web page.

 

Once the web page is saved,  use FTP to copy the files created by the above process to my website. I copied the .pcx, .flv and the .swf files to my website. I put them in my root directory with the other html file. I was unable to get this page to run on my local machine so I did all of my testing by coping the files to the web server.  I pasted the code I copied earlier into my web page. Then I tested.

 

I wanted it centered on the page. To accomplish this I used another DIV. Actually, I requires two DIVs. This is because Internet Explorer does not fully support DIVs.

 

Some of you may wonder why I didn’t use the <center> tag. I chose not to use that tag because it is deprecated. The first DIV takes care of the IE bug. The second DIV centers the image for all other browsers.

 

<DIV id=”textaligndiv”>

  <DIV id=”centereddiv>

    <object>

       Flash object as output by ProShow Gold

    </object>  <!—End of Flash Object –>

  </div>  <!—End of id=”centereddiv”  — >

</div id=”textaligndiv”>  <!—End of id=”textaligndiv” — >

 

Css file

 

#textaligndiv

{

Text-align: center;

}

 

#centereddiv

{

width: 750px;

margin-left: auto;

margin-right: auto;

}

 

And that’s it. The slideshow page is complete!

 

As a final exercise put all three pages together into a single home.html.

Good luck. If you encounter any problems, you can ask me here on the blog.