Faculty web page
Upcoming SlideShare
Loading in...5
×
 

Faculty web page

on

  • 279 views

 

Statistics

Views

Total Views
279
Views on SlideShare
279
Embed Views
0

Actions

Likes
0
Downloads
1
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Faculty web page Faculty web page Document Transcript

  • Faculty Web Site
  • WORKSHOP DESCRIPTION............................................................... 1 Overview 1 Prerequisites 1 Objectives 1FACULTY 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 21RESOURCES ....................................................................................... 22 Faculty / Staff Resource Center 22 Getting Help 22 Campus Resources 22 Books 23 Web Resources 23
  • WORKSHOP DESCRIPTIONOverviewYou will modify a Web page template that will become the Home page of your new Faculty Website. Your first page will contain basic information about you and your courses. If you have aWeb server account, you will be able to publish your completed site to the Web.PrerequisitesYou have experience editing Web pages using a Web editor such as Macromedia Dreamweaveror Microsoft FrontPage.ObjectivesParticipants 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 SITEWeb Design ReviewUnderstanding the World Wide WebThe 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 offiles and documents that are stored on these computers and written in some form of HyperTextMarkup Language (HTML) that tells browsers how to display information on the Web. Thecomputers that store the files are called servers because they can process or serve requests frommany users at the same time. Users access these HTML files and documents via softwareapplications called browsers. A server (or “Web server”) Web pages (HTML) stored A single on a ser ver Web page viewed in a browserWeb BrowsersA 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 invarious browsers. The University supports the browsers illustrated below, which can bedownloaded free from the company’s Web site.Academic Technology and Creative Services : Summer 2007 Faculty Web Site 2
  • 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 PagesWhen a Web page is opened in a browser, the browser reads and interprets the HTML file andformats the Web page for display. If there are references to external files, such as images ormultimedia, these files are downloaded from the server and displayed in the browser window. Itis important to note that HTML files are text files that only contain references to the externalfiles – you do not “embed” these files into the Web page. root folder index.htm In Browser… images banner.jpg icon.gifAcademic Technology and Creative Services : Summer 2007 Faculty Web Site 3
  • The Web Process at Sacramento StateThis 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 Web4. 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).Academic Technology and Creative Services : Summer 2007 Faculty Web Site 4
  • Web Server AccountsBefore 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 ServerCommon Web Server Accounts at Sacramento State WHO CAN ACCOUNT REQUEST HOW TO REQUEST AN ACCOUNT NAME AN ACCOUNTFaculty Web Fill out the form at Faculty only account http://www.csus.edu/uccs/forms/webserver Faculty, staff Fill out the form atWebCT course (limited) http://www.csus.edu/webct/webct_account.stm Follow the instructions atSacLink Web Faculty, staff & http://www.csus.edu/saclink/web/ to activate your account students account. Refer to your department or college InformationDepartmental Faculty, staff Technology Consultant to find out what accounts may Web account be available.Academic Technology and Creative Services : Summer 2007 Faculty Web Site 5
  • 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. Academic Technology and Creative Services : Summer 2007 Faculty Web Site 6
  • 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.jpgWeb 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. Academic Technology and Creative Services : Summer 2007 Faculty Web Site 7
  • Faculty Web Site: Getting StartedFaculty Web Site Template in a NutshellThe Faculty Web Site template consists of two parts. First, the Home page contains generalinformation about you and provides a way for potential students, current students andcolleagues to learn about you. Therefore, it’s important to publish the material that will bestrepresent you. Second, you can provide course information – either in the form of a shortdescription or a long description that includes a syllabus, calendar, and other information. Thetemplate is customizable, so you can modify it to your specific needs.Academic Technology and Creative Services : Summer 2007 Faculty Web Site 8
  • 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 highlightedThe 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. Academic Technology and Creative Services : Summer 2007 Faculty Web Site 9
  • The Site StructureBefore 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 orrename it you must edit the link pointing to that file. Another important aspect is that the Website 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 andsub-folders. The page we will be modifying is the file called index.htm in the root folder. If youhave a photograph of yourself, it’s best to create a folder called images, and then add yourphotograph 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.Academic Technology and Creative Services : Summer 2007 Faculty Web Site 10
  • Editing the TemplateWe are now ready to edit our Home page on our personal computer. After we change thepage(s), you will have the option of sending the Web site files to your Web server space, ifapplicable. We will be using Macromedia Dreamweaver to edit the template Web pages.Define Your Site in DreamweaverBefore creating or editing the Faculty template (or any Web pages), you can and should haveDreamweaver help you manage your Web (HTML, XHTML) files, original documents (MSWord, 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.Academic Technology and Creative Services : Summer 2007 Faculty Web Site 11
  • 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:Academic Technology and Creative Services : Summer 2007 Faculty Web Site 12
  • ▪ 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).Academic Technology and Creative Services : Summer 2007 Faculty Web Site 13
  • 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).Academic Technology and Creative Services : Summer 2007 Faculty Web Site 14
  • 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 youwill 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 eitherGIF or JPG format and that the width does not exceed 150 pixels. We recommend that youuse 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 InformationCurrently, the template Home page lists one sample course under the Courses heading:Academic Technology and Creative Services : Summer 2007 Faculty Web Site 15
  • 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 (NOLINK) 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. Academic Technology and Creative Services : Summer 2007 Faculty Web Site 16
  • INCLUDING DETAIL COURSE INFORMATION (USING A LINK TO ASEPARATE PAGE)To edit the current Course 1 text to reflect your own course orcourses and link to a separate course page, you will need to dofour things: 1.) Rename the course 1 folder in the Site panel,2.) Edit the Home page for your course (the index.htm filelocated in the course 1 folder), and 3.) Change the current text(Course 1) to reflect your own course, and 4.) Make the coursetext 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)Academic Technology and Creative Services : Summer 2007 Faculty Web Site 17
  • c. Save & preview your file, making certain that the new link works. Highlighted textADDING ADDITIONAL COURSESIf you have additional courses to include, you will need to create new course folders from theSite 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!Academic Technology and Creative Services : Summer 2007 Faculty Web Site 18
  • Copying Your Faculty Web Site to a Web ServerAt 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 entireworld to see what you have created! For the entire world to see your Web site, you will need tocopy your files to a server or Web server. To copy files to a Web server, you will need access toan 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). Totransfer your Faculty Web site files, we will be using Dreamweaver FTP (Dreamweaver’s built-inFTP 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 ConnectionUSING 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.Academic Technology and Creative Services : Summer 2007 Faculty Web Site 19
  • 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. PasswordAcademic Technology and Creative Services : Summer 2007 Faculty Web Site 20
  • 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 Sitepanel toolbar. This will collapse the Site panel into a single view, with the other Dreamweaverpanels now appearing on your screen.Academic Technology and Creative Services : Summer 2007 Faculty Web Site 21
  • RESOURCESFaculty / 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.eduCampus 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/accessibilityAcademic Technology and Creative Services : Summer 2007 Faculty Web Site 22
  • BooksDreamweaver MX 2004 Bible by Joseph LoweryDreamweaver MX 2004 for Dummies by Janine Warner, Susannah GardnerMacromedia Dreamweaver MX 2004 Hands-On Training by Garo GreenTeach Yourself Visually: Dreamweaver MX 2004 by Janine Warner, Susannah GardnerHTML for the World Wide Web, Fifth Edition, with XHTML and CSS: Visual QuickStart Guide by Elizabeth Castro and published by Peachpit PressTeach Yourself Visually HTML by Ruth Maran and published by John Wiley & SonsDon’t Make Me Think by Steve Krug – a common sense approach to Web usabilityWeb Style Guide by Patrick J. Lynch, Sarah HortonWeb 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.comAcademic Technology and Creative Services : Summer 2007 Faculty Web Site 23