Front page templates. Using Microsoft FrontPage Templates and Wizards

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

Programs for creating sites

3.3. Application programs for creating Web sites

3.3.4. Creating a site and web pages in FrontPage

Site Planning

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

These and many other problems associated with the development of the site must be resolved before applying application programs for website development.

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

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

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

Assign page names:

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

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

Rice. 1.

Let's prepare the text in Word editor for each page and pictures in Adobe Photoshop V GIF formats, JPEG or PNG at 72 ppi, and you can also use scripts.

Then you can register a second-level domain in one of the zones (ua, ru, com, net, info, etc.) and, after developing the site, choose a paid hosting that suits the speed of access and provides necessary services For effective work site. If we place the site on a free hosting, then we can choose, for example, hosting on the narod.ru server. To do this, you will need to register on the server and get free hosting. In this case, you will have a third-level domain, for example: lessons-en101.narod.ru.

Create a site using the FrontPage application

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

Then we execute the File / New command and in the “Create” task pane that opens, click on “Other Web Site Templates” in the “Create Web Site” section. The "Web Site Templates" dialog box will open, in which you need to select "Empty Web Site", then specify the location of the new web site (for example, D:\Documents and Settings\TVA\My Documents\My Web Sites\lessons- en101) and click OK. The figure shows a fragment of the "Web Site Templates" dialog box, in which the address of the new site is indicated.

Rice. 2.

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

Rice. 3.

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

Rice. 4.

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

Rice. 5.

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

Rice. 6.

Rice. 7.

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

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

Rice. 8.

6. Renaming New Pages in FrontPage. Switch to folder mode and use the context menu to change the names New Page 1 to info, New page 2 on business, New page 3 on pay.

Rice. 9.

7. For the purpose of the unity of the design of the site pages, we copy the content of the main page to the created pages info, business, pay. To do this, open the main page in Page mode and execute the "Edit / Select All" command, and click the Copy button on the toolbar. Switch to Folder mode and double click on the info page, it will open in Page mode, then click on the Insert button. The contents of the main page will be copied to the info page, similarly we copy the contents of the main page to the other two pages.

• Home;
• About company;
• Business review of the project;
• Payment Methods.

For example, select the "Project Business Overview" navigation item and use the context menu to open the Add Hyperlink dialog box, select business.htm and click OK. Similarly, we create hyperlinks for all navigation items on all pages. The figure shows a fragment of the Add Hyperlink dialog box.

Rice. 10.

10. Add and fill in meta tags (between tags And) on the pages: "About the company"; "Business review of the project"; "Methods of payment" in Code mode.

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

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

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

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

To develop your own website in FrontPage, download.

WordPress displays a feed of the latest posts on the main page out of the box. How to put a static page on the main page, change the main template and some other issues, we will consider further.

Setting a Static Home Page

This is the easiest thing you can do by digging into the settings. Go to the page - settings->reading /wp-admin/options-reading.php.

Set a static page or one of your site's set of pages, or choose one of the categories to be shown instead of the latest posts. Those. here you can make the output of the heading you need on the main page, instead of displaying everything in a row. Previously, this had to be solved in more complex ways.

Change the template for the main page of the site

To change the template for the main page, you need to understand a little about the file structure of your theme. Initial presentation. In the above diagram, we see different file names and their order, how wordpress tries to find and use them for different sections on your site.

You can edit your theme files directly from the site admin panel. In the Appearance section, there is an Editor subsection. There you will see a list of templates for the selected theme (list of files on the right). And also wordpress will show you the roles of these files that the engine assigns to them based on the name of each file.

front page template

If your theme already has a file front-page.php, it will be used as a template for the main page of the site. If not, then you can start with a copy of the template page.php, which is responsible for site page templates (Wordpress operates with two types of publications - pages and posts, do not confuse them). Copy page.php with a new name front-page.php(do not do this in the site admin panel).

As soon as new file will go to your theme folder, on the page /wp-admin/theme-editor.php it will appear in the list and will be connected every time wordpress shows the main page.

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

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

Many web designers also use SharePoint Designer, which has replaced the "old" FrontPage. In FrontPage, you can create web pages with hypertext standards that are out of date today. The program is equipped with a "tree structure" and displays prompts when entering tags.

Functional

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

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

