- Dreamweaver is a WYSIWYG web design program that allows users to visually design web pages and automatically generates the underlying HTML code. It allows editing pages in both design and code views. - Websites consist of files and folders organized on a remote server computer that are accessed via the internet. The local site on one's computer mirrors the file structure and organization of the remote site. - When setting up a new Dreamweaver site, it is important to logically organize files and folders on both the local and remote sites to maintain a clear site structure. The home page should be indexed and located in the root folder.

1. Using Macromedia Dreamweaver MX/8 Webpage Editing and Design Software Jeff Wood Computer Applications Training Specialist Colorado State University Extension

2. Basic Concepts

3. What is Dreamweaver? WYSIWYG (What You See Is What You Get) Web page editor Writes code for web pages You select images, text, colors Dreamweaver writes underlying code Code is called HTML Dreamweaver is a good way to learn HTML (split view between WYSIWYG and HTML)

4. What is HTML? Hyper Text Markup Language Common language understood by all browsers Translated differently by different browsers View, Page source (Firefox) or Source (Internet Explorer) to see HTML coding Dreamweaver has code view as well

5. HTML tags A tag is an attribute applied to text or an image Generally in pairs, opening <B> and closing </B> Attribute is applied between tags Some tags can take on more modifications <FONT FACE=”Courier” COLOR=”red” SIZE=”+2”></FONT> Font will be courier, red, 2 sizes larger than normal O’Reilly reference (Window, Reference) will tell you about any tag you highlight DW will highlight bad tags in yellow

6. Browsers DW allows quick preview of 2 browsers with F12 and Ctrl+F12 Preview work in 2 or more browsers: IE (Internet Explorer) 7.x a MUST IE is 71% of market* Mozilla Firefox 2.x a MUST Built by Netscape Navigator 13% of market* Other browsers Netscape Navigator (4.7 in particular) Google Desktop Opera, Safari, Keep earlier versions of IE, Firefox Rename the folder before upgrade *Janco Assc., March 07

7. Browsers (con’t)

8. What is a web site? Collection of files and folders on a server computer Files are written in HTML Server computer is the one people visit when they go to your site Two sites involved in building site: Local site - on your computer Remote site - on a server Your computer talks to Remote server using FTP (File Transfer Protocol) Local site a mirror image of remote site

9. Opening Dreamweaver Multiple windows and panels upon start-up Not as scary as it looks Close what you don’t need Arrange it how you like it Dreamweaver will remember last placement

10. Three main elements: Document window What the page looks like (and/or underlying code) Insert panel above Used to insert objects and properties Property inspector below PI inspects and changes properties of selected objects The PI is your best friend!

11. Document window Main Control center WYSIWYG (What You See Is What You Get) Not truly WYSIWYG – dependent on user’s browser and user’s settings Window size might not be maximized Monitor resolution varies 640 x 480 (1%) 800 x 600 (29%) 1024 x 768 and higher (68%) Fonts will vary with user defaults Colors will vary with OS, browser, monitor, user defaults Graphics may be turned off, plug-ins may be missing Different browsers translate HTML differently

12. Document window (con’t) The Document window: Title bar - file name and web page name * after filename = doc not saved Menu bar - all commands for the document window Toolbar - buttons for common tasks Document viewing area - where you add content (text, images, tables, links) Status bar – tags, magnification, window size, dial-up speed

13. Document window toolbar 3 important buttons: Code view Split view (code/design) Design view Page title - lets you name or rename page Target browsers “ Settings” allows you to check for unsupported tags in specific browsers ‘ Check browser support” shows potential problems Validate code (DW8 only) “ Settings” allows you to choose what type of doc

14. Document window toolbar File management - lets you give/take files from web (better to do it from site window) Preview - lets you see it in browser Set primary (F12) and secondary (Ctrl + F12) browsers here Check your work often Refresh - updates page (F5) View options & visual aids lets you set Document view options Word wrap, line numbers (code view) Grids, rulers (design view)

