Faculty web page

WORKSHOP DESCRIPTION............................................................... 1
Overview 1
Prerequisites 1
Objectives 1

FACULTY WEB SITE ........................................................................... 2
Web Design Review 2
Understanding the World Wide Web 2
Web Browsers 2
How Browsers Display Web Pages 3
The Web Process at Sacramento State 4
Web Server Accounts 5
Common Web Server Accounts at Sacramento State 5
Web Site Organization 6
FILE NAMING CONVENTIONS 6
SITE STRUCTURE 7
Faculty Web Site: Getting Started 8
Faculty Web Site Template in a Nutshell 8
Understanding the Template 9
The Site Structure 10
Editing the Template 11
Define Your Site in Dreamweaver 11
HOW TO DEFINE A SITE (IN DREAMWEAVER) 11
EXERCISE 1 12
Changing the Title, Department and College 12
Changing the Contact Information 13
EXERCISE 2 13
Adding Details 14
Deleting Extraneous Content 14
EXERCISE 3 14
Adding Your Photograph (or Deleting the Current One) 15
Editing Course Information 15
INCLUDING BASIC COURSE INFORMATION ON THE HOMEPAGE (NO
LINK) 16
INCLUDING DETAIL COURSE INFORMATION (USING A LINK TO A
SEPARATE PAGE) 17

ADDING ADDITIONAL COURSES 18
EXERCISE 4 18
Copying Your Faculty Web Site to a Web Server 19
How to Define an FTP Connection 19
USING THE SITE MENU 19
How to Copy Files Using FTP 21
RESOURCES ....................................................................................... 22
Faculty / Staff Resource Center 22
Getting Help 22
Campus Resources 22
Books 23
Web Resources 23

WORKSHOP DESCRIPTION

Overview
You will modify a Web page template that will become the Home page of your new Faculty Web
site. Your first page will contain basic information about you and your courses. If you have a
Web server account, you will be able to publish your completed site to the Web.

Prerequisites
You have experience editing Web pages using a Web editor such as Macromedia Dreamweaver
or Microsoft FrontPage.

Objectives
Participants in this workshop will:

▪ Become familiar with the web process at Sacramento State
▪ Understand how to download and use the Faculty Web Site Template
▪ Learn how to edit the Faculty Web Site Template
▪ Create a faculty web site using Dreamweaver and the Faculty Web Site Template.
.

Academic Technology and Creative Services : Summer 2007 Faculty Web Site 1

FACULTY WEB SITE

Web Design Review

Understanding the World Wide Web
The Internet is a collection of computers around the world connected to each other via a high-
speed series of networks. The World Wide Web – or Web – consists of a vast assortment of
files and documents that are stored on these computers and written in some form of HyperText
Markup Language (HTML) that tells browsers how to display information on the Web. The
computers that store the files are called servers because they can process or serve requests from
many users at the same time. Users access these HTML files and documents via software
applications called browsers.

A server
(or “Web
server”)
Web pages
(HTML) stored
A single
on a ser ver
Web page
viewed in a
browser

Web Browsers
A Web browser is a program that displays Web pages and other documents on the Web.
Unfortunately, different browsers may interpret the HTML of Web pages somewhat differently,
and thus, when you create Web pages remember that they may appear different when viewed in
various browsers. The University supports the browsers illustrated below, which can be
downloaded free from the company’s Web site.


Internet Explorer Mozilla Firefox
(www.microsoft.com ) ( www.mozilla.org )

Note: A visitor can customize many
display features of a browser,
including:
▪ background color
▪ font
▪ font size
▪ text and link colors, and
Safari (Mac + PC) ▪ whether or not to download
( www.apple.com ) images.

How Browsers Display Web Pages
When a Web page is opened in a browser, the browser reads and interprets the HTML file and
formats the Web page for display. If there are references to external files, such as images or
multimedia, these files are downloaded from the server and displayed in the browser window. It
is important to note that HTML files are text files that only contain references to the external
files – you do not “embed” these files into the Web page.

root folder

index.htm In Browser…

images

banner.jpg

icon.gif


The Web Process at Sacramento State
This overview shows you the six steps needed to successfully get your information online.

