Web Design & CSS - Level 1

Web Design Using Dreamweaver & CSS
Level 1
LESSON 1 -WHAT IS DREAMWEAVER? ......................................................................................................................................... 2 WORKSPACE LAYOUT............................................................................................................................................................................. 2 PLANNING ........................................................................................................................................................................................... 3 CASCADING STYLE SHEET ........................................................................................................................................................................ 3 LESSON 2 - CREATING WEB PAGES ............................................................................................................................................... 4 <DIV> TAG RULES ................................................................................................................................................................................ 4 HOW THE <DIV> TAGS WORK ................................................................................................................................................................ 5 NESTED DIV TAGS ................................................................................................................................................................................. 5 LESSON 3 - INTRO TO CSS ............................................................................................................................................................. 6 THE BODY AND CONTAINER<DIV> TAGS ..................................................................................................................................................... 6 <BODY> TAG ........................................................................................................................................................................................ 7 CONTAINER <DIV> 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) CSS MENU .................................................................................................................................................................................... 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) USA PAGE ..................................................................................................................................................................................... 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
1|P a g e

Level 1
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.
Insert Object Document toolbar
Panels
Property inspector
The Insert Object bar contains buttons for creating and inserting objects such as tables, layers, and images. The Document toolbar contains 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. Panel groups are sets of related panels grouped together under one heading. To open Dreamweaver panels, inspectors and windows, select from the Window menu. The Property inspector lets you view and change a variety of properties for the selected object or text. Each kind of object has different properties.
2|P a g e

Level 1
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 pages that will make up the web site that you will be working on as well as its navigational structure...
home (index.html) terminology (terms.html) usa (usa.html) other worlds (other.html) research project (research.html)
explode.html
height.html
moon.html
mars.html
venus.html
multimedia.html
gallery.html
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 based on the sketch shown below.
3|P a g e

Level 1
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 <body> and </body> tags and press Enter twice. 6. Type the following HTML between the <body> and </body> tags:
7. Save the file as index.html in 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.
<DIV> 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 <div> and </div> 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.
4|P a g e

Level 1
HOW THE <DIV> TAGS WORK
The container div 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 to CSS ZenGarden.
5|P a g e

Level 1
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<DIV> TAGS

The <body> tag will be used to format several properties of the pages in the website. For example, the <body> 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.
6|P a g e

Level 1
<BODY> TAG
1. Ensure that the index.html file 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 Rule dialog should appear.
on the CSS Styles panel (located in the top right corner) and select New. The New CSS
7|P a g e

Level 1
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 volcanostyle into 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.png file from the Images sub-directory. Select repeatx from the Repeat drop-down box. These steps will ensure that the background image is repeated horizontally across the entire page.
8|P a g e

Level 1
8. Select Box from the Category list. Type 0 in 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 <DIV> TAG

Creating styles for <div> 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 #container in the Selector Name box then click OK.
9|P a g e

Level 1
10. Modify the following attributes for the container <div> tag using the table below. When you have finished click the OK button.
Category Type Background Style Color Background-color Width Margin-left Box Margin-right Margin-top Style Border Width Color auto 0 solid 1px (all) #999 (all) Value #FFF #000 750px auto
10|P a g e

Level 1
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. to save both the index.html and volcanostyle.css files.
11. Click the Save All button
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.html file is open in Dreamweaver. 1. Open the volcano1.txt file located in the Volcano Web folder. 2. Select all the text in the volcano1.txt document (Ctrl + A) then copy (Ctrl + C). 3. Go back to the index.html file in Dreamweaver and delete the text in the content section. Ensure that the cursor is located between the <div id=content> and </div> 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 Copyright to @ 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 settings as shown... button on the Insert toolbar). Modify the
11|P a g e

Level 1
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 <td> 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...
12|P a g e

Level 1
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.html file and preview the page in a browser.
13|P a g e

Level 1
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 CHARACTERS
To 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 N2 CO2 NH4 km3 Copyright HTML N<sub>2</sub> CO<sub>2</sub> NH<sub>4</sub> km<sup>3</sup> © Result N2 CO2 NH4 km3
Save and preview the index.html page.
14|P a g e

Level 1
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 #logo in the Selector Name box then click OK. 3. Modify the following attributes for the logo <div> tag using the table below. When you have finished click the OK button.
Category Style Background-image Background Background-repeat Box Height No repeat 220px Value images/volcanologo.png
4. Create a new style called #content and modify the various attributes using the table below.
Category Style Font-family Font-size Type Color Line-Height Padding-right Box Padding-left Padding-bottom #FFF 20px 10px 10px 10px Value Arial/Helvetica 13px
5. Create a new style called #footer and modify the various attributes using the table below.
Category Style Font-family Type Font-size Color Background Background-color Height Box Padding-left Padding-top Value Arial/Helvetica 10px #FFF #333 50px 20px 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.
15|P a g e

