Dreamweaver Tutorial - Creating Websites

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.


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.

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.


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.
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.
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.
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.
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.
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.
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!

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.
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!

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.
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.")
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!


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.
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.
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.
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.
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.


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.

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.
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.
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.

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!
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.
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.
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.
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.
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.


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.


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.
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.
***********************************************************************************
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.

************************************************************************************


Dreamweaver Tutorial - Creating Websites

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Dreamweaver Tutorial - Creating Websites

Uploaded by

Copyright:

Available Formats

You might also like