This document provides information and instructions for creating second level pages on a website. Second level pages are pages located within subfolders of the main website folder. Key points: - Second level pages require "../" added to the beginning of image, CSS, and SSI file paths to link to files in the parent folder. - Existing second level pages can be copied and modified to create new pages. Content can also be directly added as text, images, or imported from files. - PDFs, Word documents, PowerPoint slides, Excel sheets and tabular data can be imported or linked to as content, though some file types require conversion or may not display properly in all browsers.

1. Second level pages CSU Extension Webpage Template Session 6 March 2010

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

3. Sample Site Structure 3 Home page (index.html) About Us Contact Us 1st level pages with little upkeep 4H Horticulture Family/Consumer Agriculture Master Gardener 2nd level pages requiring own folders

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

5. 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" />

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

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

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

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

10. Excel Works well Supports multiple worksheets Save As Type > .html Save directly into the root folder Creates a folder for supporting files

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