Microsoft Frontpage XP is a modern integrated shell for building individual web pages and entire web sites. Even an inexperienced user unfamiliar with programming languages ​​can use Frontpage to independently create their own website and publish it on the Internet. The Frontpage web editor will be a great addition to the arsenal of an experienced Web designer.

Building a web site

In this lesson you will get acquainted with a new application Microsoft Office- web site editor with Frontpage program. You will learn how to create and modify a node structure. Listed below are some of the components and operations covered in the exercises in this lesson:

  • web site master;
  • task list;
  • viewing node folders;
  • navigation;
  • checking hyperlinks;
  • reports;
  • node color scheme;
  • common fields pages.

A Web site is a collection of files in HTML format, located in a specific folder and connected to each other by hyperlinks. One of the web site files is designated as the main one; it represents the home page and opens in the user’s browser when connecting to the web site. The remaining web pages are displayed in the browser window as you navigate to them using hyperlinks. Except HTML files the unit includes a set graphic objects GIF format or JPG intended for page design. With the development of browsers offering a wide variety of extensions to the HTML standard, files of other formats have increasingly begun to appear on web sites.

Creating a website

Frontpage XP is an integrated environment containing a web page editor, modules for managing the site structure and tools for publishing the site on the server. Using Frontpage, even those completely unfamiliar with HTML language a beginner can design a completely functional web site. In the hands of an experienced user, Frontpage becomes a powerful tool that allows you to build web sites of any complexity.

Note

In Frontpage XP, three separate modules - the page editor, the site builder and web server support tools - are combined into one integrated shell that provides easy access to all instruments.

Web site master

To create a complete web site, it is not enough to simply place several HTML files in one folder. A well-built unit has a well-thought-out structure. This makes it easier for the user to search necessary information. If you don't have a lot of experience working with web pages, the Web Site Wizard will help you lay out the site correctly, and all you have to do is fill the pages with content. To use the services of a specialist, follow these steps.

  1. Launch Frontpage.
  2. Select the File command > New ^ Page or Web Site (File > New > Web). In the application task area, the New Page or Web window will open with a list of templates and wizards that can be used to build a web site (Fig. 3.1).
  3. In the New from Template section, click the Web Site Template icon, and in the Web Site Templates dialog box that appears, click the Corporate Presence Wizard icon. .
  4. In the Options section, enter the name of the folder in which the site files will be stored (I will use the C:\My Documents\My Webs\Corporate folder for these purposes).

Rice. 3.1.

  1. Click OK.
  2. In the first window of the wizard, click the Next button.

The second window offers a list of the main web pages that can be included in the new web site:

  • Home Page;
  • What's New;
  • Products/Services;
  • Table of Contents;
  • Feedback(FeedBack form);
  • Search form.
  1. Leave all checkboxes selected and click Next. The next wizard window, shown in Fig. 3.2, suggests defining the type of home page. By checking and unchecking the boxes in this window, you add or remove the corresponding sections of the home page.
  2. Check all four boxes.
  3. Click the Next button.
The next six wizard dialog windows configure the appearance of a specific page type (from those that were selected in the second wizard window). Go through each window one by one and check the boxes for those components that you want to include in the website. The subsequent exercises in this lesson assume that these six windows have been left with the wizard's default settings.

Rice. 3.2.

  1. The tenth window of the wizard sets the general design of all pages. Select the checkboxes of this window in accordance with Fig. 3.3, then double-click Next.

Rice. 3.3.

  1. Enter the full company name, the same name shortened to one word, and the company address. Click the Next button.
  2. In the next window, enter the company phone number, fax number, email address webmaster and information support address. Double-click Next and then click Finish. The wizard will generate a new web site and open it in task view mode with a list of actions that must be performed to obtain a completed site. The items on this list, shown in Fig. 3.4 were added by the master. They list the operations with which you must fill the generated web pages with semantic content. During the development of a site, you can manually add new tasks associated with a particular web page. You will learn this in the next exercise. The task list is always at hand, it is stored along with the web site files and will not allow you to forget about unfinished operations. To open it, just click on the Tasks button on the mode panel.

We got acquainted with the main program window, menu commands, standard toolbar, and looked at the available templates and wizards for creating Web pages and Web sites. Now you can start creating your own Web site.

