1 / 20

CSU Extension Webpage Template

CSU Extension Webpage Template. Part 1: Template components / Using the Dreamweaver workspace. Schedule. Jan 13 : Template components; Dreamweaver workspace Jan 20 – Directory structure, defining the site; metatags Feb 3 – Adding text, images, links

moswen
Download Presentation

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

More Related