Web Design

Your Adelphi Web Site

www.adelphi.edu/~pe16132 (last name – first initial)
ftp address: panther.adelphi.edu/

Client / Server

You design your pages on your pc using some design tool
Ftp to send your pages to the internet
See them through a browser

your pc files - windows explorer
panther - ftp explorer
browse files on panther from your pc - IE, Netscape

Site vs. Page

Create a folder for your site
Put all your pages and pictures in your site folder
Default page will be index.html (some servers are different)

Design tools: -> creates html

Netscape Composer (free I think)
Front Page
DreamWeaver
Notepad entering HTML
Word
Excel
Power Point
Access

Ftp Tools:

WS/Ftp
FTP Explorer
Each design tool has its own
For front page, use their own; and for others it does not matter

Using Word:

Create a web home page.
Include a hyperlink to another web site. (Insert / hyperlink and click on world)
Save in a new folder as index.html (type html)

Upload to your web site:

FTP Explorer
Host Address: panther.adelphi.edu
Login: pe16132 (your username)
Password: type yours
Choose “connect”
Open My Computer also
Drag your html document to your web site.
See it using www.adelphi.edu/~pe16132 (your username)

Saving a page using your browser:

Navigate to site
View Source
File / Save As
Save all objects
View it in your browser to see whether you have it all
Must put it into the proper directories

Using Netscape Composer:

Start / Netscape Communicator / Netscape Composer
Choose profile public_machine and then “Start Communicator”
File / New
File / Save As
How to start with an existing page.

Netscape Structure

Menu
Toolbar
Formatting bar
(View shows all the bars)

Formatting text:

Same as for word, except:
Paragraph / Line Break (sometimes it does line break and sometimes paragraph)
Force line break with shift/enter
Font difficulties – choose one others will have & size limitations
Heading (just 1-6)
Lists
Alignment

Hyperlinks

Link / Target
Link Types
File
Web Page (navigate to site and copy in address)
E-mail (mailto: )

Images

Download pictures / copy word art / paint
Want .GIF or .JPG
To convert, use adobe acrobat, or any a graphics program – save as .gif or .jpg
(Transparent background needs .gif)
Insert image
Play with alignment
Alternate text
Can hyperlink on a picture click

Exercise #1:

Open Notepad

Type the following:

<HTML>

<BODY>

This is (your name) web page.

</BODY>

</HTML>

Save it as index.html

Open FTP explorer and upload it to your panther site.

View it in the browser.

For complexity: Add a hyperlink:

<a href=(your favorite site, including http)>this is my favorite site</a>

For more complexity, add an image

Note that </br> makes it nicer.

Exercise #2: Linking your picture to your blog:

1. Upload your picture to panther:

Exercise #2:

Create a web directory under your name on the universal share drive.

Download a picture of your hobby into that new directory.

Create the following page:

Your name (in font size 7)

The name of your hobby ( in font size 3)

A picture related to your hobby . (Align it to be next to the name of your hobby.)

Save it as index.html in your new directory.

Upload the page to your web site. (Don't forget the picture.)

Exercise #3:

Create a web site with the following pages:

Home page (containing your name and a link for personal and a link for business)
Business page (containing your name again, your major, your work experience - and in the future you would add links to good project work you did on the web.)
Personal page (containing whatever you want - as long as it is tasteful.)