Level 1
RESET CSS
Due to compatibility issues between various browsers (and versions of browsers), its not always possible to make a website look exactly the same on all browsers. To get around this ever-present problem, web designers have come up with 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;*fontsize:small;*font:x-small;} h1,h2,h3,h4,h5,h6,ul,li,em,strong,pre,code{padding:0;margin:0;line-height:1em;fontsize: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.html page in Dreamweaver. 6. Click on the menu button of the CSS Styles panel and select Attach Style Sheet. 7. Select the reset_basic file that you saved earlier and click OK.
8. Click the Save All button and preview the page.
16|P a g e

Level 1
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.html page and place the cursor in between the <div id="menu"> and </div> 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 1 by clicking on it then type Home in the Text box on the right. Replace the # in the link box with index.html.
17|P a g e

Level 1
6. The Home page will not require any sub-menu items so they can be removed. Select Item 1.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 Item 2 Item 3 New Menu Name Terminology U.S.A. Link terminology.html usa.html Submenu Name Moon Item 4 Other Words Venus Mars Item 5 Research research.html Link moon.html venus.html mars.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 following page. 9. Save the file index.html and press F12 or Live View to preview.
B) CSS MENU
1. Open the index.html file in Dreamweaver and delete any text inside the menu section. 2. Switch to Code view then place the cursor between the <div id=menu> and </div> tags and type the following:
<div id="navmenu"> <ul> <li><a href="index.html">Home</a></li> <li><a href="usa.html">USA</a></li> <li><a href="term.html">Terminology</a></li> <li><a href="#">Other Worlds</a>  <ul> <li><a href="moon.html">Moon</a></li> <li><a href="mars.html">Mars</a></li> <li><a href="venus.html">Venus</a></li> </ul> </li> <li><a href="research.html">Research Project</a></li> </ul>
18|P a g e

Level 1
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.html page 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.
19|P a g e

Level 1
8. Click the Save All button and preview the page.
The next part of the dropdown CSS will create the menus hover effect. 9. Open the dropdown.css in 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.html document matches the code in the example below:
20|P a g e

Level 1
21|P a g e

Level 1
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 container style located in the CSS Styles panel and select New. 2. Click on Compound in the Selector Type then type #container h1 in the Selector Name and click OK.
3. Click on the Type category and modify the properties as shown below:
22|P a g e

Level 1
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 select Heading 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-size to 24px and the Line-height to 36px. Change the margin-top value to 12px. 9. Click anywhere in the paragraph What is a Volcano? then apply the Heading 2 style using the Format drop-down box. 10. Save all files then press F12 to preview the page.
23|P a g e

Level 1
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 no space 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 #content a:visited Category Type Style Color Decoration #content a:hover Type Color #096 Value #FC0 Underline
Note: The a: link is the normal link state, a: visited is when a page has been viewed and a: hover is 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.
24|P a g e

Level 1
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.html page is open in Dreamweaver. 2. Go to the File menu and select Save As... 3. Type term.html in the name box then click the Save button. This will create a copy of the index page. 4. Open the volcano2.txt file from the Volcano Resource folder. Copy all the text from the Volcano Terminology heading to the height of the eruption column text. 5. Replace the old text (i.e. the home page content) with the information that was copied from the volcano2.txt file. 6. Apply a Heading 1 style 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 Lists look 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 from caldera to lahar... 8. Click the Unordered List button caldera vesicularity pahoehoe rheology lahar on the Properties Inspector. The list should look like the example below...
25|P a g e

Level 1
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.html file that was created from the previous lesson. 2. Click the men button in the CSS Styles panel and select New...
3. Click Compound in the Selector Type then type #content li from the Selector Type drop-down list...
4. Change the Line-height value to 18px.
26|P a g e

Level 1
5. Select List from Category and change the List-style-type to none. 6. Click the Browse button and select the bullet2.gif image file then click the OK button. 7. Change the List-style-Position to inside then 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...
27|P a g e

Level 1
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.gif at the bottom of the terminology.html page (directly after the text height of the eruption column). Type volcano types image map in 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 Explosiveness text on the image...
hotspot tool, use the mouse to draw a hotspot over the
28|P a g e

Level 1
4. With the hotspot still selected, type explode.html into the Link box and Explosiveness into the Alt box located on the Property Inspector...
5. Using the table below as a guide, create the other hotspots...

Imagemap Surtseyan Phreato-plinian Hawaiian Strombolian Plinian Height of eruption Link http://volcano.und.edu/vwdocs/frequent_questions/grp7/europe/question308.html http://www.geo.mtu.edu/volcanoes/santamaria/ http://hvo.wr.usgs.gov/volcanowatch/ http://stromboli.net/ http://www.geo.mtu.edu/volcanoes/pinatubo/ height.html Alt Surtseyan Phreato-plinian Hawaiian Strombolian Plinian 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 to Blank
29|P a g e

