Web Design Tutorial

Document Sample
Web Design Tutorial Powered By Docstoc
					Netscape Composer Tutorial                                          Page 1 of 1




Web Design
Tutorial
Using Netscape Composer




http://www.ed.uiuc.edu/courses/ci235/tutorial/composer/index.html    1/12/2004
Introduction                                                                                      Page 1 of 1


               Introduction                                                           Go to
                                                                                                   Next


  In this tutorial, you will learn how to use Netscape Composer to create your Web pages and publish
  them on the Internet. Click on the following button to see what you will be doing. Remember to come
  back.

                               See the example now     (will open a new window)

  Before rushing into Composer, Lesson 1 provides some Web design guidelines which will help you
  build better Web pages. Lesson 2 introduces you to the working environment of Composer. You will
  learn where to locate certain tools and buttons in the toolbar and formatting bar. Lesson 3 and 4 show
  you how to work with text and create links. Lesson 5 teaches you how to set the page properties.
  Once you complete these three lessons, you can build some text-based Web pages (which are not
  very attractive).

  You are strongly encouraged to go on to Lesson 6 and 7 to learn about tables and images which will
  help you to create more enticing pages. These concepts and skills are applied in Lesson 8 in which you
  actually build your ePortfolio home page following step-by-step instructions.

  In Lesson 9, you will learn an easier way to create pages for your ePortfolio using templates. Lesson
  10 shows you how to send your Web pages to the CCSO server and publish them on the World Wide
  Web. A list of explanations of some terms is available in the Glossary. Finally, an evaluation form is
  appended after the glossary. Please fill out this form to help us improve the tutorial.

  Some navigation tools are available to you. On the top and bottom of each page, you can click on
  Next to go forward to the next page. If you want to go back to the previous page, just click on Prev
  (or click on the Back button on the browser). On the top right corner of each page, you will see a text
  box with "Go to" in it. This is a pull-down menu which allows you to jump to any lesson you want.
  Moreover, you can refer to Table of Contents by clicking the link on the very bottom of each page.

  Some terms should be made clear here. When I say Insert > Table, I mean that you click on Insert
  on the menu bar and then choose Table from the list on the pull-down menu. On the other hand,


  when I say Click, Hit, or Press the         button, I mean that you click on the        button directly.

  Finally, be creative! Although examples and templates are available to you, you are neither confined
  to the templates, nor constrained within them. Feel free to rearrange or modify the contents of the
  templates, or use something different. You are encouraged to use your creativity to build your
  ePortfolio that reflects your personality and style.

  Now, let's get started!




                                  Tutorial Home                                Next




http://www.ed.uiuc.edu/courses/ci235/tutorial/composer/intro.html                                  1/12/2004
1a: Aesthetic considerations                                                                       Page 1 of 2


            Lesson 1a: Web Design Aesthetic Considerations                             Go to
     Prev                                                                                            Next

                          In this lesson: Simplicity | Consistency | Color Schemes




                                    Everything should be made as simple as possible but not
                                    simpler. -- Einstein

                                    Simplicity means the state of being simple, uncomplicated,
                                    or uncompounded. It also means directness of expression.

                                    In terms of Web design, simplicity refers to an approach to
                                    express something in a complete yet economic way.
                                    Reflecting on the intention of the Web page, the designer
                                    has to convey the messages to the reader thoroughly and
                                    get directly to the heart of the matter. For example, the
                                    images on the screen are not just for decoration; they must
                                    help to encapsulate a mass of information. Screen layout
                                    should look clean as well. For example, do not add every
                                    neat gimmick and animated image you can find. You may
                                    think they are cool, but in reality they are distracting and
                                    confusing. Just keep the content simple and to the point. If
                                    your Web page is too busy and people reading it cannot find
                                    what they want quickly, they will move to another page .
                                    See Good Example and Bad Example.

                                                                                      Back to top




                                    Literally, consistency means the agreement or harmony of
                                    parts or features to one another or a whole. In terms of Web
                                    design, consistency involves the homogeneous pattern
                                    within the page and throughout all Web pages. The
                                    elements in the design must be unified to produce a
                                    coherent whole. Such coherence ensures that your design
                                    will become visually apparent to the readers after their
                                    exploration. For instance, the background, text format, and
                                    color usage should be carefully chosen to produce a
                                    consistent screen layout for all your pages.

                                    Consistency does not mean everything should be the same.
                                    Some variations would be called for to accommodate the
                                    diverse elements of Web pages. However, there must be an
                                    underlying pattern of such variations so that the focus of the
                                    information is conveyed while retaining the flexibility needed
                                    to deal with a variety of communication functions. See Good
                                    Example and Bad Example.




http://www.ed.uiuc.edu/courses/ci235/tutorial/composer/nc1a_aesguide.html                            1/12/2004
1a: Aesthetic considerations                                                                          Page 2 of 2

                                                                                       Back to top




                                   Color scheme refers to a set of colors you use on your Web
                                   components including text, background, link, visited link,
                                   active link, border, and table. A color scheme immensely
                                   influences the quality of a Web site. It can either enhance
                                   communication or detract from it. Therefore, judicious use
                                   of colors is very important to express yourself and make
                                   your Web pages attractive. For example, color can be used
                                   to produce an atmosphere that expresses the character of
                                   the Web site. The official "The X-file site" uses black color to
                                   create a sense of the mysterious. Both color and theme
                                   contribute to the focus of this site. See Good Example and
                                   Bad Example.

                                                                                      Back to top




                  Prev                        Tutorial Home                            Next




http://www.ed.uiuc.edu/courses/ci235/tutorial/composer/nc1a_aesguide.html                              1/12/2004
1b: Technical considerations                                                                         Page 1 of 2


            Lesson 1b: Web Design Technical Considerations                                Go to
     Prev                                                                                            Next

                         In this lesson: Audience | Structure | Format | Navigation



            Before you actually work on the computer to build your Website, you should make a
            plan for your Web pages. Careful planning and a clear sense of purpose are the keys
            to success in building Web sites. The following are some suggestions.




                                    The first consideration is the target audience of your Web
                                    pages. The audience will influence every aspect of your
                                    website's design. For example, which tone of language will
                                    best serve your audience? What are the appropriate levels
                                    of complexity and formality in the language you will use.
                                    Which approach should you use -- playful or scholarly,
                                    pictorial or language-oriented ?

                                                                                      Back to top




                                    Good websites are well organized. Their content is
                                    presented in a clear manner that is easy to follow.

                                    Outline and categorize the information for your site.




                                    Use the home page as a basic table of contents. Under each
                                    main category, distribute the information into further topics.
                                    Present each topic individually, in a logical order, with easy
                                    links between related items. Put the most critical and
                                    important information on top of your site structure. Provide



http://www.ed.uiuc.edu/courses/ci235/tutorial/composer/nc1b_techguide.html                            1/12/2004
1b: Technical considerations                                                                          Page 2 of 2

                                   supporting information in pages linked to each sub-topic.

                                                                                       Back to top




                                   Text
                                   Try to limit the length of text lines. Long lines of text can be
                                   discouraging to read. Try some techniques to decrease the
                                   length of some of the lines. For example, you can use
                                   invisible tables to limit the length of a line of text. If you
                                   know HTML code, you can also use the <BLOCKQUOTE>
                                   tag. Limit the length of the page as well. Usually, readers
                                   will boggle at long text and will not read it at all. When
                                   necessary, you can break down a long page to shorter
                                   pages. Finally, text color should contrast with the
                                   background to be easily read.

                                   Image
                                   Make sure the graphics are relevant and necessary to
                                   convey the message. Also, limit the size of the image --
                                   usually under 60 K. Large images demand a longer time to
                                   download and display, and you do not want your reader to
                                   wait for minutes to view a certain image. Also, background
                                   image or texture should contrast well with the text, so that
                                   it is easy to read on screen.

                                   Hyperlink
                                   Make sure your hyperlinks are easy to detect by using
                                   appropriate colors. Be consistent with the color schemes for
                                   hyperlinks throughout your Web pages.

                                                                                       Back to top




                                   You should ensure that the readers get around your website
                                   with ease. A variety of navigational aids and web elements
                                   should help visitors find what they are looking for and get
                                   there quickly. A menu or image map, a site map, arrows,
                                   links and buttons can all work together to provide direction
                                   to its visitors.

                                                                                       Back to top




                 Prev                        Tutorial Home                             Next




