Create a new blank web page

If when opening the program window front page it displays empty page, then the development of a web page can be carried out based on this page. If when opening the editor front page, an empty main window is displayed, then to create a new empty page, you must run the command File/New and select in the task pane empty page. A blank page will appear in the application window. Next, you need to develop the page, i.e. mark up (structure) the page, enter text, pictures, etc.

Create a web page based on FrontPage templates

You can also create a new page based on one of the templates. To do this, select the command "Other templates pages" in the task area. The Page Templates dialog box will be displayed on the screen, presenting various page templates by category.

Creating a web page based on existing web pages on a PC

You can also create a web page based on web pages available on your computer. To do this, in the task pane, select the command "From available pages" and in the dialog box that appears, select the required page. Then you can make the necessary changes on the page and save it under a different name.

Education creating the Web- pages

Create a new blank web page

If when opening the application window front page it displays a new blank page, then the development of a web page can be carried out based on this page. If, when opening the editor, an empty main window is displayed, then to create a new empty page, you must run the command File/New and select in the task pane "Empty page".

Let's try to create the Main page of our Web site!

A new blank page will appear in the application window. Save the page, but before saving the page in the window "Save" create a folder serverPersonal foldersLastname FirstnameSite "Dinas", in which we create a subfolder Pictures for pictures, and then save the page in the folder Site "Dinas". We assign the name of the page - index, which means the home or main page. The editor saves the page with the .htm extension. Thus, in the Dinas Site folder, there will be a subfolder Pictures and an index.htm file.

Drawings for the web page must be prepared in advance and inserted into the Drawings folder. Let's copy the Dinas LLC Office drawing to the Pictures folder to create a web page dedicated to Dinas LLC.

In order for the document you created to be correctly defined everywhere as written in Russian, do the following:

Select File Properties. The Page Properties dialog opens.

On the tab Language in the drop down menu Flag current document, stating: setting groups Language page select item Russian. Drop down menu Save document, using setting groups Kit signs select item Cyrillic. OK!

Page background

To make the page look more colorful, let's try to add to our page Background,. You can do this in two ways:

1. Go to the Format Background menu and in the Page Properties window select the desired image using the Browse button.

As a result, our page will look like this:

Try this, but when finished cancel it's action!

2. As the Background of our page, you can use ready-made Themes. Go to the Format Theme menu. Double-click on the Wave Theme.

Table as the frame of a Web page

The next step is to design the page. Page development begins with its markup. Tables are used for page layout. Can apply Layouts pages located on the taskbar "Layouts tables And cells" in the task area. To do this, go to the menu tables dummy tables And cells. Thus, we have a great opportunity to choose ready-made table layouts, but it may happen that these layouts do not meet our requirements. Therefore, we will take a closer look at the use tables as the skeleton of our page.

Select Table Insert Table. A dialog will appear Insert tables, which allows you to configure the parameters of the table being created. (fig.10)

џ In the input fields with a counter Rows And Stolbtsov setting item groups Size sets the number of rows and columns that the table will contain.

џ Position are controls for the position of the table on the page and the position of the contents of the cells within the table.

џ In the drop-down list alignment you can choose how to align the contents of the cells. Subsequently, for each specific cell, you can separately adjust the alignment parameters for its contents.

џ List wrap around specifies how text and other page elements wrap around the table.

џ Input field with counter fields cells defines the distance between cell borders and their contents.

џ In the input field with a counter Interval cells sets the distance between adjacent table cells.

џ By checking the box Ask width, You can do this in the field below.

џ Field Ask height similar to the previous one.

In a group of controls Borders there are settings related to the display of table borders.

џ Input field with counter Size sets the thickness of the table border in points.

џ Drop-down list Color allows you to choose the color that will be used to display the border.

џ If you check the box Collapse border tables, then the border will be displayed as a single line, otherwise it will take on a pseudo-3D look.

In Group Background collected elements that control background image tables.

џ List Color allows you to select the background color of the table.

џ If the checkbox is checked Use background drawing, then you can set the table as the background image.

If you check the box By default for new element group tables By default, then all the options you have set for this table will become the default settings for all following tables.

Subsequently, if you need to change the parameters of an already created table, click inside it - a context menu will appear in which you need to select the item Properties tables.

It is possible to change the parameters of both a single cell and several cells at once. To do this, select one or more cells, call the context menu and select the item in it Properties cells.

In a group of controls Position are the cell content layout controls.

