Free Web Site Templates Fashion - DOC

Document Sample
Free Web Site Templates Fashion - DOC Powered By Docstoc
FrontPage 2003

       Andrea Garzanelli
            (619) 644-7385
                          Table of Contents

Create a web site……………………………………………………………….                                     3
Enter and format text………………………………………………………….                                   4
Add graphic elements…………………………………………………………                                     6
Create additional pages………………………………………………………                                   8
Insert a syllabus………………………………………………………………..                                    8
Create hyperlinks………………………………………………………………                                      9
Preview in Browser……………………………………………………………                                      12

The items that are bolded throughout this tutorial indicate buttons and menu
options that you will select in the FrontPage interface.

Create a Web site
   1. Open FrontPage.
   2. On the File menu, click New.
   3. In the New task pane, under New Web site, click the type of web site that
      you want to create. For this workshop we will use the One Page Web site
      template. This will create a new web site with a single blank page.
   4. Select More Web site templates.
   5. Select One Page Web site.
   6. Specify the location of the new web site. Select Browse. Create a new
      folder on the X drive. Then select Open and OK.

The One Page Web site creates a new web site with a single blank page. That
page is named index.htm. This will be the home page for your web site.

The home page is the front door to your web site. It provides information about
the content or subject matter of your site. The home page also contains links to
other pages in your web site. Useful types of information to include on your home
page would be your name, courses, office hours, phone number, email address
and a photo.

Enter and format text
You can format text in Microsoft FrontPage as you would using a word
processor — to add visual organization, emphasis, and structure. You can
change the font, size, style, color, spacing, and vertical position of text. You can
also control spacing and indentation, add bullets and numbers, and set
Just as you would insert text in a word processing program insert your cursor
where you want the text to display. Start typing.

Format Headings