In this chapter, you will learn about hosting on a Web page. text information, headings, learn about tools for formatting characters, paragraphs, and using lists to format information.

To create a Web site, we will use a template One page website(One Page Web). This template is useful for exploring the capabilities that FrontPage provides to the developer. This template forms the structure of the Web site and adds one blank page to it, on which information will be placed in the future. At the same time, the page does not have any special design or formatting requirements. We will post everything we need on this page ourselves.

To create a one-page Web site, follow these steps:

  1. On the menu File(File) select command Create(New), and then in the submenu that opens - the option Page or website(Page or Web). As a result, a panel appears in the main window of the FrontPage program Create a web page or site(New Page or Web).
  2. Select a value in the panel Website Templates(Web Site Templates). A dialog box opens Web site templates.
  3. In field Specify the location of the new website(Specify the location of the new web) dialog box Website Templates Enter the location and name of the Web site you are creating. For example, let's give it the name My Test_Web.
  4. Double click on the icon One page website(One Page Web). The template creation process begins. After some time, the created Web site opens in the main window of the FrontPage program (Fig. 12.1), which you can modify. Panel Folder list(Folder List) displays its structure consisting of two folders _private And images and index.htm pages.

Rice. 12.1.

Comment

By default, FrontPage assumes that the first page placed on a Web site will be the home page. IN in the folder structure it is saved under the name index.htm.

Double click on the panel Folder list(Folder List) on the file name index.htm. This blank Web page will open in the FrontPage workspace. You can start placing objects in it.

Placing text on the page

The main purpose of a Web page is to introduce a Web site visitor to information that interests him. In order for information to be easily perceived, it should be presented properly: the design should not be depressing with its monotony, but should be pleasing to the eye. To do this, FrontPage provides the developer with tools for formatting characters and paragraphs, including setting various font parameters, spacing between characters, offsets, indents, displaying characters in small capital letters, in the form of upper and lower indices, etc. Using these tools, you can highlight the most important places on the page and make the information easy to read.

A website is pages that are interconnected and located on the same domain.

Any site on the Internet is a web site.

The main page of a node is called the home page. It connects everything else.

A website is an encyclopedia book. Each article is a separate page

Website structure

The site consists of structured files that have a hierarchical appearance, with home page on the top. Most often they correspond to HTML files, which are named Default.htm or Index.htm.

Pages are divided by degree of distance from the current one:

  • equal - located on the same level;
  • parental - are one level higher;
  • subsidiaries are located one level below.

Any document is structured. There is a title, header, body, etc.

Where are the websites located?

Nodes are located on servers. These are machines that are connected to the Internet. Disk space is allocated for each site.

Node address

Each node document has its own address. It is used to access this file on the server.

The address is divided into several parts:

  • The http:// prefix is ​​a type of data transfer protocol.
  • WWW is an abbreviation for address.
  • The site name is a unique name purchased from registrars. It is formed from two parts - the name itself and the designation of the domain zone.

What is a website security certificate

Determines how reliable communication with the node is.

There are two types of certificates: with DV domain verification and expanded EV verification. The DV certificate ensures compliance with minimum reliability conditions. The user's browser marks such resources with a special icon. The EV certificate provides more comprehensive safety requirements.

Stages of creating a website

  1. Forming the site structure and determining what content will be placed on the home and other key pages.
  2. Creation of web pages.
  3. Viewing HTML files in a browser: checking that links work, content is up to date, etc.
  4. Publish a website with all its files on the server.
  5. View web pages stored on the service using all popular browsers, since they format pages differently.
  6. Launch to index pages.

Principles of partition formation

Logo

Almost every website has not only a name, but also its own unique logo, which makes the resource stand out from the rest.

Navigation bar

It should be displayed in any document, be convenient, and contain links pointing to other pages and large sections.

Must meet the following conditions: literacy, accuracy and reliability of the posted content. Additionally, there are a number of minor conditions that the document must meet.

Graphic arts

It is desirable to have a balanced ratio of graphic content in relation to text content, based on its specificity as a whole.

Channel capacity

SSI server support

Its use allows the Web server to use statistical volumes dynamic content into the redirected HTML document.

Provider server support for CGI scripts

A function that allows the Web server to execute arbitrary programs to generate HTML documents.

Page refresh method

Most often it occurs via the FTP protocol.

Installing a website on a PC

