Inserting a table in a web page can be arranged neatly on the webpage, allowing the browser to express the data expressed in the table, easier to find the material of interest. Not only that, the form is important tools for designing web pages, skilled, rationally using the form is very important to make a web page.
In the web page, the role of the table mainly has two: First, store data and display information, which is common for the most basic applications, and it is used in Word; the other is to organize the content of the web page, so that the web page is more implied. For graphic mixed web pages, the form can greatly improve the efficiency of web pages. After the hidden table is hidden, the viewer almost does not feel the existence of the table. In fact, all the web templates provided by FrontPage are organized with forms.
This lecture Let's learn how to insert the table in the page and make a simple editing process of the form.
First, the insertion and modification of the table
FRONTPAGE methods to create a variety of patterns, these methods and Word are almost. Let's take a closer look.
1. Use the "Insert Table" button using the common toolbar
You can use this tool to quickly create a simple form:
Move the cursor to where you want to insert the table. Press the left mouse button at the "Insert Table" of the toolbar and a table model will appear. Then press and hold the left button to drag down. Drag Mouse "To Right" can increase the column of the table, "Down" dragging can increase the row of the table until the number of rows you want is displayed (such as 10 rows × 4 columns) (as shown below). Then release the mouse to create a table of default formats.
When dragging the mouse, if you drag it, drag it. 2, using the "Insert Table" command in the "Table" menu, although simple and quick, but created, the form is the default format, you have to modify the properties of the table as needed. The "Insert Table" command in the "Table" menu allows you to set the table more accurately, such as setting the "alignment" of the table, "border thickness", etc. Click the "Table" menu, click Table in the "Insert" submenu, appear "Insert Table" dialog, set the table, column number, etc. on the "Insert Table" dialog, and then click " Determine "Complete the form creation. [Example] Create a width of 80% for the "Common Website" web page 1) Open the "Web Press" website in the FrontPage window and create a blank web page. 2) Enter the title "Common Website" for the new blank web page, and set the font and paragraph format. 3) After another row, the mouse click the "Table" menu, select the Insert option in the "Table" menu, and then click "Table" in the "Insert" submenu;
4) Enter 5 in the field after the "Row Table" dialog box appears, enter 4 in the "column number" field, aligned to "horizontally", specify the width 80%, the border is thick, the cells and spacings are 1, 1 and 0, respectively:
5) The table shown in the page appears in the web page, and finally saves the web page as "cywz.htm" file:
[Note] After the parameters in the "Insert Table" dialog will be saved, so that the future default format will become the style of this setting, including the form created with the "Insert Table" button. 3. Hand-drawing form In addition to the two ways of creating a table above, you can also draw the form you need by "Brush" ("Hand-drawn Table" on the Table Toolbar.
Click the "Pencil" button on the "Table" toolbar, this time the mouse pointer will become a pencil, move the mouse that has become a pen shape to a corner end point of the table, hold the left button The oblique direction dragged to its diagonal end, release the left button, the outer frame of the table is drawn, and then draw each line line and the respective lines. You can create a different cell size, a complex form that changes the ranks. When you complete the drawing form, click the "Hand-drawing Table" button on the Table toolbar so that this button will no longer be selected. To delete any line you don't want, click the "Rubber" ("Clear" button on the Table toolbar, hold down the mouse and drag it through an unstead, when this line segment becomes red, Let go of the mouse button. If you need to split the table, drag the brush onto the other end and connect it to the other end of the place where you need. So the two buttons on the Table toolbar can also modify the established form. [Example] The following figure demonstrates the process of "pencil" painting irregular table: 1) Click the "Hand-drawing Table" button on the "Table" toolbar to move the mouse that has become a pen shape to a corner endpoint of the table, Press and hold the left button, drag to its diagonal end (Figure 1); 2) loosen the left button, the outer frame of the table is drawn. Then move the pen mouse to the upper left line of the table. Press and hold the left button, drag the right side of the table in the horizontal direction (below Figure 2), loosen the left button, the line is drawn. 3) Sequentially paint a race line (Figure 3) and a raceline (below Figure 4). Release the left button, the entire form is drawn (Figure 5 below). If the FRONTPAGE window does not have a table toolbar, just click on anywhere in the toolbar or menu bar, select Table in the shortcut menu to display the Table toolbar. Also, click the "Table" menu, select the "Hand-drawing Table" item, will also display the "Table Toolbar" on the window, and the "Hand-drawing Table" option has been automatically selected. 4, this function is often used to add Word's table to the web, which can reduce the space of the web page. We will introduce again in the sixteenth lecture "Optimization Website". Once the table is established, you can enter text in the table, the input method, and the same in Word. Of course, you can also insert a picture in the table. Second, the modification of the table When the table is created, the table is not necessarily satisfied due to the table of uniformly distributed rules under the default. A form of modification is often required. Below we add a new row to the next table below to illustrate the method of adding new rows, norms. In addition, the column width is average allocation, 1, change the column width and the entire table width to move the mouse pointer to the frame line, when the mouse pointer turns into a two-way arrow, press the left button to drag, change the column width. If the mouse refers to push the entire table on the right line of the table. The following two shows the pre-left narrow right width of the "Common Website" page:
The mouse pointer becomes a two-way arrow column width change
The same method can also be changed to change the tab, but due to the increase in the content of the line, it is usually not necessary to change the line. 2, inserting rows and columns into the row, column, the simplest method is to use the "Insert Row" or "Insert Column" button on the Table toolbar: first move the cursor to the row (or column) (or column) In the right side of the unit, click the "Insert Row" button on the Table toolbar (or "Insert Column") button to insert a row (or one column) on the cell (or right). We often need to add a few lines in the table, which is to use the "Insert Row or Column" command in the "Table" menu and then set on the Insert or Column dialog. [Example] Five lines in the "Common Website" webpage: 1) Click on the image to make the cursor in this line. Click the "Table" menu, click on "Line or Column" in the Insert submenu (down left). The Plug-in Row or Column dialog is open, as shown in the figure below. 2) Select the "Row" in the Insert or Column dialog box, then select "The selected area" (default setting), enter 5 in the field of the "Row" right end. 3) Click the "OK" button to insert a line below in the line, as shown below.
The operation of inserting the new column is basically the same as inserting a new line, but the insertion column will not increase the width of the table, you can try it. 3. Deleting rows and columns To delete rows or columns, you must first select the row or column you need to delete (insessive), the simplest method for selecting line and column is to move the mouse to the most On the left, when the mouse becomes the rough black arrow to the right, click (as shown below), you can select a row; move the mouse to the uppermost end of the selected column, when the mouse becomes down, click Alternatively, a column can be selected. After the rough black arrow, press and hold the left button up (or left and right) drag, can be selected for continuous multi-line (or column). After selecting a line (column), press and hold the "Ctrl" button to click on the other row (column), optionally the discontinuous row (or column).
After selecting the row (or column), click the "Delete" button on the "Cut" button or "Table" button on the Common toolbar to delete the selected row (or column). However, "DELETE" button on the keyboard can only delete the content in the table and cannot delete the row or column. 4, the average distribution of each column or each line After the mobile column (line) line, the columns of the table (row) are uneven, to restore evenly distributed. Or except for one column (line), the remaining columns are evenly distributed. You can achieve the purpose of the "average allocation row" or "average allocation column width" button on the "Table" toolbar can be selected at selected columns or rows on the Table toolbar. 5, like the merged cells and Word, we can split and merge the cells in the table. Through these operations, the table of a rule becomes an irregular table. Only the neighboring cells in the same line (column) can be merged. The specific steps of the merge are: Select the neighboring cells to be merged, the "Merge Unit" button in the Table toolbar will become a solid line, click it, you can combine the selected cells into one Large cell. After the cell is merged, the original characters, pictures, and the like will be transferred into a new cell. [Example] If you want to establish the following table, its specific steps are: 1) Pull out a 5 × 5 table with the "Insert Table" button on the Table toolbar and drag with the mouse on the right line. Make the width of the table meet the requirements:
2) Drag with the mouse on the left side of the first quarter to make the width of the first column meet the requirements:
3) DC with the mouse to drag all of the second to fifth columns, click the "Average Assign Row High" button on the Table toolbar to make the width of these four columns:
4) Let all the first lines over (selected) with the mouse, click the "Merge Unit" button on the Table toolbar to make the first row into a large cell:
5) Use the mouse to drag all the four cells below the first column (as shown below), click the "Merge Unit" button on the Table toolbar so that these four cells become a big The cell is completed throughout the table.
6. The split cell can divide a unit to divide a plurality of cells. The specific steps of split are: 1) Put the cursor to the resolution cell, click the Split Cell button in the Table toolbar. 2) On the Split cell dialog shown in the right image, first select "Split" or "split into columns", then enter the "Row" or "Column Number" box. Number, finally click OK to complete. After the cell is split, the text, the picture, etc. are concentrated in the first cell, and other cells are blank. Third, the form of formation and settings In addition to the modification of the table, we can also modify the table by setting the table property and cell properties, including alignment, thickness, frame, and background color, etc. 1, the table property mouse moves to the table, right click, select "Table Properties" in the shortcut menu, open the Table Properties setting window:
We can see that there are three big items, layouts, borders and backgrounds in Table Properties Settings: 1) The layout of the table is controlled in the "layout" in "layout" is where the table is placed in the page, you You can choose to align, left align, horizontally, aligned between both ends. The default is aligned by left, but this is determined by the table size, and this item is not set when the form width is 100%. "Floating" is a surrounding method that specifies the text and a table, as if the text is surrounded by the text. "Specify Width, Height" can freely set the width and height of the table. If you don't specify a high value, the table will be adjusted according to the object in the table. Indicates that the unit size has a percentage and pixels. In general, we choose a percentage of units as the table size, because it can be adjusted according to the visitor display size and browser window size, the flexibility is higher. "Unit grid margins" indicates the distance between the table margins and the body in the cell, the default is "1", you can set the value according to your own needs. When the "unit grid spacing", the distance between the cell and the cell, the default is "2", this value can affect the line format of the table, when setting it to "0", make the line of the table from below left Such a double line becomes a single line (border color is black). 2) The default value of the border of the table of the table is "1". Sometimes we need to page layout, we will turn off the border of the table, which is set to "0". When you edit a web page in FrontPage, the shutdown border will be displayed in dotted lines, while browsing, the border is invisible. When the border value is greater than "1", the lines inside the table are still constant, but the four-week frame thread is thicker, as shown below:
We can also set the color of the border, the color of the bright edge box, and the dark border (that is, the color of the light surface and the backlight), thereby enhancing the three-dimensional effects of the table. When the color of the border color, the bright edge box, and the dark border uses the default format ("Auto"), the frame line of the table is the relief effect shown in the left picture; if the color of the brightening box and the dark border still use the default format, but the border The color is set to black, then the frame line of the table turns into two lines as the middle picture; if the bright edge is set to yellow, the dark border is set to red, the frame of the table is shown in the three-dimensional stereo shown in the right. effect. In these three examples "1", "1", "unit spacing" is "2".
All border colors are "automatic" border color to black bright border as yellow, dark border is red
If you set the border color as the web background color, you can also eliminate the table frame. But doing this in FrontPage, you will not see the frame, which will bring difficulties to adjust the table. 3) The setting of the table background is in the default state ("Auto"), the background of the table is the same as the background of the web page. Setting the background in the table can separate the table with the background of the web page to make the content of the table more outstanding. Not only can you set the background color of the entire table not only. And you can also set up a background image, first click on the check box before using the background image, then click "Browse" to find the right background image, or enter the path and file name of the background image directly in the field (URL) You can set the picture to the background of the table. Note: When the size of the image is larger than the size of the table, the excess portions of the image will be cut off; the image will be repeated in the table when the size of the image is less than the size of the table. 2, the cell property can set the properties of a certain or adjacent cells in addition to the properties of the entire table. The mouse makes the light in the cell or selects several cells, and then click the "cell Properties" in the "Form" menu to open the "cell Properties" dialog box.
As can be seen from this dialog, many of these items are the same as the "Table Properties" dialog, such as borders and backgrounds. But everyone should pay attention to it, if you set the property for a cell, the table property will be invalid in this unit. For example, you set the background color of the table, but you set up a cell color of a cell, then the cell background color will overwrite the background color of the table. [Example] With the picture as a table background, but the background of the first line is set to Yellow 1) Pull a suitable form on the web with the "Insert Table" button on the common toolbar; 2) Right click on the table, Select "Table Properties" in an exit shortcut menu, open the Table Properties setting dialog box; 3) Click the check box before using the background image, and then click "Browse", in "Select Background Picture" Find the appropriate background image in the "Select File" dialog box appearing at the same time:
4) After clicking "OK", return to the Table Properties setting dialog, in the "Using Background Image", there is already a path file name of the image file:
5) Select all the cells of the first line, and select "Unit Properties" in the shortcut menu that is displayed right after right. In the "Cell Properties" dialog box, click the drop button on the right side of the background color box, set the background color to yellow.
Units Properties Settings Although the table property settings are roughly the same, some places are different: 1. Horizontal alignment It determines that the level of text or pictures in cells or pictures can be selected, and the left alignment, horizontal, two The end is aligned, the default is left aligned. 2, vertical alignment determine the vertical alignment of the cells or pictures in the cell. By default, the center is aligned, and it can be set to become "top alignment" when using a table to design a web page. 3, "Line (column) spacing" is used to set different cell sizes, generally talking about the cell in our form. If you want to get a different cell size, you need to specify here, but it is easy to cause the form of a table. The following is another way to describe the size problem of the cell: Select the "Specified Width" check box to specify the width of the cell. You can specify an absolute value (selected "pixel" radio box), or specify the percentage of the entire table width (selected "percentage" radio box). Since the specified absolute value is not easy to control the consistency of the entire table, a percentage method is generally employed. For example, after selecting "percentage", in the text box on the left, type 50% ("%" can be omitted), then the width of the cell is set to half of the entire table width. "Specify Height": Select the check box to set the height of the entire table.
[Practice] Building a new page of "Moderator Small Archive", insert a form, and fill in the name, gender, age, etc. according to its own actual situation. Save the web pages and forms to the local site after properly modifying the webpage and links through the home page.
