Navtutorial 1

Navigation Tutorial 1
Overview
This tutorial will walk you thru creating working navigation to multiple pages. You will create TEXT
navigation and they will connect to pages you create and to an outside webpage. You will then insert
images into your webpage.
Getting Started
1.
2.
3.
4.
5.
Create a new folder inside of your student folder. Call this folder LastName_NavTutorial1
Go to Canvas.
Download the images.zip file.
Unzip the file. Then delete the zip file.
ORGANIZE all your images. (Its ALWAYS best to go ahead and figure out how you are going to
organize all the files. See the page at the end of this to see exactly how they should be organized.)
6. Save it to your LastName_NavTutorial1 folder.
Adding the Basic HTML to Your index page

1.
2.
3.
4.
5.
6.
7.
Open Dreamweaver.
Create a New file.
Go to your Files Palette.
In the files palette, click on folder drop down menu.
Click on Manage Sites.
In the Manage Sites window click on New.
In the Site Setup window Type in your site name: NavTutorial1
8.
9.
10.
11.
Click on the Folder Icon.

Go find your NavTutorial1 folder inside your student folder.
Click Save.
Then Click done in the Manage Sites Window.
Digital Design and Media Production
12. Now we need to save your index page. Go To File > Save As.
13.
14.
15.
16.
Go to your NavTutorial1 Folder .

Name file index
Save as Type > Choose HTML Documents
Click Save.
17. Remember: Dreamweaver inserts all beginning Tags for you!
18. Inside the <title> tags add the words Navigation Tutorial 1.
a. Like this: <title> Navigation Tutorial 1 </title>
19. Save it. (CTRL+S)
Adding the HTML for the layout of your index page

Here you will create the code for the layout of your website. You will set up the entire layout and use
that for our other pages. That way you can just copy and paste the layout for your other pages.
1. We need to give our background an image for this website.
a. Inside your body tag add the code to use an image as the background.
(Remember you can also do this under page properties inside your properties panel.)
i. Like this: <body background=images/images/city.jpg>
2. Next, we will create the container for our website.
a. After the opening body tag you will create your code for the container.
i. Like this:
<div id="container" style="width: 1000px; height:
1200px; background-color: black;">
ii. Explanation:
1. id=Naming your DIV tag
2. Width = How wide is your header? This number should be exactly the
same size as your header image.
3. Height = How LONG does your web site need to be? You can
change this later if it is NOT long enough.
4. Background-color = What color do you want your website to be?
This color will be the background color INSIDE the container.
iii. Close your </div> tag at the bottom of the code right before the
</body> tag.
3. Adding your header to your webpage.
a. Now you need to insert your header to your webpage.
i. Like this:
<img src="images/images/header.jpg" alt="header"
width="1000" height="400";>
ii. Explanation:
1. Src= Where is the image located?
2. Alt=Alternative Text
3. Width=How wide is your header?
4. Height= How tall in your header?
4. Now its time to add the navigation box (Menu Box) on the left side of the container.
a. We need to define the box we want our navigation to be in.
i. Like this:
<div id="menu" style="background-color: #333333; color:
#FFFFFF; width: 200px; height: 800px; float: left;
text-align: center;">
ii. Explanation:
1. Id=What DIV is it?
2. Background-color=What color do you want your navigation area to be?
3. Color: #ffffff-What color do you want the text to be?
4. Width: How wide do you want the Navigation bar to be?
5. Height: The height is calculated like this
a. Container Height Header Height = Menu Height
b. 1000px (Container) 200px (Header)= 800px
6. Float=What alignment should you use for your Menu box? Where inside of
the container?
7. Text align=Where do you want the text of the menu to go?
iii. Close your </div> tag at the bottom of the code right before the other
closed </div> tag.
All of the code up to this point should now look like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Navigation & Images Assignment</title>
</head>
<body background="images/images/city.jpg">
<div id="container" style="width: 1000px; height: 1200px; background-color:
black;">
<img src="images/images/header.jpg" alt="header" width="1000" height="400";>
<div id="menu" style="background-color: #333333; color: #FFFFFF; width:
200px; height: 795px; float: left; text-align: center;">
<h1>Navigation</h1>
</div>
</div>
</body>
</html>
Adding Navigation in the Menu Area

