Practical work in the frontpage editor. Creating Web Pages Using FrontPage

Goal of the work: learning the basics of working with the editor MS Front Page.

Below in Fig. 18 shows the structure Web-site

Rice. 18 - Personal website layout

Step 1 - Create a new site.

1 Run Front Page and select a menu item File – New – Website , and then the site template - One page site. In field Specify the location of the new site specify the folder in which the site will be located, for example D:\students\545\web. Then you should press the button " Ok" Extreme left panel Folders shows the folders and files included in the site: html-pages, drawings, etc. Currently, the site contains only one page - index.htm. If you select one of the pages with the mouse in this panel, it will be open for editing.

2 Working with the page is possible in one of four modes:

-constructor- the page is being edited;

- with division– the window is divided into two parts: in one, the HTML code is displayed, which can be edited, in the other, you can work in design mode;

- code- (HTML) - can be controlled generated code pages and make changes;

- viewing - the page is shown as it would be displayed by the browser.

3 Switching to mode is done using the tabs at the bottom of the panel. To complete the work, we will mainly use the Design mode.

Step 2 – Enter the text of the main page (the page structure is shown in Fig. 12. The page text is developed independently).

1 To enter data, create a table by selecting the menu item Table > Insert, or using the corresponding icon on the toolbar. Type the page text. For the page title in the field Style at the top left of the screen Front Page select style Heading 1 . Figure 19 shows the main page of the website.

Rice. 19 - Website Home Page Layout

2 After you have entered text into the table, define the table properties. Place the mouse cursor inside the table, click the right button and in the paragraph Table properties define for field Alignment meaning Center . Install checkbox in field Set width And switch to parameter - In percentages, and set the value - " 80 " This means that the table will be located in the center of the browser window and occupy 80% of the window width.

3 In a group Borders You can determine the size and color of the frame. If you want the table to have no visible frame, set the field to 0. Group Background allows you to set the background for the table.

4 To define page properties, select from the context menu Page properties and on the tab Are common change the field Name – to the text “Home page”. Now this value will be reflected in the title of the browser window when viewing the page. It is imperative to correct the page language; this is done using the tab Language . Set the encoding ( Set of signs) - Cyrillic and language Russian.

5 Go to the tab Formatting . If you check the box Background image , then pressing the button Review , you can select a picture for the page background.

6 Group Colors allows you to set the default font color, default background color, link colors, visited and active. Change these settings.

7 To design the title as Creeping line select from menu View performance Page and click the button at the bottom of the document window Constructor. Click where you want to insert the ticker, and then type and highlight the text you want to display as a ticker. On the menu Insert select team Web-component . In Group Component type click the button Dynamic effects . In Group Selecting an effect double click the icon Ticker . Set the ticker parameters.

8 Save the pages. If the program asks you where to save the pictures: save the pictures in the folder Images . Use the button to select a folder Change folder.

1 To make a link to an existing page, you need to select it from the list. You can also define a place inside the page (bookmark) to which the link will point. If this place is inside the current page, then fill in the field URL not necessary, you should select a bookmark in the field Bookmark (the bookmark must be previously created). If you want to create a link to a bookmark on another page, you must first select that page and then select the bookmark.

2 Create links to other pages on the site. To do this, select a section in the table of contents and create a link by clicking the create hyperlink button on the toolbar, or selecting the menu item Insert > Hyperlink .

4 Using the panel Folders , return to home page index.htm and create a link to the next page of the site. Save it . As a result, in File list and folders, all pages included in the site will be reflected.

Lesson
plans
by program
Front Page
Teacher: Zabelina M.V.
1

Topic: Front Page 2003 program interface. Menu
programs. Creating a website using the wizard.
Target:
Introduce the concept of a Web page, teach students how to build a Web page
pages;


During the classes.
1. Organizational moment
Communicating the topic and purpose of the lesson
2. Explanation of a new topic
2.1 Introduction
A website (Web node) is a collection of related sites related to each other.
the meaning of Web pages and files. Websites are usually dedicated to some
specific topic and contain information related to an individual
or company. In the Front Page program there are so-called wizards
(wizards), which allow you to create a website step by step, and templates
(templates), which are embedded pages containing
necessary formatting to create and customize the ones you create
pages. Wizards and templates allow you to create various types of sites.
Each site has one special page called
home, or main (homepage). All visitors to your site first
get to this page. By clicking on one or another hyperlink,
users will be able to access other pages on your site, or even
pages of other sites.
A hyperlink is text or an image on a Web page that
click that takes you to another Web page or site.
The site is hosted on a computer server that provides access to
pages to site visitors. With Front Page you can create
site directly to file system your computer, and then when
it will be ready, publish it on the server.
2

Creating web pages requires a person to know the hypertext language
markup (HTML -
Hypertext
Markup
Language). Program
Front Page allows
any user
even
HTML
illiterate, tell
make yourself known to the whole world,
using
unlimited carts
Internet capabilities.
What are the technical
possibilities
this
amazing
programs? With her
With our help you can create your own website based on a ready-made template
or under the strict guidance of a master. Templates and wizards create
individual pages themselves combine them into a site, creating transitions between
them, and at the same time do not bind your initiative, because provide
the ability to insert texts, images, hyperlinks into pages.
The undoubted advantage of the wizard is that it creates pages with
a ready-made set of elements that, if necessary, you can
format as you wish.

When you launch Front Page for the first time, you will see a window very
resembling Word or spreadsheet windows
Excel. This is not surprising, since all these programs are included in one
plastic bag office programs and therefore have a similar interface.
The FrontPage program window is divided into three parts, each
which allows you to manage your website in different ways.
Folder List – View Mode Panel – allows you to easily
switch between viewing the website structure
and its pages.
FrontPage Folders
After installing FrontPage, on your computer's hard drive
The MyWebs folder is created. By default, the files will be saved in this folder.
all the websites you create in FrontPage. Each site
saved in separate folder, nested in the MyWebs folder.
When creating a new site, at least three are created
additional folders in which files and pages of the new
site.
home
folder
The default folder where your Web files are stored
pages, images, and Java classes
3

Private
Images
This folder is where FrontPage places the files it needs to
organizing and managing your website. Under no circumstances
circumstances should not be removed or modified
contents of this folder
In this folder you can optionally store graphic
images that are used on your site. If
There are a lot of images, it is best to store them in this
folder so as not to clutter the main one
In addition to these three folders, you can create any others in which you
you will place certain groups of files.
2.2 Creating a web page from scratch.
The easiest way to create your own website is to use
templates and masters.
1. Let's take a team
File, New.
2. Appear on the right
panel in which
We
must

choose:
Other
web template
nodes
3. In the appeared
window select:
Empty web site.
By
button Browse, for
in order to determine the location of our web site.
4. Click

Attention! Look at the sequence of the fourth step:
4

1.
2. In this window you need to select the location of the web site. For example, click
according to My documents
3. You can use the button
create your own folder (i.e. enter a name
from the keyboard and press OK).
Then press the OPEN button!
4. Left-click 2 times
mouse into the window above
buttons browse and enter the name of the web –
node (you must enter the name after
the very last line \.)

For example:
C:\My documents\Ivanova\My
website

The name of our folder in which to store
web site
Name of our site
5.
Click OK.
5

We continue to create the site. Now we need to create our pages
site. To do this, let's switch to transition mode with the command: View, Transitions.
7. Right-click on the empty screen
click the mouse once and in the menu that appears
select the New command, Top
page.
8. A page called Home will appear.
9. All other pages are created
right click on home
page(!), using the command Insert, page
10. Rename the pages. Click on the desired page 1 time, right book. mice
and in the menu that appears, select the Rename command.
11. Let's start designing pages for
To do this, click on the main (home)
page 2 times with the left mouse button.
This is what you got:
12. Now you need to install general
borders.
General boundaries are page boundaries,
which are displayed equally on everyone
website pages. However, at the same time you
it remains possible to create boundaries only
for one website page so that it
was different from others.
Open the Format menu and click
command name "Shared Boundaries". On the screen
A dialog box will appear as in the figure.
In this window, check the boxes next to the names of the desired boundaries (Top,
Enable navigation buttons, Left, Enable navigation buttons). At
This should be borne in mind that on the upper, left and right boundaries you can
place navigation buttons on the website. The program will do it
yourself if you check the appropriate box.
What to do if in the Format menu the command General Borders
not available:
6

Service,
1. Page options
2. Development,
3.
Put
tick
opposite the words General
borders
4. Click OK
This is what your page will look like if you check the boxes next to
words: From above,
Enable navigation buttons,
On right,
Enable navigation buttons.
.
There is no need to tick the Right and Bottom checkboxes, as this will clutter
your village
Now you need to enable navigation buttons:
Click once on the right book. mouse on words: Change the properties of this panel
to display hyperlinks on it.
In the menu that appears, select the command: Properties Link Bar.
This is what the screen will look like:
Place a dot next to the words: Homepages and click
Go to other pages and do the same if you don't have
buttons with hyperlinks.
OK button.
Switch to others
your site
carried out with
List panel
(located on the left
your site)
If this panel
View, Folder List
pages
with help
folders
sides
No:
7

Click on the desired page
will take you to this
page
OR:
At the top of your site
there are several tabs that
show
what pages
your site you visited.
Transition to other pages of the site
can be done using these tabs.
Sometimes on these tabs you can see the page title and an asterisk,
for example: index*. This means that the page was not saved. Take advantage
command File, Save, and this asterisk will disappear, though at the slightest
If anything changes on your page, the asterisk will appear again
Deleting a page:
Let's go to transition mode (View, Transitions), click on the unnecessary
page 1 time ex. book. mouse and select the command in the menu that appears
Delete.
In the window that appears, select the command Remove page from the website
Saving a web site.
After you have created a website, you need to save all its pages.
To do this, go to each page of your site and go to the File menu
select Save.
3. Practical work
Reopen the program.
Create your website that contains 4 pages. Name these
pages by seasons.
Include all links
4. Lesson summary
How do I enable shared boundaries?

How to rename pages?
How to delete pages?
Topic: “Editing a website. Adding text."

programs;
Continue working on studying information technology;
Cultivate interest in the subject
During the classes.
1. Organizational moment
Communicating the topic and purpose of the lesson
3. Checking homework.
What is the Front Page program for?
8

How do I enable shared boundaries?
What should I do if the Shared Boundaries command is not available?
Create your website which contains 3 pages, go to
home page.
4. Explanation of a new topic
1. Editing the site
In order to open an existing site you need to:
1. Open the folder with the name of your site.
2. Find the file named INDEX and make 1 click on the right book. mouse on it.
3. In the menu that appears, select the Open with command
FrontPage.
Renaming a title
pages
Click on the words Home
page 1 time pr. book. mouse and
menu that appears
select
Advertising Properties command on
page.
IN
in the window that appears instead of the words Home
page
write your name
page and click OK.
(This is mainly used for
home page)
2. Adding text
Creating texts in this program is no different from the same
operations in text editor Word. You click on the desired
place the page and write the text. As in Word, you don't need to
watch for the end of the line - Front Page automatically wraps words from
lines per line.
Character formatting is carried out
using the panel
Formatting
Sometimes, when typing, the gap between
rows can be very large.
In order to remove this you need to:
1. Select several lines.
2. Take the command Format, Paragraph
3. In the Interval window, place the number 0 in front of it.
4. In the Interval window, then enter the number 0.
9

