February 2007 Colby College ITS
Getting Started withDreamweaver 8
February 2007 Colby College ITS
After completing thistutorial, you should be able to:
• Use built-in Help
• Identify workspace components
• Customize the workspace
• Create and save files
February 2007 Colby College ITS
The Help System
February 2007 Colby College ITS
Opening Help
• To open the Help System– Help > Dreamweaver Help
February 2007 Colby College ITS
Searching Help
• To search the Help System– For Windows
• Click the Search tab • Type a word or phrase in the text box • Click List Topics • Double-click any topic in the list to display it
– For Macintosh • Type a word or phrase in the Ask a Question text box • Press Enter• Double-click any topic in the list to display it
TipTipTipTip
To search for a specific phraseenclose it inquotes
To search for a specific phraseenclose it inquotes
February 2007 Colby College ITS
Using the Index
• Windows– Click the Index tab – Scroll to the desired entry– Double-click entry to display
information
• Macintosh – Click the Index link in the table of contents – Click a letter– Scroll to the desired index entry – Click a number beside the entry to display
information
TipTipTipTip
Start typing akeyword to quickly scrollto an entry
Start typing akeyword to quickly scrollto an entry
February 2007 Colby College ITS
The Development Window
February 2007 Colby College ITS
Workspace Layout
February 2007 Colby College ITS
The Document Window
• Design view – Visual page layout, editing, and rapid application
development– Displays a fully editable representation of the document– Similar to what you would see viewing the page in a browser
• Code view– Environment for writing and editing HTML, JavaScript,
server-language code• Code and Design view
– lets you view both Code view and Design view for the same document in a single window
• Title Bar– Displays the page title and, in parentheses, the file’s path
and filename– Displays an asterisk if there are unsaved changes
February 2007 Colby College ITS
The Document Toolbar (1 of 2)
• Show Code View displays only the HTML Code• Show Code and Design Views displays both Code and
Design• Show Design View displays only the Design view • Server Debug displays a report to help you debug the current
ColdFusion page• Document Title allows you to enter a title for your document,
to be displayed in the browser’s title bar
February 2007 Colby College ITS
The Document Toolbar (2 of 2)
• No Browser/Check Errors checks cross-browser compatibility• Validate Markup validates current document or selected tag• File Management displays the File Management pop-up menu • Preview/Debug in Browser previews document in a browser• Refresh Design View refreshes the document• Visual Aids lets you use different visual aids to design your pages
February 2007 Colby College ITS
The Status Bar (1 of 2)
• Tag selector shows hierarchy of tags surrounding current selection– Click any tag in the hierarchy to select that tag and all its contents. – Click <body> to select the entire body of the document – To set the class or id attributes for a tag in the tag selector
• Right-click (Windows) or Control-click (Macintosh) the tag• Select a class or ID from the context menu
– Tag selector ensures that the tag is selected accurately
• Hand tool drags the document in the Document window
February 2007 Colby College ITS
The Status Bar (1 of 2)
• Select tool disables the Hand tool • Zoom tool and Set Magnification pop-up menu set
magnification levels• Window Size pop-up menu resizes the Document window • To the right of the Window Size pop-up menu are
– Estimated document size
– Estimated download time – Includes all dependent files such as images and other media files
February 2007 Colby College ITS
The Insert Bar (1 of 3)
• Organized into categories• Common category
– Create and insert most commonly used objects– Images and tables for example
• Layout category– Inserts tables, div tags, layers, and frames– When Layout mode is selected, you can use the
Dreamweaver layout tools• Draw Layout Cell and Draw Layout Table
February 2007 Colby College ITS
The Insert Bar (2 of 3)
• Forms category– Creating forms and inserting form elements
• Text category – enables you to insert a variety of text- and list-
formatting tags, such as b, em, p, h1, and ul.
• HTML category – enables you to insert HTML tags for horizontal
rules, head content, tables, frames, and scripts.
February 2007 Colby College ITS
The Insert Bar (3 of 3)
• Server-code – Only available ASP, ASP.NET, CFML Basic, CFML Flow,
CFML Advanced, JSP, and PHP– Provides server-code objects
• Application category– Inserts dynamic elements such as recordsets, repeated
regions, and record insertion and update forms
• Flash elements– Insert Macromedia Flash elements
• Favorites category – enables you to group and organize the Insert bar buttons
February 2007 Colby College ITS
The Coding Toolbar
• Contains buttons that let you perform many standard coding operations– Collapsing and expanding code selections– Highlighting invalid code– Applying and removing comments– Indenting code– Inserting recently used code snippets
• Only visible in Code view – Appears vertically on the left side of the
Document window
February 2007 Colby College ITS
The Property Inspector
• Examine/edit properties for a selected element• Contents vary depending on the element selected• If you select an image
– Shows properties such as• File path • Width and height• Border, etc.
• Sits at the bottom of the workspace by default– Can be changed
February 2007 Colby College ITS
The Files Panel
• View and manage site files• Change, expand or
collapse size of Files panel• Displays local, remote and
testing site files• Can also display a visual
site map of the local site
February 2007 Colby College ITS
The CSS Styles Panel (1 of 2)
• Tracks CSS rules and properties – Current mode for a selected page
element– All mode for an entire document
• Modifies CSS properties in both All and Current mode
• Resize by dragging the borders • Current Mode
– Summary for Selection pane• Displays CSS properties for selection
– Rules pane• Displays location of selected properties
– Properties pane• Edits CSS properties for the rule
February 2007 Colby College ITS
The CSS Styles Panel (2 of 2)
• All mode– All Rules pane (on top)
• Rules defined in the current document
• Rules defined in style sheets attached to the current document
– Properties pane (on bottom)• Edit CSS properties for any
selected rule in the All Rules pane
– All changes are applied immediately
February 2007 Colby College ITS
Customizing the Workspace
February 2007 Colby College ITS
Choosing a Layout (Windows)
• The first time you start Dreamweaver– You are prompted to select a layout
• Designer is an integrated workspace using MDI (Multiple Document Interface), in which all Document windows and panels are integrated into one larger application window, with the panel groups docked on the right
• Coder is the same integrated workspace, but with the panel groups docked on the left, in a layout similar to that used by Macromedia HomeSite and Macromedia ColdFusion Studio, and with the Document window showing Code view by default
– Click OK• To switch after you’ve chosen
– Window > Workspace Layout– Select the workspace layout you prefer
• Additional selections– Dual Screen Right
• all panels on the right (secondary) monitor• Document on left (primary) monitor
– Dual Screen Left• All panels on the left (secondary) monitor• Documents on the right (primary) monitor
February 2007 Colby College ITS
Displaying Tabbed Docs (Mac)
• To open in a separate window– Right-click or Control-click the tab– Context > Move to New Window
• To combine separate documents into tabbed windows– Window > Combine as Tabs
• To change default tabbed document setting– Dreamweaver > Preferences > General– Select or deselect Open Documents in Tabs– Click OK.
February 2007 Colby College ITS
The Start Page
• To hide the Start page– Check Don’t Show Again checkbox on the
Start page
• To display the Start page– Edit > Preferences > General (Windows)
or – Dreamweaver > Preferences > General
(Macintosh)• Check Show Start Page checkbox
February 2007 Colby College ITS
Managing Your Site Files
February 2007 Colby College ITS
Dreamweaver Files (1 of 2)
• HTML (Hypertext Markup Language) .htm or .html– Tag-based language that controls how a page is displayed in
a browser
• CSS (Cascading Style Sheet) .css– Format HTML content and control the positioning of various
page elements
• GIF (Graphics Interchange Format) .gif– Popular web graphic format for cartoons, logos, graphics with
transparent areas, and animations limited to 256 colors
• JPEG (Joint Photographic Experts Group) .jpg• Usually used for photographs or high-color images• Best for digital or scanned photographs, images using textures,
images with gradient color transitions, and any images that require more than 256 colors
February 2007 Colby College ITS
Dreamweaver Files (2 of 2)
• XML (Extensible Markup Language) .xml– Contain data in a raw form that can be formatted using XSL– Extension = .xml
• XSL (Extensible Stylesheet Language) .xsl or xslt– Used to style XML data that you want to display on a web page– Extension = .xsl or .xslt
• CFML (ColdFusion Markup Language) .cfm– Used to process dynamic pages– Extension = .cfm
• ASPX, or ASP.NET (Active Server Pages).aspx– Used to process dynamic pages
• PHP, or PHP (Hypertext Preprocessor) .php – Used to process dynamic pages
February 2007 Colby College ITS
Creating a New File (1 of 2)
• File > New > General > Category• Select:
– Basic Page– Dynamic Page– Template Page– Other– Framesets
• Each selection will display the available types of documents
• Select the the type of document you want to create• Example:
– Select Basic Page to create an HTML document– Select Dynamic page to create a ColdFusion or ASP
document
February 2007 Colby College ITS
Creating a New File (2 of 2)
February 2007 Colby College ITS
Saving the New File
• File > Save• Navigate to the folder where you want to save
the file• Type a name for the file
– Avoid using spaces and special characters– Do not begin a filename with a numeral– Do not use special characters or punctuation
• Many servers change these characters during upload, which will cause any links to the files to break
• Click Save.
February 2007 Colby College ITS
Opening a Saved File
• File > Open
• Navigate to the file you want
• Click Open
February 2007 Colby College ITS
Questions? Comments?Feedback?
Contact: Technical Trainingor
Call Mel Regnell at ext. 4217
Top Related