• In drop down lists align By horizontal And By vertical, you will be able to choose how to align the contents of the cell.
• · In a group of controls Borders, contains settings related to the display of table borders. List Color allows you to select the color of the cell border.
• · In Group Background collected elements that control the background image of the cell. List Color selects its background color. Checkbox Use background drawing sets an image as the background.

There is also additional features: add And delete columns, smash And unite cells. All these commands can also be found in the context menu when selecting cells. You have already seen similar commands in Word programs and Excel, so it makes no sense to describe them.

Using the above theoretical material, try to create two tables.

It should be something like this!

It is time to write on our website the name of the company to which it belongs. But we will do this not in the form of plain text, but with the help of the WordArt object (We hope you know how to do this!) In the same way, insert the word Promotion in the third cell of the bottom table and Job vacancy in the first cell.. And now separate the name of the company Horizontal line: Insert Horizontal line.

Website text design

There are many options for formatting texts on Web pages. Using the potential of text formatting allows you to make texts more visually pleasing, arrange them in accordance with your author's ideas, and makes it possible to clearly emphasize important words and thoughts.

Since you have decided to study such a complex product as creating Web sites, we are just sure that you know how text is formatted, for example, in a program such as Microsoft Word. So here is the editing of texts in the program front page similarly to this, therefore, naturally, we will not dwell on this either.

Let's just say that the formatting bar or the menu bar Format Font Paragraph is used for this.

Enter all the text that you see in Figure 15 yourself. When editing it, you can dream up a little. BUT Not overdo it!!!

Insert illustrations

It is impossible to imagine an HTML page without graphics, pictures, etc. elements. Skillfully selected graphics will attract the attention of visitors to the page, focusing their attention on certain moments of our page. It will help to highlight logical subsections and give our page a special uniqueness, but at the same time, when choosing images, you should take into account following points. First, do not use an image as a background, which makes it difficult to read the text of the document. For example, too colorful, bright, etc. No need to use large images that will drag out the loading time indefinitely. If you still need to embed an image on a page, it's best to create a small copy of it, and then assign a link to the page with the original large image, so that the user can decide for themselves if they really want to download the image in its original form. And so the size of one image file should not exceed 20-25 kb. Web pages usually contain images of two formats GIF and JPG. Such images are displayed correctly in all browsers that support displaying graphics. Of course, you can also insert files with other formats, such as BMP, TIF, but it must be taken into account that when writing to disk front page will automatically convert them into one of two basic formats.

Consider the advantages and disadvantages of these formats. GIF is a standard format for small graphic images such as buttons and icons. It does not support shadows and midtones and is based on a palette of 256 colors. JPG, compared to GIF, supports much more colors - more than 16 million, which makes it the most beneficial for displaying graphics with smooth halftone transitions. In addition, the size of a JPG file can be reduced with varying degrees of compression, but we must remember that, unlike GIF files, compression JPG files produced with loss of quality. The more compression, the more loss, but we must take into account that JPG is enough good format: He gives a high degree compression with fairly small losses, almost invisible to the eye.

We will consider everything related to the chart in more detail a little further, for now we will only say that you can insert a picture again in the same way as in other programs.

Let's try to insert a photo into the page Catalog from the pictures folder.

Preparing graphics with help from Adobe Photoshop and Adobe ImageReady

The appearance and attractiveness of the site largely depend on the graphics that fill it. Graphics are a visual means of underlining and highlighting the information disclosed by the text of a Web page, which at the same time should not distract the visitor's attention from the text itself. Therefore, the preparation of graphics should be given the most serious attention.

Among the programs for professional preparation of raster images, perhaps there is no program more advanced and more popular than Adobe PhotoShop.

Adobe PhotoShop and Adobe ImageReady complement each other well. Adobe PhotoShop processes photos, creates graphic buttons, banners, and other images for a Web site. And in ImageReady, the resulting images are optimized, cut into fragments, etc.

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

Programs for creating sites

3.3. Application programs for creating Web sites

3.3.4. Creating a site and web pages in FrontPage

Site planning

Website planning is one of the most difficult tasks. How to correctly place the information you have on the pages of the future site? What should be the site structure? What pages should a site have? What design should the site pages have? What should be the site navigation?

These and many other site development issues must be resolved before site development applications can be used.

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

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

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

Assign page names:

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

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

Rice. 1.

Let's prepare the 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.

Then you can register a second-level domain in one of the zones (ua, ru, com, net, info, etc.) and after developing the site, choose a paid hosting that suits the access speed and provides the necessary services for effective work site. If we place the site on a 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.

