Digital Design for the Arts and Humanities website

Digital Design homepageDaily Readings for Digitial Design courseDigital Design Course syllabusE-Mail Digital Design StudentsTechnology, Arts, and Media Program homepageSewall Academic Program homepageCU-Boulder homepage

Learning to use Dreamweaver to
create and edit Webpages


   

Reading:  (Do before Class): Dreamweaver MX,
pp. 30-38; Before you begin a site ; Planning a Site ; Creating a Site Specification

Assignment:  (Do after Class)

1.  Creating a "site" for your website on your local computer

  1. Run Dreamweaver on your computer

  2. Go to "Site" under the menu bar and select "New Site."

  3. Select a folder on your comptuer where you want to store all the webpages for this site.

  4. Make sure you create a specific name for your website here, so that when you go to "Open Site" you will know which site you want to work with.

  5. After you have created a site for your website, you are now ready to create and edit pages on your website.

  6. When creating and editing sites in Dreamweaver, make sure that you always start by going to "Site" and selecting "Open Site" and opening the
    website folder you now want to work with.

  7. Dreamweaver uses "Sites" to keep all your websites organized into folders in which it will store webpages for that particular site.

4. Call up and edit your Home Page on your computer

  1. Run Dreamweaver on your computer.

  2. Open up your index..html file in  Dreamweaver

  3. Save the file "index..html" as the file "index.htm."

  4. Remember, use the 8.3 rule to name all your webpage files.

  5. Practice making simple editing changes to your Home Page using Dreamweaver.

  6. Save your file "index.htm" on your local computer.

  7. Using ws-ftp or Fugu , transfer the file "index.htm" to the web server.

  8. Using your web browser, call up up your Home Page. Does it look the way you thought it would?

       http://www.sewallprogram.com/~lewis/

    9.  Continue to practice editing your home page using Dreamweaver. Practice adding text and changing  whether that text is left-aligned, centered, or right-aligned.

5.  Linking webpages to your Home Page

  1. Using Dreamweaver, create a new webpage and call it homsec.htm.  When you save this file, make sure you give it a title somehow linking it to your Home Page website.

  2. Add some text to your homsec.htm page.  Now save this file again.

  3. Now create a link between your Home Page--index.htm--and homsec.htm.

  4. Practice creating other additional secondary web pages that link back to your Home Page.

  5. A Website consists of a Home Page that is linked to a whole set of secondary web pages.  



1 See Design Students' Favorite Websites

--see J.Crew.com as example of simple, basic website

2. Using Ws-ftp for PC or Fugu for Mac

See http://www.sewallprogram.com/index.htm

3. See example of Basic webpage

4. Using Dreamweaver  to create a webpage

4.  Dreamweaver Panels

  • Objects Panel
  • Property Inspector
  • Dreamweaver Toolbar
  • HTML Styles

5.  You can open and close Dreamweaver Panels by going to "Windows" and selecting that panel.

6.  Creating and defining a local and remote site
      for your website.

7.   Relative vs. Absolute path links

8.  Always use relative path links to link to webpages within a website.  And use absolute path links to link to webpages located on other websites.

9.  Use the "Properties" box to link webpages.
     Remember a website is a collection of linked webpages.  Practice linking to webpages
     within your website and webpages on other
     websites.

10.  Changing webpage properties using "Modiy" and selecting "Page properties."

11.  Adding "special characters" to your page. 
Go to "Insert" and select "special characters."

12.  What should I put on my CU student Home page?

13.  How do I add links and images to my Home page?

      1. Add a link to the Digital Design Class Home Page.

      2. Add an image from the Sewall CU Photos Page:

          Take a PhotoTour of Sewall, CU-Boulder, and Colorado

      3. How to I transfer an image from my local computer
          to the web?

      4. Just like you transfer a file to the server, you copy
          and transfer an image to the server.

       5. You can copy images off the web onto your computer using the 'right click' button on your mouse.

       6.  Right click on the image you want to copy on a website. Now select 'Save Picture As' and save this image to your local computer.

        7. In Dreamweaver, go to "Insert" and select "Image."  Now select the image on your local computer that you want to insert into your webpage.

         8.  When you are transferring your webpages to
             the server, make sure you also transfer the images that are included on those webpages.  In order to
             display an image, a web server needs an image
             file on the server to work with.

14.  How do I take screen snapshots of a webpage?

       1.  Go to the web screen that you want to save.

       2.  Push the "Shift" key and the "PrntScrn" key at the same time.

       3.  This will save a copy of the screen into the Windows Clipboard.

       4.  Go to Dreamweaver and create a new page.

       5.  Paste this web screen into the new page.

       6.  Save this webpage and the image associated  with it to your home web site.

15.  What are the Web page naming Conventions?

      1.  A "website" consists of a "homepage"
           linked to a series of related "webpages."

       2. In this class we will be creating "websites."

       3. Your student websites will contain a "homepage" linked to a set of related "webpages."

       4.  Always name a website's homepage "index.htm"

       5.  Web Design is all about creating "websites."

       6.  So remember a website is more than just a "home page."

       7.  We are creating "websites" not just "webpages."

16.  Webpage File Naming Conventions

  • 8.3 rule - No more than 8 letters in a filename and no more than three letters in the html file extensions:  blank.htm.

  • Always use lower case letters, because the web is case sensitive: blank.htm, not Blank.htm

  • Always include a title for each webpage

  • Always use file names that reflect what the specific web page is about: index.htm, not Lewis.htm.

17. How do I view the HTML source code for a webpage?

  1. View HTML Source Code

  2. View HTML Code for a basic webpage

  3. How to view HTML source code in your browser

In Netscape,

  1. Click View on the menu bar, and then click Page Source.
  2. The page's source code opens in another window of Netscape.
  3. You can copy and paste text from this window into your own text editor and then manipulate and test the code. You cannot edit directly in the Page Source window.

In Internet Explorer,

  1. Click View on the menu bar, and then click Source.
  2. Notepad opens and displays the page's source code.
  3. You can copy then save the source code to your hard drive and manipulate the code.


| Home Page  | Readings | Syllabus | Web Resources | Top of Page |

Number of Visitors to this site: 
12844                   by Chris H. Lewis, Ph.D.


© 2000 by Chris H.  Lewis, Ph.D.
Sewall Academic Program; University of Colorado at Boulder
Created 1 June 2000:  Last Modified: 25 January, 2006
E-mail: cclewis@spot.colorado.edu
URL:    http://www.colorado.edu/AmStudies/lewis/Design/goals.htm

 

Good Web Design Sites
Award-winning Web Designs Great Web Design Books Sewall Class Web Designs
Digital Design Course homepage