http://www.ed.uiuc.edu/courses/ci235/tutorial/composer/nc1b_techguide.html                             1/12/2004
2:Working Environment of Netscape Composer                                                        Page 1 of 3


           Lesson 2: Working Environment of Composer                                   Go to
    Prev                                                                                           Next

           In this lesson: Interface | Composer vs. Navigator | Handy Operations | Getting Help

  In the previous lesson, you learned some design considerations to make your Web pages organized
  and attractive. In this lesson, you will get to know the working environment of Composer. You will
  learn the function of the buttons on the tool bar and formatting bar. Some useful tips are also
  provided. Note that this lesson just shows you what tools are available and where to locate them. You
  will learn how to use them in the next few lessons.

  The Interface of Composer

  Once the Navigator is open, you have two common ways to open Composer. Do this now!!
  (Remember to come back to the lesson here).

        Choose Communicator from the menu bar and choose Composer

                                                    OR

        Click the Composer icon on the Communicator Component bar (at the bottom-right corner).




  You will see a new blank window like the following. This is the Composer interface. Move your cursor
  over each button or formatting tool to learn its features. Here the tools that are available to you are
  shown, without going into detail. If you don't understand, don't panic. You will learn how to use these
  tools by the time you complete the tutorial.




http://www.ed.uiuc.edu/courses/ci235/tutorial/composer/nc2_interface.html                          1/12/2004
2:Working Environment of Netscape Composer                                                   Page 2 of 3




                                                                                           Back to top


  Navigator (browser) vs. Composer (editor)

  If you are new to Composer, please pay special attention to the distinction between
  Navigator and Composer and learn how to switch back and forth.

  Viewing vs. Editing
  Netscape Communicator (v. 4.x) is actually a collection of programs. You may have used only
  Netscape Navigator to surf the net. Navigator is a VIEWER - we use it to look at web pages, but
  we cannot change them by typing in them or adding pictures. The icon for the browser (Netscape

  Navigator) is a ship's wheel:      .

  A second component of Communicator is Netscape Composer. This program allows you to create
  your own web pages. Here is an analogy: You use Word to edit your papers. Similarly, you use
  Composer to create and edit Web pages. The icon for Netscape Composer is a pad and pen:           .

  Moving Back and Forth
  When you create a web page, you will need BOTH Netscape Navigator and Netscape Composer. You
  will create your masterpiece in Composer and then view the results in Navigator.

  If both the Navigator and Composer are open, you will see their icons on the Windows status bar as
  shown below. You can move from one to the other simply by clicking on their icons. Click on the pen
  icon and Composer will be activated and allow you to edit your page. Click on the wheel icon will
  switch you back to the browser mode.




                                                                                           Back to top




  Handy Operations


http://www.ed.uiuc.edu/courses/ci235/tutorial/composer/nc2_interface.html                      1/12/2004
2:Working Environment of Netscape Composer                                                          Page 3 of 3

  Note:
  Except for the Reload button, the following instructions happen in Composer, not in the screen you
  are looking at now as you read this sentence. You may need to switch to the Composer window to
  play around and then switch back to the lesson.

  Save and Reload

         It is a good practice to save (press the Save button) your file frequently. You can then

         view the results in Navigator by pressing the Preview button      . Each time you add
         to or change your web page in Composer, switch to Navigator to view it. You will need to

         click on the Reload button       (in Navigator) to view the changes. Unfortunately,
         even if you hit the Reload button, Navigator does not always display the change you have
         made to the images (text is OK). So, don't worry if you made some changes to the
         images and they just don't appear they way you want. If you really want to view the
         change you made, you may have to close Netscape completely and reopen Netscape.

  Undo

         Nothing is carved in stone. If you try something and not happy with the results, you can
         "undo" what you just did by choosing Edit > Undo from the menu bar. However, you
         must invoke this command immediately after the goof. "Undo" will only undo the last
         operation.




                                                                                               Back to top

  Getting Help
  Even the experts consult the Help menu often. When you are working on your Web pages and
  encounter some problems, you can look for help.

         Choose Help --> Help Contents or simply hit F1 on your keyboard.
         On the left side of the Help window, click on Creating Web Pages.
         Scroll down and click on the topic you are interested in.

  You can also search for a topic:

         Click on the round button beside Index on the top left corner.
         Type in the key word(s).
         The related topics will show up beneath the key words.
         Click on the topic you are interested in.




                                                                                               Back to top


                       Prev                   Tutorial Home                     Next




http://www.ed.uiuc.edu/courses/ci235/tutorial/composer/nc2_interface.html                            1/12/2004
3:Formatting the text                                                                            Page 1 of 6


                Lesson 3: Formatting the Text                                          Go to
     Prev                                                                                        Next




In the previous lesson, you learned the interface of Composer and some useful tips. In this lesson, you will
learn how to format text and paragraph in Composer. You will find that your concepts and skills in Word
Processor can be applied here as well. You may play around to improve the aesthetic look of your Web pag



The simplest Web pages are text-based (i.e. no tables, images or plug-ins). A text-based Web page is simil
to a Word document. Here is an example.




To create a text-based Web page, type the text, format it, and make some links from certain key words. I
assume that you know how to type, here are some ways to format the text. Try to remember the function o
each button.

Note:
The following instructions happen in Composer, not in this screen you are now reading. You may need to
switch to the Composer window to play around and then switch back to the lesson.


http://www.ed.uiuc.edu/courses/ci235/tutorial/composer/nc3_text.html                              1/12/2004
3:Formatting the text                                                                           Page 2 of 6




1. Alignment:

      Select the text. Then click on the Alignment button and choose left, center or right. You can
      also choose Format > Align from the menu bar.




2. Paragraph Format

      Paragraph format are illustrated by the following examples.




http://www.ed.uiuc.edu/courses/ci235/tutorial/composer/nc3_text.html                             1/12/2004
3:Formatting the text                                                                            Page 3 of 6




      Notes:

        1. Headings: Each heading comes with its own fixed spacing.
        2. Address: This format is used for a web page "signature." The "signature" indicates the author
             the page and the person to contact for more information, as in the above example. You might
             want to include the date and copyright notice. This format usually appears at the bottom of the
             web page under a horizontal line.
        3.   Formatted: This is useful for elements such as code examples, tables, and mail messages that
             you want displayed in a fixed-width font. Most browsers remove extra spaces, tabs, and
             paragraph returns in your text. However, text that uses the Formatted style is displayed with th
             white space intact.
        4.   Desc. (Description) Title and Text: Use the Description Title and Text formats for glossaries
             and similar lists, as in the above example.

3. Font, Font Size and Color

      Select the text and change the font, font size and color as illustrated below. You can also choose


http://www.ed.uiuc.edu/courses/ci235/tutorial/composer/nc3_text.html                              1/12/2004
3:Formatting the text                                                                             Page 4 of 6




      Format > Font, Format > Size, and Format > Color from the menu bar.




4. Bold, Italic, Underline, and Remove All Style




      Likewise, you can also choose Format > Styles from the menu bar.

      Clicking on the "Remove all styles" button will remove all formatting of the selection -- no bold,
      no italic, no underline, no heading, no links.