This may be required at the initial stage of site development. For example, you made several small pages and want to check whether they can be published in this form.

Eat special programs- for example, - which emulate the operation of a remote server on your computer.

To speed up execution laboratory work It is possible to copy data via the clipboard to create a page with frames clauses 2.3.1, 2.1.4 and 2.1.5 from a file with guidelines.

2.1.1 Create and design a website containing web pages. To do this you need to run the command File 4 Create 4 Single Page Web Site, select an option in the dialog box Single Page Web Site. Then switch to mode Transitions(tab at the bottom of the Front Page window ) , then double-click on the file name index.htm in the center of the screen. Then you should place the data shown in Figure 1 on the sheet: enter the text according to the sample, arrange the pictures. To create a logo for the name of the store, you can use the WordArt tool.

For registration appearance home page you need to use the command Format4Font, in which you need to select the font color and typeface. Next you need to save the page.

To create a page with frames shown in Figure 2, in the navigation area, select the index.htm file and run the command File 4 Create 4 Other page templates, in the dialog box that appears Page Templates select tab Frames page, then select a template Announcement and table of contents, and click on the button OK. After this, go to page editing mode, then you need to click on the button Create a page in every frame.

Figure 1 Example home page

To design the top frame page (Figure 2), insert a table of one row and three columns. Then place pictures in the columns of the table, then move the borders of the columns to the size of each of the pictures and align them to the center. Then click right click mouse on the table and in the appeared context menu select a team Table properties.... In a group of elements Borders set the table border size to zero to make the border invisible.

To write menu items on the left side of a framed page, you should also use a table consisting of one column and four rows. Each menu item is recorded in a table row.

On the right side of the page with frames, you should enter text, formatting it accordingly.

After this you need to run the command File4Save,to save all new pages. Each page will be saved under its own name. The page being saved will be highlighted with a blue frame. For example, the top frame page should be named baner.htm, the left one should be mnu.htm, the right one should be text.htm, and the page with frames itself should be named start.htm. The result should be a page with frames, shown in Figure 2.

Figure 2 Example of creating a page with frames


After creating the page with the start.htm frames, you should begin creating other pages that will contain information on each of the menu items located in the left frame.

Note. The data contained on the created web pages can be transferred using commands for working with the clipboard from the electronic version of the FrontPage guidelines installed on computers.

Create a new page on which, in Constructor place the following information.

Development of Web site templates

Creating a Web site for the template

In Chapter 4, you created Web page templates. In this application, you will create your own Web site template. Although a Web site template is significantly more complex than a one-page template, developing one is not particularly difficult. You create and save the Web site as usual, and then copy the new Web site to your templates folder.
The following example demonstrates how to create a Web site template and the steps to take before it can be used to create sites.
1. In Frontpage, create a new Web site based on the Empty Web template. Name the site WebTemplate.
2. Go to Navigation view mode. Click the New Page button on the Standard toolbar to create a home page.
3. Right-click the home page icon in the right pane and activate the Rename command from the context menu. Enter the new title "Home Page" and press the key.
4. If the Folder List panel is not displayed, activate the Folder command on the View menu. Click on Home Page in the right pane. Click the New Page button to add another page to the
Web site. In Frontpage, immediately after creating a page, you are prompted to rename the page's default file name. Assign new page name Pagel and press the key.
5. Create three more pages, naming them Page2, Page3, Page4.
6. Drag pages Pagel.htm, Page2.htm, Page3 in sequence. htm,Page4.1-i.tm from the Folder List panel to the right panel, placing them on the same level under home page(by default, page file names will be used as headers). So these four pages will become children of the home page.
7. In Navigation view mode, double-click on the icon of each page in the right panel (the interval between clicks should be large enough so that the program does not perceive it as double clicks) and enter new page titles Page1, Page2, Page3 and Page4 Web site structure WebTemplate shown in Figure B.1! You can now edit the contents of pages in Page view.

Fig B.1 Structure of Wehfemplate in Ncnafufion view mode

