CIT 256 Dreamweaver Intro. Dr. Beryl Hoffman

Start Dreamweaver Start from Start Menu/Adobe Master Collection CS6/ Adobe Dreamweaver CS6 Choose Create New HTML. (XHTML 4 default – other options available from File menu).

Code/Split/Design View Click on the Code/Split/Design to see HTML code or WYSIWIG Design or both. Type in a title in this bar too.

Page Properties for Colors/Styles Click on the Page Properties button at the bottom bar to select Background/Text/Link Colors, fonts, background images. Use Appearance (CSS) and Links (CSS) and Links (CSS)

What is CSS? CSS stands for Cascading Style Sheets. Usually the HTML code has the content, and the CSS defines the style for the page or site. For example, this defines the style for any text in h4 tags: h4 { font-family: "Arial"; color: blue }

Link Colors Link color: usually a different color than text. Default blue. Visited color: choose a less bright color. Default purple. Rollover color: changes color when mouse is on it, choose a brighter color. Active color: color when you click on it. Default you click on it. Defaultred. Underline Style.

Formatting Text Type in some text. Drag mouse to select text. Pull down the Format menu at the top and choose Paragraph/headings, Align/center, List, Style, etc. If you choose a different color, you will be prompted to type in a new style name (e.g. type in color name) that you can use again.

Inserting Links Type in the text you want to click on. Select/highlight it with the mouse. From the Insert menu, choose Hyperlink and type in the full URL (e.g. next to Link: or type in URL at the bottom bar next to Link:. Target: _blank will put it in a new window or tab. in a new window or tab. Breaks Back button.

Inserting Images First save your file! Next put your image files in the same directory as your file! Drag and drop in image or choose Insert/Image. Type in an alt (alternative) text that describes image so it can be read to users 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: (Stock exchange) (pulls from other sites) (interesting reverse search and color search)

Image 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 Paths Document Relative path: Always looks in the same directory. Easy to move web site. Always looks in the same directory. Easy to move web site. Absolute path: If files are uploaded to another computer or web server, image cannot be found!

Image Re-sizing/Editing Re-sizing: Grab anchors at the side. Hold down Shift key and grab corner to preserve proportions. Use lock next to width & height to type in new height or width. Editing: buttons for crop, re-sample, sharpen, brightness/contrast. Or move to Photoshop. If it is a large image, re-size and then re-sample to save a smaller image for quicker load time. Careful, original changed, no automatic backup!

Image Links Making an image into a clickable button: Insert Image. Click on image. Type in URL in the Link: property in the bottom window.

Lists and Tables Lists: Type in text for list items, highlight, choose Format/List/type of list. Tables: Insert/Table. Choose number of rows and columns, border, etc. Type in or drag in table items.

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