1. Request a Web server Account
a. Departmental – contact your departmental sponsor
b. Faculty Request Form –(http://www.csus.edu/uccs/forms/webserver)
c. SacLink Request Form – (http://webpages.csus.edu)
d. WebCT Request Form –
(http://www.csus.edu/webct/webct_account.stm)
2. Gather Materials
a. Assignments, Syllabus, Handouts, Textbook Info
b. Images, Photographs
c. PowerPoint lectures, etc…
3. Create/Edit HTML Files
a. Text Editors [Notepad (PC), SimpleText (Mac)]
b. Web Editors [Macromedia Dreamweaver, Microsoft FrontPage]
c. You may need to convert some materials for use on the Web
4. Preview HTML Files
a. View the local files using a Web browser such as Internet Explorer,
Mozilla Firefox or Safari (Mac + PC).
b. Remember to test all of your hyperlinks.

5. Upload to Server
a. Copy the files to a Web server using one of the following programs:
WS_FTP, Fetch, Dreamweaver, FrontPage or WebCT.

6. View pages on Web
a. View pages on the World Wide Web using a Web browser such as
Internet Explorer, Mozilla Firefox, or Safari (Mac + PC).


Web Server Accounts
Before you can copy your files to a server, you need to request an account on a Web server.

root folder
index.htm
images
banner.jpg
I
icon.gif
week1
wk1_lesson1.htm
wk1_lesson2.pdf
week2
wk2_lesson1.pp

Your Web site A Web Server

Common Web Server Accounts at Sacramento State

WHO CAN
ACCOUNT REQUEST
HOW TO REQUEST AN ACCOUNT
NAME AN
ACCOUNT
Faculty Web Fill out the form at
Faculty only
account http://www.csus.edu/uccs/forms/webserver
Faculty, staff Fill out the form at
WebCT course
(limited) http://www.csus.edu/webct/webct_account.stm
Follow the instructions at
SacLink Web Faculty, staff &
http://www.csus.edu/saclink/web/ to activate your
account students
account.
Refer to your department or college Information
Departmental
Faculty, staff Technology Consultant to find out what accounts may
Web account
be available.


Web Site Organization

FILE NAMING CONVENTIONS
When creating a Web site (or a Web page), there are a few rules for creating filenames. These
rules not only apply to HTML files, but to any file or document that is part of your Web site.

▪ Use lower-case letters in your filenames. Upper-case letters can
be used, but this is something that is not normally used when
working with Web files.
▫ Uploading files with capitals into WebCT can create
problems.
▫ Some older browsers do not locate files that are not exactly
specified.

▪ Only use numbers and letters in your filenames. Filenames
must begin with a letter (not a number). Special characters
(except those noted below) should not be used – including #,
& and comma. Do not use any spaces within a filename.

▪ Representing spaces within a filename: You may use the
underscore (‘_’) character or the dash (‘-‘) character to
represent a space in a filename.

▪ File Extensions: .htm or .html may be used as a file extension
when naming HTML files. Be consistent with what you use.


SITE STRUCTURE
Every Web site that you build or inherit should have a consistent and simple organization –
called a site structure. A site is a collection of HTML files, documents and images contained in
a single master folder (the root folder). Within this root folder you can save your documents
and subfolders organized in a manner that makes sense to you, as well as to others in your
department that may need to edit the information.

root folder
We recommend that the structure of your Web
index.htm site include:
images 1. A root folder that contains the Web
site.
A typical banner.jpg
Web site 2. A Web page entitled index.htm (or
icon.gif index.html) that resides within the root
folder to represent the default
week1 homepage for the Web site.
wk1_lesson1.htm 3. An images folder that contains the
graphics, illustrations, images and
wk1_lesson2.pdf
photographs used in your Web pages.
week2
4. Additional folders for organizing your
wk2_lesson1.ppt content.


Faculty Web Site: Getting Started

Faculty Web Site Template in a Nutshell
The Faculty Web Site template consists of two parts. First, the Home page contains general
information about you and provides a way for potential students, current students and
colleagues to learn about you. Therefore, it’s important to publish the material that will best
represent you. Second, you can provide course information – either in the form of a short
description or a long description that includes a syllabus, calendar, and other information. The
template is customizable, so you can modify it to your specific needs.


Understanding the Template
The template has been created with default content that you may alter as desired to meet your
specific needs. Template pages consist of structural, non-editable regions, and regions or sections of content that
are editable (see screenshot below).

Faculty Home page, with editable regions highlighted

Course overview page, with editable regions highlighted

The template consists of a main Home page (or welcome page), and a course overview page.
This workshop will focus on modifying the Home page and course page(s), if you so choose.


The Site Structure
Before we start editing the template, it is important to understand the template file structure.
Remember that Web pages are linked from one page to another; therefore, if you move a file or
rename it you must edit the link pointing to that file. Another important aspect is that the Web
site file structure on your personal computer must be duplicated on the Web server; otherwise,
broken links and missing images will exist.

Let’s look at the file structure for our template. The root folder contains all the Web pages and
sub-folders. The page we will be modifying is the file called index.htm in the root folder. If you
have a photograph of yourself, it’s best to create a folder called images, and then add your
photograph to that folder.

Template file structure Template file structure when defined in
Dreamweaver

TIP : Try to keep your Web pages in one root folder and only work from that
location. Many people use either a Flash drive (a.k.a. USB drive, Pen drive, or
Thumb drive), CDROM, or the hard drive.


Editing the Template
We are now ready to edit our Home page on our personal computer. After we change the
page(s), you will have the option of sending the Web site files to your Web server space, if
applicable. We will be using Macromedia Dreamweaver to edit the template Web pages.

Define Your Site in Dreamweaver
Before creating or editing the Faculty template (or any Web pages), you can and should have
Dreamweaver help you manage your Web (HTML, XHTML) files, original documents (MS
Word, PowerPoint, etc.) and image files by defining a site.

TIP : Keeping everything within a master folder enables you to easily transfer
files to a Web server without changing the organization of the files and sub-
folders. If you do not organize your site files on the Web server the same as they
are organized on your local computer, hyperlinks will not work and images will
not display properly.

HOW TO DEFINE A SITE (IN DREAMWEAVER)
step 1. To set up a local site, first select the Manage Sites option from the Site menu.
step 2. In the Manage Sites window click the New button.
step 3. From the drop-down menu select Site.
step 4. When the Site Definition dialog box appears click the Advanced tab. The dialog
box allows you to choose a name for your site, define a local folder to serve as the
master folder for your site and define a default folder for your images.


step 5. Once you have defined your Dreamweaver site it is
visible in the Site panel (example on right). Here you
can simply double-click any file listed to open and edit
it. You can also move and/or rename a file without
incurring any broken links. This is possible because
your site has been defined within Dreamweaver.

EXERCISE 1 Defining Your Site
1. If you have not already done so, define your Faculty Web site template within
Dreamweaver.
2. Familiarize (or re-familiarize) yourself with the Dreamweaver interface. If you
need to, refer to the document titled Dreamweaver: Introduction to Editing
Web Pages.

Changing the Title, Department and College
step 1. Within Dreamweaver, double-click the file index.htm from the Site panel to open
it.
step 2. Locate the text Faculty Member’s Name and replace it with your name. You will
locate the text in two places – on the page itself and as the title property:

step 3. Locate the text Department and College and replace the underlying link with links
to your department and college:


▪ Open a Web browser and locate your Department site.
▪ Copy the URL from the browser and paste the URL in the Department link
textbox in Dreamweaver.
step 4. Repeat the last two steps for the College link.
step 5. Save & Preview the file.

Changing the Contact Information

step 1. Within Dreamweaver, locate the contact information table and enter your contact
information.


EXERCISE 2 Editing the Homepage
1. Edit your Faculty Homepage (index.htm) to include your name, department
and college link. Edit the page title to include your name.

2. Change the Contact Information table to include your contact information.

3. Save your changes in Dreamweaver (File > Save).

4. Preview your Home page in a browser (File > Preview in Browser).


Adding Details
step 1. Add information under the following sections: Papers and Publications, Research
Projects/Interests and Professional Associations, as desired.
step 2. Add addition sections and information as you see fit.
step 3. Save & preview the file.

Deleting Extraneous Content
step 1. Review your Home page and remove unnecessary content.

EXERCISE 3 Editing the Homepage, cont.
1. Edit your Faculty Homepage (index.htm) to include detail information such
as papers and publications, research projects and interests, and professional
associations. Feel free to add additional sections and/or information.

2. Delete any content from the template that you won’t be using (we will cover
the Courses section next).

3. Save your changes in Dreamweaver (File > Save).

4. Preview your Home page in a browser (File > Preview in Browser).


Adding Your Photograph (or Deleting the Current One)
If you have a photograph of yourself, you can replace the current one with your own. If you
will not be including an image of yourself at this time, delete the current one.

Before you include your image on your Homepage, you will need to be certain that it is in either
GIF or JPG format and that the width does not exceed 150 pixels. We recommend that you
use an image-editing program such as Adobe Photoshop Elements to edit your image.

Once your image is ready, save it to an images folder in your site. This is very important!

To delete the current image:

step 1. With the file index.htm opened in
Dreamweaver, click once to select the current
image:
step 2. Hit the Delete button on your keyboard.

To add you own image in:

step 1. Click the insert image button ( ) on the
Common tab of the Objects (Insert) panel. A
menu appears where you can select the Image
option to insert your image.
▪ Alternatively, add your image by dragging it in from the Site panel in
Dreamweaver.

Editing Course Information
Currently, the template Home page lists one sample course under the Courses heading:


If you wish, add your own course(s), including basic course information if you desire. If you go
this route, your Courses section might look like this:

Alternatively, add your courses, but include a link to a separate course page for each course; each
course page would include detail course information (possibly including a syllabus, handouts or
Web links). You might end up with something similar to this:

INCLUDING BASIC COURSE INFORMATION ON THE HOMEPAGE (NO
LINK)
To include basic course information on the Homepage (and not link to a separate, detail page):

step 1. Within the Courses section on your Homepage, replace the text reading Course 1
with your own course.
step 2. Type (or copy/paste) your basic course information.
▪ To add additional courses, hit return directly after your first bullet to create a
second bullet. Add your course information.
▪ Proceed as indicated above to add more courses.
step 3. Save & preview your Home page.


INCLUDING DETAIL COURSE INFORMATION (USING A LINK TO A
SEPARATE PAGE)
To edit the current Course 1 text to reflect your own course or
courses and link to a separate course page, you will need to do
four things: 1.) Rename the course 1 folder in the Site panel,
2.) Edit the Home page for your course (the index.htm file
located in the course 1 folder), and 3.) Change the current text
(Course 1) to reflect your own course, and 4.) Make the course
text you’ve added a link to the separate course page.