5. Click OK
4. Practical work
5. Lesson summary
Topic: “Creating tables. Adding a ticker."
Goal: Continue to familiarize yourself with the main features
programs;
Continue working on studying information technology;
Cultivate interest in the subject
During the classes.
1. Organizational moment
Communicating the topic and purpose of the lesson

3. Explanation of a new topic
1. Creating tables
Tables are placed on web pages using the Table button,
Insert, Table.
A window opens in which the table parameters are set:
In the Size window, the quantity is set
rows and columns of your table.
In the Borders window you can set the size of the borders
tables,
in the window color – border color
If you want to have the entire table
set a specific color in the Background window,
The color is the desired color.
Click OK.
Look at the result:
In Design mode
In View mode
If you change the Table Size and put 0 instead of 1, then you have a table
will have invisible borders in View mode.
See the result
10

In Design mode
Note:
Merging cells:
In View mode
1. Select the cells you want to merge
2. 1 time pr. book. mouse and select the command Merge Cells
Changing the table:
1. Click 1 time on the right button. mouse on the table and select the Properties command
tables
2. Creating a ticker
To draw attention to a piece of text or
title, you can give it a running effect
lines
1. Insert, Web component
2. The cursor must be on the words
Dynamic effects, Creeping line.
3. Click the Finish button.
4.
5. In the Text field you must enter text
running line.
5. using special switches
Can:
 Select the direction of movement
rows (left to right or right
left);
 Adjust the delay between successive text shifts and
shift amount in pixels;
 Set the text movement mode (continuous);
 Set the width and height of the rectangular area of ​​the creeping line;
 In the Style, Format, Font window – change the font design
Note:
11

Changing the ticker
1.
Click 1 time right book. mouse on the ticker and take the command
Creeping line properties.
3. Practical work.
Create a page on which to insert a ticker (at the top).
Create a table consisting of 1 row and 2 columns, in which
place some text.
Create a second table, with invisible borders, consisting of 1
rows and 2 columns, in which you also place some text.
4. Lesson summary.
What did we meet today? Why do you need a ticker?
How to make a table with invisible borders? Give an example for
Why would you need a table with invisible borders?
5. Grading.
Homework.
Topic: “Inserting and editing pictures. Photo gallery".
Goal: Continue to familiarize yourself with the main features
programs;
Continue working on studying information technology;
Cultivate interest in the subject
During the classes.
1. Organizational moment
Communicating the topic and purpose of the lesson
2. Checking homework.
3. Explanation of a new topic
1. Add a picture
FrontPage editor allows you to load images from files
various graphic formats: gif (regular and animated), JPEG,
BMP, TIFF, TGA, RAS, EPS, PCX, PND, PCD and WMF. Can be placed
ready-made drawing for the page, taking it from the program’s image library
FrontPage, from the folder of the current site or one of the sites on the local
disk, from any graphic file on the local disk. Install
mouse cursor to the right place.
1. Select Insert, Picture, From File
2. Specify the location of the file to be inserted, its name and confirm
actions by clicking the button
3. Change if necessary
dimensions of the drawing. For this
just drag the mouse
from the corners or sides of the frame.
FrontPage allows you to use
various tools for giving
image of the required type and
12
OK.
one

forms. Click on the inserted picture. Around the picture there will be
a frame is displayed, and at the bottom of the working program window appears
Drawings toolbar for working with images:
Let's take a closer look at all the buttons on the panel
Drawing
Name
From file
Opens a window for inserting an image
Action
.
Text
Absolute
Move
forward
Places text on a drawing. This is action
Only possible with gif images.
If the image is saved in another
format, then a window with
warning

V
Transforms
positioned. After clicking this button
the picture can be moved anywhere on the web
pages,
as a positioned paragraph.
Clicking this button again cancels
positioning.
Moves the selected drawing to the front
plan
regular drawing
Move
Moves the selected drawing to the background
back
To turn
left
To turn
right
Reflect
from left to right
Reflect
top down
Increase
contrast
Decrease
contrast
Increase
brightness
Rotates the drawing 900 counterclockwise
arrows
Rotates the drawing 900 clockwise
Creates
relative to the vertical axis.
mirror image of the picture
mirror image of the picture
Creates
relative to the horizontal axis.
Increases image contrast
Reduces image contrast
Increases image brightness
13

Decrease
Reduces image brightness
brightness
Trimming
Removes the edge of a drawing.
Line type
Set transparent color
Color
Baguette frame
Cutting flowers
Choose
Hyperrectangle
Nipercircle
Hypermultiple
golnik
Select hot spots
Restore
Features of image cropping
14
Creates a frame around
images around
from
specified line type.
Makes the color you choose
transparent (through it there will be
the background is visible,
on which
there is a drawing).
Changes the color of the drawing
on
on
on
With

By
border
drawing
Creates

allocated
baguette frame
If after
changes
click on picture sizes
click this button, the file will be
re-recorded
taking into account
changes made.
Used for highlighting
graphic objects
Highlights
drawing
rectangular area for
creating a hyperlink
Highlights
drawing
circle to create
hyperlinks
Highlights
drawing

polygonal area for
creating a hyperlink
Hides part of the image
which was not included in
hyperpolygon,
hyperrectangle,
hypercircle.
comfortable
use when borders
hyperregions are poorly visible on
drawing.
Restores original
drawing parameters.
Her

In all programs Microsoft Office XP
immediately after clicking the “Crop” button
the drawing does not change externally.
IN
Front Page program click on this
button causes a dotted line to appear
frame highlighting the central part
Images.
If you click on the button again
“Crop”, then part of the image will disappear,
outside the frame. To independently determine the drawing area,
which should remain on the web page, move the mouse pointer to one
from squares located in the corners in the centers of each side of the dotted line
rectangle and drag them with the mouse.
Using the Color button
Using the "Color" button opens a list of commands, using
which you can change the picture format and make the image black
white, or in shades of gray, or turn into a background (command
"Blur")
Large Image Problem
The larger the image, the more disk space it takes up, the more
It takes longer to load it. The solution to the problem is
replacing a large image with a sketch of it. The created sketch becomes
hyperlink where the viewer (for example, Internet Explorer)
displays the original drawing on the screen.
To create a thumbnail, click on the image to
The “Drawings” toolbar appeared. Then on the toolbar
Click the Auto Thumbnails button. This will result in dimensions
image will shrink and a blue frame will appear around it.
To change the appearance of the sketch, open the Tools menu and
select the "Page Setup" command
In the Page Setup dialog box, go to the
"Auto thumbnails" and set the desired parameters
In this window, set the desired width (for example, 50) and click the button
OK.
Reduce the size of the image by dragging its corners.
Go to View mode. Here's what you get:
This is in Design mode:
15

This is in View mode:
This drawing in View mode is
hyperlink by clicking on which you
this is what happens:
2. Photo galleries
Convenient way of location on
one web page of many photos is the so-called
photo gallery. When it is created, large images are automatically
are replaced by sketches.
To insert a photo gallery on a web page:
1)
2)
3)
Click on the name of the “Create Photo Collection” command;
Next, we work in the “Photo Collection Properties” window.
open the "Insert" menu;
move the mouse pointer to the “Drawing” line;
in the additional menu that opens on the right,
On the "Drawings" tab, click on
"Add" button to open the list
commands for inserting pictures. If the drawing
stored on your computer as a file, you need
Click on the line “Pictures from files”.
The Open File dialog box will appear, with
which you know how to work with.

necessary

"Signature"
drawings,
Having selected
use the fields
And
"Description". If necessary, you can
resize thumbnails.
Then go to the “Layout” tab to choose the layout method
thumbnails on the page.
In horizontal layout, images are arranged in rows and
Below each sketch is a description.
If the "Collage" option is selected, then the descriptions are not displayed, but when
When you hover your mouse over the thumbnail, a caption appears.
16

Borders
You can organize text and images on the screen using either
tables, or using a decorative device such as horizontal
lines. Place the text cursor at the location on the web page where you want
go through the horizontal line, open the Insert menu and click on the name
"Horizontal Line" commands.
Practical work
4.

5.
Lesson summary
Grading
Topic: “Choosing a theme for page design.
Adding video and sound. Animation
texts."
Goal: Continue to familiarize yourself with the main features
programs;
Continue working on studying information technology;
Cultivate interest in the subject
During the classes.
1. Organizational moment
Communicating the topic and purpose of the lesson
2. Checking homework.
3. Explanation of a new topic
Choosing a theme for page design
To give the site a more cohesive, aesthetically pleasing and
at the same time a more professional appearance, it is advisable to adhere to
a unified approach when designing pages - to comply with a certain
color scheme and style. To make this task easier in FrontPage
themes are used.
A theme is a specific set of design elements and color schemes,
which can be applied to pages.
1. Select Format, Theme.
Subject.
2. Browse the list of topics, select
one of them and click on the check mark
this topic.
A panel will appear on the screen
on
17

3. In the menu that appears, select the command: Apply as theme by
default, so that this theme has been applied to all pages of your
site.
4. In the window that appears next
click on the YES button

Addition

sound
escort
Along with various special effects to bring pages to life
multimedia objects are used: sound, video, flash animation, etc.
So, for example, you can select a background sound for any page on the site
or music that will be played when the page is opened. For
this is needed:
in edit mode, right-click on any
area of ​​the page and select the command in the context menu that appears
Page properties.
The Page Properties window appears with the
General tab;
in the Background sound control group, click the Browse button
and in the Background sound window that opens, select a file with music
fragment.
Adding a video
Placing a video on a website page is as easy as adding a picture.
To place a video on a website page, you need to set the text
cursor to the desired position and select the command Insert, Drawing,
Video recording. Next, you should specify the name of the file with the video fragment. After
closing the Video recording window, a rectangle will be placed on the page,
indicating the video output area in which the
the first frame of the video fragment is displayed.
Then you need to right-click on the output area
video images and select the command in the context menu that appears
Properties of the drawing. The Picture Properties tab will appear with the tab open.
Video.
Selecting the When opening a file checkbox indicates that
The video will play every time you load it
pages into View mode. Set the On hover checkbox
mouse allows you to play a video when you hover over it
mice. In the input field with the Repetitions counter, you can specify how many times
the video must be shown, or
check the Always for
endless playback.
Text Animation
For
text animation
needs to be displayed
18

DHTML Effects toolbar. To do this, use the View command.
Toolbars, DHTML Effects.
When the desired panel appears on the screen, click on
the animated paragraph so that the text cursor is inside it.
Then:
open the "On" combo box and select from it
1)
at
happen
event,
text animation. It can be a double click, a simple click,