Create a site using the FrontPage application

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

Then we execute the File / New command and in the “Create” task pane 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 "Empty Web Site", then specify the location of the new web site (for example, D:\Documents and Settings\TVA\My Documents\My Web Sites\lessons- en101) and click OK. The figure shows a fragment of the "Web Site Templates" dialog box, in which the address of the new site is indicated.

Rice. 2.

After the site is saved to the screen, the FrontPage application window will display new web site in folder mode.

Rice. 3.

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

Rice. 4.

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

Rice. 5.

Paste the saved contents of the EN101 folder from the clipboard into the newly created folder of the lessons-en101 web site, which is shown in the figure.

Rice. 6.

Rice. 7.

Thus, the previously created index.htm page is used as the home page in the new site ( English language in Internet). You can create the main page in other ways as described in Section 3.3.2. Introduction to FrontPage.

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

Rice. 8.

6. Renaming New Pages in FrontPage. Switch to folder mode and use context menu 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 the unity of the design of the site pages, we copy the content of the main page to the created pages info, business, pay. To do this, open the main page in Page mode and execute the "Edit / Select All" command, and click the Copy button on the toolbar. Switch to Folder 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, similarly we 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 "Project Business Overview" navigation item and use the context menu to open the Add Hyperlink dialog box, select business.htm and click OK. Similarly, we create hyperlinks for all navigation items 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"; "Methods of payment" in Code mode.

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

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

• new page 1 rename to "About the company".
• new page 2 rename to "Project business overview".
• new page 3 rename to "Methods of payment".

As a result of the development, we will get a site that consists of four web pages. This site, built with FrontPage in file system A PC can be hosted on a web server on the Internet or Intranet.

To develop your own website in FrontPage, download.

With development Internet a protocol for the exchange of information appeared, the protocol is called HTTP (HyperText Transfer Protocol)- hypertext transfer protocol). Together with this protocol, the service world wide web(often called www or simply web), which is a vast network of servers HTTP transferring files via Internet.

The bulk 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 base - the language HTML.
Most people who want to create their own website or page are familiar with the language HTML only hearsay. Therefore, a program can come to their aid. Microsoft Front Page , one of the most famous website builders.

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

Program window front page 2003.

Program front page released by the company Microsoft and made in the same style of the products included in the package Microsoft office, That's why appearance program is almost the same as word processor Word .

At the top of the window is a menu bar and two toolbars: Standard and Formatting. 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 is status bar containing background information. Also at the bottom of the window are three buttons for viewing the document.
Display toolbars.
To manage toolbars in front page you can use the same methods as in Microsoft Word. Namely:
on the menu View you have to choose Item Toolbars, and in the opened new submenu - install flags opposite those toolbars that you need; or click right click mice for any control panels(or the area next to it) and use the context menu in the same way.

front page like other apps Microsoft office, allows you to add, remove, swap menu items and buttons on toolbars. It is also possible to create completely your panels.
For this you need:

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

Creation of a new Web pages.

If you have run front page means new Web page you have already created (at startup front page immediately opens a new empty Web page, ready to place text and any other elements).
Create a new web page can be done in other ways:

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

Creating pages using the wizard and templates.

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

On the tab Are common this dialog box displays a list of templates front page currently available. By selecting any of the templates, you can view its description in Sample field.
Creation Front Page Web.
Microsoft Front Page Web is a set Web pages, image files, and other components that can be viewed as a single entity.
If you make a site in front page, then for its storage it is most convenient to use Front Page Web.
the most important plus is the ability to rename the files included in the Front Page Web.
Imagine that before publishing your site in Internet you suddenly noticed that a couple of files you have named Russian names. - “Now you will have to climb all the files and change the links with handles!” duamete you. That's where it will help Front Page Web- you can safely rename files, and front page it will independently go through all other files included in the Front Page Web and rename all references to the file you corrected.
I will not describe all the other advantages, but I would like to say that in order to use all the possibilities front page, then it is better to use Front Page Web.
So to create a new Front Page Web click on the arrow located to the left of the New page button on the toolbar and in the drop-down menu that appears, select the item Web site…

Opening Web pages.

Very often, when creating a site, 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 web page possible in any of the existing modes.

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

1 way

If you are working with Front Page Web then just choose desired file V Folder list and double click on it.

2 way

From the File menu, select Latest Files . From the drop-down menu that appears, select the desired file.

3 way

Using the Open File dialog box: File  Open.

Preview.

