Description of the Microsoft Office Frontpage program. Creating Web Pages Using FrontPage Creating a New Blank Web Page


Included in the program package Microsoft Office includes several applications that allow you to create, edit and host Web pages. One of them is a relatively simple program FrontPage . With its help, you can create very complex pages that will satisfy the needs of even a professional Web designer.

When creating a Web page, you should strive to give it an attractive appearance, because an attractive page is visited more often. At the same time, the page should combine two contradictory properties - attractiveness and a minimum of memory. You can use a limited number of low-intensity means, for example, flowers instead of drawings, to create a sparse, but very attractive page, and, conversely, you can equip it with many drawings, colors, formats and other markup elements, the set and placement of which will give a page that can be considered an example of rich bad taste . The process of creating a Web page is creative, which is why it is often called Web design. It is known that some Web designers spend several months creating a not so complex page, returning to it many times, looking for the most expressive way to implement it, while a page with the same content could be created in no more than hour of work. If a suit, once sewn, is difficult to alter several times, then a Web page can be “altered” and improved as much as necessary, in exact accordance with how a poet improves his work, bringing it to the pinnacle of perfection.

However, not everyone shares this opinion, reasonably noting that a Web page is information for distribution, and for this it is not at all necessary to turn it into a work of art, especially since this takes a lot of time.

A practical conclusion follows from this: header, title, and advertising pages should be made attractive, and pages intended for the dissemination of “dry” information, for example, texts of orders, job descriptions, any plans, etc., should have a minimum of markup.

1.FP interface

Front Page, a program for creating and editing Web pages, is located in the folder Office programs Microsoft Office.

After launching FP, a window appears on the screen, the appearance of which is shown in Fig. 1. For this example, this manual, which was written using FP, is open for editing in the program window.


Rice. 1. Program window Front Page

The program contains a menu and several toolbars. By the time a FP user decides to take on Web design, he or she is typically well-versed in the Microsoft Office family of Word programs, so FP's Microsoft-style interface, which is very similar to Word's interface, is not will create special difficulties in work.

The program interface - menus, panels, buttons and other elements - is more convenient to explain as you need its elements during the creation or editing of Web pages, examples of which will be discussed in this chapter.

When developing a page, the program automatically creates a markup file, the text of which FP writes in HTML (HyperText Markup Language). You can make changes to this file manually (moreover, the program text can be compiled in a regular text editor, even a simple one, such as Notepad, but this is too cumbersome). To go to the built-in FP text editor, click on the shortcut at the bottom of the window Code, then make changes in the text editor. If the developer is not confident in his professionalism, then it is better not to make changes to the HTML text, since editing errors will be difficult to correct. To return to the page you are marking up, click on the shortcut Constructor.

To see how the page will look in the browser, click on the shortcut View. It should be noted, however, that only very simple pages are displayed correctly in this mode. Therefore, it is better to view the page in a professional browser, for example Firefox. To do this, find the page file in the folder and open it in a browser (usually all Web pages open in a browser).

2. Create a new Web page

To create a new Web page, click on the button Creating a new regular page located on the panel Standard. Some buttons of this panel with corresponding comments are shown in Fig. 2.

You can create a new page differently. On the menu File click on the line Create. The program on the right will display a window with standard page templates. You can choose a template from it and use it as the basis for a future page. If you need a blank page, you need to click on the template Empty page.

In FP, you can also create frames that allow you to see multiple Web pages on your monitor screen at the same time. Frames are multi-window Web pages. A beginning Web designer should refrain from using frames.

Now you can save the page. To do this, click on the button Save, then save the page as a file on your computer's disk. When saving a page, it is better to immediately create a separate folder for it with the name that you are going to give the file. Web pages are usually saved in files with the extension .htm or .html(from the name of the language HyperText Markup Language - hypertext markup language). For example, if you are going to save a file under the name about.htm, then you should create a folder named about, in the area of ​​the disk in which your Web pages will be located. Before saving the first page, it is better to immediately create such an area in the form of a folder, for example, a folder named Fedorova's web pages. Now you should create the mentioned folder in it about, and in it – save the page about.htm.

3. Web page properties

Next, you need to fill in some important page properties with values. To do this, right-click in the page area, then in the context menu - on the line Page properties. A dialog box will appear for entering page properties (Fig. 3). The window has five tabs

 Are common, Formatting, Additionally, Other, Language .

In Fig. 3 the bookmark is activated in the window

Are common. In lineName you need to enter the page title.

Here you can connect an audio file in the zone

Background sound. The sound will accompany the viewing of this page on the computer that opened it. Of course, in order to listen to background sound, a speaker must be installed on the user's computer. Typically, background sound is played by scrolling through a sound file with the extension .wav. To connect the file, click on the button Review and use the dialog box to connect such a file. For a regular page, it is not necessary to include an audio file.to create a page background. The background is the main background of the page. The background can be color or drawing. The view of the page properties window on the Background tab is shown in Fig. 4.

