web design & css - level 1

8/13/2019 Web Design & CSS - Level 1

1/39

Web Design Using Dreamweaver & CSSLevel 1

1|P a g e

LESSON 1 -WHAT IS DREAMWEAVER? ......................................................................................................................................... 2

WORKSPACE LAYOUT ............................................................................................................................................................................. 2

PLANNING ........................................................................................................................................................................................... 3

CASCADING STYLE SHEET ........................................................................................................................................................................ 3

LESSON 2 - CREATING WEB PAGES ............................................................................................................................................... 4

TAG RULES ................................................................................................................................................................................ 4

HOW THE TAGS WORK ................................................................................................................................................................ 5

NESTED DIV TAGS ................................................................................................................................................................................. 5

LESSON 3 - INTRO TO CSS ............................................................................................................................................................. 6

THE BODY AND CONTAINERTAGS ..................................................................................................................................................... 6

TAG ........................................................................................................................................................................................ 7

CONTAINER TAG .......................................................................................................................................................................... 9

HOME PAGE CONTENT ......................................................................................................................................................................... 11

TABLES ............................................................................................................................................................................................. 11

IMAGES ............................................................................................................................................................................................. 14

SPECIAL CHARACTERS .......................................................................................................................................................................... 14

LESSON 4 - MORE CSS ................................................................................................................................................................ 15

RESET CSS ........................................................................................................................................................................................ 16

LESSON 5- NAVIGATIONAL MENU .............................................................................................................................................. 17

A)SPRY MENU ................................................................................................................................................................................... 17

B)CSSMENU .................................................................................................................................................................................... 18

LESSON 6 - HEADINGS & LINKS ................................................................................................................................................... 22

CREATING HYPERLINK STYLES ................................................................................................................................................................ 24

LESSON 7 - LISTS & IMAGEMAPS ................................................................................................................................................ 25

TERMINOLOGY PAGE ........................................................................................................................................................................... 25

LISTS ................................................................................................................................................................................................ 25

CREATING CUSTOMISED BULLET STYLES................................................................................................................................................... 26

IMAGEMAPS ...................................................................................................................................................................................... 28

LESSON 8 - OTHER VOLCANO PAGES .......................................................................................................................................... 30

A)USAPAGE ..................................................................................................................................................................................... 30

B)MOON .......................................................................................................................................................................................... 31

C)VENUS .......................................................................................................................................................................................... 31

D)MARS ........................................................................................................................................................................................... 31

E)RESEARCH ...................................................................................................................................................................................... 32

LESSON 9 - IMAGE GALLERY ....................................................................................................................................................... 33

IMAGE GALLERY HTML ....................................................................................................................................................................... 33

HOVER IMAGE GALLERY CSS ................................................................................................................................................................. 36


2/39


2|P a g e

LESSON 1 -WHAT IS DREAMWEAVER?

Dreamweaver is a HTML editing program used to design and create web sites and applications. One of the many

benefits of using Dreamweaver includes the ability to generate web sites without having to manually create any

HTML code.

WORKSPACE LAYOUT

The Dreamweaver screen layout is shown below.

The Insert Objectbar contains buttons for creating and inserting objects such as tables, layers, and images.

The Document toolbarcontains some common commands and options related to viewing the document such as

being able to switch between the Code and Design views when creating your website.

Panelgroups are sets of related panels grouped together under one heading. To open Dreamweaver panels,

inspectors and windows, select from the Window menu.

The Property inspectorlets you view and change a variety of properties for the selected object or text. Each kind

of object has different properties.

Insert Ob ect

Document toolbar

Property inspector

Panels


3/39


3|P a g e

PLANNING

Before you start working in Dreamweaver you should have a clear idea of what pages will be needed on your web

site. You should also have some idea of the navigational structure of the site. The diagram below shows the pagesthat will make up the web site that you will be working on as well as its navigational structure...

The volcano files you need for this tutorial are located in the S:\ Resources\Computer Department\Computer

Studies subfolder.The HTML files being used for the following tutorial contain some of the actual content required

for the Volcano web site.

CASCADING STYLE SHEET

We will be using a combination of HTML (HyperText Markup Language) and CSS (Cascading Style Sheet) to create the

design of our web pages. Style sheets give web designers more control over how the pages are displayed. Style sheets

can be used to define how different elements appear, e.g. headings, body text, fonts, etc. The main advantage of