Here we are ready to add our navigation to our menu area. This is the Quickest and easiest way to add
Text Links to your webpage. We will actually make these into links later in the tutorial.
1. Go into the design area and underneath the word navigation Type out these words:
Home
Seasons
Characters
Official Website
2. Next, go down in the properties panel and Click the Page Properties Button:
3. This is where we will make our links look like we want them to.
4. First, Click on Links (CSS) on the left side in the category box.
5. Choose these Settings:
a. Font: Palatino Linotype
b. Size: 24 px
c. Link Color #09F
d. Visited Links: #06F
e. Rollover Links: #FFF
f. Active Links: #FFF
6. Now click OK.
7. Select the word Home.
8. In the Link Box on the Properties
Panel, Type: index.html.
9. Select the word Seasons
10. In the Link Box on the Properties Panel, Type: seasons.html
11.
12.
13.
14.
Select the word Characters

In the Link Box on the Properties Panel, Type: characters.html
Select the words Official Website
In the Link Box on the Properties Panel, Type:
http://www.cwtv.com/shows/the-tomorrow-people/
15. Now your navigation is ready to go!
16. Save (CTRL+S) and F12 to see it!
Adding the CSS for the layout of your page

Here we are going to create our CSS file that will be applied to ALL of our pages.
1. Open a NEW file in Dreamweaver - File > New.
2. In the New Document Window Choose CSS as the Page Type:
3. Then Click Create.
4. Now go to File > Save As.
5. Save it as: navtutorial.css

