TE 408 Website Workshop 1

1
TE 408 Website Workshop 1

• Introducing Personal Website Requirements and
  Creating Dreamweaver Templates

2
Personal Website for TE408

• Building off your design work from 407
• New Components
• WebPlans
• Template-Based (DWT)
• File/Folder Organization
• Site Map
• Due 5/4/06 at 1159 pm
• Check the Assignments page for details!

3
WebPlans Preparing for Your Internship Year
and Beyond!
4
WebPlans Preparing for Your Internship Year
and Beyond!
5
WebPlans Requirements

• Posting your 3-Day mini-unit
• Unit page
• Contains Big Ideas, EPE, and Objectives
• Long-term week/unit/topic page
• Organizational glue main links page
• Daily calendar page
• Contains general outline of plans for each day
• Resources linked throughout

ROUGH EXAMPLE
6
Gee, Steve, Howd You Get All ofThose Pages to
Look So Similar?

• Well, Im glad you asked
• DREAMWEAVER TEMPLATES
• All main pages and WebPlans pages
• will be Dreamweaver template-based

7
Website Organization

• Site Appearance ? File Management
• Gaps in design or poorly structured pages are
  easier to spot when organized
• For most, Organization ? Productivity
• How does it all fit together?

8
Site Map

• Additional page linked from index (home) page
• Shows all the first- and second-level links on
  site
• Pictorial/graphical representation
• http//www.cybergeography.org/atlas/sitelens_large
  .gif
• Well-organized text outline
• http//ed-web3.educ.msu.edu/college/sitemap.htm
• Keeps site organized and easy to navigate

9
An Arboreal Map
10
How this might look as an index page
11
Starting Over?

• Q Why start fresh? Why not
• simply retrofit?
• A Ease of improving organization and preparing
  your site for next fall
• So, you will keep the guts of
• your old site handy

12
Back Up Your Current Site

• Options include burn CD, Zip file, USB drive,
  and external hard drive, among others
• Today we will do it two ways
• 1st create a Zip file of entire web folder in
  AFS, kept in your p drive root directory (not
  in web folder)
• 2nd create oldweb folder in your p\web, and
  move all the web folder contents into it
• Your current website will be shifted to
  http//www.msu.edu/USERID/oldweb/index.htm
• It will work fine, so long as all internal links
  are relative rather than absolute links)

13
Get started with Dreamweaver

• Create a new site
• Make sure all settings are correctly defined
• Be sure you are working in LOCAL VIEW
• Start by getting entire site
• Should show only oldweb folder
• Were going to make a common design

14
What is a DW Template?

• How is it different from your lesson plan
  assignment template?
• You dont save over the original you base pages
  on a template form (e.g. printing press)
• Permits instant retroactive changes to many pages
  all at once (e.g. quantum entanglement)
• Key Features
• Layout management
• Editable regions

15
Templates Visual
Based on a borderless table
Content in these cells determined by template
Content in this cell can change across pages
An editable region
16
Template Page Construction

• oldweb is the only folder in your web directory
• Create a new HTML template page in the file menu
  File ? New ? (General Tab) ? Template Page ? HTML
  Template ? Create
• Insert a table (2X2, borderless, 100 width)

17
Sample Template Contents

• Upper left cell Your Name
• Upper right cell TE 408
• Lower left cell Sample table of contents items
  (About Me, Teaching and MSU)
• Lower right cell Insert an editable region
  (Insert ? Template Objects ? Editable Region)
  named main
• Save (as sample.dtw) and close the template page

18
Create a Template-BasedIndex Page

• Make sure your template folder is present (you
  may need to refresh the folder list)
• File ? New ? (Templates Tab) ? (Choose the
  template) ? Create
• Be sure default is checked for updating pages
• Notice You cant edit anything outside the
  editable region!
• Add simple welcome in the editable region
• Change page title (at top) to Index
• Save as sampleindex.htm

19
Creating an About Me Page

• File ? New ? (Templates Tab) ? (Choose the
  template) ? Create
• Be sure default is checked for updating pages
• Add simple self-introduction in the editable
  region
• Change page title (at top) to About Me
• Save as sampleabout.htm

20
Creating a Teaching Page

• File ? New ? (Templates Tab) ? (Choose the
  template) ? Create
• Be sure default is checked for updating pages
• Add simple placement description in the editable
  region (where are you teaching?)
• Change page title (at top) to Teaching
• Save as sampleteaching.htm

21
Updating the Sample Template

• Open Sample Template page (from the Templates
  folder)
• Create relative links for About Me and
  Teaching pages in the lower-left cell
• Create an absolute link for MSU in the
  lower-left cell
• Save the document, and update all template-based
  pages (and verify the updates on the following
  pop-up screen)

22
Posting and Verifying

• Upload all files and the template folder
• You must include the template folder!
• Open a browser and navigate to your new
  sampleindex.htm page
• Verify the three links you just made

23
For Next Time (next Tuesday)

• Feel free to explore, create new templates, make
  new pages, etc.
• But leave those four files as they are
• sample.dwt in the Templates folder
• sampleindex.htm, sampleabout.htm and
  sampleteaching.htm all in your web folder
• We will continue with this sample template-based
  site