using CSS is that it allows the developer to separate the visual design and layout of the web site from the content on

each web page. HTML has limitations in relation to its visual design capabilities, whereas CSS can be used to specify

fonts, colours, headers, positioning of text, etc.The layout of each of the pages in the Volcano website will be basedon the sketch shown below.

home(index.html)

terminology

(terms.html)

explode.html height.html

usa

(usa.html)

other worlds

(other.html)

moon.html mars.html venus.html

research project

(research.html)

multimedia.html gallery.html


4/39


4|P a g e

LESSON 2 - CREATING WEB PAGES

1. Start Dreamweaver (Start menu>Adobe Master Collection).

2. Click on the button in the Create New column to create a new HTML page.

3. Type The Volcano Site in the Title box (this is the text that appears in the browser's title bar) then press Enter.

4. Click on the Code tab located at the top left of the page to switch to the code view.

5. Place the cursor between the and tags and press Enter twice.

6. Type the following HTML between the and tags:

7. Save the file as index.htmlin the volcano resources folder.

Note: The text that has been typed inside the div tags are there to make it easier to locate and work within the

sections in the Design view.

TAG RULES

There are some rules that you need to follow when creating your Div tags. Failure to follow these rules can create

problems with your web page.

You cannot have spaces in the names. For example, "header logo" is invalid; however, "header_logo" will

work.

HTML tags such as and must be typed in lowercase.

The actual Div tag ID, e.g. "menubar", "other_content", etc. are case-sensitive. You must be consistent when

creating your style sheet and spell the ID exactly as you typed it in your HTML page.


5/39


5|P a g e

HOW THE TAGS WORK

The containerdiv tag defines a division or section in the HTML document. Like most tags in HTML, after you open it

you must close. In the example above, we have opened the container division at the start and closed it at the end.

Between the container open and close tags, we have created divisions for logo, menu, content and footer. The result

is that those other tags are located within the container section.

NESTED DIV TAGS

Nesting refers to the branching effect whereby the code is structured from the outside in. All div tags (logo, menu,

content, footer) are stored inside the container division box.The web page currently looks like the example below.

However, through the use of style sheets, you will be able to manipulate the HTML page to look like the example

below.

To get an idea of the type of websites that can be created using basic HTML and CSS, go toCSS ZenGarden.
http://www.csszengarden.com/http://www.csszengarden.com/http://www.csszengarden.com/http://www.csszengarden.com/


6/39


6|P a g e

LESSON 3 - INTRO TO CSS

In this section, we will start creating the CSS code that will format the web page to look like the design shown below.

THE BODY AND CONTAINER TAGS

The tag will be used to format several properties of the pages in the website. For example, the tag

can be used to set a background colour for your page, as well as the default Font style and colour, amongst many

other formatting attributes.


7/39


7|P a g e

TAG

1. Ensure that the index.htmlfile is currently open in Dreamweaver.

2. Display the Standard toolbar if not currently visible (click on the View menu>Toolbar>Standard). The Standard

toolbar has a number of frequently used functions such as New, Open, Save, Save All which makes it handy to keep

visible when using Dreamweaver.

3. Display the CSS Styles panel (Window menu>CSS Styles). This will make the CSS Styles panel visible on the right side

of the screen. Click the Allbuttonon this panel.

4. Click on the Menu button on the CSS Styles panel (located in the top right corner) and select New. The New CSS

Rule dialog should appear.


8/39


8|P a g e

5. Click on the Tag option in the Selector Type. Click on the drop-down box in the Selector name section and select

body

then select the New Style Sheet File in the Rule Definition box and click OK.

6. You will now be prompted to save the Style Sheet. Type volcanostyleinto the Filename box then click Save. Ensure

that you save this file into the same folder where your index.htmlfile is located, i.e. Volcano Web Resource. If the CSS

file has not been saved in the correct folder you will need to do this now.

7. The CSS Rule panel should now be visible. Select Background from the Category list. Click the Browse button for the

Background Image option and then select the volcano_bkgd.pngfile from the Images sub-directory. Select repeat-

xfrom the Repeat drop-down box. These steps will ensure that the background image is repeated horizontally across

the entire page.


9/39


9|P a g e

8. Select Box from the Category list. Type 0in the Top value box for both Padding and Margin.Click OK.These steps

will ensure that there is no gap at the top of the browser page.

CONTAINER TAG

Creating styles for tags is a little different than modifying formatting attributes for a HTML tags that already

exists (e.g. body, h1, h2, h3, etc.). The following steps will show you how to create and modify a number of

formatting properties for the container division...

9. Click on the Menu button on the CSS Styles panel and select New. The CSS Rules dialog should appear.

10. Click on the ID option from the Selector Type drop-down list. Type #containerin the Selector Name box then click

OK.


10/39


10|P a g e

10. Modify the following attributes for the container tag using the table below. When you have finished click

the OK button.

Category Style Value

Type Color #FFF

Background Background-color #000

Box

Width 750px

Margin-left auto

Margin-right auto

Margin-top 0

Border

Style solid

Width 1px (all)

Color #999 (all)


11/39


11|P a g e

The previous steps should have the following effect on the website:

Background- The background of the container division will be black.

Block- All text will be left aligned.

Box- The padding (i.e. internal spacing) for the container will be 0 pixels. Setting the top/bottom margins to 0

pixels will ensure that there is no gap at the top and bottom of the page. Note: This works alongside the body tag

to remove this gap. Setting the left/right margins to auto will ensure that the container is centred in the browser

window. The container width of 750 pixels matches the width of the logo that will be included later.

11. Click the Save All button to save both the index.htmland volcanostyle.cssfiles.

12. To preview the page in a browser, press F12. You can also click the Live View button on the toolbar.

HOME PAGE CONTENT

Ensure that the index.htmlfile is open in Dreamweaver.

1. Open the volcano1.txtfile located in the Volcano Web folder.

2. Select all the text in the volcano1.txtdocument (Ctrl + A) then copy (Ctrl + C).

3. Go back to the index.htmlfile in Dreamweaver and delete the text in the content section. Ensure that the cursor is

located between the and tags (you will need to switch to Code view).

4. Switch back to Design view and paste the text (Ctrl + V) that you copied from the volcano1 file.

5. Select the two lines of copyright information (from Copyrightto @

http://www.mcli.dist.maricopa.edu/tut/lessons.html) and press Ctrl + X to cut the text.

6. Delete any text that is in the footer section and paste (Ctrl + V) the copyright information there.

TABLES

1. Go to end of the last paragraph on the page (...observed by humans.) and press the Enter key to create a new

paragraph.

2. Insert an 8 row x 4 column table (Insert menu>Table or click the button on the Insert toolbar). Modify the

settings as shown...


12/39


12|P a g e

then click OK.

3. With the table still selected, click the Align button on the Properties toolbar and select Center.

Before we type the data into the table, we are going to ensure that each column has a fixed width and that they have

exactly the same width.This will stop the column widths changing based on how much text is in each cell.

4. Click in the first column of the table then click on the tag in the Tag section (located at the bottom of the

document window) to ensure that the column has been selected.

The column is highlighted to indicate that it has been selected...

5. Type 25% in the W box in the Properties Inspector then press Enter...


13/39


13|P a g e

The table should indicate that the first column has a width of 25%...

6. Repeat the above steps for the other columns.

7. Select the first row and press the Merge cells button on the Properties panel. Repeat this step for the

appropriate cells so that the table structure looks like the example below.

8. Type the following text into the table.

To center the text inside each cell, click inside the cell then select Center from the Horz cell alignment box on the

Properties panel.

9. Save the index.htmlfile and preview the page in a browser.


14/39


14|P a g e

IMAGES

1. In Dreamweaver, select the Volcano text at the top of the page and press delete. To insert the lightning image, click

the Insert menu then Image (or click the button on the Insert toolbar).

2. Select the volcanoes.gif file from the Images folder then click OK.

SPECIAL CHARACTERSTo insert special characters such as subscript 1, superscript 2 and other symbols ( ), switch to the Code view and

modify the HTML code as shown below:

Sample HTML Result

N2 N2 N2

CO2 CO2 CO2

NH4 NH4 NH4

km3 km3 km3

Copyright

Save and preview the index.htmlpage.


15/39


15|P a g e

LESSON 4 - MORE CSS

You are now going to make further modifications to the style sheet that you created in the previous lesson.

1. Click on the Menu button on the CSS Styles panel and select New. The CSS Rules dialog should appear.

2. Click on the ID option in the Selector Type. Type #logoin the Selector Name box then click OK.

3. Modify the following attributes for the logo tag using the table below. When you have finished click the OK

button.


Background

Background-image images/volcanologo.png

Background-repeat No repeat

Box Height 220px

4. Create a new style called #contentand modify the various attributes using the table below.


Type

Font-family Arial/Helvetica

Font-size 13px

Color #FFF

Line-Height 20px

Box

Padding-right 10px

Padding-left 10px

Padding-bottom 10px

5. Create a new style called #footerand modify the various attributes using the table below.


Type

Font-family Arial/Helvetica

Font-size 10px

Color #FFF

Background Background-color #333

Box

Height 50px

Padding-left 20px

Padding-top 5px

6. Click the OK button then delete the text inside the logo section.Save the file then press F12 or click Live View to

preview the page.


16/39


16|P a g e

RESET CSS

Due to compatibility issues between various browsers (and versions of browsers), its not always possible tomake a

website look exactly the same on all browsers. To get around this ever-present problem, web designers have come upwith ways to reduce and even eliminate many of these cross-browser issues. One method is to use a fix, whereby

CSS code can be created to sort out any layout or formatting problems. Another method is to reset the styles on a

browser using some CSS. The following CSS code is one of many reset styles available on the web. Note, how far you

go when resetting the default styles on a browser will vary depending on what you are trying to achieve

1. Click on the File menu and select New in Dreamweaver.

2. Choose CSS from the Page Type and click Create.

3. Type the following code below the existing text:

body{padding:0;margin:0;font:13px Arial,Helvetica,Garuda,sans-serif;*font-

size:small;*font:x-small;}

h1,h2,h3,h4,h5,h6,ul,li,em,strong,pre,code{padding:0;margin:0;line-height:1em;font-

size:100%;font-weight:normal;font-style: normal;}

table{font-size:inherit;font:100%;}

ul{list-style:none;}

img{border:0;}

p{margin:1em 0;}

Dont be too concerned if you dont understand everything that this CSS code does. In essence, it is resetting many of

the default HTML tags to their bare-bones so that the browser starts with a clean slate so to speak.

4. Save the file as reset_basic.css.

5. To apply this style sheet to web page, open the index.htmlpage in Dreamweaver.

6. Click on the menu button of the CSS Styles panel and select Attach Style Sheet.

7. Select the reset_basicfile that you saved earlier and click OK.

8. Click the Save All button and preview the page.


17/39


17|P a g e

LESSON 5- NAVIGATIONAL MENU

In this lesson you are going to create a menu for your website. You will be given two options: you can either use the

Spry Menu feature in Dreamweaver to create the menu or you can create it manually using CSS.There are advantages

and disadvantages to both methods. Using the Spry Menu is easier and quicker, but requires a lot of fiddling about to

customise the menus appearance. Creating the menu manually using CSS is more time-consuming, but is easier to

customise the menus appearance.

For the remainder of this lesson you can choose to follow either the Spry Menu or CSS Menu steps

A) SPRY MENU

The spry menu is a built-in feature of Dreamweaver and allows you to create a simple navigational menu using CSS,

without you needing to know anything about Javascript or CSS.

1. Open the index.htmlpage and place the cursor in between the and tags. You will need to

switch to the Code view to see these HTML tags. Once you have placed the cursor between these tags you can switch

back to the Design view.

2. Insert the spry menu (Insert menu>Spry>Spry Menu Bar).

3. Because this menu will be placed at the top of the page, select the Horizontal layout then click OK.

4. The Properties panel should display the default menu and submenu options. If you cannot see these options click

the spry menu label in the top left corner of the menu.

5. Select Item 1by clicking on it then type Homein the Text box on the right. Replace the #in the link boxwith index.html.


18/39


18|P a g e

6. The Home page will not require any sub-menu items so they can be removed. Select Item1.1from the second

column then click on the remove button (-) directly above it. Repeat this step for the other sub-menu items (1.2 and

1.3).

7. Modify the remaining menu options using the table below as a guide. You will need to use the Add Items button (+)to add menus and sub-menus where needed.

List Name New Menu Name Link Submenu Name Link

Item 2 Terminology terminology.html - -

Item 3 U.S.A. usa.html - -

Item 4 Other Words -

Moon moon.html

Venus venus.html

Mars mars.html

Item 5 Research research.html - -

8. You can modify the various properties of the menu such as the background colour of the cells by editing the Spry

style sheet in the CSS Styles panel. For further help on how to customise a Spry menu go to the followingpage.

9. Save the file index.htmland press F12 or Live View to preview.

B) CSS MENU