FrontPage comes with an integrated set of templates. Whether you're a beginner or a professional, use the template and create pages in a time-saving manner. The program works as a manager and provides quick publication of the created page. If you have any difficult questions about working with the software, open the help by logging into Google.

Operating modes

The hypertext editor has modes of operation that differ in capabilities. Design mode shows the editor window and code with additional options. Entering the "code" mode, you work only with hypertext.

In the "results view" you will see a draft of the created site. Using the "combined" mode, you will see the main area for creating code and viewing the "blank".

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

Key features

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

The first in the list of proposed templates and wizards is the template Single Page Web Site(One Page Web), designed to create a one-page Web site. With this template, FrontPage builds a folder-based Web site structure and adds one blank Web page to it.

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

Rice. 11.36. site created using the Single Page Web Site template

Comment

The structure of a Web site created on the basis of the Single Page Web Site template can be changed later: add new folders and any number of pages you need.

Template for creating an empty site

Template is used to create an empty Web site Empty web site(Empty Web). Using this template, FrontPage generates a Web site structure consisting of folders _private and images.

After the template generation is completed, the created site opens in edit mode. In the folder pane, you can view the structure of the Web site. It does not contain any pages.

Comment Sample Empty web site(Empty Web) is useful when you intend to use a page with a more complex structure, such as one that includes a frame, to create your home page.

Template for creating a multi-page personal website

Using template Personal website(Personal Web), you can quickly create a personal website. 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 site is a great starting point for those who begin to explore the possibilities provided by the FrontPage program.

To create a personal site using a template, follow these steps:

1. Menu File(File) select command Create(New), and then in the opened submenu - the option Page or Web site(New page or Web site).

2. On the appeared panel Create a web page or site select a team Web site templates(Web Site Templates).

3. In the field Specify the location of the new web site(Specify the location of the new web) dialog box that opens Web site templates enter the location and name of the Web site you are creating. Let's call the site, for example, My Persian Web .

4. Double click the icon Personal website(Personal Web). The template creation process begins. After some time, the resulting site will open in the main window of FrontPage for viewing and editing (Fig. 11.37).

Rice. 11.37. Personal website created using a template

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

Depending on the way you want to view and work with pages, you can use one of four HTML page presentation modes:

Constructor. Web pages can be designed and edited by default in Design view (Figure 8.1). This mode provides almost all WYSIWIG capabilities (WYSIWYG (What You See Is What You Get - accurate display mode). This mode allows the user to view the document view in final version and modify text, graphics, and other elements directly in this view when creating web pages, just like when working with authoring tools.

8.1. HTML Page Presentation Mode Designer

Code. Allows you to independently view, write and edit HTML tags (Fig. 8.2). Using the code optimization tools in Microsoft FrontPage, you can create clean HTML code, and it's also easier to remove unnecessary code.

8.2. HTML page presentation mode Code

8.5. Microsoft FrontPage window

Select File New from the main menu. The Creation panel will open in the right part of the program window (Fig. 8.6). In the Create Web Site section, select Other Web Site Templates. The Web Site Templates dialog box will appear, in which you must select the Single Page Web Site icon (Fig. 8.7).

8.6. Creation panel

8.7. The Web Site Templates dialog box Next, you need to define the location of the new site and its name. FrontPage creates a special folder in the user's profile (c:\Documents and Setiings\UserName) in the user's My Documents folder for saving Web sites - My Web Sites.

In the Settings section, click the Browse button and go to the My Documents folder in the local profile. Next, on the toolbar of the dialog box Place for a new web site, click on the Create a new folder button (Fig. 8.8) and enter a name for the created web site - One-page site (Fig. 8.9) and press the OK and Open buttons in sequence.

8.8. Toolbar of the New Web Site Location Dialog Box

8.9. Selecting the New Site Location and Name In the Web Site Templates dialog box, click OK.

After a few seconds, FrontPage will display the structure of the newly created one-page node (Figure 8.10). FrontPage opens a new node in the view mode that was last used. If the resulting appearance of the FrontPage windows differs from that shown in Fig. 8.10, then you need to select the Folder View item in the main menu.

8.10. The structure of the created one-page node Next, in the Folder List window (Fig. 8.11), located on the left side of the main FrontPage window, you must double-click on the index.htm file to open this file in the Page view mode (Fig. 8.12). The index.htm file is the site's start page - it will start browsing from it.

8.11. Folder List window

8.12. The index.htm file in page view mode As you can see in fig. 8.12, the index.htm page in page view is completely blank. In the window, type the following text: Ivanov Ivan Ivanovich Group ASO-01-01

My first one-page web site The result should match the one shown in fig. 8.13.

8.13. The text typed on the index.htm page Next, click the Code button on the panel for selecting the page presentation method to the left of horizontal bar scrolling (Fig. 8.14).

8.14. The panel for selecting the method of presenting the page As can be seen from the window that appears (Fig. 8.15), ItsPage, in parallel with the user input in the design mode, generates the corresponding ITMB code.

8.15. HTML code corresponding to the typed text Next, you need to save the created web page. To do this, either select the main menu item File Save or press the button on the toolbar.

Next, you should view the developed site in the browser. To do this, you can either select the main menu item File View in browser and then - the desired screen resolution (Fig. 8.16), or press the B12 button.

8.16. Choosing a browser and screen resolution for viewing the site The view of the developed page in the browser is shown in Fig. 8.17.

8.17. View of a one-page site in a browser Using the Personal Web Site template in the My Web Sites folder, create a node called Personal Site A80-01-01 (Fig. 8.18).

8.18. A site created from the Personal Web site template In the Folder List pane, double-click the index.htm file to open the Web site start page in page view (Figure 8.19).

8.19. Start page template The start page contains hyperlinks to pages containing information about the user, his interests and favorite sites. The photo album can display photos of yourself, family, friends, dogs, and vacation spots (real or imaginary), and visitors to the site can contact the user using the Feedback page.

So far, all node information is represented by placeholders. By replacing the placeholders with your own information, you can have a node ready for publication at any time.

On the start page, instead of the paragraph "Home page is a suitable place where you can ...", type the following text - "You are on the personal website of Ivan Ivan Ivanovich."

In the "Featured Links" paragraph, change the link templates. To do this, click right click click on the link Visit Example.com and in the context menu (Fig. 8.20) select Hyperlink Properties.

The Edit Hyperlink dialog box will open (Fig. 8.21).

In the Test field, type the hyperlink text " Search system Yandex", and in the line Address -URL, on which the transition will be made when this hyperlink is selected - http://www.yandex.ru .

8.21. Edit Hyperlink Dialog Box Similarly, instead of "See Example.org" and "Look at Example.net" links, create links to the Volgograd State University website (http://www.volsu.ru) and news agency RosBusinessConsulting (http://www.rbc.ru).

Replace the paragraph "Note: This is a place to stay..." with information about today's weather in Volgograd. Received modified template start page presented in Fig. 8.22.

8.22. Changed Start Page Template Complete the "About Me" and "Hobbies" template pages in the same way. To navigate to these pages in design mode, use the links of the same name on the site navigation panel while holding down the Ctrl button.

Save all modified pages. View the site designed from the template in a browser.

Next, let's create a slightly more complex node using one of the FrontPage wizards. Wizards are used similarly to templates, but not only create the layout of a page or site, but also guide the user through the process of customizing the content and appearance final product.

Let's assume that the company "All for the garden" has a small store in Seattle, pc. Washington. The owner of the company is Karen Berg (Karen Berg), who would like to exchange information with buyers and expand the buyer base through the Internet. If host support meets such modest goals, it may expand the host's facilities in the future to drive retail sale in online mode".

In this exercise, you will use the Create Enterprise Web Site wizard. Open the Create panel and select the More Web Site Templates link.

In the Web Site Templates dialog box (Figure 8.23), select the Enterprise Web Site Wizard icon, the site name is All Garden, and the site location is in the My Web Sites folder.

8.23. Web Site Templates Dialog Box The first of a series of dialog boxes in the Enterprise Web Site Wizard appears (Figure 8-24). The master uses these dialog boxes so that users can make choices in response to their prompts and enter basic information about the company.

8.24. The first window of the New Enterprise Site Wizard Read the information in the first dialog box and then click the Next button to proceed to the second page.

At the second stage of the Wizard (Fig. 8.25), the user is asked to choose which pages will be included in the company's website. Select all possible checkboxes and click Next.

8.25. The second stage of the Wizard's work - selecting site pages At the third stage of the Wizard's work (Fig. 8.26), you should choose which typical sections will be included in the start (home) page. You should check the boxes Purpose and Contact details.

8.26. The third stage of the Wizard's work - selecting sections of the start page On the fourth (Fig. 8.27) and fifth (Fig. 8.28) stages, you should respectively select which elements the "News" page will include and how many products and services will be described on the "Products" page and services". Leave the default values.

8.27. The fourth stage of the Wizard's work - selecting the elements of the "News" page

8.28. The fifth stage of the Wizard's work - choosing the number of products and services Next, you are asked to choose what information about the products and services offered on the site should be placed on the pages (Fig. 8.29). Leave the default values. Then you need to choose what information users can enter on the form feedback, designed to collect feedback (Fig. 8.30). The default settings do not need to be changed.

8.29. Step 6 of the Wizard - Product and Service Details

8.30. The seventh stage of the Wizard's work - specifying the parameters of the feedback form Next, you are asked to choose in what form the user reviews about products and services collected using the feedback form will be stored on the server. The feedback form places user feedback in a special file. It is proposed to choose in what form - in the form text file, intended for processing through a DBMS and spreadsheet editors or in the form of an ITMI file - this information will be saved (Fig. 8.31). You must select "Yes - tab delimited format".

8.31. Selecting the format for storing user reviews The next stage of the Wizard (Fig. 8.32) prompts the user to select the format of the "Contents" page, which will contain links to all pages of the website and be used to organize the navigation system. You should check the boxes "Automatically update the list of pages" and "Markers for top-level pages".

8.32. Site Table of Contents Presentation Format At the next stage, you need to specify which elements the Wizard should place on the site pages - in the top and footer pages (Fig. 8.33). You should select all possible checkboxes for the top of the page and the checkboxes "Address Email webmaster" and "Date last change Pages". Next, you are asked to choose whether to mark unfinished pages with the "Under Construction" icon (Fig. 8.34). Choose the option of your choice.

8.33. Selecting elements for site pages

8.34. Icon "Under development" The next stage of the Wizard is intended for specifying the name of the organization (full and multiple), as well as its postal address (Fig. 8.35). Provide the following information:

The full name of the organization is Everything for the garden;

Short version of the name - GVA;

Organization mailing address 1234 Oak St., Seattle, WA 10101

8.35. The name of the organization and its address Next, the Wizard suggests specifying the telephone and fax numbers of the organization for which the site is being developed, the webmaster's e-mail address, and the general e-mail address (Fig. 8.36). Leave the first two fields unchanged, and as the addresses of the webmaster and general mail indicate accordingly [email protected] And [email protected].

8.36. Phone and fax of the organization, address of the webmaster and mailbox for general mail After all the necessary data is entered, the Wizard informs about the completion of its work (Fig. 8.37).

8.37. Final Step of the Wizard When you click Finish, FrontPage will create the Web site using the information you provided, and then display a list of tasks to complete to complete the site creation (Figure 8.38).

YPapґіі F* U long nb-knot B

8.38. Task List Open the index.htm page in Design view. Place the cursor after the note "Note. Place the introductory paragraph of your page here .." and type the following text (Fig. 8.39): Welcome to the company "All for the garden"! We do garden work in the Pacific Northwest. This website presents our products and services. If you visit our website or shop, feel free to choose and let us know if you need our help!

You can delete notes before entering new text, but this is not required. Notes will not be visible to site visitors.

[Change the properties of this yayyyy to tps&dress on it tperss b\lock]

8.39. Introductory Paragraph Text Place the cursor at the end of the comment, under the heading "Our Purpose" and then enter the following text (fig. 8.40): At All for the Garden, we offer only high quality plants and garden tools to our customers.

8.40. The text of the paragraph "Our goal" After the comment under the heading "Contact information", enter the following text (Fig. 8.41): Please contact us by fax or e-mail 24 hours a day or call, and also come to our store at the following time : Monday - Friday 9:00 - 21:00, Saturday and Sunday 10:00 - 17:00.

Note: Explain to readers how to get in touch with your organization Keep in mind that your website will be accessible from anywhere in the world; so use the international format when giving phone numbers to the torch. In addition, some key evil addresses are usually indicated here, for example, sales and service departments technical support. Please contact us by fax or e-maj 24 hours a day or call or visit our store at the following times: Monday - Friday 9 00 - 21:00. Saturday and Sunday 10:00 - 17:00.

8.41. The text of the paragraph "Contact information" In order to quickly view the modified page in the form in which it will be seen by visitors, click on the View mode button at the bottom of the page editing and viewing window (Fig. 8.42).

8.42. Browse button If the desired material has already been created for another purpose, such as a press release or company brochure, then there is no point in entering it again from the very beginning in the node. FrontPage allows you to simply copy and paste text into a Web site created with a template and then modify it as you like. You can even paste entire files.

You can copy or cut various pieces of content from program files Microsoft office and then embed them into web pages. The Clipboard task pane can contain text, graphics, and other file items in a convenient and accessible way, and can include up to 24 different items from all Office applications.

Whenever you paste the contents of the clipboard into a FrontPage program file, a

8.43. The news.htm page in design mode Triple-click the "Changes to Web Site" heading to highlight it, and type "Press Publications". The title text will change, but the format will remain the same.

[ News 3 [ Products 3 [ Services ]

8.44. Changed page text while maintaining the format Replace the default introductory paragraph text with the following text: Check out the news! Read here what they write about us in the newspapers.

Go to folder with guidelines. In the File type drop-down list, select Word 97-2002 (*.doc).

Select PR2.doc from the list of available files and then click the Open button to paste the entire text of this document onto a web page.

8.45. File Selection Dialog Box The text of the document will be converted to .YTB format and then to .ITM, after which it will be inserted into the 'News' page, as if you had entered it manually. The original text formatting is preserved (Fig. 8.46).

8.46. Text added from file to page Contact Information at the top of the imported text is contained in a table. The table and its cells are specified dotted lines. Click on the table. Select the main menu item Table Select Table. The table and its contents will be highlighted.

Right-click on this highlighted part and select Delete Cells from the context menu to delete this table.

Triple-click the "Publications in the Press" heading to highlight the entire paragraph, and then press the Bay key to remove it from the web page.

Open the Services page (services.htm). Right-click on the Services page banner and select Page Ad Properties from the context menu.

8.47. Context menu Services page banner The Page Ad Properties dialog box appears.

In the Ad Text field, select and delete current text and then enter the text "Tutorials" as shown in the figure. 8.48.

8.48. Page Announcement Properties Dialog Box Click OK to close this dialog box and change the page title. This change will affect the page title in both the page declaration and view mode (Figure 8.49).

8.49. Services page with a modified banner Open in the program word file classes.doc from the guidelines folder.

Triple-click anywhere in the introductory paragraph to select it and copy its text to the clipboard.

Return to FrontPage. On the services.htm page, click the note text to highlight it and then copy the text from the clipboard. The copied text will replace the comment text.

Select and delete the extra (empty) paragraph inserted with this text.

In the folder list pane, open serv01.htm, serv02.htm and serv03.htm (three separate service files) for editing.

In each file, repeat the steps above to replace the page headers (banners) with the following short options, as described in the Tutorials document:

Change Favor 1 to Spring Joy.

Change Service 2 to Carnivorous Plants.

Change Service 3 to Organic As the page banners are updated, the navigational hyperlinks under the page banners (Figure 8.50) and the page titles in view mode change simultaneously.

8.51. Vertical Navigation Hyperlinks For each of the three Service Name hyperlinks (Figure 8.52), double-click the hyperlink to highlight it and type full name the corresponding course from the Classes.doc document.

Everything for the Garden offers a variety of training courses on geographic areas, general and seasonal care, and

Replace Service Title 2 with Carnivorous Plants: Harmful or Beautiful?

Replace Service Name 3 with Organic Waste: Use It to Get Rid of It! (Figure 8.53).

8.53. Modified hyperlinks Copy and paste the first descriptive paragraph for each course from the Classes.doc document into the services.htm page, replacing the corresponding service description. When finished, the site pages should look like the one shown in the figure. 8.54.

8.54. Changed services.htm page

On each of the three individual course description pages (serv01.htm, serv02.htm, and serv03.htm), click anywhere in the body of the page, press Ctrl+A to select all the content, and then press Del.

1. Appointment software product Microsoft frontpage.

2. Formulate the concepts of a web site and a web browser (browser).

3. What types of nodes can be created when help from Microsoft FrontPage.

4. What are the ways to present an HTML page in Microsoft Frontpage?