Lab 1: Create a Personal Homepage

Transcription

1 Objectives: Lab 1: Create a Personal Homepage Understand the basics of HTML Create a personal website, if you do not have one Learn how to submit your assignments Preparation 1. Create a folder with the name Geog406_AdvGIS under My Documents. From now on, please save all your lab work for this course in this folder. You may create a separate folder for each lab and then save the materials in corresponding folders. 2. Have your university account ready You should have an account from the university, which allows you to check . If you still do not have one, contact ITR help desk at 1400 on campus or off campus. The Web Drive 1. What is the Web Drive? The Web Drive is an extra storage area that provides additional disk space for campus users who wish to store their desktop files and folders on a remote server and create a personal web page. For example, you can publish your web pages by a simple drag-and-drop action from your desktop computer. For more information on this please see 2. Mapping the Web Drive: PC Instructions 1. Go to Windows Explorer (My Computer) NOT Internet Explorer 2. From the Toolbar menu, click Tools > Map Network Drive. 3. From the Drive drop-down menu select "W" or whichever drive that has been designated for this purpose. 4. In the Folder field, type: \\webdrive\username NOTE: Replace "username" with your CSUN username. i.e. dlb Click the Finish button. 1

2 3. Mapping the Web Drive: Mac Instructions 1. From the blue apple menu bar, click on Go. 2. Click on Connect to Server. 3. In the Connect to Server window, type the location of the account that you wish to map. 1. The correct format for the path is smb://webdrive.csun.edu/username. 2. Replace "username" with your CSUN username. 4. Click the Connect button. 2

3 5. In the Authentication window, leave the Workgroup/Domain box blank. Type in your CSUN Username and Password in the boxes indicated. 6. Then click the OK button. 7. The icon for your web drive will appear on your desktop. Double click the icon to open and view the contents. 4. About the Web Drive A window listing your files and folders, including your public_html folder will be displayed in the My Computer window. You may copy, move, and delete files to and from this drive, the same way you use any window on your PC. The first time you map to the Web Drive you will see the files that currently reside in your campus account. Many of these files may not be familiar to you. Never delete files with which you are unfamiliar, as they may cause problems to you account. Ignore these files and simply use the drive to copy, move, organize and navigate through your files, folder and drives. Note: To activate your Web Drive the first time, you may need to change your password. Go to and change your current password. 5. Create a folder called public_html in your Web Drive Note: This step may NOT be necessary as you may already have a public_html folder on your Web Drive. Open My Computer Open your Web Drive If you do NOT have a folder named public_html, do the following: 1. Go to File New Folder 3

4 2. Name the folder public_html (the name should be exact and case sensitive. Do not try to be creative!) All your website related items should be stored in this public_html folder (Labs, projects, index.htm, images ). This is the only place that internet users can access. Create a homepage using MS Word *Note: If you already have a webpage or know how to create one using a different program (such as Macromedia Dreamweaver), please feel free to take that route. Just make sure the following information is included on your webpage. 1. Open Microsoft Word and create a file, which will be your HOMEPAGE (the first page once others find you on web). In this file, you should include at least the following information: Who you are? Your contact information: Telephone, address Your educational experience Your professional experience Your computer skills Also in this file, you should contain some information about this course, and make a link to the course website: 2. THIS IS IMPORTANT: Go to File Save As to save this file as a webpage type (you need to change the default type from Word Document to Web Page ). Name the file index (yes, every letter in lower case! Don t try to be creative here again!). Store this file in the public_html folder on your Web Drive. 4

5 3. MS-Word will automatically save the file with an extension htm. The homepage must be named as index and extension.htm will automatically added. Do not try to be creative here, as it is required by the protocol to use the name. However, other files linked to this file should be named differently and still they should be saved as single webpage under the public_html folder under your Web Drive. Later on, we will talk about how to make different kinds of links. 4. Type in your address in the homepage so that other people who are interested in your work can contact you. Your address will be automatically linked. If it does not work, highlight the place where you want to make the link to your address, and go to the Menu bar: Insert on the top of Word, choose Hyperlink, a window will pop up. Choose Link to Address on the left, and type in your address on the line: address. Then click on OK. 5. Make a link to a webpage of others First, you go to the desired webpage, make a copy of the web address, and then paste it into the place of the file wherever you want. If you do not want to show the webpage s address on your web, but just want to make the link. What you need to do is similar to what you did in Step 3. a) Highlight the text you want to make the hyperlink; b) Go to MS word menu Insert-Hyperlink; c) Open a web browser (Internet Explorer or Netscape) and open the page you want to make the link; d) Go back to the Insert hyperlink window, and you should see that the URL (the website address you just viewed) should be in the link. Click OK in the window, and you will see the text in the word document is highlighted. Click on the hyperlink and see what happens. 6. Insert a picture to the webpage First, you must have image file available. Go the menu bar Insert in Word, and choose Pictures, and then choose the sources. Remember to save the changes frequently. Now, your home page is ready. Congratulations!!! 5