If you need to select a background in the form of color, then you need to click on the Background list button

and select a color from a standard set of colors. The initial state is set to the default color. Typically the default color is white.

If the suggested colors do not suit you, then click on the color Custom(custom). In the dialog box that opens, you can select a color from any of 16"777"216 shades. The window for selecting a custom color is shown in Fig. 5.

To select a custom color, you must first assign a base color from the main palette, then click on the approximate color in the palette square on the right (this point is marked with a cross), then select the desired shade in the column on the right (it is marked with a triangle next to the mouse cursor). In the "Color/Fill" box you can visually evaluate the selected color. To the right of it, the spectral characteristics of the selected color are shown. These characteristics can be changed manually.

If the selected color is a non-standard color (shade) and needs to be used several times in an editing session, then you can place it in the “Additional colors” list located under the main palette. To do this, before selecting, click on the additional color box, select a shade and click on the “Add to set” button. To exit the window, click on the OK button.

If the background of the page should be a picture, then you should open the required picture on this tab

. It is advisable that this file be located in the folder in which the page file is stored. In Fig. 6. shows an example of a background in the form of a picture stored in a file butterfly.gif.

As can be seen from Fig. 6, the background is a repeatedly repeated pattern depicting a butterfly ( butterfly).

For comparison, in Fig. 7 shows the figure itself separately.

Let us immediately note that the above example is an example of a poor choice of substrate, since the image obscures the page margin and makes it, as they say, “dazzle in the eyes.” Its only advantage is that it clearly shows how the drawing creates the background on the page.

If you need the background to be static, that is, so that when scrolling a long page in the browser the background remains motionless, you need to set the option Make it a substrate.

In practice, lightly saturated images are usually chosen as backgrounds in order to create the desired background, but not focus the attention of the page viewer on it. However, the choice of background is a matter of taste

 Web designer.

Typically, background images have the following formats:

 bmp, gif, jpg , png .

It should be kept in mind that a picture is usually the most memory-intensive element of a Web page. Therefore, it takes the longest time for the browser to download it from the server. If the connection speed is low, and the page being loaded contains several large images, then loading this page may take a while. The viewer of such a page may get tired of waiting for the download to finish and cancel it. Therefore, you should strive to minimize the volume of drawings and their number on the page.

It is considered that the background has acceptable dimensions if the volume of the picture does not exceed 1–5 kilobytes (K). It is better if it is less than a kilobyte. For comparison, let's say that the volume of the Web page itself usually does not exceed 10–20 K. Only pages with a large amount of text are large. The reason is that a Web page is a program (instructions) about how and what to place on the user’s browser screen. For example, if in such and such a place on the screen you need to place a picture of 150 K in size, then in a Web page the instruction for this purpose can take only 50 bytes, i.e. 3000 times less than the picture itself, which is transferred to the computer of the viewer separately from the Web -pages. Since the number of such instructions is small, the size of the page itself is also relatively small

On the bookmark

Formatting You can also set the text color. Here you can set the colors of text hyperlinks that will be displayed in the browser viewing the page: the color of all text hyperlinks, the color of hyperlinks that the user has already accessed, the color of the hyperlink on which the mouse cursor is hovering.

On the bookmark Additionally You can set the page indents from the upper left corner of the browser viewport. By default, padding is set to 8 pixels.

On the bookmark

 LanguageYou can set special text encoding languages ​​for page saving and page loading.

4. Using tables

Tables are perhaps the most effective and indispensable means of marking up Web pages. If you can do without a background, then without a table it is almost impossible.

Every table consists of cells that are arranged in rows and columns. You can merge individual cells, set the indentation of internal content from its borders, set the distance between cells, set the position of elements placed inside them, create backgrounds separate from other cells, create outlines, insert other tables inside cells, and much more.

Inserting a table

In order to insert a table into a page, you need to execute the menu command

Ttable/Insert/Table. In the window that opens, which is shown in Fig. 8, the number of lines should be set and columns. There you can also set the position of the table on the page. Usually the default position is left. However, if it is necessary for the table to always be oriented in the middle in the horizontal direction when viewed in the browser window, then you need to set the option center alignment.

The border size option is designed to set the thickness of the lines that border the table and cells. If it is set to zero and the checkbox is checked Collapse table border, then the borders will not be visible in the browser. This allows you to use an invisible table for page layout.

Property

 Cell field is intended to indicate padding in pixels from the internal content for all table cells. Property Cell spacing allows you to set the distance in pixels between all adjacent table cells. Set width is intended to set the width of the table in pixels or as a percentage relative to the width of the viewport, regardless of the size of its contents. By default it is disabled. This means that the size of the table will be determined by the size of its contents.

If you need to set the style and background markup of the table, this can be done in the same window.