whom
must
2)
open the Apply field to select an animation effect.
The number of effects offered depends on the one selected in the first step
events: the largest number of animation effects can be used when
opening a page, least of all - when hovering the mouse pointer;
3) for such effects as “Fly-in”, “Scale”, “Appearance” and
“Spring” becomes an available field, with the help of which you can specify
effects. For example, changing the size of letters can occur as in
the side of their decrease and increase.
If you click the "Select Effects" button on the toolbar
DHTML", then in normal viewing mode the paragraphs to which
animation effects are highlighted with a light blue block. With preliminary
when browsing or when viewing in an Internet Explorer window, this bar is not visible
4. Practical work
Practicing skills learned in class.
5. Lesson summary
Grading
Topic: “Creating hyperlinks.”
Goal: Continue to familiarize yourself with the main features
programs;
Continue working on studying information technology;
Cultivate interest in the subject
During the classes.
1. Organizational moment
Communicating the topic and purpose of the lesson
2. Checking homework.
3. Explanation of a new topic
There are no ways to insert or edit hyperlinks in Front Page.
differ from those used in the Word text editor.
To create a hyperlink, you must select text or graphics
object in the document and click on it once, right book. mice. In the appeared
menu, select the Hyperlink command. The highlighted word will appear in the field
"Text" in the "Add Hyperlink" dialog box.
19

On the left side of the window there is a “Link To” panel, intended for
selecting a hyperlink object. The figure shows the option “Link to file,
web page", so the central large field displays
contents of the folder in which the document is stored. This part of the dialog window
similar to the window for opening documents, so even a very inexperienced
The user does not have any difficulties when working with it. Find the file
which should open when you click on the hyperlink, select it
click and close the dialog box with the "OK" button. So you
created a simple hyperlink, highlighted in blue in the text and
underlining. In case you want to hover
mouse pointer to the hyperlink was the tooltip text before you
close the dialog window, click on the “Hint” button and in a new window
dialogue write the text.
A hyperlink in a document can be used to send an email
By e-mail. This technical feature of a text editor
when used skillfully, it turns out to be a valuable didactic function,
especially important when organizing distance learning for children
homeworkers: clicking on the hyperlink launches a program to create and
sending emails, automatically inserts into fields
“To” and “Subject” information compiled by you. To text
Word editor reacted like this when clicking on a hyperlink, you need it in the window
In the “Add hyperlink” dialog, click on the button with the words
"E-mail" and fill in the required fields.
Editing and removing hyperlinks
Like everything in this world, hyperlinks change frequently. For example, maybe
the file name of the Web page to which the hyperlink points changes,
the page itself can be moved to another site or simply
deleted. If such a change occurs, then the link pointing to
The file has changed and needs to be corrected.
a) changing hyperlinks
1. Right-click on the link you want to correct.
A context menu will open.
2. In the context menu, select the Hyperlink Properties command.
The Edit Hyperlink dialog box opens. Address to be corrected
The hyperlink will be listed in the URL field (invalid). It should be replaced
on the right one.
3. In the list of files, click on the one you need, and then click on the Ok button.
The hyperlink address will change to point to the correct page.
20

b) removing hyperlinks
1. Right-click on the link you want to delete.
A context menu will open.
2. Select the Hyperlink Properties command. A dialog box will open
Editing a hyperlink. The text in the URL field will be highlighted.
3. Press the Delete key. The URL field text will be removed.
4. Click the button
Ok. The link will be removed from the Web text
pages. Please note that the part of the text that represented
is a hyperlink, now not underlined.
5. On the toolbar, click the Save button.
Advice. To remove a hyperlink, you can simply remove its text at
Web page.
Cards
If in electronic version Word document a hyperlink could only be
a whole drawing, with the help of Front Page you can make it in one drawing
several different hyperlinks. Such a drawing is called an image map.
1.
2. Click on the image to select it. As a result
The Drawings toolbar will appear.
3. Click one of the following buttons to highlight in the Drawing:
Insert a drawing or photo into a web page.
1. rectangular area - “Hyperrectangle”
2. circle or ellipse - “Hypercircle”
3. arbitrary area - “Hyperpolygon”
4. In the “Add hyperlink” window that opens, find the name of the site
or a web page that should open when you click inside
selected area.
5. Repeat these steps with other parts of the image.
A normal photo will be visible in the viewer window, but when
hovering the mouse pointer over the active area, the pointer will take the form
pointing finger, and a hint text will appear below it.
4. Practical work
Practicing skills learned in class.
5. Lesson summary
How to create a hyperlink?
How to create an interactive map?
Grading
Topic: “Creating interactive buttons.”
Goal: Continue to familiarize yourself with the main features
programs;
Continue working on studying information technology;
Cultivate interest in the subject
During the classes.
21

1. Organizational moment
Communicating the topic and purpose of the lesson
2. Checking homework.
3. Explanation of a new topic
FrontPage allows you to create interactive buttons, i.e.
buttons with hyperlinks.
Attention: The changing button will only be created inside non-shared
borders!. If you want to put it on general fields, then first create it in
non-general fields, and only then copy them to the general ones
To do this, take the command Insert, Changing Button
1. In the Text window you must enter the name of the button.
2. Click the Browse button to link your button to a hyperlink
In this window, select the desired page and click OK.
3. Go to the Font tab
In this window you can change the font, it
and the style on your button.
In addition, you can change the button colors:
Original color
Hover color
Color when pressed.
4. Go

on
Drawing tab
size
Here you can set the width and height of the button
(if the text does not fit on the button)
If you put a dot next to the words Use
for a button GIF format and a transparent background, then your button will be
look very neat on your website.
22

6. Practical work
Practicing skills learned in class.
7. Lesson summary
Topic: “Creating a website using the Front editor
Page"
Final assignment
Goal: To consolidate the skills acquired by students in previous lessons;
Continue working on studying information technology;
Cultivate interest in the subject
Equipment: Front Page 2003 program,
During the classes.
1. Organizational moment
Communicating the topic and purpose of the lesson
23

Frontpage has two functionalities that allow you to split a page into sections containing text and graphics. These are tables and frames. Up to this point, we've been aligning text on a line by adding spaces using the Formatted paragraph style. You can also use tables to align text. Using tables, form fields are aligned (Chapter 7 is devoted to working with forms). You can also use Cascading Style Sheets to format page elements. It should be noted that cascading style sheets are only supported in browsers latest versions.
Note
Browsers ignore formatting elements such as whitespace lines. The exception is when the Formatted style or symbol is used non-breaking space. In HTML code, the sequence of characters is used to indicate a non-breaking space. Using a set of such sequences makes it possible to display text with several consecutive spaces on a page loaded in the browser. In Frontpage, the non-breaking space character can be inserted using the Symbol dialog box (first on the first line).
Designing Tables
The most important tool for developing the layout of a Web page is a table. The functions of tables when creating Web pages are varied. First of all, I would like to highlight the following:
aligning data by inserting into table cells (while providing the ability to separate data with lines of varying thickness);
representation of text in the form of columns;
alignment of input fields and their names in forms;
distribution of text and graphics into different columns;
creating a frame around text or graphics;
placement of graphic images on both sides of the text (or all sides) and vice versa;
placement of text along the outline graphic image;
creating a colored background for a text fragment or a separate image;
including tables within other tables.
During the creation of a table, the following properties are set in the Insert Table dialog box: the number of rows and columns, the horizontal occupied area of ​​the page, the thickness of the lines separating cells and limiting the table, the size of the intervals between the content and the inner edge of the cell borders, table alignment, etc. . You can change the table property values ​​later. At any time, you can delete one or several rows or columns, merge adjacent cells, format the contents of one cell or selected range in a special way, etc. As you enter data, the cell size increases vertically and horizontally within the limits set for the table and column.
Note
You can set the width of the table either in pixels (fixed width) or as a percentage of the width of the browser window or frame in which the page is included. The width of table columns is specified either as a percentage of the table width or in pixels (fixed width). If the width of an individual column or an entire table is specified in pixels, then the way the table is displayed in the browser depends on the screen resolution set on the user's computer.
Displaying Tabular Data
In a classic table, rows and columns are strictly demarcated. To obtain such a table, you must perform the following sequence of actions:
1. Download Frontpage.
2. Activate the New command of the Web submenu of the File menu.
3. The New dialog box will load. By default, the One Page Web template is selected. In the Specify The Location Of The New Web field, enter the name of the Web server and Web site. Name the Web site, for example, TestTables. Click OK.
4. Go to Folders view mode. Double-click the Default.htm file name. The home page will open in Page view.
5. Press the key to insert a blank line at the top of the page
6. Open the Table menu and activate the Table command of the Insert submenu. As a result, the Insert Table dialog box will open (Figure 61). This window displays the default table property values. The elements of the Insert Table dialog box are described in Table 6.1.

Figure 6.1. Insert Table Dialog Box

Table 6.1. Table properties

Dialog element	Table property
Insert Table windows
Rows	Number of rows in the table
Columns	Number of columns in the table
Alignment	Table alignment method (default is left alignment)
Border Size	Thickness of dividing and bounding lines in pixels Default value - 0 If this value is not changed, then the table frame is not displayed in the browser, but in Frontpage it is indicated by a dotted line
Cell Padding	The amount of space (in pixels) between the edges of the cell and its contents (default value is 1)
Cell Spacing	Spacing (in pixels) between adjacent cells (default value is 2)
Specify Width	Table width This value is set either in pixels (In Pixels switch) or as a percentage of the width of the browser window or frame in which the page is included (In Percent switch)

7. Do not change any of the values. Click OK. As a result, a table will be created with two rows and two columns. Select the table with using the Table command in the Select submenu of the Table menu. Press the key to delete the table. If you didn't create a blank line at the beginning of the page in step 5, do it now.
8. Click the Insert Table button on the Table toolbar. A table prototype will appear in front of you, where it is very easy to specify how many rows and columns the table should contain. Click on the second cell in the second row, as shown in the following image. In this case, a table consisting of two rows and two columns (four cells) will also be created.
We looked at two ways to create a table. When you use the Insert Table button on the toolbar, the default values ​​are applied. If you activate the Table command in the Insert submenu of the Table menu, you independently determine the values ​​of the parameters of the table being created.
Note
Using the Insert Table button, you can create a table containing many more rows and columns than initially displayed in the prototype:
When you move the mouse pointer off the edge, the prototype automatically expands.
Table properties
The values ​​assigned to the properties of a table define it appearance.
1. In the top left cell of the table we created, enter the number 5.
Press the key to move to the cell on the right and enter the following sentence:
This is quite a long sentence. Your table should look like the following image. The width of this table reaches almost 100% of the window width.

2. Press the down arrow key twice to move the cursor outside the table. Insert three empty lines after the table by pressing the key three times.
Note
If you place the cursor in the last cell and press the key, a new row will be added to the table, and the cursor will move to the first cell of the new row.
3. Activate the Table command of the Insert submenu of the Table menu and disable the Specify Width option at the bottom of the dialog box (the input field of the same name will become unavailable). Click OK. As a result, a second table will appear, the width of which is much smaller than the first.
4. Enter the number 1 in the left cell of the first row of the table, press the key, causing the cursor to move to the second cell of the first row, and enter a sentence. This is quite a long sentence
Move to the left cell of the second line using the key and enter the number 2. Press the key again (the cursor will move to the right cell of the second line) and enter a sentence: This is just a sentence
The width of each column is set according to the longest line in that column (Figure 6.2).