1. Open the index.htmlfile in Dreamweaver and delete any text inside the menu section.

2. Switch to Code view then place the cursor between the and tags and type the following:

Home

USA

Terminology

Other Worlds

Moon

Mars

Venus

Research Project
https://masterfile.stpeters.qld.edu.au/computing/tutorials_notes/cst/spry-navigation-dreamweaver.htmlhttps://masterfile.stpeters.qld.edu.au/computing/tutorials_notes/cst/spry-navigation-dreamweaver.htmlhttps://masterfile.stpeters.qld.edu.au/computing/tutorials_notes/cst/spry-navigation-dreamweaver.htmlhttps://masterfile.stpeters.qld.edu.au/computing/tutorials_notes/cst/spry-navigation-dreamweaver.html


19/39


19|P a g e

3. Create a new CSS page in Dreamweaver then type the following:

#navmenu {

padding:0;

width:auto;

height: 30px;

margin: 0;

}

#navmenu ul {

line-height:25px;

margin: 0;

padding: 0;

}

#navmenu li {

margin:0;

list-style:none;

float:left;

position:relative;background-color: #336;

padding: 0;

}

#navmenu ul li a {

text-align:center;

text-decoration:none;

height:25px;

width:148px;

display:block;

color:#FFF;

border:1px solid #333;

}