In order to see how your page looks directly in the browser, you can use the Preview tab in edit mode Web pages. But in this case, it may turn out that the browser front page will not correctly 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, then the contents of your page will be displayed in the built-in browser front page.
If you use the second method, then front page will pop up a dialog box View in browser...

Here you can:
Select the browser in which you want to view your web page. As a rule, initially displayed here 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 front page instead of a name pages takes the first line of text from your pages. This is not always what is needed. You can change the title of the page using Edit buttons- clicking on this button opens the Name dialog box pages where you can change the title pages.

Removal web pages.

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

There are three ways to remove Web pages.

1 way

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

2 way

In panel Folder list right click on file(or icon file) that you want to delete, and in the context menu that appears, select Delete.

3 way

IN List panel folders select file to be deleted, and then select Delete from the Edit menu.

Work with text.

At first glance, entering text into front page is no different from entering text in any text editor(for example, in Microsoft Word).
In order to type text, just click anywhere on the page, and the cursor will be placed at the nearest point where you can enter text.
Set capital letters, text editing (deleting characters, inserting text, etc.) is done in the same way as in Microsoft Word.
There is only one small BUT: when you click Enter keys in front page the cursor is forced to move to newline, while before and after the paragraph fixed paragraph indents.
If you do not need to create paragraphs, then it is best to use the keyboard shortcut to move to a new line Shift+Enter.

Working with images.

Graphic 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 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 "twisted" as you like without fear of "wiping a hole" in the image or losing some of the information. Another advantage is the small size of files (compared to bitmaps) and independence from the resolution of output devices (be it a printer or a monitor screen). These factors have made vector graphics likely candidate for use in Internet. True, it is worth mentioning that at the moment Vector graphics does not occur as often as one would like.
Nevertheless, among the actually used vector formats, I would like to note the format Shockwave Flash by Macromedia. To view this format in browser need a plug-in plug-in), freely distributed by the company Macromedia. To date, there are both sites entirely and completely created using this technology, as well as 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 the same rows and columns. Those. bitmap computer file can be thought of as a set of small colored or gray squares that form a mosaic of the 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 advantages and disadvantages. One of the big advantages of raster graphics is the ability to work with halftones, i.e. the ability to transmit the image exactly as it looks in real life. But among the shortcomings, the main problem is the file size. Naturally, the more pixels are allocated for the formation Images, the higher the quality of the transmitted Images, but the file size will also be larger.
If we now return to browsers, then we can say the following that most browsers can display graphic 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.
Insert images on web page.
Embed an image on your web page can be done in several ways:
1. Drag image from windows explorer(that is, directly from the explorer).
2. Drag image from Internet Explorer .
3. Drag an image file from the panel Folder list, right on the page.
4. Using clipboard- copy the image to the clipboard from any other program, and then on the page paste it from the clipboard.
5. Using Add buttons drawing from file on the toolbar Standard.
6. Using the menu Insert  Drawing.
Let's look at these methods in more detail:
Method 1
windows explorer(that is, directly from the explorer) you need to:
in front page
open an explorer window;
in the explorer window, select the file with the picture that you want to insert on your page;
left mouse button drag the picture file to your web page The image will be inserted at the position where the insertion point was on the page.
Method 2
To drag an image from Internet Explorer necessary:
in front page 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);
left mouse button drag the selected image to your web page;
Method 3
In order to drag file with panel image List folders, right on the page you need:
in front page open the page you want to add image;
select the required image file on the panel Folder list;
left mouse button drag the selected image to your web page;
The selected image will be inserted at the position where the insertion point was 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 his 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 Image from a file in the toolbar Standard, That front page 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 to insert an image on your web page you decide to use the menu Insert  Drawing, That front page will prompt you to make a further choice:

Images… - selecting that menu item gives you the opportunity to use the ready-made library of pictures.
From file... - selecting this menu item gives you the opportunity to manually specify 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 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 with a button Add tab Drawings select images, and on the tab Layout select format.
Adding media files.

In addition to simple graphics, like - images in formats * .gif, *.jpg, *.png etc. front page allows you to post on your web pages multimedia files. These include: video clips, sounds…

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

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

Add sound to web page 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 used only to represent structured data. However, they have gradually evolved into a powerful general layout tool. web pages.

Creating tables

The easiest way table creation- use button Add table located on the toolbar Standard.
Another way is with the help of 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 entered text is formatted within the cell in the same way that we are used to formatting it within the entire 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 keyboard shortcuts to move between cells:
Keyboard Shortcuts: Action:

Tab anywhere in the table, except for the end of the last line, go to the next 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 move to the previous cell and select its contents
Enter start a 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 are text fields, radio buttons, checkboxes, buttons, and many other controls. It is enough for the site visitor 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 in the following fields:
Your name:

Your last name:

Your date of birth: year month day

Thank you! And now - on the road!
1. Small, but agile.
Where it happens, it commands.
Will enter the tent -
The hero will turn over.
Who is this?
Flea fly Naughty child
2. Bulging eyes sits,
speaks french,
Jumping like a flea
Floats like a human.
About whom in question?
Cat Frog Parrot

3. How does a seal breathe after diving 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 chicks?

8. What birds cannot fly?

If you need to select multiple answers, press and hold the key ctrl and click the left mouse button on the desired answer

But creating forms on the very page this is only half the job. Since there must be a program that can process the data entered by the user using forms.
Such a program may be hosted on a server; it may be in your website as a separate file, or can be simply written in the code html on your web page.
It is she who determines what will happen with the information that the user entered:

information can be added to the database and various graphs, ratings can be built on its basis ...;
information can be sent by e-mail (this is often used to obtain information about the user in questionnaires of various kinds);
information can be processed right on the spot and the visitor of your site will immediately receive response information (for example, he will receive points for the test, see the information he 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 can be located.
2. Each form must contain at least one of the form elements (although there are usually several of them).
3.Each item forms has a name and meaning. The name identifies the input field, and the value is set to the value selected by the user.
4. One of the form elements (it can be a regular button or any picture) must act as a button Send.

Creating forms in front page.
To add a form to web page, necessary:

Place the cursor where you want to paste shape.
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 Insert menu  Form insert the elements you need sequentially forms by selecting them from the drop-down cascade menu (remembering that all form elements are inserted inside the form area marked with a dotted frame).
After form created, it remains only to fill it with content - elements forms, text, images, tables… (with dimensions forms will change automatically).
Add content forms possible in the usual way. For example, text can be typed or pasted from the clipboard... All actions with added objects are similar.
However form creation- this is just the beginning of the work. After its creation, you need to configure the properties, as the most forms, as well as its elements.

Setting form properties.

To process or save data entered by visitors Web pages, it is necessary either to take advantage of the opportunities provided by FrontPage Server Extensions, or some other program running on web server.
But whichever program you choose, you still have to set the properties of the form and the elements in it.
To open the form properties window:
V Insert menu choose Item Form, and then -
or
call the context menu for the form and select the item in the opened context menu Form Properties.
As a result, a dialog box will open. Form Properties.

1. In Save field results, you must specify what will be done with the data entered in form. You can choose from the following options:
o Send File name- the data will be placed in specified file on web server. This file may be web page, which over time will become longer and longer, or a data file that can then be processed in Excel, Access or any other program;
o Sending Mail address- in this case, each time the visitor clicks Web pages Send to buttons form an email will be generated and sent to the address you specified. 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. In Properties field form, you must specify the name of the form
View modes in front page.
front page offers six different modes for viewing content website:

Page,
folders,
reports,
transitions,
hyperlinks,
Tasks.
For selection desired mode you can use view panel located on the left side of the screen, or in the menu View on the toolbar Standard select the appropriate menu item.

Page
This mode creates and edits web pages. Here you can create empty Web pages and template-based pages to assign themes to pages (a set of page presentation styles on the screen). In this mode, you can add and format text, style pages using graphic and video images (conversion of a number of 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. front page for 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 allows you to get more detailed information about files and folders than is provided in the view mode Page.
Reports
Provides you with more than a dozen reports containing a variety of information about Web site, open during FrontPage.
Transitions
Designed to view the site hierarchy. In this mode, you can manipulate the hierarchy by dragging the rectangles (each representing a specific web page).
Hyperlinks
Demonstrates a system of hyperlinks that link pages together Web site(as well as a system of hyperlinks to other nodes), provides verification of their integrity and the ability to change.
Tasks
This mode is for task management Web site(adding, deleting, executing, setting the priority of execution, as well as tracking the status of tasks).

Download for free front page you can follow the following link:

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

Can be created without JavaScript and/or jQuery. CSS-properties display, padding, pseudo-class:hover are used for creation. A working menu is available (Click "Fork" if you want to style the HTML menu in your own way). Video duration ~12min. The note is intended for novice layout designers, web developers who are taking their first steps in learning HTML basics and CSS; for those who have studied the course "Fundamentals of HTML5 and CSS3".

Creating a Simple Dropdown Menu

To create a menu the site usually uses a structural block HTML nav element And unordered list. In one of the list items, another list is embedded, so that it is not included in the hyperlink. It would be possible to place ul inside a as well, but in my opinion this is not a good idea, because the :hover pseudo-class works with li elements too!

In our case, we do not consider the option when dropdown list there are also nested lists - this task is not difficult in itself, but it will cause difficulties for a novice coder. Also note that building the menu can be done by finding or writing the appropriate JavaScript.

For the convenience of working with markup (suddenly we will meet another nav), let's add a CSS class to our structural navigation element; hyperlinks will be stubs, but you can write http: // site instead of # 🙂

HTML markup for a menu with a dropdown submenu

The main thing in CSS: clearing the default values ​​of the HTML elements included in the menu; hiding the future dropdown sublist ( submenu) and displaying it when hovering over the parent HTML element - using the pseudo-class:hover

CSS rules for the dropdown menu menu ul li, .menu ul( display: inline-block; ) .menu ul( position: relative; margin: 0; padding: 0; background-color: #f63; ) .menu ul ul( display: none; position: absolute; background-color: #369; margin-top: 10px; margin-left: -10px; ) .menu ul a( color: #fff; text-decoration: none; ) .menu ul ul a( color: #fff ; text-decoration: none; ) .menu li:hover ul( display: block; ) .menu li:hover li( display: block; )

The created menu is not perfect and can be improved (think how). Good luck with your development and may the creation of such menus never be difficult!

Delete… button (6)
allows
dedicated		selector
	Custom
styles.			on the button
Create...			opens
dialog			Creation
style in which			created
	selectors. pressing
to the Change… button (8)
opens a dialog
Change		style, which			Figure 5.40 - Dialog box Style

completely coincides with the Create style window and is used to change the description of the selected selector. In case of a style change for a tag from the HTML Tags list, this tag selector is moved to the list Custom Styles.

	When working with a dialog box
	Change	(Create) style
	the following fields and buttons are used.
	In the Name field (to select) (1) : enter
	selector name (tag selector name must
	match the name of the tag itself; Name
	class selector starts with a dot (.).
	The Format button (2) allows you to get
	access to the drop down list
	you can select the following items:
	Font… -		opens	dialog	Figure 5.41 - Window Change style
		Font,	allowing to make

font style settings.

Paragraph… - opens the Paragraph dialog box, which allows you to set paragraph indents (left and right) from the browser window, indent for the first line, adjust the spacing between lines and paragraphs, adjust the spacing between words in paragraphs;

Border… – opens a dialog box Borders and shading, with which you can set the border for the selected paragraph, fill the paragraph with any

color; Numbering… - opens the List dialog box, with which you can

create numbered, bulleted and other lists; Position… - opens the Position dialog box, through which

You can precisely place different elements on the page.

The Sample field (3) shows how the object to which the created style will be applied will look like.

The Description field (4) displays a text description of the attributes of this style.

The drop-down menu Style type (5) is active in case of creation class selector. When the Sign type is selected, the word span is added to the beginning of the selector name.

	tag selectors are applied automatically after selection
	relevant commands;
	by selecting them from among the other styles in the dropdown
	Style list (Fig.5.42) on the toolbar
	formatting;
	by choosing		from the drop-down box Class: Dialog		Figure 5.42 -
					Style List
		Change
	(Fig.5.43), which opens
	button Style… from various
	dialog boxes(For example:
	drawing properties,			Properties
	tables, cell properties,
	List, Break, Properties
	horizontal line).
			use
	implemented		their styles

must be configured for each

web pages.

Figure 5.43 - Window Change style

5.4.3. External style sheets.

In this case, a separate file is allocated to define CSS styles, which will be referenced by web pages. This approach:

ensured centralized management css styles on all web pages

(the changes made will be automatically applied immediately to all web pages that link to the file containing CSS);

the total size of the website is reduced;

increases the speed of loading web pages.

For creating external file, containing cascading style sheets, you must perform the following steps (Fig.5.44).

Run the command File → New and select a command More page templates…

In the Page Templates dialog box that opens, select the Style Sheets tab (2), which shows the style sheet templates included with FrontPage

For self-creation style sheets select template Regular style sheet(3) and click the OK button.

Figure 5.44 - Creating an external style file

The resulting page with the .css extension must be saved (command File→Save) to one of the folders of the website with the required name

in Latin letters and extension .css .

Create description for tag selectors And class selectors, using the Format→Style... command, which opens the Style dialog box (Fig.5.40), described in the previous section.

The created style sheet needs to be linked to the pages of the web site. For this it is necessary.

Run command Format→Style Sheet Links... .

IN dialog box that opens Connect with

style sheet		can be installed
the following options:
switch all pages (1) applies
styles for all selected pages of the website;
switch	dedicated	pages
applies styles to the current page or web
pages selected in the Folder List pane;
the Add… button (3) is used to add
				Figure 5.45 - Dialog box
the Delete button (4) is used to deleting a file,				Link to style sheet

with cascading style sheets to web pages (if multiple cascading style sheets are used);

The Edit button (7) opens the URL selected in the Address window: (8) css file for editing.

Press the OK button.

Selectors are applied to selected objects in different ways:

tag selectors are applied automatically after selecting the appropriate commands;

class selectors apply:

By selecting them from among other styles in the Style drop-down list (Fig. 5.42) on the Formatting toolbar:

By selecting from the Class drop-down box: of the Modify Style dialog box

(Fig.5.43), which is opened with the Style… button from various dialog boxes

(for example: Picture Properties, Table Properties, Cell Properties, List,

Gap, Horizontal Line Properties).

5.5. Frames (frames) in a FrontPage 2003 application.

Frames - a tool for dividing the browser window into several areas

(frames), each of which displays the content of a separate web page. Each area can have its own scrollbars and viewing it with them does not affect other areas. With FrontPage 2003, you can create various frame structures, insert inline frames, and depending on

the nature of the information provided to organize appropriate hyperlinks. All commands related to the frame structure are translated with the word frames.

To organize a frame structure, it is necessary (Fig. 5.46).

Figure 5.46 - Creating a page of frames Run the command File→Create and select the command More page templates…

(1) from the Create task pane.

In the dialog box that opens Page templates, select the tab Frame page (2), which shows templates (3) of web pages with a frame structure,

included in MS FrontPage 2003.

Select the most appropriate template and click the "OK" button.

The window of the new frame web page (Fig. 5.47) will be divided into parts in accordance with the selected structure. This page must be saved (File→Save) to one of the folders of the web site with a name (1) that is required with Latin letters.

Figure 5.47 New frame web page

1) Button Set start page...(2) allows you to select a ready-made web-5

website page in window Adding a hyperlink.

2) Button Create page(3) loads a new blank web page into the frame,

which can be edited in the usual way.

If some of the frames are filled using the button Create page, then when saving the page of frames (File → Save), each new web page is saved separately (names are required with Latin letters).

When working with the frame page, another Borderless button (4) appears on the view button bar. This mode edits the content that will be displayed in the browser if it does not support displaying frames.

Work on web pages included in the frame structure is possible both separately and through the frame page

To select one of the frames, you need to click on it with the left mouse button. The active frame differs from the others by a colored frame (5). If you left-click on the outer frame of the frame page, the entire frame structure will be selected. Frame borders can be moved by pressing the left mouse button.

To work with the selected frame, you can use the menu commands

Framework.

The Split Frame command allows you to split a frame into two parts vertically or horizontally.

The Delete Frame command removes a frame from the frame page. However, if the web

the page loaded into this frame has been previously saved, it remains in the website structure.

Team Open page in new window opens the web page of the frame for editing separately from the frame structure.

Team Frame property... opens a dialog box

Frame properties , in which you can set various frame parameters: name, description, dimensions, width and display of borders, scrollbar properties, padding.

Figure 5.48 - Built-in frame

Another option for using frames is to insert an embedded frame (frame) into a regular web page (Fig. 5.48) with the command Insert→Embedded Frame. IN

As a result, in the place where the cursor was placed, a frame is inserted, which can be filled in two ways: Set start page... or Create page.

Clicking the left mouse button on the border of the frame, selects the frame for resizing. Double-clicking the left mouse button on the border of the frame opens the dialog box Inline frame properties where you can set various options

frame: frame name, title, dimensions, padding, alignment, alt text.

		organizations
hyperlinks
pages		frame
structures		necessary with
	dialog
End frame (fig.5.49)
and indicate where
boot		new object.
Field Current			page		Figure 5.49 - Dialog box End Frame

frame (2) allows you to select a frame to load a new object by clicking the left mouse button. In the list (loading into the same frame from which the hyperlink was organized), (loading into a new browser window), (loading into an embedded frame).

5.6. Forms in a FrontPage 2003 application.

Forms allow you to organize text fields, radio buttons, checkboxes, buttons, and many other controls into web pages. When a user submits a completed form in the browser, the values ​​of all form fields are sent to the form handler. A form handler is a program on a web server that is executed when a form is submitted by a site visitor.

FrontPage 2003 supports various form engines hosted on Web servers running FrontPage Server

Extensions (server Microsoft extensions FrontPage is a set of programs and scripts that support the creation of pages in Microsoft FrontPage and extend functionality web server), SharePoint Team Services version 1.0 (Microsoft), or Microsoft Windows SharePoint Services 2.0. These handlers accept form results and perform various actions on them. In FrontPage application

scripts are also supported, such as ISAPI, NSAPI, CGI, and ASP.

There are three ways to create a form in MS FrontPage 2003.

1) Adding an empty form with buttons Send and Reset , command

Insert→Form→Form.

2) Inserting the first form field with the commandInsert→Form→Form Field. A form area with Submit and Reset buttons is added automatically.

