You are on page 1of 28

 

   

ICT II 
Adobe Dreamweaver CS3 

Northwest Rankin Middle School 
Table of Contents 
Lesson 1:  Getting Started with Dreamweaver .......................................................................................................................... 3 
The Adobe Dreamweaver CS3 Program .............................................................................................................................. 3 
Using Dreamweaver Tools .................................................................................................................................................. 3 
Explore the Dreamweaver Workspace ............................................................................................................................... 3 
Working With Dreamweaver Views .................................................................................................................................... 4 
Lesson 2:  Viewing a Web Page .................................................................................................................................................. 5 
Viewing Basic Web Page Elements ..................................................................................................................................... 5 
Getting Help ........................................................................................................................................................................ 5 
A Sample Web Page and Elements in Dreamweaver .......................................................................................................... 6 
Lesson 3:  Planning and Defining a Web Site ............................................................................................................................. 7 
Understanding the Total Process ........................................................................................................................................ 7 
Planning a Web Site ............................................................................................................................................................ 7 
Setting Up the Basic Structure ............................................................................................................................................ 7 
Creating the Web Pages and Collecting the Page Content ................................................................................................. 8 
Testing the Pages ................................................................................................................................................................ 8 
Modifying the Pages ........................................................................................................................................................... 8 
Publishing the Site ............................................................................................................................................................... 8 
Lesson 3 Activity 3‐1...Creating the Preplanning Document ................................................................................................... 9 
Lesson 3 Activity 3‐2 ... Creating a Storyboard ...................................................................................................................... 10 
Lesson 3 Activity 3‐3...Creating a New Site ........................................................................................................................... 10 
Lesson 3 Activity 3‐4...Creating a Personal Logo in Photoshop ............................................................................................. 11 
Lesson 3 Activity 3‐5...Creating a Website Banner in PowerPoint ........................................................................................ 12 
Lesson 3 Activity 3‐6...Creating a “Photo Text” Image in Photoshop .................................................................................... 12 
Lesson 4:  Setting up the Pages of a Website .......................................................................................................................... 13 
Setting the Home Page ..................................................................................................................................................... 13 
Adding Pages to a Web Site .............................................................................................................................................. 13 
Creating an Effective Navigation Structure ....................................................................................................................... 13 
Changing the Appearance of a Worksheet, Part II ................................................................... Error! Bookmark not defined. 
Changing the Appearance of a Cell ...................................................................................... Error! Bookmark not defined. 
Changing Number Formats .................................................................................................. Error! Bookmark not defined. 
Excel Activity 2.1 – Number Formats ....................................................................................... Error! Bookmark not defined. 
Excel Activity 2.1 (Continued) – Change the Appearance of a Worksheet ............................... Error! Bookmark not defined. 
Lesson 2 Step‐by‐step – Part B ............................................................................................. Error! Bookmark not defined. 
 

ICT II ‐ Dreamweaver Tutorial  Page 2 
Adobe Dreamweaver CS3 Tutorial –   Lesson 1 
 
Getting Started with Dreamweaver 
The Adobe Dreamweaver CS3 Program 
 

Adobe Dreamweaver CS3 is a Web development tool that lets you create dynamic (ever‐changing), 
interactive Web pages containing text, images, hyperlinks, animation, sounds, video, and other elements.  
You can use Dreamweaver to create individual Web pages or complex Web sites consisting of many Web 
pages. A Web site is a group of related Web pages that are linked together and share a common interface 
and design. 
You can save Dreamweaver files in many different file formats, but we will be saving our documents as 
.htm files.   
You can still use HTML in Dreamweaver. Remember, HTML stands for HyperText Markup Language. You 
use a browser to view your Web pages on the Internet. A browser is a program, such as Internet Explorer, 
that lets you display HTML‐ (and Dreamweaver‐) developed Web pages on a computer. 
Using Dreamweaver Tools 
Creating an excellent Web site is a complex task. Fortunately, Dreamweaver 
has an impressive number of tools that can help. It contains organizational 
tools that help you work with a team of people to create a Web site. You can 
also use Dreamweaver's management tools to help you manage a Web site 
after it is created.  
For instance, you can use the files panel to create folders to organize and 
store the various files for your Web site, add pages to your Web site, and set 
the home page (the first page that viewers see when they visit the Web site). 
You can also use a site map, a graphical representation of how the pages 
within a Web site relate to each other, to view and edit the navigation 
structure of your Web site. The navigation structure is the way viewers 
navigate from page to page in your Web site. The site map for the Web site 
you will be creating is shown in the image to the right.  
Explore the Dreamweaver Workspace 
The Dreamweaver workspace is the window setup of the tools you will need to design, create and edit 
Web pages.  
The document window is the large white area in the Dreamweaver program window where you create 
and edit Web pages. The menu bar, located above the Document window, includes menu names, each of 
which contains Dreamweaver commands. 
The Insert bar includes seven groups of buttons displayed as tabs: Common, Layout, Forms, Data, Spry, 
Text and Favorites. Clicking a tab on the Insert bar displays buttons and menus associated with that group.  
For example, if you click the Layout tab, you will find buttons for using div tags, useful for creating 
blocks of content on pages, the Table button, used for inserting a table, and the Frames button, used for 
selecting one of the thirteen different frame layouts. 
The Document toolbar contains buttons and drop‐down menus you can use to change the current work 
mode, preview Web pages, debug Web pages, choose visual aids, and view file‐management options. 

ICT II ‐ Excel Tutorial  Page 3 
The Standard toolbar contains buttons you can use to execute frequently used commands also available 
on the File and Edit menus. 
The Property Inspector, located at the bottom of the Dreamweaver window, lets you view and change 
the properties of a selected object. It changes according to the object that is selected in the Document 
window. 

The status bar is located below the Document window. The left side of the status bar displays the tag 
selector, which shows the HTML tags used at the insertion point location. The right side displays the 
window size and estimated download time for the current page, as well as the select tool, used for 
page editing, the hand tool, used for panning, and the zoom tool, used for magnifying. 
A panel is a window that displays information on a particular topic or contains related commands. 
Panel groups are sets of related panels that are grouped together. To view the contents of a particular 
panel in a panel group, click the panel tab. If a panel happens to close, it can be opened using the 
Window menu command. 
Working With Dreamweaver Views 
A view is a particular way of displaying page content. Dreamweaver has three working views. Design 
view shows the page as it would appear in a browser and is primarily used for designing and creating a 
Web page. Code view shows the underlying HTML code for the page ‐ use this view to read or edit the 
underlying code. Code and Design view is a combination of Code view and Design view. This is the best 
view for debugging or correcting errors because you can immediately see how code modifications 
change the appearance of the page. The view buttons are located on the Document toolbar. 
 
 
 
   

ICT II ‐ Dreamweaver Tutorial  Page 4 
Adobe Dreamweaver CS3 Tutorial –   Lesson 2 
 
