October 26, 2007 Web Design Workshop
 
The following are cited information from Microsoft Training Site: Quick Reference Card - Create a Web site with FrontPage
  
Plan your Web site
  1. Determine goal.
    • Make it specific, if necessary.
    • Keep it short and focused.
    • Know your audience.
  2. Sketch site structure.
  3. Sketch a common page layout.
Find a Web server
To find a Web server, do one of the following:
  • If you want your site on the World Wide Web, search for a Web site hosting company using your favorite search engine.
    Or, go to the Locate a Web Presence Provider Web site.
  • If you want your site on your company's intranet, then your IT department may have a server you can use. It's also possible that your very own computer could be configured as a Web server. For details, you'll want to consult your IT department, your manager, or the nearest computer guru.
Get server details
Once you've found a server for your site, make sure to get the following information before you start designing your site:
  • URL   For example: http://www.adventure-works.com
  • Correct file name for your home page   index.htm, index.html, default.htm, or default.html
  • Publishing destination   http:// path or ftp:// path
  • User name and password   
  • Server restrictions   File size limit? Other restrictions?
Create a Web site
If you made a Web site using a third-party program (for example, Macromedia® Dreamweaver® or HomeSite™), you can convert that Web site to a Microsoft FrontPage® Web site by clicking the Open Site command on the File menu. If you need to start from scratch, the following steps will guide you through the process.
  1. On the File menu, click New.
  2. In the New task pane, click either One page Web site or More Web site templates.
  3. If you want a Web site based on a pre-made template, choose a template on the left. You can also choose the Empty Web Site template if you don't need a pre-made Web site.
  4. Do one of the following:
    • To create a new disk-based site, click the Browse button. Browse to a location on your computer where you want to store the Web site. When you've found the location you want, click the Create New Folder button Button image, type a name for the Web site, and then click OK. Click the Open button, and then click OK.
    • To create a server-based site, type the URL for the new Web site in the Specify the location of the new Web site box, and then click OK. Note that a server-based site can only be created on a Web server running FrontPage Server Extensions from Microsoft or Microsoft SharePoint® Services.
How to quickly create a Web page
Create a new Web page, and give it a layout
  1. Along the left side of your screen should be the Folder List. It shows all the files and folders in the site. (If the Folder List isn't visible, click the Toggle Pane button Button image.)
  2. At the top of the Folder List, click the New Page button.
    New Page button at top of Folder List
  3. Name the new page, and then press ENTER.
  4. Double-click the new page to open it.
  5. Now close the Folder List to give yourself more room. To close the Folder List, click the Toggle Pane button Button image.
  6. Now make sure that the Layout Tables and Cells task pane is open on the right. If you don't see it, click Layout Table and Cells on the Table menu.
  7. At the bottom of the task pane is a list of layouts to choose from. Click a layout to apply it to the page.
Modify the layout
  1. If you'd like, you can change the alignment of the layout. In the Layout Tables and Cells task pane, under Table Properties, click the Align Center button Button image.
  2. Before changing the size of the layout, make sure to select the Auto-scale cells with table check box in the Layout Tables and Cells task pane. When you resize a table, this setting will allow you to automatically resize the cells inside as well.
  3. Now you'll resize the layout table to suit your design. In the Width box, type a value in pixels, and then press ENTER. Do the same in the Height box.
Add an image
  1. Click inside a cell.
  2. On the Insert menu, point to Picture, and then click From File.
  3. At the top of the dialog box, click the Look in box, to expand it.
  4. Then browse your computer to find the picture.
  5. Click the picture, and then click the Insert button.
Add text
To add text, you can type or copy and paste from other files or programs. Or, you can import text from a Microsoft Word document.
  1. On the Insert menu, click File.
  2. At the bottom of the dialog box, click the Files of type box to expand it, and then click Word 97-2003 (*.doc) in the list.
  3. Locate the document on your computer.
  4. Double-click the Word document to import the text.
Insert a hyperlink
  1. Select either text or a picture.
  2. On the Insert menu, click Hyperlink.
  3. On the left, click Existing File or Web Page.
  4. Select a page, and then click OK.
Add a background to the page
  1. On the File menu, click Properties.
  2. Click the Formatting tab.
  3. Select the Background picture check box, and then click the Browse button.
  4. Locate an image file on your computer.
  5. Select the image, and then click Open.
  6. Click OK.
Add a background image that is not tiled across the page
  1. On the Format menu, click Style.
  2. In the lower-left area of the dialog box, under List, make sure that HTML tags is selected.
  3. In the Styles list, double-click body.
  4. Click the Format button, and then click Border in the list.
  5. Click the Shading tab.
  6. In the Background picture box, type the path to the picture.
  7. Select no-repeat in the Repeat list.
  8. Click OK three times.
Additional information
More information about using tables for page layout
This course only touched the tip of the iceberg when it comes to using HTML tables for page layout. See these other training courses for more in depth information:
Course
What you’ll learn
HTML Tables I: Basic concepts
Table basics: How to insert a simple HTML table, what table tags are like, and how to change
table properties
HTML Tables II: Table and cell widths
More basics: How HTML table and cell widths work, and how to make them look the way you want
HTML Tables III: Design a page with layout tables
The fun stuff: How to use layout tables to design a page, and how to use a tracing image to start
your layout
HTML Tables IV: Format and touch up a page layout
Finishing touches: How to format a layout table, how to add color, style, and finesse like a pro, and how to make your table stretch
Other page layout techniques
You can also use layers for page layout. Frames is another technique you can use as well. Check out the following for more information:
More information on styles
If you would like to learn more about customizing your pages with cascading style sheets, check out these resources:
  
 
 
 
 
 
Dr. Reza Namin
Superintendent of Regional School District
507 South Main Street
Orange MA 01364
Superintendent's Office (978) 544-2920
E-Mail: Dr_Namin@rcmahar.org
 
 
© 2007 -2008 Ralph C. Mahar Regional School District
All Rights Reserved. No part of this site may be reproduced without permission of Ralph C. Mahar Regional School District.
The Ralph C. Mahar School District is an equal opportunity employer and is committed to the provision of quality educational programs for all students. Ralph C. Mahar School District does not discriminate on the basis of race, color, sex, religion, national origin, disability, age or sexual orientation.