Level 1
LESSON 8 - OTHER VOLCANO PAGES

A) USA PAGE
Ensure that either the index.html or term.html page is open in Dreamweaver. Click the File menu then Save As and type usa.html for the file name.
. Open the volcano3.txt text file and copy all the text from (excluding the copyright information). 2. Ensure that the usa.html file is open in Dreamweaver and replace the content on this page with the text that you copied from the volcano3.txt file. 3. Change the Volcanic Places in the USA text 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 seismo image 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.jpg image 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.jpg as you did in the previous step.
9. Save and preview the page.
30|P a g e

Level 1
B) MOON
Ensure that either the index.html or term.html page is open in Dreamweaver. Click the File menu then Save As and type moon.html for the file name.
1. Ensure that the moon.html is 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.html or term.html page is open in Dreamweaver. Click the File menu then Save As and type venus.html for the file name.
1. Ensure that the venus.html is 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.html or term.html page is open in Dreamweaver. Click the File menu then Save As and type mars.html for the file name.
1. Ensure that the mars.html is 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.
31|P a g e

Level 1
E) RESEARCH
Ensure that either the index.html or term.html page is open in Dreamweaver. Click the File menu then Save As and type research.html for the file name.
1. Ensure that the research.html is open in Dreamweaver. Replace the heading at the top of the page with the text Research Project. 2. Open the volcano4.txt file from the Volcano Resource folder. Copy all the text from this document but don't include the text Research Project or 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.txt file. 4. Select all the text from Type of volcano to Other events and apply an Unordered List. Do the same thing to the Eruption, Lava Flow and Lava Entering Water text. 5. Apply a Heading 2 style to the Volcano Movie Clips text. 6. Select the Eruption text then click on the Link button. Select the eruption.mpg file 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 Lava Flow Lava Entering Water Link lavaflow.mpg EnteringWater.mpg
8. Save the file and preview the website.
32|P a g e

Level 1
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 Web Resource 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 to gallery.html (File menu>Save As). 2. Delete all the text in the content section except the main heading (i.e. from the text Your mission is to find information to Volcano Gallery.) 3. Change the heading at the top of the page from Research Project to 10 Most Active Volcanoes. 4. Switch to the Code view and create the hoverimage div section directly below the 10 Most Active Volcanoes heading as shown below. Be sure to create the close </div> tag as well.
5. Ensure that the cursor is placed between the <div id=hoverimage> and </div>tags then switch back to Design view. 6. Click the unordered list button on the Property panel.
7. Insert the 01.jpg image from the Active Volcano Images sub-folder (Insert>Image)
33|P a g e

Level 1
then click OK. 8. Type Ojos del Salado in 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 <li> 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 </li> 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 # Image file Alt text 2 02.jpg
San Pedro
3 03.jpg
Guallatiri
4 04.jpg
Cotopaxi
5 05.jpg
Tupungatito
6 06.jpg
Lascar
7 07.jpg
Popocatepetl
8 08.jpg
Nevado del Ruiz
9 09.jpg
Sangay
10 10.jpg
Guagua Pichincha
34|P a g e

Level 1
16. Save the gallery.html file then check that the hover image gallery HTML code looks like the example shown below.
<div id="hoverimage"> <ul> <li><a href="#"><img src="Active Volcano Images/01.jpg" width="455" height="315" alt="Ojos del Salado" /><img src="Active Volcano Images/01.jpg" width="455" height="315" alt="Ojos del Salado" /></a></li> <li><a href="#"><img src="Active Volcano Images/02.jpg" width="455" height="315" alt="San Pedro" /><img src="Active Volcano Images/02.jpg" width="455" height="315" alt="San Pedro" /></a></li> <li><a href="#"><img src="Active Volcano Images/03.jpg" width="455" height="315" alt="Guallatiri" /><img src="Active Volcano Images/03.jpg" width="455" height="315" alt="Guallatiri" /></a></li> <li><a href="#"><img src="Active Volcano Images/04.jpg" width="455" height="315" alt="Cotopaxi" /><img src="Active Volcano Images/04.jpg" width="455" height="315" alt="Cotopaxi" /></a></li> <li><a href="#"><img src="Active Volcano Images/05.jpg" width="455" height="315" alt="Tupungatito" /><img src="Active Volcano Images/05.jpg" width="455" height="315" alt="Tupungatito" /></a></li> <li><a href="#"><img src="Active Volcano Images/06.jpg" width="455" height="315" alt="Lascar" /><img src="Active Volcano Images/06.jpg" width="455" height="315" alt="Lascar" /></a></li> <li><a href="#"><img src="Active Volcano Images/07.jpg" width="455" height="315" alt="Popocatepetl" /><img src="Active Volcano Images/07.jpg" width="455" height="315" alt="Popocatepetl" /></a></li> <li><a href="#"><img src="Active Volcano Images/08.jpg" width="455" height="315" alt="Nevado del Ruiz" /><img src="Active Volcano Images/08.jpg" width="455" height="315" alt="Nevado del Ruiz" /></a></li> <li><a href="#"><img src="Active Volcano Images/09.jpg" width="455" height="315" alt="Sangay" /><img src="Active Volcano Images/09.jpg" width="455" height="315" alt="Sangay" /></a></li> <li><a href="#"><img src="Active Volcano Images/10.jpg" width="455" height="315" alt="Guagua Pichincha" /><img src="Active Volcano Images/10.jpg" width="455" height="315" alt="Guagua Pichincha" /></a></li> </ul> </div>
35|P a g e

