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://net2.com/nvu/download/nvu-1.0-win32-full.zip
• Download MAC version from:
• http://bluegriffon.org/freshmeat/1.5.2/bluegriffon-1.5.2.mac.dmg
• Download other versions from:
http://net2.com/nvu/download.html
• Download the ZIP file to your Desktop, or press “open” to
install
14
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 ECE, MAE, EMSE, 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 weeks 2 and 5
Class Schedule (This semester or next semester)
Personal (Major/Interests/Photo); can be deleted after the presentation.
Major and Its Description
Links 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 on Dec. 7th
NOTE: All presentations MUST be done from the web page. Large videos may
be an exception. (We recommend uploading videos to YouTube for easy
access)
•
NOTE: This is the suggested assignment for your work during the lab.
However, please refer to the project presentation and report guidelines
for the detailed list of required content for your webpage.