Transcript PC Version
Creating and Publishing Your own web site PC Version SEAS 001 Professor Ahmadi Project Overview • Create a basic web page using a “text editor” • Publish web page to GW school server • Edit web page using an open source HTML editor • Create several links from basic web page to: – Your ECE001, MAE001, APS001 presentation – Your resume – Your schedule • Present web site to SEAS 001 classmates Overview of Creating a web site STEP2: Upload “publish” web page to web server (at GWU: cobweb.seas.gwu.edu) STEP1: Create web page on your personal workstation STEP3: Web page can now be viewed anywhere on the Internet Create Folder to store web pages on Local PC • Open up “My Computer” icon • Look for the “T:” drive • Create a Folder called: web site Do this by going to “File->New Folder” If you do not have a “T:” drive, simply use the “C:” drive • You will save all your web related work in this folder. • With the T: drive, you can login to any seas machine and see your web site folder Creating Main Web page • The main web page must be called: index.html • It is a simple text file, we can use any text editor to create • On a PC, we use Notepad to create this file, DO NOT use an editor like MSWord Writing HTML • HTML is the language web browsers like the Internet Explorer, Firefox, or Safari can read • It uses opening and closing “TAGS” to identify different sections of a web page. • Example, to mark the TITLE of a web Closing TAG page: <title>Main web page</title> Opening TAG Writing HTML • Open Up Notepad type what you see below • Save the file as: T:\web site\index.html • Open a web browser and view the file by typing: T:\web site\index.html Writing HTML – Adding a Link • To add a “Link” to a web page, we use the following TAG sequence: <a href="http://www.gwu.edu">GWU web site</a> • This will add “HYPERLINK” to your web page T:\web site\index.html Uploading web page to web server • To “publish” our web page, we transfer the file: index.html to the GWU SEAS web server • To do this, we use a “Secure File Transfer Client” or SFTP • The SEAS’s SFTP server is called: cobweb.seas.gwu.edu • Your seas username and password are required to login • • • • • • • For Home, free SCP clients are available from: PC users: http://www.seas.gwu.edu/~seas001/fall07/downloads/winscp405.exe http://winscp.net/eng/download.php Mac users: http://www.seas.gwu.edu/~seas001/fall07/downloads/Cyberduck-2.8.1.dmg http://cyberduck.ch/ Open up SFTP Client Connect to web server 1. From Desktop, click on: SSH Secure File Transfer Client 2. Once the SFTP Client opens, Click on the “QUICK CONNECT” button Host: cobweb.seas.gwu.edu Username: your seas username, then connect! Uploading web page to web server • Type in T:\web site in the box at the top • Drag index.html to public_html folder YOUR PC SEAS Server: cobweb.seas.gwu.edu Viewing your web site • Open a web browser, and open the web address: • http://www.student.seas.gwu.edu/~tfarmer/index.html index.html is now published on the Internet Any file placed under the folder: public_html will be published on the Internet, so anyone will Be able to view them! Change: tfarmer to your seas username HTML Editors • Manually typing HTML files is tedious • To produce more interesting web pages, quickly, an HTML editor is needed • There are many different commercial HTML editors: Dreamweaver, Microsoft Front Page • For this class, we will use an “open source” editor called: N View • We must download and install this editor on your local workstation Download Open Source HTML Editor • Download PC version from: http://www.seas.gwu.edu/~seas001/fall07/downloads/nvu-1.0-win32-full.zip • Download MAC version from: http://www.seas.gwu.edu/~seas001/fall07/downloads/nvu-1.0-mac.dmg • Download other versions from: http://nvudev.com/download.php • Download the ZIP file to your Desktop, or press “open” to install Install Open Source Editor on PC • After downloading… • Double click on: nvu-1.0-win32-full.zip • Extract all files to c:\temp\nvu •Click NEXT… •this takes about 30 seconds Startup Editor • Run file: c:\temp\nvu\nvu-1.0\NVU.EXE Using the HTML Editor • Open the file: T:\web site\index.html Using the HTML Editor • index.html is shown as it would be in a web browser • You no longer need to use “TAGS”, one can simply enter text or graphics • By clicking on the “Source” tab, the HTML code can be viewed Creating Schedule web page • Create a new page • Save it as: T:\web site\schedule.html Linking index.html to schedule • Switch back to index.html • Type “My Schedule” and highlight the text • Click on the “LINK” button • Save the changes Link to schedule.html 1. Click on “Choose File” 2. Choose the schedule.html file, then click open 3. Click on OK when done Links • Links can be to: – 1) Another web page – 2) Another web site – 3) Any type of file • Example: a power point presentation, document, excel file, movie file, etc. • The link we just created is an example of linking index.html to another “file” called: schedule.html Update Schedule Page • Switch back to your “schedule” page • Use the “Table” icon to create a schedule similar to the one on the left • Save the changes when have finished making changes • Click on the “Source” tab to see the HTML code for the table Publish Schedule web page • Using the SFTP client, upload index.html and schedule.html to public_html • Any changes you make to the files on your PC must be “re-uploaded” to publish the changes To Do During Lab • • • • • • • • • • • Create a page called: resume.html – If you already have a resume, download it to the T:\web site folder Link resume.html to your index.html page Create a power point presentation describing your ECE001, MAE001, APS001, etc. project – Create a link from index.html to your presentation file Add your Matlab results in the form of a word document from the SEAS matlab project from week 3 Class Schedule (This semester or next semester) Personal (Major/Interests/Photo); can be deleted after the presentation. Major and Its Description Link to: – – – – Department web site Student Activity Groups Professional Associations Hobbies/Interests Customize your index.html (Professional Look) Publish all the above files to your web site Be prepared to present your web site, and power point presentation in two weeks. NOTE: All presentations should be done from the web page. Large videos may be an exception.