1 / 86

Using Adobe Dreamweaver CS4/ CSU Extension Webpage Template

Using Adobe Dreamweaver CS4/ CSU Extension Webpage Template. Using Dreamweaver to work with the CSU Extension webpage template Dec 09. Basic Concepts. What is Dreamweaver?. WYSIWYG (What You See Is What You Get) Web page editor Writes code for web pages

benito
Download Presentation

Using Adobe Dreamweaver CS4/ CSU Extension Webpage Template

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

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

More Related