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:

1. Create a web directory under your name on the I drive.

2. Download a picture of your hobby into that new directory.

3. Create the following page:

4. Your name (in font size 7)

5. The name of your hobby ( in font size 3)

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

7. Save it as index.html in your new directory.

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

Exercise #2:

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.)