HTML in 10 Steps or Less- P28 doc

Inserting Tables T ables may be one of the most powerful design features you can employ in a Web page — and FrontPage makes creating and customizing tables so easy, you’ll find yourself using them all the time to control the placement of text and images. 1. In Page view, click to place your cursor where the new table should appear. 2. Determine ahead of time the number of rows and columns for your table. You can do this in any number of ways, as described in Steps 3 and 4. 3. Click the Insert Table button on the toolbar and drag through the resulting grid (see Figure 243-1) to indicate the dimensions of the table. Figure 243-1: Dragging through the grid in the Insert Table tool 4. You can also choose Table ➪ Insert ➪ Table to open the Insert Table dialog box (see Figure 243-2). 5. Click OK to insert the prescribed table (see Figure 243-3). note • Use the Borders and Shading command dis- cussed in the previous task to apply borders and shad- ing to individual cells, sin- gle rows or columns, or to an entire table. Just select the portion of the table you want to border or shade and then choose Format ➪ Borders and Shading. 516 Part 16 Task 243 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. tip • Using the Insert Table dia- log box allows you to per- form several table-planning tasks in one place. Set table dimensions; establish cell alignment, spacing, and padding; and choose border options. You can also apply a background to your table. Figure 243-2: Setting table dimensions and attributes more precisely Figure 243-3: A table ready to house text, images, or simply blocks of color based on cell background colors Working with FrontPage 517 Task 243 cross-reference • Learn to insert a table with Dreamweaver (see Task 207). Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Adding and Deleting Table Rows, Columns, and Cells O nce you build a table, you can always make changes later. Insert new rows or delete existing ones, and add or delete columns. 1. In Page view, select the column (see Figure 244-1) or row you want to delete, or click next to where a new column or row should appear. Look for a small black arrow just outside a column or row and then click to select it. Figure 244-1: Selecting a table column 2. To delete the selected row or column, choose Table ➪ Delete ➪ Rows, or Columns (depending on what you’re doing). The selected row or column disappears. 3. To insert a new column or row next to the selected table content, choose Table ➪ Insert ➪ Rows, or Columns (depending on what you’re doing). The Insert Rows or Columns dialog box opens (see Figure 244-2). note • If you start out with a col- umn selected and choose to insert one or more additional columns, the Location options will be Left of Selection and Right of Selection. If you start out with a row selected, your choices for Location will be Above Selection or Below Selection. 518 Part 16 Task 244 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. tip • Use this technique to build a single-cell table (where there was no table at all before). Just click where you want the cell to appear on the page and choose Table ➪ Insert ➪ Cell. Resize the cell and adjust its border and background settings by choosing Table ➪ Properties ➪ Cell. Figure 244-2: Selecting how many new rows or columns to add, and where they should appear 4. To insert a lone cell within a table, first click in the cell that should be to the left of the new one. 5. Choose Table ➪ Insert ➪ Cell. A single cell appears to the right of the selected cell (see Figure 244-3). Figure 244-3: Adding a single cell to a block of cells Working with FrontPage 519 Task 244 cross-reference • You can build a single cell in Dreamweaver, too (see Part 15). Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Splitting and Merging Table Cells I t’s easy to change the dimensions of a table after you’ve created it. You can break existing cells into more cells or merge two or more cells into a single large cell. Splitting or merging cells makes it possible to build tables that accom- modate your content as you want to present it, with the layout you had in mind. By using the Split Cells and Merge Cells commands, you achieve a greater degree of flexibility than can sometimes be achieved by adding whole rows and columns. 1. To split a single cell into multiple cells, start by clicking in the cell you want to split. 2. Choose Table ➪ Split Cells to open the Split Cells dialog box (see Figure 245-1). Figure 245-1: Making two or more cells from a single cell caution • You can split a single cell into two or more rows or into two or more columns. If you need to create both rows and columns from a single cell, repeat Steps 2 through 4 until you’ve achieved the number of new cells you want. 520 Part 16 Task 245 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. tip • Merge all cells in the top row of a table to create a handy place for the table’s title. 3. In the Split Cells dialog box, enter the number of columns or rows you want to create from the cell. 4. Click OK. The cell splits (see Figure 245-2). Figure 245-2: Splitting a single cell into three cells 5. To merge two or more cells into one, start by selecting the cells — they must be adjoining cells, either side by side, above or below each other, or in a block. 6. Choose Table ➪ Merge Cells. The cells merge into one. This can be useful for creating a single cell to house a table’s title, to create a big cell for a lot of text, or to make room for a large image without changing the entire table’s layout. Working with FrontPage 521 Task 245 cross-reference • Controlling table dimen- sions in HTML, including cell merging and splitting, is covered in Part 6. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Resizing and Reformatting Table Cells F rontPage makes it easy to change any aspect of a cell’s appearance, size, and position. 1. To resize a table cell in Page view, point to a side border on the cell in question and look for your mouse to change to a two-headed arrow (see Figure 246-1). Figure 246-1: A two-headed resizing arrow appears when you mouse over a cell’s border notes • The Cell Properties dialog box allows you to adjust the cell height. Unless you prefer to resize things “by eye,” skip the mouse tech- nique altogether. • You can enter numbers either as a pixel height or width, or as a percentage of the current size. For example, if you enter 50 and choose In Percent, the cell will be reduced by half. • The Horizontal and Vertical Alignment settings don’t affect the appearance of an empty cell but they do affect the alignment of what you put in the cell. 522 Part 16 Task 246 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. tips • Open the Cell Properties dialog box by right-clicking the cell and choosing Cell Properties from the short- cut menu. • The Rows Spanned and Columns Spanned fields don’t explain themselves very accurately to anyone not completely familiar with table construction in HTML. The concept of spanning other parts of the table comes from the colspan attribute in HTML (see Task 45).What happens when you use these options is the same as when you use Table ➪ Merge Cells and Table ➪ Split Cells. If your selected cell is changed to span two columns, it appears like two merged cells above or below the cells that remain in two columns. If you span two or more rows, the single cell overlaps the number of cells (vertically) that you specified in the field. 2. Click and drag to resize the cell. Drag outward to make the cell larger, or inward to make it smaller. Unlike Dreamweaver, which allows you to resize table cells vertically as well as horizontally (see Task 208), FrontPage sticks to the pixel height set when the table was created; you cannot drag to make a cell taller or shorter. 3. To make fine adjustments over and above (or instead of) the changes you can make manually with the mouse, click in the cell you want to resize and choose Table ➪ Table Properties. 4. From the submenu, choose Cell to open the Cell Properties dialog box (see Figure 246-2). Figure 246-2: Adjusting the size, fill, border, and alignment of any selected cell with the Cell Properties dialog box 5. Using the Cell Properties dialog box, enter new numbers in the Specify Height and Specify Width fields. Working with FrontPage 523 Task 246 cross-reference • Adjusting cell height and width in HTML is a matter of entering new values for table properties (see Part 6). Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Populating a Table with Graphics and Text I nserting a picture or text in a table is a little more complicated than doing so on a simple Web page. You have to choose which cell contains the picture or text and inform FrontPage how to align the content (horizontally and vertically). You can also format the text to fit within the table if the table’s dimensions are dic- tated by the page design or some other constraint. 1. To insert a graphic inside a table cell, click within the cell to select it (see Figure 247-1). Figure 247-1: Populating your table by clicking in the first cell to receive content 2. Choose Insert ➪ Picture ➪ Clip Art, or From File — whichever is appropriate for the image you want to insert. 3. Once the image appears in the cell, manipulate its placement by using the Formatting toolbar (see the relevant tools in Figure 247-2). Figure 247-2: Applying horizontal alignment from the formatting toolbar by clicking the Left, Center, or Right alignment buttons To access more tools for controlling cell content, right-click the cell and choose Cell Properties (see Figure 247-3). Center alignment Left alignment Right alignment notes • The Justify alignment but- ton is only for text. It cre- ates a straight right margin so there’s no jagged edge of text. This form of align- ment does not apply to graphics (which have no edge, of course). • Text vertical alignment is Middle by default. If you want to have the text start at the top of the cell, choose Top from the Vertical Alignment drop-down list. 524 Part 16 Task 247 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. tip • Merge cells before typing text into them. Alternatively, use the Cell Properties dialog box and enter a number of columns for your text to span. Figure 247-3: Specifying horizontal and vertical alignment for the cell’s content in the Cell Properties dialog box 4. To add and format text in a table cell, click inside the cell and simply start typing. You can also use the Paste command (Edit ➪ Paste or Ctrl+V) to copy text from elsewhere — a Microsoft Word document or another Web page — and see it fill the cell (see Figure 247-4). The cell’s dimensions control word-wrapping within the cell. Figure 247-4: Text and images inserted into table cells 5. Continue typing in cells, using the cell resizing techniques discussed in Task 246 to make the cells the right width for the overall page and table design, as well as to accommodate your text. The size of the cell when you start typing dictates the width of any paragraph you type (see Figure 247-4). 6. After typing in any particular cell, reopen the Cell Properties dialog box (by right-clicking the cell, not the text) and make sure No Wrap is turned off (it’s off by default) so that your table cells don’t widen to accommodate your text. They’ll lengthen but you may not want them to widen, which could throw off the overall table layout. Working with FrontPage 525 Task 247 cross-reference • Fine-tune your tables in HTML (see Part 6). Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. [...]... Entering keywords and description text in the Page Properties dialog box caution • Don’t be sneaky and use words in your description or keyword list that don’t have anything to do with your site — just because many Web surfers use those search terms For example, using “sex” in the keywords for a site pertaining to preserving historic sites is misleading Visitors looking for “sex” are not going to be interested... dashed line appears under the selected word (see Figure 250-2) 4 Continue bookmarking other words in your document, repeating Steps 1 through 3 for each one 5 To create the links that take visitors to the bookmarked text, type or select existing triggers, such as those shown in Figure 250-3 6 Select the words/phrases in your table of contents, one at a time, and click the Insert Hyperlink button for each... FrontPage 531 Task 250 tips • Figure 250-2: A dashed underline indicating a bookmarked word • A vertical or horizontal list of text links is the simplest form your bookmark triggers can take Short phrases or single words work best, as long as it’s clear what the links take visitors to Make it work like an index or table of contents After creating bookmarks, test them Click each one to make sure it takes... finishes, you’ll see what was uploaded and when Before publishing your site to the Web, preview it locally in your browser Choose File ➪ Preview in Browser and repeat this process for at least three or four of the browsers listed in the submenu, including Internet Explorer and Netscape in several of their common versions Depending on which server type you select, a dialog box appears asking for information... Clicking Set Initial Page brings up the Insert Hyperlink dialog box, which allows you to choose a Web page (by entering a URL) or an existing HTML file stored locally on your server Either option displays the page within that frame Clicking New Page inserts a blank Web page within the frame Use FrontPage to populate that page with text and graphics Part 16 Creating Frames F rames are Web pages within... visitors attempting to navigate a complex or text-heavy document 1 In Page view (in Design mode), select a word, usually the first word in a section that you want to bookmark, by double-clicking the word 2 Choose Insert ➪ Bookmark to open the Bookmark dialog box (see Figure 250-1) Figure 250-1: The Bookmark dialog box 3 Type a name for the bookmark or just use the word that appears automatically in the... pages are usually ignored by search engines This makes using frames slightly risky if you rely on visitors coming to your site from Yahoo or Google Figure 248-1: Creating frames automatically from a template instead of one at a time by hand 6 Click the appropriate button (Set Initial Page or New Page) in each frame 7 Resize the frames as needed by pointing to their borders and dragging with your mouse... choose Page Properties from the shortcut menu to format the page (within the frame) as you would any other Web page You can even use the Format ➪ Theme command on an individual frame and apply a separate theme to that frame only cross-reference • Learn how to format frames in HTML in Part 8 Figure 248-3: Each frame contains original content you inserted or displays an existing page from another site Please... for each one 7 In the Insert Hyperlink dialog box, click the Bookmark button 8 In the Select Place in Document dialog box, select the bookmark by name (see Figure 250-4) that you want to use as your link for the selected text Click OK here and then again in the Insert Hyperlink dialog box Your link is created Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark Working with FrontPage... content to them, inserting text and graphics as desired (see Figure 248-3) Add what’s called an inline frame to an existing page Choose Insert ➪ Inline Frame and click New Page (one of the two buttons that appears inside this new “box” on your page) This creates a frame within your page, rather than turning your entire page into a frames page or frameset If you chose New Page as the content for a given frame, . those search terms. For example, using “sex” in the keywords for a site pertaining to preserving historic sites is misleading. Visitors looking for “sex” are not going to be interested in your site anyway,. 250-2). 4. Continue bookmarking other words in your document, repeating Steps 1 through 3 for each one. 5. To create the links that take visitors to the bookmarked text, type or select existing triggers,. Splitting a single cell into three cells 5. To merge two or more cells into one, start by selecting the cells — they must be adjoining cells, either side by side, above or below each other, or in