step 1. Rename the course 1 folder in the Site panel:
a. From the Site panel, right-click on the folder named course 1, choose Edit from
the context menu and choose Rename. Enter a name that reflects the new course
you will be adding.
b. When the Update Files window appears, click the Update button (very
important in order to maintain any link you may have in your site).
step 2. Edit the Homepage for your course
a. From your course 1 folder (or whatever you renamed it to), double-click the
index.htm file to open it.
b. Edit the file as you did with your Faculty Homepage.
c. Save & preview your course Home page.
step 3. Change the Course 1 text on your Home page:
a. From your Faculty Home page, rename the current course text (Course 1) to
reflect your own course.
b. To add more courses, hit return after your first bullet to create a second bullet.
Type text for the second course.
step 4. Make the course text you’ve added a link to the separate course page:
a. From your Faculty Homepage, highlight the course label:

b. Using the Point-to-File icon ( ) located to the right of the Link textbox in the
Properties panel, click and drag over to the appropriate course Home page in the
Site panel (hit the Tab key to see your link)


c. Save & preview your file, making certain that the new link works.

Highlighted text

ADDING ADDITIONAL COURSES
If you have additional courses to include, you will need to create new course folders from the
Site panel.

To create new course folders:

step 1. From the Site panel, right-click on your existing
course folder, choose Edit from the context menu
and choose Copy.
step 2. Right-click again, choose Edit from the context
menu and then choose Paste.
step 3. Follow the process on pages 17 and 18 in order to
set up a new course page and add a link on your
Faculty Home page to your added course(s).
step 4. To add additional courses, re-visit the above steps.

