Title Slide

1. CSS 404/504 Internet Concepts Front Page ByRalph Bisland Title Slide

2. Front Page is a PC-based HTML Editor/Web Server. USM does not have the server component installed on orca. This means that you must create your web page file using FrontPage and some how save it on orca. Save it directly into your orca loginID Save it to a disk/diskette then ftp it to orca. Front Page Basics

3. Due to the number of site licenses purchased (25) FrontPage is only installed in JST 205. To start up FrontPage do the following: Start->Programs->MicroSoft FrontPage If done correctly you should see a window with the name “new_page1.htm”. Starting Up Front Page

4. Note that the default settings are as follows: Font: New Times Roman Size: 3 (12 point) Insertion: Normal Any text that you enter will be entered with these default settings. new_page1.htm

5. Note the buttons at the bottom left of the page. Normal: Creates a web page in graphics mode. HTML: Displays the HTML code to display the page currently in the window. Preview: Displays the page as a specified browser would. Make sure that normal is selected. Getting Started

6. Pull down the Format Menu. Select Background. In the Colors section click on Background and then select a color. In the Colors Section click on Text and select a color. Click on the OK button. Setting The Background & Text Colors

7. Enter some text into your window. Mark the text. Pull down the Font Window. Select your Font. Pull down the size window Select the desired size Another way: Pull down the Format Menu. Click on whatever format you wish. Click on OK. Changing The Color & Size of Fonts

8. You may save your webpage file anywhere you wish (diskette, orca, etc.) Pull down the File Menu and select Save. Click on the Change Title button. Enter a title for the page. Click on OK. Click on the Save In Window. Select where you want the page saved. Enter the name of the file (ex index.html) Click on Save. Saving Your Webpage File

9. To format a set of text just like another set of text do the following: Mark the text whose format you wish to copy. Select the Format Painter (the paintbrush) from the Menu toolbar and click on it. The cursor turns into a paintbrush. Mark the text you wish to copy the format to. Copying Formats

10. Start Up Front Page. Pull down the File Menu. Select Open. Select the file you wish to open. Click on Open. You file will be placed into the edit window. Editing Your File

11. Place your cursor where you want the image placed. Pull down the Insert Menu. Select Picture. Select “From File” Select the file you wish to insert into your page then select Insert. To associate alternative text with an image select the image then right click your mouse and fill in the blanks. Images

12. Select the image you wish to move. From the Edit menu, select Cut. Move the cursor to where you want to move the picture. From the Edit Menu, select Paste. Moving An Image

13. Select the image. Pull down the Format menu. Select Position. Select how you want the text positioned. Select OK. Enter the text. Positioning Text Around An Image

14. Position your mouse anywhere inside the image and right click your mouse button. Select Picture Properties. From here you may place borders around an image. You may resize the image – remember to select “Keep Aspect Ratio.” Changing Image Properties

15. This is done to make a background picture. This will only work on .gif files. Select the image. Click on the Set Transparent Color Button on your toolbar. This changes your cursor to a pencil, Move the cursor to a color that you want to be made transparent (white) and click on it. Making Images Transparent

16. When you place an image on your webpage the HTML generated will not include your server URL address. You will have to edit this into your HTML code. Examples: NES.jpg http://orca.st.usm.edu/~bisland/NES.jpg Note that the public_html subdirectory is not listed in the URL. Making Images Work On Your Webpage

17. Enter the hyperlink text. Select the text. Pull Down the Insert Menu. Select Hyper Link. Do either of the following: Find the name of the file you want to hyperlink to and select it. If you are hyperlinking to another web site, type the URL into the box. Click on OK Press cntl+click to hyperlink. HyperText Links

18. Select the picture. Pull Down the Insert Menu. Select Hyper Link. Do either of the following: Find the name of the file you want to hyperlink toand .select it. If you are hyperlinking to another web site, type the URL into the box. Click on OK Press cntl+click to hyperlink. HyperMedia links

19. Enter your hypertext text. Select the text. Pull down the Insert Menu. Select the E-mail Address button. Enter the E-mail address in the proper box. Click OK. Remember you must run this on a server for it to work. E-mail HyperLinks

20. Place your cursor where you wish the list to begin. Go to the window that has Normal displayed in it. Pull down the list and select the type list you wish to build. Begin entering items into the list. Press the return key to produce the next list item. Lists

21. The list will automatically place the next list symbol (bullet/number etc.) on the next line. When you are finished, delete the last bullet/number, etc. in the list. To change the properties of the list, right click on the list and select List Properties, then select whatever property you wish. Lists (ctd)

22. To add an item to the list, place your cursor at the end of a list item and press the return key. To delete a list item, mark the text and delete it. Next delete the list symbol. This will take two deletes. Lists (ctd)

23. Place your cursor on the page where you want to insert the table. Pull down the Table Menu. Select Insert. Select Table. Fill in the form on the number of rows, columns, spacing, etc. Click OK. This draws a table for you. Tables

24. Place your cursor somewhere inside the table and right click your mouse. Click on whatever you wish to do (insert a row or column, etc.,) Follow the instructions. Adjusting The Column Properties

25. After you right click on the table, click on Table Properties. Use this menu to select colors, borders, etc. Click on Cell Properties to adjust values for cells. Table And Cell Properties

26. To create a frames page click on the Task menu item (on the left side of the screen). Click on Page Templates (on the right side of the screen). (Extend the viw menu) Click on Frames Pages (on the top of the screen). You should see a window with several frame formats. Select one and see if it is the format that you wish. (Suggestion: Banner and Contents) Frames

27. Double click on the Banner and Contents icon. You should see another page with two vertical and one horizontal frames. You may drag and drop the frame borders to resize them. To select a frame, move the cursor into the frame and click your mouse. Banner And Contents Frame

28. You will see two buttons in each frame. Set Initial Page: What to put in the frame Set New Page: Create a new page in the frame At the bottom of the page are additional buttons to manipulate the frame. To save the frame page, select Save from the File menu. Banner And Content Frame (ctd)

29. You may use currently existing pages to fill in frames. To import pages forn inclusion in a frame, go to the File Menu and select Import. Click on Add File to create an import list. Select a location where you wish to import from. Importing Files For A Frame

30. To mark a file for importation, hold down the CNTL key and click on the file you wish to include in your import list. Click the Open button. This selects the files that you marked. Click the OK button. Importing Files For A Frame (ctd)

31. Click on the Set Initial page button in one of the frames. This selects the fromes and opens the HyperLink dialog box. You are actually creating a hyper link to the page you wish to insert into the frame. Double click on the file you wish to insert into the frame. The file tags are rendered into the frame. Setting Initial Pages For Frames

32. Obviously you can open the frame HTML file, edit it, then save it. Another method is to click on the frame to select it. Move the cursor to the bottom border of the frame until the up and down arrow shows. Hold down the mouse button and drag the border down to expand the window. A vertical scroll bar show appear in the window. Editing Frame Pages

33. Do the same thing with the right frame border. Make whatever changes you wish in the to the frame window. When fishished click on Save in the File menu. Editing Frame Page (ctd)

34. Click on Set New Page in the frame where you wish to insert the picture. Click on Insert. Click on Picture. Select the picture that you wish to insert into the frame. Click on OK. To Embed A Picture In A Frame