Rice. 6.2. The Specify Width property is set for the top table, but not for the bottom table.

5. Right-click on the second table and select the Table Properties command in the context menu, which will open the dialog box of the same name shown in Fig. 6.3. As in the dialog box opened using the Table command of the Insert submenu of the Table menu (Fig. 6.1), in it you can set table parameters such as alignment, the thickness of the dividing and limiting lines of the table, the size of the intervals between the edges of the cell and its contents, the interval between adjacent cells and table width. In addition, it is possible to determine the height of the table, select a color for the solid background of the table or a background image, and specify the color for the dividing lines. In the Float list box, you can specify which way to move the table - to the right or to the left - to place text or an image to the left or right of the table. By default, the Float field is set to Default. According to this setting, text can only be located below or above the table.

Fig 6 3 Table Properties dialog box

6. Set the following values ​​for the table properties: Border Size - 5, Cell Padding - 6, Cell Spacing - 8. Confirm the settings by clicking on the OK button. Your table should look like the following image. Right-click on the right cell of the first row of the top table (Figure 6-2) and select the Cell Properties command in the context menu. A dialog box of the same name will open (Figure 6-4). The elements it contains are described in Table 6.2.

Figure 6.4. Cell Properties Dialog Box

Table 6.2. Cell properties

Dialog element Cell Properties windows	Function
Horizontal Ahgnment	Aligning cell contents horizontally The following options are available: Left, Center, Right. Left alignment is set by default
Vertical Alignment	Aligning cell contents vertically The following options are available: Top (top edge), Middle (center), Baseline (aligning cell contents along the reference line), Bottom (bottom edge) Center alignment is set by default
Rows spanned	This field indicates how many rows you want to stretch this cell.
Columns spanned	This field specifies how many columns you want to stretch the cell into.
Header Cell	Formatting a cell as a row or column header (sets the cell text to bold)
No Wrap	Prohibition of hyphenation within a cell in a Web browser; otherwise the text breaks if the browser window is too narrow to display it completely
Specify Width	Specifies the cell height in pixels or as a percentage of the total table height (only if the Specify Height option is active). If this option is disabled, the height of the cell is automatically changed so that the entered text or object placed in it fits completely
Borders	In this area of ​​the window, you can define the color for dividing and limiting lines, which can be either one-color or two-color. In the first case, use the Border input field, in the second - any two fields from the three proposed. In the latter case, the frame turns out to be voluminous
Background	Creating a background for a cell (either a solid color or containing an image)

Property values ​​can be changed for either a single cell or a selected range.

Note

When changing the cell width, make sure that the total width of the cells in the row does not exceed 100%, otherwise the table cells will not display correctly.

1. In the Horizontal Alignment list box of the Cell Properties dialog box, select Center, and in the Vertical box
Alignment - item Top (align to the top edge). In the Border Size field, enter the value 1. Confirm the settings by clicking OK.
As a result, the way the data is arranged in the cell will change, and the thickness of the dividing and limiting lines will become equal to one pixel.
2. Select the bottom row of the table and right-click. From the context menu, select the Cell Properties command. Enter a value of 2 in the Columns Spanned field and click OK. The resulting table should look like the one below. The leftmost cell will overlap the top two, but there should be an additional cell to the right.

Note
You can select a certain number of cells within a table as follows: position the mouse pointer to the left of the cell from which you will begin the selection, and when it changes to an arrow pointing upward to the right, press the left mouse button and select the required cells.
Note
The columns in the table you create may have different widths than those shown in the figure. This is due to differences in monitor resolutions.
3. Press a key combination or activate the Undo Edit Properties command on the Edit menu to undo the changes.
4. Select the first row of the top table, open the Cell Properties dialog box and enter a value of 2 in the Rows Spanned field. Finally, click OK. The top two cells will move to the left, and the bottom two cells will move to the right.

5. Click on the Undo button on the toolbar. Go to the left cell of the first row of the top table and open the Cell Properties dialog box. Set the Specify Width option and activate the In Pixels switch to be able to independently specify the cell width in pixels (the Specify Width input field will become available). Enter the value 40 in the Specify Width input field and click OK. Both cells in the first column will increase in size.

7. Activate the Undo button, click on the right cell of the second row and open the Table menu. This menu contains four submenus. Table menu commands are described in table. 6.3.

Table 6.3. Table menu commands
Team	Description
Draw Table	Allows you to draw a table in the same way as using a pencil on a sheet of paper
Table submenu Insert	When this command is activated, the Insert Table dialog box opens. In it you can set the parameters of the table being created, which will be inserted in the position where the cursor is located (if the cursor is located in a cell of another table, the second table will be placed in it)
Insert Rows Or Columns submenu Insert	The Insert Rows Or Columns dialog box specifies the number of rows and columns that can be inserted above, below, to the right, or to the left of the selection.
Cell submenu Insert	Inserts a new cell to the left of the selected cell that is shifted to the right
Caption submenu Insert	Designed to insert an empty line above the table. This row is associated with a table: when a table is selected or deleted, the header is also selected or deleted. By default, the table header is set to center alignment, but it can be left or right aligned
Delete Cells	Used to delete selected cells
Merge Cells	Allows you to merge multiple cells in both a row and column
Split Cells	In the Split Cell dialog box, you can set the selected cells to be divided into both rows and columns
Cell, Row, Column, Table submenu Select	The first command is used to select the current cell, the second - the current row, the third - the current column, and the fourth - the entire table
Distribute Rows Evenly, Distribute Columns Evenly	The first command allows you to set the same width for selected rows, and the second - for selected columns
Autofit	Reduces the length of each column to the size that the information contained in them directly occupies. Enabling this command has the same effect as disabling the Specify Width option in the Insert Table dialog box, i.e. The length of the cells will automatically change depending on the length of the entered text or the length of the object placed in them
Text To Table submenu Convert	Allows you to convert selected text into a table. Activating this command opens a dialog box for selecting a delimiter character. Use commas to separate column contents, and paragraph markers to separate rows.
Table To Text submenu Convert	Allows you to convert tabular data into text, with the contents of each cell forming a separate paragraph
Caption, Cell, Table Properties submenu	These three commands provide access to the Caption Properties, Cell Properties, and Table Properties windows.

Note
To select multiple non-adjacent cells, hold down the
Menu Table. Let's take a closer look at some of the Table menu commands described in Table. 6.3
1. Activate the Table command of the Insert submenu. In the dialog box that opens, click OK without changing the default settings. As a result, a table of two rows and two columns will appear in the cell.

Note
When we created the second table (step 3 of the second exercise of this chapter), we disabled the Specify Width option in the Insert Table window. At step 1 of the third exercise, we entered the value 1 in the Border Size field of the Table Properties window. In Frontpage, these settings were saved, so when creating a new table in the Insert Table window, by default the Specify Width option will be disabled, and the Border Size field will contain the value 1.
1. Click first on the Undo button, and then on the left cell of the first row of the table. Select the Rows Or Columns command from the Insert submenu. As a result, the dialog box of the same name will open

Agree with the default settings: the Rows and Below Selection switches are selected, and the value 1 is entered in the Number Of Rows field. Click the OK button. A new row will appear under the first row of the table
3. Again activate the Insert Rows Or Columns command of the Insert submenu. Set the Columns and Left Of Selections radio buttons (to the left of the selected area) After this, click on the OK button. The resulting table should look like the following figure

4. Activate the Cell command of the Insert submenu. As a result, a new cell will be inserted into the table, and the cell located on the right will move outside the line to the right. The cursor is automatically placed in the new cell

To select a cell, activate the Cell command of the Select submenu (select a cell) or press the key when clicking on a cell. To delete cells, use the Delete Cell command
5. Activate the Caption command of the Insert submenu. The cursor will be located above the table in the center. Enter the following sentence. This is the table header
6. Select the bottom row in the first table Then select the Merge Cells command. As a result, all dividing lines between cells will be removed in the bottom row

7. Click on the rightmost cell of the first row and activate the Split Cells command. The Split Cells dialog box will open

Accept the default settings and click OK. The specified cell will be split into two

8. Activate the Table command of the Select submenu and press the key. The table will be deleted. Click the Undo button to restore it.
Note
There is another way to select a table: double-click to the left of the table (those of its limits)
9. Open the Table Properties dialog box and enter the value 0 in the Border Size input field. Click OK. As a result, the table boundaries will be indicated by dotted lines.
Drawing a table
So far, you have created tables using the Table command of the Insert submenu of the Table menu. In this case, the website is generated automatically in accordance with the set property values. After creating the table, you changed these values ​​in the Tab!c Pioperties dialog box, added and deleted columns and rows, merged cells, and so on. through the commands of Tabie. Frontpage offers another way to create and edit tables, according to which the buttons on the Able toolbar are used to process tables. The Draw Table button allows you to manually draw a table. The Eraser button is used to remove sections of crucible lines from cells. The remaining buttons duplicate the corresponding Table menu commands
1. Place the cursor in a blank line between two tables, then press the mouse button twice and the up arrow key once.
Note
It's a good idea to leave a blank row between tables when creating them, as Frontpage makes it difficult to insert rows between tables. It’s easier to remove unnecessary ones after finishing the layout.
1. From the Table menu, activate the Draw Table command. As a result, the Table toolbar will appear and the mouse pointer will look like a pencil. In table 6 4 describes the Table toolbar buttons
3. Place the mouse pointer between the existing tables on the left side of the page and move it first horizontally to half the page, and then down a distance that is equal to the height of the second table.
Chapter 6. Tables and lul frames
4. Place the mouse pointer on the top border of the table, near the left corner. Move the pointer horizontally a distance equal to half the length of the table. Move it down to the bottom border. The table now has two columns.
5. Create three rows in the right column (the height of the rows can be arbitrary).
6. Select the second column of the table. Click the Distribute Rows Evenly button on the toolbar, which will cause all three rows to be the same height.

7. Draw a line dividing the second row of the right column into two parts.
8. Draw two lines dividing the bottom line in the right column into three parts. The width of the first new cell is set equal to the width of the cell located on top

9. Place the pointer on the right border of the first column. As a result, the pointer will take the form of a double-headed arrow.
10. Move the column border to the right to expand it.
11. Activate the Erase button on the Table toolbar. The mouse pointer will appear as an eraser. Drag the eraser perpendicular to the line that separates the rightmost and middle cells in the bottom row. As a result, this dividing line will disappear (see below).

12. Click on the Eraser button again (the normal view of the mouse pointer will be restored). Position the pointer at the top of the second column. When the pointer turns into a small black arrow pointing down, click to highlight the column.
13. Press the key and move the pointer to the right, positioning it above the outermost column. Once you click, the outer two columns will be highlighted.
14. Click the Distribute Columns Evenly button on the toolbar. The resulting table is shown below.

15. Select the table using the Table command of the Select submenu of the Table menu, and press the key to delete it.
Table 6 4. Table toolbar buttons

The exercises we performed are designed to demonstrate how wide the possibilities of FiontPage are in terms of creating tables. All operations are carried out in WYSIWYG mode; at any stage of work, you can see how the created table will look in the browser.

Importing text information into a table.