Viewing a Web Page 
Viewing Basic Web Page Elements 
After starting Dreamweaver, you can create a new Web site, create a new Web page, or open an existing 
Web site or Web page. The first page that appears when viewers go to a Web site is called the home page. 
The home page sets the look and feel of the Web site and directs viewers to the rest of the pages in the Web 
site. 
There are many elements that make up Web pages. They can be very simple and designed primarily with 
text, or they can be media‐rich with text, images, sound, and movies, creating an enhanced interactive Web 
experience. 
Most information on a Web page is presented in the form of text. You can type text directly onto a Web 
page in Dreamweaver or import text created in other programs, such as Microsoft Word. You can then use 
the Property inspector to format text so that it is attractive and easy to read. Text should be short and to 
the point to prevent viewers from losing interest and leaving your site. 
Hyperlinks, also known as simply links, are image or text elements on a Web page that users click to display 
another location on the page, another Web page on the same Web site, or a Web page on a different Web 
site. 
Navigation bars are bars that contain multiple links that are usually organized in rows or columns. 
Sometimes navigation bars are used with an image map. An image map is an image that has been divided 
into sections, each of which contains a link.  
Flash button objects are Flash objects that can be created in Dreamweaver and can serve as links to other 
files or Web pages. You can insert them onto a Web page without requiring the Adobe Flash program to be 
installed. They add visual interest to a Web page. 
Images, which are graphics or pictures, add visual interest to a Web page. The saying that "less is more" is 
certainly true with images, though. Too many images cause the page to load slowly and discourage viewers 
from waiting for the page to download. Many pages have banners, which are images displayed across the 
top of the screen that can incorporate a company's logo, contact information, and links to the other pages in 
the site. 
Getting Help 
Dreamweaver has an excellent Help feature that is both comprehensive and easy to use. When 
questions or problems arise, you can use the commands on the Help menu to find the answers you 
need. 
Clicking the Using Dreamweaver command opens the Adobe help Viewer that contains two links you 
can use to search for answers in different ways.  
The Contents link lists Dreamweaver help topics by category. The Index link lets you view topics in 
alphabetical order. The Search text box at the top of the window lets you enter a keyword to search for 
a specific topic.  
   

ICT II ‐ Dreamweaver Tutorial  Page 5 
A Sample Web Page and Elements in Dreamweaver 

  
Lesson 2 Step‐by‐Step 
To see the above image at work in Dreamweaver:  

1. Start Dreamweaver. (Start > All Programs > Adobe Master Collection > Adobe Dreamweaver CS3)  
Right‐click and select Pin to Start Menu)  
2. File  ‐> Open. 
3. Navigate to Templates ‐> ICT II 09_10  ‐> Unit 8 Web Design ‐> Dreamweaver Data Files ‐> Chapter 1; 
select the file dw1_1.html. 
4. Then click Open (or just double‐click on the filename)  
5. Locate each of the Web page elements shown in the image above.  
6. Click the Show Code view button (right below the Insert bar). This will show you the HTML coding for 
the page.  
7. Click the Split view button (shows both the Code and Design view) to see how the sections compare.  
8. Click to Design view button to return to the design view of the Web page.  
9. File ‐> Close and close the page WITHOUT SAVING IT. 
 
 
 
   

ICT II ‐ Dreamweaver Tutorial  Page 6 
Adobe Dreamweaver CS3 Tutorial –   Lesson 3 
 
Planning and Defining a Web Site 
Understanding the Total Process 
Creating a Web site is a complex process. It can often involve a large team of 
people working in various roles to insure that the Web site contains accurate 
information, looks good, and works smoothly. 
The image shown at the right illustrates the phases in a Web site 
development project. 
Planning a Web Site 
Planning is probably the most important part of any successful project. 
Planning is an essential part of creating a Web site, and is a continuous 
process that overlaps the later phases.  
To start planning your Web site, you need to create a checklist of questions and answers about the 
site.  
For example: What are your goals for the site? Who is the audience you want to target? Teenagers? 
Children? Sports enthusiasts? Senior citizens? How can you design the site to appeal to the target 
audience?  
The more questions you can answer about the site, the more prepared you will be when you begin the 
development phase. 
Because of the public demand for "instant" information, your plan should include not just how to get the site 
up and running, but how to keep it current.  

Setting Up the Basic Structure 
Once you complete the planning phase, you need to set 
up the structure of the site by creating a storyboard.  A 
storyboard is a small sketch that represents every page 
in a Web site. Like a flowchart, a storyboard shows the 
relationship of each page in the Web site to all the other 
pages.  
Storyboards are very helpful when planning a Web site, 
because they allow you to visualize how each page in 
the site is linked to the others. You can sketch a 
storyboard using a simple piece of paper and a pencil, or 
using a graphic program on a computer.  
The image at the right shows the storyboard for the 
Striped Umbrella Web site that you opened in 
Dreamweaver earlier. 
Notice that the home page appears at the top of the storyboard, and that it has four pages linked to it. 
The home page is called the parent page, because it is at a higher level than the other pages, and has pages 
linked to it. The pages linked below it are called child pages. The Activities page, which is a child page to the 
home page, is also a parent page to the Cruises and Fishing pages. 

ICT II ‐ Dreamweaver Tutorial  Page 7 
In addition to creating a storyboard for your site, you should also create a folder plan for all of the files 
that will be used for the Web site, using a descriptive name, such as the name of the company. This 
folder, known as the root folder or local root folder, will store all the Web pages for the site. Then create 
a subfolder called assets in which you store all of the files that are not Web pages, such as images or 
sound files.  
You should avoid using spaces, special characters, or uppercase characters in your folder names to 
ensure that all your files can be read and linked successfully on all Web servers. 
After you create your root folder, you need to define your Web site. When you define a Web site, the 
root folder and any folders and files it contains appear in the Files panel, the panel you use to manage 
your Web site's files and folders. Using the Files panel to manage your files ensures that the site links 
work correctly when the Web site is published. You also use the Files panel to add or delete pages. 

