Front Page Web Templates - PDF - PDF

Document Sample
Front Page Web Templates - PDF - PDF Powered By Docstoc
					                                   Front Page 2003
                                       Basics

The Front Page screen:
A web site is a collection of documents and images designed to be viewed by a web
browser such as Internet Explorer or Netscape (new name Mozilla.) Web sites are
usually stored on web servers, which provide worldwide access to the content. It is,
however, possible to create disk based web sites either during the creation process or
even for distribution on a CD etc.

Opening a web site:
To establish the connection to your server
account and start creating pages, simply
click on File>Open Site




This operation will give you a list of your folders and files that are stored in your account.
When a web account is created, two folders are automatically placed in that area.
_Private folder is for files that hold files that you do not wish others to have access, such
as data files from on-line forms etc.
Images folder is for any pictures you may include in your site. When saving a file with
embedded images, FrontPage allows you to place them in this folder for better account
organization.
The user can create folders
as necessary by right
clicking at the root and
choosing New>Folder from
the pop up menu




Note: Please remember that the folder name will be a part of the URL for your web site
and thus you should follow file naming conventions in your folder names. Folders can be


                                                                                            1
converted to sub-webs to facilitate separate parameters such as themes, security options
etc.
To convert a folder into a sub-web simply
right click on the folder name and selecting
the Convert to Web option from the pop up
menu. This operation takes a while.


Creating a web page:
Before starting the actual development of your site, you should take time to gather all the
materials (text, pictures, addresses of links etc.) Ask yourself some basic questions:
Why is this site needed? Who are the potential viewers? What are you trying to
communicate? What do you want your visitors take away, when they visit your site?
Other considerations should include the technologies your audience will likely to have,
such as connection speed; latest plug ins; up-to-date browsers; newer computers. You
also need to develop an outline of your site to determine the starting point, additional
pages and navigation.




Once the above issues have been
addressed, and you are ready to start,
choose file>new or click on the new page
icon. Front Page provides templates and
wizards for your convenience. They are
located on the right hand side of the screen.
You can choose one of the templates and
replace the text or start with a fresh page
and create your own web.




                                                                                           2
Page properties:

You can change the properties of your page by right clicking anywhere on the page and
bringing up the Page Properties menu.




This menu shows where your page is saved, if it is, and allows you to add a page title.
Page titles are different than the file name by which the document is saved. Titles appear
at the top of the menu bar of the browser (title bar) in which your visitors are viewing this
page. Title also serves as the identifier of your page to various search engines such as
Google.




                                                                                           3
The formatting tab allows you to change the colors in your page as well as inserting a
background picture.




                                                                                         4
Front Page allows
you to change the
margins of your page
as well as creating
styles and other
effects through the
Advanced Tab in the
page properties
menu. We will
explore styles and
Cascading Style
Sheets in a different
session.




Design Elements:
                                              When starting a new page, FrontPage opens the
                                              task pane that contains several design layouts
                                              from which the designer can choose. You can
                                              also create your own layout, if none of the
                                              available options are suitable.




Entering and Editing Text:
Front Page text editing and formatting menus are very similar to Microsoft Word. This is
the easiest part of the web page creation, provided you can think of what to write. If the
formatting toolbar is not visible, turn it on by clicking View>Toolbars>formatting. To
insert special characters in your text, click Insert>symbol.



                                                                                          5
The styles (found in the upper left hand
corner of the FrontPage screen) are useful
design elements, which provide the
designer with easy formatting options.




                                              Text colors may be adjusted by using the
                                              font color button in the tool bar.




Adding Images:
To add some pizzazz to your
web site, you may want to
insert images. Images can
also be used for navigation
tools (such as buttons and/or
hyperlinks.) To insert an
image to your page, simply
choose Insert>picture>clip art
(or from file.) To create a
hyperlink from the image,
simply click on the image to
activate it and follow the
Inserting Hyperlink steps
described above.




You can use three types of images on a web page (although Front Page will allow any
type of image to be inserted.) They are:

GIF – graphic interchange format – was created by CompuServe. This file format is best
for images with large areas of solid color (due to high compression rate) such as
illustrations, logos, text as graphics e.g.




                                                                                         6
JPEG – joint photographic experts group – file format is best for photos because there is
almost no limitation on the number of colors that can be used with this file type (16.7
million colors with jpeg as opposed to 256 colors with gif files.)

PNG – portable network graphics – is the new gif. When CompuServe demanded
royalties from gif images, the png was developed.

All three of these formats are cross platform, meaning all computers and all browsers are
capable of viewing them.