4. Save the file as dropdown.css

5. To apply this style sheet to web page, open the index.htmlpage in Dreamweaver.

6. Click on the menu button of the CSS Styles panel and select Attach Style Sheet.

7. Select the file that you saved earlier and click OK.


20/39


20|P a g e

8. Click the Save All button and preview the page.

The next part of the dropdown CSS will create the menushover effect.

9. Open the dropdown.cssin Dreamweaver and add the following code to the end of the page:

/* hides the menu */

#navmenu ul ul {

position:absolute;

visibility:hidden;

top:26px;

}

/* returns menu when mouse hovers over */

#navmenu ul li:hover ul {

visibility:visible;

z-index:9999;}

/*sets top level hover color*/

#navmenu li:hover {

background-color: #36C;

}

/*sets link items hover color and background*/

#navmenu ul li:hover ul li a:hover {

color:#FFF;

background-color: #36C;

}

/* change text color on hover for main menu */

#navmenu a:hover {

color:#FFF;

}

4. Click the Save All button then preview the page. The drop-down menu should now work correctly. If it doesnt

check that the code in the index.htmldocument matches the code in the example below:


21/39


21|P a g e


22/39


22|P a g e

LESSON 6 - HEADINGS & LINKS

As well as using CSS for modifying the layout of your div sections, you can use them to modify elements such as