Creating the Web Pages and Collecting the Page Content 
This is the fun part! After you create your storyboard, you need to gather the files that will be used to 
create the pages, including text, images, buttons, video and animation. Some of these files will come from 
other software programs, and some will be created in Dreamweaver. For example, you can create text in a 
word processing program and insert it into Dreamweaver, or you can create and format text in 
Dreamweaver. 
Images, tables, colors and horizontal rules all contribute to making a page attractive and interesting. In 
choosing your elements, however, you should always carefully consider the file size of each page. A page 
with too many graphical elements might take a long time to load, which will cause visitors to leave your 
Web site.  
Before you actually add content to each page, it is a good idea to use the Files panel to add all the pages 
to the site according to the structure you specified in your storyboard. Once all the blank pages are in 
place, you can add the content you have collected. This allows you to create and test the navigation links 
you will need for the site. The blank pages will act as placeholders. 
Testing the Pages 
Once all your pages are completed, you need to test the site to make sure all the links work and that 
everything looks good. It is important to test your Web pages using different browser software. The two 
most common browsers are Mozilla Firefox and Internet Explorer. 
You should test your Web site using a variety of screen sizes. Some viewers may have small monitors, while 
others have large, high‐resolution monitors. 
You should also consider download time. Although more and more people are using cable modems or DSL, 
some are still using slower dial‐up modems. Testing is a continuous process, for which you should allocate 
plenty of time. 
Modifying the Pages 
After you create a Web site, you will probably find that you need to keep making changes to it, especially 
when information on the site needs to be updated. Each time you make a change, such as adding a new 
button or image to a page, you should test the site again.  
Publishing the Site 
Publishing a Web site means you transfer all the files for the site to a Web server, a computer that is 
connected to the Internet with an Internet Protocol (IP) address, so that it is available for viewing on the 
Internet. An IP address is an assigned series of numbers, separated by periods, that designates an address 
on the Internet.  

ICT II ‐ Dreamweaver Tutorial  Page 8 
For example, the IP address of the Adobe Web site is 192.150.20.61, while its domain name is 
www.adobe.com. A domain name is a Web address that is expressed in letters instead of numbers, and 
usually reflects the name of the business or organization because it is much easier to remember.  
A Web site must be published or users of the Internet cannot view it. 
Use the Files panel to transfer your files using the FTP (File Transfer Protocol) capability. FTP is the process 
of uploading and downloading files to and from a remote site. 

Lesson 3 Activity 3‐1...Creating the Preplanning Document 
You have read about how important planning is to Web site development. You are going to prepare a 
document in Microsoft Word that will allow you to do some of that planning, including answering some 
of the important questions.  
Preplanning Information: 
` For this Dreamweaver Project, you will be creating a Web site about yourself and the ICT II program 
here at Northwest Rankin Middle School. You will first create an index page that has links to two 
other pages: About Me and ICT II.  
` About Me will have information about yourself that you want the world to know. It will contain the 
links to two other pages: A favorite extra‐curricular activity, and your Career/College plans.  
` ICT II will have a description of the class. It will contain links to five other pages: Photoshop, Flash, 
SimCity 3000, Microsoft Excel and ModelSmart Bridge Building.  
` Therefore, for this project you will be creating ten Web pages. 
 

The activities you need to complete for this project are listed in the following table: 
Dreamweaver Project Timeline
LESSON  PROJECT  DUE DATE 
  Lesson 3  Activities 3‐1 through 3‐6 TBA – see Daily Agenda
  Lesson 4  Activity 4‐1 “
  Lesson 5  Activities 5‐1 and 5‐2 “
  Lesson 6  Activities 6‐1 through 6‐5 “
  Lesson 7  Copying the Home Page “
  Lesson 8  Completed Project  “
No late projects will be accepted. 

Activity 3‐1 Step‐by‐Step 
1. If you have not already done so, create a Dreamweaver folder in your directory as directed by your 
instructor. 
2. Open Microsoft Word, create a new document, and Save As to save it in your Dreamweaver folder 
as website_preplanning_xx. 
3. Add your usual footer and Save again.  
4. Set up the document:  Arial font, 1" margins (top, bottom, left and right).  
5. Center, bold, font size 16, and underline the title, Dreamweaver Website Preplanning.  
6. Return to left aligned, size 12 font. Save. 

ICT II ‐ Dreamweaver Tutorial  Page 9 
7. Copy the following questions into the document and, using the Preplanning Information above, 
answer the questions that will help you in developing the Web site. 
a. Who is the target (intended) audience? 
b. How can I create the pages to appeal to that audience? (appropriate reading level, formal or 
casual language, colors, content, etc.) 
c. What are the goals for the site? (Sell a product, provide information, persuade, etc.) 
d. How will I gather the needed information? 
e. What is my timeline? (When are the separate parts due, entire project?) 
8. Save the document one more time. You will be adding content to it as you complete the next few 
activities. 

Lesson 3 Activity 3‐2 ... Creating a Storyboard 
In this activity, you will be designing a storyboard to show how your Web pages will be linked together.  
In Lesson 1 of this tutorial, there is a site map of the Web site you will create. You can look at the image to 
see how your pages will link together. You may also refer to the Pre‐Planning Information listed in Activity 
3.1 for a listing of the pages you will create and how they are linked together. You will be using drawing 
tools to create a storyboard in your Word document. 
Activity 3‐2 Step‐by‐Step 
1. Using the Striped Umbrella storyboard image in this lesson as an example, and the site map/ Pre‐
Planning Information discussed above, create a storyboard for your web site in the Microsoft Word 
document saved earlier (website preplanning_xx).  
2. Add this storyboard drawing after the questions you answered earlier. Try to make the 
drawing small enough so it fits on the same page as the questions. 
3. You will use the Flowchart Shape tools (Insert ‐> Shapes) to create the shapes representing each 
page and the lines showing how the pages will be linked together. 
4. Add the Web page names to each object shape (right‐click on the shape; select Add Text) to 
identify the pages. 
5. Save the document when you have finished the storyboard. You will be adding one more element 
to it before you Submit the final document. 

Lesson 3 Activity 3‐3...Creating a New Site 
First you must create a new folder for all of your Web site files, and then you will create the site. 
 Activity 3‐3 Step‐by‐Step 
1. INSIDE the Dreamweaver folder in your H: drive / student directory (get there through My 
Computer), create a new folder. Name it dreamweaver_project, and INSIDE this one, create 
another new folder called assets.  
2. When you have created them, go back and make sure the asset folder is INSIDE the 
dreamweaver_project folder, not outside. Then proceed with the following instructions. 
3. Start Dreamweaver and create a new document (File ‐> New ‐> Blank Page), and 
4. Continue by choosing the page properties: Page Type: HTML;  Layout: <none> 
5. Create the New Site (In the Menu bar:  Site ‐> New Site), and then click the Advanced tab. 

ICT II ‐ Dreamweaver Tutorial  Page 10 
6. Create the Site name as site_yourusername (Ex:  site_brownj1234)  
7. Local root folder: click on the tiny folder to the right; Browse to the new dreamweaver_project 
folder you just created. Be sure to NOT open the "assets" folder (just select the 
dreamweaver_project folder). 
8. Default images folder: click on the tiny folder to the right; Browse to open your assets folder, then 
Select. 
9. Click OK to complete the Site setup. 
Your Dreamweaver screen should now look like the image below. Notice the Files panel to the right now 
shows the site and the asset folder.  
If it does not, close out the site without saving it, and try again. 

   

10. If the site is created successfully, take a screen shot (<Alt> + Print Screen) like the one above, and 
paste it into your Microsoft Word document from earlier. Paste it under the storyboard from the 
last activity. You may have to paste it to a second, or third, page to have the image large enough 
for the words to show clearly. 
11. Save your changes, go to the Dreamweaver Assignments area in Blackboard, find the Lesson 3 Pre‐
Planning assignment, attach your Word document, and Submit. 

