|
|
|
|
Microsoft FrontPage Microsoft FrontPage is a software application that helps you create and manage websites. Because it allows you to add elements to a page using a WYSIWYG (what you see is what you get) editor, anyone can create web pages without knowing much about markup or scripting languages (such as html or javascript). This documentation will show you how to perform the basic tasks involved in creating websites with Microsoft FrontPage 2003; however, many the principles still apply to previous versions of the software.
Creating a New Web Site
Testing Your Pages for Web Compatibility
Working with Pages Uploading your Site to the Web
Advanced Options
Converting to a
FrontPage
Web from Dreamweaver In order to obtain a web on Trinity's server, you must either call or stop by the Help Desk on Level B in the Library and Information Technology Center to submit a request with one of the consultants. Accessing Microsoft FrontPage From the Start menu, select Programs. Another menu will pop up, and from there navigate to the Microsoft Office folder, and then click the Microsoft FrontPage icon to launch the program. NOTE: The procedure for opening FrontPage may vary depending on the setup of your computer. The FrontPage Screen Layout The first time you open FrontPage, your screen should look similar to the one below. There is the main editing area, which will change depending on what you are doing in FrontPage. Generally it will contain the page(s) you are currently working on. Across the top are the file and properties toolbars. These function pretty much the same way in FrontPage as they do in other Microsoft Office programs; they allow you to manage your files as well as the text and object properties they contain. On the right side is the Task pane, which allows you to easily access certain menu items and functions.
Before you begin creating pages within FrontPage, it is best to decide whether you will work on your site on your own computer (locally) or directly on the server (live). Working on a site locally means that any changes you make will not be viewable from the Internet until you save and publish the site to a server. This can be a very useful when developing your site, in that you may preview your work to ensure that everything is functioning properly before making it publicly available. Also, a local site may be worked on even when you don’t have a network connection. Working directly on the server means any changes that are made and saved take effect immediately. In either case, it is important that you have a backup of your web before making drastic changes.
Setting Up a Site Locally To create a site locally on your computer, you must set up a place to store your files on your hard drive. It is recommended that you use the "My Webs" folder within the My Documents folder (Windows) or the "Sites" folder (Mac). An important thing to remember when naming a web folder or file—or generally any computer file really—is to keep it as short as possible and omit spaces. If you have more than one word in your title, you may use a capital letter for the beginning of each word, an underscore between words, or just plain lowercase if it makes for easy readability. Once the folder has been created, open FrontPage, and click on File and Open Site. A dialogue box will appear asking where to look. Locate the folder you just created on your hard drive and select it. You will then get a popup telling you that FrontPage needs to add some information to the folder in order to manage your content. Click Yes to allow the web to be set up properly. Once the web folder is created, FrontPage will open a window like the one below in which it will show that a _private and image folder have been created in your web folder. The private folder is as the name implies—files inside the folder will not be accessible to your site visitors once it is published unless you create a link within an accessible page. You may place files inside of this folder as well as create more folders for organizational purposes. For example, you may store previous versions of your web content or content that you are planning to use at a later date. The image folder is also as the name implies, and is the best place to store any images related to your site. You may also create additional folders within this directory as needed. While you do not have to use either folder, do not delete them because they are required for certain FrontPage features to function properly. Notice at the bottom of the window are numerous buttons that will give you different views.
The procedure is pretty much the same as setting up a web on your machine locally, except that the directory will be stored directly on a server. Even if you are using an ISP provider other than Trinity, you can connect directly to your site provided you enter the right credentials--no VPN connection needed. Go to File, then Open Site, and then either select the web from My Network Places (if you have already connected to the directory before) or in the Site name field, type in the complete server address for your site. For Trinity web sites you request, you will be given both the server address (i.e. http://servername/~username) and the web address(i.e. http://www.trincoll.edu/~username), which is the address that is typed into a web browser. Note: The server address is different from the web address. the server address should be kept private and generally only used when connecting to your site via frontpage, ftp, or other web maintenance software. A dialogue box will then appear asking for your User ID and password (for any Trinity server it will be the same as your email or TCOnline username and password). Also remember that your username should be entered in the following format: cmpcntr\username. Once you enter your information, you may have it saved so that you don't have to log in to the site each time by checking the Remember my password box. FrontPage will then connect to the web server for you, after which you must click Open to view your live site.
To create a home page (and any subsequent pages), select New... from the File menu. This will open the task pane, from which you may select Blank Page. A new page will be opened and the buttons at the bottom of the screen will now appear as shown below.
Once you have created the page, save it by selecting the File menu and then Save. You will get a dialogue box where you may name your page and set a title. By default, Frontpage will insert "index.htm" as the page name if it is the first page to be created in your web (depending on your server settings, your home page may also be called "default.htm").
Page title refers to the title that will be displayed in the title bar across the top of the page. You may leave this blank if you like, but it is a good idea to title your pages with something that will indicate their contents. Add a title to your pages by clicking on the Change title... button when saving the file, or by selecting Properties from the File menu once you have opened the page for editing. Testing Your Pages for Web Compatibility You should constantly test your site to make sure that, at the very least, it displays well in the most current browsers (Internet Explorer, Safari, Mozilla, etc.). Ideally your site would also display in previous versions of the browsers as well. Editing a Page. Your folder list at this point should display all of your site's folders and files in the folder list window that should appear to the left of the editing pane. You may reopen the folder list if it has been closed by pressing Alt + F1. To edit an html page, double-click on it from the folder list to open it in the editing window. You may open any number of pages during one session, navigating between the pages by using the tabs at the top of the editing window as shown below.
Adding Text and Images. One of the most basic tasks you'll be performing when using FrontPage is adding text and images. The process is similar to creating a document in word, in that you simply place your cursor on the page you would like to edit and type the information you would like to add to your page. Any element that can be included in a word document (including lists, and tables) can also be included in your page. You may also add what is called a "non-breaking" return by holding down the Shift key while pressing Enter. This creates a smaller space between text than would normally be created simply by pressing return.
Before adding any images to your web, make sure they are optimized for the web. This applies for any type of element you will be uploading to the web. To prepare an image, use a graphics program like Photoshop, which will allow you to control the size and resolution of your graphic. Size (height and width in pixels). Keep in mind that people will be using various screen sizes to view your web, so your images should be as small as possible without loosing detail, or use thumbnails that link to the larger image. Resolution. Setting your image resolution to 72 pixels is a good rule of thumb to minimize file size and download time. To insert a picture, simply select Picture from the Insert menu at the top of the screen. Browse to the image you want to upload, and then hit the OK button. Hyperlinks can be made to many objects, including other web pages, pictures, multimedia files, bookmarks, e-mail addresses. Links can also be either text or image, but they work in the same way. A text hyperlink will typically be underlined and/or highlighted (different font color from the main text of the pages). An image hyperlink is a little more subtle, in that it will look like any other image on the page until the user hovers over it. Thus, it is a good idea to make image hyperlinks fairly obvious. While most hyperlinks link to other pages, you can also create links that point to other multimedia files, such as images, audio, or video clips that reside on a web server. Bookmarks refer to links that go to other parts of your page, and can be helpful if your pages are long (the index at the top of this page uses bookmarks to link to specific content so that it can be easily found). Mailto links are hyperlinks that generate blank emails (using the default mail software on the user's computer) that are addressed to the recipient specified in the link. To insert a hyperlink, highlight the text or image you would like to use to create the link and then select Hyperlink from the Insert menu. The following screen should appear.
From this screen, you have several options. You may link to an Existing Page either by browsing through your web or typing in a complete URL (such as http://www.google.com) in the Address: field. Link to a Bookmark by clicking on the Place in This Document button on the left or the Bookmark button on the right (you must create a Bookmark before you can link to it; see paragraph below). To create a Mailto link, click on the E-mail Address button. The Text to Display field is the actual text the user will see, which can be different from the address itself. Once you have created your link, click the OK button. To create a Bookmark, place the cursor where you would like the bookmark to link to. Select Bookmark from the Insert menu, give the bookmark a meaningful name so that you will quickly remember where on your page it leads to, and then select the OK button. Tip: Many text hyperlinks can be created automatically simply by typing a URL or email address within your text. Uploading Your Site to the Web If you are already working on a live site this step is unnecessary. However, if you are working locally you must publish it first before it will be accessible from the web by selecting Publish from the File menu. (If you have not already saved all of your changes FrontPage will prompt you to do so before continuing. The Remote website location will be the directory on the Trinity server that has been created for you. Once you have entered this information, click OK. You will then see the Remote Web site view, which shows you the files and folders on your local machine on the left, as well as the files in the directory you are uploading to.
You also have the option in the lower right corner of the site to publish either from local to remote, remote to local, or to synchronize the two (it is not recommended that you use this option since it increases the chances of accidentally applying changes that you do not intend to keep). You may select individual folders and files to publish (or download) by highlighting the item and choosing the appropriate arrow between the two sites, or you may publish all changes by clicking the Publish Web site button at the bottom of the screen. Using Tables for Layout Tables can be very helpful in laying out your text and images for your pages when used conservatively. By using the table as a container to hold your content, you can better control the relative layout--meaning where items appear on the page in relationship to one another--no matter what size screen your site is viewed on. To insert a table, select Insert from the Table menu, and then select Table again. The Insert Table dialogue box will appear, which will allow you to specify table properties (these can be edited later if necessary). When Working with Table Properties, leave the border size set to 0, which is invisible. Also, if the table is being used purely for layout purposes, the width should be set to 100 percent, which ensures that it will grow/shrink to fit the viewer's screen size. Just because you are using a grid, your layout does not have to be grid-like. You may fine tune the properties and layout of the cells (by merging or splitting) to fit and place the elements of your page as needed. While tables can help to organize your design, be aware that they may present accessibility issues for individuals with disabilities. For more information, please see the Web Design Guide for more information. Interactive forms can be useful for collecting information and feedback from your site visitors. You could have text fields for them to enter details or lists from which they select items, all of which can be collected from the browser window by the server. How the information is stored depends on how the server on which your site resides is set up to handle forms. Most allow you to set up a text file or spreadsheet in your own web to store the information, or it is sent an email address or data base you specify. In addition to creating a custom form, FrontPage also provides some basic templates for feedback, guestbook, and user registration forms. A Feedback form can be created using a template and allows viewers to send comments, questions, or suggestions. A Guestbook form also collects comments, but it is stored on a public page for everyone to review. A User Registration form can allow you to keep track of or restrict site viewers by allowing them to choose username and passwords and also allowing you to choose what level of access they will have.
There may be times where you would like to create a form from scratch, or add certain elements to a form template. This can be done from any page by selecting Form from the Insert menu, which will give a list of options to choose from. If you are creating a form from scratch, the first thing you must do is add the form area to the page by selecting Form from the list of options (you'll see the dotted lines denoting a form area and a submit and reset button), and then select the appropriate elements to add. If you are adding to a form that has already been created, simply select the item you would like to add from the drop down menu. Towards the bottom of the items under the Form submenu you will see form properties. This is the area where you may tell FrontPage where to store the results (the information gathered from the form). By default it is a text file in the _private directory.
For more detailed information on creating Interactive Forms and other features in FrontPage, go to Office Online from Microsoft's website at www.microsoft.com. Converting to a FrontPage Web from Dreamweaver Converting from a Dreamweaver web to FrontPage is a fairly straightforward and simple process and there should be no problem with any of the linked elements or files within your web. However, it is always a good idea to test once you have made the change. To convert your web, first open FrontPage, and from the File menu, select Open Site. Browse to the location of your site. Click Yes on the pop-up that asks if it is okay for FrontPage to add information to your folder, but make sure you note the extra files that are added by FrontPage (most begin with an underscore, as in _private).
|
