Composerwebpage by chenmeixiu


									   Making a Web Page
with Netscape Composer

                  Joyce Barrett
Part 1 adapted from a presentation by Patrick Douglas Crispen
                      on Web Page Design
          Part One:
         The Basics
  If you break Web design into its
individual components, it becomes
      a lot easier to understand.
 Three Parts of a Web Page
• The Text
  – This is simply the content you are
    sharing with your audience.
• The Multimedia
  – Usually, this is just pictures, but it could
    also include sound files, movies,
    animation, and stuff like that.
• The HTML
Creating Text or Content
        • You can use any Word
          processor or text editor to
          create content:
              • Microsoft Word
              • Notepad
           – save the document as a text file.
        • Some programs like Word or
          Publisher will convert
          documents into Web pages.
        • You can also type directly into
          an HTML editor.
              The Multimedia

For graphics use:
  – GIFs for drawings, text,
    & short animations
  – JPEGs for photos

 To help Web pages download faster:
   – Save photos at 72 dpi resolution
   – Save at the size to be used on the Web page.
             The HTML
Hypertext Markup Language (HTML)
• HTML is a formatting computer language.
• HTML tells the software (Web browser) how
  to display a Web Page.
• Formatting commands are inside the <      >
• For example, to make something bold:
  <BOLD>This text is bold</BOLD>
Netscape Composer is an HTML Editor.
  It creates the HTML for you.
Open Netscape Communicator
  –   You can see the HTML code underneath any
      Web page that is open in Netscape.
  –   Click on View Page Source
       Part Two:
     Getting Ready

It is easy, as long as you follow
        a few basic steps.
1.   Create a folder on your disk and
     name it images.
     –   Save all the images you will use on your
         Web pages into this images folder.

2.   Create another folder on your disk
     and give it a simple name.
     –   Use all lower case letters with no spaces.
     –   You will save your home page as
         index.html into this folder.
     –   The folder name will become part of the
         URL address.
3. Open Netscape, click on Communicator on
   the menu & select Composer.


     –   Select the Composer option from the Components Bar.


            A new blank page opens in Composer.
       Set Page Properties
From Menu Select Format  Page Colors
  and Properties
  6      Give Your Page a Title

Select the General
  tab and enter:
• Title of the page
• Author = your name
Click on Apply

 The title will be at the top of the Web page menu bar
   and will also become the bookmark title.
 7    Set Colors & Background
• Pick colors for text
  & background
• Use a Netscape
  color scheme
• Select an image
  for background.
• For more pages
  like this one.
 8          Save the Page
After setting up page properties:

 Save your home page as index.html in the
 Web folder you created in Step 2.
     Part Three:
 Creating the Content

What do you want to show and tell?
9            Create Text
You can type directly into Composer.
                Use any Word processor or
                text editor to create content:
                   • Microsoft Word
                   • Notepad
                 – Save the document as a text file
                   and open in Composer OR
                 – Use CTRL + C to copy and
                   CTRL + V to paste the text into
  10                Format Text
             Font size   Font color                 Alignment
                                   Bold &
Font types                           Italics
  styles                                              Indent
                                                Numbered Lists

The safest fonts to use for Web pages are
  Variable Width and Fixed Width.
Arial and Comic Sans are also often used on Web Pages.
11          Toolbar Features
         Create a link to          Insert an   Create a
         another Web site             image      table

                              Link to a specific
                              spot on a Web page    Check
Save the file & click on Preview
to see how the page will look
on the Web.
12           Insert Images
Place the cursor where you want the picture
  and click on Image on the menu.
                          Find the image file in
                           your images folder.
                          Select the text alignment.

                          (Other choices)
                          Set space around image.
                          Add or remove a border
                           around the image.
      Part Four:
    Creating Links

  Make connections to target
areas on your pages, other Web
  sites, and email addresses.
    13               Web Links
Create a Text Link
1. Type the text to identify what the link is and highlight
2. Click on the Link icon      on the Toolbar.
3. Type the path to the file
   or or copy the URL of
   your link.
4. Click OK.

Save the file and click on
Preview to test the link.
  14      Internal Links - Targets
Create a Target
1. Place your cursor where you
   want the link to go to.
2. Click on the Target icon
   on the Toolbar.
3. Give the target a name.
Create an Internal Link
4. Go to the text for your link
   and highlight it.
5. Click on the Link icon
6. Click on the target in the list.
7. Composer will put # and the
   name of the target for the link.
 15                Email Links
1. Type the name of the person or the email address in
   the Web page and highlight it.
2. Click on the Link icon     on the Toolbar.

3. Type

4. Click OK.

When the link is clicked on
the Web page, an email
message box will pop up.
          Part Five:
       Inserting Tables

Tables can help control the alignment
 of images and text on a Web page.
      16             Set up a Table
     Place the cursor where you want the table and click
       on Table      on the toolbar.
1.     Type in the number of rows
      and columns.
2.     Select Table alignment.
3.     Choose a border width or 0
      for no border.
4.     Set cell spacing & padding
      (usually 3)
5.     Set table width (how much of
      the page it will cover).
6.     Uncheck equal column widths
      to adjust automatically to
7.     Select a color or image for
      Table background if desired.
  17        Change Table Properties
 You can change the settings for all the Table, a Row, or
    an individual Cell.
1. Click inside the Table. Go to
   Format, then Table Properties OR
2. Put the cursor inside the Table,
   Cell, or Row you want to change
   and right click.
3. Select Table properties.
4. Click on the correct tab – Table,
   Row, Cell and make the changes.

You can select a background
color for individual rows
or cells.
18           Edit a Web Page
 To make changes to your Web page later or to edit
 any Web page on the Internet:

                      1. Open the page in Netscape
                      2. Click on File Edit Page

                     The page will open in Composer.
Look what you can do now.
         Have fun!

To top