Web Site Development with FrontPage/Swish stimulate 5 International Training Program about information in 2005
|
|  Yüklə 415.5 Kb.
|
Website Design
Web Site Development with FrontPage/SwishSTIMULATE 5
|
, point to Programs, 
|
Item |
Description |
|
Page Tab |
An easy way to select the page you want when you have several pages open. |
|
Title Bar |
Displays the name of the current page, and its location in your Web site. |
|
Menu Bar |
Contains menus like File, Edit, View, and Insert, and is the starting point for many of the tasks you will undertake in FrontPage. |
|
Ask a Question Box |
To find more information about a procedure in FrontPage, type a question in the Ask a Question box, which accesses the online Help system. |
|
Close Page |
This button closes the page that is currently in view. |
|
Scroll Bars |
These let you move the page so a different portion is displayed. |
|
Status Bar |
Represents the state of a current task. For instance, the Status Bar may display the text “Retrieving Index.htm” when opening the home page, or show the destination of a hyperlink when you move your mouse cursor over a link in the Normal pane. |
|
Page View Panes |
These represent the different panes of the workspace. For example, the Normal pane is where you will do most of your work in this tutorial. Other panes are the HTML pane and the Preview pane. |
|
Progress Indicator |
Shows the status of a current action. |
|
Estimated Download Time |
Gives you an idea of how long it will take a user to view your page in a Web browser. |
|
Task Pane |
A pane within Office XP programs that provide commonly used commands. Its location and small size allow you to use these commands while still working on your files. |
|
Standard and Formatting toolbars |
Displayed by default. They provide easy access to the commands you will use most often when working in FrontPage. |
|
Views bar |
What you see in the main program window depends on the currently selected view. The icons on the Views bar provide different ways of looking at the information on your page or in your Web site. |
To create a home page
The home page is the front door to your Web site. It provides information about the content or subject matter of your site in order to spark interest in your site visitors. The home page also contains the links to the other pages in your Web site.
-
On the blank page in Page view, type Welcome to Stimulate5! and then press ENTER.
Just like in a word processor, pressing ENTER puts the cursor on a new line.
-
Next, type the sentence Take a look around to learn more about our sporting goods, see pictures of our merchandise, and look at our Sports Photo Gallery.
-
Press ENTER.
Most of the content for your Stimulate5 site is already created. When you’re ready to make your own Web site, FrontPage lets you import any of your existing documents directly onto your Web pages without having to retype anything.
Your page should now look like this:
Next, you will add a picture to the Web page. Pictures can be scanned photographs, drawings, or computer graphics created in a drawing or image-editing program.
For this example, the picture you’ll insert is a graphic of the FrontPage logo:
To insert a graphic on the home page
-
On the Insert menu, point to Picture, and then click From File.
FrontPage displays the Picture dialog box.
Note The picture file you’ll insert is located in the Tutorial folder that was installed with the FrontPage program files.
-
Next to Look In, select the hard disk where you installed the tutorial.
You most likely installed the tutorial on your C or D drive.
-
Navigate to the folder named FPTutor2002 by double-clicking each folder in this path until the Look in box displays FPTutor2002.
You will see several files in the FPTutor2002 folder. By default, FrontPage searches for picture files when you are inserting a picture.
-
Click the file named frontpage, and then click Insert.
FrontPage inserts the selected picture file on the current page. It is a graphic that your site visitors will be able to click to learn more about FrontPage 2002.
-
Press ENTER to create a new line.
Your page should now look like this:
Merely inserting a picture of a button doesn’t mean that anything will happen when someone clicks it in a Web browser. To make a picture or a word clickable, it must have a hyperlink associated with it.
A hyperlink is a pointer from text or from a picture to another page or file on the World Wide Web or on an intranet. On the World Wide Web, hyperlinks are the primary way to navigate between pages and other Web sites.
In the next steps, you’ll create a hyperlink from the graphic you just placed on the home page.
To create a hyperlink from a picture
-
On the home page, click the picture of the FrontPage 2002 button you inserted.
When a picture is selected, it is shown with file handles — eight small squares around the outline of the picture. These can be used to resize a picture or change its appearance. When a picture is selected, FrontPage also displays the Pictures toolbar. The Pictures toolbar provides picture editing and formatting tools, which you’ll learn about later.
Note If the Pictures toolbar doesn’t appear automatically, on View menu, point to Toolbars, and then click Pictures.
-
On the Insert menu, click Hyperlink.
FrontPage displays the Insert Hyperlink dialog box. Here, you specify the target of the hyperlink you are creating.
-
In the Address box, type www.microsoft.com/frontpage.
To save the current page
Now that you’ve invested some time and completed a number of steps, it’s a good idea to save your page.
-
On the File menu, click Save As.
FrontPage displays the Save As dialog box. Here, you can specify the location for the current page, and review or change the page title, the file name, and the file type.
-
In the Save As dialog box, click the My Documents icon on the vertical places bar.
The contents of your My Documents folder are displayed. If no files are displayed in the file list, then you currently do not have any other Web pages stored here.
-
Next to the Page title field, click the Change title button.
FrontPage displays the Set Page Title dialog box. Here, the default page title is based on the first line of text on the current page. A title identifies the contents of a page when it is displayed in a Web browser. For this tutorial, you’ll change the page title to something more descriptive.
-
In the Set Page title box, type Home Page and then click OK.
-
In the File name box, change the suggested text to homepage, and then click Save.
FrontPage saves the current page.
Page View Options
While creating the home page, you’ve worked exclusively in normal Page view, but there are three different ways you can choose to look at the current page.
To display HTML tags on the current page
-
In Page view
, click Reveal Tags on the View menu.
-
FrontPage displays graphical representations of standard HTML tags for the current page. This display is useful for people who want to know where HTML tags are placed while they design their pages.
-
To hide the tags, click Reveal Tags on the View menu a second time.
To display the HTML of the current page
-
In Page view, click the HTML button at the bottom of the page.
This causes FrontPage to display the HTML code that it has created so far while you were designing the home page. Web browsers decode these instructions to display the page. The HTML pane is intended for experienced Web developers and page designers who want to customize the HTML that FrontPage creates.
-
If you want to set your preferences for the way FrontPage will generate HTML code, click Page Options on the Tools menu, and then click the HTML Source tab. If you’re not experienced in HTML, you don’t need to make any changes here. Click Cancel to close the Page Options dialog box.
-
Click the Normal button at the bottom of the page to return to the Normal pane.
To preview the current page
-
Click the Preview button at the bottom of the page.
Note If you do not have Microsoft Internet Explorer installed on your computer, the Preview tab will not be displayed, and you will not be able to preview your pages this way. For more information, see Before You Begin.
-
Click the Normal button at the bottom of the page to return to the Normal pane once again.
Creating a Web site with FrontPage
A Web site is the collection of a home page and its associated pages, graphics, documents, multimedia, and other files. Web sites are stored on a Web server or on a computer’s hard drive. FrontPage-based Web sites also contain files that support FrontPage-specific functionality and allow Web sites to be opened, copied, edited, published, and administered with FrontPage.
When you save your pages to a Web site, FrontPage can automatically manage and repair hyperlinks, organize files and folders, maintain dynamic link bars, check spelling across all pages in the Web site, and generate reports that point out problems with your pages and files.
To create a new Web site
1. On the File menu, click Close to close the current page.
2. On the File menu, point to New, and then click Page or Web.
FrontPage displays the New Page or Web task pane. Here, you can choose from several Web site templates and wizards, specify where you want to save your Web site, and specify what you want to call it.
-
Under New from template, click Web Site Templates.
-
Click One Page Web, and then press TAB.
Pressing the TAB key moves the selection to the field where you specify the name and location of the new Web site.
-
In the Specify the location of the new Web box, change the suggested name to <drive>:\My Documents\My Webs\ Stimulate5, and then click OK.
Notes
-
<drive> represents your local hard disk, which is usually C:\ or D:\.
-
FrontPage creates a new Web site named “Stimulate5,” and displays its name and location in the title bar at the top of the FrontPage program window.
-
Because you’ll be working with several files in your Web site, FrontPage also displays the Folder List, where you can see the files and folders in your current Web site, similar to files and folders in Microsoft Windows Explorer. You’ll learn how to use the Folder List later, in Lesson 2.
-
If the Folder List is not showing, do the following:
-
On the standard toolbar, click the arrow to the right of Toggle Pane
, and then click Folder List.
-
Click the Navigation icon
on the Views bar.
When you have a Web site open, the icons on the Views bar let you look at the information in your Web site in different ways.
Navigation view shows a graphical representation of the structure of your Web site. Because you created a one-page Web site, FrontPage has automatically designated it as the Web site’s home page — indicated with a small icon of a house
.
While in Navigation view, FrontPage also displays the Navigation toolbar. You can drag the Navigation toolbar anywhere on your screen.
Next to the Views bar, FrontPage displays the optional Folder List, just like it did in Page view.
Creating Web site Content
Now that the home page is part of the current Web site, you will create the content for the other pages in the Stimulate5 Web site.
Edit the About Us page
-
Click the Navigation icon on the Views bar to switch back to Navigation view.
Notes
-
The Folder List now shows the two picture files you saved to the current Web site. The file Index.htm is the new home page. You can later discard the remaining copy of the home page from your My Documents folder.
-
In the Folder List, the file names of the other pages were automatically derived from the page titles you typed into the pages in Navigation view. For this tutorial, we won’t change the names.
-
Double-click the About Us page to open it in Page view.
This page will provide some background about your fictional company for site visitors. For this tutorial, we have provided this text for you, so you can simply insert it on the page without having to type it.
Designing a Page
To help the reader differentiate the paragraph headings, list of products, and event details that the text on this page talks about, you will add some pictures, format paragraph styles, and create a bulleted list.
To create a bulleted list
-
With the Products page still displayed in Page view, find the words “Team Bag.”
If the entire product list is not visible, use the scrollbar to bring the entire list into view.
The list begins with “Team Bag” and ends with “Goal Netting.”
-
Click just to the left of the letter T in “Team Bag,” hold down SHIFT, click just after the word “Netting,” and then release SHIFT. This will select the entire list.
-
On the Formatting toolbar, click the Bullets
button.
FrontPage converts the selected text to a bulleted list.
-
Click anywhere on the page to deselect the list.
Your page should now look like this:
You can also create numbered lists with FrontPage. When you add new items to a numbered list, FrontPage automatically numbers them sequentially. You can add to bulleted and numbered lists by pressing ENTER after an item in the list. To end a list, press ENTER twice after typing the last list item.
Next, you will place four pictures on the current page and use positioning features in FrontPage to align the pictures with the paragraphs they are associated with. This will create a more interesting page layout.
To position pictures with text
1. With the Products page still displayed in Page view, place your cursor after the text “Featured Items of the Week.”
2. Click Insert Picture From File
on the standard toolbar.
When you last inserted a picture, you did not have a Web site open, and FrontPage automatically displayed the Select File dialog box. Now that a Web site is open, FrontPage assumes you want to work with pictures that are already part of your Web site, and therefore displays the Picture dialog box.
Because you haven’t yet added the picture you want to the current Web site, click the drop-down menu next to Look in, and navigate to the FPTutor2002 folder.
Note The folder is located at <drive>:\FPTutor2002, where <drive> represents the hard disk where you installed the tutorial.
4. Click the file named FPTutor001, and then click Insert.
FrontPage inserts a picture of a soccer ball just after the text “Featured Items of the Week.”
5. Next, click the picture of the soccer ball to select it.
6. On the Format menu, click Position.
FrontPage displays the Position dialog box.
7. Under Wrapping style, click Right, and then click OK.
The picture is aligned with the right margin of the current page, and the bulleted list flows to the left of it.
8. On the toolbar, click the Save button to save changes to the Products page.
9. In the Save Embedded Files dialog box, click OK.
Your page should now look like this:
You can either place pictures one by one in this way, or you can import the pictures you will use on your pages all at once. While importing single files is done in Page view, inserting a group of files or entire folders is done in Folders view.
To create a feedback form
1. In Page view, press CTRL+END to quickly jump to the bottom of the current page, or scroll all the way down using the scroll bar.
-
On the new, blank line, type Give Us Your Feedback! and then press ENTER.
-
On the Insert menu, point to Form, and then click Textbox.
FrontPage inserts a new form with a text box on the current page. The dashed lines indicate the form’s boundary. By default, the new form also contains Submit and Reset buttons.
Next, you will customize the default form by adding more form-fields and form-field labels, so site visitors know what kind of information you want them to enter.
To customize the form
-
Click on the Submit button, and then click Center
on the toolbar.
-
Press the left arrow to place the cursor before the Submit button, and press ENTER.
Pressing ENTER adds a blank line to the form.
-
Click the text box and press the back arrow to place the cursor at the beginning of the form.
-
On the first line, type Your Name: and then press SHIFT+ENTER.
Holding SHIFT while pressing ENTER creates a line break. Line breaks are useful for spacing lines of text more closely together than standard paragraph spacing.
4. Move the cursor after the text box, and press ENTER.
5. On the next line, type Your E-mail Address: and then press SHIFT+ENTER.
6. On the Insert menu, point to Form, click Text Box once more, and then press ENTER.
7. On the next line, type Your comments: and then press SHIFT+ENTER.
8. On the Insert menu, point to Form, and then click Text Area.
FrontPage inserts a scrolling text input field into the form.
9. Double-click the scrolling text box you just inserted.
FrontPage displays the Scrolling Text Box Properties dialog box. Here, you can change the appearance of the text box.
10. In the TextArea Box Properties dialog box, change the Width in characters to 30 and the Number of lines to 5, and then click OK.
The scrolling text box has increased in size, which will encourage site visitors to write more than just a few lines.
Now that your form and the Products page are finished, it’s a good idea to save your work.
Note You can’t test your form until you publish your Web site. You’ll learn how to publish your Web site in Lesson 2.
11. On the toolbar, click the Save button to save changes to the Products page.
Your page should now look like this:
Good work! The feedback form is finished and so is the Products page. In the next part of the lesson, we’ll add the last two pages — an online photo gallery and a list of links to some sites on the World Wide Web.
Creating a Photo Gallery
The World Wide Web has a graphical interface, so it’s no surprise that many popular Web sites feature photographs and other types of graphics. Scanners and digital cameras have become much more affordable, and many photo-developing services now offer pictures on CD-ROMs so you can share them online.
FrontPage 2002 provides several layouts in which you can arrange your graphics. For this tutorial, we will use the Horizontal layout.
To edit the Photo Gallery page
-
On the Insert menu, click Web Component.
-
In the left pane, click Photo Gallery.
-
In the right pane, select the first layout option (the Horizontal Layout), and then click Finish.
-
The Photo Gallery Properties dialog box automatically opens.
-
Click Add, and then click Pictures from Files.
-
Click Open, and then click OK.
-
On the standard toolbar, click the Save button to save changes to the Photo Gallery page.
-
In the Save Embedded Files dialog box, click OK.
-
Your page should now look like this:
Linking to Other Web Sites
When you create your own Web site, you can create hyperlinks pointing to other Web sites that relate to the subject matter of your own pages. This lets visitors browse to similar sites without having to search for them.
To create hyperlinks from text
1. On the Links page, press the DOWN ARROW key, type MSN Sports and then press ENTER.
2. Click and drag the mouse over the words you just typed to select them.
3. On the Insert menu, click Hyperlink.
FrontPage displays the Insert Hyperlink dialog box. Here, you specify the target of the hyperlink you are creating. This can be a page or a file in your Web site, on your local file system, on a Web server, or on another site on the World Wide Web.
-
In the URL box, type www.msnbc.com/msn/msnsports_front.asp, and then click OK.
Notice that FrontPage automatically adds the HTTP prefix.
Applying a Theme
FrontPage includes more than 50 professionally designed themes with matching color schemes that you can apply to any or all pages in your Web site. A theme consists of design elements for bullets, fonts, pictures, navigation buttons, and other graphics. When applied, a theme gives pages, page banners, navigation bars, and other elements of a Web site an attractive and consistent appearance.
To apply a theme to the Web site
1. Click the Page tab for index.htm.
FrontPage brings the home page back into view.
2. On the Format menu, click Theme.
FrontPage displays the Themes dialog box. Here, you can select from a list of themes that FrontPage installed by default.
3. Click on some of the different theme names in the scrolling list box.
When you click the name of a theme, the Sample of Theme window shows a sample of the graphical elements that are contained in the selected theme. This way, you can first preview a theme before applying it to select or all pages in your Web site.
4. Click Yes to apply the theme.
The theme named Blends is applied to all the pages in your current Web site.
To save the home page, click Save on the File menu, or click the Save button on the toolbar.
Your page should now look like this:
As you can see, applying the theme has dramatically changed the appearance of the home page. The page banner and navigation buttons are no longer plain text; now they’re graphics.
Organizing the Files in your Web site
Now that your Web site contains several pages and files, you will use Folders view to organize them. Similar to Windows Explorer, Folders view lets you manage the files and folders in your Web site. You can safely rearrange the pages and files in your Web site without breaking hyperlinks, page banner titles, or navigation button labels.
In Folders view, FrontPage displays a hierarchical list of the folders in your Web site on the left side of the screen. Clicking on a folder in the Folder List displays its contents on the right side — the Contents pane.
In the following steps, you will move all the picture files in the Stimulate5 Web site to the Images folder FrontPage created as part of the Web site.
To move picture files to the Images folder
1. On the Views bar, click the Folders icon
.
FrontPage switches to Folders view.
-
In the Folder List pane, click the top-level folder labeled <drive>:\My Documents\My Webs\Stimulate5.
This will ensure that the contents pane displays all of the folders and files contained in the root Web site.
When you work with your own Web sites, you can group sound files, movie clips, and other types of files in their own folders. You can create new folders in Folders view as needed and delete the ones you no longer need.
To create a new folder
1. In the Folder List, click the folder in which you want to create a new subfolder.
Folders can be expanded and collapsed in the Folder List to bring their subfolders into view. Click the plus (+) and minus (-) signs next to a folder’s name to display or hide its subfolders.
2. On the File menu, point to New and then click Folder.
FrontPage creates a new folder with a temporary name.
3. When the folder’s temporary name (New_Folder) is selected, type a new name for the folder, then press ENTER.
The new folder is renamed, and you can now drag and drop files into it.
For this tutorial, we don’t need the extra folder you just created, so you will delete it before we get ready to publish the Web site.
4. In the Folder List, right-click the folder you just created.
5. On the shortcut menu, click Delete.
6. In the Confirm Delete dialog box, click Yes.
FrontPage removes the folder from the Web site.
Generating a Site Summary
Reports view is an important tool that shows you the overall health and condition of your Web site before you publish it to the World Wide Web. You can generate custom reports about your Web site in up to 14 categories.
To generate a Site Summary report
-
On the Views bar, click the Reports icon
.
FrontPage switches to Reports view. The default report is the Site Summary. This report shows you the overall statistics of the pages and files in the Stimulate5 Web site. Here are some important ones to look at before you publish your Web site:
-
All files: You currently have 23 files in your Web site, totaling approximately 435 KB. This is the amount of space you’ll need to have available on the Web server that will host your Web site. -
Slow pages: This category shows pages that are slow to download at the targeted download speed. -
Broken hyperlinks: If any broken hyperlinks are reported here, double-click the Broken hyperlinks row to view details about this category. FrontPage lists unverified hyperlinks, such as the external hyperlinks on your Links page, and links that are broken and do not work. -
Functioning hyperlinks: You can verify that a hyperlink still points to an active Web site by right-clicking the link in Reports view and choosing Verify from the shortcut menu. To fix a broken hyperlink, you must open the page it is on and repair the URL the hyperlink points to.
Completing Web Site Tasks
Tasks view displays the list of all outstanding tasks associated with the current Web site. Tasks are items that need your attention before you publish the Web site.
If you are working in a Web development environment or on an intranet, Tasks view makes it easy to track Web site tasks and assign them to other authors who work on the same Web site.
To complete tasks in Tasks view
-
On the Views bar, click the Tasks icon
.
FrontPage displays the Tasks list.
-
Double-click the first task on the list, labeled Fix misspelled words.
FrontPage displays the Task Details dialog box. Here, you can see details about the task youve selected. You can set the priority of the task, assign it to another author on your network, or complete the task and remove it from the list.
-
In the Task Details dialog box, click Start Task.
FrontPage switches to Page view and opens the page containing the misspelled words.
-
In the Spelling dialog box, click Add when FrontPage questions the name Stimulate5.
This adds the word Stimulate5 to the dictionary.
Although it is not required that you complete every task before publishing your Web site, it is a good idea to review this list when you are finished making changes to the Web site. Tasks view helps you manage Web sites by flagging important reminders for you.
Publishing the Stimulate5 Web site
When you publish your Web site on the World Wide Web — or your company intranet — FrontPage automatically verifies your hyperlinks, the addresses of your pages, and the paths to your files.
Note If you do not want to publish the Stimulate5 Web site to your Web server, read this procedure for reference only, without actually completing the steps.
To publish the current Web site
1. Close all open pages in Page view.
2. On the File menu, click Publish Web, or click the Publish Web button
on the toolbar.
FrontPage displays the Publish Web dialog box. Here, you specify the location on the World Wide Web or your corporate intranet to which you want to publish your Web site. Your Internet service provider can tell you this information.
You need Internet access through an Internet service provider before you can publish your Web site to the World Wide Web. If you want to sign on with a Web Presence Provider that can host FrontPage-enabled Web sites, click the Click here to learn more link in the Publish Destination dialog box.
3. In the Publish Web dialog box, enter the URL of your target Web server, (such as http://example.microsoft.com/~myweb), and then click Publish.
FrontPage publishes the current Web site from your computer to the World Wide Web or intranet Web server you specified.