Lesson 3 Activity 3‐4...Creating a Personal Logo in Photoshop 
You need a logo to enhance your Web pages.  
You should have already created a personal logo in the Lesson 4 OYO project of the Photoshop unit.  
If after considering the visual look of your web site in your pre‐planning document (such as color scheme, 
surrounding content, etc.), you are unhappy with your existing personal logo, you may quickly recreate 
another more suited to the look of your site. 
Save the new logo file (or re‐save your old logo file) as mylogo_username.gif in the assets folder of your 
dreamweaver_project folder.  
Be sure to the image file INSIDE your assets folder so it will be available for your web pages. Make sure 
you save the file in the .gif format, not the original .psd file! 
   

ICT II ‐ Dreamweaver Tutorial  Page 11 
Lesson 3 Activity 3‐5...Creating a Website Banner in PowerPoint 
Remember that a Website banner is an image that is displayed across the top of the screen on a Web 
site. A banner is typically displayed on all pages in a Website, providing a consistent look to the site and 
identifying each page as belonging to that site. A banner can incorporate a company's logo, contact 
information, and links to the other pages in the site. 
You will create a banner for your Website using Microsoft PowerPoint. Learning to make a banner in 
PowerPoint as an alternative to a graphic design program like Adobe Photoshop is useful, since 
PowerPoint is more widely available to the average user. 
Your banner should be appropriate for the overall purpose, audience, and “look” of your site, should be 
neat and attractive, and should identify each page as being a part of your Website. 

Activity 3‐5 Step‐by‐Step 
1. Open Microsoft PowerPoint.  
2. Click the Design tab and choose Page Setup. 
3. Click the "Slides sized for:" list arrow and then select the Banner option. It will create a banner that 
is 8" long and 1" tall. 
4. On the Design tab, choose any theme, colors, or layouts you desire. 
5. Add any graphic image and/or clip art images you desire for the banner. Remember, this logo is a 
reflection of YOU, so choose wisely.     Be sure to save regularly as you work!! 
6. Add any text you wish by clicking the Insert tab and clicking the Text Box button. Choose an 
appropriate font, size, and color. Alternately, you may incorporate text in the form of WordArt. 
7. When you are finished with the design of your banner, save your work one last time. 
To this point, you have been saving your work as a PowerPoint file. Be sure to save all work on 
your banner, including any final changes, in this format. If you later decide to go back and change 
anything in the image, you will have this original, editable file to work with. In order for your 
banner to be viewed on your Website, however, it must also be saved as an image file. 
8. Click the Office Button and choose Save As ‐> Other Options ‐> and select JPEG File Interchange 
Format. 
9. Save the file as:  mybanner_username.jpg (don’t type the .jpg – it should apply this file extension 
when you choose the JPEG file format) in the assets folder of your dreamweaver_project folder in 
your student directory. 
10. Click the Current Slide Only button when the dialog box appears.  
11. Once you are sure you have SAVED your work click the Office Button, and Close. 

Lesson 3 Activity 3‐6...Creating a “Photo Text” Image in Photoshop 
You will include a “photo text” image of your name on the About Me page of your site.  
You should have already created one in the Lesson 5 project of the Photoshop unit. If you your existing 
photo text image is unsatisfactory, (time permitting) you may quickly recreate another more suited to the 
look of your site. 
Save the new photo text image file (or re‐save your old file) as photoname_username.gif in the assets 
folder of your dreamweaver_project folder.  
Be sure to the image file INSIDE your assets folder so it will be available for your web pages. Make sure 
you save the file in the .gif format, not the original .psd file! 

ICT II ‐ Dreamweaver Tutorial  Page 12 
Adobe Dreamweaver CS3 Tutorial –   Lesson 4 
 
Setting up the Pages of a Website 
Setting the Home Page 
The home page is the very first page that viewers see when they visit your Web site. Most Web sites 
contain many other pages that all connect back to the home page.  
Dreamweaver uses the home page that you have designated as a starting point for creating a site map, 
a graphical representation of the Web pages in a Web site. When you set the home page, you tell 
Dreamweaver which page you wish to designate as your home page. The home page filename usually 
has the name index.html (or index.htm)  
Adding Pages to a Web Site 
Web sites may be as simple as one page or might contain hundreds of pages. When you create a Web 
site, you can add all the pages and specify where they should be placed in the Web site folder structure 
in the root folder. (Your root folder is your dreamweaver_project folder.)  
Once you add and name all the pages in the Web site, you can then add the content, such as text and 
graphics, to each page. It is better to add as many blank pages as you think you will need in the 
beginning, rather than adding them one at a time with all the content in place. This will enable you to 
set up the navigation structure of the Web site at the beginning of the development process and view 
how each page is linked to others. 
When you are satisfied with the overall structure, you can then add the content to each page.  
Creating an Effective Navigation Structure 
When you create a Web site, it is important to consider how your viewers will navigate from page to 
page within the site. A navigation bar is a critical tool for moving around a Web site, so it is important 
that all text, buttons, and icons used in a navigation bar have a consistent look across all pages.  
If a complex navigation bar is used, such as one that incorporates JavaScript or Flash, it is a good idea 
to also include plain text links in another location on the page for accessibility. Otherwise, viewers 
(especially those with limitations on their computer that prevent them from accessing scripted 
content) might become confused or lost within a site. 
No matter what navigation structure you use, be sure that every page includes a link back to the home 
page. Don't make users rely on the Back button on the browser to return to the home page. 

Lesson 4 Activity 4‐1… Creating the Pages and Setting the Home Page 
You are going to create the home page and the additional pages that will make up your Web site. 
Activity 4‐1 Step‐by‐Step 
1. Start Dreamweaver.  
Your site (site_username) should be open and showing in the Files panel. (If it is not, click the 
down arrow beside the site name that is showing in the Files panel, and click on your site so it 
opens.) Right now, you do not have any web pages showing, but your assets folder should be 
there.  
2. You will create a new Web page and set the home page.  Notice your root folder in the Files 
panel? (site_username under the words "Local Files.") 
ICT II ‐ Dreamweaver Tutorial  Page 13 
3. Right‐click on the root folder name and choose New File. You will see a new icon appear under 
the asset folder, ready for you to name.  
4. Type in index.html – now you have created your first Web page file! This will become your home 
page. 
5. Once it is created, right‐click on the index.html filename in the Files panel. Choose Set as Home 
Page in the menu that appears. 
6. Repeat steps 4 and 5 to create the other pages in your site:  right‐click on the root folder and 
choose New File. You will need additional pages as follows:  
• ict2.html 
• photoshop.html 
• excel.html 
• modelsmart.html 
• simcity.html 
• flash.html 
• about_me.html 
• career_college.html 
• extra_curricular.html 