In order to correctly import text into a table, it must be prepared accordingly; text fragments placed in adjacent table cells must be separated from one another by special characters (delimiters), such as commas. Most often, punctuation marks are used as separators. Next, perform the following sequence of actions:
1. Click below the bottom table, press the key

2. Select the entered text; menu 1 T able and activate the command text To T able Submenu Comen *
3. In the Convert Text To Table dialog box that loads, select the Other switch, delete the dots in the field on the right and enter a semicolon Click on the OK button As a result, the text will be imported into the table (Figure 6.5.)

Figure 6.5. Table created from test information

Note
HTML does not support tab characters If you convert text information into a table that uses tabs to separate sets of information, these characters will be removed and the table will not be created correctly. Instead of tabulators, you should use punctuation marks, which are not used in the text file. In this example, a semicolon is used because the text contains commas and hyphens. An alternative character is a paragraph marker * You may want to import content into the table text file But first you must import text from the file and pages) by activating the File command of the Insert menu. It should be remembered that Frontpage does not import Cyrillic text correctly (it has no problems with Latin). Therefore, if you want to extract similar text from a file and place it on page, open the file in a text editor such as Notepad, and transfer the text to the page using the clipboard - Note. ed.
4. Select the bottom (empty) row in the table, if there is one, and delete it.
5. Right-click on the table and activate the Table Properties command from the context menu. In the Alignment list box of the dialog box that opens, select the Center element, then turn off the Specify Width option. In the Cell Padding field, enter the value 4, thus specifying the distance between the edges of the cell and its contents. After completing all of the above settings, click on the OK button.
6. Select the isepxmolo line, right-click on it and open the Cell Properties dialog box. In this window, set the Header Cell option and select Left in the Horizontal Alignment list box. Finally, click OK.
7. In the Table menu, activate the Caption command of the Insert submenu. Click the Bold button on the Formatting toolbar. The table title you enter will be in bold. For example, enter the following title. FULL NAME. and year of birth of employees
8. Select the first row of the table and click on the Fill Color list box on the Table toolbar. In the list that opens, select the Aqua color (third square from the left in the second row) and click OK.

9. Select the remaining rows in the table and open the Cell Properties dialog box. Specify a yellow color in the Color list box in the Back-ground area, and in the Horizontal Alignment list box, select Center.
Click the OK button. The resulting table should look like the one shown in Fig. 6.6.
10. Click the Save button to save the created tables.
11. From the File menu, select Preview In Browser. In the dialog box that loads, select Internet Explorer 5.0 browser and click on the Preview button. In Fig. 6.7 presented Homepage Test Tables Web site containing the table we created. If you are using another browser, open this page in it and see how the table we created will be displayed.
The latest browser versions have expanded support for tables. Previously, there were significant differences between the way tables were displayed in different browsers. Some browsers did not support them at all. You should review your work in different browsers and evaluate how your tables look in them. Currently, the browser market is dominated by products from Netscape and Microsoft. These two browsers support tables quite well.

Rice. 6.6. Final version of the table (Page view mode)

Rice. 6.7. Final table (Internet Explorer 5.0)

Using tables when designing a Web page

Tables are useful for dividing a page into areas in which information will be presented.
Follow these steps:
1. In Page view, create a new page. Insert one blank line at the beginning of the page.
2. Activate the Clip Art command of the Picture submenu of the Insert menu. The Clip Art Gallery dialog will load. Scroll down the window to see the Places icon. Double click on it. The window will display images related to the Places category. Select an image with the Taj Mahal architectural monument and click the Insert Clip button in the panel that appears. The image will be placed on the page.
3. Place the cursor under the image and enter the following text: “Monument of Indian architecture. Mausoleum of Sultan Shah Jahan and his wife. Located 2 kilometers from the city of Agra. Five-domed structure made of white marble with a mosaic of colored stones. Height is 74 meters. K The Taj Mahal is adjacent to four minarets and a garden. A painting by the famous Russian artist V.V. Vereshchagin, who visited India, introduces this example of Indo-Muslim architecture."
4. Highlight the entered text. Press the key combination to copy the text to the clipboard. Place your cursor at the end of the last sentence and insert a space. Press the key combination. As a result, the text array will be increased, which will allow you to further achieve the desired result - surround the picture with text.
5. Move the pointer to the beginning of the page. Activate the Table command of the Insert submenu of the Table menu. In the loaded window, enter the value 2 in the Rows field, -1 in the Columns field, 0 in the Border Size field, and turn off the Specify Width option. The new table will take the place of the graphics and text, which will move down. The result is shown in the following figure.

6. Drag the image to the top row of the table.
7. In the bottom line of the table, enter the name of the monument "Taj Mahal" Set the text to bold and align it to the center of the gabtatsa by clicking respectively on the Bold and Center buttons of the Formatting tools panel
8 Open the Table Properties dialog box and highlight Left in the Float list box. Click OK. As a result, the text will be placed around the table. In other text rubbish WOT the effect is called wrapping

9 Save the page, giving it the name Tatj _Mahal and the title Taj Mahal In the File menu, activate the Preview In Browser command Select the browser and click on the Pieview button In Fig. 6-8 the page is displayed in the Internet Explorer 5 O browser
As you've seen, tables make it easy to align pictures and captions. Create a few template pages that use tables to demonstrate how powerful they are as a means of presenting information.

Figure 6.8. Wrapping text around an image

You may have your own ideas regarding the use of tables on a Web page. Implement them. Experiment until you achieve the desired result. This is the only way you can get a successfully designed page.

Work with personnel

Klapbi, like tables, are used to place information on individual pages about guests. Frames are windows placed on a Web page and designed to display other Web pages. Any number of frames can be placed on a page. Using frames it is very convenient to present information on a Web site with complex system headings In this case, you should create a page with two frames: a table of contents frame and a main frame. The table of contents frame contains a list of headings that are links. When a link category is activated, the corresponding page is loaded into the main frame.
Next, you'll complete a simple tutorial designed to demonstrate HR principles (this example will only have three rubrics). This example we will dedicate to architectural monuments.
1. Create a new single-page Web site and name it Frames. In Page view mode, activate the Page command of the New submenu of the File menu. In the New dialog box that loads, go to the Frame Pages tab, which displays page templates with frames (Fig. 6.9).
By default, the Banner and Contents template is selected. The Preview area presents the composition of the page that will be created based on this template, and the Description area provides a description of the template. Select each of the templates one by one to read their description and find out what pages can be created based on them.

Rice. 6.9. New Dialog Box (Frame Pages Tab)

2. After reviewing the template options, select the Header, Footer and Contents template. Click OK.
The result will be a page containing four frames: a frame with a header (top frame), a table of contents frame on the left, a main frame, and a footer frame (bottom frame) (Figure 6.10). Each frame contains two buttons: Set Initial Page (used to select the initial page, i.e. the page that is first displayed in the frame after
loading the frames page into the browser) and New Page (clicking the New button
Page results in a blank initial page).

Rice. 6.10. A frames page based on the Header, Footer and Contents template

3. Click on the New Page button in the top frame. This will create a new empty page in the frame.
Note
In order to use an existing page as the initial page of a frame, you must do the following: in this frame, click on the Set Initial Page button; in the Create Hyperlink dialog box that loads, select the desired page and close the window using the OK button.
4. Right-click on the page in the top frame and select Shared Borders from the context menu. In the loaded dialog box of the same name, the Current Page switch is selected by default (do not change this setting). If any options are installed, turn them off.

Note
Frames are an alternative navigation tool to shared areas. Therefore, if there are frames on the Web site, the common areas are not used.
5. On the page in the top frame, enter the title “Architectural Monuments”. Give the heading the paragraph style Heading 2 and align it to the center.
6. Click on the New Page button in the bottom frame. On the created page, enter the following sentence: “For questions or comments, please contact: [email protected]". Select the entered text and in the Font Size list box on the Formatting toolbar, select the value 2. The font size of the entered sentence will become 10 points.
7. Create a new page in the table of contents frame (left frame). Enter the following three lines of text (after entering the next line, press the key):
Acropolis
Pyramids
Taj Mahal
8. Create a new page in the main frame by clicking on the New Page button. Press the key to create an empty line. On the second line, enter the following sentence: "Welcome to the world of architecture!" Give the entered text a Heading 1 paragraph style and align it to the center of the page. Make the text italic (select it and click the Italic button on the Formatting toolbar).
So, the initial pages of all frames have been created. Next we will make changes to home page table of contents frame.
9. Click the New Page button on the Standard toolbar. A new blank page will be created with no frames. Activate the Clip Art command of the Picture submenu of the Insert menu. The Clip Art Gallery dialog box will load. In the Search For Clips field, enter the name of the architectural monument:
Acropolis. After some time, the search results will be presented (see below) - an image of the Acropolis. Select an image and in the panel that appears, click the Insert Clip button. The image will be placed on the page.

10. Create two new blank pages and place two more images of architectural monuments from the Clip Art library on them: on the first - Egyptian pyramids, on the second - the Taj Mahal. In the first case, in the Clip Art Gallery window, enter Pyramids as a search criterion, in the second - Taj Mahal.
11. Go to the page with the image of the Acropolis. Click the Save button. In the Save dialog box, specify a file name for the Acropolis page. htm and change the default title to Acropolis. Click the Save button. The Save Embedded File dialog box will load. Click the Change Folder button. In the window of the same name, select the Images folder. Close both windows using the OK buttons. The image file will be saved in the Images folder
12. Save the pages with pictures of the pyramids and the Taj Mahal Palace. In the first case, specify Pyramids htm and Pyramids as the page file name and title, in the second - Taj_Mahal.htm and Taj Mahal.
13. Go to the page in the table of contents frame. Highlight the word Acropolis and click on the Hyperlink button on the Standard toolbar. In the Create Hyperlink window, select the Acropolis.htm page. The Target Frame field must contain a Page Default (main) entry. This means that the page (Acropolis.htm) to which the hyperlink is created will be opened in the main frame. You can change the target frame in the Target Frame dialog box, which opens by clicking the Change Target Frame button. In the Common Targets list of this window, you must select the appropriate item. In particular, if the New Window item is selected, then when you click on the hyperlink, the page will be opened in a new browser window, and if the Same Frame item is selected, the page will be opened in the same frame in which the hyperlink is located

14. Guided by the previous paragraph, in the table of contents frame, create two more hyperlinks to the pages Pyramids.htm and Taj_Mahal.htm, including in them, respectively, the words Pyramids and Taj Mahal. Thus, three hyperlinks have been created in the table of contents frame, when activated, the corresponding pages will open in the main frame.
15. We have finished creating the frames page. The result is shown in Fig. 6.11.
16. From the File menu, select the Save command. The Save As dialog box will load and prompt you to save the page in the top frame. The right side of the Save As window shows the composition of the page with frames (the frame that is currently being saved corresponds to the shaded area). Name the page Fr_header Click the Save button. Next, the Save As window will ask you to save the bottom frame page (frame pages are saved in the order in which they were created). Name the bottom frame page FrJboter, the table of contents page Fr_contents, the main frame Fr_main. Finally, you will be prompted to save the frames page. Give it the name Frames and the title “Architectural Monuments” (Fig. 6.12)

