macromedia dreamweaver 4
DESCRIPTION
Macromedia Dreamweaver 4. Intermediate Level Course. The HTML Code Window. HTML code can be viewed in: Code View Code and Design View. The Code Inspector. Editing code is easy when using Code View Options and the Code Inspector. External HTML Editors. Graphics Audio Video. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Macromedia Dreamweaver 4](https://reader033.vdocuments.net/reader033/viewer/2022061522/568133e1550346895d9ad404/html5/thumbnails/1.jpg)
Macromedia Dreamweaver 4
Intermediate Level Course
![Page 2: Macromedia Dreamweaver 4](https://reader033.vdocuments.net/reader033/viewer/2022061522/568133e1550346895d9ad404/html5/thumbnails/2.jpg)
The HTML Code Window
HTML code can be viewed in:• Code View• Code and Design View
![Page 3: Macromedia Dreamweaver 4](https://reader033.vdocuments.net/reader033/viewer/2022061522/568133e1550346895d9ad404/html5/thumbnails/3.jpg)
The Code Inspector
Editing code is easy when using Code View Options and the Code Inspector
![Page 4: Macromedia Dreamweaver 4](https://reader033.vdocuments.net/reader033/viewer/2022061522/568133e1550346895d9ad404/html5/thumbnails/4.jpg)
External HTML Editors
• Graphics• Audio
• Video
Choose your favorite editing program for:
![Page 5: Macromedia Dreamweaver 4](https://reader033.vdocuments.net/reader033/viewer/2022061522/568133e1550346895d9ad404/html5/thumbnails/5.jpg)
The Quick Tag Editor
Insert HTML - features a drop-down list of tagsWrap Tag - will enclose existing tags within another tagEdit HTML - to edit existing HTML code
Make fast alterations in the HTML codeMake fast alterations in the HTML code
![Page 6: Macromedia Dreamweaver 4](https://reader033.vdocuments.net/reader033/viewer/2022061522/568133e1550346895d9ad404/html5/thumbnails/6.jpg)
Clean Up HTML
• Clean up redundant tags• Combine related tags• Remove empty tags
![Page 7: Macromedia Dreamweaver 4](https://reader033.vdocuments.net/reader033/viewer/2022061522/568133e1550346895d9ad404/html5/thumbnails/7.jpg)
Clean Up Word HTML
Cleanup unnecessary code created in web saved Word files
Basic or Detailed Cleanup
![Page 8: Macromedia Dreamweaver 4](https://reader033.vdocuments.net/reader033/viewer/2022061522/568133e1550346895d9ad404/html5/thumbnails/8.jpg)
Drawing Cells
Design and build the structure of the page layout
•Layout view
•Draw Layout Cell
•Draw Table Cell
•Nested tables
![Page 9: Macromedia Dreamweaver 4](https://reader033.vdocuments.net/reader033/viewer/2022061522/568133e1550346895d9ad404/html5/thumbnails/9.jpg)
Tracing Images
A tracing image is used asa guide for placing layout elements
![Page 10: Macromedia Dreamweaver 4](https://reader033.vdocuments.net/reader033/viewer/2022061522/568133e1550346895d9ad404/html5/thumbnails/10.jpg)
Convert Layers to Table
• Create the page in layers, and then convert it to tables for backward browser compatibility
![Page 11: Macromedia Dreamweaver 4](https://reader033.vdocuments.net/reader033/viewer/2022061522/568133e1550346895d9ad404/html5/thumbnails/11.jpg)
Convert Tables to Layers
• The Convert Tables to Layers function enables you to return to layout mode after converting the page to tables
![Page 12: Macromedia Dreamweaver 4](https://reader033.vdocuments.net/reader033/viewer/2022061522/568133e1550346895d9ad404/html5/thumbnails/12.jpg)
Design Notes
Design Notes for organization and communication
• Design Notes consist of a small file attached to the page, and follows the page even if that page is renamed
• The status category of Design Notes keeps track of the development stage of the page
![Page 13: Macromedia Dreamweaver 4](https://reader033.vdocuments.net/reader033/viewer/2022061522/568133e1550346895d9ad404/html5/thumbnails/13.jpg)
Background Images
Add background or tiled images with ease
![Page 14: Macromedia Dreamweaver 4](https://reader033.vdocuments.net/reader033/viewer/2022061522/568133e1550346895d9ad404/html5/thumbnails/14.jpg)
Image Spacers
Spacer images are small transparent GIFsthat are used to control thestability of a table
![Page 15: Macromedia Dreamweaver 4](https://reader033.vdocuments.net/reader033/viewer/2022061522/568133e1550346895d9ad404/html5/thumbnails/15.jpg)
Creating Tables
• Tables are the foundation of web building
• Tables bring order and control to page layout
![Page 16: Macromedia Dreamweaver 4](https://reader033.vdocuments.net/reader033/viewer/2022061522/568133e1550346895d9ad404/html5/thumbnails/16.jpg)
Table Borders and Cells
• Change table border size and appearance• Make table borders invisible• Split table cells
• Merge table cells
![Page 17: Macromedia Dreamweaver 4](https://reader033.vdocuments.net/reader033/viewer/2022061522/568133e1550346895d9ad404/html5/thumbnails/17.jpg)
Modifying Tables
Change table attributes using the Property Inspector
Number of rows and columns CellSpace
CellPad
Alignment
Background color
Background imageBorder color
Width/Height
Border width
Clear row heightsClear column widths
Convert table widths to pixelsConvert table widths to percent
![Page 18: Macromedia Dreamweaver 4](https://reader033.vdocuments.net/reader033/viewer/2022061522/568133e1550346895d9ad404/html5/thumbnails/18.jpg)
Aligning in Tables
Align contents of a cell:Horizontally• Left• Center• Right
Vertically• Top• Middle• Bottom• Baseline
![Page 19: Macromedia Dreamweaver 4](https://reader033.vdocuments.net/reader033/viewer/2022061522/568133e1550346895d9ad404/html5/thumbnails/19.jpg)
Importing and SortingTabular Data
Import delimited data into a table
Sort the contents of a table
![Page 20: Macromedia Dreamweaver 4](https://reader033.vdocuments.net/reader033/viewer/2022061522/568133e1550346895d9ad404/html5/thumbnails/20.jpg)
Image Assembly Using Tables
Change the table border to zero
Insert a sliced image into each cell
![Page 21: Macromedia Dreamweaver 4](https://reader033.vdocuments.net/reader033/viewer/2022061522/568133e1550346895d9ad404/html5/thumbnails/21.jpg)
Working with Text
• The HTML document is made up of headings and paragraphs• Headings do not have an actual point size; they are relative
sizes
![Page 22: Macromedia Dreamweaver 4](https://reader033.vdocuments.net/reader033/viewer/2022061522/568133e1550346895d9ad404/html5/thumbnails/22.jpg)
Fonts
The following series of fonts are generally resident on the user’s system:
•Arial, sans-serif •Courier New, mono•Courier, mono •Geneva, san-serif•Georgia, serif•Helvetica, sans-serif•Times New Roman, serif•Times, serif•Verdana, sans-serif
![Page 23: Macromedia Dreamweaver 4](https://reader033.vdocuments.net/reader033/viewer/2022061522/568133e1550346895d9ad404/html5/thumbnails/23.jpg)
HTML Styles
• HTML styles can be assigned to an entire paragraph or just to a selected section of text
![Page 24: Macromedia Dreamweaver 4](https://reader033.vdocuments.net/reader033/viewer/2022061522/568133e1550346895d9ad404/html5/thumbnails/24.jpg)
Lists
Lists can be bulleted plain, or indented
Types of lists are:
•Ordered•Unordered•Definition•Nested
![Page 25: Macromedia Dreamweaver 4](https://reader033.vdocuments.net/reader033/viewer/2022061522/568133e1550346895d9ad404/html5/thumbnails/25.jpg)
Text Color
• The default color for text is black
• Font color can be added to the entire page, or just a selection of text
![Page 26: Macromedia Dreamweaver 4](https://reader033.vdocuments.net/reader033/viewer/2022061522/568133e1550346895d9ad404/html5/thumbnails/26.jpg)
Correcting Text
• Spell Checker enables you correct any spelling errors that may exist on your page
• Find and Replace can be applied to a single page, all files in a folder, or an entire Web site
![Page 27: Macromedia Dreamweaver 4](https://reader033.vdocuments.net/reader033/viewer/2022061522/568133e1550346895d9ad404/html5/thumbnails/27.jpg)
The History Panel
The History panel tracks all the actions you take as you create your page
![Page 28: Macromedia Dreamweaver 4](https://reader033.vdocuments.net/reader033/viewer/2022061522/568133e1550346895d9ad404/html5/thumbnails/28.jpg)
Creating Frames
Frames divide the Web page into sections, and the sections can display different HTML documents
![Page 29: Macromedia Dreamweaver 4](https://reader033.vdocuments.net/reader033/viewer/2022061522/568133e1550346895d9ad404/html5/thumbnails/29.jpg)
Modifying Frames
• Name each frame• Display or hide frame scroll bars• Set frame borders• Resize frames• Color frame borders
![Page 30: Macromedia Dreamweaver 4](https://reader033.vdocuments.net/reader033/viewer/2022061522/568133e1550346895d9ad404/html5/thumbnails/30.jpg)
Links and Targets
The element in the frame links to another file or URL, and the content of the linked file will be displayed in another frame window.
![Page 31: Macromedia Dreamweaver 4](https://reader033.vdocuments.net/reader033/viewer/2022061522/568133e1550346895d9ad404/html5/thumbnails/31.jpg)
Splitting Frames
• Split Frame Left – positions the current page in the left created frame
• Split Frame Right – positions the page in the right created frame
• Split Frame Up – positions the page in the top created frame
• Split Frame Down – positions the page in the lower created frame
Split existing frames or “nest” frames
![Page 32: Macromedia Dreamweaver 4](https://reader033.vdocuments.net/reader033/viewer/2022061522/568133e1550346895d9ad404/html5/thumbnails/32.jpg)
Background Images with Frames
Create seamless background images using frames
• Logos• Navigation menus• Graphic headers
![Page 33: Macromedia Dreamweaver 4](https://reader033.vdocuments.net/reader033/viewer/2022061522/568133e1550346895d9ad404/html5/thumbnails/33.jpg)
Templates in Action
• A standard template is a copy or “pattern” of the basic elements of an object
• A template is a combination of a standard template and updateable Library elements
•Locked regions are elements that consistent on every page
•Editable regions are elements on a page that are not consistent with all other pages
![Page 34: Macromedia Dreamweaver 4](https://reader033.vdocuments.net/reader033/viewer/2022061522/568133e1550346895d9ad404/html5/thumbnails/34.jpg)
New Template
When creating a new template, include elements all that will be consistent on every page in your Web site
• Image page headers• Navigation menu• <meta> tags• Styles• Links
![Page 35: Macromedia Dreamweaver 4](https://reader033.vdocuments.net/reader033/viewer/2022061522/568133e1550346895d9ad404/html5/thumbnails/35.jpg)
Modifying a Template
Modify the template and update all “templated”pages instantly
![Page 36: Macromedia Dreamweaver 4](https://reader033.vdocuments.net/reader033/viewer/2022061522/568133e1550346895d9ad404/html5/thumbnails/36.jpg)
Library Items in Action
The Library consists of stored, repeated elements, which alleviates tedious insertion on every page, and retains consistency throughout the site
![Page 37: Macromedia Dreamweaver 4](https://reader033.vdocuments.net/reader033/viewer/2022061522/568133e1550346895d9ad404/html5/thumbnails/37.jpg)
New Library Item
• Create a new Library item using the Library Assets menu
• Drag the item from the Assets panel onto the page
• Library items can be copied to other Web sites
![Page 38: Macromedia Dreamweaver 4](https://reader033.vdocuments.net/reader033/viewer/2022061522/568133e1550346895d9ad404/html5/thumbnails/38.jpg)
Modifying a Library Item
Update a Library item and instantly update all pages with the modification