design a web site using publisher

22
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

Upload: others

Post on 12-Sep-2021

2 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: DESIGN A WEB SITE USING PUBLISHER

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

Page 2: DESIGN A WEB SITE USING PUBLISHER

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. Scroll Bar Publication

by Wizard Create a Web site

Office 2000 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) Start Wizard Look at all the Web Sites. 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

Page 3: DESIGN A WEB SITE USING PUBLISHER

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.

*****Always remember to save your work *****

Page 4: DESIGN A WEB SITE USING PUBLISHER

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.

Page 5: DESIGN A WEB SITE USING PUBLISHER

Page 5 of 22

8. 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.

Page 6: DESIGN A WEB SITE USING PUBLISHER

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%

*****Always remember to save your work *****

Zoom box

Page 7: DESIGN A WEB SITE USING PUBLISHER

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 rPublisher will automatically add the .pub extension to the file.

emember.

*****Always remember to save your work *****

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

Page 8: DESIGN A WEB SITE USING PUBLISHER

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

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 all4. Select the template (School web site). The wizard will automatically begin.

P

Look at all the Web Sites

By Publication Type

Web sites

Office X

. Scroll Bar

.

Page 9: DESIGN A WEB SITE USING PUBLISHER

Page 9 of 22

5. 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

Page 10: DESIGN A WEB SITE USING PUBLISHER

Page 10 of 22

11. 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.

Page 11: DESIGN A WEB SITE USING PUBLISHER

Page 11 of 22

15. 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. ***

Page 12: DESIGN A WEB SITE USING PUBLISHER

Page 12 of 22

18. 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.

*****Always remember to save your work *****

Editing Text

Page 13: DESIGN A WEB SITE USING PUBLISHER

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*****

*****Always remember to save your work ***** 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.

*****Always remember to save your work *****

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. *****

Page 14: DESIGN A WEB SITE USING PUBLISHER

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.

until your frame is the size you want.

*****Always remember to save your work *****

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

Inserting a Newside a frame. To do this, simply click off onto a

EXT FRAME TOOL.

3. typing in the new text.

side the

after inserting a graphic*****

Deletine connected text box

Not he text box and then press

TRL+A to highlight the entire story.

tory and all its connected boxes

lick Delete Object.

our work *****

Text Frame

Make sure you are not currently inblank portion of the publisher canvas.

1. On the Objects toolbar, click T

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. Click inside the newly created text frame, and begin

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 inframe by following the instructions for Editing Text. *****You will need to add a new text frame g Text only or Text/Frame Box

1. Delete only the text and leave the Be sure to click in the text box. If you click the edge of t

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 Cc) Press DELETE. 2. Delete an entire s

a. Select the text box b. On the Edit menu, c

*****Always remember to save y

Inserting a Table into Your Publication

Page 15: DESIGN A WEB SITE USING PUBLISHER

Page 15 of 22

*********Tables are the only way to allow for “ta bing” text to be in a column format*********** b

1. On the Objects toolbar, click the Table Frame Tool. *** make sure you are not currently inside a selected frame***

le formats, the Sample box displays

4. Click O5. In the table, click where you want to add text, and then start typing.

omatically expands when your text fills the cell, unless you lock the table.

column boundary to a new position.

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 tab

them. K.

6. The cell aut7. 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

*****Always remember to save your work *****

Editing Table Properties

it. e table and select CHANGE TABLE.

s Merge cells Line color Line border style

cli king on ngs p most f the fr mes op

and Cells

To edit table properties 1. Select the table by clicking on2. Right click on th3. From this menu you can-

Insert rows and columns Delete columns and row Change the fill color

Shadow Edit the table properties *** Remember, right c a frame bri u o a tions. ***

*****Always remember to save your work *****

Page 16: DESIGN A WEB SITE USING PUBLISHER

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 email address--Either type the e-mail address you want in the E-mail address box, or select an e-mail address from the Recently used e-mail 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 email address—select An Internet e-mail 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.

*****Always remember to save your work *****

Page 17: DESIGN A WEB SITE USING PUBLISHER

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.

*****Always remember to save your work *****

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 e

in Title Frame. ntered

8. Click OK Saving as a Web Page

1. On the File menu, click Save as Web Page.

Page 18: DESIGN A WEB SITE USING PUBLISHER

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.

Page 19: DESIGN A WEB SITE USING PUBLISHER

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.

*****Always remember to save your work *****

Page 20: DESIGN A WEB SITE USING PUBLISHER

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.

Page 21: DESIGN A WEB SITE USING PUBLISHER

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.

Page 22: DESIGN A WEB SITE USING PUBLISHER

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:

http://www2.lft.k12.la.us/schoolfolder/yourusername

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:

http://www2.lft.k12.la.us/edgarmartinmiddle/mjsmith

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