EXERCISE 4 Editing Course Information
1. Edit your Faculty Homepage (index.htm) to include either basic course
information for your courses or links to your courses.
2. If you are including links to separate course pages, edit those course pages.
3. Save your changes in Dreamweaver.
4. Preview your Home page in a browser (File > Preview in Browser). Be certain
to test your links!


Copying Your Faculty Web Site to a Web Server
At this point, your Faculty Web site (the pages you have been working on during this workshop)
is located on your computer. However, the whole point of a Web page is to enable the entire
world to see what you have created! For the entire world to see your Web site, you will need to
copy your files to a server or Web server. To copy files to a Web server, you will need access to
an FTP program (FTP stands for File Access Protocol).

Sac State currently supports four different FTP programs: WS_FTP (PC utility program), Fetch
(Mac utility program), FrontPage FTP (Web Editor), and Dreamweaver FTP (Web Editor). To
transfer your Faculty Web site files, we will be using Dreamweaver FTP (Dreamweaver’s built-in
FTP utility).

TIP : If you do not organize your site files on the Web server the same as they
are organized on your local computer, hyperlinks will not work and images will
not display properly.

How to Define an FTP Connection
USING THE SITE MENU
step 1. Make sure your site is defined within Dreamweaver. Please refer to page 11 for
detail instructions on defining a site.
step 2. After your site is defined select Manage Sites from the Site menu.
step 3. When the Edit Sites window appears click your site name and click Edit.
step 4. In the Site Definition dialog box click
the Advanced tab, select the category
Remote Info and then choose FTP from
the Access pull-down menu (shown on
the right).

