Page layout design for FrontPage XP

Make a beautiful web page, inseparable from the overall layout of the Web page design, the design of the Web page layout is reasonable or not, directly affect the beauty of the page. Web page layout design generally use tables and frameworks, the use of tables is relatively more common, this time we take tables and frames as an example, to see how to arrange the layout of the Web page.

Use of tables

Tables are made up of rows and columns, and using tables can be a good way to format objects in a Web page, often used for layout of pictures and text within a page.

Step 1 Insert Table

Create a new blank page, and then place the insertion point where you want to insert the table, execute the menu table/Insert/Table command, and open the Insert Table dialog box. In the number of rows, Columns box, enter 4 and 3, in the Alignment box, select the table on the page as the default, and in the Border weight box, enter a table border width of 0, that is, you do not need a table border. To change the spacing between the cell border and the content, you can enter a value in the cell padding box, changing the spacing between cells to enter a value in the Cell spacing box, as shown in Figure 1.


Figure 1 Setting Table parameters

Step 2 selection of tables

Click anywhere in the table, and then execute the Menu table/Select Table command to select the entire table. If you place the insertion point in a cell, you can select the current cell by executing the table/select/cell command. To select more than one cell at a time, select a cell, hold down the CTRL key, and then click the other cells you want to select.

Step 3 Table Properties

In Page view, open the Table Properties dialog box by right-clicking the table and selecting the table Properties command from the shortcut menu, as shown in Figure 2.


Figure 2 Setting table properties on the Edge

In the Alignment drop-down list, select the position of the table on the page, such as Align Left. The float option is used to specify how the text is formatted around the table, and you can choose default if you don't want the text to wrap around the table. You can also change cell spacing and cell margins, as well as the column width and height of the table.

In the Border option, specify size to set the border width of the table, if you do not need a border to set to 0. The Color option sets the table border color, "bright border" and "dark border" can set the table with three-dimensional effect of the two-color border, set the two parameters, pay attention to adjust the color of the value.

In the background option, you can specify a table's background color. If you plan to display a background picture in a table, you can select the Use background picture check box, and then click the Browse button to select a picture.

Step 4 using cells skillfully

You can merge the two cells by selecting the 1th row, column 2nd and line 1th, two cells, and then clicking the right mouse button and selecting Merge Cells on the shortcut menu. Then position the insertion point in row 1th, column 1th, and execute the Insert/Picture/From File command to insert the logo icon for the site. Next, insert the banner banner of the Web site in column 2nd of line 1th.

Select the 2nd row of the table, merge the row into cells, and then right-click, select split cells, and in the Open dialog box, enter a value of 5 on the right of number of columns to split the row cell into 5 columns.

Select this 5-column cell, right-click, and execute cell properties, and in the Open dialog box, set the background color of the cell to be light gray, as shown in Figure 3. Finally, in the 5 cells just set up, enter the navigation column name of the page, and set the corresponding links for each column.


Figure 3 Setting cell properties here

Again, merge the other cells and complete the entire page.

Use of the framework

The framework can divide the browser window into different areas, each of which can display different pages. You can keep the contents of some frames in a browser window forever, while the rest of the windows change.

Step 1 Creating a framework

Execute the menu file/new/Web page or Site command, click Page template in the Open Task window, and then select the Frames page tab, and then click OK when you have clicked the frames page template that you want to use.

Step 2 Set the initial page

Once you have established the frame, you are ready to go to the frame Setup interface, as shown in Figure 4.


Figure 4 Frame Setup here

Click the Set initial Page button in each frame, and then select an created page in the folder to display the appropriate page in the appropriate frame.

Alternatively, you can click the New Page button, where FrontPage XP automatically creates a new, blank page in the frame, and the new page is automatically set to the initial page, and the reader friend can design the blank Web page in conjunction with the relevant knowledge previously described.

The framework can be used as a complementary tool in the layout of a Web page, and appropriate use can make the page layout more reasonable.

Arrival tip: To make a beautiful web page, the need for flexible use of Web page layout tools to achieve a multiplier effect. Next stop we will use the stylesheet CCS in FrontPage XP to add special effects to our home page by using the style sheet.