Download Introducing Dreamweaver

Introducing
Dreamweaver
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