Creating Webpages and learning HTMIL

Learning basic HTML coding

Assignment: (Do before Class): Dreamweaver MX, pp. 40-60; Web Graphics, 46-50

Next Monday, Jan. 30 , your first website, the "Web Design Portfolio Site" is due. See
Criteria for Design Portfolio webpages. Make sure you link your Portfolio page to your homepage. Remember, this only needs to be a basic website that demonstrates what
we have learned in class up to now. You can always go back and revise it later as your web design skills improve.

Assignment for day (Friday): Come to class with a first draft of your Web Design Portfolio website. Make sure you link your Portfolio page to your homepage. See
Chris Lewis's Design Portfolio page. Use this Portfolio assignment to practice some of the basic web design techniques we learned in class. Relax, be creative, have fun with it.

Bring your laptops to class so that you can actually try some of the things we do in class on your computers. I find that many students only learn computers by actually practicing the routines.

Assignment: (Do after Class)

Download and Install Fireworks MX this weekend

1. Reading and Copying HTML Source Code

2.. Practice calling up the three class examples I
created of a Design Portfolio Page:

2. Practice calling up and looking at the HTML source code for these three model pages.

3. Can you think of ways to copy some of my HTML source code in order to make it easier for you to
create your own Web Design Portfolio websites?

2. Create a Web Design Portfolio Website

1. Create a Design Portfolio Website. See my latest Chris Lewis Design Portfolio, model 1 webpage.

2. See Criteria for Design Portfolio webpages

3. Can you copy the CU student image in my page
into your own portfolio page?

4. Can you copy the CU logo from my webpage
into your Design Portfolio site?

           5. See if you can link one of the images on your
                 Design Portfolio site. Remember, just select the image and then select link and type in the URL
                 address your want to link it to.

3. Copying Images from the Web to your homepage

1. First find an image on the web you would like to copy.

2. Now right-click on that image using your mouse.

3. Save this image to the same folder that you are editing your webpage in.

4. Now call up that webpage in Dreamweaver and
go to the place on that page where you want to insert an image and select "Insert" and then select "image" from the menu bar.

5. Dreamweaver will now ask you where the image file is located that you want to insert into your webpage. Now select the folder and the image file that you want to paste into your webpage.

6. Save the webpage and now go to ws-ftp.

7. In ws-ftp, press refresh because you
created a new version of your webpage file.

8. Now send this webpage file to the web. But also check to see if there is a new image file in your webpage folder. This new image file will have a "jpg" or "gif" file extension. Copy this image file to the web, too.

9. Now call up this webpage in your browser. Why doesn't your page look different? Because you must first select either refresh or reload from the view column in your web browser because you created a new version of this page.

10. Does the image you inserted now show up on your webpage?

3. Checking broken links for images and hyperlinks.

            1. Sometimes you will copy an image into a webpage and the image won't load with the rest of the page.   Instead, you will see a box where the image is
   supposed to be and an "X" where the image link is
    supposed to be. This is called a "broken image link."

http://www.colorado.edu/AmStudies/lewis/Design/port5.htm

2. When you see a broken image link on a page, put your cursor on the "X" and right click your mouse. This will bring bring up a box. Select the category "Properties" in this box.

3. In the Properties box, notice what the URL address is for this image. In the case of broken image links, either the URL for the image is wrong or you haven't copied the image to the server your webpage file is on.

4. If you haven't copied the right image over to the server, go back to ws-ftp and copy that image from your local computer to the webserver.

5. In some cases, you will need to go back to Dreamweaver and place your mouse on the image you want to check. Under format, select "image properties." Under "image properties," check to see what the URL address is for your image is. The URL should be the same as your webpage, but instead of ending with pfolio.htm the image URL should end with a file with either a "jpg" or "gif" file extension. For example:

http://spot.colorado.edu/~cclewis/computer.gif

6. If after trying both of these steps to fix a broken image, check to see if the file extensions are capitalized. Remember, URLs are case-sensitive. So if your image is computer.gif and the URL says computer.GIF, the image won't show up on your webpage.

4. Adding secondary pages to your website homepage in order to create a website that consists of a number of linked pages.

