Contents:
URL stands for Uniform Resource Locator, is the address of a particular site. They contain a web server or network location (Protocol), address, path, and a file name. Example…
http://www.teachers.northallegheny.org
Protocol is the type or method of connection.
For example…http, https, ftp, smtp, telnet, etc... Different protocols are used for different purposes.
Address is the destination computer/server you are connecting with.
· This can be any name that translates to an ip address.
· It is not case sensitive.
· Does not have to start with www.
Path is the file and its corresponding directory you are requesting to be transferred/played from the server
· This is totally dependent on the web site structure built by the designer of a web site
· This may or may not be case sensitive depending on the type of server
· Most servers will send you a document if you only type the address and directory…. this is also a design issue…
HTML stands for HyperText Markup Language, the standard for describing the contents and appearance of pages on the World Wide Web. HTML consists of pairs of opening and closing tags, with attributes and values in between. The tags describe each element on a Web page, such as a paragraph of text, a table, or an image.
For example, the HTML code <H1 align="left">Welcome!</H1> describes a left-aligned paragraph on the page containing the text "Welcome!", formatted using the Heading 1 style. The </H1> tag indicates the end of the paragraph.
NAVIGATION view displays your current web structure, which at a minimum includes your home page. In Navigation view, do one or more of the following:
To add an existing page to the current navigation structure, click the page in the Folder List, and drag it to the position in the structure where you want it.
To move a page in the navigation structure, click the page, and then drag it to another location, such as under or next to another page.
To give a page a meaningful title, right-click the page, click Rename on the shortcut menu, and then edit the name.
To add a new page under an existing page, right-click the existing page, and then click New Page on the shortcut menu. For example, you can add a page under your home page.
To add an external page (a page that is not in your web), right-click the page under which you want to add the external hyperlink, and then specify the destination in the URL box.
HYPERLINK (pg 7) is a connection from one page to another destination such as another page or a different location on the same page. The destination is frequently another Web page, but it can also be a picture, an e-mail address, a file (such as a multimedia file or Microsoft Office document), or a program. A hyperlink can be text or a picture.
When a site visitor clicks the hyperlink, the destination is displayed in a Web browser, opened, or run, depending on the type of destination. For example, a visitor will click on a link called home to go back to the first page of that particular site, or an arrow ▲ to go to the top of the page. There are a few different types of links that can be added: within a page, outside of a page, and email just to name a few.
Bookmark (pg 6) is a location or selected text on a page that you have marked. You can use bookmarks as a destination for a hyperlink. For example, if you want to display a certain section of a page to the site visitor, add a hyperlink with the bookmark as its destination. When the site visitor clicks the hyperlink, the relevant part of the page is displayed, rather than the top of the page.
You can also use one or more bookmarks to find locations on a page. For example, add a bookmark to each main heading on a page. When you are editing the page, you can quickly find each section by going to the corresponding bookmark.
HotSpot (pg 9) is an invisible region on a graphic to which you have assigned a hyperlink. When a site visitor clicks the region, the destination of the hyperlink is displayed in the Web browser. In Microsoft FrontPage, hotspots can be shaped as rectangles, circles, or polygons.
Instructions for creating a web page using the above:
Opening a WebPage:
Type teachers.northallegheny.org in the address bar. Click on the down arrow key and find your login name and click on GO.
1. Click on Edit with FrontPage to create.
Inserting Book Marks:
In Page view, position the insertion point where you want to create a bookmark, or select the text to which you want to assign the bookmark.
On the Insert menu, click Bookmark.
In the Bookmark name box, type the name of the bookmark (spaces are allowed.)
Inserting Hyperlinks:
In Page view, type the text you want to use as a hyperlink and then select it. For example, type and select "Top of Page" to link to the top of the page.
Or, if you want to use the title of the destination page (for example, Education) or location of the file (http://robert-morris.edu) as the hyperlink text, position the insertion point where you want to insert the hyperlink.
Click on Insert, Hyperlink.
Navigate in the webpage in which the file is located, and then select the page or file.
A different Page:
In Page view, type the text you want to use as a hyperlink and then select it. For example, type and select "My Education" to link to a page that will describe your Schooling.
Click Hyperlink 
.
Click New Page .
Click the template you want to use to create the new page.
Do one of the following:
To edit the new page now, click OK.
FrontPage creates the hyperlink and displays the new page for you to edit. The new hyperlink you created will not work until you save the new page.
To create a task to remind you to finish the page later, click Just add web task, and then click OK.
You are prompted to save the new page, and the default page title and file name are displayed.
If you want to change the page title, click Change, type the new page title, and then click OK.
If you want to change the file name, type over the default file name in the File name box.
Click Save. You can complete the task of editing this page at any time in Tasks view
To send an email:
Select either text or a picture.
If you do not select text or a picture, the destination e-mail address and subject are displayed as the hyperlink text.
Click Insert Hyperlink 
.
Under Link to, click E-mail Address.
Either type the e-mail address you want in the E-mail address box, or select an e-mail address in the Recently used e-mail addresses box.
In the Subject box, type the subject of the e-mail message.
Note Some Web browsers and e-mail programs may not recognize the subject line.
Inserting Documents
Inserting a document from another application (Excel, Word, PowerPoint etc…)
1. When you have completed the document, click file, save as a web page.
2. The application will automatically default to the Docs folder, simply click on the down arrow key and select your first initial and last name on NAFILE4.
3. Click on the Nethood folder.
4. Select the name of your web site (teachers.northallegheny.org/jsmith).
This will create the actual page on the web.
Inserting Thumbnails:
In Page view, click the graphic.
2.
On the Pictures toolbar,
click Auto Thumbnail .
Microsoft FrontPage creates a thumbnail graphic and a hyperlink to the original full-size graphic.
Notes
Auto Thumbnail will be unavailable if the graphic you selected is already smaller than a thumbnail, if the graphic has hyperlink or hot spots set for it, or if the graphic is an animation.
To display the Pictures toolbar, point to Toolbars on the View menu, and then click Pictures.
Inserting HotSpots:
Click the graphic.
On the Pictures toolbar, click the Hotspot button corresponding to the shape you want:
Note To display the Pictures toolbar, point to Toolbars on the View menu, and then click Pictures.
Rectangular Hotspot Circular
Hotspot Polygon
Hotspot
On the graphic, draw a rectangle, circle, or polygon, depending on the shape you chose while holding down the mouse button. When you release the mouse button, the Insert Hyperlink dialog box opens.
Note To draw a polygon, click where you want the first corner of the polygon to be, click to place each corner of the polygon, and then double-click to finish it.
When you release the mouse button, the Create Hyperlink dialog box opens. Specify the destination for the hotspot:
1. If the destination is in a web, browse to the web and folder that contains the page, select it, and then click OK.
2. If the destination is on your local network, click File, browse to the page you want from your local network, and then click OK.
3.
If the destination is on the
World Wide Web, click World Wide Web .
In your Web browser, browse to the page that you want, and then press ALT+TAB to
switch back to Microsoft FrontPage. The location of the page you visited will be
displayed in the URL box. Click OK.
4. If you want to create an e-mail message when a site visitor clicks the graphic, click E-Mail. Type the e-mail address to which you want the message sent, and then click OK.
Comments:
Revs. 10/31/01 Save a doc as a web page. Nethood
12/18/01 Added Instructor page.
Course Objectives:
Forms – Create surveys, questionnaires for collecting data, or templates to unify a website. Collect data in the following:
Database – Save results to a database so you can manipulate data.
Email – Outlook will email you results based on the form answers.
Tables – Create a screen to help place text, pictures, and borders. Edit cellsby:
Merge – combine two or more cells.
Split – Divide cells to make smaller.
Interactive Fields – User select options by clicking on an object which has a
value, numeric or text.
Themes – Background of a page or site.
Dynamic HTML – Text will change form when activated.
To create a website live, please open Internet Explorer and type “teachers.northallegheny.org” in the URL to find your folder on the network. Once the site is downloaded, you will notice a drop down window, type the first letter of your first name and scroll down until you see your logon id and click “Go”.
Once the page is loaded, click on the Edit icon on the top tool bar, this will open FrontPage for you to create and edit pages. If you receive a login dialog box, type “na\username” and your network password to login. Example na\jsmith.
Click on File, New Page (if this is your first page, you will need to save it as “default.htm”) to create additional pages for your site. Immediately save the page after opening,
Creating Forms
1. On the toolbar, click on Insert and select Form.
2. You will notice a checkered box with 2 push down buttons, Submit and Reset.
3. Hit enter on your keyboard several times to enlarge the form based on your needs. You can shrink the form by moving the cursor up to where you want it to end and hit the delete button on your keyboard.
You will have numerous key options enhancing the visibility of your web page. The sounds and background when can add will provide a sense of entertainment can be found:
1. Right click on a blank space in your form.
2. Click on Page Properties.
Notice the General and Background tabs.
3. General Tab will permit you to add sound from files, MS Clip Art or CD etc…
Will also let you determine the length of sound or song.
4. Background tab consists of pictures to add in a table or a form based on the origin.
These fields will allow users to choose selections, add feedback information, and request information from your site. The following are the most popular: One Line Text, Scrolling Text, Check Box, Radio Button, Drop Down Menu, Push Button.
1. To Insert, click on Insert, Forms, and choose the one that fits your web page.
2. To name and add a value to your field, double click on the icon of the interactive field.
The results created by your form may be gathered several ways. This valuable information accrued by the form can help you analyze your strategy by your questions. FrontPage can notify you of results by email, or create a database in Access with all of the headings based on your answers.
You can send form results (data that a site visitor enters in your form) in an e-mail message. Each time a site visitor submits a form, a message containing the results of the form is sent to the e-mail address you specify. You can also configure other options for the messages, such as the text for the Subject line and the address for the From (Reply To) line.
Note In order to use this feature, the Microsoft FrontPage Server Extensions must be installed on your Web server and they must be correctly configured for e-mail. If you experience any problems using this feature or receive any error messages, contact your server or ISP administrator about correcting the configuration.
1. In Page view, right-click the form, and then click Form Properties on the shortcut menu.
2. Click Send to.
3. In the E-mail address box, type the e-mail address to which you want to send the form results.
Note If you do not want results saved to a file in addition to being sent in e-mail, clear the File name box.
4. Click Options, and then click the E-mail Results tab.
You can set properties for the results e-mail as needed, such as the format of the text and whether to include form field names in the results.
5. In the Subject line box, type the text that you want in the subject line of the e-mail. If you leave this box blank, the default subject line in the e-mail will be "Form Results."
If you want the subject line of the e-mail to contain the results of one field from your form, select Form field name, and then type the name of the field in the Subject line box.
6. In the Reply-to line box, if you want a specific e-mail address to appear as the sender of the e-mail (the From or Reply To line in the e-mail), type the address.
However, if your form contains a field that collects the site visitor's e-mail address, you can use that address as the sender's address. Select Form field name, and then in the Reply-to line box, type the name of the form field.
You can save form results (data that a site visitor enters in your form) to a database. When a site visitor fills out a form and submits it, Microsoft FrontPage enters the data directly into the database.
If you don't have a database available in which to store form results, FrontPage will create a new Microsoft Access database for you. FrontPage creates a table using the fields that you have already placed on your form as the columns.
1. In Page view, right-click the form, and then click Form Properties on the shortcut menu.
2. Click Send to database.
3. Click Options.
4. On the Database Results tab, click Create Database.
After the database has been created, a confirmation message is displayed, telling you the name of the database and its location in your web. For example, /fpdb/Form.mdb means the database is named Form, and is located in the /fpdb folder in the current web. By default, FrontPage creates the fpdb folder in which to place the database.
5. Click OK.
FrontPage automatically selects the new database as the database connection to use, and selects the table in which to store the form results.
6. Click OK, and then click OK again.
If the extension of the current page is .htm, FrontPage prompts you to rename the file with the .asp extension in order for the file to work correctly.
Dynamic HTML
To expand characters, phrases so a user will not miss an important opportunity to register, read, or express important feed back can be created using Dynamic HTML effects.
1. Highlight all of the characters that makeup your phrase.
2. Click on Format on your toolbar, select Dynamic HTML effects.
3. On the Effects toolbar, choose your Event, Formatting, and Settings.
You must be in the Preview page to see your text change.
Creating new tables You can quickly create a simple table by using the Insert Table command, or you can use the Draw Table tool to quickly create a more complex table — for example, one that contains cells of different heights or a varying number of columns per row. Using Draw Table is similar to drawing a rectangle on graph paper — first, draw a line from one corner of the table to the corner diagonally opposite in order to define the boundary of the entire table, and then draw the column and row lines inside.
Creating tables inside other tables You can also use Draw Table to create tables inside other tables, or nested tables. Nested tables are particularly useful when you use a table to lay out a page and then want to use a table to present information — for example, if you use a table to lay out the Web page for your company's sales department, you might want to insert in the layout a nested table illustrating the department's quarterly earnings.
1. Right click on a blank space in your Table.
2. Click on Table Properties.
3. Notice the Alignment, Borders and Background options.
This will give you options to standardize or customize your appearance of your tables.
1. Highlight cells by selecting and dragging your mouse to merge two or more cells. The merging cells can be reset to columns and or rows.
2. Right Click and choose Merge cells. This will give you one large cell.
1. Selecting two or more cells by dragging your mouse over the desired columns or rows will give you the option to add or delete the actual number of cells.
2. Right click on the shaded area, Click on Split Cells
3. Choose the number of rows and columns.
To create a new theme, you must change an existing one and then save your changes under a new name. You can change colors, graphics, and styles:
· Change the normal and vivid color sets for hyperlinks, body and heading text, banner text, navigation bar labels, table borders, and the background. For example, you can change the color of hyperlinks from red to yellow.
· Replace graphics (background picture, page banner, bullets, navigation buttons, and horizontal line) with your own graphics, for the normal and active graphic sets. And for those graphical elements that are displayed with text, you can change the font.
· Change the body and heading styles, for example from Arial to Times New Roman.
1. On the Format menu, click Theme.
2. In the list, click any theme, preferably the one that has the characteristics closest to the theme you want to create so that you have fewer elements to change.
3. Click Modify.
4. Do any of the following to modify the theme:
o To change the colors, click Colors, and then click the Custom tab.
Under Theme color set, specify whether you want to change colors for the normal or vivid color set. In the Item box, click the item for which you want to change the color, and then in the Color box, specify the color you want to use. Repeat this step for each item, and then click OK.
o To change the graphics, click Graphics.
Under Theme graphic set, specify whether you want to change graphics for the normal or active graphic set. On the Picture tab in the Item box, click the graphical element you want to change, and then specify the picture or pictures you want to use — depending on the element you selected, one or more options are displayed. To find the graphic in the current web or file system, click Browse. If the graphical element you selected displays text, the options on the Font tab will be available, and you can change the font. Repeat this step for each graphical element, and then click OK.
o To change the styles, click Text.
In the Item box, click the style you want to change, and then under Font, click a font to use. Repeat this step for each style, and then click OK.
5. To save the theme, click Save As, type a name for the new theme, and then click OK.
Comments:
Course Objectives:
Shared Borders
Navigation Bar
Hover Button
A frames page is a special kind of HTML page that divides the browser window into different areas called frames, each of which can display a different page. For example, a frames page created by using the Banner and Contents frames page template contains three frames: Banner, Contents, and Main.
A frames page itself contains no visible content: It's just a container that specifies which other pages to display and how to display them. When you click a hyperlink on a page displayed in one frame, the page pointed to by that hyperlink typically is displayed in another frame, called the target frame. For example, a frames page created by using the Banner and Contents frames page template actually displays four pages simultaneously in the browser: the frames page and the pages displayed in each of the three frames. When you click a hyperlink in the Contents frame on the left, the page pointed to by that hyperlink opens in the Main frame.
You create a frames page using one of the frames page templates in Microsoft FrontPage. In each of these templates, the navigation between frames is already set up for you. In the Banner and Contents frames page template, for example, clicking a hyperlink in the Contents frame on the left displays a page in the Main frame on the right.
After you've created the frames page from a template, all you need to do is set the initial page you want displayed in each frame. You can select an existing page or create a new page. Then you can edit the page directly in its frame. A highlighted border indicates which frame is selected, or whether the frames page itself is selected.
On the Task Pane menu, click Blank Page.
Do one of the following:
3. On the General tab, click Normal Page to open a blank Web page.
4. On the Frames Page tab, click the template that you want to base your Web page on.
Select the frame.
On the Frames menu, click Frame.
Click Remove Frame.
The contents of the frame move to the left side of the page.
If you want to delete both a frame and its contents, select the frame by clicking its border, and then press DELETE
Right-click in the frame you want to save as a Web page.
Select Open Page in New Window.
If you want to save the Web page in a different folder, locate and open the folder.
In the File name box, type a name for the Web page.
Click Save.
Click in the frame you want to change.
On the Format menu, point to Frames, click Frame Properties, and then click the Borders tab.
In the Show scroll bars in browser list, click the option you want.
Assign a unique name to each frame if you want to control the frame a Web page will appear in when you click a hyperlink.
Click in the frame you want to name.
On the Frames menu, point to Frames, click Frame Properties, and then click the Frame tab.
In the Name box, type a name.
If you decide to name your frame, keep in mind that frame names are case-sensitive and can use both letters and numbers. Each frame in the frames page must have a unique name. Word will provide a default name — such as file1, file2, and so on — for frames that are not named.
A shared border is a region that is common to one or more pages in a web. A shared border may be a region at the top of the page (similar to a page header), at the bottom (similar to a page footer), at the left, or at the right. Use shared borders to place the same content on multiple pages in one step, rather than editing each page. For example, to quickly place a logo at the top of each page in your web, set the top border to be shared, then add the graphic to the top border.
An advantage to using shared borders is that you only have to modify content in one place to update all pages. For example, to change the copyright notice on a Web site of 30 pages, you only need to update it on one page if the notice is inside a shared border.
A shared border is a region that is common to one or more pages in a web. Inside a shared border, include items that you want to appear on each page. For each page in your web, you can set the borders to share. For example, if the top border is shared by default for a web but you don't want this shared border on a specific page, you can turn off the shared top border on that page. Or, you can set selected pages in a web to use a shared border, even if the web does not have any shared borders by default. For example, the default setting for the web is to have top and bottom shared borders. You insert a navigation bar in the top border, and a copyright citation in the bottom border. However, on three pages you do not want to display the copyright citation, so for these three pages, disable the bottom border. You can set the shared borders that a web uses by default, and set shared borders on individual pages. For example, the default setting for a web might be to share top and left borders; each new page would then have these shared borders. However, you could turn off a shared border on certain pages if you didn't want it.
In order to use shared borders, you must have a web site open.
In Page view, on the Format menu, click Shared Borders.
Click Current page.
Specify the borders that you want on this page.
Shared borders are added or removed depending on your settings. New borders display placeholder elements, such as a comment, page banner, or navigation bar.
Open a page that uses the shared border you want to modify.
In Page view, click inside the shared border region, which is outlined with a dashed line.
When you click the area, the outline changes to a solid line.
Make your changes to the content inside the shared border region. For example, type or delete text, or add a picture.
Click Save, your changes will appear on all pages that share the border.
You can create a navigation structure for the current web by organizing pages in Navigation view. This navigation structure shows how pages in your web are related to each other, and provides FrontPage with a way to set up navigation bars. For example, the navigation structure tells FrontPage which pages are the top-level pages; FrontPage uses this information to determine which hyperlinks to put on a navigation bar, and the page titles determine the labels for the hyperlinks.
Add an existing page to the current navigation structure
Click the page in the Folder List, and drag it to the position in the structure where you want it.
If the Folder List is not showing, on the View menu, click Folder List.
Move a page within the navigation structure
Click the page, and then drag it to another location, such as under or next to another page.
Add a title to a page
Right-click the page, click Rename on the shortcut menu, and then edit the name.
Delete a page from the navigation structure
Click the page, and then press DELETE.
This does not delete your page from your web site.
You can print the navigation structure of the current web as it is displayed in Navigation view.
In Navigation view, click Print on the File menu. Specify printing options, such as the printer name and number of copies you want.
To see how the navigation structure will appear when printed, click Print Preview on the File menu.
Hit Counters
A hit counter tallies and displays the number of times a page has been visited. For example, add a hit counter to your home page so that you and site visitors can see how many times your web site has been visited.
1. Click on the page where you want the counter to be.
2. Click on Insert on your toolbar and select Component.
3. Choose Hit counter, click on the type of counter.
Reset a hit counter
1. In Page-view, double click hit-counter.
2. Select the reset counter to box and type what ever number you want to begin on.
Creating a hover button is an easy way to add animation to your web without any scripting. Like any other button, a hover button contains a hyperlink to another page or file. However, when a site visitor clicks or points to a hover button, the button can also glow, display a custom picture, or play a sound effect.
In Page view, position the insertion point where you want to create a hover button.
On the Insert menu, point to Component, and then click Hover Button.
In the Button text box, type the text label for the hover button. Leave this box blank if you want to use a custom picture that already contains a text label.
In the Link to box, type the URL of the page or file you want to display when the hover button is clicked. Or, click Browse to locate the page or file.
Properties
You can set properties for a hover button to adjust the text label, font size and characters, or type of special effects.
In Page view, right-click the hover button you want to modify, and then click Hover Button Properties on the shortcut menu.
Use this procedure to add a sound effect to a hover button that you've already created. When a site visitor browsing your page clicks or points to the hover button, the sound effect is played.
In Page view, right-click the hover button you want to modify, and then click Hover Button Properties on the shortcut menu.
Click Custom.
In the Play sound area, select the action and the sound effect:
To play the sound effect when a site visitor clicks the hover button, type the URL of the sound effect in the On click box. Or, click Browse to locate the sound effect.
To play the sound effect when a site visitor points to the hover button, type the URL of the sound effect in the On hover box. Or, click Browse to locate the sound effect.
Because hover buttons are actually Java applets, you can only use .au format sound files for sound effects; you cannot use .midi or .wav files. Furthermore, the .au files must be in 8-bit, 8000 Hz, mono, u-law format.
To preview the hover button, as it will appear when a site visitor browses to the page on the World Wide Web, click the Preview tab, or click Preview in Browser on the File menu.
Page Transition
You can create special effects that are displayed when a site visitor enters or leaves your site, or browses to or from a specific page. For example, this page uses a "vertical blinds" effect that lasts 5 seconds when a visitor browses to it the first time. By applying transition effects consistently and judiciously throughout your web, you can create slide-show-style presentations with professional-looking transitions between pages.
In Page view, open the page for which you want to display the transition effect. On the Format menu, click Page Transition.
In the Event box, click the event that will trigger the transition effect. For example, click Page enter to display the transition effect when a site visitor browses to the page for the first time.
In the Transition effect box, click the type of transition effect to use when the page is displayed or exited.
In the Duration box, type the amount of time that you want the transition effect to last.
To animate a specific page element when a page is loaded, select the page element, and then click Dynamic HTML Effects on the Format menu. On the DHTML Effects toolbar, click Page load in the On box, and then select the animation effect and settings in the other boxes.
Comments: