Main The Basics Of HTML Web Page Design Design Tools






In today's Steel Ring's Web Page Workshop, we plan to cover:

  • How to create a web page through ICAEN.
  • The basics of starting up a page.
  • HTML
  • Using images (including how to use Graphic Viewer and how to scan in photographs).
  • Special effects (backgrounds, tables, image maps, and other cool stuff...)
  • Using ICAEN programs to enhance web pages.
  • The do's and don't's of web page design.
  • Using design tools such as Adobe Photoshop.
  • Third generation web page design.

The first step is creating your page. Some of you may have already created your page. For those of you who haven't, here is the procedure:

Note: The following information was taken from Webmeister's How To Create Your Own Homepage! which can be viewed by following this link.

At the prompt type:

l-ecn000% cd
This will put you in your home directory.

l-ecn000% mkdir .public_html
Now we create the web page directory.

l-ecn000% cp /usr/ui/class/examples/html/qkstart.html ~/
This will copy the template web page into your home directory.

l-ecn000% mv ~/qkstart.html ~/.public_html/.index.html
Now we move the page into the web directory and rename it.

Now that we have the directory and a file, we must set the permissions so the web browsers can see the file.

l-ecn000% chmod 755 ~/.public_html
Make the directory readable to the public.

l-ecn000% chmod 644 ~/.public_html/.index.html
Make your web page readable to the public as well.


NOTE:

  • Any extra files you place in your .public_html directory must have appropriate permissions set (i.e. chmod 644) so that they are readable to the public.
  • Any sub-directories you place under your .public_html directory must have appropriate directory permissions set (i.e. chmod o+rx) so that they are readable to the web browsers.
  • If you are faculty, class account, organization, or staff, you need to enter chmod o+x ~/ at the prompt.
  • If you page still doesn't load, enter the following at the prompt...

      l-ecn000% cd ~/..
      This will put you below your root directory.

      l-ecn000% chmod a+x your_login_name
      This will allow the web browser to go into your account.

      l-ecn000% cd
      To return you to your home directory.

Now your newly created page can be found at the URL
http://www.icaen.uiowa.edu/~loginid

Information taken from: http://www.icaen.uiowa.edu/icaen.info/services/homepages/step1.shtml. Written by Steven Mitchell.

Our next step is creating our page using HTML.

  1. l-ecn000%cd
    Make sure you're in your home directory.
  2. l-ecn000%cd .public_html
    Go to your web page directory.
  3. Click the file cabinet icon on the bar at the bottom of your screen.
  4. Select View from the menu on the file cabinet window.
  5. Select Show Hidden Files. This will make your "dot" files visible.
  6. Click on the folder labeled .public_html.
  7. Click on .index.html.

I will now take you through the web page design process. Here are a few things to remember:

  1. To view the code that makes up a web page, click View on the Netscape window menu and select Document Source.
  2. Save changes you make with your text editor (File then Save) to have them readable by Netscape. To view your new changes, click the Reload icon on your Netscape menu.
Click Here to continue!

Helpful Resources


A Historical Note:
The first Steel Ring Web Page Workshop was held on February 22, 1997 in Elder Lab.
A Web Page Workshop Part 2 was held on April 5, 1997 in Elder Lab.
The Second Web Page Workshop: February 21, 1998, 2102 EB.
The Third Web Page Workshop: March 27, 1999, 2102 EB.
The Fourth Web Page Workshop: February 19, 2000, 2102 EB.

Return to the Steel Ring Home Page