Shang Liu ENGL 202C Spring 2012

Page 1

Overview of Creating a Website

A website is a set of web pages containing media which include text, graphics, audio, video, etc. The following are three general steps of creating a website:

Step 1: Decide what you want on your website.

A blog? A photo gallery of your summer trip? you can start with one webpage and add more later.

Step 2: Create your webpages.

Once you decide your content, creating webpages is easy using beautifully-designed templates in iWeb.

Step 3: Publish your website on the internet.

Upload your website folder to a Penn State Server to make your website accessible on the internet.

Before You Begin

Depending on how many contents you already have, it takes about a few hours or days for you to finish this task. To follow the procedures, you need to have access to iWeb on a computer with a Mac operating system. If you do not own a Mac, you can go to a computer lab on campus to use a Mac. Locations of computer labs with Macs can be found in http://clc.its.psu.edu/labs/locations. It is recommended that you use the latest version of iWeb (iWeb 11). However, there should be very little variation between iWeb 11 and older versions. NOTE: Because this tutorial teaches you how to publish your website on a Penn State Server, you need a valid Penn State access account to perform this task. If you do not have one, you may choose to read only step 1 and 2.

Terms to Know
Browser: A type of software that you use to visit website. Common browsers in a Mac are Safari, Firefox, and Chrome. URL: It stands for Uniform Resource Locator, which is the address of a website (e.g. http://www.psu.edu). Widget: An application that is embedded in a web page. For example, Google Maps or YouTube video. Domain Folder: A term used to describe the folder which contains all your iWeb website data. Page 2

Step 1: Plan Your Website

Your first step is to decide what your website looks like. Do you want to create a travel journal, a photo gallery, a professional E-portfolio, or a combination of these? You do not have to decide every detail before you proceed because with iWeb you can easily modify your webpages at any time. There are a few themes and templates from which you can choose. So, setting up a well-designed website requires very little effort. A template is a page layout that suits to a specific purpose, such as About me. A theme refers to a stylistic look of a page. Themes in iWeb include formal, comic book, nightlife, etc.

Step 2: Create Your Website

At this point, you have an idea of what you want on your website. Now, lets start our journey! NOTE: If you make a mistake, you can reverse the actions by choosing Edit > Undo. 1. Once you launched iWeb, a pop-up window will let you choose a theme and template.

Figure 1 "iWeb Webpage Template"

2. Start with a Welcome page. The welcome page is the default template. 3. Click Choose. Now you have your first webpage.

Page 3

iWeb Interface

Figure 2 "iWeb Interface"

Add Text
Each template contains text boxes for titles, headings, and body. You will replace the alreadytyped text with your own text. You can also move, resize, delete, and insert text boxes to fit your content. To type your own text Double click the text and start typing.

Figure 3 "Type Own Text"

To move or resize a text box 1. Click the text to show the selection handles around the text box. 2. Click inside the text box and drag it to wherever you want.

Page 4

3. Click one of the handles to resize the text box. Experiment with different handles to see the difference.

Figure 4 "Move or Resize Text Box"

Add Graphics
1. Click Photos on the right column.

Figure 5 "Add Photos"

2. Select the photo you want. 3. Drag it to replace the existing pictures. You can also drag a photo from the desktop, or any folder on your computer and place it on your page. Adding videos and audio can be done using the same procedures as adding graphics.

Add Widgets
For example, to add a YouTube video to your webpage: 1. Click Widgets.

Figure 6 "Widgets"

2. 3. 4. 5.

Drag the YouTube icon to your page. Copy the URL of your video from your web browser. Paste the URL to the relevant box. Click Apply. Page 5

Add More Pages

1. Right click Welcome.

Figure 7 "Add Pages"

2. Click New Page. 3. Select the theme and template of your page. 4. Click Choose. Use your creativity and work on building the rest of your website!

Save Your File

1. After you are finished, click Publish Site.

Figure 8 "Publish Site"

2. A window like this will pop up. Select Continue. If you do not want to see it again, check Dont show again.

Figure 9 "Content Rights"

3. Select Local Folder in the Publish to option. Type your Site name. Click Choose to locate your folder.

Figure 10 "Save File"

4. Save your domain folder by clicking Publish Site at the bottom. Page 6

Sample Webpage

Figure 11 "Sample Page"

Continue to Explore iWeb

Now, you have been equipped with the fundamental tools to design webpages. You will probably want to further customize your web content, add more visuals, and try HTML Snippet to display special elements such as a viewer tracker that tells you how many people visited your website and where they are from.

Step 3: Publish Your Website

NOTE: To upload your website on the Penn State server, you must have a valid Penn State access account.

Applying for Web Space Account

1. Open a web browser and go to https://www.work.psu.edu/webspace/. This will take you to the application page for a Web Space Account. 2. Read the introduction and click on Take the Quiz. You will be required to log in using your Penn State user ID and password. 3. Take the quiz. You can take the quiz as many times as you want. 4. When you finish, click Submit button. If you get a passing score, your application for web space on Penn State server will be processed within three days. Once you are granted the access, you can begin to publish your website.

Upload Your Website

WARNING: It is your responsibility not to share any personal information that leads to identity theft. Think twice before uploading personal information such as your home address and phone number. Page 7

1. Open your web browser and go to the PASS Explorer site https://explorer.pass.psu.edu/. Login is required. PASS stands for Penn State Access Account Storage. It provides universally-accessible file storage space for students, faculty, and staff at Penn State. You are allocated initially 500 megabytes of online storage space. You have the option of increasing your storage to 10 gigabytes. 2. Once you have entered PASS, you will see a folder named [www]. Select it by clicking it.

Figure 12 "Upload Folder"

3. Click the button labeled Upload in the leftmost corner of this page. A window will pop up and you can upload your files.

Figure 13 "Choose Files"

4. Upload your folder by clicking Browse. Before clicking Upload, check the box underneath Auto Extract. 5. Click Upload. Congratulations! Now you have successfully published your website on the Internet. The link to your website should be http://www.personal.psu.edu/userid/foldername. Email the link to your parents and make them feel proud of you!

Page 8

Works Cited

Images cropped from iWeb: Figure 5-10. Images cropped from Penn State PASS Explorer: Figure 12-13. Images were borrowed from the following websites: Cover page picture: http://macslife.net/wp-content/uploads/2011/10/addcontent_img_20090106.jpg Figure 1-4: (Cropped) http://manuals.info.apple.com/en_US/iWeb_08_Getting_Started.pdf Figure 11: http://allaboutiweb.com/wp-content/uploads/2010/01/iweb_page.jpg

Page 9