7. You will then notice all the pages appear under the asset folder, but linked to the root folder. 
You can click on the Refresh button (the blue circle right above the words Local files) and your 
pages will appear alphabetized.  
 
You have now created the files/documents needed for your Web site! 
 

   Refresh  
   button

You will find that Dreamweaver saves these files for you as you create them. They are saved in the 
correct folder as you go, which is one of the great reasons to create your pages this way! 
   

ICT II ‐ Dreamweaver Tutorial  Page 14 
Adobe Dreamweaver CS3 Tutorial –   Lesson 5 
 
Creating Page Content 
Creating Head Content 
A Web page is composed of two distinct sections; the head content and the body. The head content 
includes the page title that is displayed in the title bar of the browser and some important page elements, 
called meta tags, that are not visible in the browser. Page titles are not to be confused with filenames.  
Meta tags are HTML codes that include information about the page, such as keywords and descriptions. 
Meta tags are read by screen readers (for viewers that have visual impairments) and are also used to 
provide the server information that is needed to display the page properly. Keywords are words that 
relate to the content of the Web site. A description is a short paragraph that describes the content and 
features of the Web site. For instance the words "beach" and "resort" might be keywords for the Striped 
Umbrella website.  
You will determine your own keywords for your website. Search engines find Web pages by matching the 
title, description and keywords in the head content of Web pages with keywords that viewers enter into 
search engine text boxes. Therefore, it is important to include concise, useful information in the head 
content. Some search engines limit the number of keywords that they will index, so make sure you list the 
most important keywords first. Keep your keywords and descriptions short and concise to ensure that all 
search engines will include your site. 
The body is the part of the page that appears in a browser window. It contains all the page content that is 
visible to viewers, such as text, images, and links. 
Setting Web Page Properties 
When you create a Web page, one of the first design decisions that you should make is choosing the 
background color, or the color that fills the entire Web page. The background color should complement 
the colors used for text, links and images that are placed on the page. Many times, images are used for 
backgrounds for either the entire page, or part of the page, such as a table background.  
A strong contrast between text color and the background color makes it easier to read the text on your 
web pages. You can choose a light background color with a dark text color, or you can choose a dark 
background color with a light text color. A white background with dark text, though not terribly exciting, 
provides good contrast and is easiest to read for most viewers.  
Another design decision you need to make is whether to change the default font and default link colors, 
which are the colors used by the browser to display text, links, and visited links. The default color for 
unvisited links, or links that the viewer has not clicked yet, is blue. In Dreamweaver, unvisited links are 
simply called links. The default color for visited links, or links that have been previously clicked, is purple. 
You can change the background color, text, and link colors using the color picker in the Page Properties 
dialog box.  
Using Web‐safe Colors 
Prior to 1994, colors appeared differently on different types of computers. In 1994, Netscape developed 
the first Web‐safe color palette, a set of colors that appears consistently in all browsers.  
If you want your Web pages to be viewed across a wide variety of computer platforms (Windows, UNIX, 
Mac, etc.) choose Web‐safe colors for all of your page elements. The default Web‐safe color palette for 
Dreamweaver is the Color Cube palette. 
ICT II ‐ Dreamweaver Tutorial  Page 15 
To change page colors, click Modify in the Menu bar, then click the Background, Text, or Links color box to 
open the color picker, and then click the color you want for each element. 
Making Pages Accessible 
Not all of your viewers will have perfect vision and hearing or full use of both hands. There are several 
techniques you can use to ensure that your web site is accessible to individuals with disabilities.  
These techniques include using alternative text for images, avoiding certain colors on Web pages, and 
supplying text as an alternative source for information that is presented in an audio file.  
For additional information, visit the Adobe website at www.adobe.com/accessibility Here you will find 
suggestions for creating accessible Web sites, and explanation of the Federal code about accessibility, 
and how people with disabilities use assistive devices to navigate the Internet. 
Create and View a Site Map 
As you add new pages to a Web site, it is easy to lose track of how they all link together. You can use 
the site map feature to help you keep track of the relationships between the pages. 
Remember, a site map is a graphical representation of the pages in the Web site and shows the folder 
structure for the Web site. 
You can find out details about each page by viewing the visual clues in the site map. For example, the 
site map uses icons to indicate pages with broken links, e‐mail links, and links to external Web sites.  
Lesson 5 Activity 5‐1… Modifying the Web Pages 
You are going to be adding important information to the Head element of your Web pages.  
Activity 5‐1 Step‐by‐Step 
1. Start Dreamweaver. Be sure YOUR site has opened (in the Files panel.)  
2. Double‐click the index.html filename in the Files panel to open it in the Document window.  
3. Click View in the Menu bar, and choose Head Content.  
4. The Title icon and the Meta icon (see the image below) are now visible in the head content section. 

5. Click the Title icon.  

ICT II ‐ Dreamweaver Tutorial  Page 16 
6. In the Title text box, type Your first and last name/block ‐ My Dreamweaver Project Home 
Page (Example: Sue Smith/B2 ‐ My Dreamweaver Project Home Page)  
7. Click the Common tab on the insert bar (if necessary). 
8. Click the Head list arrow, then click Keywords.  
9. You will be adding some keywords that will describe your site in one or two short words. For 
now, use the terms ICT2, ICT II, NWRMS, Northwest Rankin Middle School,  
Rankin County Schools, Mississippi Middle Schools  
 
This should give viewers some terms to search for to find your site.  NEVER USE YOUR FULL 
NAME, PHONE NUMBER, ADDRESS, OR ANY OTHER IDENTIFYING INFORMATION FOR YOUR 
KEYWORDS!!! 
 
10. Click on the Head list arrow again and choose Description.  
11. Type in just a few words to describe what your site is about, and why it has been created. 
12. Click on the different view buttons on the Document toolbar (Code view, Split view) to see the 
code for the head content that Dreamweaver has written for you. 

Lesson 5 Activity 5‐2… Setting the Background Colors for the Web Pages 
Now you will change the colors for your Home page. Remember to choose contrasting colors that 
will be both attractive and make text easy to read. 
Activity 5‐2 Step‐by‐Step 
1. Start Dreamweaver (if it is not already)  
2. Open the index.html page (double‐click on the filename in the Files panel) if it is not already open.  
3. Click Modify in the Menu bar.  
4. Click on Page Properties.  Make sure Appearance is selected in the list to the left. 
5. Click on the Background color box to open the color picker.  
6. Click on a very light color (or just keep the white) to use as the background color of your home 
page. That will allow your text to show very well.  
7. Click on the Text color box to choose a text color. Select a very dark color for good contrast. 
(again, you may choose to stick with black for good contrast.)  
8. We will just leave the links as default for now.  
9. Click on the Apply button. Then click OK. 
10. Save your changes. (<Ctrl>+<S> or File ‐> Save). 

