I recently started studying the program" Microsoft FrontPage 2003" based on the book " Microsoft Office FrontPage 2003" (384 pages), Russian version (+1 CD), Moscow, 2005. The description in the book is quite detailed and the plus is that there are a lot of illustrations and screenshots so that you can compare what the user gets and how it looks in the book. And on the CD there are additional materials on the Front Page lessons from the book. I read 190 pages and everything was fine, all the exercises turned out exactly as in the book. I got to the topic “Adding borders and filling” (p. . 190-194). I will focus only on the essence of the problem I have in order:
1) in the exercise you need to create a one-page website;
2) open the main (home) page of the site index.htm;
3) on the page you need to press Enter several times so that the cursor drops to the very bottom of the page (or a little lower is possible);
4) when the cursor is at the bottom, select the entire page by pressing Ctrl keys+ A, the selected page will turn black;
5) now you need to create a background image on the page:
a) on the toolbar, click Format and select Borders and Shading;
b) go to the Fill tab;
c) at the bottom in the field where it says Pattern, click on the Browse button... and select on the computer a suitable image for the background (not large, about 1/16-1/32 of the page size), then in the line Background image The path to the image on your computer should be displayed;
d) now we set the settings for the location of this background image on the site page index.htm:


Repeat: X axis
Attachment: scroll
e) click further OK and look at the View tab of the Front Page program (it’s at the bottom) - background picture will multiply horizontally on the page (from left to right);
f) go back to the Designer tab of the Front Page program and repeat the steps from point 4) - select the page to point d) here we set new settings:
Vertical position: center
Horizontal position: center
Repeat: Y axis
Attachment: scroll
g) click OK and look at the View tab of the Front Page program - the background image will appear vertically on the page (from top to bottom);
h) go back to the Designer tab of the Front Page program and repeat the steps from point 4) - select the page to point d) here we set new settings:
Vertical position: center
Horizontal position: center
Repeat: X and Y axes
Attachment: scroll
i) click OK and look at the View tab of the Front Page program - the background image will cover the entire page (multiply across the entire page);
Everything that happened before matches the exercise in the book. Now we come to the problem.
j) go back to the Designer tab of the Front Page program and repeat the steps from point 4) - select the page to point d) here we set new settings:
Vertical position: center
Horizontal position: center
Repeat: no
Attachment: scroll
l) click OK and look on the View tab of the Front Page program - the background image SHOULD (according to the settings) be displayed in a single copy in the center of the page, but for some reason this does not happen. It multiplies all over the page. I can't figure out what the problem is. Thanks for the help!

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 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, That's why appearance program is practically no different from 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 mice 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 just select required file V 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 remove installed browsers.
Set the screen size on which your Web page

Preservation Web pages.

