DESIGN A WEB SITE USING PUBLISHER Before you begin, plan your Web site

Transcription

1 Page 1 of 22 DESIGN A WEB SITE USING PUBLISHER Before you begin, plan your Web site Before you create your Web site, ask yourself these questions: What do I want the site to do? Whom do I want to visit my site, and how do I keep them coming back? What look and tone exciting, humorous, and serious will help convey my message to my audience? Once you ve answered these questions and defined your goals, the next step is to structure your setup on paper. The Home page organizes the entire Web Site. All of the following pages must be consistent as far as icons, banners and layout. It's critical to target information to your particular audience. Publish content that they find important. Whomever your audience, ask yourself what essential information do they need to know, and then give it to them. Effective ways to use the Web site that you create Post a calendar of events for group members Offer information to parents and students Publish tutorials to assist with classroom instruction Use the site as a launch pad to research information Publish classroom assignments on the Internet

2 Page 2 of 22 Design a Web site using Microsoft Publisher Starting Microsoft Publisher 1. Make sure your computer is on and the Windows desktop is visible. 2. Click the Start button on the taskbar, and then point to Programs. 3. Click Microsoft Publisher on the Programs menu. Create a Web site Office 2000 Publication by Wizard Scroll Bar If using Office XP go to page _8_ Create a Web site by using the Web site Wizard 1. Publisher opens to the Microsoft Publisher Catalog. 2. Click the Publications by Wizard tab. 3. In the Wizards pane, click Web sites. In the Web site pane explore and review all of the Web Site selections. Use the right scroll bar to see all. 4. Click the template (School Web Site) Look at all the Web Sites. Start Wizard 5. Click Start Wizard Button If this is your first time use of Publisher you will enter the information into the Personal Information page. The wizard will fill in your name, address, and other information for you once you click the Update Button. If you have already entered personal information skip to next page. *** Personal Information Screen*** This screen will only appear for the first time use of Publisher. 6. Click the OK button. 7. Enter your School information. School information 8. Click the Update button. ****************************************** DO NOT PUT PERSONAL HOME ADDRESS OR HOME PHONE NUMBER ON WEB SITE. ****************************************** Update button

3 Page 3 of 22 When using The Web Site Wizard you can click the back and next buttons to customize the layout of your Web site. 1. If the personal information has been entered prior to this session you should then read the introduction in the wizard pane, then click the Next button to begin. 2. View the different color schemes available. 3. Choose the color Scheme Reef. Click Next button. ADDING ADDITIONAL PAGES 4. Select any or all of the pages you would like to include in your Web site. (Note: If you remove the page, the wizard will automatically remove the link associated with that page. A message will appear This publication contains hyperlinks to the current page. These hyperlinks will be removed when you delete this page. If you select delete, you will get the message Delete Anyway? Click Yes.) The Wizard has automatically set up hyperlinks to the pages you selected. Simply fill the pages with your own content and your site is ready to post to the World Wide Web.

4 Page 4 of 22 Home Page- Your home page gives your readers their first impressions of your site's purpose, content, and layout. This is a good place for text that orients readers to your organization and shows them how to navigate around your site. Story - Developing a successful Web site requires thinking strategically about a few key issues. Determine the purpose and the target audience of the site. Catch your readers attention. Select material that is relevant to your readers. Organize your content to separate items that change infrequently from items that require frequent updating. Organizing information allows for easy updates. Calendar- You may describe an upcoming event in detail. Remember to include the time and location or provide the necessary information. Events- Enter the text here to briefly describe your event. In addition to noting the dates, times, location, fees, and speakers or sponsors for your event, you can indicate whether registration is required. Special Offers and Price list- Not addressed at this time Related Links - Hyperlinks are electronic connections to sites within your Web site or elsewhere on the Internet. If you choose to create links to external Web sites, explain how each site relates to your message. Be sure to insert a hyperlink and type the hyperlink address (URL) for each site. Using graphics and photos can add vitality to your site. Keep in mind they require significantly more memory than text, which means they will take longer to download. After you have finished creating your site, run the Design Checker to make sure the site downloads quickly and to catch problems with page design. 5. As you add the additional pages Story, Calendar, Event, and Related links, the wizard will change your publication and synchronize the navigation bar for each page. 6. Add the following pages by clicking the box to select. Select Story Calendar Event Related Links 7. Click the Next button.