Creating thumbnails:

Thumbnails are smaller sized images that bring up the actual image when clicked. They
are useful for photo galleries. Due to their smaller size, they do not negatively effect the
downloading time of your web page. You can create a thumbnail of your picture by
clicking on the auto thumbnail icon in the picture toolbar. When you select a picture in
Front Page, the picture toolbar appears                                                 at
the bottom of your screen. If it doesn’t,                                               you
can open it from the View>toolbars
menu.




You can also right click on your picture, to
                 create an auto thumbnail.




                                                                                            7
Picture Properties:


                           By right clicking on
                           your picture and
                           choosing the picture
                           properties option,
                           you will have
                           control over the
                           position and other
                           properties of the
                           image you inserted
                           in your web site.
                           Please keep in mind
                           that wrapping and
                           alignment options
                           are difficult to
                           control due to the
                           variety of browsers
                           and screen
                           resolutions. It is
                           always best to use
                           tables in your web
                           page to better
                           control the
                           positioning of your
                           images.

   The General tab in
the picture properties
  menu allows you to
enter alternate text to
 describe your image.
      This is useful in
    making your web
   page accessible to
     those with visual
           disabilities.




                                             8
                                                                  The last tab in the
                                                                  picture properties menu
                                                                  controls the video
                                                                  options such as inserting
                                                                  the vide source to your
                                                                  page as well as how it
                                                                  will be played.




Importing other documents:
A simple drag and drop operation is all that is needed to import other documents to your
web account. To make things easier on you, open the folder which contains these
documents and display it side by side with your FrontPage screen.
All Microsoft documents can be used to create web pages (.htm files.) To create an htm
file from Word, Excel or PowerPoint, simply click on the File menu within the software
and choose Save as Web Page.
Note: Documents that contain embedded elements such as a Word document with
inserted pictures, an Excel document with a chart and all PowerPoint presentations create
a folder as well as a file when saved as web pages. In order to display these documents
properly, make sure that you drag the file and the folder to your FrontPage folder list.




                                                                                          9
Creating a hyperlink:
Highlight the sentence or double click on a word to create a hyperlink, and then choose
the link icon on the standard toolbar. This action will bring up the hyperlink menu.




There are several types of links you can create:
   1. Link to another web page – type in
       the address of the page in the
       address line or select the page from
       the web by clicking on the web icon

                                                   2. Link to an area in the same page
                                                      (bookmark) –This is a useful tool
                                                      for pages that are long and causes
                                                      the reader to scroll. Choose
                                                      Insert>Bookmark at certain points
                                                      of your document. To create a link
                                                      to the bookmarks, simply select
                                                      them from the list Front Page
                                                      provides in the insert Hyperlink
                                                      dialogue box.




                                                                                          10
  3. E-mail link – type in the e-mail address
to which you wish to send the reader – This
    tool provides a feedback mechanism for
                       your readers/visitors.




Spell checking your site:
FrontPage includes spell checking tools much like Word. If you are editing a page,
Tools>Spelling menu will provide spell checking capability for that page. In the folder
list view, you can use the Tools>Spelling menu to check your entire site for correct
spelling:




Previewing your page:
At any time in the page editing process, you can preview your page by clicking on the

preview tab at the bottom of your screen.
When editing the Design tab is the active view. The split tab will show the HTML code
and the Design view in split screen so you can follow along with Front Page as it creates
the codes that make up your web page. The Code view only shows the HTML that Front
Page is creating in the background as you are editing your page. The Preview tab will




                                                                                          11
allow you to see your page as if in a browser. Your links will perform as intended in this
view.

Once you save your page, you can also
preview it in an actual browser by selecting
Preview in browser from the file menu.




Saving/publishing your pages:
If you chose to create your pages directly on the server, they will be published as soon as
you save them. Try to follow the file naming conventions for the web as these file names
will be a part of the URL for your page. If you decided to develop your pages on a local
disk, you can publish your site once you are completely ready to unveil it.

To publish a completed site:
1. In the folder menu, choose Remote Web
site in the lower left hand corner

2. Select Remote Web Site Properties in
the upper right hand corner

3. Select the appropriate destination (from
disk to server for publishing or from server
to disk for backup)


4. Push Publish Web site button




                                                                                        12
You have successfully created and published your web pages, congratulations! In
the next installment of the FrontPage 2003 series, we will consider design elements
such as table layouts and themes.




                                                                                  13

				
DOCUMENT INFO
Shared By:
Categories:
Stats:
views:21
posted:11/14/2010
language:English
pages:13
Description: Front Page Web Templates document sample