headings (h1, h2, h3, etc.), hyperlinks, lists and other HTML tags.

1. Right-click on the containerstyle located in the CSS Styles panel and select New.

2. Click on Compound in the Selector Type then type #container h1in the Selector Name and click OK.

3. Click on the Type category and modify the properties as shown below:


23/39


23|P a g e

4. Click OK.

5. Delete the Volcano image at the top of page and replace it with the text Volcanoes.

6. Ensure that the mouse cursor is located somewhere inside the Volcanoes text paragraph then selectHeading 1

from the Format drop-down box on the Properties panel.

7. Create a new compound style based on the container division and name it #container h2.

8. Adjust the properties so that they match the heading 1 style you created with the following exceptions: Change the

font-sizeto 24pxand the Line-heightto 36px. Change the margin-topvalue to 12px.

9. Click anywhere in the paragraph What is a Volcano? then apply the Heading 2style using the Format drop-down

box.

10. Save all files then press F12 to preview the page.


24/39


24|P a g e

CREATING HYPERLINK STYLES

You can also create styles for the hyperlinks on your web pages.

1. Create a new compound style based on the container div and name it #content a:link. Ensure that there is nospace between the a:and link.

2. Select the Type category and change the Color code to #096. Set the Decoration option to None then click OK.

3. Repeat the above steps using the table below as a guide:

Style Name Category Style Value

#content a:visited Type Color #FC0

#content a:hover Type

Decoration Underline

Color #096

Note: The a: linkis the normal link state, a: visitedis when a page has been viewed and a: hoveris when the mouse

