Download Preview the Page

Creating Web Pages with Adobe Dreamweaver CS3
Planning the Website
1. Search for other web sites (of the same type) that have appealing page designs and are
easy to navigate.
“We seek clarity, order, and trustworthiness in information sources, whether traditional
paper documents or Web pages. Effective page design can provide this confidence. The
spatial organization of graphics and text on the Web page can engage readers with
graphic impact, direct their attention, prioritize the information they see, and make their
interactions with your Web site more enjoyable and efficient.”
2. Sketch (or flowchart) site organization: home page, additional pages and how they
connect.
3. Create a storyboard for the home page with placeholder boxes to communicate the
placement of planned design elements: Site title, images, text, external links and
navigation links.
4. Use the same basic design to create storyboards for the remaining site pages.
5. *Create a main folder (called a root folder) for the website on your computer desktop.
Do NOT include spaces in this folder name. This is the directory that will be published to
the web and should not include spaces. Use all lower-case letters with an underscore or
hyphen to separate words, if desired.
6. *Open the root folder and create subfolders named images and contents.
7. *Gather project assets: information, data, images, URL links, email addresses, etc.
placing image files in the images subfolder and other data files in the contents subfolder.
*These steps have been done for the practice activity. The folder is named local_sites and is
on the computer desktop.
Define a Local Web Site
1. Click on Start > Programs > Adobe Design
Premium CS3 > Adobe Dreamweaver CS3.
*In Windows, the first time you start
Dreamweaver, a dialog box appears that lets you
choose a workspace layout. Make sure the
Designer layout is selected and click OK.
2. From the menu bar at the top of the screen, select
Site > New Site.
The Site Definition dialog box opens. Make sure
the Advanced tab is active.
3. In the Category list, make sure Local Info is
selected.
4. In the Site Name text box, enter the name of your
site.
5. To the right of the Local root folder text box, click the folder icon. Navigate to the
location on your computer where you created the root folder. Click Select.
6. Click OK to define your local site.
Creating the Home Page (basic template for the web site)
1. Select File > New from the menu bar.
2. In the New Document dialog box, select
Blank Page and HTML, and click Create.
An untitled document window opens.
3. Select File > Save from the menu bar.
The Save As dialog box opens. It displays
the folders in the site root folder. Save this
file in the root folder.
4. In the File Name box, enter index.htm
5. Click Save. The filename now appears on
the tab of the Document window.
6. Use the default Doc Type (XHTML 1.0
Transitional)
Get Acquainted with Adobe Dreamweaver CS3 (additional pages)
Document window, Insert bar, Property inspector, and Panels
View Menu > Toolbars > Standard
Set a Page Title
On the Document toolbar, enter the Title of the page in the Title text box. This title determines
what the Bookmark/Favorite will be if someone bookmarks your site, and helps search engines
classify your site. (If the Document toolbar is not visible, select it from the View menu >
Toolbars > Document.)
© Education Service Centers of Texas
Teaching with Technology
Adobe Dreamweaver CS3
Page 2
Set Background Colors
1. From the menu bar, select Modify > Page Properties to open the Page Properties dialog
box.
2. From the Category list, select Appearance.
3. Experiment with background color, but select white for the practice activity.
Insert a Table
Many web pages use tables to control the location and flow of text, images and media on the
page.
1. Place the insertion point at the top of the Dreamweaver
document.
2. On the Common Insert bar, click the Table button. The
Table dialog box opens.
3. Select the number of rows and columns desired. Click OK
4. For the practice activity, create a table with 5 rows and 3
columns.
5. Table width = 700 pixels
6. Leave the border thickness, cell padding and cell spacing as
zero.
Enter Heading Text
1. Click in the table cell. Enter the Heading for the page or site.
2. Highlight the text and use the Property inspector to format the text as Heading 1. Don’t
worry about the font. A style sheet (next) will determine text settings for the entire site.
3. Select the Color and Alignment. Save
Cascading Style Sheets (CSS)
Create a CSS style sheet (from a pre-designed style sheet) to define the text style for the entire
website.
1. Select the index.htm file (click the tab at the top of the window to bring this page to the
front)
2. Choose File menu  New  Page from Sample
3. The middle column displays a list of CSS Style Sheets.
4. Select a Style Sheet from the list to see the style displayed in the Preview window. Click
Create.
5. Select File  Save. Name this file text.css. Close the text.css window.
6. Choose Window  CSS Styles to display the CSS Styles panel, or click the arrow in the
CSS Styles Panel to expand the menu.
7. At the bottom of the CSS Styles panel, click the Attach Style Sheet button (link icon).
8. In the Attach External Style Sheet dialog box, click Browse to locate a style sheet.
9. Next (in the Select Style Sheet File dialog box), browse to and select the new style sheet
you created in the Assets folder (text.css). Click OK.
10. Next (in the Attach External Style Sheet dialog box), click OK to attach the style sheet.
The style sheet’s name and contents appear in the CSS Styles panel. Save the document.
The styles defined in the style sheet are applied to the text in the HTML document.
© Education Service Centers of Texas
Teaching with Technology
Adobe Dreamweaver CS3
Page 3
Duplicating Pages
Before adding specific content to the home page, create additional web site pages with the
existing basic format.
1.
2.
3.
4.
5.
In the Site panel, right-click the index.htm page.
From the drop-down menu, select Edit > Duplicate. A “copy of index.htm” file appears.
Right-click on the duplicated file and select Rename from the Edit menu.
Give the new file an appropriate new name.
Repeat the duplicate process for as many pages as needed, giving each page a unique
name.
Insert Images
1. Position insertion point at desired image location
2. In the Files panel, click the plus sign on the images folder. The image files contained in
the folder drop into a list.
3. Click and drag the desired image to the insertion point location.
4. Position the insertion point to the right of the image and add a line break by pressing
Shift+Enter (Windows) or Shift+Return (Macintosh).
*A line break moves the insertion point to the left margin but does not create a new
paragraph, so there is less space above the text.
5. Enter a caption below the image and format the text in the Property inspector.
6. To add a border to the image, select the image and enter a number in the Border text box
on the Property inspector.
Link to an Email Address
1. Enter text to be used as the link (For example, “Send a message to the City Council”)
2. Highlight the text.
3. On the Common Insert bar, click the Email Link button
, or select Email Link from
the Insert menu.
4. In the Email window, enter an email address in the email field. Click OK and save.
© Education Service Centers of Texas
Teaching with Technology
Adobe Dreamweaver CS3
Page 4
Enter or Insert Body Text
4. Click in a table cell. In the Table property
inspector, select Top in the Vertical
Alignment pop-up menu to position the
cursor in the top left corner of the cell.
5. Enter text or copy and paste text from
another source. Note: Pasted text does not
retain its original formatting.
Insert Hyperlinks
1. Highlight the text to be linked. Click the Hyperlink button
on the Common Toolbar
or select Hyperlink from the Insert menu.
2. In the Hyperlink Window enter the web address in the Link field.
3. Select _blank for the Target for the page to open in a new window. Click OK.
Tip: Copy and paste long web addresses to avoid errors.
Preview the Page
To preview the page in a browser, first Save the page. Then:
1. Press F12, or
2. Click the preview/debug button on the Toolbar, or
3. Select File > Preview in Brower.
Rollover Images
A rollover image consists of two images: the image displayed when the page first loads in the
browser, and the image displayed when the mouse moves over the original image.
1. Place the curser at the desired insertion point.
2. On the Common Insert bar, click the arrow beside the Images button, and select
Rollover Image.
3. Use the Browse button to locate the Original image.
4. Then use the Browse button to locate the Rollover image.
5. Be sure the Preload rollover image box is checked.
6. In the Alternate text box, type a short description of the images.
7. Optional – add a hyperlink in the text box When clicked, Go to URL. Or leave this
blank.
8. Click OK and Save. Preview in a browser.
© Education Service Centers of Texas
Teaching with Technology
Adobe Dreamweaver CS3
Page 5
Create a Navigation Table
Provide navigation links between the pages of the website.
1.
2.
3.
4.
Create a table on the home page (index.htm).
Position the insertion point at the desired location on the page (either the top of bottom).
On the Common Insert bar, click the Table button.
Specify a table with 1 row and as many columns as there are pages in the web site. (For
example, 1 row and 5 columns for a website with 5 pages.)
5. Designate a width of 75% and no border.
6. Click OK to close the Table dialog box. The table is inserted and is selected.
7. On the Property inspector, select Center from the Align pop-up menu to center the table
at the bottom of the page.
Insert Interactive Flash Buttons
1. Click in the first cell of the navigation table.
2. On the Common Insert bar, click the arrow beside the Media button and select Flash
button to open the Insert Flash button dialog box.
3. Set the following options:
a. Style: select a button style that goes best with your site.
b. Button text: enter the name of the button (for example the first cell is Home)
c. Font: choose a font that goes with the rest of your site
d. Size: select a font size.
e. Link: click the Browse button. Navigate to the root folder and select the page the
button links to (home is index.htm)
f. Target: leave this blank (unless you are linking to a specific line on the page).
g. Bg Color: leave this blank (unless you wish to use a color. If so, also use a border
on the navigation table.)
h. Save as: enter a name for the button file (homebutton.swf)
4. Click OK to close the Insert Flash Button dialog box. Enter the title of the button in the
Flash Accessibility Attributes box.
5. Click in the second cell of the table repeating these steps for each button. Save.
Duplicate the Navigation Table
1.
2.
3.
4.
5.
6.
7.
8.
Click in the table and select Modify > Table > Select Table
Select Edit > Copy
Navigate to the second page of the web site (double-click the page in the Site Panel)
Position the insertion point cursor at the bottom of the second page.
Select Edit > Paste
The Table is copied onto the page.
Navigate to each page of the web site and Paste the Navigation Table.
On each page of the web site, deactivate the button that links to that page by doubleclicking on the button in the table and removing the link in the properties panel.
© Education Service Centers of Texas
Teaching with Technology
Adobe Dreamweaver CS3
Page 6
Create a New Site Using a Template
Dreamweaver includes Blank Templates (with various layouts but no content) and Sample Pages
(with themes and content). To create a web site using these built-in templates, select the
template from the New Document window and follow the same steps as above.
Templates are also available from many sites on the Internet (see the Resources page).
To create a web site using an alternative free template:
1. Download the template folder to your computer.
2. Rename the folder containing the template files with the name of your site.
3. Create a New Site in Dreamweaver and browse to the template folder as the root folder.
4. You may also need to rename the existing pages in the template to meet your needs.
Create an Image Map (bonus activity)
1. Open a new blank html page.
2. Insert the image of the worldMap.jpg
3. In the document window, click the image of the world map to select it.
Image Map options appear in the expanded Property inspector.
4. Enter text in the Map name text box.
5. Click the Rectangular Hotspot Tool to select it.
6. In the Document window, click in the area above and to the left of North America, and
then drag the pointer down and to the right over the continent to create a hotspot area.
A blue layer appears over the image, and the hotspot Property inspector appears.
7. In the Link text box, browse to link to another web page on your site or an external URL.
For this activity, enter a website of your choosing.
8. In the Alt text box, enter: North America
9. Click the image of the world map to create another hotspot.
10. In the Property inspector, click the Polygon Hotspot tool to select it.
11. Click points on the map to define the shape of Europe as the hotspot area.
12. When finished mapping the image, click the Arrow button in the Property inspector to
change back to the pointer tool.
13. In the Link text box, browse to link to another web page on your site or an external URL.
For this activity, enter another website of your choosing.
14. In the Target pop-up menu, choose _blank. The linked page will open in new window.
15. In the Alt text box, enter: Europe
Image Map example: http://gcv.mms.com/
© Education Service Centers of Texas
Teaching with Technology
Adobe Dreamweaver CS3
Page 7
Resources
Creating your first website in Dreamweaver CS3:
http://www.adobe.com/devnet/dreamweaver/?navID=gettingstarted
http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.html
Web Style Guide: http://www.webstyleguide.com/page/index.html
Dmitry’s Design Lab: http://www.webreference.com/dlab/
Center for Safe and Responsible Internet Use: http://responsiblenetizen.org/
Adobe Instructional Resources:
http://www.adobe.com/education/instruction/
http://www.adobe.com/education/instruction/teach/studio.html?Tabs=dreamweaver
Bullets for School Pages
http://www.ou.edu/special/owp/yummy/bullets/bullets.html
Free 3D Textmaker
http://www.3dtextmaker.com/image_editor.html
Copyright and Citing Sources – Classroom Connect
http://www.classroom.com/community/connection/howto/citeresources.jhtml
Dreamweaver Tutorials and Templates
http://www.dreamweaver-templates.org/dreamweaver-tutorials.html
http://www.dreamweaver-templates.org/free-dreamweaver-templates.html
http://www.adobe.com/products/dreamweaver/download/templates/
http://www.entheosweb.com/website_templates/free-dreamweaver-templates.asp
Contact: Karin Horn, [email protected]
Resources for this workshop are located on my website:
http://www.esc11.net/edtech/karin
Click the Resources button in the left navigation column.
© Education Service Centers of Texas
Teaching with Technology
Adobe Dreamweaver CS3
Page 8