Rice. 6.11. Page with frames in Page view mode

Rice. 6.12. Procedure for saving a page with frames

17. Load the page with the frames into the browser and see how it turns out
to look like.

Rice. 6.13. Page with frames of the Frames Web site in the browser

A frame has a number of properties that you can control. Frame property values ​​are set in the Frame Properties dialog box. To open this window, right-click on a frame (for example, a table of contents frame) and activate the Frame Properties command from the context menu. As a result, the dialog box shown in Fig. will open. 6.14. Elements of the Frame Properties window are described in table. 6.5.

Table 6.5. Frame properties

Element	Description
Name	When creating a hyperlink on a frames page, you must specify in the Create Hyperiink dialog box the name of the frame into which the corresponding page will load when the link is activated
Initial Page Initial page	This input field indicates which page will be displayed first in the frame when it loads
Frame Size	This area contains two input fields - Width (width) and Row Height (row height). Values ​​can be set here in pixels, in relative units or as a percentage of the browser window size
Margins	This area determines the size of the frame margins (the intervals between the page content and the frame boundaries) and pixels
Resizable In Browser (resize in browser)	If this option is set, the user can change the frame size in their browser
Show Scrollbars (display scroll bars)	This list box contains three items If Needed (if necessary) - scroll bars are displayed only if the page content does not fit in the window, Never (never) - scroll bars are not displayed, regardless of the amount of information on the page, Always (constantly ) - scroll bars are displayed constantly Which of these items should be selected depends on the content of the pages that will be loaded into the frame For example, if the frame is located at the top of the page and contains information common to all pages (for example, a navigation bar), you should select Nevei Please note that the way the page is displayed depends on the screen resolution. Therefore, the best option is to select the If Needed option. If you want to provide the user with maximum opportunities to view information in the frame, select the Always item

Click the Frames Page button in the Frame Properties dialog box, which opens the Page Properties dialog box. In the Frame Spacing input field, you can set the thickness of the dividing lines between frames on the page. The Show Borders option determines whether lines between frames will be displayed.

You can create additional frames on the frames page. Perform the following steps: in Page view mode, hold down the key and move the top border of the main frame down slightly, then release the key and mouse button. As a result, a frame will be created above the main frame (Fig. 6.15), which does not contain a page.

Rice. 6.15. New frame

We hope you are convinced that frames are a very convenient means of presenting information. One of the problems that arise when working with frames is that not all browsers support them. Netscape Navigator supports frames starting from version 20, and Internet Explorer - from version 3 0 Frame support was introduced in HTML 3 2 Some users still use older browsers So be aware that a significant portion of your audience may not be able to view frame pages properly. The solution to this problem is to create a No Flames page (no frames). If the user's browser does not support frames, the No Frames page will be displayed instead. Frontpage will automatically generate
No Frames page when creating a frames page You can verify this by clicking on the No Frames tab at the bottom of the Frontpage window when the frames page is open. Figure 6-16 shows the No Frames page created by default. On this page you can recommend the user to use the browser , supporting frames. You should also create links to those Web sites from which you can download a browser that supports frames (for example, to the Microsoft Web site from which you can download the Internet Explorer 5.0 browser)
Note
A page with frames takes longer to load than a regular Web page because it actually loads multiple pages. Frames should be used judiciously

Figure 6.16. No Flames page in Pasu e view mode

Designing frame pages in Frontpage is a breeze, thanks to the numerous functionality provided by Frontpage, as well as the fact that in Frontpage page editing is carried out in WYSIWYG mode

Before you start working in FrontPage, I recommend that you create a folder specifically for your site. It can be called “site”, “my site”, “my super-duper site”, or, if you prefer English, “my site”, “site”.

On the Internet, files with Russian names, alas, do not work (but this does not mean that they will not work on your computer), so, out of long-established habit, I will use the default folder site. You, too, can begin to develop this habit, but this is only at your request :)

You can place the created folder anywhere, on drive C, in “My Documents”, on the desktop... in principle, it doesn’t matter, the main thing is that you have it's convenient to work with her.

However, I do not advise you to create a folder directly on your desktop. The path to it (you can see it in the folder properties, or in the folder itself, it is indicated in the “address” line), in this case, will be very long. For example: "C:Documents and SettingsUsersUser001desktopsite". True, it can be short, for example: “C:WINDOWSDesktopsite”. It all depends on the settings of your computer.

If the path still turns out to be long, then you can create a folder for the site on drive C (or D), then its path will be much shorter: “C:site”. And in order to open a folder quickly and easily, you need to create a shortcut to it and place it in any place convenient for you, for example, on the same desktop.

Why care about the size of the folder path? This will not affect the quality of website creation in any way, but I have learned from my own experience that working with folders whose path is not very long is much more convenient. The example will use the following path to the folder “C:Documents and Settingssite”

Separate folder for the site - the thing is extremely convenient, sometimes even irreplaceable. Your materials and created pages will not be lost anywhere, but will quietly lie in their own separate folder.

Using FrontPage, creating a website should not be difficult for even a less experienced user. For example, you can select a ready-made website, change the standard data to your own, add something, delete something, and that’s it, the site can be posted on the Internet. You can create a new website by selecting File(File) | Create(New). The following window will open to the right of the workspace:

By clicking on the link Other Website Templates You will see that there are many more different types of web sites from one-page to corporate. For the sake of experimentation, you can try to select a website and create a site in this template.

But I actually don’t support this way of creating a site, since FrontPage creates a lot of unnecessary folders for a ready-made web site. And in general there is a lot of unnecessary stuff.

Therefore, I propose a slightly different approach. I suggest creating a website from scratch by selecting the option in the create a new page window Empty page. Or you can not select anything, but simply close the window for creating a new page, since this item is already selected by default.

And in this empty space we will begin to create the first page of the site, or rather, its template.

If you are more or less familiar with the Internet, you have probably noticed that many sites consist of tables. Some tables are clearly visible, others are completely invisible. This is what we will do site consisting of tables.

Now tables as a means of creating a framework are gradually becoming obsolete; they are being replaced by layout using layers. But the tables still remain simple and effective way page formatting. For starters, this is just right.

There are several ways to create a table in FrontPage. Now I will describe each of them in detail, so that later you can choose the most suitable one for yourself. But since you can only learn through practice, I advise you not only to read the text below, but also to follow all the steps described.

So, first way. From the command menu bar, select the command Table(Table), and in the drop-down menu - the item Insert(Insert) with an arrow. Move your mouse over this arrow and another drop-down menu will open in front of you. Select an item Table(Table).

The first way to create a table in FrontPage is using the menu Table

After selecting this command, a window will open in front of you where you can specify various parameters for the table being created.

What parameters can you set? In the first area Size you can choose the required quantity lines(rows) and speakers(columns).

In the next area Position(Layout) can be customized:

• location of the table on the page - for this in the field Alignment(Aligment) you need to select one of the following values:

• Default(Default) - then the table will be placed at the discretion of the user’s browser, most likely at the left edge;
• Left(Left);
• On right(Right);
• Centered(Center);

• the distance between the cell border and its contents - to do this, enter the required value in the field Cell margins(Cell Padding);
• distance between table cells - to do this, just enter the required value in the field Cell spacing(Cell Spasing);
• table width - note if the checkbox Exact width(Specify width) is removed, the size of the table will depend only on its contents. If the checkbox is checked, you can indicate the width in pixels(in pixels) or in percentages(in percent). I’ll say right away that the width for the main table (which we are creating now) is better done as a percentage, then it will change depending on the size of the user’s window.

In area Borders(Border) can be configured:

• width of the table borders - to do this you just need to enter the required value in the field Border Size(Border size);
• color, light and dark sides of the table

In area Background(Background) you can set a color for the background of the table or select a background image.

For example, let's take the settings that I specified earlier. Choose OK and look at the result.

Great! Now let's try to use for comparison second way creating a table in FrontPage. On the toolbar Standard(Standard) find the icon Add table(Insert Table) and click on it. This will open a small table layout.

A quick way to create a table is to use a button Add table(Insert Table)

While holding down the left mouse button, select the required number of rows and columns. So, for example, two rows and one column are highlighted in the figure. If you move your mouse to the right or bottom edge of the layout, it will expand. After you release the mouse button, the table itself will instantly appear.

This method of creating a table is much easier and faster than the first one. There is one “but” - here you cannot pre-specify the parameters of the table being created. Therefore, if you are going to create another table using the second method, you can change its parameters only after you have created it.

I’ll tell you how to do this a little later, but now it’s more visual, third way creating a table. This - drawing table with mouse. We won't use it now, but if you ever need to create complex tables, you'll know how to do it.

The first step is exactly the same as in the first case. In the command menu bar you need to select the command Table(Table). But the next step is completely different. When you select a team Table(Table), a drop-down menu will open in front of you. Look closely, it has a double arrow at the bottom. Move your mouse over this arrow. Now you have the entire list of commands in front of you.

Command menu Table

This time we need a point Draw a table(Draw Table). Click. The following small window will open.

Drawing a table consists of several stages: the outer rectangular outline of the table is drawn, lines are drawn dividing the table into rows and columns, and excess lines are erased.

First, make sure that the table drawing tool is turned on (it should appear on a lighter background than the other buttons). Now, when the cursor enters the document area, it will take the shape of a pencil.

Now move your mouse cursor to the top left vertex of the proposed table. Then, press and hold the left mouse button, move it to the lower right corner of the intended table and release the button. As a result, the outer outline of the table will appear.

Now, using the same pencil, draw lines that form the internal structure of the table.

You can remove unnecessary lines using the tool Eraser(Eraser). It's easy to use. On the toolbar Table(Table) click button Eraser(Eraser). Then move your mouse cursor to the line you want to erase and drag along it. The erased lines will turn red. To disable eraser mode, click the button Eraser(Eraser) again.

Using this method you can also draw a good table, but let's go back to the previous one. We will work with her now.

The first line can be left for the site name, logo, etc. This will be the so-called top of the site. Usually it is left the same for all pages of the site. The next line usually contains text, pictures, photographs, in a word, information. It’s a good idea to leave space at the bottom for counters that will count the number of visitors. You can also write the name of the site creator there :).

But we only have two lines! Will we really have to start all over again? No, what are you! We'll just insert another row. There are several ways to do this.

For example, if you still have the toolbar open Table(Table), new line can be added by clicking the button Add line(Insert row). Do not forget to place the cursor on one of the table rows before doing this. A new line will appear before the line the cursor was on.

The next method for inserting a row is also quite simple. To begin, you just need to select one of the existing lines, click on the right mouse button and... But wait, how to select a line? There is nothing complicated here either. Simply move your mouse cursor over the line you want to highlight.

Then wait until it turns into an arrow and click on it.

The highlighted line looks like this:

And now, without removing the selection, right-click on the selected line. A submenu will open in front of you.

Of all these undoubtedly useful points, we now need only one: Add lines(Insert row).

By the way, you didn’t have to select the line, but simply click on it with the cursor. But you will still need the skill of selecting tables, rows and columns, so get used to it :)

