CSU Extension Webpage Template

1. CSU Extension Webpage Template Part 1: Template components / Using the Dreamweaver workspace

2. Schedule • Jan 13 : Template components; Dreamweaver workspace • Jan 20 – Directory structure, defining the site; metatags • Feb 3 – Adding text, images, links • Feb 17 – Working with Server Side Includes (SSIs) • March 3 – Microcontent • March 17 – Working with tables • April 7 – 2nd level page content • April 21 – Named anchors • May 5 – Writing your own CSS • May 19 – Using Google Analytics

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 design view and code view)

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

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, amnd 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. 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 • Dreamweaver allows you to quickly preview your page on the fly in 2 browsers – generally Firefox and IE • F12, Ctrl + F12 *Numbers from W3 Schools – Sept. 09

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

8. SSIs • Each page pulls in three SSI (Server Side Include) files automatically • Change the SSI, that change is reflected on every page • _ssi_topnav.html • The top navigation bar (mostly links to the state Extension site) • _ssi_leftnav.html • The left navigation bar (mostly your own links) • We give you 5 suggested topic areas., but you can change them to whatever you like • _ssi_footer.html • The footer (mostly links to the state Extension site)

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

10. 2nd level page • Not split into middle and right columns 10

11. Downloading the files • http://www.coopext.colostate.edu/comptrain/

12. Unzipping the files • The .zip file needs winzip to unzip • The .exe does not • Some IT Dept. won’t allow you to download an .exe • Click the .zip or .exe file you downloaded • Extract it to the proper folder • REMEMBER where you put it • Keep a pristine copy around

13. Files • Folders for 2nd 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 13

14. Getting Dreamweaver • Ram Tech • http://ramtech.colostate.edu/ • Adobe price list • Dreamweaver CS4 • $125 for departments • $130 for personal use

15. Dreamweaver CS4 Workspace • 4 basic parts • The insert pane • Above the document pane • The document pane • The main window • Where you edit the web page • The Property Inspector • Below the document pane • The File pane • To the right of the document pane

16. Dreamweaver CS4 Workspace • The insert panel • At right, but in “classic” view can be moved to top • Classic view gives you more room for the File pane • Icons for commonly used commands (links, email links, tables, images, etc.)

17. Dreamweaver CS4 Workspace (con’t) • The document panel • Where the web page is • Suite of 3 “view” buttons at upper left: code, split, design • Download time at lower right: 25 second rule!

18. Dreamweaver CS4 Workspace (con’t) • The Property Inspector • Use to manipulate what is selected in the document panel • Click on a table, it can manipulate table • Click on an image, it can manipulate image • For text, two buttons toggle it between HTML and CSS (NEW!) • For now, stick with HTML • CSS needs to be in one place, not spread out

19. Dreamweaver CS4 Workspace (con’t) • The File pane • Shows you all folders, files, directory structure at a glance • Pull files into document pane by double clicking them in File pane • Pull up multiple files at once, switch between them with tabs • Icon at upper right topples you to full-screen FTP view

20. The Dreamweaver FTP Local Files on the right, remote files on the left Download Connect Upload