1. Enhancing Student Learning and Retention with Community Partnerships
George Kontos, Ed.D.
University College, Professional Studies
Western Kentucky University

2. A Student-Community Collaboration Project
Community Service Example:
Web Page Design
A Student-Community Collaboration Project
George Kontos, Ed.D.
Associate Professor
University College, Professional Studies
Western Kentucky University

3. How to do a Student-Community Website Project?
Research local businesses
Make a list of local businesses
Choose an interested business
Meet business representatives to discuss
Plan the web site
Implement the plan
Revise as needed
Complete project to the business’ satisfaction
Web Page Design (Kontos)

4. Two Steps are Essential in Developing the Web Site:
Planning
Implementation
Web Page Design (Kontos)

5. Web Page Design ... (Kontos)
STEP 1: PLANNING
Identify the purpose and target audience
Determine what web pages to include
Sketch the navigation structure
Review and revise the sketch
Determine the content for each page
Design the web pages by sketching the page layouts
Review and revise
Web Page Design (Kontos)

6. Navigation Structure (sketch)
11/24/2018 4:34 AM
Navigation Structure (sketch)
The home page typically contains links to web pages of specific topics. The organization of the pages in a website is called its navigation structure. Using rectangles and lines to represent web pages and their relationships, the navigation structure should be sketched during the planning stage of website development. A sketch usually goes through several revisions before being finalized. This sketch represents the navigation structure of a restaurant’s website.
The arrangement of the pages in a navigation structure should be from general to specific. For example, the menus page is more general than the specific pages for breakfast and lunch. The hierarchy should not be too deep or too shallow and each page should be about one topic.
SLIDE 7
Web Page Design (Kontos)

7. 11/24/2018 4:34 AM
Web Page Layout
A web page layout refers to the arrangement of the elements on the page. Elements can be in the form of text, images, Flash movies, or other media and include navigation bars, a logo or heading, copyright information, and content.
The top area is called the header and includes a logo or heading, top global navigation bar, and possibly a breadcrumb trail.
The bottom area is called the footer and includes a bottom global navigation bar and other information such as a copyright notice, the date of the last update, and a link to contact the author.
A page layout should be sketched for each page of a website. The sketches should show the general placement of the content elements. The links in the navigation bars can be listed separately or written on the sketch where the links will appear.
Page layout should be similar for each page. By consistently placing elements in the same location, the user quickly becomes familiar with the website and can navigate easily. The home page acts as the starting point of a website and should therefore have a slightly different layout to quickly identify it as the home page.
SLIDE 9
Web Page Design (Kontos)

8. 11/24/2018 4:34 AM
Navigation Bars
A navigation bar is a set of hyperlinks that give users a way to display the different pages in a website. Most websites contain more than one kind of navigation bar for better usability. For example, this web page includes navigation bars and a breadcrumb trail.
The top global navigation bar typically contains a link to each page on the first and second levels of the website’s navigation structure, and should be placed near the top of each page.
The bottom global navigation bar should appear near the bottom of the page and is often centered. It should contain text links to all of the pages in the website if possible.
A local navigation bar—positioned either below the top global navigation bar or vertically along the left side of a page—contains links to the child pages of the current page.
A breadcrumb trail, also called the path, displays the page names in order of level, from the home page to the current page. It provides a point of reference and allows the user to navigate by backtracking through the site. Each page name in the path should be separated by a symbol, most commonly the “greater than” sign (>).
SLIDE 10
Web Page Design (Kontos)

9. The Four Concepts of Design
Appropriateness
Match purpose and target audience
Placement
Follow standards based on user expectations
Consistency
Use consistent visual cues
Usability
Make it easy on the user to navigate through
Appropriateness: How well the elements in the website match the purpose and target audience. Do the images fit the purpose of the website? Are they appropriate for the audience?
Placement: Follow generally accepted standards, with a header, a footer, and content in between. These standards are based on user expectations. Web pages should have a similar design but different content. The most important elements should be placed near the top of a web page (as above the fold in newspapers) so that they are visible right away.
Consistency: Use consistent visual cues. Repetition in the placement of elements creates and maintains expectations for the user. As an example, if you use a logo, put it in the upper left corner on the web pages.
Usability: The usability is indicated by how easily the user navigates through the web pages to find the information. Make it easy on the user to navigate through the website. If the website isn’t usable, it won’t get used. The object is to keep users at a website long enough to find information that is useful to them.
SLIDE 11
Web Page Design (Kontos)

10. Web Page Design ... (Kontos)
Review / Summary
STEP 2: IMPLEMENTATION
Using Dreamweaver (or other tool), define the web site and organize the files and folders
Create the web pages and link them together
Review the web site in a browser
Make changes or corrections
Repeat steps 3 and 4 until complete
Web Page Design (Kontos)

11. Web Page Design ... (Kontos)
Who Benefits?
The business
The student
Web Page Design (Kontos)

12. Benefits if Student Projects Involve the Community
Students:
Make new contacts
Work with potential future employers
Apply class knowledge to real life
Boost resume
Businesses:
Get help to complete unfinished projects
Get to know potential future employees
Web Page Design (Kontos)

13. Web Page Design ... (Kontos)
Reasons why a local business would welcome help in having their web site created
Lack of :
knowledge to create an effective web site
resources needed to create it
money to finance creating it
time to devote in its design and implementation
Web Page Design (Kontos)

14. Closing Comments: To Enhance the Project’s Effectiveness,
Assessment should also be conducted on any level other than the end-product itself (the website)
Students should journal throughout the course of the project and document what they have learned through the process
Web Page Design (Kontos)

15. Directions for Preparing the Journal
How did you search for businesses that might be interested in developing a web page for them? Did you use the phone book? Contacts, phone, , Internet?
Write the name and other contact info of the one business that you actually selected.
Write the date that you made the initial contact with this business.
Web Page Design (Kontos)

16. Directions for Preparing the Journal (cont.)
Write a brief summary of what was discussed at each of the meetings that you had with this business, including date for each meeting. Were the meetings conducted by phone, , or how?
Other info such as what you learned through the process about this business in general and about their needs for having you develop a website for them.
Web Page Design (Kontos)

17. Directions for Preparing the Journal (cont.)
What experience did you gain while working on this project?
Whatever else you think is relevant with this project
Web Page Design (Kontos)

18. What is Service-Learning?
Service-learning can be described as “learning by doing while helping others.”
It is considered a form of experiential learning in which students participate in an organized activity that meets learning objectives and identified community needs at the same time.
Course content improves the quality of student service projects.
The service experience enhances student learning.
Service-learning can be described as “learning by doing while helping others.” It is considered a form of experiential learning in which students participate in an organized activity that meets learning objectives and identified community needs at the same time. In service-learning classes, students work in the community on issues that make education relevant and exciting. Course content, such as training, lectures, and readings, improve the quality of student service projects. In turn, the service experience enhances the classroom dialogue, skill development, application of knowledge, and student learning. Service-learning may take the form of community placements, projects, or community-based research.

19. Web Page Design ... (Kontos)

20. Web Page Design ... (Kontos)
Questions?
George Kontos
MYKONOS, GREECE
Web Page Design (Kontos)