Using Adobe Dreamweaver CS4/ CSU Extension Webpage Template

1. Using Adobe Dreamweaver CS4/CSU Extension Webpage Template Using Dreamweaver to work with the CSU Extension webpage template Dec 09

2. Basic Concepts

3. What is Dreamweaver? • WYSIWYG (What You See Is What You Get) Web page editor • Writes code for web pages • You lay out images, text, lists, links, tables • Dreamweaver writes underlying code • Code is called HTML • CSS is in the background • Dreamweaver is a good way to learn HTML (split view between WYSIWYG and HTML) • Best to work in split view – more exact

4. What is HTML? • Hyper Text Markup Language • Common language understood by all browsers • Translated differently by different browsers • Test on multiple browsers! • View, Page source (Firefox) or Source (IE) to see HTML code for any given page • Dreamweaver has code view as well

5. HTML tags • Tags usually applied in pairs: opening tag and closing tag.  Everything between the opening and closing tag is affected by the tag; <h2>Everything between the opening and closing tag is affected by the tag.</h2> • Some tags can have attributes added to them.  The <img> tag, for instance, inserts an image, and attributes define image source, image size, alt text for the image, etc.: <img src="images/staff1.jpg" width="100px" height="50px" border="1px" alt="Pueblo County Extension staff“ /> • O’Reilly reference (Window, Reference) will tell you about any tag you highlight

6. What is CSS? • CSS are Cascading Style Sheets • Work “behind the scene” • Help format the look and layout of the site • Builds boxes for content, governs font size and styles, headers, lists by applying “styles“ to various HTML tags • All in CSS folder • Don’t need to touch them • If you want to manipulate CSS • Add your own sheet • Attach URL to end of general.css

7. Browsers • Need to preview your site in several browsers • IE 7, 8 (27% of market*) • Firefox 1, 2, 3 (47%*) • IE 6 (12%*) (tough browser!) • Chrome (7%*) • Others (under 4% each*): Safari, Opera, NN 4 • Extension template works perfectly in FF, IE6+ • Aligns to left rather than centers in IE 5, 5.5, but looks fine other than that *Numbers from W3 Schools – Sept. 09

8. Multiple IE Browsers • IE likes to write over previous versions of itself, and will often not let you install earlier versions • IE Tester: • http://www.my-debugbar.com/wiki/IETester/HomePage • will install IE 5.5-8 (or any combination of them) on your system • Very lightweight and fast • Can bring same site up on different browsers in multiple tabs in same window • Useful for IE 5.5, IE6 preview alone

9. 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 • The root folder contains all the files and folders of the site • Move the root folder, you move the site

10. The Dreamweaver Workspace

11. Four main elements: • Document window • What the page looks like (and/or underlying code) • Insert panel at right • Used to be above in CS3 (can be put there in classic mode) • Inserts objects and properties • Property inspector below • PI inspects and changes properties of selected objects • Toggles between HTML and CSS • File pane to the right • Select files from here with double-click

12. Document window • Main Control center • Design view • Not truly WYSIWYG – dependent on user’s browser and user’s settings • End user’s OS, browser, monitor resolution, default fonts and colors • Graphics may be turned off, plug-ins may be missing • Code view • View options helpful • Color coded syntax, word wrap, line numbers • Highlight invalid code very cool!

13. Document window (con’t) • The Document window: • Menu bar - all commands for the document window • Toolbar – icons for common tasks • Tabs – each doc you pull up from the file pane will have a tab • Select doc with tab • Often useful to have several pages up at once (making same change to all pages) • * after name means it’s not saved yet • Right-click on tab allows close, close all, close “all but this one” • Related files area – NEW – shows all related files • Server Side Includes (SSI) • Cascading Style Sheets (CSS)

14. Document window (con’t) • Document viewing area - where you add content (text, images, tables, links) • Status bar • Tags in play at left • Very useful when working with tables • Select the table element here, then manipulate • Window size, dial-up speed at right • Drop-down arrow to change these • 56 kbs is best • 25 second rule – page will load in 25 seconds at 56 kbs

15. Document window toolbar • 3 important buttons: • Code view • Split view (code/design) • Design view • Live view – NEW – preview of site in document window • Better way to do this (F12, Ctrl+F12) • Page title - lets you name or rename page • 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

16. Document window toolbar (con’t) • Refresh - updates page (F5) • View options - lets you set Document view options • Word wrap, line numbers, line indent, syntax coloring, highlight invalid code (code view) • Rulers, grids, guides (design view)

17. Objects panel • At right in “Designer” view, up top in “classic” view, or older versions of Dreamweaver • Use pulldown/tabs to change categories - common is most useful • Common - most-used commands • Forms - for creating forms • Text - inserts special characters • GONE IN CS4 – Flash buttons/text • You can name icons in Edit, Preferences, General, Icons and Text

18. Common elements: • Link – adds hyperlink (easier to use PI) • Email link – adds email link • Named anchor – for links within a page • Horizontal rule – divider between sections • Tables - regular tables and page layout tables • Div tags – inserts div tags • Images/Rollover images/Nav bars – inserts images, image placeholders, rollover images, nav bars

19. Common elements (con’t) • Media – add Flash objects (Flash buttons and text v.CS3 and earlier) • Date –will self refresh for use with “page last updated on…” • Server side includes – already in the template • Comments – best done by hand • Breadcrumb trail in the code • Head content – best done by hand • Important! • Description of site • Keywords • Refresh – useful for redirects or dynamic content

20. Property Inspector • Turn on/off in window menu • 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 • Toggles between CSS and HTML (NEW!) • Stick with HTML (for now) • Important not to get CSS overly cluttered

21. 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 • Mirror image • Figure out where to put your files • All pictures in one place (images folder) • All documents in one place (docs folder) • Each page may need own folder • Logical flow to pages, logical flow to files and folders • Pencil and paper is best way to start

22. Sample Site Structure Home page (index.html) About Us Contact Us 1st level pages with little upkeep 4H Agriculture Family/Consumer Horticulture Mast. Gardener 2nd level pages requiring own folders From here, pages link to documents, calendars, other pages (remember the 3 click rule!)

23. Defining the Site

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 • 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 – actual URL – useful for absolute links to refer to pages/objects within your site • Don’t trust it – check links yourself • Enable cache – “yes”

26. Setting remote information • Remote info you will need: • Ftp host – (e.g. - yuma.acns.colostate.edu) • Host directory (blank, or “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! • Test button will test connection • Use “Firewall Settings” to work way around a firewall

27. The home page • The page the sever will default to when someone enters that folder • Index.html or Index.shtml • shtml means interaction w/server needed • .htm, .shtm work as well • Default.shtml is also around, but used less and less often

28. The File Pane • Switch websites at upper left • Shows directory structure at a glance • Double-click on files to bring them up • Use “Expand” icon to see local and remote simultaneously • Always expand before uploading or downloading files

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

30. Meta tags

31. Title • ALL pages need a title • Shows up in title bar at very top of browser window • Stay under 64 characters or it may be truncated • They can all share one title (Wapello County Extension) or have a specific one for each page (Wapello County Extension Horticulture page) • Between <head> and </head> tags <title>Colorado State University Extension</title>

32. Description • Often returned to someone using a search engine • A concise, accurate and inclusive description of your site • Under 50 words. Multiple sentences fine. • Between <head> and </head> tags • Feel free to steal from existing CSU Extension pages • Bring up page in browser, View menu, Source, then cut-and-paste into your own code <meta name="description" CONTENT="Colorado State University Extension is your connection to the research, information and expertise of your land-grant university. We offer hundreds of publications, and much much more.">

33. Keywords • Used to help “spiders” of search engine define and categorize your site • Under 50 words • Between <head> and </head> tags • Needs to be specific to your page – fine tune these • Use words already plentiful in the text • Separate words with commas <meta name="keywords" content="Extension, Outreach, Colorado State University, CSU, Fort Collins, CO, environment, lawn and garden, water issues, water conservation, soil and crop sciences" />

34. Registering Your Site • Search engines will eventually find your site on their own • To speed the process, register your site with Google and Yahoo • Google: Homepage>About Google (at bottom)>Submit your content to Google> Add your URL to Google • Yahoo: Homepage>Suggest a Site(at bottom)>Submit Your Site for Free

35. Adding Content

36. The Middle Column • Start with middle column • We’ll start simple by replacing this with a picture and a paragraph • Ultimately, the kind of format we’re looking at now is better • Pulls people right into your web page, gives them several options to click and get their feet wet • When you’re ready to try this approach, use the “_3ColTemplate.html” file as a template for it • Table, with picture in the left cells, linked title and 1 sentence in the right cell • Picture and title link to the article • Doesn’t have to be on your site • Use other Extension resources

37. Middle Column title • Go into Split view • Click and drag to delete everything in the center column <div id="centerCol"> <!-- Start Center Column div --> <h2>&nbsp;</h2> </div> <!-- end Center Column div --> • Content goes between Center Col divs • Delete these and the page falls apart!!!!

38. Middle Column title • Notice the <h2> </h2> tags • Your headline goes in here • “Welcome to ____ County Extension” • Can change the Header Style in code or through Format box in PI

39. Middle column text • Type in either code view or document view • Code view – add <p></p>tags to each paragraph • Document view – select text and choose Paragraph in format box • Use Home Text document

40. Images • Images take longer to load, so use judiciously • Insert Image on the objects panel • Select Image (browse to it) • Property inspector will change to allow image manipulation • Thumbnail will appear with image size and dimensions • You’ll be prompted to add alt text • ALWAYS add alt, or descriptive, text • Text to speech browsers, or folks who have image loading turned off need it

41. Manipulating images • Best done in outside image editor • Photoshop is industry standard • Powerful tool, fun to work with • Expensive ($125) • Steep learning curve • Adobe Elements • Basic, cheaper version of PShop ($79) • You have some image software with your computer (MS PhotoEditor, Kodak Imaging for Windows) • Digital cameras come with basic imaging software

42. 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

43. Other Image attributes • In PI: • Image link – put URL in “Link” box • Change alt text in “Alt” box • Add image map (already done in header) • V-Space, H-space will add vertical and horizontal spacing in pixels • Be judicious – this is already set in CSS • Border and alignment trumped by CSS • If you want to float it right – chose “right” in class • You can crop, lighten, darken, sharpen here too • Again, better done with an image editor

44. 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 – • not supported by all browsers • Good for simpler graphics • Better than GIF, more than 256 colors

45. Page loading tips for images • Keep image files small • Smallest physical size • Lowest usable quality (# of colors in gifs, quality # in jpgs) • 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)

46. Links

47. Hyperlinks • Links are paths to: • Your own pages • Pages on other sites • Different parts of same page • Email addresses • Documents for download • Can be text or images • Linked text is usually underlined or a different color, often a rollover behavior (underline, color change)

48. 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 • ../4h/4h.shtml • Site-root-relative path names • Address of page or doc within your site • Path from root directory • /4h/4h.shtml • Depends on server; Yuma plays best with Document-relative

49. Pathnames (con’t) • Two more types of paths: • Absolute pathnames • For pages not within your own site • Full address of another website (http://www.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

50. Creating Text Links • Highlight text • Pull up Property Inspector • In link box, browse, type or paste new link • Link box will also pull down recently used links • If Relative link, choose Document or Site • When in doubt, use Document! • Hit Enter