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

Basic Concepts

2

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 3

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 4

HTML tags

• Tags usually applied in pairs: opening tag and closing tag. Everything between the opening and closing tag is affected by the tag;

Everything between the opening and closing tag is affected by the tag.

• Some tags can have attributes added to them. The tag, for instance, inserts an image, and attributes define image source, image size, alt text for the image, etc.:

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

6

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 7

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

The Dreamweaver Workspace

10

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 11

Document window

12    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!

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) 13

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 14

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 15

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) 16

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 17

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 18

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 19

Property Inspector

20     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

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 21

Sample Site Structure

Home page (index.html) About Us Contact Us

1st level pages with little upkeep

4H Agriculture Family/Consumer Horticulture

2 nd level pages requiring own folders

Mast. Gardener 22 From here, pages link to documents, calendars, other pages (remember the 3 click rule!)

Defining the Site

23

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) 24

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” 25

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 26

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 27

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 28

connect refresh get files put files 29 Remote site Local site

Meta tags

30

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 and tags 31

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 and 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 32

Keywords

      Used to help “spiders” of search engine define and categorize your site Under 50 words Between and tags Needs to be specific to your page – fine tune these Use words already plentiful in the text Separate words with commas 33

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 34

Adding Content

35

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 36

Middle Column title

  Go into Split view Click and drag to delete everything in the center column

 Content goes between Center Col divs 

Delete these and the page falls apart!!!!

37

Middle Column title

 Notice the

tags    Your headline goes in here “Welcome to ____ County Extension” Can change the Header Style in code or through Format box in PI 38

Middle column text

  Type in either code view or document view  Code view – add

tags to each paragraph  Document view – select text and choose Paragraph in format box Use Home Text document 39

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 40

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 41

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 42

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 43

Image types

44    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

   

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) 45

Links

46

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) 47

  

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 48

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 49

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 50

Creating image links

       Buttons, arrows, logos, or pictures Select the image (L-click inside it) Pulls 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 51

Linking to an E-mail address

   

Highlight text (or merely pick insertion point) Click Email icon Dialog box will appear



Text - highlighted text

  Often best to use actual email address

Email - Actual email address Default email program of user computer will be used

52

Linking to documents

   Adobe (.pdf) is good universal format    Government standard Adobe Reader free and easy to download Doesn’t suggest an endorsement of Word or Wordperfect Always provide link to page to download Adobe Reader (www.adobe.com) Good idea to provide size and type of file in text so they know what they’re downloading Web Account Request Form (113 kb .pdf file) 53

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

54

Opening links in new windows



Why?



For an external link, you might want your page to stay up



Set the link



In Property Inspector, set target to blank



Top is default, which replaces the content of current page

55

Template Components

56

Files

 Folders for 2 nd level pages, CSS, Scripts and images  1, 2 and 3 column templates       Footer SSI Left column navigation SSI Top of page navigation SSI About Us page Contact Us page Home page 57

New Site

Header Top Navbar (_ssi_topnav.html) Left Navbar (_ssi_leftnav.html) Middle column Right column Footer (_ssi_footer.html) 58

2

nd

level page

 Not split into middle and right columns 59

Header

    Header is in the “images” folder, named “header.jpg” Width of 804px, height of 130px Two hotspots: CSU logo links to CSU home, Extension logo links to Extension home Shouldn’t need to manipulate this at all 60

SSIs

        Top nav bar a separate file pulled in by: Left nav bar pulled in by: Footer pulled in by : These are separate files, manipulated separately  Won’t be governed by CSS Will look like a simple list 61

Top nav bar

       Unordered list within a “topnav” div