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.
Next 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. Click right click on the pictogram home page 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. Name the new page Pagel and press the key.
5. Create three more pages, naming them Page2, Page3, Page4.
6. Drag the 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 the home page (by default, page file names will be used as headings). 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!

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. In Windows Explorer, navigate to the WebTemplate Web site folder (default path is 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 standard Frontpage templates(default path 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 in context menu Rename command 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. 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 Case", 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
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

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. DV certificate ensures compliance minimum conditions reliability. 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 work 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 right-click on the table and select the command in the context menu that appears 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 frame of blue color. 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 the commands for working with the clipboard from the electronic version methodological instructions by FrontPage installed on computers.

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

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;
• color scheme node;
• general page fields.

A Web site is a collection of files in HTML format located in specific folder and linked 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. In addition to HTML files, the node includes a set of graphic objects in GIF or JPG format intended for page design. With the development of browsers offering a wide variety of extensions HTML standard, files of other formats are increasingly appearing 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 powerful tool, allowing 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 convenient access to all tools.

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.

In addition to wizards, you can and should use templates when developing Web sites. They help create a typical Web site structure.

To create a Web site using one of the provided templates, follow these steps:

1. On the menu File(File) select command Create Page or website (New page or Web site).
2. In the panel that appears, select the command Website Templates(Web Site Templates).
3. The dialog box that opens Website Templates contains templates for creating Web sites (Table 11.2).

Sample	Purpose
One page website(One Page Web)	Creates a Web site containing one page
Customer Support Web Site(Customer Support Web)	Creates a Web site to support buyers of your products, where they can post their comments and suggestions regarding the quality of goods and services
Blank website(Empty Web)	Creates an empty Web site
Personal website(Personal Web)	Creates a multi-page personal Web site
Project website(Project Web)	Project Web site. This template can be used as a coordination and discussion center for a large project. On the pages of the Web site you can post information about project participants, the state of affairs, discuss the most important issues, etc.
Web site working group based on SharePoint(SharePoint-based Team Web Site)	Collaboration Web site. Contains a calendar of events, a library of shared documents, a list of contacts, tasks, etc.

Table 11.2. Templates used to create Web sites

Select the icon of the template whose services you want to use with your cursor. At the same time, in the area Description(Description) A brief description of the selected wizard appears.

1. In the (Specify the location of the new web) field, enter the location and name of the Web site to be created.
2. Click the button OK.

In accordance with the selected template, the FrontPage program generates the required Web site template and opens it in viewing and editing mode. You can start editing the created prototype of the Web site.

Template for creating a one-page Web site

The first in the list of proposed templates and wizards is the template One page website(One Page Web), designed to create a one-page Web site. When you use this template, FrontPage creates a folder structure for your Web site and adds one blank Web page to it.

To view the structure of a Web site created using a template, display the panel in the program window Folder list(Folder List) by selecting from the menu View(View) command of the same name. The page included in the created Web site structure is saved in a file named index.htm. By default, this page is assumed to be used as the home page. Open this page by double-clicking the index.htm file name. The page will open in edit mode in the work area FrontPage programs(Fig. 11.36).

Rice. 11.36.

Comment

The structure of a Web site created based on the One-Page Web Site template can be changed later: add new folders and any required number of pages.

Blank Web Site Template

Use a template to create a blank Web site Blank website(Empty Web). When you use this template, FrontPage creates a Web site structure consisting of folders _private and images.

After completing the template formation, the created Web site opens in editing mode. In the folder pane, you can view the structure of the Web site. It does not contain a single page.

Comment

Sample Blank website(Empty Web) is useful in cases where you intend to use a page with a more complex structure, for example, including a frame, to create a home page.

Template for creating a multi-page personal Web site

Using a template Personal website(Personal Web), you can quickly create a personal Web site. In it you can place personal information, photos of friends, reference information, and also, using links, view the most frequently visited pages on the Internet. In addition, this Web site is an excellent starting point for those who are beginning to explore the capabilities of FrontPage.

To create a personal Web site using a template, 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(New page or Web site).
2. On the panel that appears Create a web page or site select team Website Templates(Web Site Templates).
3. In field Specify the location of the new website(Specify the location of the new web) dialog box that opens Website Templates Enter the location and name of the Web site you are creating. Let's name the Web site, for example, My Pers_Web.
4. Double click on the icon Personal website(Personal Web). The template creation process begins. After some time, the resulting Web site will open in the main window of the FrontPage program for viewing and editing (Fig. 11.37).

On the panel Folder list The files of the pages of the created Web site are located. Selecting the files one by one with the mouse cursor, look through the pages offered to you. Using the tools of the FrontPage program, you can modify them, change page names, add new pages to the Web site, and insert your own text.

Rice. 11.37. Personal Web site created using a template