15. Bottom of Document window Tag selector - shows which tags are in play Can choose elements from here VERY useful when working with tables Hand tool, magnification tool (DW8 only) Magnification pulldown (DW8 only) Window size Download speed (25 second rule: under 25 seconds at 28.8 kbps) Click the little pull-down arrow to the right of window size, then “Edit Size” to change either

16. Objects panel Turn on/off in window menu Use pulldown to change categories - common is most useful Common - most-used commands Forms - for creating forms Text - inserts special characters and applies headings and lists Layout – Standard tables vs. layout tables Html – horizontal rules, headings, frames, etc.

17. Common elements: Link – adds hyperlink (easier to use PI) Email link – adds email link Mailto:emailaddress in PI another solution Named anchor – for links within a page One long page strategy Tables - easy table layout tool Coding tables by hand is HARD Images pulldown Pulldown for Placeholders, Rollover images, Navigation bars, hotspot drawing tools

18. Common elements (con’t) Media Flash buttons and Flash text easy way to create slick buttons and text with rollover and click behaviors Downside – requires Flash Date – Inserts date Option to “automatically update date on save” keeps you honest about “last updated” info Server side include (DW8 only) CSUCE Header and Footer good example In MX, SSI is in HTML category of insert panel Comments Comments in the code that don’t show up on the page

19. Property Inspector Turn on/off in window menu The PI is your best friend! Will change, depending on what you’re doing Default is for text properties Select text to format text Select an image to format image Select a link to format link Select a table to format table

20. Setting up a local site Set up pages on your computer the same way they’ll be set up on the web server Remote site = local site Figure out where to put your files All pictures in one place (images folder) All documents in one place (docs folder) Divide by year (docs_06) or subject (4h_docs) or both (4h_docs_06) Most pages needs own folder Logical flow to pages, logical flow to files and folders Pencil and paper is best way to start

21. Sample site structure Hometown Security Awareness Community Mobilization Skill Development Remember the 3 click rule: all info within three clicks of home page Documents and links Documents and links Documents and links Eval Eval form

22. Sample directory structure Hometown Security – root folder – contains index.(s)html (home page) and ALL OTHER FOLDERS Awareness – contains awa.html Community – contains com.html Skill – contains ski.html Docs – contains all documents Eval – contains eva.html Images – contains all .jpgs & .gifs

23. Directory structure Folders in DWeaver site window

24. Setting local information Site menu, New Site, Advanced tab, Local info Site name (for your use only) Define root folder Root folder is the starting place EVERYTHING on your site must be inside this folder Your home page is a file in this folder (NOT in a folder inside this folder) Browse to it using folder icon (or create one)

25. Setting local information (con’t) Default images folder Not available in DWeaver 4 DWeaver does image file management for you Either browse to “images” folder or create one All .jpegs and .gifs are automatically copied into this folder Link checker useful to check on broken links or “orphaned” links within the site Use complete URL Enable cache – “yes”

26. Setting remote information Remote info you will need: Ftp host – (e.g. - yuma.acns.colostate.edu) Host directory (WWW/) Login – your unique login Password – your unique login If you choose “Save” you will forget your password, so… When you get email from ACNS – save a paper copy, not just the email!

27. The home page Prefix: index or default Extension: htm, html Many exceptions .shtm or .shtml means interaction w/server needed .xhtml is stricter, cleaner version of html .asp, .cfm for dynamic pages File, New, Basic, then… Save As… Index.htm

28. The site window Site menu, Site files or F8 Files and folders show up on right Use “Expand” icon to see local and remote simultaneously One side is local site, other side is remote Shows directory structure of both sites Do file management (adding, moving, renaming, deleting) here Dreamweaver will track most changes Always test to make sure

29. connect refresh get files put files Remote site Local site

30. Creating content