5. Indent

      Two buttons are used to adjust the size of the indentation of text. To indent text or increase the
      indentation of text, select the text to be indented, then click on the "increase indent button"  .
      On the other hand, to decrease the indentation of text, select the text and click on the "decrease
      indent button"     . You can indent the paragraph to make it easier for the reader to read. For
      example,




http://www.ed.uiuc.edu/courses/ci235/tutorial/composer/nc3_text.html                               1/12/2004
3:Formatting the text                                                                              Page 5 of 6




      You can also increase or decrease indent by choosing Format > Increase or Decrease Indent
      from the menu bar.

      Finally, the above techniques are also applied to indent images and other objects.



6. List

      Sometimes, a list makes things simple. Composer provides two types of lists as shown below:

            Bullet List

                  American Beauty
                  Boys Don't Cry
                  The Sixth Sense

            Numbered List

                        1. Maria Maria (Santana Featuring The Product G&B )
                        2. Breathe (Faith Hill)
                        3. Bye Bye Bye (Destiny's Child)


      To make a list, type the list items in separate lines. Select the list and hit Bullet List   or

      Numbered List           button.




http://www.ed.uiuc.edu/courses/ci235/tutorial/composer/nc3_text.html                                1/12/2004
3:Formatting the text                                                                       Page 6 of 6




To delete the bullets/numbering, click on     /       button again.

7. Other Tools

      There are some other formatting tools that are not available from the tool bar but are found
      under the Format menu on the menu bar. Feel free to play around with these formatting tools
      and make the best of your text.



                        Prev                      Tutorial Home                 Next




http://www.ed.uiuc.edu/courses/ci235/tutorial/composer/nc3_text.html                          1/12/2004
4:Making Hyperlinks                                                                                 Page 1 of 8


                   Lesson 4: Hyperlinks                                                   Go to
     Prev                                                                                            Next

  In this lesson: Concepts | Remote Links | Local Links | E-mail Links | Targeted Links | Removing Links




 In the previous lesson, you learned how to format text by applying size, color, and other styles. You
 also learned how to indent a paragraph and make lists. In this lesson, you will learn how to make the
 four different types of hyperlinks.



 Concepts

 What are hyperlinks?

         Hyperlinks are links in a Web page that you can click on to go to other Web resources.
         They can also do things like open an e-mail program for you to send messages. When the
         cursor is on hyperlinks, it changes into the shape of a hand. Usually, a text hyperlink is a
         different color than regular text and underlined. Images can also be hyperlinks. Hyperlinks
         are also called links.

 Function of Hyperlinks

    1. Linking to a remote Web site. These links allow you to link to any page on the World Wide Web.
         For example, you may want to link to your department, ISBE Learning Standards, NASA, etc.
    2.   Linking within the same site (local links). For example, there are links from this lesson to other
         lessons and to the table of contents. These lessons are within the ci235 Website.
    3.   E-mail links. When users click on an e-mail link, the e-mail composing program (such as
         Netscape Messenger, Eudora, MS. Outlook Express, etc.) will be launched and allows them to
         compose a message.
    4.   Targeted links. Targeted links allow users to jump to a specific part of the Web page. They are
         usually seen in a long document (same page) or cross reference (different page). For example,
         the six links at the top of this page are targeted links that bring you to the five sections below.
         Moreover, after each section, a back to top link will bring you back here on the top of this page.

 You can make either text or an image as a hyperlink. And you can change and remove a hyperlink
 easily.




 1. Linking to a Remote Web Site

         To create a link (i.e. to link) from your page to a remote Web site:

            1. Select the text/image to be linked.

            2. Click the        button. You can also choose Insert > Link from the menu bar. You
                 will be prompted to enter the URL (Web address).
            3.   Type the URL of that Web site as shown below.
            4.   Then hit OK.


http://www.ed.uiuc.edu/courses/ci235/tutorial/composer/nc4_link.html                                 1/12/2004
4:Making Hyperlinks                                                                                Page 2 of 8




       The link to a remote Web site is called an "absolute link." You have to provide the whole
       and exact Web address (including path and file name) for the page you link to.

       Tip
       To set the exact address for your link and avoid typing errors:

                1.   Use the browser (Navigator or Explore) to go to the Web site you want to link to.
                2.   Highlight the URL.
                3.   Type Ctrl+C to copy it (hold down the Ctrl key and type C).
                4.   Place the cursor in the blank space beneath "Link to a page location or local file:"
                     and type Ctrl+V to paste the URL in stead of typing it.




                                                                                              Back to top


 2. Linking within the Same Site


       Select the text/image you want to link from and click the        button. A window called
       "Character Properties" will pop up. That is your prompt to enter the web address of the
       file/document you want to link to. Then click on the Choose File button as shown below.



http://www.ed.uiuc.edu/courses/ci235/tutorial/composer/nc4_link.html                                1/12/2004
4:Making Hyperlinks                                                                                Page 3 of 8




       When prompted to choose the file (see the diagram below), locate the file and select it. Hit
       Open to return to the "Character Properties" window.




       You will see the file name appears in the window. Hit OK and you are done.

       Tip
       If you are linking to other file type other than HTML, you have to select the file type or just
       select All Files. It is suggested that you put all your Web pages in the same disk or same
       folder of the disk.



http://www.ed.uiuc.edu/courses/ci235/tutorial/composer/nc4_link.html                                1/12/2004
4:Making Hyperlinks                                                                                Page 4 of 8


       The link within the same site is known as a "relative link" in which you just provide the file
       name without specifying the path. When you send your files to the server, the server will
       append the path to your files automatically. Thus, if you send the file "eport.html" to your
       account in the www.students.uiuc.edu server, the URL for this file becomes
       http://www.students.uiuc.edu/~your_netID/eport.html

       However, if you send the same file to a different server, the URL of the file is different.
       Suppose you are enrolled in C&I 336 and your instructor set up Web accounts in MSTE
       server for the class. When you send the same file "eport.html" to the MSTE server, the URL
       for this file becomes
       http://www.mste.uiuc.edu/courses/ci336sp00/students/your_name/eport.html


                                                                                                Back to top


 3. E-mail Links

       Making e-mail links is similar to making regular hyperlinks except for the mailto


       command. Select your e-mail address and click the   button. In the space below Link
       to, type mailto:your_e-mail_address. See the example below. Remember, no space is
       allowed. Hit OK.




 Click your mouse anywhere on the screen to deselect the text and you will see your e-mail address has
 become a hyperlink.



http://www.ed.uiuc.edu/courses/ci235/tutorial/composer/nc4_link.html                                1/12/2004
4:Making Hyperlinks                                                                                Page 5 of 8




                                                                                                 Back to top


 4. Targeted Links

       The purpose of targeted links:

             When you click on a regular link, you are transported to the top of another
             page. You can then scroll down to see the rest of the page. But there may be
             times when you want to create not only a link to a page, but a link to a specific
             part of a page that is not necessarily the top of the page.

       Types of targeted links:

             There are two types of targeted links -- same page (internal) and different
             page (external). Internal links (links within the same page) are illustrated by
             the following diagram.




             External links (links to a specific part of a remote page) are illustrated by the
             following diagram.




http://www.ed.uiuc.edu/courses/ci235/tutorial/composer/nc4_link.html                                1/12/2004
4:Making Hyperlinks                                                                               Page 6 of 8




        Making Targeted Links:
        Creating such targeted links involves two steps. You have to insert targets and then make
        the links. The target icon   designates the destination of your link.

 Step 1. Inserting targets

    1. To insert the target at the location you want to link TO, place your cursor at the top of that
        location.


    2. Press the       button or choose Insert > Target form the menu bar. You will be prompted to
        enter a name for the target. Choose an appropriate name and type it in the space provided.




    3. Hit OK and you will see a small target icon    . Target icons are visible in Composer, but unseen
        in the Navigator browser. You can edit a target by double-clicking on it.

 Tip:
 If you need to change the name of a target, you can

          1. Double-click on the target icon to open the Target Properties window.
          2. Delete the old name and type the new name.

 Step 2. Linking to the Target



    1. Select the text which you want to link FROM and hit the          button. The Character
        Properties window appears with a list of available targets.



http://www.ed.uiuc.edu/courses/ci235/tutorial/composer/nc4_link.html                               1/12/2004
4:Making Hyperlinks                                                                               Page 7 of 8




    2. For within-page targeted links, click on the target you want to link to (as shown in the above
         diagram). The link appears in the Link to box with a # sign in front of it. The # sign indicates
         that it is a target. Hit OK and you are done.
    3.   However, for remote-page targeted links, you have to choose the file (click on the Choose File
         button) first and then choose the target on that file.

 Note:
 Hitting the Enter key will automatically "inherit" the format of the previous text. For example, suppose
 you set the text size to 12 and the color to green and hit the Enter key, the next line will also be size
 12 and green. Moreover, if you hit the Enter key right after a link, the next line will also be the same
 link (which is a common trouble).



                                                                                               Back to top


 5. Changing and Removing Hyperlinks

         Click-and-drag over the linked text (or image) to highlight it.


         Choose Insert --> Link or click on the           button.
         In the Character Properties window, make any changes to the link. To remove a link
         completely, just delete the link text entirely or click on Remove Link... button.
         Hit OK.

 An easier way to remove a link is the following:

         Place the cursor anywhere on the linked text (or image). The cursor should change to an "I"
         shape.
         Click the right mouse button and choose Remove Link from the menu.




http://www.ed.uiuc.edu/courses/ci235/tutorial/composer/nc4_link.html                               1/12/2004
4:Making Hyperlinks                                                                             Page 8 of 8

                                                                                             Back to top


 By learning how to format the text and make hyperlinks, you can build some "OK" Web pages.
 However, this kind of text-based Web pages are often referred as "first-generation Web page." They
 are not well designed; they look as if you take text and simply reproduced it on the screen. You need
 to learn more advanced Web design. With clear typography, clever design, and appropriate use of
 images and tables, you need to coordinate all elements on the page and entice the users through the
 screens. To accomplish this, you have to master the skills of using tables, images, and other tools in
 the following lessons.




                       Prev                   Tutorial Home                    Next




http://www.ed.uiuc.edu/courses/ci235/tutorial/composer/nc4_link.html                             1/12/2004
5:Setting Page Properties                                                                        Page 1 of 5


           Lesson 5: Setting Page Properties and Background                            Go to
    Prev                                                                                          Next

                            In this lesson: Page Information | Colors & Background




  In the previous lesson, you learned how to make different kinds of hyperlinks. In this lesson, you will
  learn how to provide the information about your page by offering title, author, description, and
  keywords. You will also learn how to set up background color and/or image.



  Information about the Page

  To set page properties, click on the Format menu and choose Page Colors and Properties.




  You will see a Page Properties Window as shown below. On the top of the window, click on the
  General tag. The General panel is where you provide basic information about the page. The title of
  your page will appear at the top of the browser window. The other information entered in the General
  panel will be helpful to web users locating your web page. For example, suppose that the users
  perform a search (using Yahoo, Altavista, etc.) and your page is among the search results, the
  following diagram shows the relationship between search results (in Altavista) and Page Properties.


http://www.ed.uiuc.edu/courses/ci235/tutorial/composer/nc5_property.html                          1/12/2004
5:Setting Page Properties                                                                          Page 2 of 5




  The following sections contain some information about each component of this Image Properties
  window. You may need to scroll up and down to match the diagram (above) with the explanations
  (below) so that you will know what I am referring to.

  1. Title

        The Title of the page will appear on the top left corner of the browser window (Mac will
        show it in the center).




        Also, the page title becomes an entry on the bookmark if the users bookmark this page.
        You should always title your Web page.

  2. Author

        Type your name in the Author box.

  3. Description



http://www.ed.uiuc.edu/courses/ci235/tutorial/composer/nc5_property.html                            1/12/2004
5:Setting Page Properties                                                                       Page 3 of 5

        Provide a brief description of this page. The description helps the users get to know the
        contents of your Web page.

  4. Keywords

        Finally, provide a few keywords which help users locate your Web page on the Internet
        using search engines. Thus, if you want to invite a lot of visitors, add as many relevant
        keywords as you can.




                                                                                              Back to top



  Colors and Background



  Click on the Colors and Background tag. Here you can either use the browser's default colors for
  linked text and background or use a custom color scheme.

  1. Page Colors

        You can keep the default values for link text colors. You can also use your own colors. To
        do so, check "Use custom colors (Save colors in page)" and pick up the colors you
        like.




http://www.ed.uiuc.edu/courses/ci235/tutorial/composer/nc5_property.html                             1/12/2004
5:Setting Page Properties                                                                      Page 4 of 5

  2. Background Image

        If you do not specify the background image, the browser uses the color you just selected
        as the background. To select an image as background, click on the Choose File button.
        The Choose Image File dialog box will open. Locate the image you want to use as the
        background. Click on the file name of the image and hit Open.




        The file name of the selected image appears in the Use Image box. Click OK and you are
        done.




                                                                                            Back to top




http://www.ed.uiuc.edu/courses/ci235/tutorial/composer/nc5_property.html                           1/12/2004
6:Working with tables                                                                             Page 1 of 7


             Lesson 6: Adding Table to the Web Page                                      Go to
    Prev                                                                                          Next

             In this lesson: Concepts | Table Properties | Cell Properties | Adding & Deleting




  In the previous lesson, you learned the concepts and skills needed to set page properties and to use
  an image as the background for your page. In this lesson, you will be learning a very important tool
  in Composer -- the tables. Tables are very helpful to organize various components of the document
  and create an aesthetic page layout. You will also learn how to modify cell properties. Here I just give
  you an overview of the uses of tables and how to edit them. You will get some hands-on experience
  on modifying table and cell properties in Lesson 8.

  Concepts

  Tables are powerful tools for presenting complicated information in a simple way. Creative use of
  tables conveys information effectively and enhances the aesthetic look of the screen layout. Below are
  four common uses of tables. Of course, professional Web designers go far behind these examples.
  Click the following to go to the examples. When you are done, remember to come back.



        Organizing Information                                    Creating Menu
        Putting text and image side by side                       Creating Page Layout
  Tables can be complex. If you don't understand something, don't panic. Once you have more hands-
  on experience in using tables, you will eventually master the skills.
                                                                                         Back to top


  Table Properties


  To insert a new table, click on the   button or choose Insert > Table > Table... You will see the
  New Table Properties window like this.


http://www.ed.uiuc.edu/courses/ci235/tutorial/composer/nc6_table.html                              1/12/2004
6:Working with tables                                                                               Page 2 of 7




  The following information is about each component of this Image Properties window. You may need to
  scroll up and down to match the diagram (above) and explanations (below) so that you will know
  what I am referring to.

  1. Number of rows and columns

        The row and column of a table are illustrated by the following diagram.




  2. Table alignment

        You can align the table to the left, center, or right of the window.

  3. Include caption

        A table can have a caption above or below it.

  4. Border line width

        Set the width for the size, in pixels, of the border lines around cells. A table with a border
        of 0 pixel is invisible on the browser window, but is displayed by dotted lines on the
        Composer window (This is a very common technique many Web designers use to create


http://www.ed.uiuc.edu/courses/ci235/tutorial/composer/nc6_table.html                                1/12/2004
6:Working with tables                                                                               Page 3 of 7


        their special screen layout). Click on the button below to see the illustration.

            See the illustrations    (will open a new browser window).

  5. Cell spacing

        Enter a number for the space, in pixels, between cells. Click on the button below to see
        the illustration.

            See the illustrations    (Will open a new browser window).

  6. Cell padding

        This sets the margins (space) of each cell. Enter a number for the padding, in pixels,
        within each cell. Click on the button below to see the illustration.

            See the illustrations    (Will open a new browser window).

  7. Table width

        Table width and height are illustrated by the following diagram.




        Enter a number for the width of the table. Choose "% of window" or "pixels." The default
        value is 100%, meaning that it will span from the left to the very right of the browser
        window. Specifying the table width as "% of window" holds the percentage of the window
        that the table occupies constant as the size of the window varies. On the other hand, if
        you specify width as "pixels", then the table is static, meaning that the size of the table
        remain constant regardless of the size of the browser window.

  8. Table minimum height

        This is the smallest height the table can have. If you add text to the table, the table
        automatically resizes to accommodate the text. Choose "% of window" or "pixels." If you
        specify height as "% of window," as with table width, the table height changes whenever
        the window height changes.

  9. Equal column widths

        Makes all cells the same width. Deselect this if you want to size each cell individually.

  10 Table background

        You can choose a background color or image for the table. For example,


         This table uses navy blue as its background
         color.




http://www.ed.uiuc.edu/courses/ci235/tutorial/composer/nc6_table.html                                1/12/2004
6:Working with tables                                                                                Page 4 of 7




         This table uses "footprint.gif" as its
         background image.




        If you leave this option blank, the table background is the same as page background.

  Once everything is set, click OK to close the properties window and go back to the composer window.

  Note:
  The table and cell heights are not fixed. If you add text, images, or other objects into the cell, the cell
  will adjust its height to accommodate your inputs.
                                                                                                Back to top


  Cell Properties

  Sometimes, you may need to change the design of the table after it is created. You will learn the
  techniques for editing tables, including setting row and cell properties, adjudging column width, etc.
  Caution: Some of the techniques may seem tricky.

  To set the cell properties, first place the cursor in the cell. Then right-click on the blinking cursor and
  choose Table Properties (or choose Format > Table Properties). You will see the following
  window.




http://www.ed.uiuc.edu/courses/ci235/tutorial/composer/nc6_table.html                                 1/12/2004
6:Working with tables                                                                               Page 5 of 7




  The following information is about each component of the above Image Properties window. You may ne
  scroll up and down to match the diagram (above) and explanations (below) so that you will know what
  referring to.

  1. Horizontal Alignment / Vertical Alignment

        This aligns the text, image, or other objects within the cell. Default (usually left and center)
        leaves the alignment as it was when the table was created.

  2. Cell spans

        A cell can span more than one column or row. In other words, you can merge several cells into a
        single one. For example,


          This cell spans three column                      This cell
                                                            spans
                                                            two rows




        But you may need to delete the extra tiny cells resulting from the merging. You will learn how to
        delete a table, row, column, and cell in a moment.

  3. Text style

        Header style: If you check Header style, the text in the cell will be aligned to center and set to
        bold style. For example, the first cell in the following table is set to header.


http://www.ed.uiuc.edu/courses/ci235/tutorial/composer/nc6_table.html                                1/12/2004
6:Working with tables                                                                            Page 6 of 7



                           Design Principles

         Simplicity: ................

         Contrast: .......................

         Consistency: ....................


        Nonbreaking: Checking this keeps the text from wrapping to the next line. Text will wrap
        to the next line only if you insert a paragraph break (hit Enter key).

  4. Cell width

        Enter a number for the width of the cell. Choose "% of table" or "pixels." If you specify "%
        of table," the cell width changes with table width.

  5. Cell min. height

        Enter a number for the minimum height of the cell. This is the smallest height the cell can
        have.

  6. Use Color

        You can color the cell. For example,


                               Pain the cell




  7. Use Image

        You can use an image as the cell background. For example,


         This cell uses red_rock.gif         This cell uses yellow_rock.gif
         as background.                      as background.




  8. Leave image at the original location

        The default is unchecked. It means that when you save your file, Composer makes a copy
        of the image and places it in the same directory (folder) as your file. However, if you
        check this option, Composer does not copy the image to the same directory (folder) as
        your file. Accessing the image requires additional steps which we do not need to get into
        here. Therefore, for the purpose of this tutorial, do not check this option.

                                                                                              Back to top

  Adding and Deleting



http://www.ed.uiuc.edu/courses/ci235/tutorial/composer/nc6_table.html                             1/12/2004
6:Working with tables                                                                        Page 7 of 7

  I. To add an additional row to a table:

          1. Place the cursor anywhere in the row (the new row will be added below this row).
          2. Right click the mouse on the blinking cursor and choose Insert --> Row from the pop-
              up menu (OR: You can choose Insert > Table > Row from the menu bar).

  II. To add an additional column to a table:

          1. Place the cursor anywhere in the column (the new column will be added to the right of
              this row).
          2. Right click the mouse on the blinking cursor and choose Insert --> Column from the
              pop-up menu (OR: You can choose Insert > Table > Column from the menu bar).

  III. To delete a row or column from a table:

          1. Place the cursor anywhere in the row or column to be deleted.
          2. Right click the mouse on the blinking cursor and choose Delete --> Row or Column
             from the pop-up menu.



  IV. To delete the entire table:

          1. Right click anywhere within the table.
          2. Choose Delete --> Table from the pop-up menu.

                                                                                           Back to top


                        Prev                 Tutorial Home                  Next




http://www.ed.uiuc.edu/courses/ci235/tutorial/composer/nc6_table.html                         1/12/2004
7:Working with image                                                                            Page 1 of 5


                Lesson 7: Inserting Images                                             Go to
    Prev                                                                                         Next

                 In this lesson: Inserting an Image | Copy and Paste | Resizing |Deleting




  In the previous lesson, you learned how to insert a table and set up table and cell properties. In this
  lesson, you will learn how to insert images and set up image properties. Images are very important to
  catch a reader's attention, conceptualize ideas, and can be used as symbols for various purposes. You
  will also learn how to copy, paste, resize, and delete an image.




  Inserting an Image
  Place the cursor to where you want the image to appear.


  Click the      button or choose Insert > Image. You will see the image properties dialog box like
  this.




  The following information concerns each component of this Image Properties window. You may need
  to scroll up and down to match the diagram (above) and explanations (below) so that you will know
  what I am referring to.

  1. Image location

        You tell Composer where to pick up the image. Click on the Choose File button and you
        will be prompted to choose an image file.


http://www.ed.uiuc.edu/courses/ci235/tutorial/composer/nc7_image.html                            1/12/2004
7:Working with image                                                                             Page 2 of 5




        Locate the image file and click on it to select it. Hit Open to return to the Image
        Properties window. You will see the file name as well as the path appear in the Image
        location box. Hit OK to complete the task.

  2. Leave image at the original location

        The default is unchecked. It means that when you save your file, Composer makes a copy
        of the image and places it in the same directory (folder) as your file. However, if you
        check this option, Composer does not copy the image to the same directory (folder) as
        your file. Accessing the image requires additional steps which we do not need to get into
        here. Therefore, for the purpose of this tutorial, do not check this option.

  3. Use as background

        To use the image as the background for your entire page, check this option. But, normally
        you set the background in the Page Properties window (see Lesson 5).

  4. Text alignment and wrapping around images

        Click a button to indicate how you want text positioned next to the image. You have seven
        options and the buttons are kind of self-expressing. Usually you can just keep the default
        setting. Feel free to play around and see how each option works. However, Composer
        does not show the alignment changes you've made. You have to view your page in a
        browser window.

  5. Dimensions

        Specify the height and width, in pixels, of the image.

  6. Constrain

        Check this option to maintain the height-width proportion of the image if you resize it or
        move it within your document.

  7. Original Size

        Check this option to undo any changes you've made to the height and width of the image.



http://www.ed.uiuc.edu/courses/ci235/tutorial/composer/nc7_image.html                                1/12/2004
7:Working with image                                                                               Page 3 of 5


  8. Space around image

        Specify the amount of space on the right and left, and at the top and bottom of the
        image.

  9. Solid border

        To set a solid black border around the image, specify its width in pixels in the box
        provided. Specify 0 for no border. For example,




              border = 0 pixel              border = 2 pixels              border = 10 pixels

  10. Alt. Text/LowRes

        This option allows you to provide a textual description of the image, and/or a temporary
        low-resolution image for viewing until the browser completely downloads the actual
        image. This feature is helpful for readers who:

              use web browser which read text only,
              turn graphics off for faster downloading,
              are visually impaired and require "screen reader" for audio transcription of text and
              image files.

        For these reasons, it is a good practice to specify alternate text and/or provide a low-
        resolution image. To do so:

        Click the Alt. Text/LowRes button and you will see the Alternate Image Properties
        dialog box as shown below.




http://www.ed.uiuc.edu/courses/ci235/tutorial/composer/nc7_image.html                               1/12/2004
7:Working with image                                                                                Page 4 of 5

         To supply alternate text, type a brief description of the image in the box. To provide a
         low-resolution image, repeat the procedure described in the section titled Inserting an
         Image at the top of this lesson.


                                                                                                 Back to top


  Copy and Paste an Image

    1. Copying and pasting an image is the same as copying and pasting text.
    2. Click on the image to highlight it. A border will appear around it, indicating that you have
         selected it.
    3.   Click the Copy button to copy the image to the clipboard. You can also choose Edit > Copy or
         right-click on the image and choose Copy from the menu.
    4.   Place the cursor in the place where you want to paste the image.
    5.   Hit the Paste button. There you go.

                                                                                                 Back to top


  Resizing an Image

    1. Resizing an image on Composer is not encouraged. If you enlarge an image, you lose, more or
         less, the resolution of it. If you shrink an image, you may distort it without gaining the
         advantage of shrinking the file size for faster downloading. Anyway, it is recommended that you
         make the images ready to use before inserting them in Composer. Some image editing tools
         such as Photoshop and Image Editor are very helpful.
    2.   To resize an image, click on the image to highlight it. A border will appear around it, indicating
         that you have selected it to work on.
    3.   Move your cursor so that it is angled in one of the corners (this is tricky!).
    4.   When you are in the right spot, the cursor changes its shape to "double-headed arrow". Then
         drag the edges to make the image bigger or smaller.
    5.   You can also resize a picture from the top, bottom or side edges, but if you do, you will lose the
         original proportion of the image. You will retain the original proportion if you click and drag from
         the corners.

                                                                                                 Back to top


  Deleting an Image

    1. Click on the image to select it.
    2. Hit the delete / Backspace key.



                                                                                                 Back to top


                        Prev                   Tutorial Home                      Next




http://www.ed.uiuc.edu/courses/ci235/tutorial/composer/nc7_image.html                                1/12/2004
8: Hands-on: Creating your ePortfolio home page                                                    Page 1 of 8


         8: Hands-On-- Creating Your ePortfolio Home Page                              Go to
     Prev                                                                                          Next

                           In this lesson: Downloading | Creating ePort Home Pge




  So far, you have learned how to format text, create links, insert images, and work on tables and cells.
  In this lesson, you will apply what you have learned from the previous lessons to create an ePortfolio
  home page. The step-by-step instructions will walk you through the whole process.

  Downloading the Files

  You need to save the following images and templates to your disk. If you are working on your own
  computer, you can save them to your hard drive. If you are working in the computer lab, create a
  new folder on the desktop and save the files in the new folder.


            For each of the two image files below,    For each of the four templates, click on
            click on the button to view it (a new     the file name to view it. Then choose
            window will be open). Then right-click    File > Save As to save it to your disk.
            on the image and choose Save Image        Mac users: remember to check Source
            As from the pop-up menu to save it to     as the file format and type the correct
            your disk. (Mac users: hold down the      name (including .html) for the file. Close
            mouse button on the image and choose      the new window when you are done.
            Save this image as... ). Close the
            new window when you are done.
                                                              vita.html

                    eport_bg.gif
                                                               courseslist.html

                    pen_papr.gif
                                                              psplp.html


                                                              links.html


                                                                                               Back to top




  Creating an ePortfolio Home Page

  Instead of building a text-only Web page, we can build an ePortfolio home page like the following.
  This page serves as a table of contents and guides the reader to additional information on subsequent
  pages. In this page, a background image and two (invisible) tables are used. Take a look at this page.


http://www.ed.uiuc.edu/courses/ci235/tutorial/composer/nc8_example.html                             1/12/2004
8: Hands-on: Creating your ePortfolio home page                                                  Page 2 of 8




  Now follow the instructions to work on your own ePortfolio home page. If you forget how to do certain
  tasks, just click on the Hint to refer to the lessons containing those concepts and skills.

  1. Launch Compose with a new blank page. (Hint: Lesson 2)

  2. Choose Format > Page Colors and Properties from the menu bar. Click on the General tag to
  set up the title (for example, Rong-Ji Chen's ePortfolio) and author. Do not click OK yet. (Hint: Lesson
  5)




http://www.ed.uiuc.edu/courses/ci235/tutorial/composer/nc8_example.html                           1/12/2004
8: Hands-on: Creating your ePortfolio home page                                            Page 3 of 8




  3. Click the Colors and Background tag and use "eport_bg.gif" (you should have downloaded it at
  the top of this page) as the background image for the page. Hit OK. (Hint: Lesson 5)




http://www.ed.uiuc.edu/courses/ci235/tutorial/composer/nc8_example.html                     1/12/2004
8: Hands-on: Creating your ePortfolio home page                                                     Page 4 of 8




  4. Save the file to your disk. Give it an appropriate name such as eport.html or
  your_Name_initial_eport.html.



  5. Click the       button to insert a 1x 2 table with width = 90 % of window as shown below. Align
  the table to the center. The table border, cell spacing, and cell padding are set to 0, 5, 8, respectively.
  The other options are kept unchanged. Hit OK. (Hint: Lesson 6)




  Note:
  If you didn't make it right at the first time, you have to bring up the Table Properties window again
  and make your changes. To do so, right-click anywhere in the table and select Table Properties from
  the pop-up menu.

  6. You will see a dotted table. Right-click in the left cell and choose Table Properties from the pop-
  up menu. Set the cell width = 30 % of table. Hit OK. (Hint: Lesson 6)




http://www.ed.uiuc.edu/courses/ci235/tutorial/composer/nc8_example.html                              1/12/2004
8: Hands-on: Creating your ePortfolio home page                                                    Page 5 of 8




  7. Likewise, set the width of the right cell as 70 % of table.

  8. You'll type some text into the cells of the table. However, to reduce your frustration, click here to
  learn how to get around in a table.



  9. In the left cell, type your name or other appropriate title for this Web page. Format the title as you
  wish, including font, size, color, alignment, etc. (Hint: Lesson 3)

  Note:
  In a table, sometimes it is hard to see where the cursor is. You have to look very carefully to locate
  the blinking cursor.

  10. In the right cell, type the menu items (Curriculum Vita, Teacher Education Program Courses, etc.)
  as showed at the top of this page. Notice that there is a blank line between two items. Format the
  text, including font, size, color, etc.

  . 11. We want to insert a tiny image beside each item. Place the cursor on the left side of "Curriculum
  Vita."




  12. Then click the     button. Locate and choose the image file called "pen_papr.gif" (You should
  have downloaded this image). (Hint: Lesson 7)




http://www.ed.uiuc.edu/courses/ci235/tutorial/composer/nc8_example.html                             1/12/2004
8: Hands-on: Creating your ePortfolio home page                                                  Page 6 of 8




  13. As shown below, set the Solid border as 0 and set a 10-pixel space to the left and right of the
  image. Also, it is a good practice to offer alternate text for the image, for example, "pen_paper
  bullet".




  14. Hit OK.




  15. You don't have to insert the same image again and again. Just use the copy-and-paste method to
  do the rest. Specifically, click on the "pen_paper" image. A border will appear around it, indicating
  that you have selected it. Click the Copy button to copy the image Place the cursor on the left side of
  "Teacher Education Program Courses." Finally, hit the Paste button. Likewise, paste the image to the


http://www.ed.uiuc.edu/courses/ci235/tutorial/composer/nc8_example.html                           1/12/2004
8: Hands-on: Creating your ePortfolio home page                                                    Page 7 of 8

  left of every menu item.

  16. We want to put a horizontal line below the table. To do this, place the cursor right below the table


  and hit the        button.

  17. You will see a horizontal line. Move your cursor on the line until it changes its shape to a double-
  headed arrow. Right-click on the line and choose Horizontal Line Properties.




  18. You will see the following dialogue window. Set the height of the line as 2 pixels and width as
  90% of window as shown below. Also, align the line to the center.




  19. Add a 1x1 table below the horizontal line. Align the table to the left. Again, set the border as 0
  pixel. Also set the width of the table as 80 % of the window. (Hint: Lesson 6)




  20. In the table, type your e-mail address and align it to the right. Make the e-mail link as



http://www.ed.uiuc.edu/courses/ci235/tutorial/composer/nc8_example.html                             1/12/2004
8: Hands-on: Creating your ePortfolio home page                                                 Page 8 of 8

  mailto:your_e-mail_address. (Hint: Lesson 4)

  21. Finally, make the following links. (Hint: Lesson4 )

          a.   Curriculum Vita --> vita.html
          b.   Teacher Education Program Courses --> coursesliist.html
          c.   Philosophy, Standards, Projects, & Lesson Plans --> psplp.html
          d.   Favorite Educational Links --> links.html
          e.   Personal Interests --> Your personal home page if you have one.

  Note:
  If you have not downloaded the above files, go back to the top of this page and follow the instructions
  to download these files to your disk.

  22. Save your work and you are done.



                                                                                             Back to top



                        Prev                  Tutorial Home                   Next




http://www.ed.uiuc.edu/courses/ci235/tutorial/composer/nc8_example.html                          1/12/2004
9: Using Templates                                                                               Page 1 of 2


                 Lesson 9: Using Templates                                             Go to
    Prev                                                                                          Next

                           In this lesson: Concepts | Working from a Template




  In the previous lesson, you learned how to build your ePortfolio home page from a blank page. Yet,
  sometimes it is troublesome to create a Web page from scratch. In this lesson, you will learn an
  easier way to compose Web pages -- using templates. Specifically, you need to (1) open the
  templates you downloaded in Lesson 8, (2) input your information into the templates, and (3)Make
  the links when needed



  Concepts

  In the previous lesson, you created your ePortfolio home page. Except for the link to your personal
  interest page (if any), there are four links: one to your curriculum vita; one to Teacher Education
  courses; one to your philosophy of education, projects, and lesson plans; and one to your favorite
  educational links. You will be working on these four pages here. The relationship among these four
  pages (again, not including your personal interests page) and the ePortfolio home page is like this:




                                                                                               Back to top




  Working from a Template


  Click on the       button. You will be prompted to choose a way to create the new page.


http://www.ed.uiuc.edu/courses/ci235/tutorial/composer/nc9_template.html                          1/12/2004
9: Using Templates                                                                                  Page 2 of 2




  Choose From Template. You will be prompted to choose a template as shown below. Click Choose
  File button, locate and pick up the file "vita.html," and click OK.




  Now all you have to do is change the information to yours. Isn't it simple? Make sure you change the
  hyperlinks as well. Delete the unused part of the template.

  Note:
  If you use the Delete or Backspace key to delete a hyperlink, you won't remove the link completely.
  Thus, if you type new text to this spot, it appears blue and underlined, indicating that it still keeps the
  hyperlink you tried to get rid of. Therefore, you should remove the link before you delete its text.

  Similarly, you can follow the above procedure to create your pages about "Teacher Education
  Program Courses ," "Philosophy, Standards, Projects & Lesson Plans, " and "Favorite
  Educational Links." After you have done with all the pages, you have to test them to see if they look
  right and work well. Use Internet Explorer to test your pages as well. You may also want to test them
  in a different machine (Macintosh, bigger/smaller screen, etc.).

                                                                                                 Back to top


                       Prev                    Tutorial Home                      Next




http://www.ed.uiuc.edu/courses/ci235/tutorial/composer/nc9_template.html                             1/12/2004
10: Publishing your web pages                                                                 Page 1 of 10


             Lesson 10: Publishing Your Web Pages                                     Go to
     Prev                                                                                        Next

                  In this lesson: Concepts | Using FTP | Flush Cache | Other Operations



  In the previous lesson, you learned how to create Web pages form templates. In this lesson, you will
  learn how to create a Web directory in your CCSO account and send your files into this particular
  directory to publish them. This is the most exciting moment, isn't it?



  The Concepts

  So far, the Web pages you have created are stored in your disk. They are not yet to be seen by your
  friends and the public on the Internet. To publish your Web pages, you have to use FTP programs to
  send them to the server. A server is a system (including hardware and software) that handles
  requests for data, e-mail, file transfers, and other network services from other computers (Here at
  UIUC, you will probably send them to the server called "students.uiuc.edu"). The server will send your
  Web pages and other objects to the users (clients) upon request so that they can view your pages. To
  simplify, just imagine that there is a computer in CCSO that acts as a server and provides network
  services. The relationships among your computer, servers, and clients are illustrated below.




  Every registered student of UIUC has an account in the students.uiuc.edu server. Besides the e-mail
  service, this server allows you to send (upload) your Web stuff and publish them on the World Wide
  Web.

  However, for security reasons, Web pages on CCSO machines must be located in a subdirectory
  named public_html beneath your home directory. You have to create this particular directory if you
  don't have it. Moreover, every time you send new documents to public_html, you have to "set


http://www.ed.uiuc.edu/courses/ci235/tutorial/composer/nc10_publish.html                        1/12/2004
10: Publishing your web pages                                                               Page 2 of 10



  permissions" which allows your new pages to be view on the web.

                                                                                           Back to top




  Using FTP

  1. First, open an FTP program.

        A. If you are using a PC at a CCSO site, choose Start --> Network Services --> FTP




        B. If you are using a PC at ICL (Room 10 Ed), choose Start --> Programs --> WS_FTP
        LE --> WS_FTP LE.
        C. If you are using your PC at home, choose Start --> Programs --> WS_FTP LE -->
        WS_FTP LE

        Note:
        If, unfortunately, you do not have the WS_FTP LE program installed on your own
        computer, just lick here to download WS_FTP LE. Double-click the downloaded file
        ws_ftple.exe to install the program.

  2. Once the FTP program is launched, you'll see a window something like this:




http://www.ed.uiuc.edu/courses/ci235/tutorial/composer/nc10_publish.html                      1/12/2004
10: Publishing your web pages                                                                   Page 3 of 10




  3. Log on to the server.

  Type students.uiuc.edu as Host Name/Address. Choose UNIX (standard) as Host Type. Type your
  netID and password and hit OK to log in. If you are using a PC in the lab, do not check Save Pwd.
  Otherwise, other people can get access to your account when they use the same PC.

  If you are quite sure about your password but have trouble logging into the server, you may need to
  contact CCSO Help Desk.

  4. Once the program is open, it should look something like this:




  5. The files on your left are the files on the computer you are working on. The files on your right are
  the files on your student account on the server (the diagram above shows the files in the home
  directory). If you do not have the directory named "public_html" on your account, you have to
  create it.


http://www.ed.uiuc.edu/courses/ci235/tutorial/composer/nc10_publish.html                          1/12/2004
10: Publishing your web pages                                                                    Page 4 of 10




  6. To create the "public_html" directory, click on the MkDir button on the right hand side. When
  prompted to enter the name for the directory, type "public_html" in the box and hit OK.




  7. Now that you have the "public_html" directory, you need to set permissions for this directory. To
  do this, first launch telnet. Then connect to students.uiuc.edu and log in. If you are using a PC at
  home, click here for different instructions.

  8. At the menu prompt, type U to go to the UNIX Prompt.




  9. You are now at your Home Directory. The $ sign is the UNIX prompt, waiting for you to enter a
  command.




  10. Type webperm and hit <enter> (webperm = web permission). Wait for the system's response.
  If no error occurs, then the permissions for the directory are set. Do not close telnet. We will need it
  later.




http://www.ed.uiuc.edu/courses/ci235/tutorial/composer/nc10_publish.html                            1/12/2004
10: Publishing your web pages                                                                    Page 5 of 10




  11. Go back to WS_FTP LE. Open your "public_html" directory by double-clicking on it. You will put
  ALL of your web related files and images in this directory.




  12. Before uploading, you need to locate your files on your computer (left side). Use the green arrow

  button      to move around to locate files. Double-clicking on this arrow will move you to the upper
  directory. If you store your files on the Desktop, you have to double-click on the green arrow button

      several times until you get to c:\ (the root directory of the c drive). Then double-click on the
  directory called "WINDOWS" (you may need to scroll down). Finally, double-click on the "Desktop"
  directory. On the other hand, if you keep your files on a floppy disk, scroll down to find the -a- drive
  and double-click on it to open it up.




http://www.ed.uiuc.edu/courses/ci235/tutorial/composer/nc10_publish.html                            1/12/2004
10: Publishing your web pages                                                                     Page 6 of 10




  13. Now you are ready to upload your files to the server. Make sure you have your public_html
  directory open on the right and your web files on the left.


  14. Notice the two arrows in the middle? The left arrow       downloads (retrieves) files from your

  student account down to your computer. In contrast, the right arrow         uploads files from your
  computer to your student account on the server.

  Also notice three options near the bottom. When transferring HTML files via ftp, be sure to set the
  transfer mode to ASCII. When transferring image, sound, or other binary files, be sure to set the
  transfer mode to Binary. If you are sending both HTML and image (i.e. gif and jpg) files, or if you are
  not sure, just check on Auto. Click here for more information.


  15. To upload your files, choose the file by clicking on it. Then hit the  button to upload it to the
  server. Upload everything -- html files, images, etc. -- related to your web page. Do not just upload
  html files. Remember, images or other objects on a html document do NOT belong to the document.
  Rather, the html document contains only the references to the images or objects. Therefore, you have
  to send all the related images or objects together with the html document.

  Helpful hints:

        To upload multiple files at the same time: (1) hold down the Ctrl key on your keyboard and
        click each file, or (2) hold down the Shift key to choose a group of adjoining files (play with it a
        little bit).
        To upload an entire folder: highlight the folder and click on the transfer arrow. Remember, it's
        best to have 'Auto' set when sending groups of mixed HTML and picture files.




http://www.ed.uiuc.edu/courses/ci235/tutorial/composer/nc10_publish.html                             1/12/2004
10: Publishing your web pages                                                                  Page 7 of 10




  16. Your files should be stored on your account now. However, they are not made public yet. (If you
  try to open your page at http://www.students.uiuc.edu/~your_netID/eport.html , you will get the
  message "Forbidden").

  17. Set permissions for access to your webpage files: ( Earlier you set the permissions for the
  directory. This time you will set permissions for the files you just uploaded).



   A. Go back to telnet. (If you closed it, launch telnet again. Connect to students.uiuc.edu and log
         in. Type U to go to the UNIX prompt).
    B.   At the UNIX shell prompt, type webperm and press <enter> to set the correct permissions for
         your files in your directories. Run the webperm command anytime files are added to the
         public_html directory. If you fail to do so, they are not accessible to the public.




http://www.ed.uiuc.edu/courses/ci235/tutorial/composer/nc10_publish.html                            1/12/2004
10: Publishing your web pages                                                                 Page 8 of 10


  18. If you get an error message something like "group execution is not allowed", do the following:

        Go back to WS_FTP.
        Click once to select the public_html directory.
        Right-click on the selected public_html directory and choose chmod(UNIX) from the pop-up
        menu.
        Check Execute under the Group menu and hit OK.

  19. Go to the Web browser (Netscape, Explorer, or others), type
  http://www.students.uiuc.edu/~your_netID/filename (including .html) in the location box (for
  example, http://www.students.uiuc.edu/~rchen4/eport.html). You should be able to view your pages
  on the Web now. You may want to add it to your bookmark.

  Reminder: Run the webperm command anytime files are added to the public_html
  directory. If you fail to do so, they cannot be seen on the Web.

  20. When you are done with uploading, click Close at the bottom of the screen then click Exit.

                                                                                             Back to top




  Flush Cache:
  If you make some changes to your web page and want to update the file, make sure to hit the
  Refresh button to bring up the latest version of your files (WS_FTP will not know you have made
  changes to your files unless you hit the Refresh button). However, when you use the browser
  (Navigator) and try to view the change you made, the prior version of your images remains in "cache"
  and the browser is so lazy that it will only retrieve images from the "cache" without noticing the
  changes you made to the images. Therefore, you need to "flush cache" (repetitive memory). This is
  accomplished by:

    1. Choose Edit --> Preferences... from the menu
    2. On the far left, click on the "+" sign beside Advanced to open the submenu.




http://www.ed.uiuc.edu/courses/ci235/tutorial/composer/nc10_publish.html                           1/12/2004
10: Publishing your web pages                                                                    Page 9 of 10

        3. Choose Cache. Click on the "Clear Memory Cache" button and hit OK to confirm.
        Likewise, click on "Clear Disk Cache" button and hit OK to confirm.




        4. Click OK to close the window.
        5. On your browser, click Reload button.

                                                                                               Back to top



  Other Operations

  Downloading (retrieving) files

        Downloading is just the opposite. Select the file you want to download from the right side

        of the FTP window and hit the left arrow      to copy it to your own computer.

  Updating your page

        If you want to update a file, you can simply upload your modified file and it will overwrite
        any existing files with the same name on the server . Important: Before uploading, hit the
        Refresh button to bring up the latest version of your files.

  Deleting files

        Just highlight the file you want to delete, and hit the Delete button. To delete a directory,
        you have to delete all the files contained in the directory before deleting this directory.



http://www.ed.uiuc.edu/courses/ci235/tutorial/composer/nc10_publish.html                           1/12/2004
10: Publishing your web pages                                                                Page 10 of 10

    Renaming files

         Just highlight the file you want to rename, click on the Rename button, and enter the
         new file name.

                                                                                             Back to top



                       Prev                   Tutorial Home                    Next


.

.




http://www.ed.uiuc.edu/courses/ci235/tutorial/composer/nc10_publish.html                         1/12/2004

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:9
posted:12/17/2011
language:English
pages:58