When you finish marking the table, click OK.

Table cell layout

Operations on individual cells or the entire table should begin by selecting the cells. You can select with the mouse, keyboard or using tools

 F.P. To select with the mouse, you need to place the mouse cursor on some cell of the selected area, press the left mouse button and, while holding the key down, smoothly move it over the cells. To select with the keyboard, you need to place the keyboard cursor in a cell, press the Shift key and, while holding down the key, press the desired keys for moving the keyboard cursor (up, down, left, right) until the desired area of ​​cells is selected. You can select a single column or row, as well as the entire table.

For associations selected cells, you need to move the cursor over any of them and press the right mouse button. In the pop-up context menu, click on the line Merge cells. You can delete cells in the same way.

If it is needed smash one or more cells into several rows or columns, you need to select them (when splitting one cell, selection is not required), run the command Split cells. In the splitting window that appears, you need to indicate how to split – into columns or rows. Then you should specify the number of columns or rows. This window is shown in Fig. 9.

Here you can set the position of its contents horizontally or vertically. To do this, select the desired horizontal position (center, left, right) or vertical position(at the top, in the middle, at the very bottom, relative to the axis). In Fig. 10 vertical position of the cell – above(when placed, the internal elements will be pressed against the top edge of the cell), horizontal – in the center(content will be centered).

You can set the cell width and height in pixels or percentages.

In the background section, you can set the cell background as a color or pattern in the same way you program a page background.

If you need to assign the same attributes to several cells, for example, set them to the same background, then this can be done in one step. You should select such cells, then mark them in the described way. If you need to assign some attributes to all cells, then it is better to assign them to the table itself. To do this, you need to click on any cell and execute the same command.

5. Inserting and formatting text

To insert text onto a page, you need to click the mouse to place the keyboard cursor in the desired location and enter text there from the keyboard or copy it from any other document using the Windows clipboard. In this way, you can enter text directly onto the page or into table cells.

Formatting refers to the purpose of the font, its size, color marking, boldness, italics, underlining, horizontal text orientation and a number of other actions. These operations are performed in accordance with the standards adopted in the Word editor: first you need to select a section of text, then apply a formatting operation to it.

Difference from Word editor is only that when you press a key Enter (to insert a new paragraph) there is too much space between paragraphs. If you want the spacing between paragraphs to be the same as between the lines of one paragraph, press the key Shift and, without releasing it, the key Enter.

6. Inserting hyperlinks

Hyperlink is any element of a Web page that can be assigned a link to another Web page, an email address, a picture, or, in general, any file or bookmark on the same page. They are activated by clicking on the hyperlink. You can identify a hyperlink on a Web page when viewing it in a browser by the appearance of the mouse cursor: if the element is a hyperlink, then when you hover over it, the cursor takes the form of an icon.

To create a hyperlink, you first need to select the page element that will become the future hyperlink. If the hyperlink is text, then to select it you should smoothly move the mouse over it with the left key pressed or the keys for moving the keyboard cursor with the key pressed

 Shift. If the hyperlink is a picture, then to select it you just need to click on it., the appearance of which is shown in Fig. 12.

If the hyperlink should be a pointer to another page located on the disk of your computer, then you need to click in the window Fig. 12 click on the button with the folder image and select a Web page on the disk (usually a file with the extension html or

 htm ) . In this case, it will appear in the address bar relative address file with a web page. The relative address of a page that is in the same folder as the page being created is simply the file name, for example "photo2.htm". If the link points to a file outside of this folder, then the hyperlink may take the form of the string "../../HomePage.htm", i.e., a link to the HomePage.htm page on the same computer, but in a different folder that is located two levels above the current folder. Relative addresses are very useful when creating a group of Web pages that are located on the same server but in different folders and are connected by hyperlinks. After preparing the pages on a regular computer, you can send them to the Web server without fear that the connection between the pages and the hyperlinks will be broken, since on the server the relative structure of their placement will remain the same and, therefore, the hyperlinks will “work.”

For creating absolute

addresses, you must enter the full address of the page. For example, if you need to create a hyperlink to the website address of Moscow State University, then you need to enter the text of the domain name in the URL line http://www.msu.ru. You can enter text indicating the IP address, for example http://192.206.228.46.

To create such a hyperlink, enter text like this in the address bar mailto:address. For example, if it is necessary that after clicking on a hyperlink, an email client will be launched to send a letter to the address o [email protected], then in the address input line you need to enter the text mailto:o [email protected] . You can also click on the button with the image of an envelope and in the window that opens, enter the same address without specifying the prefix mailto:.

Sometimes you need to create a link to a page that is already in the browser. For example, you need to quickly return to the top of the page, to some paragraph, etc. Typically, the need for such links arises on those pages that contain a large amount of information. The address of such a hyperlink is called bookmark.

Before creating a hyperlink to a bookmark, the latter must first be created. To do this, you need to select a future bookmark (a fragment of text, a picture, etc.) and run the command Insert/Bookmark. In the window that opens, the appearance of which is shown in Fig. 13, enter the name of the bookmark in the input line and click on the OK button. In the example shown in Fig. Page 13 already has one previously created bookmark Tab 1, and the text is prepared in the input window Bookmark 2 another bookmark. Next, you should exit the bookmark creation window, select the hyperlink element to the bookmark in the page creation window, and click Bookmark(Fig. 12) select the desired bookmark from the list. Its text will be placed in the address bar. For example, if a bookmark is selected Bookmark 2, then the hyperlink in the address bar will look like a string #Bookmark 2. After clicking OK, a hyperlink to the bookmark will be created.

Programming the display window

After clicking on the hyperlink to Web page it starts loading into the browser. It usually loads into the same window as the calling page. If you need the page to load in a new window, you should use the window in Fig. 12 click on the button to the right of the input label Frame selection. In the window that opens, select the line New window. Now, after clicking on such a hyperlink, one window will be launched in the browser and the downloadable content will appear in it.

In addition to the one discussed, there are several other options for presenting the called page in the browser. They belong to more complex ones - frame pages, which have significantly greater opportunities for Web design. The design features of frame pages will be discussed below.

7. Inserting non-text elements

To insert non-text elements into a page, use a menu item Insert. The same operation for some elements can be duplicated from FP panels.

The menu list is shown in Fig. 14. Lines that contain submenus are marked on the right with a triangle-shaped pointer. Operations that can be duplicated using hot keys are marked with the name of the key combination.

Rice. 14. Main
menu list Insert