Default FrontPage instead of a title 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 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 new line, while before and after the paragraph there are fixed paragraph indentations.
If you don't need to create paragraphs, then it's best to use a keyboard shortcut to move 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 monitor screen). These factors made vector graphics likely candidate for use in Internet. It is true that it is worth mentioning that at the moment Vector graphics does not occur as often 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 the size of these squares is obviously small, then 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 graphics files of four formats without problems (* .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 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 the 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 will be inserted in the place where the insertion cursor was located 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 to create websites.
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

Creation and application of forms.

Forms represent text fields, radio buttons, checkboxes, 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.
About whom we're 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 forwarded by e-mail(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 sequentially insert the elements you need 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 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 for viewing 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 (series conversion is supported graphic formats to formats * .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

Topic 3.4: Application of the Internet in the economy and information protection

Programs for creating websites

3.3. Application programs for creating websites

3.3.4. Creating a website and web pages in FrontPage

Site planning

Planning a website is one of the most difficult tasks. How to correctly arrange the information you have on the pages of your future website? What should be the structure of the site? What pages should the site have? What design should the website pages have? What should the site navigation be like?

These and many other problems associated with website development must be resolved before applying application programs for website development.

Let's say that we decided to develop a website that will present information about the company EN101, we can present this information we have on four pages:

1. home
2. About company
3. Business overview of the project
4. Payment Methods

We choose a site name based on the type of activity, for example: lessons-en101.

Assign names to pages:

• index – Home;
• info - About the company;
• business- Business review of the project;
• pay - Payment methods.

As home page We use the previously created Home web page (index). We create the site structure, which is shown in the figure.

Rice. 1.

We will prepare text in the Word editor for each page and drawings in Adobe Photoshop in GIF, JPEG or PNG formats with a resolution of 72 pixels/inch, in addition, you can use scripts.

Next, you can register a second-level domain in one of the zones (ua, ru, com, net, info, etc.) and after developing the site, choose paid hosting that suits the speed of access and provides the necessary services for efficient work site. If we host the site on free hosting, then we can choose, for example, hosting on the narod.ru server. To do this, you will need to register on the server and get free hosting. In this case, you will have a third-level domain, for example: lessons-en101.narod.ru.

Creating a Website Using FrontPage

1. To create a website using the FrontPage application, you must open the application window in one of the following ways. After which the application window will be displayed on the screen or GUI FrontPage, which will display the previous site or page. To exit a previous site or page in FrontPage, you must execute the command “File/Close” or “File/Close Node”, or both if the node and page were open.

Then execute the File / New command and in the “Creation” task area that opens, click on “Other Web Site Templates” in the “Create Web Site” section. The “Web Site Templates” dialog box will open, in which you need to select “Blank Web Site”, then specify the location of the new web site (for example, D:\Documents and Settings\TBA\My Documents\My Web Sites\lessons- en101) and click OK. The figure shows a fragment of the “Web Site Templates” dialog window, in which the address of the new site is indicated.

Rice. 2.

After saving the site, the FrontPage application window will display new website in folder mode.

Rice. 3.

2. Creating a home page for a new site in FrontPage. Creating a home page in FrontPage can be done in different ways. For example, you can click the New Page button in the Content panel, which will add the index.htm page to the Web site window, which is shown in the figure.

Rice. 4.

3. Then copy the contents of the previously created folder EN101, which contains the images folder and the index page (the _vti_cnf folder is created automatically when creating the web page). The contents of the EN101 folder are shown in the figure.

Rice. 5.

We paste the saved contents of the EN101 folder from the clipboard into the newly created folder of the lessons-en101 website, which is shown in the figure.

Rice. 6.

Rice. 7.

Thus, the previously created page index.htm ( English language in Internet). You can create a home page in other ways as described in section 3.3.2. Introduction to FrontPage.

5. Create the site structure in the FrontPage editor, i.e. We will add three more pages to the main page: info - About the company; business - Business overview of the project; pay - Payment methods. To do this, you need to switch to the Transitions mode by executing the View/Transitions command. Then you need to select home page and click on the New Page button in the Transitions panel or use the context menu, New Page 1 will be added. Similarly, add two more new pages. The structure of the site is shown in the figure.

Rice. 8.

6. Renaming New Pages in FrontPage. We switch to folder mode and use the context menu to change the names New page 1 to info, New page 2 on business, New page 3 on pay.

Rice. 9.

7. For the purpose of unity in the design of the site pages, we copy the content of the main page into the created info, business, pay pages. To do this, open the main page in Page mode and execute the “Edit / Select All” command, and click on the Copy button on the toolbar. Go to Folders mode and double-click on the info page, it will open in Page mode, then click on the Insert button. The contents of the main page will be copied to the info page, and similarly copy the contents of the main page to the other two pages.

• Home;
• About company;
• Business review of the project;
• Payment Methods.

For example, select the navigation item “Business overview of the project” and use the context menu to open the Add Hyperlink dialog box, in which we select business.htm and click OK. Similarly, we create hyperlinks for all navigation points on all pages. The figure shows a fragment of the Add Hyperlink dialog box.

Rice. 10.

10. Add and fill in meta tags (between tags And) on the pages: "About the company"; "Business review of the project"; "Payment methods" in Code mode.

For example, for the "About the Company" page, the tags are filled in as follows:

11. Renaming page titles in Transitions mode. Select the page and use the context menu to rename it:

• new page 1 rename to “About the company”.
• rename new page 2 to “Business review of the project”.
• rename new page 3 to “Payment Methods”.

As a result of development, we get a site that consists of four web pages. This site, created using FrontPage in file system The PC can be placed on a web server on the Internet or Intranet.

To develop your own website in FrontPage, download.

What can you add to your site to improve the visual experience? Can set page background

. White pages on a gray background are perceived much better.

The purpose of the page background is to emphasize and concentrate attention on the content of the site, and not to distract. Therefore, it would be correct to use neutral backgrounds. Usually these are gray shades.

Let's add a background to our page. Let me remind you that our website now looks like this (click the link). 1. In order to add a background, open the Frontpage program and in the menu"Format" press

" Background"

3. Click "Other..."

4. Set the following values:

Hue: 160, Contrast: 0, Brightness: 216,

Red: 230, Green: 230, Blue: 230 and click everywhere

" OK" 5. After all our manipulations everything was painted over gray

, i.e.

the background of the page and the page itself became light gray.

How to repaint a cell white To make the page white, you need to repaint the cell white.

6. To do this, right-click on the page and select "Cell Properties"

7. Next:

"Background" - "Color" - "White Color" - "Apply" - "Ok"

9. Thus, we created a background on the site page. Now the page itself is white, and the background is light gray: This page looks much more readable and does not blend into the background. Click the link to view the site page in its original size. A program that makes it quite easy to understand basic principles

designing Internet pages with a wide selection

additional tools for creating complex Internet sites and portals. and various means of optimizing Internet pages.

It should be noted that the name Microsoft FrontPage existed until 2003, and then it was supplemented with new functions and the name itself changed software. FrontPage was renamed Microsoft Expression Web in 2007 and Microsoft Office SharePoint Designer in 2010. In fact, some additions were added to the new versions, but the basic appearance of the program was preserved.

Basic program tools

General view of the Microsoft FrontPage program

Microsoft FrontPage has a lot in common with MS Word tools, so many of the buttons and menu tabs are also intuitive, making the page creation process easier. Many people already know how to type and format simple text, create tables in Microsoft Word, and the same principle applies to editing a page in FrontPage.

The picture on the right shows general form programs with a standard set of tools with which you can create a page template with text, links and pictures. Go to the "View" tab, then "Toolbar" and make sure that " Standard", "Formatting" And " Tables", these tools will be enough to create just a page. Below, pay attention to the tabs "Designer", "Code" and "View" - these are three different modes in which you can always view what the page you are creating looks like.

• In the Designer, all edits are entered, text is typed and formatted, pictures are inserted, links are created, background and font colors are changed in the same way as in Microsoft Word.
• In the "Code" tab you can view the so-called HTML code. HTML is a standard document markup language for World Wide Web. Most web pages are created using HTML language. In this tab you can also edit the page, but you need to know this markup language. However, beginners should make all changes in the constructor and all changes to HTML will occur automatically.
• In the "View" tab you can see what the page looks like directly in the browser (such as Internet Explorer)

Detailed description of other menus, buttons and Microsoft features FrontPage are presented in the program's help. To do this, press the "F1" key.

Creating a template for pages in FrontPage

Inserting the main table in the editor

And so, in order to create a simple template, you need to insert a table with three blocks. Three blocks are a simple standard: the top block is for the site name, the second block is for site navigation links, the third block is for text, pictures and other information on the page. You can insert more table blocks for convenience, but it is a matter of taste how, how many and what size to make these blocks. There is another way to create blocks not by creating tables, but by inserting so-called “div” elements into pages and assigning certain styles to them, but this method is not for new webmasters, and a separate article can be written about this.

1. To insert a table, go to the “Table” > “Insert” > “Table” tab and fill in the fields, as shown in the figure on the right. You can actually enter your own parameters, but this table has a fixed width and extends to 100% of the screen area. This way the table will be displayed compactly in the browser.
2. Then you need to adjust all three cells, since they are the same height after insertion. Right-click on the topmost cell and go to “Cell Properties”, in the height field enter conditionally “150” and check the “in dots” box, i.e. The cell size will be 150 pixels. In the same menu, we can select the background color of the cell, and by clicking in the “style...” menu, you can make other cell settings, for example, select the color and size of the cell border, you can experiment with this and see the result. In the cell itself you can enter the name of the site.
3. Next, we edit the second cell, which is intended for site navigation links. We set the width to about 40 pixels, this will be enough, and we also adjust other settings, such as the background color and margins, to your taste. Next we write the names of the links themselves, separated by signs vertical line or another sign (you can view it below by downloading the entire template). Select the test and press the center alignment button, just like in MSWord. In the same way, you can change the font, font size and other text settings.
4. We also set up the last cell. It is intended for the main text, where you can enter a greeting text.
5. Finally, you can go to the “File” > “Properties” tab, where you can enter the name of the site and change the general background of the page and other general settings

The template is now ready. It is the framework for all subsequent pages of the site. This is what the site looks like in HTML code:

This is how we get the template for the site

< html > < head > < meta http-equiv = "Content-Language" content = "ru" > < meta http-equiv = "Content-Type" content = "text/html; charset=windows-1251"> < title >Name of the site < body bgcolor = "#F8F3FE" > < div align = "center" > < table border = "0" width = "800" cellspacing = "4" cellpadding = "0" height = "100%" > < tr > < td height = "150" bgcolor = "#4A4A4A" style = "border: 1px solid #000000" > < p align = "center" >< font face = "Verdana" size = "6" color = "#FFFFFF" >Name of the site < tr > < td height = "40" bordercolor = "#4A4A4A" style = "border: 1px solid #4A4A4A" bgcolor = "#FBFBFB" > < p align = "center" >< font face = "Verdana" size = "2" > < b >home | < b >Page 2 | < b >Page 3 | < b >Page 4 | < b >Page 5 | < b >Contacts < tr > < td valign = "top" style = "border: 1px solid #4A4A4A" bgcolor = "#FFFFFF" >< div style = "padding: 6px;" > < font face = "Verdana" size = "2" >Home page text. Here you can insert a greeting text and briefly write what the site is dedicated to.

This HTML code can be immediately inserted into the editor in the "Code" tab and you will immediately see ready template. It can be changed and edited to suit your own needs. Here it is worth explaining that where the main text is inserted and so that it is not located close to the fields, it is framed in the “div” tag, with an indent setting, as shown in the example.

Additional Templates

1. You also need to know that in the FrontPage program, and other similar programs, there are standard templates that can be used to create pages; they are easily edited and you can customize any template to suit your needs. In order to select a standard template, go to the "File" tab > "Create..." in the window that opens, select "Other page templates", where you can select any template you like.
2. There is a second option - download the entire template from the Internet. There are a lot of sites providing such a service. templates can be either paid or free. After downloading this or that template, you can edit it in the program, fill it with the necessary content and change the style of this or that element.

Use standard table and theme layouts

Microsoft FrontPage provides good tools for ready-made table layouts and themes for website building

You need to know what Microsoft FrontPage has standard set table layouts and themes, with the help of which you can learn the art of creating regular pages or business card sites. And so at the top right there is a drop-down menu (see the picture on the right, which also shows the result of using table layouts and design themes), by clicking, a menu will appear in which you need to select “Layout tables and cells” and then many different table layouts will appear below, you can select any at your own discretion and taste. This frees you up to create the table yourself manually.

And so, by typing or pasting your text, logo, links into the table cells, by going to the same menu, you can select the “Theme” menu, where you can select various themes for the design of the page, links, page background and much more. This opportunity is good for those who are just learning how to create Internet pages and quite clearly reflects the process of creating a website. In other words, in Microsoft FrontPage you can experiment with various settings and see clearly how this or that page is transformed. Here you can give one piece of advice: study all the functions of the program and do not be afraid to capitalize on this or that menu, since each tool has its own property and purpose for creating a full-fledged page

Insert a picture and create links to pages

It is important for novice webmasters to know how to insert pictures into a page and make links to other pages. For example, instead of the text of the site name, you can insert a picture of the site logo. To do this, first click in the field where you want to insert an image, then at the very top click on the “Insert” tab > “Drawing” > “From File”, select the desired image and click “Insert”, after which the image will appear on the page. By right-clicking on the picture you can go to the menu with additional settings Images. It is important that all pictures are in one strictly specific folder for all images.

To go to other pages of the site, you need to create links through which users can visit all pages of the site. To do this you need to select required text for a link and go to the “Insert” > “Hyperlink” tab, in the menu that opens you need to indicate the page to which the link is being created and click “ok”. In the same window there are other settings for links, such as whether to open the link in a new window or not. In principle, you can study this on your own.

Conclusion

At their core, these editors are similar to each other and have similar functions and menus. Having mastered basic settings, you can easily create websites in other editors. Having mastered these principles, you can move on to a more complex method of website design - using the so-called CSS. You can read about what it is and how to edit a website design in the article about CSS.

The disadvantage of this "template" method is that each page has to be created separately based on the created template. When, as when creating websites using so-called engines, separate page generation is not required, they are generated automatically as content is added

If you have any questions about the article or the use of such programs to create websites, you can ask them in the discussion thread of our forum.

Articles on similar topics