Because you will add some other elements to your home page that you want to include on all of the 
pages in your site, and then copy the home page as a “template” to the other pages, we will leave the 
other pages blank for now. 
 
   

ICT II ‐ Dreamweaver Tutorial  Page 17 
Adobe Dreamweaver CS3 Tutorial –   Lesson 6 
 
Working in the Body of the Home Page 
Using HTML Tables to Lay Out a Page 
You can simply enter text and images into a web page without the use of tables, but, page layout options 
are very limited. The only options you have are left‐ and right‐aligned, and centered. But, say you may 
want to have an image beside your text, for example. You must use a table to be able to do this on a web 
page. 
Tables offer one solution for organizing text and graphics on a page. Tables are placeholders made up of 
small boxes called cells, into which you can insert text and graphics. Cells in a table are arranged 
horizontally in rows, and vertically in columns. Using tables on a Web page gives you total control over the 
placement of each object on the page.  
You will learn how to create and format tables, work with table rows and column, and format the 
contents of table cells. You will also learn how to select and format table cells using table tags on the tag 
selector. Clicking the table tag on the tag selector selects the table elements associated with that tag. 
Once you insert a table on a Web page, it becomes very easy to place text and graphics exactly where you 
want them on the page. You can use a table to control both the placement of elements in relation to each 
other, and the amount of space between them.  
Before you insert a table, however, you should always plan how you would like your table to look with all 
the text and graphics in it. Even a rough sketch before you begin will save you time as you add content to 
the page. 

The following image is an example of the table you will be using on your pages: 
Sample Web Page Table for Layout
Your Personal Logo Website Banner (PPT)
Your Navigation  Page Content
Bar  (Changes for each page) 
Contact Information

When you select the table once it is created, you will see the properties for that table in the Property 
Inspector. 
To select the entire table, click in any cell, look at the tag selector (see image on the following page) 
and choose the <Table> tag. This selects the whole table, as indicated by the dark border around it.  
Then you can change things such as the table size, the table background color, the text color for the 
table, etc. Explore some of the options in the image shown. 

 
 

ICT II ‐ Dreamweaver Tutorial  Page 18 
Creating a Table in Standard Mode 
Creating a table in Standard mode is useful when you want to create a table with a specific number of 
columns and rows. To create a table in Standard mode, click the Table button on the Insert bar to 
open the Table dialog box.  
Enter values for the number of rows and columns, the border thickness, table width, cell padding, 
and cell spacing.  
The border is the outline or frame 
around the table and the 
individual cells and is measured in 
pixels.  
The table width can be specified 
in pixels or as a percentage of the 
browser window.  
If the width is set to 100% of 
width, the contents spread across 
the entire browser window. 
When the table width is specified 
by pixels, the table width stays 
the same, regardless of the size 
of the browser window ‐‐ the 
contents will not spread outside 
of that fixed width unless it 
contains an image that is wider 
than the table. 
Cell padding is the distance 
between the cell content and the 
cell walls, the lines inside the cell 
borders. Cell spacing is the 
distance between cells.  
 

Planning a Table 
Before you create a table, you should sketch a plan for it that shows its location on a web page and the 
placement of text and graphics in its cells. You should also decide whether to include borders around 
the tables and cells.  
Setting the border value to "0" (zero) causes the table to appear invisible, so viewers can't see it and 
will not realize you used a table unless they look at the source code. 

Lesson 6 Activity 6‐1… Creating the Table for Page Layout 
Now you are going to be preparing the Home page for content. After you finish the Home page, you can 
simply copy the different elements of the page to your other Web pages. Most of the pages will be the 
same, with the exception of the body text, which will vary depending on the page itself. 
Your Web pages will be using a table to establish the layout.  
Each Web page will be based on the table illustrated on page 18.  

ICT II ‐ Dreamweaver Tutorial  Page 19 
Activity 6‐1 Step‐by‐Step 
To create the table: 
1. Start Dreamweaver.  
2. Open your index.html file.  
3. Click the Layout tab on the  
Insert bar. 
4. Click the Standard mode button, then click 
the Table button. (See the image).  
5. In the Table dialog box, create the following 
settings: 
• Rows: 3; Columns: 2 
• Table width:  100% (this will make your 
table stretch across the screen) 
• Border thickness:  0 (makes an invisible 
table to viewers in the browser ‐ you 
will see dotted lines for the table rows 
and columns) 
• Cell padding:  2; cell spacing:  2  
• Header:  None  
6. You will not enter any accessibility information for this table, so just click OK. 
Your table will appear on your index page as a short, broken line figure. But, you will be able to see 
the six cells ‐ two columns of three rows. 

Lesson 6 Activity 6‐2… Inserting and Aligning an Image in a Table 
You can insert images in the cells of a table using the Image command in the Images menu on the 
Insert bar. When you add a large image to a cell, the cell expands to fit the inserted image. 
Activity 6‐2 Step‐by‐Step 
To add your personal logo to your index.html page: 
1. Click in the first cell of the left‐hand column. This 
will put the cursor there to insert the image.  
2. In the Property Inspector, you will set the 
properties for the information inside the cell.  
You may need use the expand button at  
the right edge of the Property inspector as  
shown here to see all of the properties. 
3. In the Horz box drop‐down arrow, choose Center 
in order to center‐align the image in the cell.  
4. In the Vert box, choose Top. This forces the 
image to "bump" against the top of the selected 
cell.  
Once you choose these options, you should notice 
your cursor moving to the center of the cell, ready for 
the image.  
 
ICT II ‐ Dreamweaver Tutorial  Page 20 
5. In the Insert bar click on the Common tab, then click on the Image button. 
6. Browse to find your assets folder; double‐click to open the folder, then select the file 
mylogo_username.gif. Click OK to insert it into the cell.  
7. Save your changes.  
8. Now click in the right‐hand cell of the top row. Here you will be placing your Website banner 
you created in PowerPoint.  
9. Follow steps 2 through 7 to setup the cell and insert the Website banner (mybanner_username.jpg).  
10. Save your changes! 
You now have two cells of your table complete. 

Lesson 6 Activity 6‐3… Insert Text and Format Cell Contents 
You can enter text in a table either by typing it in a cell, copying it from another source like Microsoft 
Word and pasting it into a cell, or importing it from another program.  
Once you place text in a table cell, you can format it to make it more readable and more visually appealing 
on the Web page. 
Making modifications and formatting changes to a table and its contents is easy to do.  
` To format the contents of a cell, select the contents of the cell, then apply the formatting to it.  
` For example, you can select the text in a cell and use the Text Indent or Text Outdent buttons in the 
Property Inspector to move the text closer to, or further away from the cell borders, or bold the text 
by using the B button in the Property Inspector.  
In the bottom right cell, you are going to place your contact information, which is information that 
should be included on every Web page in your site. This information should allow a viewer to contact you 
in case they have questions or comments.  
You should also include the date the page was last updated. This allows the viewer to know if you keep 
your site current or not.  
This is important to some viewers that want the latest information. It also shows that you care about 
your site and intend to maintain it regularly! 