moves over the link.

4. Select the Wikipedia link near the bottom of the page and copy (Ctrl + C).

5. With the text still selected, paste the Wikipedia URL into the Link box on the Properties panel and set the Target to

_blank. This will cause the Wikipedia page to open in a new browser window.

6. Save the file then press F12 or Live View to preview the page.


25/39


25|P a g e

LESSON 7 - LISTS & IMAGEMAPS

The other pages that make up the Volcano website will have exactly the same layout as the home (index.html) page

with only the content changing. It is for this reason that you have spent most of your time refining the index.html

page. Now that the home page is right to go, you will use this as the template for all the other pages of the website...

TERMINOLOGY PAGE

1. Ensure that the index.htmlpage is open in Dreamweaver.

2. Go to the File menu and select Save As...

3. Type term.htmlin the name box then click the Save button. This will create a copy of the index page.

4. Open the volcano2.txtfile from the Volcano Resource folder. Copy all the text from the Volcano

Terminologyheading to the height of the eruption columntext.

5. Replace the old text (i.e. the home page content) with the information that was copied from thevolcano2.txtfile.

6. Apply a Heading 1style to the Volcano Terminology paragraph at the top of the page.

LISTS

There are two types of lists that can be used within a web page:

Ordered Listslook like standard numbered bullets...

1. Apples

2. Oranges

Unordered Lists look like standard bulleted text...

Apples

Oranges

7. Select the list of terms on the page fromcalderatolahar...

8. Click the Unordered List button on the Properties Inspector. The list should look like the example below...

caldera

vesicularity

pahoehoe

rheology

lahar


26/39


26|P a g e

CREATING CUSTOMISED BULLET STYLES

Note: The following bulleted image (bullet2.gif) is required for this exercise. Check that it is located in the Images

directory of the Volcano Web Resources folder. If you cannot find it you will need to copy it from the S:\Resources\Computer Department\Computer Studies\Volcano Web Resources\Images directory.

1. Open the term.htmlfile that was created from the previous lesson.

2. Click the men button in the CSS Styles panel and select New...

3. Click Compoundin the Selector Type then type #content lifrom the Selector Type drop-down list...

4. Change the Line-height value to 18px.


27/39


27|P a g e

5. Select Listfrom Category and change the List-style-type to none.

6. Click the Browse button and select the bullet2.gifimage file then click the OK button.

7. Change the List-style-Position to insidethen click OK.

8. Save the files then press F12 or Live View to preview the page.

All pages with ordered lists (bullets) should look like the page shown below...


28/39


28|P a g e

IMAGEMAPS

An imagemap is an image that contains a number of links to other Web pages. The advantage of using an imagemap

is that it allows many different hyperlinks to be 'mapped' onto different sections within a single image.

1. Insert the volcanoes_type_map.gifat the bottom of the terminology.htmlpage (directly after the text height of

the eruption column). Type volcano types image mapin the Alternate text box then click OK.

2. Click on the image once so that the Hotspot tools appear on the Property Inspector...

3. Using either the rectangular or polygon hotspot tool, use the mouse to draw a hotspot over theExplosivenesstext on the image...


29/39


29|P a g e

4. With the hotspot still selected, type explode.htmlinto the Link box and Explosivenessinto the Alt box located on

the Property Inspector...

5. Using the table below as a guide, create the other hotspots...

Imagemap Link Alt

Surtseyan http://volcano.und.edu/vwdocs/frequent_questions/grp7/europe/question308.html Surtseyan

Phreato-plinian http://www.geo.mtu.edu/volcanoes/santamaria/ Phreato-plinian

Hawaiian http://hvo.wr.usgs.gov/volcanowatch/ Hawaiian

Strombolian http://stromboli.net/ Strombolian

Plinian http://www.geo.mtu.edu/volcanoes/pinatubo/ Plinian

Height of eruption height.html Height

Note:

External links must have the full URL, e.g. http://www.google.com

To open a web page into a separate browser window, set the Target property toBlank


30/39


30|P a g e

LESSON 8 - OTHER VOLCANO PAGES

A) USA PAGEEnsure that either the index.htmlor term.htmlpage is open in Dreamweaver. Click the File menu then Save As and

type usa.htmlfor the file name.

. Open the volcano3.txttext file and copy all the text from (excluding the copyright information).

