Upload
chad-gardiner
View
218
Download
0
Embed Size (px)
Citation preview
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
8/13/2019 Web Design & CSS - Level 1
2/39
Web Design Using Dreamweaver & CSSLevel 1
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
8/13/2019 Web Design & CSS - Level 1
3/39
Web Design Using Dreamweaver & CSSLevel 1
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
8/13/2019 Web Design & CSS - Level 1
4/39
Web Design Using Dreamweaver & CSSLevel 1
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.
8/13/2019 Web Design & CSS - Level 1
5/39
Web Design Using Dreamweaver & CSSLevel 1
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/8/13/2019 Web Design & CSS - Level 1
6/39
Web Design Using Dreamweaver & CSSLevel 1
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.
8/13/2019 Web Design & CSS - Level 1
7/39
Web Design Using Dreamweaver & CSSLevel 1
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/13/2019 Web Design & CSS - Level 1
8/39
Web Design Using Dreamweaver & CSSLevel 1
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.
8/13/2019 Web Design & CSS - Level 1
9/39
Web Design Using Dreamweaver & CSSLevel 1
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.
8/13/2019 Web Design & CSS - Level 1
10/39
Web Design Using Dreamweaver & CSSLevel 1
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)
8/13/2019 Web Design & CSS - Level 1
11/39
Web Design Using Dreamweaver & CSSLevel 1
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...
8/13/2019 Web Design & CSS - Level 1
12/39
Web Design Using Dreamweaver & CSSLevel 1
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...
8/13/2019 Web Design & CSS - Level 1
13/39
Web Design Using Dreamweaver & CSSLevel 1
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.
8/13/2019 Web Design & CSS - Level 1
14/39
Web Design Using Dreamweaver & CSSLevel 1
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.
8/13/2019 Web Design & CSS - Level 1
15/39
Web Design Using Dreamweaver & CSSLevel 1
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.
Category Style Value
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.
Category Style Value
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.
Category Style Value
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.
8/13/2019 Web Design & CSS - Level 1
16/39
Web Design Using Dreamweaver & CSSLevel 1
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.
8/13/2019 Web Design & CSS - Level 1
17/39
Web Design Using Dreamweaver & CSSLevel 1
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.
8/13/2019 Web Design & CSS - Level 1
18/39
Web Design Using Dreamweaver & CSSLevel 1
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.html8/13/2019 Web Design & CSS - Level 1
19/39
Web Design Using Dreamweaver & CSSLevel 1
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.
8/13/2019 Web Design & CSS - Level 1
20/39
Web Design Using Dreamweaver & CSSLevel 1
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:
8/13/2019 Web Design & CSS - Level 1
21/39
Web Design Using Dreamweaver & CSSLevel 1
21|P a g e
8/13/2019 Web Design & CSS - Level 1
22/39
Web Design Using Dreamweaver & CSSLevel 1
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:
8/13/2019 Web Design & CSS - Level 1
23/39
Web Design Using Dreamweaver & CSSLevel 1
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.
8/13/2019 Web Design & CSS - Level 1
24/39
Web Design Using Dreamweaver & CSSLevel 1
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.
8/13/2019 Web Design & CSS - Level 1
25/39
Web Design Using Dreamweaver & CSSLevel 1
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
8/13/2019 Web Design & CSS - Level 1
26/39
Web Design Using Dreamweaver & CSSLevel 1
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.
8/13/2019 Web Design & CSS - Level 1
27/39
Web Design Using Dreamweaver & CSSLevel 1
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...
8/13/2019 Web Design & CSS - Level 1
28/39
Web Design Using Dreamweaver & CSSLevel 1
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...
8/13/2019 Web Design & CSS - Level 1
29/39
Web Design Using Dreamweaver & CSSLevel 1
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
8/13/2019 Web Design & CSS - Level 1
30/39
Web Design Using Dreamweaver & CSSLevel 1
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.
8/13/2019 Web Design & CSS - Level 1
31/39
Web Design Using Dreamweaver & CSSLevel 1
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
Ensure that either the index.htmlor term.htmlpage is open in Dreamweaver. Click the File menu then Save As and
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
Ensure that either the index.htmlor term.htmlpage is open in Dreamweaver. Click the File menu then Save As and
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.
8/13/2019 Web Design & CSS - Level 1
32/39
Web Design Using Dreamweaver & CSSLevel 1
32|P a g e
E) RESEARCH
Ensure that either the index.htmlor term.htmlpage is open in Dreamweaver. Click the File menu then Save As and
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.
8/13/2019 Web Design & CSS - Level 1
33/39
Web Design Using Dreamweaver & CSSLevel 1
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)
8/13/2019 Web Design & CSS - Level 1
34/39
Web Design Using Dreamweaver & CSSLevel 1
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
8/13/2019 Web Design & CSS - Level 1
35/39
Web Design Using Dreamweaver & CSSLevel 1
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.
8/13/2019 Web Design & CSS - Level 1
36/39
Web Design Using Dreamweaver & CSSLevel 1
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.
6. Open the hoverstyle.cssfile in Dreamweaver then type the following code below the existing text.
#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.
7. Save all files then preview the gallery page.
8/13/2019 Web Design & CSS - Level 1
37/39
Web Design Using Dreamweaver & CSSLevel 1
37|P a g e
8. Open the hoverstyle.cssfile in Dreamweaver then type the following code below the existing text.
#hoverimage img
{
padding: 2px;width: 100px;
height: 75px;
background-color: #FFF;
}
#hoverimage li
{
display: inline;
float: left;
position: relative;
margin: 3px;
padding: 5px;
background-color: #FFF;
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.
9. Save all files then preview the gallery page.
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.
12. Open the hoverstyle.cssfile in Dreamweaver then type the following code below the existing text.
#hoverimage a .preview{
display: none;
}
The above code will work in combination with the .previewclass to hide the second thumbnail image.
13. Save all files then preview the gallery page.
8/13/2019 Web Design & CSS - Level 1
38/39
Web Design Using Dreamweaver & CSSLevel 1
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...
14. Open the hoverstyle.cssfile in Dreamweaver then type the following code below the existing text.
#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;
background-color: #FFF;
}
8/13/2019 Web Design & CSS - Level 1
39/39
Web Design Using Dreamweaver & CSSLevel 1
#hoverimage li
{
display: inline;
float: left;
position: relative;margin: 3px;
padding: 5px;
background-color: #FFF;
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.