Getting Started with Dreamweaver 8

jellytrickInternet και Εφαρμογές Web

10 Νοε 2013 (πριν από 3 χρόνια και 7 μήνες)

261 εμφανίσεις

February 2007

Colby College ITS

Getting Started with

Dreamweaver 8

February 2007

Colby College ITS

After completing this

tutorial, 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

Tip

To search for a

specific phrase

enclose it in

quotes

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

Tip

Start typing a

keyword to

quickly scroll

to 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 Training

or

Call Mel Regnell at ext. 4217