Here are some of the most commonly used non-text Insert menu items:

  • Gap
    • . Move to a new paragraph without a special interval (same as Shift + Enter);
  • Horizontal line. Insert a horizontal line;
  • Symbol.
    • Inserting a non-standard character, i.e. a character that is not on the keyboard;
  • Date and time. A standard stamp for displaying the date and time of updating the page being edited. The developer can set the output mode to show only the date or the date and time of day. There are several stamp presentation options to choose from. For example, "February 14, 2001 02/12/25". If such a stamp is inserted onto a page, this means that it was last edited on February 14, 2001 at 12 noon. 2 minutes. 25 sec. by computer timer;
  • File. Inserts the entire contents of the file selected from disk. The content is inserted at the location where the keyboard cursor is positioned. In this way you can insert, for example, the text of a document;
    •
  • Drawing
    • . Inserting a picture from a file;

    Let's look at some features of inserting these elements.

    Horizontal line

    To insert it, click in the desired place on the page, select the line from the menu Insert/Horizontal Line and click on it to insert the element. If you need to change the attributes of a line, move the mouse cursor over it, right-click to bring up the context menu and click on the line WITHproperties of a horizontal line . A window with the same name will appear in which you can change the line attributes: width, height, color and other attributes.

    Often there is a need to insert a line with already assigned attributes in different places on the page. To do this, click on the line, then on the button

     copying on the panel Standard to copy the line to the clipboard. Now you need to click on the desired place on the page, then on the insert button to paste the contents of the buffer at the selected location. In this way, you can insert a line multiple times in different places on the page.

    Note: The described method can be used to copy any elements of a Web page.

    A picture is the most important element of a Web page. It's rare to find a page that doesn't have a drawing on it. In addition to the main role of carrying an image, drawings are used to stylize inscriptions, create various lines, frames, depict graphs, i.e., wherever it is necessary to present information in the form of a graphic image.

    To insert, you need to click on the place on the page where the picture should be located, execute the command Insert

    /Drawing/From file or click on the button Insert a picture from a file on the panel Standard(Fig. 5.2). In the window that appears, select the file with the picture on disk and click OK.

    After inserting, you can mark up the picture or leave it unchanged. To mark up, you need to right-click on the picture, then in the context menu on the line

     Picture properties. In the dialog box, the appearance of which is shown in Fig. 15, you can mark the picture.

    On the bookmark Are common the name of the file representing the drawing is specified. You can change the picture by selecting a different file.

    In line Text You can enter text to represent the tooltip. When a user in a browser hovers the mouse cursor over a picture, it will pop up under the cursor for a short time.

    If the picture should serve as a hyperlink, you can select the hyperlink address on the same tab.

    If you need to create indents for a picture from adjacent page elements, you can use the properties intervals for horizontal padding on the left and right and for vertical padding at the top and bottom. In section Size You can change the size of the picture and its proportions. The picture can be stretched and compressed in the desired direction using the properties of width and height. Dimensions can be specified in absolute units—pixels—or in relative units—percentages relative to the actual dimensions of the picture. If it is necessary for the proportions of the picture to be preserved during deformation, you should set the option Maintain proportions.

    Picture formats

    There are drawings made in the format raster graphics and in format vector graphics.

    In raster graphics, information about all the pixels of the picture is recorded in a file, and each pixel is represented as a sequence of bits that store the characteristics of the pixel - color, brightness, contrast, coordinates and other characteristics. Raster formats can be called natural, because information about the picture is stored in the form in which it is presented on the monitor screen, so it takes a minimum of time to perform output operations. However, bitmap graphics usually require a lot of memory to store them, so placing only small graphics on a page is justified. In order to reduce the size of a raster image file, compression methods are used. Compared to the original, a compressed drawing usually takes up tens of times less memory. Compressed bitmap images load faster, but take some time to decompress the image.

    Vector graphics are mainly used to depict geometric shapes using mathematical formulas. This method of representing a drawing is very effective, since it does not require storing data about each pixel, and representing a drawing is reduced to mathematical calculations and execution of instructions for forming a graphic object. Typically such drawings are used in design programs, for example

     CAD.

    There is also metafile format, which combines both types of graphics. An example are files with the extension .wmf. Such files are used, for example, to represent drawings in the popular Word editor, when in order to give text documents the required appearance, the dimensions of the drawings have to be changed frequently.

    There are two widely popular raster formats currently in use among Web page developers: GIF(Graphics Interchange Format), developed in 1987 and improved in 1989 by CompuServe, and JPEG, which received the abbreviated name of the development group Joint Picture Experts Group.

    In GIF format (files with the extension

     .gif) the image is encoded using the block method. Once received on the computer, it is decoded and played on the monitor screen. The GIF format provides the smallest amount of file memory for drawings that have a limited number of colors.

    Using the GIF format allows you to create many effects, including transparency

    (transparency). This effect is widely used when a drawing needs to be presented in a form other than rectangular. In these cases, part of the rectangular image is painted with a special transparency color, and the other with regular colors. Once placed on the page, the design in those pixels that are filled with the transparency color is replaced by pixels in the background color, and the remaining pixels are reproduced in the usual way, thus creating the effect of transparency. Now the same design can be placed on substrates of different colors without fear that if the colors do not match, unwanted rectangular contours of the design will be reproduced. You can use many image editors, such as Photo Shop, to create transparent GIFs.

    Another effect is the way the downloaded GIF is rendered in the browser. If the picture is saved in the format interlaced(interleaved), then when transmitted to the browser it is loaded from different parts of the image. At a low connection speed, the effect of a gradual appearance of the picture is created, from blurred at the beginning of the download to clear at the end. The advantages of interleaved format graphics are obvious because often, long before the page with the unwanted graphic has finished loading, the user can stop loading, thereby saving on the time that he would have to spend waiting in ignorance for the entire regular-format graphic to be transferred. The FP program allows you to create a striping effect for any GIF-drawings.

    GIFs can be used to create primitive animation that is used on Web pages to animate ("animate") its content. Animation effects undoubtedly decorate the page and often serve as a means of attracting attention to its individual fragments. The downside is the increased volume of files containing animated drawings. To create animated GIFs, you can use many programs - from simple to very complex, allowing you to create entire animated films in one file. An example of a simple animation program is MP Gif Animator (by V. Pham). A powerful animation program is Ulead GIF Animator Lite (a product of Ulead Systems).

    In JPEG format (files with extensions .jpg, less often .jpe or jpeg) it is preferable to store multi-colored images, such as nature photographs, high-quality images with a rich color palette, in compressed form. When saving a drawing in graphic editors (for example, Photo Shop), you can control the file size and the quality of the drawing, which are inversely related to each other. This property is often used by Web page developers in order to minimize files with pictures, losing somewhat in their quality. Often such images are practically indistinguishable visually, but they can differ by 1.5–3 times in the size of the corresponding files.

    You cannot ignore files with drawings in BMP format (files with the extension .bmp). This is one of the first graphic formats. Drawings in this format take up a lot of memory, but it is still used today, but only to represent very small images.

    Recently, a new PNG image format has been developed specifically for the Web, which should replace the GIF format.

    A serious resource for reducing the size of graphic files is special image processing in graphic editors. Quite often it is possible to reduce the file several times with virtually no deterioration in the quality of the drawing. In Fig. Figure 5.16 shows an example of editing an image using the Photo Shop graphic editor.

    When converting a photograph using a scanner into a file, even in such a small area of ​​the image as the collar of a white shirt, many pixels with different color characteristics were formed. Preserving these features when compressing an image requires an “individual” approach to each of them, which results in an unreasonably large file size.

    On the left in Fig. Figure 16 shows the graphic editor toolbar, in the middle below is a photograph, at the top is an enlarged fragment of the photograph (the right side of the collar), on the right is an enlarged view of the retouched fragment. The retouching involved making the collar of the shirt uniform. It is clear that if you make the pixels displaying the named fragment single-color, the quality of the photo will not deteriorate, but when saved by compression, information about all single-color pixels will be recorded once, as a result of which the file size has become smaller. A similar operation was applied to various fragments of the photograph, which made it possible to reduce the file size by 2.5 times. Retouching is done using various panel tools, including the

     Pencil Tool (pencil), which is highlighted in the active color on the panel.

    To minimize the size of picture files, you can also use special programs that remove from them non-graphic information placed by graphic editors when developing and saving a picture. For example, the author of these lines uses the Advanced GIF Optimizer program from Gold Software. Using optimizers can often reduce the size of a GIF file by another 10-60%.

    To speed up loading of a picture, you can cut it into separate parts and then place these parts on pages in different table cells. When viewed in the browser, a pieced-up drawing appears the same as a non-fragmented drawing. The advantage of fragmentation is that images, like other page elements, are loaded into the browser in parallel, which helps speed up page loading. In addition, the fully loaded fragment immediately appears in the browser, which allows you to create the illusion that the picture will load quickly. Coupled with the ability to transfer GIF and JPEG pictures and editing resources, you can achieve a noticeable acceleration in the loading of pictures on pages.

    8. Pages with frames

    These pages are the first to be used for the Netscape Navigator browser. One such page represents a set of independent frame windows in the browser, which makes it possible to expand the capabilities for simultaneously displaying individual pages or different parts of a page, in particular, allowing them to scroll independently. Each frame is represented by a separate file, and another file is used to describe the way frames are displayed in the browser, which is a frame file. Each frame is a Web page and can be viewed as a separate page in one window.

    In Fig. Figure 17 shows a Web page that allows you to navigate through pages displaying electronic teaching materials of the department.

    Rice. 17. Example of a framed Web page

    The page is organized in the form of a menu and consists of three frames

    : one is located at the top, the other two are below it - on the left and on the right. The top frame represents the page title. The bottom frames are designed so that a two-level menu can be reproduced and used. The first menu level is organized in the left frame. In it, the user can select the desired specialty, discipline, or go from this page to the department’s home page by clicking on one of the hyperlinks. In Fig. 17 in the left frame, click on the hyperlink with the inscription Computer science, as can be judged by the dotted frame delimiting the hyperlink. After this click, a page containing the headings of available teaching materials for this discipline is loaded and reproduced in the right frame. In the right frame the mouse cursor is hovering over the line Open in one of the headings. Thus, the right frame acts as a submenu container, i.e., an active second-level menu.

    The described method of organization allows you to create, in a user-friendly form, an arbitrarily long list of disciplines and specialties in the left frame and an arbitrarily long list of materials for each specialty or discipline for display in the right frame. In this case, in the list of the right frame you can always see the contents of the selected position from the list of the left frame.

    When designing a frame page, the following pages were first created individually:

    • header.htm – page that will represent the header of the frame page;
    • menu.htm – page for displaying the menu in the left frame;
    • informatique.htm – page for displaying a list of teaching materials for the discipline Computer science;
    • certificate.htm – page for displaying a list of teaching materials in the specialty Certification;
    • tms_metod.htm – the actual frame page.

    To create the last page, a new file is organized using the menu File /

     Createand select a team Other templates pages...from the task pane Creation.
    In the dialog box that opensTemplates pages, select tab Page framework , which shows templates of Web pages with a frame structure that are part of FP (Fig. 18).

    The window of the new frames web page (Fig. 19) will be divided into parts in accordance with the selected structure.

    Right-click to open the context menu, the page properties window and enter the text in the title line

     Methodological materials of the department, which is usually displayed at the top of the browser, and save the tms_metod.htm page.

    Next, click on the button sequentially Set start page in the top and left frames and establish a connection between the corresponding frame and your page using the standard window for creating a hyperlink, shown in Fig. 12. After clicking on the button, the top frame is assigned the address header.htm, the left - menu.htm, the right - a blank page (using the button Create a page in Fig. 19).

    To ensure that the files informatique.htm and certificate.htm are displayed in the right frame after being called by hyperlinks, the hyperlinks to these Web pages in the menu.htm file are assigned a default value of home.

    9. Example of developing a Web page

    In Fig. 20 presented

     Web page history.htm , displaying a brief history of the TMS department of KSTU.

    Rice. 20. View of a Web page in a browser

    The view of the marked up page in the FP editor is shown in Fig. 21. First, a new page is created. Next, by right-clicking the mouse, a context menu is called up, in which the line is clicked Page Properties. In the page properties window that appears (Fig. 3), its title is entered History of the TMS department. On the bookmark Other Each of the page border indentation options has a check mark and their values ​​are set to zero. This means that when read into the browser, the page should be displayed without any padding from the top and left borders of the viewport. By clicking the button Save the page is saved to disk under the name history.htm.

    Next, using the insert table command, a table of four columns and four rows is placed on the page. In the cells of the top row, three pictures h1.gif, h2.gif, h3.gif are placed sequentially from left to right (the pictures were previously designed in the Photo Shop graphic editor). The first drawing (KSTU) has a size of 4 K, the second (TMS) - 3.6 K, the last - 1.4 K. All drawings are inscriptions made on a burgundy background. The last figure (with the inscription HISTORY OF THE DEPARTMENT OF MECHANICAL ENGINEERING TECHNOLOGY) is made smaller in width in order to reduce memory.

    Rice. 21. View of a marked up Web page in the FP editor

    Next, click in the cell of the first row and command Table/Select Row The first row of cells has been highlighted. Then the cursor was placed on it and the right mouse button was clicked. The command selected in the context menu Cell properties and in the window that appears (Fig. 10), all selected cells are assigned a background in the form of a bg.gif picture (it is also prepared in the Photo Shop editor). This drawing is a single color 8x8 pixel image with the same characteristics. The background file size is only 46 bytes. The background is necessary so that the entire first row of the table is painted with the same color (the pictures are made against a background of the same color).

    In order for the narrower h3.gif image to be placed vertically in the middle of the cell, its property Vertical position assigned value Centered. The horizontal position is left as default, i.e. pressed to the left edge of the cell. For the last cell of the first row of the table (it is empty), the property Width the value is assigned to 600. This is necessary so that the entire first row of the table is guaranteed to fit the entire width of the window (and even provide some margin), which, when viewing the page, will create the effect of a monochromatic shading of the header (banner) in the browser (Fig. 20).

    Next, two hyperlinks were assigned - to the KSTU website and the website of the TMS department. They are necessary so that the viewer of the page can, if desired, proceed to view these pages. The first image (h1.gif) has been assigned a hyperlink http://www.kgtu.runnet.ru to the KSTU website (Fig. 5.12). The second (h2.gif) – hyperlink to the website of the TMS department http://tms.kgtu.runnet.ru. In the Text line of the picture properties, the first text is assigned To the KSTU website, the second – To the website of the TMS department. These lines are necessary so that the viewer of the page, when hovering the cursor over the picture, can read the purpose of the hyperlinks in the tooltips. To prevent the outlines of hyperlink pictures from being visible in the browser, their border thickness property is set to zero and the border is collapsed (Fig. 15). This completes the marking of the first row of the table.

    In the second row of the table, the first two cells contain the same picture from the file arrow.gif. The picture represents an arrow pointing upward. The file size is only 324 bytes. The purpose of the pictures is to alert the viewer to the fact that there are hyperlinks above them that they can use. To ensure that the arrows are located exactly under the corresponding pictures, the property horizontal position cells assigned a value in the center.

    The page text is located in the third row of the table. Before inserting the text, the second and third cells of this row were merged. Before merging, cells were selected, then the menu command was executed Table/Merge Cells. Next, the cursor was placed in the cell and the Enter key was pressed several times to insert empty paragraphs.

    In the first paragraph of the cell, the upper part of the text is typed from the keyboard (it precedes the list of employees who at various times held the position of head of the TMS department).

    Below is a table with one row and two columns. The names of employees are entered in the left column, and the years of their leadership of the department are entered in the right column. The table cells are formatted so that the property vertical provisions has the meaning up, property horizontal position – on the left edge. This organization will allow surnames and periods to be positioned in the browser in two adjacent columns exactly below each other.

    Below the table is text that completes the description of the story.

    All text is in font Arial, some of its fragments are in bold. These include dates, surnames, specialty codes and other elements that you need to pay attention to when viewing the page.

    The opportunity was not missed to emphasize an interesting feature of one of the text fragments: if you create an abbreviation from the first letters of the names of the specialties taught at the TMS department, then it will repeat the abbreviation made up from the first letters of the name of the department, i.e. again you get “TMS” (in This part of the text is not visible in Fig. 20 and 21. This feature is emphasized by the fact that the first letters in the names of specialties are highlighted in bold and in red.

    Finally, all the cells of the bottom row of the large table are combined and the output data of the department is entered into the resulting cell in a smaller font - address, telephone numbers, e-mail address.

    If earlier it seemed that creating web pages was quite complicated and impossible without special knowledge, then after the release of HTML editors with the WYSIWYG function began, it turned out that even an absolute beginner who knows nothing about markup languages ​​can create a website. One of the first software products of this group was Front Page on the Trident engine from Microsoft, which was included in various versions of office suites up to and including 2003. Last but not least, it was thanks to this fact that the program enjoyed such wide popularity.

    The main feature of the program, which especially attracts beginners, is the ability to layout a page without knowledge of HTML code or other markup languages. This is made possible thanks to the WYSIWYG feature, the name of which is an English abbreviation of the expression translated into Russian as “what you see is what you get.” That is, the user gets the opportunity to type text and insert pictures into the created web page almost in the same way as in the Word word processor. The main difference from the latter is that Front Page has more different web components available, such as Flash and XML. WYSIWYG function is enabled when operating in "Constructor".

    Using the elements on the toolbar, you can format text in the same way as in Word:

    • Select font type;
    • Set its size;
    • Color;
    • Specify positioning and much more.

    In addition, you can insert pictures directly from the editor.

    Standard HTML editor

    For more advanced users, the program offers the ability to use a standard HTML editor using markup language.

    Split Editor

    Another option for working with the program when creating a web page is to use a split editor. In its upper part there is a panel where the HTML code is displayed, and in the lower part its version is displayed in the mode "Constructor". When you edit data in one of the panels, the data in the other is automatically changed.

    View Mode

    Front Page also has the ability to view the resulting web page in the form in which it will be displayed on the site through the Internet Explorer browser.

    Spell check

    When working in modes "Constructor" or "With separation" Front Page has a spell checking function, similar to that in Word.

    Working in multiple tabs

    The program allows you to work in several tabs, that is, create several web pages at the same time.

    Applying templates

    Front Page offers the opportunity to create a website based on ready-made design templates built into the program itself.

    Linking to Web Sites

    The program has the ability to communicate with various websites by transferring data.

    Advantages

    • Easy to use;
    • Availability of Russian-language interface;
    • The ability to create websites even for a beginner.

    Flaws

    • The program is outdated, as it has not been updated since 2003;
    • Not available for download on the official website due to the fact that it has not been supported by the developer for a long time;
    • Incorrectness and redundancy of the code are noted;
    • Does not support modern web technologies;
    • Web page content created in Front Page may not display correctly in browsers that do not run on the Internet Explorer engine.

    Front Page is an HTML editor with WYSIWYG functionality that was popular with users at one time and was notable for its ease of creating web pages. However, at present it is hopelessly outdated, since it has not been supported by Microsoft for a long time, and web technologies have already gone far ahead. However, many users remember this program with nostalgia.

    FrontPage is an editor that is designed to create pages with hypertext code. This program provides the creation of HTML tags, lists, themes and unusual styles for websites.

    FrontPage is considered old-generation software and is practically not used. Now there is a more advanced program for creating hypertext - Adobe Dreamweaver.

    Many web designers also use SharePoint Designer, which has replaced the "old" FrontPage. In FrontPage, you can create web pages with hypertext standards that are no longer relevant today. The program is equipped with a “tree structure” and displays hints when entering tags.

    Functional

    This HTML editor will be useful for novice web designers who are just learning how to create entry-level websites. The software has a large number of tools that provide the creation of pages with hypertext. Using FrontPage, you will design their graphic design and the corresponding site tags specified by the customer.

    The advantage of this editor is the control of errors that the user makes when entering tags and commands. The program will find all tags that were entered incorrectly and show options for correction.

    FrontPage comes with an integrated set of templates. No matter if you are a beginner or a professional, use the template and create pages while saving time. The program works as a manager and ensures quick publication of the created page. If you have any complex questions about working with the software, open the help by logging into Google.

    Operating modes

    The hypertext editor has operating modes that differ in capabilities. Design mode shows an editor window and code with additional options. Once you enter “code” mode, you only work with hypertext.

    In the “result view” you will see the template of the created site. Using the "combined" mode, you will see the main area for creating code and a "blank" view.

    Working in the “constructor”, you will see all the errors. In this mode, you can work with pictures and add them to different places. You can add all the links, frames and other elements. Code mode is suitable for viewing hypertext, but not for editing it.

    Key Features

    • processing and creation of web pages with subsequent design;
    • viewing finished hypertext using design mode;
    • built-in base with blanks, which simplifies work with the project;
    • manager with a convenient publishing mode;
    • the program has built-in help;
    • data search and error correction;
    • The graphic design of the editor is localized into Russian.

    Microsoft FrontPage for Windows 10 lets you create websites without having to learn HTML. You just need to place the required text on the project page, placing pictures in the appropriate places. Development of plugins and effects is available, without the use of complex utilities or special scripts.

    The application has a set of tools for interacting with the site. Integrated templates are used to create key Internet pages or content in general. It is possible to use professional design techniques and text styles. There is a range of options to embody your individual style. We recommend downloading Microsoft FrontPage for Windows 10 in Russian without registration and SMS from the official website.

    Program information
    • License: Free
    • Developer: Microsoft
    • Languages: Russian, Ukrainian, English
    • Devices: PC, netbook, laptop (Acer, ASUS, DELL, Lenovo, Samsung, Toshiba, HP, MSI)
    • OS: Windows 10 Home, Professional, Enterprise, PRO, Enterprise, Education, Home Edition (updates 1507, 1511, 1607, 1703, 170
    

    2024 gtavrl.ru.