Second level pagesCSU Extension Webpage Template

Session 6March 2010

Second level pages A page inside a

folder inside the root folder

Literally the 2nd level of the directory structure

Index.shtml is a 1st level page

Agri.shtml is a 2nd level page

Sample Site Structure

3

Home page (index.html)

4H Family/Consumer

Horticulture

Agriculture

About Us

Contact Us

1st level pages with little upkeep

2nd level pages requiring own folders

Master Gardener

Second level pages Each topic folder (e.g. agri) has a

page already inside (e.g. agri.shtml) To create a new page, copy an

existing second level page Code is different on a second level

page than a first level page

Code Six lines of code are different on a second level page:

• ../ is added to beginning of the “path”• “Backs up” a folder to root folder

Images: • <img src=“../images/header.jpg" width="804" height="130"

usemap="#Map" /> SSI:

• <!--#include virtual="../_ssi_topnav.html" -->• <!--#include virtual="../_ssi_leftnav.html" -->• <!--#include virtual="../_ssi_footer.html" -->

CSS: • <link rel="stylesheet" href="../css/general.css"

media="screen" type="text/css" />• <link rel="stylesheet" href="../css/print.css" media="print"

type="text/css" />

Second level page content Less concerned with micro-content

• They’re here already Create from scratch: text, images,

links Pre-existing documents

• PDFs• Word• PowerPoint• Excel• Tabular data

PDFs Just link to it PDF will open in a browser window Doesn’t require the end-user to buy

anything! Another option: convert PDF to HTML

• Need Adobe Acrobat• Save As type > .html• Save directly into root folder• Creates an images folder

Word Easiest to cut and paste into existing

page Also Save As Type > .html

• Save directly into the root folder• Creates a folder for supporting files

Word code is SO bad, there’s a command for it

Commands>Clean Up Word HTML

Powerpoint Doesn’t play well with Firefox (50% of

your audience) Huge file sizes Best options:

• Have end-user download (requires them to have PowerPoint)

• Use Slideshare or Google docs to embed a slideshow (must be .ppt, not .pptx)

Excel Works well

• Supports multiple worksheets Save As Type > .html

• Save directly into the root folder • Creates a folder for supporting files

Tabular data Can import Excel directly into a page In Excel

• Save As Type > .txt (tab delimited) In Dreamweaver

• Insert>Table Objects>Import Tabular data• Set cell padding, spacing, border, header

formatting