2. Ensure that the usa.html fileis open in Dreamweaver and replace the content on this page with the text that you

copied from the volcano3.txtfile.

3. Change the Volcanic Places in the USAtext to Heading 1 and the Mount St Helens Long Valley and San Francisco

Peaks MacDougal Crater text to a Heading 2 style.

4. Select the text toppled like toothpicks, click the target folder from the Properties panel then select the

msh_toppled.gif and click OK.

5. To create the seismograph thumbnail, insert the seismoimage after the text ...600,000 years ago. Resize the image

using the width and height values in the Properties panel.

6. To create the link to the full size image, click the target folder and select the seismo.jpgimage in the Images

subfolder. Set the Target to blank so that the image loads in a new browser window.

7. Right-click the thumbnail image and select Align>Text Top.

8. Select the text -- [full size image] --and set the link to the seismo.jpgas you did in the previous step.

9. Save and preview the page.


31/39


31|P a g e

B) MOON

Ensure that either the index.htmlor term.htmlpage is open in Dreamweaver. Click the File menu then Save As and

type moon.htmlfor the file name.

1. Ensure that the moon.htmlis open in Dreamweaver. Replace the heading at the top of the page with the text The

Moon.

2. Delete all the other content on the page then insert the image moon_map.

3. Save the file.

C) VENUS


type venus.htmlfor the file name.

1. Ensure that the venus.htmlis open in Dreamweaver. Replace the heading at the top of the page with the text

Venus.

2. Delete all the other content on the page then insert the image venus_map.

3. Save the file.

D) MARS


type mars.htmlfor the file name.

1. Ensure that the mars.htmlis open in Dreamweaver. Replace the heading at the top of the page with the text Mars.

2. Delete all the other content on the page then insert the image mars_map.

3. Save the file.


32/39


32|P a g e

E) RESEARCH


type research.htmlfor the file name.

1. Ensure that the research.htmlis open in Dreamweaver. Replace the heading at the top of the page with the text

Research Project.

2. Open the volcano4.txtfile from the Volcano Resource folder. Copy all the text from this document but don't

include the text Research Projector the copyright information.

3. Go back to Dreamweaver and delete all the text below the Research Project heading then paste the content from

the volcano4.txtfile.

4. Select all the text from Type of volcanoto Other events and apply an Unordered List. Do the same thing to the

Eruption,Lava Flowand Lava Entering Watertext.

5. Apply a Heading 2 style to the Volcano Movie Clips text.

6. Select the Eruptiontext then click on the Link button. Select the eruption.mpgfile that is located in the movies

sub-directory of the Volcano Resources folder.

7. Repeat the above step for the other two items in the list using the table below as a guide.

List Item Link

Lava Flow lavaflow.mpgLava Entering Water EnteringWater.mpg

8. Save the file and preview the website.


33/39


33|P a g e

LESSON 9 - IMAGE GALLERY

Ensure that you have a copy of the Active Volcano Images folder. You might need to copy this from the Volcano WebResource folder on the S: network drive. The first part of this lesson will get the images ready for the gallery using

some basic HTML

IMAGE GALLERY HTML

1. Open the index.html page in Dreamweaver then change the name of the file togallery.html(File menu>Save As).

2. Delete all the text in the content section except the main heading (i.e. from the textYour mission is to find

informationto Volcano Gallery.)

3. Change the heading at the top of the page from Research Projectto 10 Most Active Volcanoes.

4. Switch to the Code view and create the hoverimagediv section directly below the 10 Most Active Volcanoes

heading as shown below. Be sure to create the close tag as well.

5. Ensure that the cursor is placed between the and tags then switch back to Design

view.

6. Click the unordered list button on the Property panel.

7. Insert the 01.jpgimage from the Active Volcano Images sub-folder (Insert>Image)


34/39


34|P a g e

then click OK.

8. Type Ojos del Saladoin the Alternate text box and click OK.

9. Click on the image to select it and then copy to the clipboard (Ctrl + C).

10. Click to the right of the image so that the cursor is still inside the tag. To check whether or not you have done

this correctly, switch to the Code view and ensure that the cursor is located to the left of the tag.

11. Switch back to the Design view and paste the image (Ctrl + V).

12. Select both images by clicking on the first image then holding the Shift key and clicking on the second image. Both

images should be highlighted.

13. With the images still selected, go to the Link box on the Property panel and type #then press Enter.

