Center for Faculty Development Website Builder

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

2. After the URL of , add the person¡¯s first and last name,

separated by a dot (as in his or her email account), i.e.



An example of a published faculty web site:

B. Website Builder Login

1. Main login page is at .

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 ¨C 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 ¨C

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 ¨C 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

 ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download