31. User defaults Unlike print media, user sets own defaults Fonts and font sizes you specify may not be used Times New Roman, 12 point is default Resolution may differ 640 x 480 (1%) 800 x 600 (29%) 1024 x 768 and higher (68%) Graphics, media may be turned off Colors vary with monitor, operating system, browser Design with these limitations in mind 800 x 600 56 kbps Common fonts (Verdana, Times New Roman) Web safe colors

32. Title, description, keywords Add title using doc window toolbar Add description and keywords using “Head” in Html category of Insert panel Be concise, accurate, inclusive Keep it under 50 words Use commas to separate keywords To add content after the fact, often easier to do it in the code

33. Text Just start typing, or cut and paste Enter = paragraph break (2 lines) Enter + shift = line break (1 line) Property inspector default is text Drop downs to change format, fonts, sizes, colors Buttons for attributes, alignment, bulleting, indents Writing style for the web: short words, short sentences, short paragraphs

34. Setting Page Properties Modify> Page properties Appearance: Set base font, size, color Background color or image For readability, light background, dark text Background images - be careful not to overwhelm text You can use a table with solid color for text on top of mage Repeat tells DWeaver how to tile background (DW8 only) X is vertical, Y is horizontal Set margins in pixels

35. Setting Page Properties (con’t) Links Visited, rollover, active colors Left blank, they will take on default colors You can sample colors of graphics on page to choose colors Underline behaviors Underline best way to imply link to end user Headings Set size and color of different headings Use the Headings pulldown in PI to apply

36. Images Images are punctuation, not content Insert, Image, or Insert Image on the objects panel Select image by browsing to it Give all images an alt tag for text-to-speech browsers or browsers with image loading turned off DWeaver automatically prompts you to do it Property inspector will change to allow image manipulation

37. Manipulating images Best done in outside image editor Photoshop is industry standard Powerful tool, fun to work with Expensive ($170 at CSU Software Cellar) Steep learning curve I have LOTS of tutorials online and via CD Adobe Elements Basic, cheaper version of Photoshop ($79) You have some image software with your computer (MS PhotoEditor, Kodak Imaging for Windows) Digital cameras come with basic imaging software

38. Image size If you have no image editing software: Adjust size using Width/Height boxes in PI or Click-and-drag sizing boxes Hold “shift” during drag to avoid stretching image Numbers in Width and Height boxes will bold to indicate a changed value Use “Reset size” button if you don’t like what you did

39. Image alignment Align pulldown menu Baseline is default (aligns bottom of image with baseline of text or nearest object) Baseline = imaginary line under text or object Top, Bottom - aligns with top/bottom of nearest object Left, right - aligns with margin (and wraps text!) Middle - aligns with middle of text baseline Text top - aligns with tallest character in nearest text Absolute bottom – aligns bottom of image with lowest point in text ( j, g) Absolute middle - aligns middle of image with middle of text

40. Image size and alignment (con’t) Vspace, Hspace - # of pixels between object and surroundings Alt tags - text in lieu of image - important to add Text-only browsers, image-off options, web phones Screen tip text Border size - set number in pixels Default color is black (must change color in HTML with hex code) If it’s a link, border color is link color

41. Image types JPEG - supports lots of colors, longer to download, best for complex imagery good for photos GIF - 256 colors (any 256, not predetermined) Easier to download, best for large areas of flat color Good for cartoon-ish images PNG - new, captures complex pictures without large file sizes, not supported by all browsers

42. Page loading tips for images Keep image files small Smallest physical size Lowest usable quality Use alt tags Not necessary for small details (borders, bullets, etc) Use low source image as transitional image for large file-size images Type file name in “low src” text box (or use browse, or drag) Reuse images (only need one logo for all pages)

43. Links

44. Hyperlinks Links are paths to: Your own pages Pages on other websites Different parts of same page Email addresses Documents for download Can be text or images Linked text is usually underlined Linked images, or hotspots within images

45. Pathnames Relative pathnames are for in-site links Two types Document-relative pathnames Address of page or doc within your site Path from current page Site-root-relative path names Address of page or doc within your site Path from root directory Document-relative is safest bet