Note: The use of#in the link will give the images hyperlink properties, but without actually linking anywhere.

14. Place the cursor to the right of the second (duplicate) image and press the Enter key. This will create a new

paragraph.

15. Repeat steps 7 to 14 to create the other images needed for the gallery. Use the table below when typing the

Alternate text.

Image # 2 3 4 5 6 7 8 9 10

Image file 02.jpg 03.jpg 04.jpg 05.jpg 06.jpg 07.jpg 08.jpg 09.jpg 10.jpg

Alt text San Pedro Guallatiri Cotopaxi Tupungatito Lascar Popocatepetl Nevado delRuiz

Sangay Guagua

Pichincha


35/39


35|P a g e

16. Save the gallery.htmlfile then check that the hover image gallery HTML code looks like the example shown

below.


36/39


36|P a g e

HOVER IMAGE GALLERY CSS

You will now create the CSS code that will give the image gallery the hover effect

1. Create a new CSS document in Dreamweaver (File>New) and save as hoverstyle.css

2. Type the following code at the top of the page.

a

{

text-decoration: none;

}

The above CSS will remove the link properties that you created in Lesson 6.

3. Open the gallery.htmlpage and attach the hoverstyle.cssfile using the CSS Styles panel. Save all files then preview

the gallery page.

4. Open the hoverstyle.cssfile in Dreamweaver then type the following code below the existing text.

#hoverimage

{

height:220px;

padding-top: 15px;

padding-right: 50px;

padding-left: 50px;

}

The above code will set the height of the hoverimage div section to 220 pixels and create some spacing around the

division using the padding property.

5. Save all files then preview the gallery page.


#hoverimage a

{

cursor: default;

}

The above code will change the mouse cursor to a normal arrow pointer rather than the hand hyperlink cursor when

the user moves their mouse above the image.



37/39


37|P a g e


#hoverimage img

{

padding: 2px;width: 100px;

height: 75px;

background-color: #FFF;

}

#hoverimage li

{

display: inline;

float: left;

position: relative;

margin: 3px;

padding: 5px;


border: 1px solid #333;

}

The first segment of code sets the width and height of each image to a thumbnail size. It also sets the padding to 2

pixels so that the background colour that has been assigned the value of #FFF (white) becomes visible. The first two

lines of code in the hoverimage lisegment ensures that the images sit next to each other.


10. Open the gallery.htmlfile in Dreamweaver. Click on the duplicate photo for the first set of images. Typepreview

in the class box in the Properties panel.

Note: Whereas an ID selector (e.g. #content) is used to specify the properties of a particular section (e.g. ), a class can applied across several elements. This could be particularly handy if we wanted to create a

hover image gallery in other sections of the page.

11. Repeat the above step for the duplicate of each set of images.


#hoverimage a .preview{

display: none;

}

The above code will work in combination with the .previewclass to hide the second thumbnail image.



38/39


38|P a g e

The last thing left to do now is to display the full sized image when the mouse moves over the thumbnail image...


#hoverimage .preview{

border-color: #000;

width: 300px;

height: 200px;

padding: 10px;

}

#hoverimage a:hover .preview

{

display: block;

position: absolute;

top: -60px;

left: -90px;

z-index: 1;

}

The first segment of code basically sets the size of the second image to 300 pixels wide x 200 pixels high. The second

code segment sets position of where the full sized image will be displayed.

15. Save all files then preview the gallery page. If the image gallery doesn't display correctly, check that the

hoverstyle.csscode matches the example below.

a{

text-decoration: none;

}

#hoverimage

{

height:220px;

padding-top: 15px;

padding-right: 50px;

padding-left: 50px;

}

#hoverimage a

{

cursor: default;

}

#hoverimage img

{

padding: 2px;

width: 100px;

height: 75px;


}


39/39


#hoverimage li

{

display: inline;

float: left;

position: relative;margin: 3px;

padding: 5px;


border: 1px solid #333;

}

#hoverimage a .preview

{

display: none;

}

#hoverimage .preview

{

border-color: #000;width: 300px;

height: 200px;

padding: 10px;

}

#hoverimage a:hover .preview

{

display: block;

position: absolute;

top: -60px;

left: -90px;

z-index: 1;

}

Check also that each duplicate image has the .previewclass applied to it as shown in the example below.

web design & css - level 1

Documents