5 Page 5 of A form can be added to your website. You may choose order form, response form sign-up form or none. ****Forms may be added at a later time**** 9. Select None. Click Next button. 10. A navigation bar is used to link the pages of your web site. You may choose horizontal and vertical, just a vertical bar, or none. 11. Select Both a vertical and horizontal bar. Click Next button. 12. Background sounds may be added to your web site. ***Sounds may be added at a later time. *** Select No. Click Next button.

6 Page 6 of 22 You may apply a texture to the pages of your Web site. Select Yes. Click Next button. (Make corrections at this time if needed.) *****REMINDER***** DO NOT PUT PERSONAL HOME ADDRESS OR HOME PHONE NUMBER ON WEB SITE! Include only SCHOOL Information Add or change any information at this time. 13. Click on the button in the Personal Information pane that you would like to use in this publication. 14. Select the Primary Business button. 15. Click the Update button to record changes. 16. Click the Finish button. You are now ready to customize each page of your layout with your information. Begin by enlarging your work area. Click the arrow next to the Zoom box Click the zoom setting you want. Set the zoom to 75% Zoom box

7 Page 7 of 22 Now that the basic web layout is complete, save your publisher file. Click on the save icon in the toolbar. Save the file within My Documents with a name that you will easily remember. For example, if the Web page is going to be for your classroom, call the file myclass or a name that you will remember. Publisher will automatically add the.pub extension to the file. Publisher has a save feature that will display as you work, reminding you that it is time to save your work. It is best however to make it a habit and save every time you add something new. You are now ready to begin entering information to personalize your Web site. Review the examples from each page and insert the information that you want your readers to see. If working with Office 2000 Skip to Page 13

8 Page 8 of 22 Making a Web Page using OFFICE XP Follow the on-screen instructions. Personal Information (Primary Business, Secondary Business, etc ) Color Scheme Additional Pages Forms Navigation Bar Layout Background Sound Background Textures Personal Information Choice Office XP 1. On the File menu, click New. 2. In the task pane under Start from a design select By Publication Type 3. Select Web Sites Explore and review all of the Web Sites selections. Use the right scroll bar to see all. 4. Select the template (School web site). The wizard will automatically begin. Scroll Bar By Publication Type Web sites Look at all the Web Sites.

9 Page 9 of Enlarge your work area to 75%. See page 6 of handout for directions. 6. Click on Color Schemes 7. View the different color schemes available. 8. Choose the color Scheme Reef 9. View the different font schemes available. 10. Choose the Wizard: Web site wizard font scheme

10 Page 10 of Click Web Site Options 12. Select Multiple Navigation bar. 13. Select None in the forms selection. 14. You are now ready to insert a new page. Click on the Insert Page link.

11 Page 11 of Select the page type you need. 16. As you add the additional pages Story, Calendar, Event, and Related links, the wizard will change your publication and synchronize the navigation bar for each page. 17. Add the following pages by selecting Story click OK. Repeat the steps to insert a page and add Calendar Event Related Links *****Description of each page design located on Page 4 in the handout.***** You can click More Options and select Number of new pages, Options, and adding hyperlinks to the Web navigation bar. 17. Click on the Background fill and sound link. Do nothing at this time. ***Background textures and sounds may be added at a later time. ***

12 Page 12 of From the Menu bar select Edit, Personal Information. The Personal information box appears. (Make corrections at this time if needed.) *****REMINDER***** DO NOT PUT PERSONAL HOME ADDRESS OR HOME PHONE NUMBER ON WEB SITE! Include only SCHOOL Information 19. Select the Primary Business button. Enter any information that you would like to use in this publication. 20. Click the Update button to record changes. Save Your File Click on the save icon in the toolbar. Save the file within My Documents with a name that you will easily remember. For example, if the Web page is going to be for your classroom, call the file myclass or a name that you will remember. Publisher will automatically add the.pub extension to the file. You are now ready to begin entering information to personalize your Web site. Publisher has a save feature that will display as you work, reminding you that it is time to save your work. It is best however to make it a habit and save every time you add something new. Review the examples from each page of your website and insert the information that you want your readers to see. Editing Text