1. Go to Dreamweaver and select the "New Page" button. This will create a new webpage for you.

2. Add a title to your new webpage and then save this page before you do anything else. Dreamweaver will ask you to give this new webpage a file name. Remember, give each page a specific title that tells the reader what the page is about. Also, remember, to use the 8.3 rule for naming your files.

3. I saved this webpage as second.htm, so the URL address for this webpage will be:
http://spot.colorado.edu/~cclewis/second.htm

         4. Now call up your website's homepage and add a link to this new webpage--second.htm. I added
a link to this page on my Design Portfolio site:

                      http://spot.colorado.edu/~cclewis/pfolio3.htm

5. Now save your website's homepage file, because you revised it. Now go to ws-ftp and press
the refresh button. After refreshing the webpage
files "second.htm" and pfolio3.htm", I used
ws-ftp to send them to the web server.

6. Now go to your web browser and press refresh or reload in order to have it look for the latest, newest version of the webpage files you created.

7. You should now be able to go to your website's
homepage and and press the link that will take
you to the secondary webpage that you just created.

       8. Go to my Design Portfolio page and press the
          link that will take you to "Secondary Page:"
                        http://spot.colorado.edu/~cclewis/pfolio3.htm

9. You are now well on your way to creating websites, that is, sites that contain a "homepage" linked to a set of "secondary pages." Remember, each website contains a homepage that is the front or
first entry point into the site, which consists of a
whole set of linked secondary sites.

10. Remember, web designers create websites, not just home pages or web pages.

5. Basic Questions to ask about the Websites you Design.

1. Does your Website Design work with your
"targeted audience"?

2. How does the Design of your Website portray your Image and Style?

3. What does your Website say about who you are and the Work you do?

4. Can, or should, your design lie about who you are? Companies often pay advertisers to create ad copy that misrepresent or even lies about their reputation. What should a designer's professional ethics be?

1. See examples of Students' favorite websites:

2..Download and Install Fireworks MX this weekend

3. Practice calling up the three class examples I
created of a Design Portfolio Page:

2. Create a homepage for your website and a portfolio page. See example of my own home page linked to
my portfolio page: http://www.cclewis.com/ . Make sure your portfolio page is linked to your home page. Use color, text, images, layout, and style to create a home page and a portfolio page that reflects your style and the kind of work you do. See last year's Digitial Design student portfolio sites for a basic model to follow.

2. See Example of Student Portfolio page

2. Managing Sites in Dreamweaver

When your first create a website in Dreamweaver,
make sure you create a "site" to put it in. Whenever you open a page located in a site, Dreamweaver will open that site and save all the pages you now create in that site. Basically, when you create a site in Dreamweaver, you are telling it to put all the pages and images associated with that site in a specific folder on your computer.

3. Understanding how web addresses work

A web address specifies where a file is stored and
can be located on the internet.
A web address always starts with the name of
the server the website is one.
After the server name, a web address will list a
series of folders that the individual webpage is
located in.
Finally the last part of a web address specifies
what the name of the specific webpage you
want to call up is. This name should include
a ".htm" or ".html" suffix.
See the web address or "URL" for the
Digital Design page:

http://www.colorado.edu/AmStudies/lewis/Design/

4. 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?

5. 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.

6. 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. Web Design is all about creating "websites."

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

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

7. 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.

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

A Beginners' Guide to HTML
The Minimal HTML Document
The Longer Html Document
View HTML Source Code
View HTML Code for a basic webpage
How to view HTML source code in your browser

In Netscape,

Click View on the menu bar, and then click Page Source.
The page's source code opens in another window of Netscape.
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,

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

9. Basic Web Design Questions to ask yourself?

Why are you building a website?
Who is your target audience?
What does your target audience expect
to get by going to your website?
What is the purpose and goal of your website?
How does your website design portray your
image and your larger mission?
Do you already have content developed for
your website?
Who will be responsible for updating the website?
What should the balance be between design,
usability, and style?

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

Number of Visitors to this site: 7505 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: 27 January, 2006
E-mail: cclewis@spot.colorado.edu
URL: http://www.colorado.edu/AmStudies/lewis/Design/portfolio..htm