Dreamweaver I Stanford Workshop Your Presenter: Dr. Laura Silberstein

First Steps: The Pre-Lab Get organized  Plan your site organization & navigation structure  Gather or create media: pictures, graphics, etc.  Survey Websites in your field  Decide on design features you like  Type up draft text (Word or WordPad)  Short is sweet

First Steps: In the Lab  Create folder somewhere  My Documents is on your server  Anywhere on your Server  Desktop on home computer is ok  My Documents\webSites  Anywhere you like & can find  Thumb Drive is ok  Some computers “eat” Thumb drives  Open Dreamweaver  Define a Site

webSites Folder Created

(no site defined) yet  Click Define a site  Or  Site…new Site

Defining a Site Site menu…New Site

Exercise 1: Defining a Site Defining a Site is the mark of a savvy user  Name it

Choose Your Folder (webSites is mine)

Now see the correct pathname

Keep It Simple: Use Defaults

Edit Locally  Browse to find your folder

DW Changes Site Location  After you browse to find your folder, the Site Definition dialog box reflects the new location

Keeping It Simple  No remote server yet

Site Is Defined  Look in Site window  If you don’t see it: Window menu: Site

Exercise 2: Make Your Home Page  File…New…HTML  OR  Right-click on Site Folder…New File  Name It “index.htm”

Document Window Mac Jellybuttons -- Windows has upper right corner Minimize, Maximize/Restore, Close Document is Untitled Code View Design View

Modify…Page Properties  Give your Home Page a Title Choose different background colors

DW Look & Feel : Toolbars & Windows  Make Toolbars Visible  View…Toolbars (just like MS Office)  Check Document  Check Standard  Window…Insert (unlike MS Office)

Insert…Common  Mouse-over buttons to see Tooltips --> Make a Table

Table: Rows and Columns Type: 5 Rows and 1 Column Width: 640 Pixels Border =0

Check Status Bar  Click on to select Table

Table Properties

Insert Artwork: Banner   Choose.jpg (NOT.png)  Create your own in Fireworks, PhotoShop, Illustrator  Try samples from the images folder  Drag images folder to your site folder (in My Documents)  Note the size of the image  Click on image  Look at Properties Box

Image Properties

How Big Is My Web Page?

Create Some More Web Pages  Save your work  Right-click on index.htm in Site window  Duplicate  Repeat two more times  Each page now has the same structure  Table with 5 Rows, 1 Column  Same Banner

Duplicated Index.htm Files

Exercise 3: Linking Up Your Site  Add some text to index.html in second row  eg. “This is Laura’s Home Page”  Save  Rename your other pages in the Site window  students.htm  homework.htm  calendar.htm  parents.htm

Renaming Duplicate Files  Can use.html or.htm  Mac convention is.html  Windows is.htm  Doesn’t matter -- just try to be consistent  Easier to remember file names  Use lowercase letters  Case matters on UNIX (not on Mac)  Easier to remember file names  Older servers don’t like capital letters

Renamed Files

Change Content on Each Page  Open students.htm (double-click on file icon in Site window list)  Type “This is my students’ showcase”  Open homework.htm  Type “Homework Assignments”  Etc.  Save each page  Don’t worry about font size -- we’ll fix that later

Hyperlinks  In 2nd row, type: || Home || Students || Parents || Calendar || Homework || (all on one line)  Select text (click and drag)  Format using Properties Box (see next slide)

Format Text Select text and make it “Heading 3” format, centered

Add the Hyperlink  Use Properties Box to “Point and Shoot”  Click on Cross-hair icon  Drag to filename Cross-hair icon

Another Way to Hyperlink  Click on folder to Browse for file  Find file in your Site folder (eg., in My Documents)  Select file name

More About Hyperlinks Target can be  _blank  _parent  _self  _top _blank loads the linked page in a new browser window

Test Your Links  Save your file  Preview in Browser Preview in Browser Play with different link colors (Modify…Page Properties)

Congratulations!  You’ve just built your first Web site!  Keep all files together in one folder  Keep all images in a sub-folder  Upload the site folder to a server  Ask your tech support guy how  Free Web space available at yahoo.com  Pay for Web space (no ads, faster uploads, goodies)  Next time: bring photos & artwork