46. Pathnames (con’t) Two more types of paths: Absolute pathnames For pages not within your own site Full address of another website (http://www.ext.colostate.edu/) Named anchors Links to different spot on same page Can create website of one long page - links to different spots on same page from top

47. Creating Text Links Highlight text Pull up Property Inspector In link box, browse, type or paste new link Copy-and-paste from browser will insure you don’t misspell it Link box will also pull down recently used links Click somewhere outside of link box

48. Creating image links Buttons, arrows, logos, or pictures Select the image Pull up Property Inspector In link box, browse, type or paste new link Link box will also pull down recently used links

49. Hotspots within an image For creating a link in section of image Select image Select drawing tool (rectangle, oval, irregular) in PI to draw hotspot Type in link Best for multiple links from one image Good way to design navbar Create hotspots within maps, group photos

50. Linking to an E-mail address Highlight text Use email icon, or Document, Insert, Email link Dialog box will appear Text - what site will say (highlighted text) Email - Actual email address If highlighed text is actual email address, just click OK Default email program of user computer will be used Alternate mailbox for these responses only may be helpful mailto:email@address in link box another option

51. Adding CC’s and Subject lines Needs to be done in the code Add within quotes, no space Find “ mailto:Nancy.Banman@ColoState.edu ” For CC: Add ?cc=jeffrey.wood@colostate.edu For subject: Add &Subject=website Result: mailto:Nancy.Banman@ColoState.edu?cc=jeffrey.wood@colostate.edu&Subject=website

52. Linking to spots within same page The “One long page” strategy Table of contents or alphabet at top Links to rest of document FAQ’s are commonly done this way Alphabetical lists Top or bottom of document links also helpful Two parts: Place where you want to go (Named anchor) Link to get there

53. Linking to spots within same page (con’t) Put cursor in the place on page you want to go Click Anchor icon, or Insert, Named Anchor Name it one word, no spaces, easy to remember Anchor icon will appear Highlight or select the linked text or image In the link box, type #, then the name of the anchor No space between # and anchor name (#top)

54. Linking to sections of a different page For page within website Link to Page name#anchor name (webguide.htm#bandwidth) Will jump to the page “webguide.htm” and the named anchor called “bandwidth” Page in different site Link to Web Address#anchor name ( http://www.computer.com/webguide.htm#bandwidth ) Will jump to the page “www.webguide.htm” and the named anchor called “bandwidth”

55. Linking to documents Adobe (.pdf) is good universal format In wide use, Government standard Adobe Reader free and easy to download Doesn’t suggest an endorsement of a specific product (e.g. - Word or Wordperfect) Always provide link to page to download Adobe Reader (www.adobe.com) Always provide size and type of file in text so they know what they’re downloading - Web Account Request Form (113 kb .pdf file)

56. Linking to documents (con’t) Select linking text or image Have document in folder Like images, all documents should be stored together in common folder (“docs”, “06_docs”, “4h_06_docs”) In link box, browse to document

57. Opening links in new windows Why? Useful for framed pages For an external link, you might want your page to stay up Links to a document that has no return link Set the link In Property Inspector, set target to blank Top is default, which replaces the content of current page

58. Links you need: Email contact (preferably every page) CSU http://welcome.colostate.edu CSU CE http://www.ext.colostate.edu Disclaimer http://welcome.colostate.edu/index.asp?url=info_csu-disclaimer EOE statement http://welcome.colostate.edu/index.asp?url=info_csu-equalop Non-discrimination statement http://www.ext.colostate.edu/non-discr.html

59. Rollovers, Flash Objects, Navigation Bars

60. Image rollovers What is a rollover? Two images stacked on each other When an action (rollover, click) is performed, image changes Good for buttons – 2 different states Different color, same text and size, for each state Photoshop makes this very easy Free buttons available on web

61. Rollovers (con’t) Go to objects panel, choose rollover Images should be same size Second image will conform to first image size Browse to original image Browse to rollover image Add alt text Choose link Leave “preload” option checked - downloads when page downloads

62. Flash objects Warning: Flash is a plug-in, not all browsers come with it Plug-in = third party add-on software Macromedia Flash is plug-in for Flash media, integrates easily with Dreamweaver Pre-loaded on vast majority (98%) of browsers Slick and easy buttons and text Objects have pre-programmed rollover behaviors and click behaviors Saves bandwidth because files are very small

63. Inserting Flash text Use Media pulldown in Objects panel, select Flash Text, or Insert, Media, Flash Text Dialog box appears Choose font, font size Font doesn’t have to be loaded onto user computer (it’s a graphic, not text) B, I options (affects all text) Text alignment buttons (Left, center, right) Choose text color, rollover color, background color (may need to match page color)

64. Flash text (con’t) Type text into text box (check “show font” box for preview) Browse or type address of link Leave object in current folder Exeption to the “images” folder rule Name it something memorable (NOT text1.swf) OK, click Play in PI to watch rollover effects Be sure and click Stop when done Or, F12 to Preview

65. Flash Accessibility Attributes (DW8 only) For screen reader browsers Alt tag Access key That key + Ctrl will trigger the link Tab Index To relay what order the object will be selected when using the Tab button Needed only if there are several objects on page to navigate

66. Changes after the fact Can move or resize graphic 2-click to get dialogue box back Property inspector allows more: Background color changes Dimensions Alignment Vspace, Hspace changes

67. Creating Flash buttons Use Media pulldown in Objects panel, select Flash Text, or Insert, Media, Flash Text Dialog box appears Browse through, lots to choose from Sample box previews behaviors (rollover, l-click) “ Get more styles” connects to website with more stuff

68. Flash buttons (con’t) Type in text in text box Choose font Font size often non-negotiable Background color - eyedropper is good option for page color match Link - browse to file or type in address Click Play button to see rollover effects Click Stop before continuing

69. Changes after the fact Can move or resize graphic 2-click to get text box back Property inspector allows more: Background color changes Dimensions Alignment Vspace, Hspace changes

70. Navigation bars What is a navigation bar? Set of buttons stacked horizontally or vertically inside a table You need the images for buttons first Many sites to choose from Search engine - “html buttons” Good for standard buttons (forward, back, home, email) Photoshop is fast and easy button-maker

71. Inserting a navigation bar On objects panel, click Insert Nav bar button Up to four images to assign: Up image: initial image Over image: when mouse moves over it (lit up) Down image: when button is clicked (pushed in) Over while down: when mouse is over after clicking (lit up, pushed in)

72. Nav bars (con’t) Type in element name (home, links, etc.) When clicked, go to… Type in URL (get spelling right!), or If in-site, browse to it and select Show “Down image” Initially checkbox For when user is already there, so you want the button down at outset Select button before checking box Asterisk will appear

73. Nav bars (con’t) Create horizontally or vertically using pulldown To insert more buttons on nav bar Click the “+” button Follow same steps Change order by selecting image, using up and down arrows

74. Inserting MS Office documents (Word, Excel, PowerPoint) Strip them of transitions, animations, unnecessary graphics, sounds Start in native program, File, Publish to Web Choose “Files of Type” as Web Page (*.html) Publish file and folders directly into website (create “docs” folder to put it in) Another option: allow them to download it by linking to actual file (instead of web version) We did this already with .pdf Same technique with any document

75. Inserting MS Office documents (Word, Excel, PowerPoint) (con’t) Creates a file and a folder Point links to file; folder will take care of itself Commands>Clean Up Word HTML Word is very bad at writing code Cleans up redundant and MS-centric code Clean Up HTML another option Simple graphics and text can be added after the fact

76. Creating tables Good way to structure a web page Without tables, content is generally left, center, or right aligned (not a lot of design options Think of tables as building boxes to put content into

77. Tables (cont) Insert>Table, or Use table icon in Objects panel Set options in dialogue box # of rows & columns Table width Border, padding, spacing Header