Format Headings are used to make a headline of an
HTML page larger and bolder than the rest of the
text - just like in the tabloids. Headlines can range in
size from heading 1 (quite large) to heading 6 (quite

To convert text to a heading:

   1. Select the text.

   2. Use the style drop down menu.
   3. Select a heading style.

Line Breaks vs. Paragraph Breaks

When you press the Enter key in FrontPage, you will note that it drops two lines
down, not a single line as it would in most other text editing products.

This happens because, by default, the HTML tag used in this case is the
paragraph tag. FrontPage assumes that you mean to start a new paragraph and
formats any tags accordingly.

If you don’t want to start a new paragraph and simply want to move to the next
line, press the Shift key when pressing Enter and FrontPage will create a single
line break.

Fonts and the Web

Technically you could select whatever font you’d like to see on your web site.
However, there are reasons that you choose your font carefully. You must
consider the fonts that might be installed on the user's computer. The user must
have that font installed on his or her computer in order to display the page as you
intended. If the user does not have that particular font, their computer will use a
default font. There are several fonts that come standard with the computer.

Serif vs. Sans-serif

Typefaces are often described as being serif or sans-serif (without serifs).
A serif is a small decorative line added as embellishment to the basic form of a
character. Serif fonts include Times Roman, Courier, New Century Schoolbook,
and Palatino.
A sans-serif font does not use serifs. Popular sans-serif fonts include Helvetica,
Verdana, Arial, and Geneva. According to most studies, sans-serif fonts are
easier to read on a computer monitor.

This is a serif typestyle:   This is a sans-serif typestyle:

Horizontal Lines
You can use a horizontal line to separate text or to add an accent. After you add
a horizontal line, you can modify its properties to change its width, height,
alignment, and color.

Insert a horizontal line:
   1. Place the insertion point where you want to insert a line.
   2. On the Insert menu, select Horizontal Line.
   3. To modify the appearance of the horizontal line, double-click the horizontal
      line, and adjust the properties.

Numbered and Bulleted Lists

Content on a web page is often presented in a list format. This format lends itself
well to the brevity normally associated with web content and provides a way to
present content in an orderly fashion.

As with most other Windows programs, the number and bullets buttons in the
formatting toolbar will let you present content in list format.

Add Graphic Elements
If you used tastefully graphic images enhance both the content and the
presentation of your web page. FrontPage provides a considerable library of
images to choose from. If you don’t find what you are looking for in the Microsoft
clip art collection, you are free to insert a graphic file of your choice.
Insert Clip Art:

   1. Select Insert, Picture, Clip Art.
   2. Enter your search term in the text entry field under Search for.
   3. Press enter or select Go.
   4. Select the image of your choice.

Insert your own graphic image:

   1. Select Insert, Picture, From File.
   2. Browse your computer to locate the image.
   3. Select the image and select Insert.

Picture Properties

Double clicking on any image in FrontPage will open the Picture Properties
dialog box. The Appearance tab of the dialog box lets you choose the layout and
size of the image so that it works specifically in the format you want it to. Keeping
the aspect ratio is vital if you don’t want your image to appear distorted. You can
change the wrapping style so that your text wraps around the image. You can
also add a border to your image

Alternative Text

Good web design dictates that you set an alternative text
description for all of your graphic files so that readers
without the ability to view graphics will know what you
meant with the placement of the graphic.

To add alternative text:

   1. Double click on the image to open the Picture Properties dialog box.
   2. Select the General tab.
   3. Look for Alternative representations.
   4. In the Text field type a description of your image.
   5. Select OK.

Saving Your New Image

Saving your web page will automatically save any images found on the page. It
will allow you to choose what you want to do with these files in the Save
Embedded Files dialog box that will appear after you save the page. You can
select any image in the list and rename the file or change the folder that the file
will be saved to.

Create Additional Pages
   1. Select the new page icon      .
   2. Type the title of this page at the top. Ex: Assignments.
   3. Now select File, Save or use the save icon       .
   4. Notice that FrontPage automatically uses the text that you typed as the file
      name. For this example the file name would be assignments.htm and the
      Page Title is Assignments. File names should be lower case with no
      spaces. If you want to separate words use the underscore character. Ex:
      class_assignments.htm. Page titles can be upper and lower case and may
      also contain spaces.

Insert a syllabus
Most instructors have already created their syllabi in a word processing program
such as Word. It is not necessary to retype the document. You can insert the file
into FrontPage.

   1. Create a new page and save it as syllabus.htm.
   2. Select Insert, File.
   3. A Select File dialog box will display.
   4. Change the Files of type to All Files. See example.

   5. Browse your hard drive or floppy disk to locate your syllabus in Word
   6. Select your syllabus file and select Open. The syllabus is pasted onto
      your web page.
   7. Select File, Save.

Create Hyperlinks
A hyperlink is an element on a web page that links to another place in the same
page or to an entirely different web site. Hyperlinks are the most essential
ingredient of the World Wide Web.

There are four types of hyperlinks. An email hyperlink opens up the user’s email
program with a blank email with the email address defined in the To: address. An
internal hyperlink is a link to a web page within your web site. An external
hyperlink is a link to an external web site. Lastly a bookmark is a hyperlink to a
certain area within a web page.

Insert an Email Hyperlink:

   1. Type your email address. Ex:
   2. Press Enter.

Insert an Internal Hyperlink:

   1. Select Insert, Hyperlink or use the Insert Hyperlink icon
   2. The Insert Hyperlink dialog box will be displayed.
   3. Select the Web page that you would like to hyperlink to.
   4. Notice the Text to display and Address fields. In some instance you may
      need to modify the Text to display.
   5. Select OK.

Insert an External Hyperlink:

   1. Select Insert, Hyperlink or use the Insert Hyperlink icon
   2. The Insert Hyperlink dialog box will be displayed.
   3. For this example we will use Sign On San Diego’s web site.
   4. Type the URL into the Address field.
   5. Modify the Text to Display to display the title of the web site.
   6. Select OK.

Create a Bookmark

   1. Select the text you would like to bookmark to.
   2. Select Insert, Bookmark.
   3. Give your bookmark a name. Ex. Assignment1
   4. Select OK.
   5. Select File, Save or use the Save icon        .

Once the bookmark has been created the second step is to create a hyperlink to
the bookmark.

   1. Select the text that you want to hyperlink.

   2. Select Insert, Hyperlink or use the Insert Hyperlink icon
   3. Select the Bookmark button.
   4. Select the appropriate bookmark.
   5. Select OK.
   6. Select OK again to close the Insert Hyperlink dialog box.

Preview in Browser
Although the Preview view is a good option for viewing a considerable amount of
your design elements, you will sometimes need to check your site in a browser.
The Preview in Browser option in the File menu lets you preview the open page
on any browser installed on your system.

   1. Select File, Preview in Browser or select the icon
   2. Test your links to make sure they work properly.
   3. Verify that all elements are displaying as intended.


Shared By:
Description: Free Web Site Templates Fashion document sample