Csu extension webpage template
1 / 20

CSU Extension Webpage Template - PowerPoint PPT Presentation

  • Updated On :

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

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'CSU Extension Webpage Template' - moswen

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Csu extension webpage template l.jpg
CSU Extension Webpage Template

Part 1: Template components / Using the Dreamweaver workspace

Schedule l.jpg

  • 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

What is dreamweaver l.jpg
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)

What is html l.jpg
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

Html tags l.jpg
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

Browsers l.jpg

  • 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

What is a web site l.jpg
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

Slide8 l.jpg

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

Components l.jpg


Top Navbar


Left Navbar


Middle column

Right column



2 nd level page l.jpg
2nd level page

  • Not split into middle and right columns


Downloading the files l.jpg
Downloading the files

  • http://www.coopext.colostate.edu/comptrain/

Unzipping the files l.jpg
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

Files l.jpg

  • 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


Getting dreamweaver l.jpg
Getting Dreamweaver

  • Ram Tech

    • http://ramtech.colostate.edu/

    • Adobe price list

  • Dreamweaver CS4

    • $125 for departments

    • $130 for personal use

Dreamweaver cs4 workspace l.jpg
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

Dreamweaver cs4 workspace16 l.jpg
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.)

Dreamweaver cs4 workspace con t l.jpg
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!

Dreamweaver cs4 workspace con t18 l.jpg
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

Dreamweaver cs4 workspace con t19 l.jpg
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

The dreamweaver ftp l.jpg
The Dreamweaver FTP

Local Files on the right, remote files on the left