step 5. Enter the information that pertains to
your specific Web account. Refer to the sample image and table below.


step 6. Select OK to accept your changes or select Cancel to not accept your changes.
step 7. Select Done to close the Edit Sites window.

TYPE OF WEB REMOTE INFO TEXT TO USE
ACCOUNT LABEL
FTP Host www.csus.edu
indiv/INITIAL/SACLINKID
* INITIAL = the first letter of your last
name

Host Directory * SACLINKID = your SacLink ID
For example, if the name was Miles
Faculty Web Account
Davis with a SacLink ID of “davism”
the directory would be
“indiv/d/davism”
Login your SacLink ID
ALWAYS LEAVE THIS FIELD
Password EMPTY, when you connect it will ask for
a password.
FTP Host ftp.saclink.csus.edu
Host Directory web

Saclink Web Account Login Your Saclink ID
ALWAYS LEAVE THIS FIELD
Password EMPTY, when you connect it will ask for
a password.
FTP Host
Departmental Web Get this information from your
Host Directory
Account Department IT personnel.
Password


How to Copy Files Using FTP
step 1. To see both local files and remote files (Web account) click the Expand/Collapse
button ( ) on the Site panel toolbar. All Dreamweaver windows will now close,
except for the expanded Site panel window (see example below).

step 2. Click the connect button ( ) on the Site panel toolbar to connect to your Web
account.

step 3. Enter your password and click OK. You should now see a list of files in the Site
panel corresponding to your Web account under the section Remote Site.

step 4. Select the files or folders to copy by clicking on them with the mouse pointer.

a. Drag the files and folders to the other area. Be sure to pay close attention to where you
place your files. You can click and drag files and folders from the Remote Site area
to the Local Files area or from the Local Files area to the Remote Site area.
b. Put Files ( ): Use the blue arrow pointing up button to copy files from the
Local Files area to the Remote View area (the Web account). Note: It will
preserve the file/folder organization and may ask you to copy the dependent files
(images on those Web pages).
c. Get Files ( ): Use the green arrow pointing down button to copy files from the
Remote View area to the Local Files area (the Web account). Note: It will
preserve the file/folder organization and may ask you to copy the dependent files
(images on those Web pages).

To return to the main Dreamweaver window click the Expand/Collapse button ( ) on the Site
panel toolbar. This will collapse the Site panel into a single view, with the other Dreamweaver
panels now appearing on your screen.


RESOURCES

Faculty / Staff Resource Center
Located in ARC 3012. Assistance available on walk-in basis.
Open Lab on Fridays, 1-4 pm (Fall, Winter, Spring)
Open Lab on Thursdays 1-4 pm (Summer only)
FSRC Website
http://www.csus.edu/uccs/fscenter/

Getting Help
University Help Desk
(916) 278-7337 or helpdesk@csus.edu

Academic Technology Consultants
http://www.csus.edu/atcs/contact.htm

Help Desk - Problem Reports & Contact Information
http://www.csus.edu/uccs/helpdesk/contact.stm

Training Requests
training@csus.edu

Campus Resources
Training
http://www.csus.edu/training

Training Handouts
http://www.csus.edu/training/handouts

Online Tutorials
http://www.csus.edu/atcs/tools/tutorials.htm

Educational Tools
http://www.csus.edu/atcs/tools

Accessibility at Sacramento State
http://www.csus.edu/accessibility


Books
Dreamweaver MX 2004 Bible by Joseph Lowery

Dreamweaver MX 2004 for Dummies by Janine Warner, Susannah Gardner

Macromedia Dreamweaver MX 2004 Hands-On Training by Garo Green

Teach Yourself Visually: Dreamweaver MX 2004 by Janine Warner, Susannah Gardner

HTML for the World Wide Web, Fifth Edition, with XHTML and CSS: Visual QuickStart
Guide by Elizabeth Castro and published by Peachpit Press

Teach Yourself Visually HTML by Ruth Maran and published by John Wiley & Sons

Don’t Make Me Think by Steve Krug – a common sense approach to Web usability

Web Style Guide by Patrick J. Lynch, Sarah Horton

Web Resources
Checklist for rating Web sites
http://www.cyberbee.com/design.pdf

Criteria for evaluating Web pages
http://www.library.cornell.edu/olinuris/ref/webcrit.html

Review of good and bad Web design
http://www.webpagesthatsuck.com

Web design style
http://www.webstyleguide.com


Faculty web page

More Related Content

Viewers also liked (20)

Similar to Faculty web page (20)

Faculty web page