Center For Faculty Development Website Builder - San Jose State University

Website Builder Tutorial Center for Faculty Development Website Builder For Creating Faculty Web Sites Workshop Materials Developed by W. Mei Fang Contents A. Search for Faculty Web Sites Created in Website Builder 2 B. Website Builder Login 2 C. User Settings 2 D. General Features and Editing Functions 3 E. Specific Information about the Modules 6 F. 7 Publishing Your Web Site G. Helpful URLs for Using Website Builder Center for Faculty Development & Support Page 1 of 8 8

A. Search for Faculty Web Sites Created in Website Builder 1. Search for published faculty web sites, go to http://www.sjsu.edu/people/. Or 2. After the URL of http://www.sjsu.edu/people/, add the person’s first and last name, separated by a dot (as in his or her email account), i.e. http://www.sjsu.edu/people/firstname.lastname/ An example of a published faculty web site: B. Website Builder Login 1. Main login page is at http://websitebuilder.sjsu.edu/. 2. Use your SJSUOne account to login. (SJSUOne account is the same account that you would use for your Google Mail, MySJSU, etc.) C. User Settings 1. After your successful login, the Website Builder’s Home appears. Developed by Workshop Facilitator: Wai Mei Fang, CFD Page 2 of 8

2. Click on the wrench icon of Settings in upper right hand corner of the authoring navigation. There are three groups of options in Settings. Make sure you click Save and Exit after you adjusted your Settings. a. Authoring Environment: By default you are in the Basic Mode. This mode is accessible for users with mouse manipulation challenge and visual impairment. Select the Enhanced Mode to enable the icon-based, rich text editor XStandard and drag & drop options. Click the Download XStandard plug-in link to install plug-in. b. Delete Confirmation: Select the box if you want to be reminded every time when you delete an item during editing. c. Publications & Presentations Entry Method: There are two methods to enter the information of your published works. i. Form-based Entry method – Just enter the information as directed in the form and the information will be formatted in a prescribed layout. ii. Open Text Field method - Just copy and paste your list of published works in XStandard’s rich text editor and format as desired using the editor. The data in either input method are NOT transferrable. D. General Features and Editing Functions 1. Select which web site module(s) a. There are six modules with prescribed headings in your Faculty Web Site – Homepage (mandatory), Course Publications & Presentations, Research & Scholarly Activities, Professional & Service Activity and University Experts. Developed by Workshop Facilitator: Wai Mei Fang, CFD Page 3 of 8

b. If you want to create pages with your own headings, select the Custom Webpages module and customize. c. For more information about the modules, go to E. Specific Information about the Modules in this document. 2. Get to know the basic types of editing function available among all modules All modules in this web site offer a form-based text entry method/interface. Here are the typical features or functions in this method: a. Text field: A rectangle box that accepts short text input. Just click the field and type. b. Red asterisk: Items with a red asterisks mean they are required to be filled in before you can save or continue to other pages. c. Radio button: Round or square clickable icons to indicate your preference. d. Blue button: Rectangular clickable icon with white text label and blue background, when clicked it will perform the function as indicated in the text label. For examples the function/label could be: Add a Degree, Add A New Course, Save & Exit, Upload Document, Add Link, etc. e. Dropped-down menu/Combo box: A rectangle text icon with a down arrow on the right; when clicked, it collapses into a scrollable list and displays a list of selections. f. Green pencil icon: This green icon appears next to editable items on your page. Click to edit the contents of the item. g. Red X icon: This red icon appears next to items that could be removed. Click to delete item. h. Hand icon: When the Enhanced Mode in your Settings is selected, the hand icon will appear next to items in a list and you could drag and drop to rearrange the order. i. Arrow icon: When the Basic Mode in your Settings is selected, the arrow icon will replace the functions of the Hand icon. Click the up and down arrows to rearrange items in a list. 3. Edit text contents with XStandard – the rich text editor plug-in a. After enabling this function in your Settings, you will see the following editor appear in your pages where text input is offered. Developed by Workshop Facilitator: Wai Mei Fang, CFD Page 4 of 8

