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

Web Site Design & Management PowerPoint PPT Presentation


  • 73 Views
  • 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


Agenda

Attendance

Questionnaire

Setup/task

Homework Review

Screenshots

Lists/Nested Lists

Home Page

Links

Images

Assign Next Week’s Homework

Agenda


Setup

Setup

  • 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


Lists

Lists

  • 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

<ul>

<li> Kick Off </li>

</ul>

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

<ol>

<li> Arsenic and Old Lace </li>

</ol>


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.


Links

links

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


Links1

Links

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


Links2

Links

<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