6. Choose Style Sheets as the Save As Type.
7. Click Save.
8. Make sure you save it in your NavTutorial1 folder.
9. Now we need to finish designing our webpage. We will start with things that will be applied to
our layout.
10. We need to make our webpage is centered on the screen, and
have a border so our viewers will know where the edges of our container are.
We are also going to add a shadow to our container, so the website looks like its floating over
our background image.
body {width: 1000px; border: 5px solid #3bbcdc;
margin: 20px auto; box-shadow: 5px 5px 40px black}
i. Explanation:
1. Width=Matches the size of our container.
2. Border=Here we are telling it to add a border to our container that is 5
px solid and a teal color.
3. Margin=we are telling it where we want the page positioned on the
screen. The first number is the top and bottom; the second number is
the left and right. We have told it to center on the page by telling it
auto.
4. Box-shadow=this is putting a shadow on the box.
b. Now we will put in the formatting of our text headers. You should know what each of
these attributes are.
h1 {color: #ffffff; margin-top: 5px; margin-bottom: 0px;
text-shadow: 2px 2px 4px #3bbcdc; font-variant: small-caps;
font-size: 35px; font-family: 'Trocchi', serif; text-align:
center;}
h2 {color:#FFFFFF; margin: 5px; font-size: 25px; text-align:
center}
c. Now we will add our coding for our <p> tag otherwise we will NOT be able to see
the text considering default is black.
p {color: #FFFFFF; padding: 5px 5px; font-size: 18px;}
d. CTRL+S to save.
Your CSS Code should look like this so far:
body {width: 1000px; height: 1200px; border: 5px solid #3bbcdc; margin: 20px
auto; box-shadow: 5px 5px 40px black}
h1 {color: #ffffff; margin-top: 5px; margin-bottom: 0px; text-shadow: 2px 2px
4px #3bbcdc; font-variant: small-caps; font-size: 30px; font-family:
'Trocchi', serif; text-align: center;}
h2 {color:#FFFFFF; margin: 5px; font-size: 25px; text-align: center}
p {color: #FFFFFF; padding: 5px 5px; font-size: 18px;}
Link your CSS Style sheet to your website

Now we need to LINK our Style Sheet to your website. Once it is linked,
it will be useable on every webpage we create.
1.
2.
3.
4.
Open your index.html page

Go to the Style Sheets Palette on the right side of the screen.
Click on the little link button at the bottom of the palette.
Then Click the Browse Button on the attach window.
5. Make sure you are in the correct folder.

6. Click on the css file to select it
7. Click OK.
8. Save (CTRL+S) and F12 to see it!
You have now linked your CSS file to your Website!
Adding the layout to ALL of your website pages
Here we are going to take our layout that we have already created and apply that to our other pages of
our website. We have two other pages for this website and we will go ahead and apply this layout to
those two pages.
1. Ok now that we have our webpage ready to go we can go ahead and save it as our other two
pages that way we have the layout done for ALL three pages. We do this so that we do NOT
have to type all that code again!
2. Go To File > Save As.
3. This time the File Name is seasons.html
4. All the other settings are exactly like the first time we saved.
5. Now we are going to save our last website page.
6. Go To File > Save As.
7. This time the File Name is characters.html
8. Now your Files Palette should look like this:
Adding the Content to each of your pages

Now that the layout is done we are going to put in the content of each of
our pages. Since the layout is done we will just need to do the actual
content of each page. BUT make sure that if you make changes to your
layout you WILL have to make the changes to ALL of your pages.
1. Index page
a. Open your index.html page.
b. Click in the body of our website in the design window.
c. Here we will give it a Header.
d. Type out the word Welcome
e. Select the word Welcome
f. Go down in the
properties window
and Click on the
Format Dropdown
Menu.
g. Select Heading 1.
h. You will now get
the paragraphs
provided for you in
Canvas.
i. Go to Canvas and
Select the paragraphs provided for you.
j. CTRL + C to Copy the Paragraphs.
k. Go to your index.html page
l. Under the Welcome header PASTE the paragraphs we copied from Canvas.
m. Save (CTRL + S) and F12 to see it!
2. Seasons page
a. Go to the seasons.html page.
c. Here we will give it a Header.
d. Type out the word Seasons
e. Select the word Seasons
f. Go down in the properties panel and Click on the Format Dropdown Menu.
g. Select Heading 1.
h. After the word Seasons you will type: Season 1
i. Go down in the properties window and Click on the Format Dropdown Menu.
j. Select Heading 2
k. Go over to your files palette and find your season 1 image.
l. Drag and Drop that image on to your webpage, under the season 1 words.
m. To force this to center for you - go to your code and Move the </h2> tag down
below your image. This will force the image to center in the body area!
a. Save (CTRL+S) and F12 to see it! Make sure it looks right!
3. Characters page
a. Go to your characters.html page.
c. Type out Characters
d. Select the word Characters
e. Go down in the properties panel and click on the Format Dropdown Menu.
f. Select Heading 1
Now we are going to add a table to hold our images of our characters.
a. Hit enter to go below the Characters
word.
b. Got up to the dropdown menus and click
on Insert > Table
c. Use these settings on the Table Options:
i. Row: 2
ii. Columns: 3
iii. Table Width: 800 px
iv. Border Thickness: 0
v. Cell Padding: 0
vi. Cell Spacing: 0
d. Click Ok.
e. Go click in the first box and Type:
Stephen
f. Go to your File Palette.
g. Find the Image named Stephen.jpg
h. Drag the image in the box with the name
Stephen.
i. SHIFT + ENTER to make your image go down below the name.
j. Go click in the second box and Type: Cara
k. Go to your File Palette.
l.
m.
n.
o.
p.
q.
r.
s.
t.
u.
Find the Image named cara.jpg

Drag the image in the box with the name Cara.
SHIFT + ENTER to make your image go down below the name.
Go click in the third box and Type: Price
Go to your File Palette.
Find the Image named Price.jpg
Drag the image in the box with the name Price.
SHIFT + ENTER to make your image go down below the name.
Do the same with the last three images.
Your Images should look like this:
v. Save (CTRL+S) and F12 to see it!

4. You have completed the assignment.
5. Zip the folder named LastName_NavTutorial1
6. Upload the Zipped folder to Canvas.
Extra Credit: Link opens in a new tab - 10pts.

Make the official website link open a new window when you click on it, instead of going to the
website in the same window. There is a little bit of code you need to add to the <a href> tag to
make it do this. If you can make it do that, you will get the extra credit for it. Worth 10pts.

Navtutorial 1

Hochgeladen von

Dokumentinformationen

Originalbeschreibung:

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Navtutorial 1

Hochgeladen von

Copyright:

Verfügbare Formate

Navigation Tutorial 1

Adding the Basic HTML to Your index page

Click on the Folder Icon.

Digital Design and Media Production

Go to your NavTutorial1 Folder .

17. Remember: Dreamweaver inserts all beginning Tags for you!

Adding the HTML for the layout of your index page

Digital Design and Media Production

Digital Design and Media Production

Adding Navigation in the Menu Area

Digital Design and Media Production

Digital Design and Media Production

Select the word Characters

Adding the CSS for the layout of your page

Digital Design and Media Production

5. Save it as: navtutorial.css

8. Make sure you save it in your NavTutorial1 folder.

Link your CSS Style sheet to your website

Open your index.html page

5. Make sure you are in the correct folder.

Digital Design and Media Production

Adding the Content to each of your pages

Digital Design and Media Production

Find the Image named cara.jpg

v. Save (CTRL+S) and F12 to see it!

Extra Credit: Link opens in a new tab - 10pts.

Digital Design and Media Production

Das könnte Ihnen auch gefallen