b. To apply the formatting functions in the toolbar, first highlight your text before clicking the icon with your desired function. c. You can only insert an image that exists already on the Internet. d. You can apply heading styles to your text by selecting from the dropped-down menu of styles. e. Note: If you did not install the XStandard plug-in or selected the Basic Mode in Settings, you will only see a rectangle text box. To format your text, you will need to use HTML, a web page authoring programming language. f. Compatibility with browsers i. Windows: Internet Explorer, Firefox ii. OS X 10.4 and 10.5: Safari, Firefox iii. OS X 10.6 & above: Current version of XStandard (version 2) is NOT supported. 4. Upload a document (image, text, etc.) a. Click the Browse button to search for your file. b. Create a meaningful text label for the file in the text field. c. Click the blue Upload Document button to insert file. d. If the upload is successful, the uploaded file(s) will be displayed in a list below the Upload Document button, along with the file size and file type. 5. Add a link a. Copy the URL from your desired web site and paste in the Insert Link URL field. b. Create a meaningful text label in the text field for the web site such as the web site’s name. c. Click the blue Add Link button to insert the link to your page. 6. Save & Preview a. Each web page in the editing mode has Save & Preview buttons on the top and bottom. Click to preview how the data would appear in the actual published web page layout. b. To return to the editing mode from the preview mode, click the link label “Back to Website Builder” in the top or bottom blue banner. Developed by Workshop Facilitator: Wai Mei Fang, CFD Page 5 of 8

E. Specific Information about the Modules 1. Homepage a. There are five parts in Homepage: Contact, Education, Licenses & Certificates, Bio and Links. (See the image of a typical Homepage in A. Search for Faculty Web Site.) They have a form-based entry method for your data. b. The basic information in Contact will be visible once you publish your site. It is mandatory. However you could decide for including the other parts. c. The text fields of your last name, SJSU email, SJSU phone number, job title and department cannot be removed but you could add other preferences when the options are available. d. If you do not want an image in this page, a campus photo will be inserted by default. e. The sub heading labels will not appear if you do not have any information for that headings, except for headings of the mandatory text fields that were mentioned earlier. f. Education will include automatically your highest degree from HR that you could override by selecting the Inactive radio button or formulate a list of degrees by using the Add a Degree function in addition to or replace the HR information. g. Links in the Homepage usually are web sites that are macro and on-going. For example web sites relating to all your courses or discipline, your department, professional societies, research interests, etc. 2. Courses a. Courses is a module that could consist of one or more course pages. b. Even if you have only one course, you will need to click the Add a New Course button for your course contents and use the Active or Inactivate radio buttons in the course list to control the visibility status for the public. c. In each course page, you are required to input the Course Name, Course URL, and Days & Times. For the Course ULR, you only need to insert unique information about your course in the last component (text field) of the Course URL such as the course code and section number. Use lower cases and insert NO space between words. Please refer to the example below the URL. d. You have three Course Topics as sub units on this page already added for you: Presentations, Course Documents and Online Resources. You can upload documents, links, text, etc. in the spaces of Course Topics. You can also add or delete course topics, customize the titles, control the visibility status of the topics with the Active or Inactive radio buttons. 3. Publications & Presentations a. In this module, you can list your published works by using one of the two data entry methods that you could select in Settings – Form-based or Open text field. Please refer to C. User Settings item 2 for detials. If you use the Open text field method, it is BEST to save your text in a rich text document format first before pasting the text in XStandard. The data in either entry method are NOT transferrable. b. Below is an example of the Form-based entry method in edit mode and published/preview mode. Developed by Workshop Facilitator: Wai Mei Fang, CFD Page 6 of 8

4. Professional & Service Activity a. This module, like the Course module could consist of one or more pages. Just add a new page for each activity using the form-based entry method/interface. 5. University Experts a. This module has only one page and it serves as the link between the experts at SJSU and the public media. b. This module populates your Contact information from your Homepage automatically. In addition , it lets you provide descriptions of your expertise areas. 6. Custom Webpage a. Unlike the other modules with prescribed headings, this Custom Webpage module could consist of one or more pages that you could create with your own headings. It also has a form-based entry method/interface like the rest. You can use the Active or Inactivate radio buttons in the page list to control the visibility status for the public. b. The headings of the pages that you create in this module will appear following the other modules on the second row in your web site’s top navigation after they are published. F. Publishing Your Web Site 1. Click on the blue flag icon of Publish in the upper right hand corner of the authoring navigation and the Publish Your Site page appears. 2. The modules and their content items are listed alphabetically in Publish Your Site. 3. By default as a new user, your site is Inactive until you click Activate and Publish. But don’t publish yet. Check your visibility status first. Developed by Workshop Facilitator: Wai Mei Fang, CFD Page 7 of 8