3) Select and use an available form template or form page wizard by using the following steps.

In the task pane Page creation(command File→Create) you need to select

the More Page Templates… command and the General tab.

Selecting one of the templates Guest book, Registration form, Search page, Form feedback allows you to create a new web page with standard form.

Template selection Form Page Wizard launches the form page wizard to determine the number, type, and content of form elements.

The form area is displayed in dotted frame, which is only visible in Design view.

To set the properties of the form, you need to set the cursor inside the form, and execute the command Insert→Shape→Shape Properties… or right-click in the form area and select the context menu command Shape properties.... As a result, the Form Properties dialog box (1 Fig.5.50) opens, in which various form parameters are set.

Section Saving results(2) defines the end scenario for processing form data. If you use your own scenarios, you must set the switch in another place (3) and select from the list Custom script....

Figure 5.50 - Setting the form parameters

Form Name field: (4) serves

to specify the name of the form.

End frame button

opens a dialog box

The end frame in which

you can select the window from which the request will be made.

Options… button (6)

opens a dialog box

Handler Options

forms (7). In the Action field:

(8) specify the name of the script to process the form or mailto: e-mail to send the form data to the address Email e-mail. In the Method: (9) field, select the method of data transfer (GET method of data transfer through the address bar, POST - method of data transfer in the HTTP request body). In the Encoding type field: (10)