13 Page 13 of 22 Editing text in publisher is exactly like editing text in Microsoft Word. You will need to replace wizard text. To edit the text in a frame, simply select the text and type the information you wish to include. 1. Highlight Home Page Title and type in your new title. Example My Web site 2. Once you have a new Title, position the mouse pointer in another text box before the first character of the text you want to change, highlight and click. All text will be selected when you click in the original template. 3. Hold down the mouse button and drag the mouse over the text you want to highlight. 4. Release the mouse button. 5. Right click on the selected text and select cut, or once all text is selected you may begin typing in your personal Web Page information. A pop down window appears and allows you numerous text modification choices, change text which includes font, spacing, and alignment. You may also utilize the formatting toolbar when editing text. ***Any text or graphics that you do not need on the page can be deleted at this time.*** ****See directions for deleting Text only or Text/Frame Box. Page 14***** The tab key cannot be used in publisher to tab over. A tab will add only a space. To add text in columns you must insert a table. *****See directions for inserting a Table into Your Publication Page 15***** Modifying Frame Size and Location Resizing frames 1. Click the object to select it. Selection handles appear around the object. 2. Position the mouse pointer over one of the handles (there are 8 frame control handles) until you see the resizer. 3. Hold down the mouse button and drag the handle to resize the object. Your text frame is now resized. Moving frame location 1. Click the object to select it. Selection handles appear around the object. 2. Position the mouse pointer over the object until the pointer changes to the Mover. 3. When the cursor turns into the move handle, left click, hold down the mouse button and drag the frame to the new location. Inserting a Graphic If you decide to insert a new graphic into your publication, make sure you are not currently inside a text or graphic frame. 1. Select the INSERT Menu Item. 2. Choose PICTURE. 3. Select either clip art or from file. 4. Locate the graphic you wish to insert and then click INSERT. The graphic is now placed on the current page of your Web site. You may have to resize or move the graphic on the page (follow the above directions Moving Frame Location ). *****Do not overlap the new graphic with another frame. *****

14 Page 14 of 22 If your object is too close to another object on the page, or the text box you will see a RED border appear when items touch. Move object until border does not appear. ***************USING OFFICE XP*************** ***Overlapping is NOT an issue in OFFICE XP**** *****If an object (graphics, or another text box) is placed in a text box, word wrapping occurs***** ************************ You may also use the PICTURE FRAME TOOL located on the toolbar at the left side of the publisher window. This tool allows you to create a picture frame and then insert a picture into the frame. This method assures the size and location of the graphic before it is inserted. PICTURE FRAME TOOL 1. On the Objects toolbar, click Picture Frame. 2. Position the mouse pointer where you want one corner of the text frame to appear, click and hold down the mouse button, and then drag the mouse diagonally until you have the size frame you want 3. Click the Insert button, then click Picture 4. Browse and select the image or object you want. 5. Click Insert 6. Once the object is in your publication, drag the handles until your frame is the size you want. Inserting a New Text Frame Make sure you are not currently inside a frame. To do this, simply click off onto a blank portion of the publisher canvas. 1. On the Objects toolbar, click TEXT FRAME TOOL. 2. Position the mouse pointer where you want one corner of the text frame to appear, click and hold down the mouse button, and then drag the mouse diagonally until you have the size frame you want. 3. Click inside the newly created text frame, and begin typing in the new text. 4. When you have finished typing, resize the frame to fit the text by following the directions for resizing frames. You may also change the text inside the frame by following the instructions for Editing Text. *****You will need to add a new text frame after inserting a graphic***** Deleting Text only or Text/Frame Box 1. Delete only the text and leave the connected text box Note Be sure to click in the text box. If you click the edge of the text box and then press CTRL+A, you might select everything on the page. a) Place your pointer inside the box and click. b) If all the information does not highlight, press CTRL+A to highlight the entire story. c) Press DELETE. 2. Delete an entire story and all its connected boxes a. Select the text box b. On the Edit menu, click Delete Object. Inserting a Table into Your Publication *****Always remember to save y our work *****

