using adobe dreamweaver cs4 csu extension webpage template n.
Skip this Video
Loading SlideShow in 5 Seconds..
Using Adobe Dreamweaver CS4/ CSU Extension Webpage Template PowerPoint Presentation
Download Presentation
Using Adobe Dreamweaver CS4/ CSU Extension Webpage Template

Using Adobe Dreamweaver CS4/ CSU Extension Webpage Template

206 Vues Download Presentation
Télécharger la présentation

Using Adobe Dreamweaver CS4/ CSU Extension Webpage Template

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  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: • • 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. - • 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 ( • 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