Activity 6‐3 Step‐by‐Step 
To add your contact information: 
1. Click in the bottom right cell of the table.  
2. In the Property Inspector, choose Horz: Center and Vert :Top as you did with your images earlier.  
3. In the cell, type This page was created and developed by (Your Proper Name/Block) for the ICT II 
class of Northwest Rankin Middle School. <Enter> It was last updated on (type in today's date.)  
4. Select both lines of text, and bold it. (Use the "B" button in the Property Inspector.)  
Now you will make your name an email link.  
5. Select the text (just your name/block). 
6. Click on the Email link in the Insert/ 
Common toolbar (the tiny envelope). 
7. Your name/block will already be showing in 
the dialog box. Just type your ENTIRE email 
address into the E‐Mail box as shown.  
8. Then click OK to close it. Your name is now an Email link. 
ICT II ‐ Dreamweaver Tutorial  Page 21 
9. Now select the Northwest Rankin 
Middle School text. Use the 
Hyperlink button (little chain link) 
beside the Email button.  
10. Enter the information as shown in 
the image. You MUST add the 
http://www.rcsd.ms/~web26 text 
to make the link work. 
Now viewers can contact you if they have 
any questions or comments about your 
site. (If you were to upload these pages ‐ 
which we will not do.) 

Lesson 6 Activity 6‐4… Creating the Navigation Bar 
Now you will be creating the Navigation bar, which will tie all the pages together into a working web 
site. You will use the Flash Button technique. 
Activity 6‐4 Step‐by‐Step 
1. You will be adding your navigation bar to the left column, center cell (the cell directly under 
your logo). So, click there now to place the cursor in that cell.  
2. From the Menu bar: select Insert ‐> Media ‐> Flash Button (be sure to select Flash Button, not just 
Flash!), and the following dialog box will appear. 
3. In the red boxed in “Style” area, you will 
select a style for your buttons. Click on 
the different ones to see what is available. 
Do not use one of the arrows, control, or 
e‐commerce buttons as these have other 
uses.  
4. In the orange boxed in “Button” text 
area, type in the name you want to 
appear on the button. For this first one, 
choose Home Page as your text.  
5. In the yellow boxed in “Link” area, click 
on the Browse button to select the page 
to link this button to. For the Home Page, 
your link should be the index.html page. 
Just double‐click on the filename to select 
it.  
6. In the green boxed in “Save As” area, click the Browse folder.  
7. Save the file in the dreamweaver_project folder, name it button_home.swf (must type the 
.swf) for this first button. Do not save the button in the assets folder because it must be in the 
same folder as the Web page it is connect to.  
8. Click OK to close the dialog box.  
9. Your button image will be selected in the table. Click directly to the right of the button (or tap 
the right arrow key one time) to deselect it and place the cursor immediately to the right of it.  

ICT II ‐ Dreamweaver Tutorial  Page 22 
10. Now hold down the <Shift> key then press <Enter> so you can single space and have the 
buttons close together. 
11. Now follow the same sequence of steps to create the button for the About Me page.  
• Select the same style of button as before.  
• In the orange area, type in About Me for the button name.  
• In the yellow area, click the Browse folder and choose the about_me.html page.  
• In the green area, save the button as button_about_me.swf in the same place as the Home 
button.  
• Click OK to create the button.  
• <Shift>+<Enter> to single space one more time. 
12. Now create the next button for this navigation bar:  the ICT 2 button. 
• Use the same style.  
• Button name:  ICT II 
• Link to the ict2.html page  
• Save the button as button_ict2.swf 
• Click OK. 
Now you have created your navigation bar buttons for the main three pages of your Web site.  
Your Dreamweaver window should now be similar to this one:  the page was "narrowed" to allow 
for both the Files panel and the navigation bar to show. 
  
Using the same instructions, add the 
navigation buttons and links for your 
other seven Web pages. Use appropriate 
button text and button names so you will 
know which pages you are talking about 
as you create them. 

 
 
 
 
 
 
 
Lesson 6 Activity 6‐5… Creating Text Navigation for the Web Pages 
You will add a text navigation bar to your Web pages to give your viewers a choice of methods to 
switch from one page to another (this is an important accessibility feature for users with limitations 
preventing them from viewing/using the Flash buttons). You will add this text bar under the Website 
banner at the top of the page so it is easily seen.   

ICT II ‐ Dreamweaver Tutorial  Page 23 
Activity 6‐5 Step‐by‐Step 
1. Click on the website banner image in the top right cell to select it. Now, use the right arrow key 
on the keyboard to move the cursor beside the image.  
2. Then <Enter> to create a new line below the image and expand the table cell.  
You should still be in the SAME cell as your Website banner, just BELOW it! 
3. In the Property Inspector, click on the Center align button so your text navigation bar is centered 
in the cell. (You may adjust this later if you think it would look better left‐aligned, or right‐
aligned.) 
4. Type the following text:  Home ‐ About Me ‐ ICT 2  
5. Then <Enter> to make a new line. 
6. Type:  Career/College ‐ Extra Curricular ‐ Photoshop ‐ Flash ‐ Excel ‐ Bridge Building ‐ SimCity 
7. Now we will set the formatting for the text. Select both lines of text. 
8. Click the Size list arrow in the Property Inspector. 
9. Click None. This removes any formatting that may have already been attached to the text. 
10. Now click the Format list arrow in the Property Inspector. 
11. Click Heading 4. 
12. Click the Font list arrow in the Property Inspector and click Arial, Helvetica, sans‐serif 
13. Click elsewhere on the screen to deselect the text. 
14. Now we will create the link between the text and the Web page. Double‐click the word Home.  
This will select it. 
15. Click the Browse for File icon (the tiny folder) next to the Link text box in the Property Inspector. 
16. Verify that the link is set to Relative to Document in the Relative to: list. 
17. Click index.html, click OK, and then click anywhere on the page to deselect the text. 
Home now appears in blue with an underline, indicating it is a link.  

18. Repeat these steps (#14‐17) to create text links to all of the other 
pages in the Web site. 
   

ICT II ‐ Dreamweaver Tutorial  Page 24 
Adobe Dreamweaver CS3 Tutorial –   Lesson 7 
 
Copying the Home Page 
Now that we have completed all the information on the Home page that will be shared with the other 
Web pages, it is time to copy it. This will allow us to add the personal logo, the Website banner, the 
contact information, and both navigation structures to the other pages easily. 

Lesson 7 Activity 7‐1… Copying the Home Page to the other Pages 
With the index.html page open in the Document window: 
1. File ‐> Save As, and then click on about_me.html. You will get a warning about replacing the 
existing file; choose Yes.  
2. Do the same for the other pages.  
3. File ‐> Save All  to save all the pages and the changes one more time.  
4. You can check the navigation links by looking at the site in Internet Explorer. With the index.html 
page still open, click on the <F12> key. This opens the page in Internet Explorer (be patient, takes  
a minute or two!)  
5. Now click on the links, both the Flash buttons and the text, to see if they work. Your pages 
should change as you click. (Of course, if you are on the Home page, and click the Home page 
button, nothing will happen!)  
6. If all the links work, you are on the right track, and ready to proceed to Lesson 8 ‐ 
Individual Page content!  
7. If the links do not work, go back to the appropriate lesson, and debug the Home page to see what 
the problem is.  
8. If you find an error, save your changes, and complete these steps 1 through 3 above again to 
resave the pages correctly. Once the navigation structures are working, go on to lesson 8. 
   

ICT II ‐ Dreamweaver Tutorial  Page 25 
Adobe Dreamweaver CS3 Tutorial –   Lesson 8 
 
Individual Page Contents 
IMPORTANT NOTE: Any image file, or other document, that you intend to use on the Web pages MUST be 
copied into the assets folder (as a .jpg or .gif file)of your site before you use it. Then, when you insert it 
into the page, browse tothe assets folder to link the files. 
ANOTHER IMPORTANT NOTE: You might find it helpful to add another "invisible" table to the remaining 
cell on each page. Remember to make your border "0" so the table border won't be visible to the viewer. 
ƒ If you make it one column and two or three rows, you can add an image in the top cell, type your 
information in the center cell, and another image in the bottom cell.  
ƒ If you want to add an image beside the text, you would create a table of one row and two 
columns. This would give you a place to add an image in one cell or the other, and the text in the 
other cell. 
 

Home Page – index.html 
Now is the time to begin filling the empty cell in the middle right‐hand column (above the cell with your 
contact information). This area will contain all the "meat" or information for each Web page. (You will 
leave the bottom left cell empty.)  
For your Home page, just give a description of why this project was created.  
ƒ It is basically applying the skills used in all of the computer applications learned in ICT II, for one 
thing. 
ƒ It is also going to be a reflection of you and your interests.  
ƒ You should also add a short sentence to tell what each of the other pages will be about. You want 
to create interest so viewers will want to check them out! 
You can type this information in Microsoft Word to spell‐and grammar‐check it.  
 

About Me! Page – about_me.html 
This page will be used for you to describe yourself, your family, your interests, etc.  
ƒ Here would be a good place to insert your photo text name image at the top of the cell before you 
start your paragraph. 
ƒ After some text about yourself, insert your picture of your Destination file you created in 
Photoshop, (the .jpg file ‐ you must open My Computer, copy this file, and paste it into your assets 
folder before you use it.)  
ƒ Give a short description of the vacation you took there. (Remember, you cannot believe everything 
you read on the Internet!)  
Be creative, but tasteful. Write something you could show your mama, your grandma, and your preacher.  
 

Career/College Page – career_college.html 
This page will be used to describe the career you are interested in, and/or the college you are planning to 
attend.  
You may get images from Google images to enhance this page. (College logo, etc.) Remember, you MUST 
save any image files in your assets folder. 

ICT II ‐ Dreamweaver Tutorial  Page 26 
Extra‐Curricular Page – extra_curricular.html 
This page will be used to describe an activity that you are involved with that is not done during school 
hours. It may be a sport you play, a club you are a member of, Junior Beta Club, Band, Scouts, a church 
activity, etc. 
 

ICT II Page – ict2.html 
For the ICT 2 page, you can gather some information from the About ICT II link in Blackboard.  
ƒ There you will find a description of the course, and its units, which you will use to describe the 
course on this page.  
ƒ For an image, you may want to copy the ICT II image on the Blackboard class site and use it. 
Remember to save it in the assets folder. 
ƒ You might also want to describe in more detail the five units you are creating the linked Web pages 
for ‐ Flash, Photoshop, Excel, SimCity, and ModelSmart Bridge Building.  
 

Photoshop, Flash, Excel, SimCity, and ModelSmart Bridge Building Pages 
Here is the opportunity to highlight your work in each of these applications.  
On each separate page, you will choose a file that was a favorite activity, like those for Flash and 
Photoshop.  
************************************************************************************ 
Flash 
On your Flash page, you must copy and paste your .swf file into your assets folder for it to work.  
1. Open My Computer, navigate to your Flash folder in your directory. 
2. Right‐click on the Flash file you want to use (be sure to select the .swf file – the white square 
with the single red  ‘f ’ ). 
3. Copy it. 
4. Navigate to your dreamweaver_project  folder  ‐>  assets folder. 
5. Paste it there. 
 

Now back in Dreamweaver:  
With your cursor where you want to put the image: 
1. From the Menu bar, select Insert  ‐>  Media  ‐>  Flash.  Your site folder will open.   
2. Open the assets folder. 
3. Click on the .swf file to select it. 
  This will insert the file into the Web page.  
YOU WILL NOT BE ABLE TO VIEW IT IN DREAMWEAVER ‐ it shows like a missing image box.  
4. Below the Flash object, tell why this was your favorite Flash project, and include a positive 
comment about using the Flash program. 
5. Save your changes, then <F12> to open the file in Internet Explorer. 
6. You must Allow Blocked content (appears at the top of the browser window) to show the 
page with the Flash file working. 

ICT II ‐ Dreamweaver Tutorial  Page 27 
*********************************************************************************** 
Photoshop 
For Photoshop: 
1. Choose your favorite image you created other than your destination file (You will highlight 
that one on your About Me page). 
2. Insert the .gif or .jpg file of the image. 
3. Tell about what you learned in creating the project, and why is was your favorite.  
4. Add an additional positive comment about the Photoshop unit. 
 

************************************************************************************ 
SimCity 
 

For SimCity you will create a screen capture of your final project to put on the page. (You will have to ask for 
the SimCity CD to be able to open that file.)  
1. Open your city from within SimCity. 
2.  <Alt><Print Screen> (found above the Insert key on the computer’s keyboard)   
3. Paste the image into Photoshop. 
4. Save the file for Web & Devices into your assets folder as a .jpg file. 
5. Name it simcity_username.jpg 
6. Tell about what you learned in building your city and add a positive comment about your 
experience with the program in general. 
 

************************************************************************************ 
ModelSmart Bridge Building 
 

Do the same thing in Model Smart Bridge Building for one of your best bridges.  
1. Save it in the assets folder as bridge_username.jpg 
2. Tell about what you learned in building your bridges and add a positive comment about your 
experience with the ModelSmart program in general. 
 

************************************************************************************ 
Excel 
In Excel, choose a file that had a graph or chart and Print Screen to capture that image also.  
1. Save it in your asset folder as excel_username.jpg 
2. Below the image, add some information about the Excel program, including a positive 
comment about the program. 
 
************************************************************************************ 
 
 

ICT II ‐ Dreamweaver Tutorial  Page 28