15 Page 15 of 22 *********Tables are the only way to allow for tabbing text to be in a column format*********** 1. On the Objects toolbar, click the Table Frame Tool. *** make sure you are not currently inside a selected frame*** 2. Position the pointer where you want a corner of the table to appear, and then drag the mouse diagonally. 3. In the Create Table dialog box, choose the options you want. As you click different table formats, the Sample box displays them. 4. Click OK. 5. In the table, click where you want to add text, and then start typing. 6. The cell automatically expands when your text fills the cell, unless you lock the table. 7. Move to the next cell you want to type in. 8. You can expand width of columns and rows by moving cursor on column row edge to get adjust arrow drag the row or column boundary to a new position. Editing Table Properties and Cells To edit table properties 1. Select the table by clicking on it. 2. Right click on the table and select CHANGE TABLE. 3. From this menu you can- Insert rows and columns Delete columns and rows Merge cells Change the fill color Line color Line border style Shadow Edit the table properties *** Remember, right clic king on a frame brings u p most of the frames options. ***

16 Page 16 of 22 Inserting Hyperlinks 1. Select either text or a picture. 2. Click Insert Hyperlink 3. Under Link to, click Existing file or Web page. 4. Do one of the following: OFFICE XP OFFICE 2000 To select a file from your My Documents folder, click -- Current folder. To select a file that was recently viewed in your Web browser, click Browsed pages. To select a file that you were recently working in, click Recent files. If you entering a URL, enter the completed address in the Address line Create a hyperlink for an address--either type the address you want in the address box, or select an address from the Recently used addresses box. Creating a hyperlink from a place in the document---under Link to, click Place in This Document. Select the page you want. Navigate to the file or page you want. OFFICE 2000 To select a Web site or file on the Internet select A web site or file on the Internet * Create a hyperlink for an address select An Internet address * To hyperlink to another page within your Webpage select Hyperlink to (selected page) * To select a file that you were recently working in, click A file on your hard disk * Design Checker Run the Design Checker 1. On the Tools menu, click Design Checker. 2. To check your entire publication, click All. -Or-To check specific pages, click Pages, and then type the page numbers in the "from and to" boxes. 3. Click OK. Publisher checks the design and displays a dialog box if it finds a problem. 4. If you want to fix the problem, go to the publication and make your changes; you don't have to close the Design Checker dialog box. When you've finished, click Continue to have Publisher continue checking your publication. -Or- If you don't want to fix the problem, click Ignore or Ignore All, and then click Continue. (Using Office XP skip to Step 7) 5. Box opens asking if you want Design Checker to test download. 6. Click Yes. 7. Click OK.

17 Page 17 of 22 WEB PAGE PREVIEW This feature generates your pages as a Web site, and opens them in your default Web browser. In your browser window, click the hyperlinks in your Web pages to check them. To Preview Web site and Test Hyperlinks 1. On the File menu, click Web Page Preview (this may take a few moments). 2. If your site has more than one page, to view the entire site, click Web site. Or- To view only a single page, click Current page. ****If you choose Current page hyperlinks cannot go to other pages while you preview. **** 3. Click OK. You can make changes to your Web pages in Publisher after you have previewed, but you won t see the changes in your browser until you repeat steps 1-3. Now you are ready to save your publisher file as a Web Page. Publishing your File as a Web Page using Office 2000 (If you are using Office XP go to page 19) Setting Web Page Properties Now that you have created your first publisher Web site file, you are ready to convert the.pub file into a Web site. Publisher will automatically save the pages as.htm or.html files and save the graphics that you placed into the file as numbered graphics. ***You must be on page one of your publisher file This is for the Lafayette Parish Server**** Convert your Publisher file into a Web site. 1. Select the FILE Menu. 2. Click Web Properties 3. Click the Page tab. 4. Under Web Page, 5. Click in the File name box, type default. 6. Click in the File extension box, type htm, or pick from drop down arrow htm. 7. The Title box should display your web page as entered in Title Frame. 8. Click OK Saving as a Web Page 1. On the File menu, click Save as Web Page.

