Faculty web page

Faculty Web Site

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


A server (or “Web server”)

Web pa(HTMLon a ser

A single Web page viewed in a browser

ges ) stored ver

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.

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.


In Browser… index.htm

images

banner.jpg

icon.gif

root folder

Internet Explorer (www.microsoft.com )

Mozilla Firefox ( www.mozilla.org )

S

N ny r,

afari (Mac + PC) ( www.apple.com )

ote: A visitor can customize madisplay features of a browseincluding:

▪ background color ▪ font ▪ font size ▪ text and link colors, and ▪ whether or not to download

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.

http://www.microsoft.com/

http://www.mozilla.org/

http://www.apple.com/


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

http://www.csus.edu/uccs/forms/webserver

http://webpages.csus.edu/

http://www.csus.edu/webct/webct_account.stm


week1

week2

index.htm images

I

icon.gif

wk1_lesson2.pdf

wk2_lesson1.pp

Your Web site A Web Server

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

Common Web Server Accounts at Sacramento State

ACCOUNT NAME

WHO CAN REQUEST

AN ACCOUNT

HOW TO REQUEST AN ACCOUNT

Fa Facuculty Web account

lty only Fill h

out the form at ttp://www.csus.edu/uccs/forms/webserver

Wacu(li

Fill h

ebCT course F lty, staff

mited) out the form at ttp://www.csus.edu/webct/webct_account.stm

Sa Facust

Follha

cLink Web account

lty, staff & udents

ow the instructions at ttp://www.csus.edu/saclink/web/ to activate your ccount.

D acuRefe

Tb

epartmental Web account

F lty, staff r to your department or college Information echnology Consultant to find out what accounts may e available.

root folder

banner.jpg

wk1_lesson1.htm

http://www.csus.edu/saclink/web/

http://www.csus.edu/saclink/web/

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.

We s

ur

recommend that the structure of your Webite include:

1. A root folder that contains the Web site.

2. A Web page entitled index.htm (or index.html) that resides within the root folder to represent the default homepage for the Web site.

3. An images folder that contains the graphics, illustrations, images and photographs used in your Web pages.

4. Additional folders for organizing yocontent.

root folder

index.htm

images

banner.jpg

icon.gif

wk1_lesson1.htm

wk1_lesson2.pdf

week1

week2

wk2_lesson1.ppt

A W

typical eb site

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.

step 2. Save & Preview the file.

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. step 2. Save & Preview the file.

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)



Highlighted text

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

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 ACCOUNT

REMOTE INFO LABEL

TEXT TO USE

FTP Host www.csus.edu

Host Directory

indiv/INITIAL/SACLINKID

* INITIAL = the first letter of your last name

* SACLINKID = your SacLink ID

For example, if the name was Miles Davis with a SacLink ID of “davism” the directory would be “indiv/d/davism”

Login your SacLink ID

Faculty Web Account

Password ALWAYS LEAVE THIS FIELD EMPTY, when you connect it will ask for a password.

FTP Host ftp.saclink.csus.edu

Host Directory web

Login Your Saclink ID Saclink Web Account

Password ALWAYS LEAVE THIS FIELD EMPTY, when you connect it will ask for a password.

FTP Host

Host Directory Departmental Web Account

Password

Get this information from your Department IT personnel.


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 [email protected] 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 [email protected]

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


http://www.csus.edu/uccs/fscenter/

mailto:[email protected]

http://www.csus.edu/atcs/contact.htm

http://www.csus.edu/uccs/helpdesk/contact.stm

mailto:[email protected]

http://www.csus.edu/training/

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

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

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

http://www.csus.edu/accessibility

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

http://www.cyberbee.com/design.pdf

http://www.library.cornell.edu/olinuris/ref/webcrit.html

http://www.webpagesthatsuck.com/

http://www.webstyleguide.com/

Documents

Faculty web page