Chapter 3 class power point

224 views

Published on

Notes for Chapter 3 WDD

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
224
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Chapter 3 class power point

  1. 1. CHAPTER 3: UNIQUE HTML FEATURESWEB DESIGN &DEVELOPMENT L A S T U P D AT E : 2 / 2 7 / 1 2
  2. 2. ESSENTIAL OUTCOMES3. You will analyze and create unique features in HTML by:  Writing and using scrolling marquees and rollovers  Scrolling marque to left  Slide in Text  Bouncing Text  Upward Scroll  Rollovers  Inserting rounded edges in tables  Copying and pasting codes that secure a website  No right click  Disable copy and paste  Define key words presented in this chapter.
  3. 3. SCROLLING MARQUES / BANNERSo Scrolling texto Use discretiono Not all websites should have scrolling banner
  4. 4. SCROLLING MARQUES / BANNERS ELEMENTo <marque></marque>o Paired element
  5. 5. SCROLLING MARQUES / BANNERS ATTRIBUTEo bgcolor=“green” (sets background color)o width=“100%” (sets width)o direction=“Left” (sets direction)o scrollamount=“1” (sets speed of banner)
  6. 6. VARIOUS TYPES OF SCROLLING BANNERS o Scrolling Marque from Left o Slide in Text o Bouncing Text o Upward Scroll
  7. 7. SLIDE IN TEXT<marque behavior=“slide”direction=“left”>scroll texthere</marque>
  8. 8. BOUNCING TEXT<marque behavior=“alternate”>scrolltext here</marque>
  9. 9. UPWARD SCROLL<p align=“center”><marque bgcolor=“#000080”scrollamount=“2” direction=“up”loop=“true” width=“25%”><fontcolor=“#ffffff”><strong>scroll texthere</strong></font</marque></p> (click here)
  10. 10. SCROLLING IMAGE WITH TEXT<p align=“center”><marque bgcolor=“#000080”behavior=“scroll” direction=“left”><fontsize=“10 color=“#ffffff”scrollamount=“2”>>Go Vikings<imgscroll texthere</strong></font</marque></p> (click here for ex.)
  11. 11. ROLLOVERS• Displays separate images or text to user once button or image has been rolled over with mouse• Need two images: 1. One image as button; 2. One image as rollover;
  12. 12. CREATING THE ROLLOVER• Save your two images to your image folder• Go to where you want your rollover to appear• Write the following code:<p align="center"><a href="http://www.google.com"><imgsrc="Graphics/bugs-01.gif"onmouseover="this.src=Graphics/bart-09.gif"onmouseout="this.src=Graphics/bugs-01.gif" alt="Click Me"></a>
  13. 13. ROUNDING TABLES• In web design, no rounded tables• All images are rectangles• Rounding tables: means that you round the corner edges of the table
  14. 14. ROUNDING TABLES• To create a semblance of rounded tables:• Need circle & the # of corners you need (in this case 4 since we are rounding all four corners) 1. Need 4 different images 2. In Photoshop, create a circle Our starting Top-left Top-right Bottom-left Bottom-right image corner corner corner corner
  15. 15. ROUNDING TABLES Top Corners<td width="14"><img src="Graphics/LC.jpg"width="14"height="14" border="0" alt="..." /></td><td width="14"><img src="Graphics/RC.jpg"width="14"height="14" border="0" alt="..." /></td>
  16. 16. ROUNDING TABLES Bottom Corners<td><img src="Graphics/BLC.jpg"width="14" height="14"border="0" alt="..." /></td><td><img src="Graphics/BRC.jpg"width="14" height="14"border="0" alt="..." /></td>
  17. 17. IMPORTANT NOTES IN ROUNDING TABLES• When rounding corners, make sure cellpadding, cellspacing & border attributes have 0 value• Background color for corners must be same color as table• Use the “alt” tag for images (required)• Do not use “bgcolor”; rather use the following:style=“background-color: #9c084A”
  18. 18. IMPORTANT NOTES IN ROUNDING TABLES• Height of a table is controlled by the actual content• Roundness of a table depends on curves created in image;• Circle is small, curves will be tighter;• Circle is larger, curves will be looser
  19. 19. SECURING YOUR WEBSITE• For this, you may just copy and paste codes since these include JavaScript• 3 codes:  No copy & paste of images  No right click  No copy & paste of information• Codes are saved in Notepad++ for you to copy under Security
  20. 20. WEB DESIGN &DEVELOPMENT L A S T U P D AT E : 2 / 2 7 / 1 2

×