18 Page 18 of 22 Publisher will now ask you for the location where you wish to store the converted files. By default, publisher stores the files in a PUBLISH folder inside your MY DOCUMENTS FOLDER. You can, however, select any location for the files to be stored. 2. On the Save as Web Page window The file will read Look in: Publish Folder name: C:\My documents\publish The Folder name box is filled with the complete path to your Web site. 3. Click OK. Once converted, your files are ready to be uploaded to your web server. Remember that all of the files that Publisher created must be moved into the same folder on your web server. If you upload only the.htm your graphics will not be displayed on the Web. See directions for FTP.

19 Page 19 of 22 Save as Web Page After making all of your changes to your Web site you are ready to publish your site to the web. 1. Click on File 2. Select Save as Web Page 3. Save in: Desktop 4. Create a new folder on the desktop called Web Page. 5. Name the file Default 6. Save as file type htm You are now ready to upload your Web Site. See directions for FTP.

20 Page 20 of 22 Creating a Web Site Using MS Publisher from Scratch Start a publication from scratch 1. On the File menu, click New. 2. Click the Blank Publications tab. 3. Click Web Page, and then click Create. Things to note about creating a web site from scratch without the wizard: Only one page is created (You can add additional pages by clicking on the INSERT Menu Item and choosing PAGE.) Links must all be placed in manually (including the navigation bars). Color and background scheme must be formatted manually (Select the FORMAT Menu Item and choose COLOR AND BACKGROUND SCHEME) All other editing and inserting follows the same pattern as described in this handout.

21 Page 21 of 22 DIRECTIONS FOR FTP (File Transfer Protocol) File Transfer Protocol, or FTP, is a protocol used to upload files from a workstation to a FTP server or download files from a FTP server to a workstation. It is the way that files are transferred from one device to another in order for the files to be available on the Internet. When ftp appears in a URL it means that the user is connecting to a file server and not a Web server and that some form of file transfer is going to take place. Most FTP servers require the user to log on to the server in order to transfer files. STEPS TO TRANSFER FILES: (You will need the user name and the password given to you in class.) 1. Close out Publisher if it is still open. 2. Open the Web Page folder on the desktop and minimize the folder. 3. Open Internet Explorer. a. In the address bar, type the following address: ftp://www2.lft.k12.la.us/ b. A window will open. Enter the user name and password assigned to you. c. Place a check mark on Save Password if you want the computer you are using to always remember your password (not recommended if using a school computer). b. c d. Click the Log on button and Explorer will open to your web folder on the www2 server. e. On your task bar, click on the Web Page folder. Go to Edit, Select All, then Edit Copy. f. On your task bar, click the ftp site in Internet Explorer. Go to Edit, Paste. If you have already published your web site, you will get a message saying a file already exists, do you want to overwrite, click the Yes to All button.

22 Page 22 of 22 NOTE: In Windows XP, the following two windows will appear. You MUST click in the back window and choose Yes to All button for the pasting process to continue. CONGRATULATIONS! You have now posted your web page. To view your web page, open Internet Explorer and type in your web address. Your web address will include the server name (www2.lft.k12.us), your school folder and your username, typed in as shown below: Below is the list of folders names assigned to the schools. Folder names are not case sensitive in the web address, however you must type them with no spaces in folder names. For example, Mary Jane Smith teaches at Edgar Martin. Her web address would be: SCHOOL FOLDER NAMES ON WWW2 SERVER AcadianaHigh DrexelElementary LLeoJudiceElementary YoungsvilleMiddle AcadianMiddle DusonElementary MiltonElementary AllemanMiddle EdgarMartinMiddle MontgomeryElementary BoucherElementary ErnestGalletElementary MyrtlePlaceElementary BroadmoorElementary EvangelineElementary NorthsideHigh BroussardMiddle GTLindonElementary NPMossMiddle BurkeElementary JudiceMiddle OssunElementary CareerCenter JWFaulkElementary PaulBreauxMiddle CarencroHeights GTLindonElementary PlantationElementary CarencroHigh JudiceMiddle PrairieElementary CarencroMiddle JWFaulkElementary RidgeElementary ComeauxHigh LafayetteHigh ScottMiddle DrexelElementary LafayetteMiddle StsLeoSeton DusonElementary LiveOakElementary TrumanElementary EdgarMartinMiddle LafayetteHigh VermilionElementary CarencroMiddle LafayetteMiddle WestsideElementary ComeauxHigh LiveOakElementary WoodvaleElementary