Web Site Design & Management Class Two. Agenda Attendance Questionnaire Setup/task Homework Review...
-
Upload
toby-grant -
Category
Documents
-
view
217 -
download
0
Transcript of Web Site Design & Management Class Two. Agenda Attendance Questionnaire Setup/task Homework Review...
![Page 1: Web Site Design & Management Class Two. Agenda Attendance Questionnaire Setup/task Homework Review Screenshots Lists/Nested Lists Home Page Links Images.](https://reader034.fdocuments.us/reader034/viewer/2022051516/56649e9e5503460f94b9fa01/html5/thumbnails/1.jpg)
Web Site Design & Management
Class Two
![Page 2: Web Site Design & Management Class Two. Agenda Attendance Questionnaire Setup/task Homework Review Screenshots Lists/Nested Lists Home Page Links Images.](https://reader034.fdocuments.us/reader034/viewer/2022051516/56649e9e5503460f94b9fa01/html5/thumbnails/2.jpg)
Agenda
• Attendance• Questionnaire• Setup/task• Homework Review• Screenshots• Lists/Nested Lists
• Home Page• Links• Images• Assign Next Week’s
Homework
![Page 3: Web Site Design & Management Class Two. Agenda Attendance Questionnaire Setup/task Homework Review Screenshots Lists/Nested Lists Home Page Links Images.](https://reader034.fdocuments.us/reader034/viewer/2022051516/56649e9e5503460f94b9fa01/html5/thumbnails/3.jpg)
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.
![Page 4: Web Site Design & Management Class Two. Agenda Attendance Questionnaire Setup/task Homework Review Screenshots Lists/Nested Lists Home Page Links Images.](https://reader034.fdocuments.us/reader034/viewer/2022051516/56649e9e5503460f94b9fa01/html5/thumbnails/4.jpg)
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?
![Page 5: Web Site Design & Management Class Two. Agenda Attendance Questionnaire Setup/task Homework Review Screenshots Lists/Nested Lists Home Page Links Images.](https://reader034.fdocuments.us/reader034/viewer/2022051516/56649e9e5503460f94b9fa01/html5/thumbnails/5.jpg)
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)
![Page 6: Web Site Design & Management Class Two. Agenda Attendance Questionnaire Setup/task Homework Review Screenshots Lists/Nested Lists Home Page Links Images.](https://reader034.fdocuments.us/reader034/viewer/2022051516/56649e9e5503460f94b9fa01/html5/thumbnails/6.jpg)
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
![Page 7: Web Site Design & Management Class Two. Agenda Attendance Questionnaire Setup/task Homework Review Screenshots Lists/Nested Lists Home Page Links Images.](https://reader034.fdocuments.us/reader034/viewer/2022051516/56649e9e5503460f94b9fa01/html5/thumbnails/7.jpg)
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)
![Page 8: Web Site Design & Management Class Two. Agenda Attendance Questionnaire Setup/task Homework Review Screenshots Lists/Nested Lists Home Page Links Images.](https://reader034.fdocuments.us/reader034/viewer/2022051516/56649e9e5503460f94b9fa01/html5/thumbnails/8.jpg)
FIX Stuff:
• See your assignment
• Fix the file(s) folders and upload it with the proper name to the “fixed” folder in homework/class01
![Page 9: Web Site Design & Management Class Two. Agenda Attendance Questionnaire Setup/task Homework Review Screenshots Lists/Nested Lists Home Page Links Images.](https://reader034.fdocuments.us/reader034/viewer/2022051516/56649e9e5503460f94b9fa01/html5/thumbnails/9.jpg)
Lists
• Unordered Lists
• Ordered Lists
• Nested Lists
![Page 10: Web Site Design & Management Class Two. Agenda Attendance Questionnaire Setup/task Homework Review Screenshots Lists/Nested Lists Home Page Links Images.](https://reader034.fdocuments.us/reader034/viewer/2022051516/56649e9e5503460f94b9fa01/html5/thumbnails/10.jpg)
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.
![Page 11: Web Site Design & Management Class Two. Agenda Attendance Questionnaire Setup/task Homework Review Screenshots Lists/Nested Lists Home Page Links Images.](https://reader034.fdocuments.us/reader034/viewer/2022051516/56649e9e5503460f94b9fa01/html5/thumbnails/11.jpg)
Unordered Lists
<ul><li> Kick Off </li> …</ul>
The <ul> … </ul> tagsencase list items.
![Page 12: Web Site Design & Management Class Two. Agenda Attendance Questionnaire Setup/task Homework Review Screenshots Lists/Nested Lists Home Page Links Images.](https://reader034.fdocuments.us/reader034/viewer/2022051516/56649e9e5503460f94b9fa01/html5/thumbnails/12.jpg)
Unordered Lists
<li> Kick Off </li> <li> Field Goal </li> <li> Extra Point </li> <li> Punt </li>
The <li> tag createslist items.
![Page 13: Web Site Design & Management Class Two. Agenda Attendance Questionnaire Setup/task Homework Review Screenshots Lists/Nested Lists Home Page Links Images.](https://reader034.fdocuments.us/reader034/viewer/2022051516/56649e9e5503460f94b9fa01/html5/thumbnails/13.jpg)
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.
![Page 14: Web Site Design & Management Class Two. Agenda Attendance Questionnaire Setup/task Homework Review Screenshots Lists/Nested Lists Home Page Links Images.](https://reader034.fdocuments.us/reader034/viewer/2022051516/56649e9e5503460f94b9fa01/html5/thumbnails/14.jpg)
Ordered Lists
<ol><li> Arsenic and Old Lace </li>
</ol>
![Page 15: Web Site Design & Management Class Two. Agenda Attendance Questionnaire Setup/task Homework Review Screenshots Lists/Nested Lists Home Page Links Images.](https://reader034.fdocuments.us/reader034/viewer/2022051516/56649e9e5503460f94b9fa01/html5/thumbnails/15.jpg)
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.
![Page 16: Web Site Design & Management Class Two. Agenda Attendance Questionnaire Setup/task Homework Review Screenshots Lists/Nested Lists Home Page Links Images.](https://reader034.fdocuments.us/reader034/viewer/2022051516/56649e9e5503460f94b9fa01/html5/thumbnails/16.jpg)
Nested Lists
Unordered lists can be placed inside ordered lists.
![Page 17: Web Site Design & Management Class Two. Agenda Attendance Questionnaire Setup/task Homework Review Screenshots Lists/Nested Lists Home Page Links Images.](https://reader034.fdocuments.us/reader034/viewer/2022051516/56649e9e5503460f94b9fa01/html5/thumbnails/17.jpg)
Nested Lists
Unordered lists can be placed inside definition lists.
![Page 18: Web Site Design & Management Class Two. Agenda Attendance Questionnaire Setup/task Homework Review Screenshots Lists/Nested Lists Home Page Links Images.](https://reader034.fdocuments.us/reader034/viewer/2022051516/56649e9e5503460f94b9fa01/html5/thumbnails/18.jpg)
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.
![Page 19: Web Site Design & Management Class Two. Agenda Attendance Questionnaire Setup/task Homework Review Screenshots Lists/Nested Lists Home Page Links Images.](https://reader034.fdocuments.us/reader034/viewer/2022051516/56649e9e5503460f94b9fa01/html5/thumbnails/19.jpg)
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.
![Page 20: Web Site Design & Management Class Two. Agenda Attendance Questionnaire Setup/task Homework Review Screenshots Lists/Nested Lists Home Page Links Images.](https://reader034.fdocuments.us/reader034/viewer/2022051516/56649e9e5503460f94b9fa01/html5/thumbnails/20.jpg)
The http Protocol
• http:// stands for HyperText Transfer Protocol.
• This protocol is commonly used for web pages.
![Page 21: Web Site Design & Management Class Two. Agenda Attendance Questionnaire Setup/task Homework Review Screenshots Lists/Nested Lists Home Page Links Images.](https://reader034.fdocuments.us/reader034/viewer/2022051516/56649e9e5503460f94b9fa01/html5/thumbnails/21.jpg)
Links
<a href = http://www.prenhall.com/”>Prentice Hall</a>
The <a href>…</a> tags are used to encase a link.
![Page 22: Web Site Design & Management Class Two. Agenda Attendance Questionnaire Setup/task Homework Review Screenshots Lists/Nested Lists Home Page Links Images.](https://reader034.fdocuments.us/reader034/viewer/2022051516/56649e9e5503460f94b9fa01/html5/thumbnails/22.jpg)
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>
![Page 23: Web Site Design & Management Class Two. Agenda Attendance Questionnaire Setup/task Homework Review Screenshots Lists/Nested Lists Home Page Links Images.](https://reader034.fdocuments.us/reader034/viewer/2022051516/56649e9e5503460f94b9fa01/html5/thumbnails/23.jpg)
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>
![Page 24: Web Site Design & Management Class Two. Agenda Attendance Questionnaire Setup/task Homework Review Screenshots Lists/Nested Lists Home Page Links Images.](https://reader034.fdocuments.us/reader034/viewer/2022051516/56649e9e5503460f94b9fa01/html5/thumbnails/24.jpg)
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>
![Page 25: Web Site Design & Management Class Two. Agenda Attendance Questionnaire Setup/task Homework Review Screenshots Lists/Nested Lists Home Page Links Images.](https://reader034.fdocuments.us/reader034/viewer/2022051516/56649e9e5503460f94b9fa01/html5/thumbnails/25.jpg)
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.
![Page 26: Web Site Design & Management Class Two. Agenda Attendance Questionnaire Setup/task Homework Review Screenshots Lists/Nested Lists Home Page Links Images.](https://reader034.fdocuments.us/reader034/viewer/2022051516/56649e9e5503460f94b9fa01/html5/thumbnails/26.jpg)
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