Copying files to create a Web site template Having created a Web site of the required structure, you should convert it into a template. To do this, you need to create a folder with the TEM extension (its name can be arbitrary), which should be located in the following path, starting from the root folder Windows \Application Data \Microsoft\FrontPage\Webs\. Then you need to copy all the files of the Web site into the e1y folder and add the files. necessary for FrontPdge to treat the Web site as a template Copying and creating files will be done in Windows Expioier
1. B Windows Explorer Go to the WebTemplate Web site folder (default path C \Inetpub\Wwn\root\Webteinp!atc\) The folder should contain the five HTML files created in the previous section, as well as other folders with additional files used by Frontpage Web sites (Figure B 2) The Frontpage folder elements are described in Table B1 Right-click on the folder (in the left pane of Windows Explorer) and activate the Copy command from the context menu
2. Open the folder in which the FiontPage 2000 website templates to be created are placed (default path C \Windows\Application Data \Microsoft\FrontPage\Webs\)
3 Right-click on this folder (right Windows panel Explorer) and select the Paste command from the context menu. The Webtem plate folder will be copied to the Webs folder. As a result, you will receive most of the files to create a complete template
Note
So that the created Web site can be used as a template, you can also place the folder with its files in the folder in which the standard Frontpage templates are stored (the default path is C\Program Files\Mic rosoft Office\Templates\1033\Webs\)
4. Right-click on the name of the new Webtemplate subfolder that was copied to the Webs folder, select the Rename command from the context menu and name the specified subfolder Webtemplate tern (add the TEM extension)
Note
In the Webtemplate tern folder you can delete all the folders listed in Table B.1 (do not delete only the Images folder) This will not affect the functionality of the template

Fig B. 2 Structure of the WehTemplate Web site template

Table B. 1. Folder structure of the Web site in Frontpage

Folder Content
borders Includes up to four HTML files that are inserted onto each page along with the top, bottom, right, or left common areas
private Pages that you would like to make unavailable for browsing or searching (for example, included pages)
sharedtemplates Templates used on the Web site
vtibin Frontpage CGI programs created to control the view, as well as to perform actions on the server by the administrator and author
vticnf Configuration files for each page of a Web site, containing information such as the name of the page, dates of creation and modification, name of the developer, etc.
vtipvt Several subfolders with both current and historical files To Do List, as well as meta information for the Web site and dependent database
vtiscript Scripts in JavaSript and VBScript languages
vtitxt Text indexes for use by search forms
Images All images associated with the Web site

Creating INF and MAP files

In addition to the already copied files, you will need two additional ones (with INF extensions and MAP) file so that Frontpage 2000 can use the Web site template. INF files contain information used to include your template in the list found in the New dialog box. MAP files store the navigation links you create. We'll copy these two files from the default Web site template folder, change their contents, and save them under the appropriate names.

1. In Windows Explorer, open the default Personal Web template folder (default path: C:\Program Files\Microsoft Off)ce\Templates\1033\Webs\Personal.tem).

2. While holding down the [ Ctrl ] key, select the Personal.inf and Personal.map files. Press the key combination to copy files.
3. Return to the Webtemplate.tem folder of the template you are creating (the default path is C:\Wmdows\Application Data \Microsoft\FrontPage\Webs\Web-tempiate.-em). Right-click in the right pane and choose Paste to paste the two files you copied in step 2 into this folder.
4. Right-click the Personal.inf file name and rename it to Webtemplate inf. Name the Personal.map file Web-template.map.
5. Execute double click on the file name Webtemplate.mf and edit its contents using Notepad In the Title section, enter the name of the template "Test Example", and in the Description section - a description of the template. After processing, the contents of the file should be like this:

6. Save and close the Webteinplate.inf file.
7. Open the Webt.ernpiate.map file in the Notepad editor.
8. Edit the Webtemplate.map file as shown in the following figure.

9. Save and close the Webtemplate.map file. Now that your folder has created INF files and MAP, Frontpage will support your template.
10. Switch to Page view mode. Activate the Web submenu command New File menu. In the New dialog box that loads, the list of proposed templates will also include the template you created - “Test Example” (its description is displayed in the Description area).

11. Select the “Test Example” template from the list. By default, it is proposed to assign the name Webtenrplale2 to the created Web site (do not change this name) Click on the OK button in Shelkbook to create a new Web site based on the template. The Web site you created will open (Figure B .3)
12 Delete the newly created Web site and close Frontpage If the new Web site does not function as expected, review the files in the template Make sure all files are where they should be and that the contents of the INF and MAP files complies with our recommendations and does not contain errors (which may have appeared because you edited these files manually)

Rice. B.3 Web site Webtemplate2 created using the "Test Example" template