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