Home
Instructional Technology Solutions at Work!!!
|
Web Page Design and Layout for Educators
Gouverneur Central School Staff Development
|
Workshop Description
Learn the common tasks performed in MS FrontPage using a simple step-by-step procedure.
Prerequisites
Participants must be able to use a mouse and have mastered basic computer
skills.
Please read Simple Website Design to
begin the log in procedure.
Why do I need a web page?
Web based learning is an exciting way for students to gain new knowledge. The Internet holds a vast source of information for people of all ages. Because of this, it can be time consuming and frustrating for students
to search and evaluate sites on a general topic without your help and guidance. By designing your own curriculum based web page, you select the specific links that will streamline student learning toward specific goals. Building information literate students begins by guiding successful experiences when using technology as tool.
In the end, all the designing you do on a site is worthless if the content isn't there for your students. Make sure you have good content, and that it's easily accessible for users. If this requires you forgo some design resources in order to provide more content, do so. Regardless of how "cool" the site may look, if the content isn't there, it will be useless.
Begin by listing information you want your students to know and learn as a result of using the web site. Use a topic within your existing curriculum or one you will soon be introducing.
Content suggestions include:
Informative
Guided Inquiry
Extended Learning Activities
Classroom Curriculum and Assignments
Suggestions for an Informative Web Site:
Determine your audience. (parent, community, student, all of the above)
Have a strong central narrative.
"Chunk" information; Readers appreciate small chunks of information that can be read or scanned quickly.
Group Links together; Linking can be a distraction in some areas of instruction and it is best to group links on a separate page.
Restricting links to the "Next" and "Previous" guarantees that everyone will see the same presentation and read the same information.
Provide some interesting images.
When using student photographs, you must get parental permission (see form letter) and do not publish last names.
Annotate all sites.
Suggestions for Guided Inquiry:
Post questions for students to guide their search with specific links to help them answer the question.
Web based "scavenger hunts" can serve multiple purposes including teaching the user how to navigate linked sites effectively.
Annotate all sites.
Suggestions for Extended Learning Activities:
Avoid linear links that restrict self-directed learners.
Provide flexible nonlinear links with an assortment of avenues to allow these types of learners to pursue.
The design must permit fast access to a wide range of topics.
Annotate all sites.
Suggestions for Classroom Curriculum and Assignments:
Begin by planning and designing your site on paper-
Consider how will each portion link to the other and how they may interlink.
Set information headings within a table.
Include all assignments, due dates, rubrics, informational links, completed student examples and any other information pertinent to the unit.
Chunk information.
Use some interesting graphic to break up sections of text.
Include extended activities for students who complete the unit ahead of others.
Examples
Mr. Conant's Science Web Site @ Memorial Middle School, Beverly, Massachusetts
Mr. Kevin Bresett’s Accelerated Science 7/8 course and Earth Science @ Edwards Knox Central School, Russell, NY http://www.ekcsk12.org/faculty/kbresett/Mr. Jon Hogle’s eighth grade math @ Edwards Knox Central School, Russell, NY
http://www.ekcsk12.org/faculty/hogle/
Ms. Ann Ruddy’s English course @ Madrid Waddington Central School, Madrid, NY
http://www.mwcsk12.org/faculty/aruddy/index.html
Ms. Susan Burwell’s Social Studies courses @ Madrid Waddington Central School, Madrid, NY
http://www.mwcsk12.org/faculty/sburwell/index.htmlC. Flynn’s 7th grade ELA class @ Potsdam Central School, Potsdam, NY
http://documents.potsdam.k12.ny.us/~cflynn/D. Sipher’s Ag and Environmental courses @ Potsdam Central School, Potsdam, NY
http://documents.potsdam.k12.ny.us/~dsipher/
Don’t forget to look at the GCS faculty web pages.
Think about your content!!
What do you want your page to look like??
FrontPage Screen Layout
Below is a diagram of the default page layout in FrontPage. You can change the view by selecting a different Views Option.
View Options
Page view
gives you a WYSIWYG editing environment for creating and editing web pages.Folders view lists all of the files and folders in your web for easy management.
Reports view identifies problems with pages and links in the web including slow-loading pages, broken links, and other errors.
Navigation view lists the navigation order of the site and allows you to change the order that a user would view the pages.
Hyperlinks view allows you to organize the links in the web pages.
Tasks view provides a grid for inputting tasks you need to complete in your web.
Page Layout
|
Use tables or frames to place all text and images within. This will insure that your text or image is not cut off when displayed, regardless of the browser or screen size. Buttons and links should appear in same location on each page. Don't use too many animated graphics-this may be distracting to students. |
The top of the page should contain the title of the page.
Classroom pages should identify the SCHOOL and link to its home page.
Color
|
Keep color themes consistent within the web site to ensure a feeling of unity and cohesiveness within all the pages. Keep background colors and patterns to a minimal. |
Add a background color or picture, change fonts and font colors.
Add a graphic or picture.
SAVE OFTEN!!!!Building Your Web
On the Views Menu click the Navigation View
.
This is your index page.
Add connecting pages by clicking on the index page, then clicking on the New
Page Icon
. Add two pages
in this manner.
Right click on the New Page 1, click Rename. and Type Project 1
Right click on the New Page 2, click Rename. and Type Vocabulary.
Your web site now has 3 pages, a home or index page, a project page and a vocabulary page.
Adding a Shared Border
In the Navigation View, double-click on the Project 1 page.
From the Format pull-down menu choose Shared Borders.
Select the All Pages option, then select the Top, Left and Bottom checkboxes.
Select the Include Navigation buttons checkbox below the left option. Click OK to return to your page. Notice the dotted lines indicating the shared borders.
*Click in the top shared border area to highlight the text.
On the
Insert menu, click Page Banner.Select the
Picture option, verify that the name of the page is in the Page banner text box, and then click OK. The page title can now be seen in the top shared border.*Click in the left shared border area. The text is highlighted.
Insert menu, click Navigation Bar.Select the
Child Pages under Home option, then select the Vertical, and Text options and click OK. Hyperlinks to each of the Web pages below the home page are now located in the left shared border.*Click on the bottom shared border area. The text is highlighted.
On the
Insert menu, click Navigation Bar.Select the
Top level option, then select the Horizontal and Text options and click OK. The Home Page can now be seen in the shared border at the bottom of the page.Add a Graphic
Position the cursor in the left shared border area below the links you just created.
Under the Insert Menu, click on Picture, then Clip Art. Insert any clip art. Resize, if necessary. Because this is in the shared border, the graphic will appear on all pages that are shared by this border.
Add a Hyperlink
Position the cursor in the left shared border area near the clip art you just inserted. Key "GCS Home". Right click on the text "GCS Home" and choose Hyperlink Properties. Use the
Browse the Internet button to find the GCS URL, or simply key it into the dialog box. Click OK.
Use the Envelope icon to create a hyperlink to your e-mail address.
Click OK.
Add a Theme
Double-click index.htm to open the home page.
On the Format menu, click Theme.
In the Themes dialog box, select the All Pages option.
Select the Straight Edge theme. Straight Edge is a very simple theme. To explore the other themes, click the title and a preview appears in the Sample of Theme box. Select the Active Graphics and Background Image check boxes.
Click OK. The theme is applied to all pages in your Web.
Add a Table
On Web pages, information often appears in tables with invisible borders. Tables help you control your page layout so that everything is easy to find and to read.
On the
Views toolbar, click Page.Double-click index.htm Position the cursor in the center of the page to insert a table on the page. Press the Enter key to create a blank line.
Click the
Table
button or use the Table
Menu to create a table with 6 rows and 3 columns.
Click in the first cell - Enter the beginning and ending dates for the next week.
List the days of the week in the cells below the date.
Key your course names in the top of columns 2 & 3.
Enter the assignments for the upcoming week.
Congratulations,
You now have a web site "Under Construction."
Use the links below to learn more about MS FrontPage.
Links
|
Florida Gulf Coast University’s FrontPage training |
http://www.fgcu.edu/support/office2000/frontpage/index-beginner.html |
|
FrontPage in the Classroom |
|
|
Microsofts FrontPage Tutorial |
|
|
The WWW Help Pages |
|
|
Discovery School |
http://school.discovery.com/clipart/ "Clip art licensed from the Clip Art Gallery on DiscoverySchool.com" |
|
Pics for Learning |
|
|
Backgrounds |