WORKSHOP DESCRIPTION... 1 FACULTY WEB SITE... 2

Size: px

Start display at page:

Download "WORKSHOP DESCRIPTION... 1 FACULTY WEB SITE... 2"

Piers Cook
5 years ago
Views:

1 Faculty Web Site

3 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

4 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 Faculty / Staff Resource Center 22 Training & Tools enewsletter 22 Getting Help 22 Campus Resources 22 Books 23 Web Resources 23

5 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 : Spring 2009 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 highspeed series of networks.

6 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 highspeed 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 single Web page viewed in a browser A server (or Web server ) Web pages (HTML) stored on a server 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. Academic Technology and Creative Services : Spring 2009 Faculty Web Site 2

Internet Explorer (www.microsoft.com ) Safari ( www.apple.

org ) Note: A visitor can customize many display features of

and link colors, and whether or not to download images.

browser, the browser reads and interprets the HTML file and

If there are references to external files, such as images or

only contain references to the external files you do not

7 Internet Explorer ( ) Safari ( ) Mozilla Firefox ( ) Note: A visitor can customize many display features of a browser, including: 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. root folder index.htm In Browser images icon.gif banner.jpg Academic Technology and Creative Services : Spring 2009 Faculty Web Site 3

8 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 ( c. SacLink Request Form ( d. WebCT Request Form ( 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 [Adobe 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. 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: Dreamweaver, WS_FTP, Windows Explorer, Fetch, 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. Academic Technology and Creative Services : Spring 2009 Faculty Web Site 4

9 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 ACCOUNT NAME Faculty Web account WebCT course SacLink Web account Departmental Web account WHO CAN REQUEST AN ACCOUNT Faculty only Faculty, staff (limited) Faculty, staff & students Faculty, staff HOW TO REQUEST AN ACCOUNT Fill out the form at Fill out the form at Follow the instructions at to activate your account. Refer to your department or college Information Technology Consultant to find out what accounts may be available. Academic Technology and Creative Services : Spring 2009 Faculty Web Site 5

10 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 : Spring 2009 Faculty Web Site 6

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.

11 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. A typical Web site root folder index.htm images banner.jpg icon.gif week1 wk1_lesson1.htm wk1_lesson2.pdf week2 wk2_lesson1.ppt We recommend that the structure of your Web site 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 your content. Academic Technology and Creative Services : Spring 2009 Faculty Web Site 7

12 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. Academic Technology and Creative Services : Spring 2009 Faculty Web Site 8

Faculty Home page, with editable regions highlighted Course overview page, with editable regions highlighted The template consists of a main Home page (or

13 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. Academic Technology and Creative Services : Spring 2009 Faculty Web Site 9

14 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. Academic Technology and Creative Services : Spring 2009 Faculty Web Site 10

15 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 Adobe 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 subfolders. 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 : Spring 2009 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.

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.

16 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 : Spring 2009 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.

17 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 : Spring 2009 Faculty Web Site 13

18 Adding Details step 1. Add information under the following sections: Papers and Publications, Research Projects/Interests and Professional Associations, as desired. step 2. Add additional 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 : Spring 2009 Faculty Web Site 14

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.

19 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. step 2. Add an alternative text description to your image. This will allow users using assistive technology such as a screen reader, detect the image(s). Editing Course Information Currently, the template Home page lists one sample course under the Courses heading: Academic Technology and Creative Services : Spring 2009 Faculty Web Site 15

If you wish, add your own course(s), including basic course information if you desire.

separate course page for each course; each course page would include detail course information (possibly including a syllabus,

You might end up with something similar to this: INCLUDING BASIC COURSE INFORMATION ON THE HOMEPAGE (NO LINK) To include basic

Within the Courses section on your Homepage, replace the text reading Course 1 with your own course. step 2.

20 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. Academic Technology and Creative Services : Spring 2009 Faculty Web Site 16

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

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

21 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: Academic Technology and Creative Services : Spring 2009 Faculty Web Site 17

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

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.

22 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 previous 4 steps to set up your 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 Academic Technology and Creative Services : Spring 2009 Faculty Web Site 18

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.

For the entire world to see your Web site, you will need to copy your files to a server or Web server.

23 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. Academic Technology and Creative Services : Spring 2009 Faculty Web Site 19

24 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 Faculty Web Account Saclink Web Account Departmental Web Account REMOTE INFO LABEL FTP Host Host Directory Login Password FTP Host Host Directory Login Password FTP Host Host Directory Password TEXT TO USE 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 your SacLink ID ALWAYS LEAVE THIS FIELD EMPTY, when you connect it will ask for a password. ftp.saclink.csus.edu web Your Saclink ID ALWAYS LEAVE THIS FIELD EMPTY, when you connect it will ask for a password. Get this information from your Department IT personnel. Academic Technology and Creative Services : Spring 2009 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.

25 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 ( account. ) on the Site panel toolbar to connect to your Web 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. Academic Technology and Creative Services : Spring 2009 Faculty Web Site 21

26 RESOURCES Faculty / Staff Resource Center Located in ARC Assistance available on walk-in basis. Open Lab on Fridays, 1-4 pm (Fall, Winter, Spring); on Thursdays 1-4 pm (Summer only) FSRC Website - Training & Tools enewsletter To receive notification regarding online seminars, new technology/tools, and other online teaching, technology and learning events, fill out and submit the Training & Tools enewsletter request form - Getting Help University Help Desk (916) or helpdesk@csus.edu Academic Technology Consultants Help Desk - Problem Reports & Contact Information Training Requests training@csus.edu Campus Resources Training Training Handouts Online Tutorials Educational Tools Accessibility at Sacramento State Academic Technology and Creative Services : Spring 2009 Faculty Web Site 22

27 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 Criteria for evaluating Web pages Review of good and bad Web design Web design style Academic Technology and Creative Services : Spring 2009 Faculty Web Site 23

DREAMWEAVER QUICK START TABLE OF CONTENT

DREAMWEAVER QUICK START TABLE OF CONTENT 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