February 2007Colby College ITS Getting Started with Dreamweaver 8.

February 2007 Colby College ITS

Getting Started withDreamweaver 8


After completing thistutorial, you should be able to:

• Use built-in Help

• Identify workspace components

• Customize the workspace

• Create and save files


The Help System


Opening Help

• To open the Help System– Help > Dreamweaver Help


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


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


The Development Window


Workspace Layout


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


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


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


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


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


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



• 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.



• 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


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


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


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


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


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


Customizing the Workspace


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


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.


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


Managing Your Site Files


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


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


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


Creating a New File (2 of 2)


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.


Opening a Saved File

• File > Open

• Navigate to the file you want

• Click Open


Questions? Comments?Feedback?

Contact: Technical Trainingor

Call Mel Regnell at ext. 4217

February 2007Colby College ITS Getting Started with Dreamweaver 8.

Documents

Transcript of February 2007Colby College ITS Getting Started with Dreamweaver 8.