FRONTPAGE 2003 RSB Web Presence: Using Microsoft FrontPage 2003 Microsoft Office
TABLE OF CONTENTS CREATING A NEW WEBPAGE FOR THE ROSS WEBSITE... 1 CREATING A TABLE... 1 INSERT A TABLE... 1 ADD CELLS, ROWS, OR COLUMNS... 2 Add a row... 2 DELETE A CELL, ROW, OR COLUMN FROM A TABLE... 3 INSERT A TABLE IN A CELL... 3 SETTING THE SIZE AND STRUCTURE OF A TABLE... 4 RESIZE A TABLE... 4 RESIZE A CELL, ROW OR COLUMN... 4 SPLIT OR MERGE CELLS IN A TABLE... 5 Split a cell into columns or rows... 5 Merge two or more adjacent cells... 5 Split a table... 6 SET THE PROPERTIES OF A CELL... 6 BORDERS... 6 FILLS... 6 ABOUT FORMATTING TEXT... 7 BULLETED OR NUMBERED LISTS... 7 TEXT SPACING... 9 Line and paragraph breaks... 9 Paragraph and word spacing... 10 GRAPHIC ELEMENTS... 10 ADD A HORIZONTAL LINE... 10 ADD A PICTURE TO A WEB PAGE... 11 RESIZE A PICTURE... 11 Resize a picture manually... 12 Resize a picture by specifying pixel or percent values... 12 CREATE A THUMBNAIL... 12 HYPERLINKS... 13 CREATING HTML EMAILS... 14
Creating a New Webpage for the Ross Website There is coding behind the scenes of each page on our website that maintains the menu system throughout the site. Therefore, the best way to create a new page is to edit an existing page. Check out an existing page through VSS to edit it. Save the page with a new name in the appropriate folder in R:\\Web\BUSDEV\. You can now check in the original file in VSS and proceed with your new page. You can modify the information on the page to keep the same structure, or delete the contents and start fresh. Creating a Table A webpage does not layout like a Word document. The best way to position text and graphics on your page is by using tables. Insert a table Position the cursor where you want your table. Choose the Insert Table button on the toolbar or select Insert Table under the Table menu. Page 1
If you use the Insert Table button on the toolbar, you will first need to select the size of the table. An Insert Table properties window will open. Set the initial number of rows and columns for your table. Specify other properties such as border size, cell padding, cell spacing, and width. Add cells, rows, or columns Insert cells, rows and columns from Insert under the Table menu. Rows and columns can be added from the right-click shortcut menu. Add a row When using the right-click shortcut menu, rows will be automatically added above the selected row, and columns will be added to the left. Adding rows and columns through the Table menu will open a dialog window that will ask you how many rows/columns and the desired location. Page 2
Delete a cell, row, or column from a table To delete tables or sections of a table, you have to first select what is to be deleted. You can highlight the row, column, etc. or place the cursor in one of the cells involved, then choose the element from Select under the Table menu. Once selected, you can choose Delete Cells from the Table menu. Once selected, rows and columns can be deleted from the right-click shortcut menu, as well as the Table menu. Insert a table in a cell You can further structure your page by placing tables within existing tables. Place your cursor in the cell where you want the table. Next choose Insert Table from the Table menu. This nested table can be set up just like the others, with its own independent properties. Page 3
Setting the Size and Structure of a Table Resize a table Select the table, then choose Table Properties from the Table menu or the right-click shortcut menu. 1. If height or width is not specified, the table is sized according to its content. For example, if you don't specify the width of the table, then the row with the widest contents will determine the width. 2. Width in pixels sets up a "fixed-width table" or a "pixel-based table." Its size remains constant, regardless of the size of the page that it is displayed on. Use it when you need precise control over how much space the table occupies on the page. Resize a cell, row or column Before you set the size on a section of a table, you first need to select what will be resized the column, row or cell. You can select the area by highlighting it, or click within a cell and choose the area from Select under the Table menu. Once selected, choose Table Properties Cell Properties from the Table menu or Cell Properties the right-click shortcut menu. Specify the width and/or height in either pixels or percentage of the table size. 3. Width in percent defines the table width as a percentage of the available space - its size will change accordingly. Typically, the available space is the size of the browser window. But, if the table is nested within another table, then the width is a percentage of the available space in that table. Page 4
If you specified a width for your table, the sum of the column widths should be equal to the table width. This practice is especially important if you want your tables to look consistent across different browsers. If the width of the table in which the cell or column appears is specified in percentages, the cell expands to contain the content added until the percentage is reached. Split or merge cells in a table If a cell's content is wider than the specified width of the cell, the content will force the cell beyond that width. Long words or URLs in your cells can often push your table beyond the width you want. This can also happen if you insert a wide image. If a cell doesn't contain content, it will actually disappear or "collapse" into nothing. That s why when you insert a new table using FrontPage, a nonbreaking space ( ) is automatically placed into each cell. Split a cell into columns or rows Place your cursor in the cell you want to split. Choose Split Cells from the Table menu or the right-click shortcut menu. Set the number of rows or columns you want the cell split into. Merge two or more adjacent cells Select a group of cells. Choose Merge Cells from the Table menu or the right-click shortcut menu. Note: This command is only available when two or more adjacent cells are selected, and the selected cells form a rectangle. Page 5
Split a table Click the row that you want to begin the next table. Select Split Table from the Table menu. Set the properties of a cell Place the cursor in the cell (or group of cells) then choose Table Properties Cell Properties from the Table menu or Cell Properties from the right-click short cut menu. You can specify a number of properties: 1. Horizontal and/or Vertical alignment 2. Row or cell set as a Header 3. Text wrapping 4. Borders 5. Background Borders To apply a border to a cell, select a color from the dropdown in the Borders section of the Cell Properties window. To create a three-dimensional look to the cell, select colors from the Light border and Dark border dropdowns. Note: You cannot apply a border around an individual cell. The table must have a border value set in order to apply a cell border. To work around this restriction, create a one-cell table within the table. You can then set a table border around this single-cell table to imitate a cell border. Fills You can set a solid color as a background to a cell. You can also choose a picture instead of a color. Place a check in Use background picture then Browse to find the picture. Page 6
About formatting text You can format text in Microsoft FrontPage as you would with Microsoft Word. You can apply formatting to either selected words, or an entire paragraph. A general rule is that you can apply font properties such as font, size, color, highlighting, and effects to selected text, and paragraph properties such as alignment, bullets, numbering, shading, and borders to entire paragraphs. For example, you can italicize a single word in a paragraph, but if you try to align the word to the right, the entire paragraph will align right as well. Properties that you can apply to text include: Font and font size. Text formatting effects, which include italics, underline, bold, or strikethrough. Properties that increase or decrease the space between characters to expand or condense your text. Properties that raise or lower text from the other text on a line; for example, to mark a word with a copyright symbol or to indicate a footnote. You can also specify the number of points to raise or lower text. Highlighting a word or an individual letter. Properties that you can apply to entire paragraphs include: Spacing between lines in a paragraph. Borders around text. Line and paragraph indentation. Numbered, bulleted, or multi-level lists. Shading to an entire line or paragraph. Bulleted or numbered lists Creating bulleted or numbered lists is simple. Type the lines of the list. Then select either bullets or numbers from the toolbar. Page 7
You can edit properties of the list, such as font size, through List Properties on the right-click shortcut menu or Bullets and Numbering in the Format menu. Click Style to open the Modify Style window. Under Format, choose the type of formatting needed, such as Font. Page 8
To create a sublist, type the entire list, including sub items. Highlight the items to be demoted, then doubleclick the Indent button on the toolbar. You can adjust the settings of the sublist through List Properties. Text Spacing Line and paragraph breaks A paragraph is a block of text that is separated from another by a paragraph mark ( ). The text is considered to be one paragraph if lines of text are separated by line breaks ( ). Page 9
The paragraph marks and the line breaks are hidden symbols that can be displayed if needed. These symbols are only visible in FrontPage and will not appear on your webpage. Paragraph and word spacing Various properties can be set to adjust the spacing between elements of text. The Paragraph window is opened from the Formatting window. Paragraph spacing includes line spacing, indentation and spacing between paragraphs. Spacing between individual words can also be adjusted. Note: Spacing options are set in pixels. Graphic Elements Add a horizontal line You can use a horizontal line to separate text or to add an accent. After you add a horizontal line, you can modify its properties to change its width, height, alignment, and color. Page 10
To modify the appearance of the horizontal line, double-click the horizontal line. Set properties, such as width and color, in the Horizontal Line Properties window. Add a picture to a Web page You can add graphics to your webpage from the Insert menu or the Drawing toolbar at the bottom of the screen. Note: If you do not see the Drawing toolbar, you can open it from Toolbars under the View menu. If you select ClipArt, a taskpane will open that allows you to search for images. If you select Picture, a window will open for you to search for the picture file on your computer. Resize a picture Resizing a picture changes only the HTML tags that tell a Web browser how to display that picture. The graphics file itself is not changed, and neither is its size or its download time. Large graphics will take longer to load, even if they appear small on the page. You can resample the picture according to its new size, which can provide improved clarity while increasing or decreasing the size of the graphics file. After you have resized the picture, a Picture Actions button will appear in the lower-right corner. Select the icon and choose Resample Picture to Match Size. Page 11
Resize a picture manually Click the picture. Resize the picture by clicking and dragging one of the sizing handles. To maintain the pictures proportions (aspect ratio) choose one of the corner handles to resize the picture. Resize a picture by specifying pixel or percent values Select the picture. Choose Properties from the Format menu, Picture Properties from the right-click shortcut menu, or double-click the picture. Select the Specify size check box and enter the new Width/Height in either pixels or percent. To keep the picture s current proportions, check Keep aspect ratio. You can now enter a new value for either the Width or the Height and the other dimension will adjust automatically. Create a thumbnail Large graphics can greatly impact the download time of your page, but sometimes you need the clarity of the picture. A thumbnail is a small version of the picture, which will link to the full-sized picture as an individual webpage. To create a thumbnail, select the picture and click the Auto Thumbnail button on the Pictures toolbar at the bottom of the window. The thumbnail image will be saved as an individual graphic stored on the server with your webpage. Page 12
You can specify the size and appearance of the thumbnails for your page through the Page Options window in the Tools menu. On the Auto Thumbnail tab, you can set the size, add a border, and/or apply beveling to the thumbnail. Hyperlinks Hyperlinks allow you to connect pages within the site, direct people to external webpages, or offer an easy link to send an email. Select a block text or a graphic. Choose Hyperlink from the Insert menu, toolbar or right-click shortcut menu. Create the type of hyperlink you want: 1. Choose an existing page from the window or the folder dropdown. 2. Enter an external web address. 3. Enter an email address. Page 13
Once a hyperlink is created, Hyperlink Properties is available on the right-click shortcut menu. This opens the Edit Hyperlink window where you can edit or remove the hyperlink. Creating HTML Emails Colorful emails with graphics are more likely to be noticed and read. However, recipients that use plain text setting in their email may not be able to read the message. If you create a webpage for your email with a link in the message, you can create an attractive message that can be viewed by all. Create a simple webpage using FrontPage. Include a line inviting readers to view the email on the web. Here are some examples: Click here if you cannot read this email Click here to view this email in HTML Insert a hyperlink to this webpage using this text. Page 14
Save the page on the Business School website using VSS or within your webuser folder, then close FrontPage. If you saved the page on the Business School website, be sure to add the file and deploy it in VSS. Emailing the page directly from FrontPage does not give reliable results. Instead, copy the page directly from the web. Open a web browser. Navigate to the page through http://www.bus.umich.edu or http://webuser.bus.umich.edu. Choose Select All from the Edit menu and then Copy from the Edit menu, right-click shortcut menu or using the copy shortcut key (Ctrl+C). Open a new email and paste the page into the message window. Your page may not look the same in the email window once you paste it, but the recipient will see it exactly as it is laid out on the webpage. Address the email and send it. Page 15