Front page description of the program. Description of the Microsoft Office Frontpage program

FrontPage website creation software- this is a real helper not only for beginners. All pages of the site look like html code. This code consists of many numbers, letters and symbols. To create a website you need to take and write this code.

To do this, you need to thoroughly understand what each symbol means. It is almost impossible for an ordinary person to do this. This is what this site page looks like: html code:

Front Page website creation software

There is a special program that allows you to create websites without knowledge of html code. This program is free and is called Microsoft Office FrontPage. Essentially this is visual editor and you see everything you create online.

Websites created in FrontPage are not afraid of viruses and hacker attacks. A copy of the site is stored on your computer. At any time, no matter what happens, you can post it on the Internet without any problems.

Download the Microsoft Frontpage program - Lessons for beginners

This is a very easy to use program. Any beginner can handle it. It is in Russian and is very similar to Microsoft Word(Word).

Download Microsoft Frontpage - free

Here's what it looks like after installation on your computer:

Download Microsoft Frontpage and install. If you have skills in Word, then it will not be difficult for you to create websites in Front Page. It will automatically translate everything you write into html code.

I assure you that working in the program is a pleasure. All lessons on this site are aimed at beginners. Therefore, we will learn how to make a website in a program that is very easy to understand.

Now you have briefly become acquainted with the purpose of the program. In subsequent lessons you will successfully master its basic functions and capabilities.

You will see that making a website with this program is as easy as shelling pears. Don't forget to download Microsoft Frontpage program, we will create a website in it.

First introductory lesson for beginners You passed successfully. Now let's move on and start creating the website. To do this, go to the next lesson. In it you will find out what parts a website page consists of.

A program with which you can quite easily understand the basic principles of designing Internet pages, which has a wide selection of additional tools for creating complex Internet sites and portals.

Briefly about the Microsoft FrontPage program

This is an easy-to-learn and convenient Web editor for designing, preparing and publishing Web sites. Thanks to integration with the MS Office family of products, a familiar interface and an abundance of templates, the program allows even novice users familiar with the basics of working in MS Word to quickly master the work. At the same time, FrontPage cannot be called a solution for dummies: the program provides wide functionality and various means of optimizing Internet pages.

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

Basic program tools

General view of the Microsoft FrontPage program

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

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

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

For detailed descriptions of other Microsoft FrontPage menus, buttons, and functions, see the program's help. To do this, press the "F1" key.

Creating a template for pages in FrontPage

Inserting the main table in the editor

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

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

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

This is how we get the template for the site

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

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

Additional Templates

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

Use standard table and theme layouts

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

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

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

Insert a picture and create links to pages

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

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

Conclusion

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

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

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

Articles on similar topics

FrontPage is a program for creating HTML pages and then "publishing" them. This is a fairly old software solution that has not been supported for a long time. It was replaced by the program.

Functional

FrontPage will be a useful assistant for webmasters who want to simplify the process of creating web pages and make it more comfortable. The program provides a large set of tools with which you can not only create pages, but also design them in accordance with your wishes or customer requirements. It is quite convenient that the program is able to control user errors. All errors in tags will be found and shown to you for further correction.

The software contains a built-in set of templates that you can use when creating pages - this will save time and avoid reinventing the wheel. With the help of a special manager you can publish very quickly finished work. And in case of difficulties or questions, we recommend opening the help section - it better than Google will tell you how to find a way out of the dead end.

Operating modes

The software product provides several modes of operation - designer, code, viewing results, as well as a "combined" mode, in the case of which the working window will be divided into two areas - creating code and viewing. When working with the designer, all mistakes made will be shown - there you can also work with images inserted between text, links, frames and many other elements. It is more rational to use code mode not for viewing, but for editing.

Key Features

• creation of web pages, their design and content;
• visual code review using design mode (WYSIWYG);
• integrated template library;
• built-in manager for quick and convenient publication of the final result;
• the ability to access the directory;
• automatic search and error correction;
• Availability of a Russian version of the graphical shell.

Included in the program package Microsoft Office includes several applications that allow you to create, edit and host Web pages. One of them is 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 make it 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.

This leads to a practical conclusion - head, title, 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 is usually well-versed in working with the Word program from the Microsoft Office family, so the FP interface, composed in the style of Microsoft design, is very similar to the interface Word programs, will not create any 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 built-in text editor FP you need to 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 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 select 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 Blank 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 one for it separate folder 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 context menu- on the line Page properties. A dialog box will appear for entering page properties (Fig. 3). The window has five tabs

General, Formatting, Additionally, Other, Language .

In Fig. 3 the bookmark is activated in the window

General. 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 a picture should serve as the background of the page, 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 want 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, low-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, downloading it from the server by the browser takes the longest for a long time. 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 across 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 hover 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 necessary 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, address email, drawing and 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 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 regular computer you can send them to the Web server without fear that the connection between pages and hyperlinks will be broken, since on the server the relative structure of their placement will remain the same and, therefore, the hyperlinks will “work.”

To create 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, the mail client 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 into 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, it means that it was last edited on February 14, 2001 at 12 noon. 2 min. 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 the 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 General 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 or compressed in the desired direction using the width and height properties. Dimensions can be specified in absolute units - pixels - or in relative units - percentages in relation 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 typically 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 image usually takes up tens of times less memory. Compressed bitmap images load faster, but take some time to decompress the image.

Vector graphics used mainly to depict geometric figures using mathematical formulas. This method of presenting a picture is very effective, since it does not require storing data about each pixel, and representing the picture 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 to give text documents For the required type, the dimensions of the drawings have to be changed frequently.

Currently, there are two widely used web page developers: raster format – 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 drawing in those pixels that are painted with the transparency color is replaced with pixels of the background color, and the other pixels are reproduced in the usual way, thus creating a transparent effect. 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 blurry 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 the time that he would have to spend in ignorance of waiting 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 drawing 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 in compressed form, such as nature photographs, high-quality images with a rich color palette. 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 photographs, 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 drawing files, you can also use special programs, which 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 separate file, and to describe the way frames are displayed in the browser there is another file, 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 Informatics, 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 Informatics;
• 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 organized new file 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.

By right-clicking the mouse, 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 - blank page(button Create a page in Fig. 19).

In order for the files informatique.htm and certificate.htm to appear 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 short history Department of TMS 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 graphic editor Photo Shop). 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 blank paragraphs.

The first paragraph of the cell is typed from the keyboard upper part text (it precedes the list of employees who at different 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 matters 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 Fig. 20 and 21 this part of the text is not visible. 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.