CHAPTER 3: UNIQUE HTML FEATURESWEB DESIGN &DEVELOPMENT       L A S T U P D AT E : 2 / 2 7 / 1 2
ESSENTIAL OUTCOMES3. You will analyze and create unique features in   HTML by:    Writing and using scrolling marquees an...
SCROLLING MARQUES / BANNERSo Scrolling texto Use discretiono Not all websites should have  scrolling banner
SCROLLING MARQUES / BANNERS ELEMENTo <marque></marque>o Paired element
SCROLLING MARQUES / BANNERS ATTRIBUTEo bgcolor=“green” (sets background  color)o width=“100%” (sets width)o direction=“Lef...
VARIOUS TYPES OF SCROLLING BANNERS  o Scrolling Marque from    Left  o Slide in Text  o Bouncing Text  o Upward Scroll
SLIDE IN TEXT<marque behavior=“slide”direction=“left”>scroll texthere</marque>
BOUNCING TEXT<marque behavior=“alternate”>scrolltext here</marque>
UPWARD SCROLL<p align=“center”><marque bgcolor=“#000080”scrollamount=“2” direction=“up”loop=“true” width=“25%”><fontcolor=...
SCROLLING IMAGE WITH TEXT<p align=“center”><marque bgcolor=“#000080”behavior=“scroll” direction=“left”><fontsize=“10 color...
ROLLOVERS• Displays separate images or text to  user once button or image has been  rolled over with mouse• Need two image...
CREATING THE ROLLOVER• Save your two images to your image  folder• Go to where you want your rollover to  appear• Write th...
ROUNDING TABLES• In web design, no rounded tables• All images are rectangles• Rounding tables: means that you  round the c...
ROUNDING TABLES• To create a semblance of rounded  tables:• Need circle & the # of corners you  need (in this case 4 since...
ROUNDING TABLES               Top Corners<td width="14"><img src="Graphics/LC.jpg"width="14"height="14" border="0" alt=".....
ROUNDING TABLES          Bottom Corners<td><img src="Graphics/BLC.jpg"width="14" height="14"border="0" alt="..." /></td><t...
IMPORTANT NOTES IN ROUNDING TABLES• When rounding corners, make  sure cellpadding, cellspacing &  border attributes have 0...
IMPORTANT NOTES IN ROUNDING TABLES• Height of a table is controlled by  the actual content• Roundness of a table depends  ...
SECURING YOUR WEBSITE• For this, you may just copy and  paste codes since these include  JavaScript• 3 codes:     No copy...
WEB DESIGN &DEVELOPMENT     L A S T U P D AT E : 2 / 2 7 / 1 2
Upcoming SlideShare
Loading in...5
×

Chapter 3 class power point

142

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
142
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×