| |
An Introduction to Dreamweaver Basics
Textbook: Dreamweaver4 Fireworks4 Studio: A Beginner's Guide.
Kim Cavanaugh. Osborne, 2001
Download the Textbook Exercises Online at: http://www.osborne.com
~~~~
Discover how quickly HTML comes to life with Dreamweaver!
The document window is the Dreamweaver work area, where you will input the web pages content. The document window is a WYSIWYG editor - displaying text, images, and layout approximately as they will appear in the browser.
Dreamweaver utilizes a standard menu that is very similar to word processing programs.
Context menus (menu related to what is currently highlighted or being worked on) can be brought up at anytime by right-clicking the mouse.
The menus will also display shortcut keys.
|
FILE
manipulate the file
|
- save
- save as
- save as template
- import/export
- convert
|
- preview & debug in browser
- check links
- check target browsers
- design notes
- web page history
|
|
EDIT
make global changes
|
- undo/redo
- cut/copy
- paste select all - parent tag - child
- keyboard shortcuts
|
- set breakpoint - debug JavaScript
- edit with external editor
- preferences
- find/replace - find next
|
|
VIEW
change the view
|
- code/design/code & design (document window display options)
- code view formatting displays
- head contents (meta-tags, JavaScript)
- table views
- visual aids (frames, layers, tables, image maps)
|
- code view options
- rulers/grids (pattern of lines for aligning text or graphics)
- tracing image
- plugins (play/stop objects that use plugins)
- panels/toolbar display options
|
|
INSERT
insert into the web page
also found in the Windows Object Panel
|
- images & media
- date
- tables
- horizontal rules - <hr>
- layers
- invisibles (line breaks - <br>)
- frames
|
- head tags
- forms
- special characters: comments, SSI
- more objects
- email
- link go back and forward (JavaScript buttons
|
|
MODIFY
change items on the page
|
- page properties (title, background, colors, margins)
- selection properties - property inspector panel (text/objects)
- quick tag editor
- link (make & targets)
- table
- frameset
|
- arrange - layers (behind and forward)
- align - line up object relative to each other convert
- library - elements that can be shared across pages
- templates
- timeline - animation
|
|
TEXT
modify text/text formatting
also found in the Property Inspector
|
- indent
- HTML styles
- out dent
- CSS styles
- paragraph & headings
- size
|
- align
- size change
- list
- color
- font
- check spelling style
|
|
COMMANDS
source code
|
- start recording - record common steps
- edit command list - give more commands - extensions (Macromedia exchange and other locations)
- apply source formatting - for tables (format, sort alphabetically or numerically)
- clean-up HTML
|
- clean-up WORD HTML
- add/remove Netscape resize fix
- create web photo album - for pages full of photographs, creates thumbnails with links to the full photograph
- set color scheme
|
|
Site
Set-up and manage the site
|
- site files
- define sites
- site map
- reports
|
- new site
- check links sitewide
- open sites
|
|
Window
opens panels
dockable - can be combined into one panel with tabs
|
- objects panel
- properties panel
- launcher - customizable (edit > preferences > panels) to create shortcut buttons to the window panel items
- site files
- site map
- assets - lists library and templates options; options for external media (video, images, scripts). You can drag an object from the Assets Panel to the web page. Lists all objects on your site, across all pages (images, colors, URLs, Flash, Shockwave, movies, scripts, templates, library)
- behaviors - JavaScript code inspector - same as the document view of code but in a separate window, which becomes shaded when not used
- CSS styles
- frames - displays the names of individual frames, easy way to modify individual frames
|
- history - history of web page creation steps, total number can be set in edit > preferences
- HTML styles - formatting (bold, italics) layers - lists all layers in a page, allows name changes to layers, z-index, visibility, lists layer properties
- library - items that can be shared across pages
- reference - information on HTML tags, CSS, and JavaScript
- templates
- timelines - animation
- arrange panels
- hide panels
- minimize all
- restore all
|
Back to the Top
- < > Code View - displays and allows you to work directly in the HTML source coding
- Design & Code View (split screen)
- upper screen contains the code view
- lower screen contains the design view
- Design View - all items view as if displayed in the browser. The Design View has two options:
- Standard View (default) - can not draw tables and cells, can work with frames and layers
- Layout View - layout and design page within tables.
- Document Title - center section of the toolbar
- File Management - many of the same options as contained on the Site Window (including GET & PUT)
- Preview & Debug in Browser
- Refresh Design View
- Reference <?> - opens up the REFERENCE panel to a set of reference books about CSS, HTML, and JavaScript.
- Code Navigation - only active in CODE view. Quick access to JavaScript debugging commands
- View Options - additional viewing tips depending on which view (from above) is selected. Example: color-coding the code view, turn on/off borders, rulers, grid, head content…
Back to the Top
Dreamweaver's Status Bar
Tag Selector - displays the tags for the text or objects displayed in the document window. Example: if the tag <title> is displayed, it will highlight the title area in the Code View.
You can code directly in this box to edit the tag only. You cannot add additional tags. That must be done in the HTML Source Window. Once you are finished, click somewhere else on the page. The tag editor will disappear and the changes will be added to the page.
Window Info:
Window Size - The recommended browser window size is 600x300 (640x480 screen resolution with the browser opened and maximized). Click the screen size menu to view preset size options.
Design to the smallest screen size your audience will be using to increase the number of people seeing your page correctly.
File Size and Download Speed - Displays the estimated document size and download time for your page. 30K/30 seconds is a reasonable size for a web page. The larger the page, the longer it will take to load. It's a good idea to occasionally check the download time of different modems.
Click Edit > Preferences > Status Bar to set the slowest common connection for your audience. (i.e. 28.8 modem)
Launcher Bar: launches other options
- Site Window - opens the Site Window
- Object Panel - opens the Objects Panel to allow the addition of objects
- Properties Inspector - opens, defines, and edits objects
- Assets Panel - opens the Assets Panel and lists library and templates options. Also options for external media (video, images, scripts).
- HTML Styles Panel - opens, defines, and applies formatting (bold, italics…)
- CSS Styles Panel - opens, defines, and applies CSS/Style Sheets
- Behaviors Panel - opens, defines, and applies JavaScript
- History Panel - opens and allows you to move backward through previous coding
- Timeline - creates simple animation
Clicking on the lower right corner and dragging to the desired width and height can resize the window.
Options to set the window size, connection speed and displaying the Launchers are set under the menu option: Edit > Preferences > Status Bar
Back to the Top
The Page Properties will be set before we start creating the web page. It sets the overall properties and color schemes for the page.
Page Properties can also be brought up with the keyboard shortcut Command-J or CTRL-J.
Title - the name of the web page that will appear on the browser title bar and will be used by the search engines. Not the same as the page file name!
Background Image - if the image is smaller than the page, it will "tile" or repeat to fill the page. This needs to be a relative link! Watch the amount of memory these use!
Color
Dreamweaver offers built-in color selection tools. These can be accessed by clicking on the color button Dreamweaver uses 212 of the 216 browser-safe colors.
- Background Color - default is white
- Text Color - default is black. Also the border color for images.
- Link - default color is blue
- Visited Link - default color is magenta
- Active Link - default color is red
Left Margin - Top Margin - Margin Width - Margin Height
Used to determine how far the body of the page is from the edge of the browser. This is in pixels. IE uses left & top margins. Netscape uses margin width & height.
Tracing Image and Image Transparency
These do not have anything to do with the HEAD or BODY properties, but are used to place an image that will be used as a template. Transparency sets the level of transparency for the tracing image.
Back to the Top
The Properties Inspectors are floating menus that provide shortcuts for text, links, images, tables, and other page objects (text, images, lists, tables and forms are all considered objects). If no object is selected, the Properties Inspector will display text attributes. To modify an object, select (click on) the object and then click on any of the options below:
- Modify > Selection Properties
- Window > Properties
- Text > Format
There are several different property inspectors: text, image, table, frameset, form, frame, layer, library, and media/flash.
Properties Inspectors are context sensitive - as you move your cursor over an object or text, then open a property inspector, and the right inspector will appear for that text or object.
If you move your cursor over each item in the panel, a description of that item will popup.
Back to the Top
The floating object panels parallel the Insert Menu items.
By default, the first objects panel is entitled COMMON. By clicking the drop down arrow (by COMMON at the top of the object panel), you will be provided with the choices of:
- common (image, rollover image, tables, layers, navigation bar, horizontal rule, email link, date, SSI, Fireworks HTML, Flash, Shockwave, Generator)
- characters (symbols not easily available on the keyboard - line breaks, copyright, , other money symbols {Yen, pound, euro}, quote marks)
- invisibles (comments, anchors, scripts)
- form items (to create web forms)
- frames (to create frames)
- head (metatags, links to CSS & JavaScript page templates)
- special (Java applets, ActiveX, plug-ins, extensions)
Labels for each icon appear as your roll your cursor each item.
The bottom of each panel contains buttons for working with tables (layout view) and document view (standard or layout).
Back to the Top
|