The following method of inserting new rows into a table is much more convenient. And now you yourself will understand why. Place the cursor on the line above (below) where you are going to add new lines. Then refer to our favorite point Table(Table), which is located in command line. Select from the drop-down menu Insert(Insert) | Rows or Columns(Rows or Columns). The following window will open.

You see, at the bottom of the window you can choose the location of the new line - above the selected line (above) or below it (below). Please note that when using the first two methods we were not given such a choice. Let's determine the number of lines, click on OK and see what we got.

Now we have three lines. There was a place for everything, all that remained was to determine where to place the structure of our site. Have you forgotten about her yet? Now we'll look at the easiest way to put structure on the page - by placing it on the second line, next to the "information" middle.

To do this, let's create another table with two columns in the second row. We already know how to create a new table. Moreover, we know three ways to do this! Which one will we use this time?

Let's use the first one for now, since we need to adjust the table parameters from the very beginning. Path to create table: Table(Table) | Insert(Insert) | Table(Table).

In the window that opens, mark one row, two columns and the width of the table borders equal to zero. Set the width of the table to 100% and click OK. The entire table now looks like this:

The small dots in the second line are the same “invisible” table. More precisely, now it is clearly visible, but this is only because at the moment we are in editing mode. And when we switch to view mode, the table will not be visible.

We only need this “invisible” plate to model the appearance of the table, so we made it “invisible”. Now you need to insert another table into the left column. The number of lines should be equal to the number of main points of the structure you have compiled. No need to make columns!

Have you lost the leaf yet? Then we transfer the names of all the main pages (sections) to our table. Titles internal pages(subsections) are not required to be included there. To enter page titles into the table, simply click the mouse in the place where the text will be located and type it on the keyboard.

I will tell you in more detail about entering text and changing its appearance when we fill the site with information.

And now, as promised, I’ll tell you how to change the table parameters after its creation. Remember how we highlighted a table row? Now we need to select the entire table.

If you can’t select a table “manually”, you can simply follow the path Table(Table) | Select(Select) | Table(Table). Now, without removing the selection, right-click on the table. By the way, you can not select the table at all, but I already wrote that this is a very useful skill :)

The already familiar drop-down menu will pop up. Only this time we will need an item Table properties(Table Properties). When you select this item, a window will open that almost completely replicates the window for inserting a new table. In it you can change existing settings to new ones.

By the way, in FrontPage the table frame can also be made “double”, consisting of many squares, with a shadow, etc. All this is available in the top menu Format(Format) | Borders and Shading(Borders and Shading)

In the first tab - Framework(Borders) you can change the appearance of table borders. Look at the possible results after changing the table frame appearance.

In the second tab - Shading - you can set a background image for the table and also select the color of the background and text. But choosing the right color is not easy at all... Therefore, we’ll finish for today, and we’ll talk about colors in the next lesson.

But, wait, what to do with our art, i.e. with created signs? Everything is very simple. They need to be preserved. To do this, select in the top menu File(File) | Save as(Save as). Find the folder on your computer in which we agreed to put the site and save your document in it under the name index.

Why index? Yes, simply because this is how the main page of the site is always designated. And that’s exactly what we were doing now. If you now exit FrontPage and open the document you saved, you will see that it has automatically been saved as index.htm. HTM is short for HTML, do you remember what it is?

It is worth remembering that the “htm” and “html” formats are completely different things. I advise you to immediately choose one thing so that there are no problems later. If you choose the suffix "html", be sure to append it to each page you save, otherwise it will be saved as "htm" by default.

Let me remind you that file names for the site cannot be written in Russian letters. Then, when you put your site on the Internet, these files simply will not open.

One last thing about names. Writing the names of files and pages for a website with a capital letter is, of course, commendable, but extremely inconvenient. I recommend you everything, everything: pages, drawings, archives - write everything in small letters. Believe me, this will help avoid many inaccuracies in the future.

Opening saved "index"

We will now open the "index" document that we saved in the site folder at the end of the previous day. There are several ways to do this. Let's look at each of them, so that later you can choose the best one for yourself.

So, the first way. The index file is an Internet file by default because it is in the format htm (html). So if you open it by double clicking, you will be taken to the browser viewport.

This way to open "index" in FrontPage is to select the command from the top command line File(File), and in the drop-down menu - Edit in Microsoft FrontPage(Edit with Microsoft FrontPage).

If on the menu File You don’t have such an item, which means FrontPage is not installed on your computer as an Internet page editor. To fix this, you need to first open the FrontPage program itself, and then select Service | Options. The following window will open:

In order to work properly with the site, we need the area Editors was FrontPage. If it is not there, then click on the icon in the upper right corner and select there FrontPage (open as HTML). Then click on the button Use as default.

This was the first way to open a file in FrontPage, through a browser window. But it would be more logical to shorten this path. Therefore, in order not to waste time, you can, without opening the file, right-click on it and select from the drop-down menu Open with... (Open with) and find the FrontPage program in the list provided.

And the last, third way. First you need to open the FrontPage program itself, and after that open the entire site by selecting File(File) | Open website(Open web). Or, if you have recently opened index, choose Latest files, and in the drop-down menu required file.

Of course, it doesn’t matter exactly how you open the “index” page in FrontPage, the main thing is that you open it 🙂 Congratulations, another useful skill acquired!

With development Internet an information exchange protocol appeared, the protocol is called HTTP (HyperText Transfer Protocol- hypertext transfer protocol). Along with this protocol, a service appeared World Wide Web(often called WWW or simply Web), which provides an extensive network of servers HTTP transferring files via Internet.

The main part of these files are Web pages– special files written in the language HTML (HyperText Markup Language– hypertext markup language). Web pages published in Internet by placing such files on servers HTTP (Web sites). Content Web pages may be different and devoted to completely arbitrary topics, but they all use the same basis - language HTML.
Most people who want to create their own website or page are familiar with the language HTML only by hearsay. Therefore, the program can come to their aid Microsoft FrontPage, one of the most famous website builders.

FrontPage, included in the application package Microsoft Office, became the first product widely used for Internet, which combines client and server parts and provides the ability to develop the site as a whole and install it on most popular servers. FrontPage is able to take on all the necessary programming work. However FrontPage It will also become a serious assistant for professional developers who prefer to have full control over the creative process.

Program window FrontPage 2003.

Program FrontPage released by the company Microsoft and is made in the same style as the products included in the package Microsoft Office, so the appearance of the program is practically no different from a word processor Word .

At the top of the window there is a menu bar and two toolbars: Standard and Formatting. You can enable or disable the display of toolbars View menu.
On the left side is View Panel, with which you can switch document modes.
The main part of the window is occupied by the work area, in which one or more windows containing individual documents can be opened.
At the bottom of the window there is status bar, containing background information. Also at the bottom of the window there are three document viewing buttons.
Displaying toolbars.
To manage toolbars in FrontPage you can use the same methods as in Microsoft Word . Namely:
on the menu View need to choose Toolbar item, and in the new submenu that opens - install checkboxes opposite the toolbars you need; or click right click for any reason control panels(or in the area next to it) and use the context menu in the same way.

FrontPage, like other applications Microsoft Office, allows you to add, delete, and rearrange menu items and buttons on toolbars. It is also possible to create completely your own panels.
To do this you need:

IN Service menu choose item Settings…
or
V View menu choose Toolbar item, and in the cascade menu that appears - item Settings…
As a result of your actions, a dialog box will open Settings, where you can install the necessary panels.

Create a new Web pages.

If you started FrontPage, that means new Web page you have already created (at startup FrontPage a new empty one immediately opens Web page, ready to place text and any other elements).
Create new Web page You can do it in other ways:

Using a button New page on Standard panel tools.
File menu select submenu Create, and then - Page or Web site;
using combinations Ctrl+N;
by using context menu(works in all modes except Tasks and Reports) - for this inside Folder list given Web) you need to right-click and select the item in the context menu that appears Create  Page.

Creating pages using a wizard and templates.

As mentioned above, if you used the menu to create a new page File  New  Page or Web Site, That FrontPage will prompt you to use a template to create a new page.
To do this, it will open a dialog box, the appearance of which is shown below:

On the tab Are common This dialog box displays a list of templates FrontPage currently available. By selecting any of the templates, you can see its description in Sample field.
Creation FrontPage Web.
Microsoft FrontPage Web- this is a set Web pages, image files and other components that can be viewed as a whole.
If you make a website in FrontPage, then the most convenient way to store it is to use FrontPage Web.
the most important plus is the ability to rename files included in FrontPage Web.
Imagine that before publishing your site in Internet You suddenly noticed that a couple of your files are named with Russian names. - “Now you’ll have to go through all the files and change the links manually!” duamete you. This is where it will help FrontPage Web- you can safely rename files, and FrontPage will independently go through all other files included in FrontPage Web and will rename all links to the file you corrected.
I won’t describe all the other advantages, but I would like to say that to use all the possibilities FrontPage, then it is better to use FrontPage Web.
So, to create a new one FrontPage Web click on the arrow located to the left of the New page button on the toolbar and select the item in the drop-down menu that appears Website…

Opening Web pages.

Very often, when creating a website, you have to edit already created Web pages. You can return to the same page as many times as you like to edit it or use parts of it to create new ones. Web pages.

Open an existing one Web page possible in any of the existing modes.

From mode Page Views There are four ways to open an existing page:

1 way

If you are working with FrontPage Web, then simply select the desired file in Folder list and double click on it with your mouse.

Method 2

From the File menu, select Latest files. From the cascading menu that appears, select the desired file.

3 way

Using the Open File dialog box: File  Open.

Preview.

To see how your page looks directly in the browser, you can use the Preview tab in editing mode Web pages. But in this case it may turn out that the browser FrontPage will not display some elements of your pages, so it's best to:
use the button on the toolbar
or in File menu select item Preview r in the browser.

If you used the first method, the contents of your page will be displayed in the built-in browser FrontPage.
If you used the second method, then FrontPage will display a dialog box View in browser...

Here you can:
Select the browser in which you want to view your Web page. Typically displayed here initially browser, which is installed by default on your machine.
Add any other browser, for which you need to use the button Add.
Edit or delete installed browsers.
Set the screen size on which your Web page

Preservation Web pages.

Default FrontPage instead of a name pages takes the first line of text from yours pages. This is not always what is needed. You can change the page title using Change buttons- clicking this button opens the Title dialog box pages, in which you can change the name pages.

Removal Web pages.

When working with Website sooner or later it will happen that you no longer need some pages and you will want to delete them.

There are three ways to remove Web pages.

1 way

In the panel Folder list select the file you want to delete and click the button Delete on keyboard.

Method 2

In the panel Folder list right click on file(or icon file), which needs to be deleted and in the context menu that appears, select the item Delete.

3 way

IN List panel folders select the file that you want to delete and then select Delete from the Edit menu.

Work with text.

At first glance, entering text into FrontPage is no different from entering text in any text editor (for example, in Microsoft Word).
To type text, simply click the mouse anywhere on the page, and the cursor will be placed at the nearest point where the text can be entered.
Typing capital letters, editing text (deleting characters, inserting text, etc.) is done exactly the same as in Microsoft Word.
There is only one small BUT: when you press Enter keys in FrontPage the cursor is forced to move to a new line, while fixed characters are placed before and after the paragraph paragraph indentations.
If you don't need to create paragraphs, then it's best to use a keyboard shortcut to go to a new line Shift +Enter.

