Creating a Course Website with Dreamweaver

1
Creating a Course Website with Dreamweaver

• Part I Setting up Your Site and Creating a Basic
  Page

2
Creating a Course Website with Dreamweaver

• Demo Page
• Creating your personal web space
• Basics of using Dreamweaver
• Creating a basic page
• Layout
• Creating a side navigation bar
• Using the Properties Inspector

3
But Wait, Theres More

• Achieving Consistency
• Creating Links
• Uploading Within Dreamweaver

4
Demo Page

• Filenames, Page Names, and index.html
• use lowercase all the time (easier,
  conventional), short names, and NEVER spaces
• Accessibility
• Navigation

5
Create or activate your personal web space

• go to http//its.southwestern.edu
• click on helpdesk
• search knowledge base
• in the search box type www setup
• click on the first article that comes up
• Or go directly to https//www.southwestern.edu/cgi
  -bin/services/wwwsetup.cgi

6
Basics of using Dreamweaver

• Define your site
• Upload via FTP
• Hostname ftp.southwestern.edu
• Folder public_html
• FTP login email name
• FTP password email password
• dont enable check in / check out

7
Creating a basic page

• File gt New
• Page Designs
• Basic Page
• Code view vs. Design view

8
Layout

• Easy (read boring)
• click and start typing
• Versatile! Creative! Visual! (read use tables)

9
Using tables for layout

• title and/or logo along the top, menu along the
  left side, content area in the rest
• View gt Table View gt Layout View
• Draw Layout Cells for the title, menu, and
  content area.
• Type text in the title and content areas.
• Highlight text, show properties window.
• Set formatting for the layout cells and/or
  tables.
• Click on the perimeter of the layout cell or
  table.
• Window gt Properties (if needed)
• Select the options you want.
• Set width to Autostretch

10
Creating a Side Navigation Bar

• Draw a cell for each section you plan on having
• Label them page 1, page 2, page 3, page 4, etc.
• Include one that says Home.

11
Achieving Consistency

• Save your new page and start from it. File gt Save
  gt Save As index.html
• File gt Save As page1.html (etc.)

12
Creating Links

• Go back to index.html
• Linking to another of your pages
• Highlight the text in the navbar that says page 1
• Look at properties window
• In link box, type page1.html
• Repeat for other pages. For the Home button, link
  to index.html
• Linking to a URL
• highlight Southwestern University
• in link box, type this http//www.southwestern.ed
  u

13
Uploading Within Dreamweaver

• Site gt Put
• Include dependent files
• Publish ALL your pages (the whole site).
  http//www.southwestern.edu/youremailname
• Your pages are saved on Helios. Log into Helios,
  go to your folder (under My Computer, on the H
  drive), go to public_html, and voilà!