specifies the encoding type of the form data when sent to the web server. Possible encoding types: application/x-www-form-urlencoded - form data is encoded as name and value pairs, used by default; multipart/form -data - form data is encoded as a message with separate parts for each control on the page, used to submit forms containing files; text/plain – form data is encoded as plain text, without control or formatting characters,

used to send data to an email address.

More... button (11) open window Additional form properties

to edit hidden form fields (buttons Add… , Edit… ,

Delete).

To add a form field to the form, you need to execute the command Insert → Form

and select the desired form field from the list. To resize a field, select it and drag one of its sides with the left mouse button. The parameters of any form field are set in a dialog box, which can be opened by double-clicking the left mouse button on the field. Field Transition sequence

determines the sequence in which form fields are filled in the browser. The Check... button in this window can only be used if you are using the standard FrontPage 2003 form handlers. The Style... button

textual

used to enter a short

messages, such as names and

electronic

Options

fields (name, initial value,

established

interactive

the Text Box Properties window.

Figure 5.51 - Form fields

Text

are used to enter one or more lines of text, such as a comment.

This field is scrollable, which allows you to enter texts of different lengths into it. Field parameters (name, initial value, character width, number of lines) are set in the dialog box Text field properties.

File upload field(3) – serves to send a file to a web server in a specified folder of a web site, consists of a field for entering a file name and a browse button that allows you to open the File Selection dialog box. Field parameters (name, width in characters) are set in the dialog box File Upload Field Properties.

Checkbox (4) - serves to organize the selection of an element, the user can check or uncheck the box at his discretion. The field parameters (name, value, initial state) are set in the Checkbox Properties dialog box.

Switch (5) - serves to organize a selection from a list in which you can select only one value (several switch fields with the same group name). Field parameters (name, value, initial state) are set in the dialog box Switch properties.

Drop-down list(6) - serves to organize the selection from the drop-down list of one or more options. Filling in the field (buttons Add…, Change…, Delete, Up, Down) and its parameters (name, height in rows,

multiple selection permission) are set in the dialog box

Dropdown properties . When filling in the field (buttons Add…,

Edit... ) opens an additional dialog box Adding or

Variant change. In this window, the name of the variant is specified (the Variant: field),

the value that will be passed on form submission if this option is selected