Web site design management
This presentation is the property of its rightful owner.
Sponsored Links
1 / 26

Web Site Design & Management PowerPoint PPT Presentation

  • Uploaded on
  • Presentation posted in: General

Web Site Design & Management. Class Two. Attendance Questionnaire Setup/task Homework Review Screenshots Lists/Nested Lists. Home Page Links Images Assign Next Week’s Homework. Agenda. Setup. Setup your computer Notepad, ftp Log in to FTP

Download Presentation

Web Site Design & Management

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript

Web site design management

Web Site Design & Management

Class Two





Homework Review


Lists/Nested Lists

Home Page



Assign Next Week’s Homework




  • Setup your computer

    • Notepad, ftp

  • Log in to FTP

  • Make a folder in your homework/class01 folder named fixed

  • Make another folder in your “root” directory named inclass, put a folder in that named class02

  • Let me know when you are done and I’ll check it off.

Homework tips

Homework tips

  • naming conventions

    • firstpage.html or first-page.html

  • Missing tags don't always make it "render" wrong. Why and why should you care?

Homework tips1

Homework tips

  • Stuff outside of <body> tag.

    • All things visible on the "canvas area" of the browser should be encased in the body element

  • To rename a file or folder

    • Select, rename (F2 or right-click)

Homework tips2

Homework Tips

  • Remember to close your preview your file. This will help you find your errors

  • Open and close tags properly.

    • Start and close at the same time

  • What did I do?Forbidden listing

Home page

Home Page

  • No home page, and you’ll see either

    • Forbidden or

    • A directory listing.

  • Home page is named

    • index.html

      • (most of the time)

    • default.htm

      • (Microsoft server. We’re not using this)

Fix stuff

FIX Stuff:

  • See your assignment

  • Fix the file(s) folders and upload it with the proper name to the “fixed” folder in homework/class01



  • Unordered Lists

  • Ordered Lists

  • Nested Lists

Unordered lists

Unordered Lists

  • Unordered Lists resemble bullet lists.

  • The <ul> … </ul> tags encase list items.

  • The <li>...</li> tag creates items with a default bullet type of disc.

Unordered lists1

Unordered Lists


<li> Kick Off </li>


The <ul> … </ul> tags

encase list items.

Unordered lists2

Unordered Lists

<li> Kick Off </li>

<li> Field Goal </li>

<li> Extra Point </li>

<li> Punt </li>

The <li> tag creates

list items.

Ordered lists

Ordered Lists

  • Ordered Lists use a ranking principle.

  • The <ol> … </ol> tags encase list items.

  • The <li>... </li> tag creates items with a default decimal ordering.

Ordered lists1

Ordered Lists


<li> Arsenic and Old Lace </li>


Ordered list type attribute

Ordered List: type Attribute

  • The type attributes changes the ordering.

  • Available types are:1 (Decimal: default) A (Uppercase) a (Lowercase)I (Uppercase Roman)i (Lowercase Roman)

  • type can be used with the <ol> or <li> tags.

Nested lists

Nested Lists

Unordered lists can be placed inside ordered lists.

Nested lists1

Nested Lists

Unordered lists can be placed inside definition lists.



  • Puts the “link” in hyperlink

  • Gets you from one place to another!!

  • Make a simple link from the class index page to your home page.



  • By default, all links are underlined.

  • IE uses blue for unvisited links, green for visited.

  • Netscape uses blue for unvisited links, purple for visited.

The http protocol

The http Protocol

  • http:// stands for HyperText Transfer Protocol.

  • This protocol is commonly used for web pages.



<a href = http://www.prenhall.com/”>

Prentice Hall</a>

The <a href>…</a> tags are used to encase a link.

Absolute links

Absolute Links

  • An absolute link contains the full URL of the page:

  • For example,

  • <a href = “http://www.ebay.com/”> Ebay, an auction site </a>

Relative links

Relative Links

  • A relative link can be used if the page is in the user’s directory.

  • For example, <a href = “recipes/trout.html”> Trout Recipes</a>

The mailto link

The mailto Link

  • < a href=“mailto:[email protected]>email joe </a>

  • You can also specify the subject line by writing <a href=“mailto:[email protected]?subject=your subject here&body=body of message”>email joe </a>

Don t get lazy

Don’t get lazy

  • NOTE: If you have a properly designed site structure, you should be able to use relative links for everything except external pages.

  • DO NOT GET LAZY and use absolute links when you don’t need to.

Anchor links

Anchor Links

  • A fragment is a link within a page.

  • The <a name> tag creates a anchor link: <a name = “Q1”> Question 1 </A>

  • The <a href> tag accesses a fragment: <A href = “Test1.html#Q1”> Question 1 </A>

  • Our class website uses Anchor Links

  • Login