SME 865:SME 865:Introduction to DreamweaverIntroduction to Dreamweaver

Mark UrbanMark Urban--LurainLurainDivision of Science & Mathematics EducationDivision of Science & Mathematics Education

Michigan State UniversityMichigan State Universityurban@msu.eduurban@msu.edu

OverviewOverview

Introduction to DreamweaverIntroduction to Dreamweaver Dreamweaver WorkspaceDreamweaver Workspace Dreamweaver SitesDreamweaver Sites Dreamweaver TemplatesDreamweaver Templates

Introduction to DreamweaverIntroduction to Dreamweaver

Start DreamweaverStart DreamweaverHelpHelp ContentsContents

Dreamweaver BasicsDreamweaver Basics Exploring the WorkspaceExploring the Workspace

About the Dreamweaver WorkspaceAbout the Dreamweaver Workspace\\

Questions:Questions: Where do you edit web pages?Where do you edit web pages? Where is the Where is the Files Panel Files Panel and what is it for?and what is it for? Where is the Where is the Property Inspector Property Inspector and what is it for?and what is it for?

Dreamweaver SitesDreamweaver Sites

HelpHelp Dreamweaver BasicsDreamweaver Basics

Setting up a Dreamweaver SiteSetting up a Dreamweaver Site About Dreamweaver SitesAbout Dreamweaver Sites

Understanding local and remote folder structureUnderstanding local and remote folder structure Setting up a new Dreamweaver site Setting up a new Dreamweaver site

What is a site?What is a site?Why do I need a site?Why do I need a site?How do I setup a site?How do I setup a site?

Original Web Page Development Original Web Page Development Cycle Using Only AFSCycle Using Only AFS

EDIT and SAVE the file in your AFS

p:\web\page.htm

TEST by BROWSING to the page

http://www.msu.edu/~MSUNetID/page.htm

RemoteRemoteLocalLocal

Web Page Development Cycle Web Page Development Cycle Using Sites in DreamweaverUsing Sites in Dreamweaver

Existing File on your AFS

p:\web\page.html

TEST by BROWSING to the page

http://www.msu.edu/~MSUNetID/page.html

File on Hard Drive

c:\mydocuments\\page.html

Edit File on Hard Drive

GETGETPUTPUT

OpenOpen SaveSave

Enter URLEnter URLView PageView Page

OpenOpen

Edit File on Hard Drive

SaveSave

PUTPUT

Refresh URLRefresh URLView PageView Page

Using Sites in DreamweaverUsing Sites in Dreamweaver

Why not edit your AFS files directly?Why not edit your AFS files directly?

Using Sites in DreamweaverUsing Sites in Dreamweaver

Create your SiteCreate your SiteGET your SME 865 page to your local filesGET your SME 865 page to your local filesEdit the pageEdit the pageTest it in the browserTest it in the browser What do you need to do after editing before What do you need to do after editing before

you can test it?you can test it?

Templates in DreamweaverTemplates in Dreamweaver

HelpHelp Laying Out PagesLaying Out Pages

Managing TemplatesManaging Templates About Dreamweaver TemplatesAbout Dreamweaver Templates Creating a Dreamweaver TemplateCreating a Dreamweaver Template

What are templates?What are templates?Why do I need templates?Why do I need templates?How does it differ from templates in Word?How does it differ from templates in Word?How do I create and use templates?How do I create and use templates?

Template ExerciseTemplate ExerciseCreate template for web siteCreate template for web siteUse tables to control the layoutUse tables to control the layout Common look and feel for all of your pagesCommon look and feel for all of your pages

Navigation toolbar appears on every page:Navigation toolbar appears on every page: The SME 865 Web siteThe SME 865 Web site Your school Web siteYour school Web site Other sites related to your contentOther sites related to your content

Navigation tool and other page attributes fixed in Navigation tool and other page attributes fixed in templatetemplateEditable region for other contentEditable region for other contentSave as TEMPLATESave as TEMPLATE

Create New PagesCreate New Pages

Create two new pages Create two new pages Based on templateBased on templatePage about your content areaPage about your content areaCalendar pageCalendar pageSave and testSave and test

Modify TemplateModify Template

Add a new link to navigation tool on Add a new link to navigation tool on templatetemplate MSU home pageMSU home pageVerify that all pages based on the template Verify that all pages based on the template are updatedare updatedTest to verify that all pages are changed Test to verify that all pages are changed and workand work

Questions?Questions?DreamweaverDreamweaver Online help, tutorialsOnline help, tutorials Computer software section in bookstoreComputer software section in bookstore

http://http://help.msu.eduhelp.msu.edu Mounting your AFS spaceMounting your AFS space QuotasQuotas EmailEmail Creating web pages at MSUCreating web pages at MSU

This file:This file: U:U:\\msumsu\\useruser\\uu\\rr\\urbanurban\\publicpublic\\smesme 865 865 dreamweaverdreamweaver intro.pptintro.ppt