Getting Started Guide for Creating Websites at Ohlone College - Web Center
Full-time and part-time faculty at Ohlone College are encouraged to provide information for students on a website. There are several ways for faculty to create a website. Review the Options for Faculty Websites.
If you will be using Canvas for your course website, contact Online Education for assistance - you do not need the information provided on this page.
Websites for Divisions, Departments, Faculty, Staff, Committees, Other Campus Groups
Building a website involves learning many new tasks, including:
- learning the proper way to use XHTML or HTML to markup the content on your web pages
- making the content of your web pages, MS Word files, PDF files, and other media (text, graphics, video, sounds) usable and accessible to all people, including those with disabilities
- understanding the differences between a variety of different web browsers, operating systems, and electronic devices
- learning to write for a web audience (writing for the web is different than writing for print)
- using a secure file transfer software program to transfer your website files to the Ohlone College development web server
- validating each page to meet common web standards
- testing your pages with a variety of browsers and operating systems
- working with Ohlone College's Web Team
Sometimes it is difficult to know where to begin. The following steps should help you develop your website.
Step 1 - Think About WHY You Want a Website
Why do you want a website? What is the purpose or goal? Who is the audience for your website?
Step 2 - Decide Who Will Build and Maintain the Website
Decide if you will build and maintain the site yourself or whether you will have someone else do it, such as a student or a consultant. Information about the requirements for Ohlone College websites is available in the Web Style Guide.
If a student or consultant designs and creates your website, make sure you or someone will be able to make updates to the website. The Web Team does not manage websites not created by the Web Team using the standard design templates.
Websites are not static - they change over time (sometimes annually, sometimes every semester, sometime monthly, sometimes weekly, sometimes daily!). Websites that are not updated may be removed from the Ohlone College web servers.
The Web Team is available to manage Division, Department, Committee, Other Campus Group (except unions and student clubs), and Faculty websites using the standard design templates. The Web Team is not, however, responsible for providing content for websites. More information about Web Team-managed websites is available in the FAQs - Working with the Web Team page.
Step 3 - Decide What You Want Your Website to Say
Websites at Ohlone College are about providing helpful, current, and appropriate information to our students and the Ohlone College community. Content is king. Making sure the website's content is accessible is required. Design is great, but if the content is poor or outdated, why would someone bother visiting the website?
Webmonkey has an excellent tutorial about Information Architecture which will help you determine the type of content you should include and the organization of the site. The Practices and Policies section of the Web Style Guide details required and suggested content for Ohlone College websites.
At a minimum, ask yourself these questions:
- For faculty sites: Who are you?
- For Division, Department, Committee, or Other Campus Group sites: What does your Division/Department/Committee/Group do?
- What services do you provide?
- What are you trying to say? Who is your audience, i.e., who are you talking to (students, other faculty, staff)?
- What information does your audience need or expect?
- What information or messages do you want to share with your audience?
- What are the special needs of your audience?
- By what methods (telephone, email, U.S. Mail) can people reach you?
Then, make an outline of the information you want to include on your website, grouping the information into categories and subcategories. As you go through the process, you are building an outline of the content for each page of your website. If a category has a lot of information, break it down into subcategories. You don't want to include too much information on a page.
Decide what software you will need to create your website. At a minimum, you will need software to create the (X)HTML pages. If photographs or drawings (collectively known as graphics) will be used on your web pages, you will need an image editing program that will allow you to easily resize images and save them in the proper format for use on the web (i.e., GIF (line art, images with large flat areas of color) or JPG (photographs, images with gradients and other very small areas of color)). Software licenses must be purchased by your department through the IT Services Department.
Software used to create (X)HTML pages includes simple editors where you do the coding by hand, to complex, integrated, WYSIWYG ("What You See Is What You Get") programs where you do the coding in a visual environment that is very close (but not identical to) what will be seen in a web browser.
Our recommendations include:
- Adobe Dreamweaver (formerly Macromedia)- An excellent and very robust WYSIWYG program. Dreamweaver MX and newer are XHTML compliant, but Dreamweaver 4 and earlier versions do not produce XHTML markup. (Windows and Mac)
- KompoZer (updated version of Nvu) and Nvu (pronounced N-view) - (free) WYSIWYG software tool for creating and maintaining web pages. (Windows, Mac, Linux)
- iWeb (part of iLife by Apple)- Uses Apple-created templates. Allows for easy publishing of text, podcasts, and other website content. Comes installed on new Apple computers. (Mac only)
- Adobe HomeSite (formerly Macromedia) - A text-based HTML editor (not WYSIWYG) highly recommended by web designers using Windows. Helps you keep your code clean. (Windows only)
- BBEdit - A text-based HTML editor (not WYSIWYG) that comes highly recommended by web designers using Macs. Helps you keep your code clean. There's a free "lite" version and a full commercial (not free) version. (Mac only)
- HTML-Kit - A robust text editor (not WYSIWYG) that will help you keep your code clean. It offers many features, including the ability to strip unnecessary and extra code from HTML files saved from Microsoft Word documents, convert pages to XHTML, etc.
- TextPad - A shareware text editor (not WYSIWYG) that provides syntax highlighting, and line numbers, etc. TextPad is not an HTML editor, however, and therefore is not as user-friendly as HomeSite and BBEdit. Ohlone College has purchased a site license since TextPad is used in Computer Science courses (this means you don't have to purchase a license to use the software). (Windows only)
- NotePad - A simple no-frills text editor (not WYSIWYG) included with all Windows operating systems. Not recommended for more than simple edits. (Windows only)
- SimpleText - A simple text editor (not WYSIWYG) included with Macintosh operating systems. (Mac only)
Step 5 - Learn About Building Websites
Review the Web Style Guide to learn about the content, formatting and other requirements for websites on the Ohlone College domain. Use the Resources in the Web Center and/or get web design training to learn the skills necessary to build a website.
Answers to commonly asked questions about creating and maintaining websites at Ohlone College can be found in the Web Center's FAQs section.
Step 7 - Gather the Materials for Content
Find the materials you will use to provide content for each page of your website. People visiting your site do not want to see "Coming Soon" or "Under Construction" pages. They want to see information. If you don't have information for a page or section you want to include in your website, do not include it yet.
If the Web Team is creating/managing your website, provide the content to them in electronic form (usually Microsoft Word documents). The Web Team will handle the rest. You can skip the rest of this page!
Step 8 - Create the XHTML Pages, Graphics, and Multimedia for Your Site
Create the (X)HTML pages, graphics and other elements you will use on your website. Make your pages and multimedia accessible to people with disabilities. The Web Style Guide and Resources section of the Web Center provide information to help you.
Step 9 - Validate and Test Each Page Locally On Your Computer
Validate the (X)HTML coding for each page using the W3 HTML Validator, check each page for adherence to accessibility standards, and test each page in multiple browsers locally on your computer. The Web Style Guide and Resources section of the Web Center have more information on validation, accessibility, and testing.
Step 10 - When You Are Ready to Upload and Test Your Web Pages on the Web Server, Request a Web Server Account
When you have completed building your website and have validated and tested each page, see the How Do I Get A Web Server Account? tutorial in the Web Center to request an account on the development web server.
Step 11 - Transfer (Upload) Your Website Files to the Testing/Development Server
Use a secure file transfer program to upload your website files, including (X)HTML pages, graphics, and other elements, to the development web server. Refer to the Secure File Transfer Tutorials section of the Web Center for more information.
Step 12 - Test Each Web Page on the Web Server to Verify that Images and Links Work Properly
After uploading your website files to the development web server, it is important to test them again, even after testing them locally on your computer. Sometimes images and links mistakenly point to files on your computer's hard drive. If this happens, those images and links will not display or link properly when viewing the page from the web server.
To view and test your website from the development web server, go to your website's http://dev2.ohlone.edu/path/to/your/website/ directory using a web browser.