Working with images.

Graphically formats in Web.

All computer images, all formats for storing them (and, consequently, all programs for processing them) are divided into two large classes - vector and raster. Vector image consists of objects - geometric shapes made up of straight lines, arcs, circles and Bezier curves. Advantages vector graphics a lot. From a designer’s point of view, its most important advantage is that vector graphics can be “twirled” as you like, without fear of “rubbing a hole” in the image or losing some information. Another advantage is the small size of files (compared to raster images) and independence from the resolution of output devices (be it a printer or a monitor screen). These factors made vector graphics likely candidate for use in Internet. However, it is worth mentioning that at the moment vector graphics are not as common as we would like.
However, among the actually used vector formats, I would like to note the format Shockwave Flash Macromedia. To view this format in browser need a plugin ( plug-in), distributed free of charge by the company Macromedia. Today, there are both sites created entirely using this technology, and sites used Flash format only partially.
The raster representation of graphics is based on the concept of a raster. Raster is a collection of objects (in this case, pixels) placed in identical rows and columns. Those. raster computer file can be thought of as a collection of small colored or gray squares that form a mosaic of an image. Because Since the size of these squares is obviously small, when viewing raster graphics these squares merge with each other, forming a continuous change of colors.

The raster image storage format has both its advantages and disadvantages. One of the big advantages of raster graphics is the ability to work with halftones, i.e. the ability to convey an image exactly as it looks in real life. But among the disadvantages, the main problem is the file size. Naturally, the more pixels allocated for forming Images, the higher the quality of the transmitted Images, but the file size will thereby be larger.
If we now return to browsers, then we can say the following: most browsers can display without problems graphic files four formats (* .gif, *.jpg, *.png, *.bmp), of which at the moment it is best to use two - * .gif and *.jpg. And even then after preliminary optimization.
Inserting images on Web page.
Insert an image into your Web page can be done in several ways:
1. Drag an image from Windows Explorer(that is, directly from the explorer).
2. Drag an image from Internet Explorer.
3. Drag the image file from the panel Folder list, straight to the page.
4. With clipboard- copy the image to the clipboard from any other program, and then paste it from the clipboard on the page.
5. With Add buttons drawing from the file on the toolbar Standard.
6. Using the menu Insert  Figure.
Let's look at these methods in more detail:
Method 1
Windows Explorer(that is, directly from Explorer) you need to:
in FrontPage
open an explorer window;
in the Explorer window, select the file with the image that you want to insert into your page;
left mouse button and drag the image file onto your Web page The image is inserted in the place where the insertion cursor was on the page.
Method 2
To drag an image from Internet Explorer necessary:
in FrontPage open the page where you want to add an image;
V browser open the image you want to put on your Web page browser The file name must end with jpg, jpeg, gif);
Use the left mouse button to drag the selected image onto your Web page;
Method 3
In order to drag and drop file with image from panel List folders, directly to the page you need:
in FrontPage open the page you want to add to image;
select the required image file on the panel Folder list;
left mouse button drag the selected image to yours Web page;
the selected picture will be inserted in the place where the insertion cursor was located on the page.
Method 4
To insert an image into your Web page using the clipboard, you need to:
in the application from which you want to copy the picture, select the image and use the keys Ctrl+C copy the picture to the clipboard;
on your Web page paste this image from the clipboard using the keyboard shortcuts Ctrl+V
Method 5
Web page you decide to use the button Add an image from file in toolbar Standard, That FrontPage will open a dialog box Drawing.
In this dialog box, specify the image file that you would like to add to your Web page and press the button Insert.

Method 6
If you want to insert an image into your Web page you decide to use the menu Insert  Drawing, That FrontPage will prompt you to make further choices:

Images... – selecting that menu item gives you the opportunity to use a ready-made library of pictures.
From file... – selecting this menu item gives you the opportunity to independently indicate the location of the image file that you want to add to your Web page(using this item will open a dialog box Drawing, the work with which was described above).
Create a photo collection... - using this menu item you can create a collection of images in a specific style. For this in the window that opens Properties photo collections using a button Add on the tab Drawings select images, and on the tab Layout select a design format.
Adding media files.

In addition to simple graphics, such as images in * .gif, *.jpg, *.png etc. FrontPage allows you to post on your Web pages media files. These include: video clips, sounds...

To insert a video clip, you need to Insert menu select item Drawing, and then Video recording...

A dialog box will open. Video window, it will display video clips in * .avi, *.asf, *.ram, *.ra.

Add sound to Web page can be found on the General tab of the dialog box. Page properties.

Working with tables.

Table- one of the most powerful tools used in website creation.
Initially tables were used only for representing structured data. However, they have gradually evolved into a powerful, all-purpose layout tool. Web pages.

Creating tables

The easiest way creating a table– use the button Add table located on the toolbar Standard.
Another way is using the item menu Table  Insert  Table.
And table can be drawn and pasted using the clipboard.

Data entry and table navigation.

One of the great things about tables is that the text you enter is formatted within the cell in the same way that we're used to formatting it throughout the document. Text placed in a cell automatically wraps to a new line if its length exceeds the width of the column. When you press a key Enter, as usual, a new paragraph is inserted. Text or numbers are entered into the table from the keyboard.

Before entering data into table, you need to place the text cursor in the desired cell tables. This can be done by clicking on it with the mouse.

However, it is more convenient to use key combinations to move between cells:
Keyboard shortcuts: Action:

Tab anywhere in the table, except the end of the last row, go to the adjacent cell and select its contents
Tab at the end of the last line add a new line to the bottom of the table
Shift+Tab go to the previous cell and highlight its contents
Enter start new paragraph
Enter at the beginning of the first cell add text before the table at the beginning of the document

Creating and applying forms.

Forms represent text fields, radio buttons, check boxes, buttons and many other controls. A site visitor just needs to enter some information in one or another text field, select some data from the proposed list, click on the Send button so that the data is sent to Web server for processing (or processed right there on the page).

Let's get to know you - please fill out the following fields:
Your name:

Your last name:

Your date of birth: year month day

Thank you! And now - let's go!
1. Small, but agile.
Wherever he happens, he commands.
He will enter the tent -
The hero will turn over.
Who is this?
Fly Flea Capricious child
2. Sits with his eyes bulging,
He speaks French
Jumps like a flea
Swims like a human.
Who are we talking about?
Cat Frog Parrot

3. What does a seal breathe when it dives under the ice?

4. Why do big turtles cry?

5. What kind of clothes can a herring wear?
Fur Coat Vest
6. Who is called the “river horse”?
Otter Hippo Crocodile

7. What birds do not hatch their chicks?

8. What birds cannot fly?

If you need to select several answers, press and do not release the key Ctrl and left-click on the desired answer

But creating forms on the very page that's only half the job. Since there must be a program that can process the data entered by the user using forms.
Such a program can be located on a server; it may be in yours Website in the form of a separate file, or can simply be written in code html on your Web page.
It is she who determines what will happen to the information entered by the user:

information can be added to the database and various graphs, ratings... can be built on its basis;
information can be sent by email (this is often used to obtain information about the user in various types of questionnaires);
information can be processed right on the spot and the visitor to your site will immediately receive feedback (for example, they will receive points for a test, they will see the information they entered in the guest book...).

In a relationship forms There are several basic rules:

1. Each form occupies a certain area Web pages. On one Web page one or more forms may be located.
2. Each form must contain at least one of the form elements (although, as a rule, there are several of them).
3.Each element forms has a name and meaning. The name identifies the field for entering information, and the value is equal to the value selected by the user.
4. One of the form elements (it can be a regular button or any picture) must perform the function of a button Send.

Creating forms in FrontPage.
To add a form to Web page, necessary:

Place the cursor where you want to paste form.
IN Insert menu choose item Form, in the menu that opens, select again item Form. Form will be placed on your Web page- an area marked with a dotted frame will appear with two buttons: Send and Reset.
Using the same point menu Insert  Form insert the elements you need sequentially forms by selecting them from the drop-down cascading menu (remember that all form elements are inserted inside the form area marked with a dotted frame).
After form created, all that remains is to fill it with content - elements forms, text, images, tables... (with dimensions forms will change automatically).
Add content forms can be done in the usual way. For example, text can be typed or pasted from the clipboard... All actions with added objects are similar.
However creating a form- this is just the beginning of the work. After creating it, you need to configure the properties as forms, and its elements.

Setting form properties.

To process or store data entered by visitors Web pages, you must either take advantage of the opportunities provided FrontPage Server Extensions, or some other program running on Web server.
But no matter what program you choose, you will still have to configure the properties of the form and the elements in it.
To open the form properties window, you need to:
V Insert menu choose item Form, and then -
or
Call the context menu for the form and select the item in the context menu that opens Form properties.
As a result, a dialog box will open Form properties.

1. B Save field results must indicate what will need to be done with the data entered into form. You can choose the following options:
o Sending File name- the data will be placed in the specified file on Web server. This file may be Web page, which will become longer and longer over time, or a data file that can then be processed in Excel, Access or any other program;
o Sending Mail Address- in this case, every time the visitor clicks Web pages Send to buttons form an email will be generated and sent to the address you provided. This message will contain all the data that was entered by the user on Web page.
o In the database- in this case the data forms will be sent to the database. The base must be on Web server(or be available to him).
2. B Properties field form, you must specify the form name
Viewing modes FrontPage.
FrontPage offers six different modes to view content Website:

Page,
Folders,
Reports,
Transitions,
Hyperlinks,
Tasks.
For selection desired mode you can use Views panel located on the left side of the screen, or in the menu View on the toolbar Standard select the appropriate menu item.

Page
In this mode, you can create and edit Web pages. Here you can create empty Web pages and template-based pages assign themes (a set of styles for presenting the page on the screen) to pages. In this mode, you can add and format text, design pages using graphic and video images (supports conversion of a number of graphic formats to * .gif, *.jpg and *.png), add audio to the page, present information in tables, frames and forms, and finally create hyperlinks. This is not a complete list of possibilities. FrontPage on content editing Web pages.
Folders
In this mode you can view the structure Web site(files and folders) and manage it in the same way as you do in Windows, this mode makes it possible to obtain more detailed information about files and folders than is provided in viewing mode Page.
Reports
Provides you with more than a dozen reports containing a variety of information about Web site, opened in FrontPage.
Transitions
Designed to view the site hierarchy. In this mode, you can manipulate the hierarchy by dragging rectangles (each representing a specific Web page).
Hyperlinks
Demonstrates the system of hyperlinks that link pages together Web site(as well as a system of hyperlinks to other nodes), ensures their integrity is checked and the possibility of modification.
Tasks
This mode is designed for task management Web site(adding, deleting, executing, setting execution priority, and monitoring the status of tasks).

Download for free FrontPage you can use the following link:

http://letitbit.net/download/28576.28615a37d4f2a575882748541adf3bf00/Microsoft_Office_FrontPage_2003.rar.html