Life in the Tech Lab

Step 1: Create Your Page in Dreamweaver

Be sure you have Dreamweaver open before starting this step. You should see your site in the FILES section on the right of the page as well.

Follow the steps below to create a blank page.

Click here to watch a video of this step.
	Select File --> New...
	Make sure you are on the GENERAL tab, then follow these directions: Click Basic Page from the left column. Click HTML from the right column.
	Now click Create. This creates a basic web page for us with no frills.
	Now you need to save your file right away. Because everything is linked together in web pages, the sooner you save your file and give it a place to live, the sooner all your links start working correctly. Start by clicking Save from the File menu.
	Name this file home.htm (just use lower case letters). This will become the starting page for your web site. Make sure you are saving in the folder you have created to hold all of your Rome web site assets (like pictures, videos, banners, buttons, etc.). Always remember to copy everything you'll need for a page into the Rome web site folder BEFORE you start working on the page. If you find you haven't copied it there when you go to link it, copy it to the folder FIRST and then come back and link to it, or add it to the page.
	The last step is to check the File Manager and make sure the home.htm page is listed. If it isn't, you may have saved it in the wrong folder. NOW is the time to check!

Step 2: Link to the CSS File

Now that you have created a page, we need to link to the CSS file so all our styles will show up instantly.

Click here to watch a video of this step.
	Find the CSS tab in the area on the right of the work area. Locate the chain link on the bottom of the CSS window and click on it.
	The Attach External Style Sheet dialog box will open. Click Browse to select the CSS file you just downloaded from above and saved in your web site folder. (You DID do that, didn't you??)
	Find the proper file in your Rome web site folder and double click on it to select it.
	Now select the Add as: Link button. This means we are going to just link to page and keep the styles seperate from the actual web page, which is considered best practice in creating good web sites.
	To see if your CSS file was linked properly, look in the CSS window. You should see the name of your file there. In my example, I have expanded the sheet wo we can see the actual CSS elements I have created inside the file.
	That's it! Our first file is created and we've link our CSS file to it. Before we start actually changing CSS attributes, we first need to create the sections (the DIVs) in our home.htm web page so we can actually see the changes we are making! Click Step 3 above for those directions!

Step 3: Add the HTML Code to Create the DIVs

This is the last real technical step to creating your web site. Remember, the CSS file, Rome.css, defines the way we want the sections of the page to look. It's purpose is to keep style changes in a seperate place. If we never use those styles in the web page itself, however, we'll never see them! So, our first task in our home.htm page is to set up the sections, called DIVs in HTML, that build the structure for our page. When you open the style sheet and look at it, any line that starts with a '#' sign signifies the beginning of a definition of a DIV.

Let's get started adding the DIVs to our home.htm web page.

Click here to watch a video of this step.
	Click Split so you can see the HMTL code and the page design at the same time.
	Now we are ready to add the first DIV (section). Click Insert. Slide down to Layout Objects. Slide over to Div Tag in the flyout menu.
	The first DIV we want to create is the 'container' DIV. If you remember, this holds all the other DIVs together and allows us to add some cool effects like a drop shadow to our page to make it look like it is floating on top of the background. Find the ID section of the dialog box that opened and click on the box to the right. You should see all the DIVs that are defined in the Rome.css style sheet. Click on container to select it, then click OK to insert it in the page.
	The DIV looks like this on the page. Not very impressive, is it? Dreamweaver isn't able to display a lot of the styles without previewing them in a web browser, so don't worry about looks just yet!
	IMMEDIATELY after inserting the container DIV, before you click anywhere, go back and repeat Step 2 to insert the next DIV, 'heading.'
	Now find the line in the code section of your page that looks the one on the right and click at the end of it, and then press return to insert a blank line.
	Repeat Step 2, this time inserting the 'menu' DIV. You'll notice that each time we insert a DIV, it disappears from the choices in the drop down menu. This is because we can only use a DIV ONCE on a page!
	Next find the menu DIV line, click at the end and press return to insert a blank line, then insert the 'pageContent' DIV.
	Repeat the steps to add a DIV, but this time add the 'footer' DIV. If you have successfully added ALL the DIVs previously, this will be the only DIV remaining.       We don't want to show anything in the 'footer' DIV. It is there merely to help us close up the page. So, select all the text in this DIV and delete as shown on the right.

Understanding the Basic Layout

The CSS file creates 4 new sections. If you look at the illustration on the right, you can see each one illustrated. #container is what we call a "wrapper." It contains the three main sections of our site in one box and holds things together. We define the background color of this container to be the same as the menu background color, which allows the page to look like it has a continuous menu, even though that is technically very difficult. The #body is the page background itself. In the sample web site I used an image that is repeated over and over. You can do a web search using the terms 'web page texture' and find LOTS of these files ready made for you to use. As you make changes to your CSS file, keep in mind where each section lives and what might happen to it as you make your changes! Right Click and Save Target as...to download the CSS File to your web site folder.

The 'body' Section

The body section defines the elements of the entire page. Generally you shouldn't define too many things here. We just set the color of the page and then link to a file that will be repeated over and over on the page to create a textured background.

You should download a background texture for your webpage (save it in your 'Images' folder) and then link to that image for your background-image. Want to see the fast way to accomplish this? Click here!

You can make your page much more appealing by using backgrounds. For a more detailed explanation of the background property, click here!

The '#container' Section

This section is called a "div," which you could think of as a box on your web page. The function of the 'container' div is to hold all the other sections together in one piece. This allows you to create cool effects, like add a shadow effect to make your page stand off the page, position things correctly on your web page without a lot of work and also to color the background of 'container' to match the background color of the menu. This makes your page flow better from top to bottom without ugly blocks of strange colors.

The 'box-shadow' property makes your page look GREAT, but it can only be used with the newest web browsers. Internet Explorer doesn't display it, so if you want to see it on a school computer, you'll need to use either Firefox or Google Chrome.

You can learn about all the 'box-shadow' details by clicking here.

The '#heading' Section

#heading is also a 'div,' but it is placed INSIDE the '#container' div, which as we said before, holds all the parts of the page together for us. The basic heading breaks down like this:

1. Lines 1-3 set up the border.
2. Lines 4-6 identify and position the banner graphic you created earlier.
3. Lines 7-8 set the size of the header to match your banner graphic.

The '#menu' Section

The menu section sits under the heading on the left hand side of the page. It "floats" on the page, which means it allows other divs to live to its right side. The menu section is our navigational section and will contain the links to all the other pages, which we will create graphics that will serve as buttons for each link.

An important part of website design is to think about leaving clues that help people uniderstand where they are at any given time in your page. One easy way to do that is through the use of color. If you look closely at the Sample Site, you can see that I've matched the color of the menu background, the title of each page and the color of the text with the color of the button so no matter where you are on the page, you can remember what section you are reading.

Always keep your audience in mind and make it as easy as possible for them to use your web site!

There isn't much to do in the #menu section, but remember that you'll be changing the background color on each page by overriding this style sheet with what we call an "internal style sheet" defined in the <head> section of your page.

The '#pageContent' Section

This is the section that will hold all of your writing, video, panoramas, and pictures. It is the true heart of each page. We want to format this section to be as easy to read as possible. We'll set the background color to be white, or at the least a real light color. If you DO use color, watch that it matches with the other colors on your page!

Read the explanation for each part of this section below.

You'll notice that we can redefine the p (paragraph) and h1 (Heading 1) formats only for text in the 'pageContent' div by using #pageContent before each. We could use H1 in other parts of our page (like in the menu section) and it wouldn't affect that text at all. Cascading Style Sheets allow us to be very precise!

1. Create Your Menu Buttons

Use Fireworks to create buttons for your page. If you are using the dimensions in the Rome.css file without any size changes, they should always be 170 pixels wide. Height is up to you, but don't get too carried away. In the sample site, the buttons are 25 pixels high. Keep in mind that you want all the pages to fit easily in one screen so people don't have to scroll to find a way to navigate to the different pages.

I created the effect of the Day 1 button being indented by making it 170 pixels wide, the same as the other buttons, but I left a 20 pixel transparent spot at the beginning, so it looks as though I've indented it. It makes it easy to fit on the page and doesn't take a lot of tricky positioning.

We are using color as a navigational aid for your site, so each button should be a different color that will match the page it goes with. If you are going to match the color of the font on each page like you saw in the sample site, you'll need to make sure your colors are all on the darker side. Pastels won't work well!

2. Place the Buttons on the Web Page

Now it is time to place the buttons on the page. To do this, you simply insert the graphics for each button in your page. It is easiest to place them all in order, but if you forget one or put one in the wrong spot it is easy to fix it!

Click here to watch a video of this step.
	First select all the text in the menu DIV and delete it.
	Now: Click Insert on the menu bar. Click Image on the drop down menu. Then open the image that you want to use for the first button. In my case that is the home.png file I created earlier in Fireworks.
	This opens up a dialog box where we create the ALT tag. This helps those who have various handicaps use our web page effectively. Type in Home Page since this is what this graphic refers to.
	The ALT tag option is used to help those with handicaps such as blindness use our page. Since they can’t read what is shown, they have page readers that can read the page for them. That doesn’t work when we put images on the page, so each picture can have alternative text (hence the ALT tag) that describes what the picture is or does. Programmers have a variety of tricks to use the ALT tag to make web pages better for ALL of us!
	To prepare for the next button, click the mouse immediately after the button. Don't press Enter (Return on Mac). Just make sure the insertion point is blinking right after the graphic.
	Now repeat steps 2 and 3 above to place all the buttons. If you've completed this step correctly, all the buttons should be in the menu DIV, with no spaces or blank spots between them. The example to the right is from the Sample Web Site.

3. Link the Buttons to the Correct Pages

The next, and arguably most important, step is to link the buttons to the proper pages! Since you haven't actually created all the pages yet, we'll have to type in the names for each future page. If you aren't sure of the names, you can find the list by clicking here. Look under the Site Contents tab.

Click here to watch a video of this step.
	Click on the button you want to link to a web page. In the example on the right, we've selected Home.
	Locate the Link area in the properties panel and type in the name of the web page you want to link to. Since this is the Home button, I typed in home.htm. Be sure to use the names provided in the project overview.
	Repeat the above steps for each of the buttons in your menu. Take time to check each button twice to make sure you've linked it. Once you've begun the process of creating all your pages, you'll need to fix any mistakes on every page, not just this one! An ounce of prevention is worth a pound of cure!

1. Copy Files from "Student" on the server

First you need to copy the JQuery and Fancybox files to your web site.

Open to the following location on the server.

Computer --> Student --> Biggs --> 6 - Sixth Grade --> For Rome Photo Gallery

You will see two folders.

Copy these to the folder you are using to create your web site.

2. Insert Correct Code in Your Page

Open your Photo Album page. You will need to copy the code you see below into the HEAD section of your page. I would suggest you place it just before the </head> tag to make sure you don't break any other code you have previously entered. This gets the JavaScript and CSS files you need to make the pictures pop open on the page.

<!-- Fancybox elements for the Photo Gallery Page -->
<!-- Add jQuery library -->
<script type="text/javascript" src="jquery/jquery-1.7.2.min.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="jquery/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="jquery/jquery.fancybox.js"></script>
<!-- Fancybox Javascript -->
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>

3. Create a Table to Hold Your Pictures

Now we need a place to arrange small "thumbnails" of your pictures. In web design, the best tool for this is a table. Follow the steps below to create a table for your picture thumbnails.

Select Insert --> Table from the menu bar.

Change the Rows and Columns number to match the number of pictures you will include. I would suggest you change each to 4 which will allow you to include 16 pictures on your web site.

You will see something similar to this when your table is inserted:

2. Place and Add Code for Pictures

Now comes the part that requires the most detail and attention! You saw that I provided a folder of photos. You can use these to practice for your pictures you'll bring back with you. Let's get started!

First, you'll notice that there are two of each picture in the folder. One has the letters LG at the end, the other doesn't. I've used Fireworks to make the ones without the LG at the end into smaller "thumbnails" that we can place on the page so people can easily go back and look at pictures of their choice. As you have probably guessed, the LG stands for large. We'll link to the large image, but instead of going to another page like most links, we'll add some code that uses Fancybox to open the picture into a cool image gallery on top of your web page. You see it quite often in web pages now, and this is the way.

Begin by placing the thumbnail pictures (the ones without the LG) on your page. Put one picture in each cell of the table. When it asks for the ALT text, you can just type in Colorado. Remember, this is how blind people can read your page, so you'll want to use it later.

Now link each picture to the corresponding picture that has the LG in it. The picture below demonstrates how.