CIT 256 CIT 256 Dreamweaver Intro.Dreamweaver Intro.

Dr. Beryl HoffmanDr. Beryl Hoffman

Start DreamweaverStart Dreamweaver

Start from Start Menu/Adobe Master Start from Start Menu/Adobe Master Collection CS6/ Adobe Dreamweaver CS6Collection CS6/ Adobe Dreamweaver CS6

Choose Create New HTML. (XHTML 4 Choose Create New HTML. (XHTML 4 default – other options available from File default – other options available from File menu).menu).

Code/Split/Design ViewCode/Split/Design View

Click on the Code/Split/Design to see Click on the Code/Split/Design to see HTML code or WYSIWIG Design or both.HTML code or WYSIWIG Design or both.

Type in a title in this bar too.Type in a title in this bar too.

Page Properties for Page Properties for Colors/StylesColors/Styles

Click on the Page Properties button at the Click on the Page Properties button at the bottom bar to select Background/Text/Link bottom bar to select Background/Text/Link Colors, fonts, background images.Colors, fonts, background images.

Use Appearance (CSS)Use Appearance (CSS)

and Links (CSS)and Links (CSS)

What is CSS?What is CSS?

CSS stands for Cascading Style Sheets.CSS stands for Cascading Style Sheets.

Usually the HTML code has the content, and Usually the HTML code has the content, and the CSS defines the style for the page or site.the CSS defines the style for the page or site.

For example, this defines the style for any text in h4 tags:

<style type="text/css">

h4 { font-family: "Arial"; color: blue }

</style>

Link ColorsLink ColorsLinkLink color: usually a different color than text. Default color: usually a different color than text. Default blue.blue.

VisitedVisited color: choose a less bright color. Default purple. color: choose a less bright color. Default purple.

RolloverRollover color: changes color when mouse is on it, color: changes color when mouse is on it, choose a brighter color.choose a brighter color.

ActiveActive color: color when color: color when

you click on it. Default you click on it. Default

red.red.

Underline Style.Underline Style.

Formatting TextFormatting Text

Type in some text.Type in some text.

Drag mouse to select text.Drag mouse to select text.

Pull down the Format menu at the top and Pull down the Format menu at the top and choose Paragraph/headings, Align/center, choose Paragraph/headings, Align/center, List, Style, etc.List, Style, etc.

If you choose a different color, you will be If you choose a different color, you will be prompted to type in a new style name (e.g. prompted to type in a new style name (e.g. type in color name) that you can use again.type in color name) that you can use again.

Inserting LinksInserting LinksType in the text you want to click on.Type in the text you want to click on.

Select/highlight it with the mouse.Select/highlight it with the mouse.

From the Insert menu, choose Hyperlink and From the Insert menu, choose Hyperlink and type in the full URL (e.g. type in the full URL (e.g. http://www.elms.edu) ) next to Link: or type in URL at the bottom bar next to Link: or type in URL at the bottom bar next to Link:.next to Link:.

Target: _blank will put itTarget: _blank will put it

in a new window or tab. in a new window or tab.

Breaks Back button.Breaks Back button.

Inserting ImagesInserting Images

First save your file! First save your file!

Next put your image files in the same Next put your image files in the same directory as your file!directory as your file!

Drag and drop in image or choose Drag and drop in image or choose Insert/Image.Insert/Image.

Type in an alt (alternative) text that Type in an alt (alternative) text that describes image so it can be read to users describes image so it can be read to users who cannot see.who cannot see.

Finding Free Images

Right click to Save an image from the web, but be aware of copyright laws!Search for free images, royalty-free, public domain, creative commons license, etc. Google images has no controls for this!

Free image sites:http://morguefile.com http://www.sxc.hu/ (Stock exchange)http://www.everystockphoto.com (pulls from other sites)http://www.flickr.com http://tineye.com/ (interesting reverse search and color search)

Image File FormatsImage File Formats

JPEG/JPG: 24 bit color, use for continuous tone photographs and Photoshop images. Loss-y compression (loses pixels when shrunk, not good for text). Does not support transparency.

GIF: 8 bit color, use for logos/text, solid color such as Illustrator illustrations. Lossless compression (no pixels lost in reductions of size). Supports index transparency which can have a halo effect.

PNG: supports 8 bit and 24 bit. Lossless compression and better alpha transparency. A better format!

SVG: based on vector lines, not pixels, so completely scalable. IE needs separate plug-in to view them.

Relative vs. Absolute PathsRelative vs. Absolute Paths

Document Relative path:Document Relative path:

<img src=“cat.jpg” /><img src=“cat.jpg” />

Always looks in the same directory. Easy to Always looks in the same directory. Easy to move web site.move web site.

Absolute path:Absolute path:<img src="file:///C|/Users/hoffmanb/Desktop/cat.jpg" /><img src="file:///C|/Users/hoffmanb/Desktop/cat.jpg" />

If files are uploaded to another computer or web If files are uploaded to another computer or web server, image cannot be found!server, image cannot be found!

Image Re-sizing/EditingImage Re-sizing/Editing

Re-sizing: Grab anchors at the side. Hold down Re-sizing: Grab anchors at the side. Hold down Shift key and grab corner to preserve Shift key and grab corner to preserve proportions. Use lock next to width & height to proportions. Use lock next to width & height to type in new height or width.type in new height or width.

Editing: buttons for crop, re-sample, sharpen, Editing: buttons for crop, re-sample, sharpen, brightness/contrast. Or move to Photoshop.brightness/contrast. Or move to Photoshop.

If it is a large image, re-size and then re-sample If it is a large image, re-size and then re-sample to save a smaller image for quicker load time. to save a smaller image for quicker load time. Careful, original changed, no automatic backup!Careful, original changed, no automatic backup!

Image LinksImage Links

Making an image into a clickable button:Making an image into a clickable button:

Insert Image.Insert Image.

Click on image.Click on image.

Type in URL in the Link: property in the Type in URL in the Link: property in the bottom window.bottom window.

Lists and TablesLists and Tables

Lists: Type in text for list items, highlight, Lists: Type in text for list items, highlight, choose Format/List/type of list.choose Format/List/type of list.

Tables: Insert/Table. Choose number of Tables: Insert/Table. Choose number of rows and columns, border, etc. Type in or rows and columns, border, etc. Type in or drag in table items.drag in table items.

Test!Test!

Click on the world icon to test in different Click on the world icon to test in different browsers. Always test in multiple browsers. Always test in multiple browsers.browsers.