6 7. Check your Homepage Go to (replace username with your CSUN user ID, initials followed by the numbers ex. and see if your webpage is running. IF YOUR WEBPAGE IS NOT WORKING AT THIS POINT, FOLLOW THE FOLLOWING STEPS. Check/Change permissions of files or folders Using Secure FTP (File Transfer Program). Note: If you are working in the GIS lab, you can skip the steps a-c, since the programs have been installed there. a. Go to the CSUN ITR website: log on using your CSUN User ID and password, NOT Geography User ID and Password. b. Download the Secure Shell (SSH) and Secure FTP program. c. Install the program at your HOME computer and you should see two icons on the desktop. and d. Launch the SSH Secure File Transfer Client program, and you will see the following interface 6

7 e. Click on Quick Connect and you will see the following window f. Set up the window as shown above, using your own CSUN User ID for User Name and then click Connect and you will be prompted to enter your password. g. Enter your CSUN account password, click OK and you will be brought back to the SSH window. On the right side of the window, you should see a folder for your webdrive. Double-click to open the webdrive folder so you can see the public_html folder. 7

8 h. Right click the public_html folder on the right side of the window, choose the property on the context menu, and you will see the following window. i. On the above window, make sure all the options on permissions are set up as shown. j. If the options for the public_html folder are set up correctly and your webpage is still NOT working, you may also want to check the permission options for all the files and folders stored under the public_html folder in your Web Drive, starting with the index.htm file to ensure that they are set up correctly. Congratulations! You should be able to view your website/homepage now. Go to (replace username with your CSUN user ID, initials followed by the numbers ex. and see if your webpage is running. *Note: If the webpage is still not working, I recommend contacting the ITR Help Desk at

9 C. Assignment 1. Create your homepage and make it as attractive as possible. It should contain the information listed above. 2. In addition, create two more html files; labs.htm and projects.htm. Instructions for labs.htm Give the file a title, something like Labs for Geog 406 Advanced GIS ; add a list with the first item as Lab 1, and link it to your homepage. See following example: Labs for Geog 406 Advanced GIS Lab1 Web design: welcome to my homepage * You are going to keep updating this file as you continue this course. Instructions for projects.htm Give the file a title, something like Course Projects for Geog 406 Advanced GIS. See following example: Course Projects for Geog 406 Advanced GIS Under construction! Save the labs.htm and projects.htm to the public_html folder in Web Drive. Link these two files to your Home Page: index.htm 1. Launch MS Word program and open index.htm from your public_html folder. 2. Somewhere in the file, type GEOG 406 Labs. 3. Highlight GEOG 406 Labs and go to Insert-Hyperlinks, in the space after Address, type in the following: Again you should use your own account name (not USERNAME!) 4. Click OK. The program should bring you back to the index.htm window. You should be able to see that GEOG 406 Labs is highlighted now (which indicates the hyperlink). 5. Do the same thing and add the hyperlink to your projects.htm. 6. Save everything. 9

10 Use Internet Explorer or Firefox to see if: 1. Your homepage works. 2. If the links to the labs/projects pages are work properly. 3. Make sure the link for Lab 1 on the labs.htm page sends you back to your homepage. D. In the future, you need to do the following for each assignment: 1) Create a webpage (say lab2.htm) for each lab, including answers to all questions and maps, etc. 2) Upload the htm file to the public_html folder on the server 3) Update the labs.htm file and create a link to the lab file (lab2. htm) 4) Upload the labs. htm file to your server (updates). ** I will check your assignments through your website ** E. For more information, review the following websites: On setting up your account: On using your csun Webmail: (If you have problems with this, call the ITR HelpDesk at ) 1. Set up a CSUN account, if you have not done so. To obtain a CSUN account, go to the website: 10

11 2. Follow link to How to Obtain a Campus Account, and read the information on the page carefully. 3. Set up Forward Service: If you do not want to check the CSUN account frequently, please set up the Forward service in your CSUN account and forward messages to an service you use frequently (Yahoo, Hotmail, Earthlink, Google ). To find information about how to set it up, go to and read information linked to Using Webmail Direct (Last item at the bottom on the left side). 11