IntroducingDreamweaver

Dreamweaver

• The web development application used to create web pages

• Part of the Adobe creative suite

Workspace

• Contains windows, tool bars and panel groups that are displayed when Dreamweaver is running

Insert Panel

• Allows you to add objects to a web page document

Files Panel

• Displays the files and folders associated with the active website

Property Inspector

• Used to change the properties of the selected text or object

Defining a Web Site

• A website needs to be defined before any web page documents are created

• Includes specifying a folder name, a server technology, files location and remote server options

• When a site is defined, a folder is created with the specified name and the folder is displayed in the files panel

File Name Guidelines

• CAN contain lowercase letters, numbers and underscores

• Do NOT use spaces or uppercase letters• Do NOT start the filename with a number

Creating a Web Page Document

• Steps:– File (drop down menu) New (dialog box is

displayed)– Select: • Blank Page• HTML• <none>

– Click create

Home Page

• The main page or starting point of the website• INDEX: file name used in Dreamweaver to

designate a web page document as the home page of a web site

Page Title

• The text displayed in the title bar of the browser window when a user views a web page

• Also appears in the title bar of the Document Window in Dreamweaver

• Spaces are OK• Fast way to change is to type the new title in

the title box in the Document toolbar and press Enter

Viewing a Web Page Document

• Design View: – default display for web page documents.– Displays the document similar to how it will

appear in a browser window• Code View:– Displays the code generated for the web page

• Split View:– Combination of both Design and Code views

Viewing a Web Page Document

• Press F12 key to view a web page document in a browser window

• A document can not be modified in the browser window

Using a Table to Arrange Content

• Content: the information presented to the user. EX: text or graphics

• Tables: used for organizing and controlling the arrangement of content in a web page– Consists of horizontal rows and vertical columns– A cell is the intersection of a row and a column

Table Width

• Can be specified in either pixels or as a % of the width of the browser window

• Pixel: a unit of measurement related to screen resolution

• A table width specified in pixels is called Fixed Width because the width of the table will not change when a user resizes the browser window

Tables, cont

• Border: lines around the table and cells– 0 specifies no border displayed

• Cell padding: number of pixels of blank space between the content in the cell and the cell’s boundary

• Cell spacing: number of pixels between cells

Creating Tables

• Standard mode should be used when creating tables

• To create a table select Insert (drop down menu) Table OR click the Table button in the Insert Panel

2 Ways to Select a Table

• Place the insertion point in any cell and click the <table> tag in the tag selector

• Point to a border or corner of the table and click

• When a table is selected, the Property Inspector displays properties for that table

Table Properties

• W: table width• Align: position the table with in the web page

document

Cell Properties

• Placing the insertion point in a cell displays the cell properties in the property inspector

• W: width of cell in either a % of the table’s width or in a number of pixels– Can type the new value– Value is automatically in pixels unless you type the

% sign• H: height of a cell in % or in pixels– Can type the new value

Adding Rows and Columns

• When a new row is added, it is added ABOVE the cell

• A new column is added to the LEFT of the cell• To add TEXT, click in a cell to place the

insertion point and then type the text• To insert a Line Break press Shift and Enter

Tables, cont

• Press the TAB key to move the insertion point to the next cell or press Shift and Tab to move to the previous cell

• The arrow keys also move the insertion point between cells

Character Buttons Menu

• Includes other characters such as currency symbols, the copyright symbol, and registered trademark

MISC

• Edit (drop down Menu) Undo or Control and Z key to cancel the last action made

• Commands (drop down Menu) Check Spelling to start checking the spelling from the insertion point

• Ignore: useful for proper names that are not in the Dreamweaver dictionary

Printing

• From Browser: File (drop down Menu) Print – Make sure the correct printer is selected and click

Print• File (drop down Menu) Print Preview – Determines how many pages will be printed for a web

page• File (drop down Menu) Print Code or Control

and P– To print code from Dreamweaver for a web page

document

Closing a Web Page Document

• Means that its window is removed from the Dreamweaver workspace and the file is no longer in the computer’s memory

Quitting Dreamweaver

• Means that its window is removed from the desktop and the program is no longer in the computer’s memory

Opening an Existing Web Site

• To open a web site for editing that is NO LONGER listed in the Files Panel:

• Site Manage Sites New ( Site Definition Dialog box is displayed)

• Select the Advanced Tab to display options for defining an existing site

• Type a site name in the Site Name Box and then click the Local Root Folder Icon

Opening an Existing Web Site

• Navigate to the location of the web site folder• Select OK at the bottom of the Site Definition

Dialog Box to open the site

Opening a Web Page Document

• 2 ways:– Double click the file name in the Files Panel– File (drop down menu) Open• navigate to the file• Click the file name• Select OPEN

• Several web page documents can be open at the same time

Text Hyperlinks

• Document-Relative Hyperlink: text that can be clicked to display a different web page document in the browser window for the SAME website

• External Hyperlink or Absolute Hyperlink: a hyperlink that displays a web page from another website– Select _blank in the Target list in the Property

Inspector to display the link in a new browser window