Level 1
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.html page and attach the hoverstyle.css file using the CSS Styles panel. Save all files then preview the gallery page. 4. Open the hoverstyle.css file 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.css file 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.
36|P a g e

Level 1
8. Open the hoverstyle.css file 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 li segment ensures that the images sit next to each other. 9. Save all files then preview the gallery page. 10. Open the gallery.html file in Dreamweaver. Click on the duplicate photo for the first set of images. Type preview 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. <div id="content">), 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.css file 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 .preview class to hide the second thumbnail image. 13. Save all files then preview the gallery page.
37|P a g e

Level 1
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.css file 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.css code 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; }
38|P a g e

Level 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 .preview class applied to it as shown in the example below.
39|P a g e

Web Design &amp; CSS - Level 1

Hochgeladen von

Dokumentinformationen

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

Web Design &amp; CSS - Level 1

Hochgeladen von

Copyright:

Verfügbare Formate

Web Design Using Dreamweaver & CSS

Web Design Using Dreamweaver & CSS

LESSON 1 -WHAT IS DREAMWEAVER?

Insert Object Document toolbar

Web Design Using Dreamweaver & CSS

CASCADING STYLE SHEET

Web Design Using Dreamweaver & CSS

LESSON 2 - CREATING WEB PAGES

<DIV> TAG RULES

Web Design Using Dreamweaver & CSS

HOW THE <DIV> TAGS WORK

NESTED DIV TAGS

Web Design Using Dreamweaver & CSS

LESSON 3 - INTRO TO CSS

THE BODY AND CONTAINER<DIV> TAGS

Web Design Using Dreamweaver & CSS

4. Click on the Menu button Rule dialog should appear.

Web Design Using Dreamweaver & CSS

Web Design Using Dreamweaver & CSS

CONTAINER <DIV> TAG

Web Design Using Dreamweaver & CSS

Web Design Using Dreamweaver & CSS

11. Click the Save All button

HOME PAGE CONTENT

Web Design Using Dreamweaver & CSS

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

Web Design Using Dreamweaver & CSS

9. Save the index.html file and preview the page in a browser.

Web Design Using Dreamweaver & CSS

Save and preview the index.html page.

Web Design Using Dreamweaver & CSS

LESSON 4 - MORE CSS

Web Design Using Dreamweaver & CSS

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

Web Design Using Dreamweaver & CSS

LESSON 5- NAVIGATIONAL MENU

Web Design Using Dreamweaver & CSS

Web Design Using Dreamweaver & CSS

Web Design Using Dreamweaver & CSS

Web Design Using Dreamweaver & CSS

Web Design Using Dreamweaver & CSS

LESSON 6 - HEADINGS & LINKS

Web Design Using Dreamweaver & CSS

Web Design Using Dreamweaver & CSS

CREATING HYPERLINK STYLES

Web Design Using Dreamweaver & CSS

LESSON 7 - LISTS & IMAGEMAPS

Ordered Lists look like standard numbered bullets...

Unordered Lists look like standard bulleted text...

Web Design Using Dreamweaver & CSS

CREATING CUSTOMISED BULLET STYLES

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

Web Design Using Dreamweaver & CSS

Web Design Using Dreamweaver & CSS

3. Using either the rectangular or polygon Explosiveness text on the image...

hotspot tool, use the mouse to draw a hotspot over the

Web Design Using Dreamweaver & CSS

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

Web Design Using Dreamweaver & CSS

LESSON 8 - OTHER VOLCANO PAGES

9. Save and preview the page.

Web Design Using Dreamweaver & CSS

Web Design Using Dreamweaver & CSS

8. Save the file and preview the website.

Web Design & CSS - Level 1

Web Design & CSS - Level 1