Enviar búsqueda
Cargar
Chapter 4 - Web Design
•
Descargar como PPT, PDF
•
1 recomendación
•
4,026 vistas
T
tclanton4
Seguir
Chapter 4 Presentation - Web Design
Leer menos
Leer más
Educación
Tecnología
Arte y fotografía
Denunciar
Compartir
Denunciar
Compartir
1 de 49
Descargar ahora
Recomendados
Chapter 5 - Web Design
Chapter 5 - Web Design
tclanton4
Chapter 6 - Web Design
Chapter 6 - Web Design
tclanton4
Chapter 7 - Web Design
Chapter 7 - Web Design
tclanton4
Chapter 3 - Web Design
Chapter 3 - Web Design
tclanton4
Chapter 11 - Web Design
Chapter 11 - Web Design
tclanton4
Chapter 13 - Web Design
Chapter 13 - Web Design
tclanton4
Chapter 10 - Web Design
Chapter 10 - Web Design
tclanton4
Chapter 1 - Web Design
Chapter 1 - Web Design
tclanton4
Recomendados
Chapter 5 - Web Design
Chapter 5 - Web Design
tclanton4
Chapter 6 - Web Design
Chapter 6 - Web Design
tclanton4
Chapter 7 - Web Design
Chapter 7 - Web Design
tclanton4
Chapter 3 - Web Design
Chapter 3 - Web Design
tclanton4
Chapter 11 - Web Design
Chapter 11 - Web Design
tclanton4
Chapter 13 - Web Design
Chapter 13 - Web Design
tclanton4
Chapter 10 - Web Design
Chapter 10 - Web Design
tclanton4
Chapter 1 - Web Design
Chapter 1 - Web Design
tclanton4
Chapter5
Chapter5
DeAnna Gossett
Chapter11
Chapter11
DeAnna Gossett
Chapter 14 - Web Design
Chapter 14 - Web Design
tclanton4
Introduction to web design
Introduction to web design
Umamaheshwariv1
How websites and search engines work
How websites and search engines work
Brian Duffy
Creating WordPress Sites in 2 Hours
Creating WordPress Sites in 2 Hours
Svetlin Nakov
Introduction to web design
Introduction to web design
akhileshraj23
Business Domain Name
Business Domain Name
How to Make a Business Website
Introduction to web design
Introduction to web design
Sumit Tambe
Introduction to web design
Introduction to web design
websitedevelopmentcompany
WordPress HTML, CSS & Child Themes
WordPress HTML, CSS & Child Themes
Michelle Ames
Animation in the web
Animation in the web
Vishal Polley
Webelements basiclayout
Webelements basiclayout
Penny Tan
How to migrate your blog from Wordpress to HubSpot
How to migrate your blog from Wordpress to HubSpot
Vu Long Tran
World wide web with multimedia
World wide web with multimedia
Afaq Siddiqui
Ibs las vegas
Ibs las vegas
Vaibhav Gade
Internet Librarian Slides
Internet Librarian Slides
Polly Farrington
How to connect your subdomains to HubSpot
How to connect your subdomains to HubSpot
Vu Long Tran
700 posts – 1 menu, organizing a large info site with taxonomies and facets
700 posts – 1 menu, organizing a large info site with taxonomies and facets
Becky Davis
Macromedia Dreamweaver 8
Macromedia Dreamweaver 8
Jeff Wood
Chapter4
Chapter4
cpashke
Chapter4
Chapter4
DeAnna Gossett
Más contenido relacionado
La actualidad más candente
Chapter5
Chapter5
DeAnna Gossett
Chapter11
Chapter11
DeAnna Gossett
Chapter 14 - Web Design
Chapter 14 - Web Design
tclanton4
Introduction to web design
Introduction to web design
Umamaheshwariv1
How websites and search engines work
How websites and search engines work
Brian Duffy
Creating WordPress Sites in 2 Hours
Creating WordPress Sites in 2 Hours
Svetlin Nakov
Introduction to web design
Introduction to web design
akhileshraj23
Business Domain Name
Business Domain Name
How to Make a Business Website
Introduction to web design
Introduction to web design
Sumit Tambe
Introduction to web design
Introduction to web design
websitedevelopmentcompany
WordPress HTML, CSS & Child Themes
WordPress HTML, CSS & Child Themes
Michelle Ames
Animation in the web
Animation in the web
Vishal Polley
Webelements basiclayout
Webelements basiclayout
Penny Tan
How to migrate your blog from Wordpress to HubSpot
How to migrate your blog from Wordpress to HubSpot
Vu Long Tran
World wide web with multimedia
World wide web with multimedia
Afaq Siddiqui
Ibs las vegas
Ibs las vegas
Vaibhav Gade
Internet Librarian Slides
Internet Librarian Slides
Polly Farrington
How to connect your subdomains to HubSpot
How to connect your subdomains to HubSpot
Vu Long Tran
700 posts – 1 menu, organizing a large info site with taxonomies and facets
700 posts – 1 menu, organizing a large info site with taxonomies and facets
Becky Davis
Macromedia Dreamweaver 8
Macromedia Dreamweaver 8
Jeff Wood
La actualidad más candente
(20)
Chapter5
Chapter5
Chapter11
Chapter11
Chapter 14 - Web Design
Chapter 14 - Web Design
Introduction to web design
Introduction to web design
How websites and search engines work
How websites and search engines work
Creating WordPress Sites in 2 Hours
Creating WordPress Sites in 2 Hours
Introduction to web design
Introduction to web design
Business Domain Name
Business Domain Name
Introduction to web design
Introduction to web design
Introduction to web design
Introduction to web design
WordPress HTML, CSS & Child Themes
WordPress HTML, CSS & Child Themes
Animation in the web
Animation in the web
Webelements basiclayout
Webelements basiclayout
How to migrate your blog from Wordpress to HubSpot
How to migrate your blog from Wordpress to HubSpot
World wide web with multimedia
World wide web with multimedia
Ibs las vegas
Ibs las vegas
Internet Librarian Slides
Internet Librarian Slides
How to connect your subdomains to HubSpot
How to connect your subdomains to HubSpot
700 posts – 1 menu, organizing a large info site with taxonomies and facets
700 posts – 1 menu, organizing a large info site with taxonomies and facets
Macromedia Dreamweaver 8
Macromedia Dreamweaver 8
Similar a Chapter 4 - Web Design
Chapter4
Chapter4
cpashke
Chapter4
Chapter4
DeAnna Gossett
Chapter7
Chapter7
DeAnna Gossett
Responsive Web Design e a Ubiquidade da Web
Responsive Web Design e a Ubiquidade da Web
Eduardo Shiota Yasuda
Module 4 Minuteman Lexington Web Design Daniel Downs
Module 4 Minuteman Lexington Web Design Daniel Downs
Daniel Downs
01 Introduction To CSS
01 Introduction To CSS
crgwbr
Session no 4
Session no 4
Saif Ullah Dar
Designing web page marquee and img tag
Designing web page marquee and img tag
Jesus Obenita Jr.
Responsive design
Responsive design
John Doxaras
Responsive Web Design tips and tricks.
Responsive Web Design tips and tricks.
GaziAhsan
Rwd slidedeck
Rwd slidedeck
Vera Kovaleva
Building the new AppExchange using Responsive Design
Building the new AppExchange using Responsive Design
Salesforce Developers
Day of code
Day of code
Evan Farr
FITC - 2012-04-23 - Responsive Web Design
FITC - 2012-04-23 - Responsive Web Design
Frédéric Harper
SCREENS - 2012-09-28 - Responsive Web Design, get the best from your design
SCREENS - 2012-09-28 - Responsive Web Design, get the best from your design
Frédéric Harper
Introduction of html5
Introduction of html5
kokila T
Adobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + Fireworks
Nathan Smith
RIAs
RIAs
Jonathan Snook
Ie9 dev overview (300) beta
Ie9 dev overview (300) beta
Kirk Yamamoto
Intro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS features
Andreas Bovens
Similar a Chapter 4 - Web Design
(20)
Chapter4
Chapter4
Chapter4
Chapter4
Chapter7
Chapter7
Responsive Web Design e a Ubiquidade da Web
Responsive Web Design e a Ubiquidade da Web
Module 4 Minuteman Lexington Web Design Daniel Downs
Module 4 Minuteman Lexington Web Design Daniel Downs
01 Introduction To CSS
01 Introduction To CSS
Session no 4
Session no 4
Designing web page marquee and img tag
Designing web page marquee and img tag
Responsive design
Responsive design
Responsive Web Design tips and tricks.
Responsive Web Design tips and tricks.
Rwd slidedeck
Rwd slidedeck
Building the new AppExchange using Responsive Design
Building the new AppExchange using Responsive Design
Day of code
Day of code
FITC - 2012-04-23 - Responsive Web Design
FITC - 2012-04-23 - Responsive Web Design
SCREENS - 2012-09-28 - Responsive Web Design, get the best from your design
SCREENS - 2012-09-28 - Responsive Web Design, get the best from your design
Introduction of html5
Introduction of html5
Adobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + Fireworks
RIAs
RIAs
Ie9 dev overview (300) beta
Ie9 dev overview (300) beta
Intro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS features
Más de tclanton4
Chapter 12 - Web Design
Chapter 12 - Web Design
tclanton4
Chapter 9 - Web Design
Chapter 9 - Web Design
tclanton4
Chapter 8 - Web Design
Chapter 8 - Web Design
tclanton4
Base2
Base2
tclanton4
Base1
Base1
tclanton4
Impress
Impress
tclanton4
Project Mgt
Project Mgt
tclanton4
Charts in Calc
Charts in Calc
tclanton4
Formatting a Worksheet in Calc
Formatting a Worksheet in Calc
tclanton4
Creating a Worksheet in Calc
Creating a Worksheet in Calc
tclanton4
Advanced Features of Writer
Advanced Features of Writer
tclanton4
Creating a Writer Document
Creating a Writer Document
tclanton4
Formatting Features of Writer
Formatting Features of Writer
tclanton4
Getting Started - The Basics
Getting Started - The Basics
tclanton4
Intro to Information Systems
Intro to Information Systems
tclanton4
Unit 04 PowerPoint (WebA)
Unit 04 PowerPoint (WebA)
tclanton4
Más de tclanton4
(16)
Chapter 12 - Web Design
Chapter 12 - Web Design
Chapter 9 - Web Design
Chapter 9 - Web Design
Chapter 8 - Web Design
Chapter 8 - Web Design
Base2
Base2
Base1
Base1
Impress
Impress
Project Mgt
Project Mgt
Charts in Calc
Charts in Calc
Formatting a Worksheet in Calc
Formatting a Worksheet in Calc
Creating a Worksheet in Calc
Creating a Worksheet in Calc
Advanced Features of Writer
Advanced Features of Writer
Creating a Writer Document
Creating a Writer Document
Formatting Features of Writer
Formatting Features of Writer
Getting Started - The Basics
Getting Started - The Basics
Intro to Information Systems
Intro to Information Systems
Unit 04 PowerPoint (WebA)
Unit 04 PowerPoint (WebA)
Último
4.16.24 21st Century Movements for Black Lives.pptx
4.16.24 21st Century Movements for Black Lives.pptx
mary850239
How to Fix XML SyntaxError in Odoo the 17
How to Fix XML SyntaxError in Odoo the 17
Celine George
DIFFERENT BASKETRY IN THE PHILIPPINES PPT.pptx
DIFFERENT BASKETRY IN THE PHILIPPINES PPT.pptx
MichelleTuguinay1
Blowin' in the Wind of Caste_ Bob Dylan's Song as a Catalyst for Social Justi...
Blowin' in the Wind of Caste_ Bob Dylan's Song as a Catalyst for Social Justi...
DhatriParmar
Textual Evidence in Reading and Writing of SHS
Textual Evidence in Reading and Writing of SHS
Mae Pangan
Man or Manufactured_ Redefining Humanity Through Biopunk Narratives.pptx
Man or Manufactured_ Redefining Humanity Through Biopunk Narratives.pptx
DhatriParmar
31 ĐỀ THI THỬ VÀO LỚP 10 - TIẾNG ANH - FORM MỚI 2025 - 40 CÂU HỎI - BÙI VĂN V...
31 ĐỀ THI THỬ VÀO LỚP 10 - TIẾNG ANH - FORM MỚI 2025 - 40 CÂU HỎI - BÙI VĂN V...
Nguyen Thanh Tu Collection
Grade 9 Quarter 4 Dll Grade 9 Quarter 4 DLL.pdf
Grade 9 Quarter 4 Dll Grade 9 Quarter 4 DLL.pdf
Jemuel Francisco
MS4 level being good citizen -imperative- (1) (1).pdf
MS4 level being good citizen -imperative- (1) (1).pdf
Mr Bounab Samir
Scientific Writing :Research Discourse
Scientific Writing :Research Discourse
Anita GoswamiGiri
Transaction Management in Database Management System
Transaction Management in Database Management System
Christalin Nelson
Unraveling Hypertext_ Analyzing Postmodern Elements in Literature.pptx
Unraveling Hypertext_ Analyzing Postmodern Elements in Literature.pptx
DhatriParmar
Narcotic and Non Narcotic Analgesic..pdf
Narcotic and Non Narcotic Analgesic..pdf
Prerana Jadhav
Grade Three -ELLNA-REVIEWER-ENGLISH.pptx
Grade Three -ELLNA-REVIEWER-ENGLISH.pptx
karenfajardo43
Faculty Profile prashantha K EEE dept Sri Sairam college of Engineering
Faculty Profile prashantha K EEE dept Sri Sairam college of Engineering
Sri Sairam College Of Engineering Bengaluru
Q-Factor HISPOL Quiz-6th April 2024, Quiz Club NITW
Q-Factor HISPOL Quiz-6th April 2024, Quiz Club NITW
Quiz Club NITW
Student Profile Sample - We help schools to connect the data they have, with ...
Student Profile Sample - We help schools to connect the data they have, with ...
Seán Kennedy
Active Learning Strategies (in short ALS).pdf
Active Learning Strategies (in short ALS).pdf
Patidar M
4.11.24 Mass Incarceration and the New Jim Crow.pptx
4.11.24 Mass Incarceration and the New Jim Crow.pptx
mary850239
Beauty Amidst the Bytes_ Unearthing Unexpected Advantages of the Digital Wast...
Beauty Amidst the Bytes_ Unearthing Unexpected Advantages of the Digital Wast...
DhatriParmar
Último
(20)
4.16.24 21st Century Movements for Black Lives.pptx
4.16.24 21st Century Movements for Black Lives.pptx
How to Fix XML SyntaxError in Odoo the 17
How to Fix XML SyntaxError in Odoo the 17
DIFFERENT BASKETRY IN THE PHILIPPINES PPT.pptx
DIFFERENT BASKETRY IN THE PHILIPPINES PPT.pptx
Blowin' in the Wind of Caste_ Bob Dylan's Song as a Catalyst for Social Justi...
Blowin' in the Wind of Caste_ Bob Dylan's Song as a Catalyst for Social Justi...
Textual Evidence in Reading and Writing of SHS
Textual Evidence in Reading and Writing of SHS
Man or Manufactured_ Redefining Humanity Through Biopunk Narratives.pptx
Man or Manufactured_ Redefining Humanity Through Biopunk Narratives.pptx
31 ĐỀ THI THỬ VÀO LỚP 10 - TIẾNG ANH - FORM MỚI 2025 - 40 CÂU HỎI - BÙI VĂN V...
31 ĐỀ THI THỬ VÀO LỚP 10 - TIẾNG ANH - FORM MỚI 2025 - 40 CÂU HỎI - BÙI VĂN V...
Grade 9 Quarter 4 Dll Grade 9 Quarter 4 DLL.pdf
Grade 9 Quarter 4 Dll Grade 9 Quarter 4 DLL.pdf
MS4 level being good citizen -imperative- (1) (1).pdf
MS4 level being good citizen -imperative- (1) (1).pdf
Scientific Writing :Research Discourse
Scientific Writing :Research Discourse
Transaction Management in Database Management System
Transaction Management in Database Management System
Unraveling Hypertext_ Analyzing Postmodern Elements in Literature.pptx
Unraveling Hypertext_ Analyzing Postmodern Elements in Literature.pptx
Narcotic and Non Narcotic Analgesic..pdf
Narcotic and Non Narcotic Analgesic..pdf
Grade Three -ELLNA-REVIEWER-ENGLISH.pptx
Grade Three -ELLNA-REVIEWER-ENGLISH.pptx
Faculty Profile prashantha K EEE dept Sri Sairam college of Engineering
Faculty Profile prashantha K EEE dept Sri Sairam college of Engineering
Q-Factor HISPOL Quiz-6th April 2024, Quiz Club NITW
Q-Factor HISPOL Quiz-6th April 2024, Quiz Club NITW
Student Profile Sample - We help schools to connect the data they have, with ...
Student Profile Sample - We help schools to connect the data they have, with ...
Active Learning Strategies (in short ALS).pdf
Active Learning Strategies (in short ALS).pdf
4.11.24 Mass Incarceration and the New Jim Crow.pptx
4.11.24 Mass Incarceration and the New Jim Crow.pptx
Beauty Amidst the Bytes_ Unearthing Unexpected Advantages of the Digital Wast...
Beauty Amidst the Bytes_ Unearthing Unexpected Advantages of the Digital Wast...
Chapter 4 - Web Design
1.
Copyright © Terry
Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 4 Key Concepts 1Copyright © Terry Felke-Morris
2.
Copyright © Terry
Felke-Morris LEARNING OUTCOMES In this chapter, you will learn how to ... Create and format lines and borders on web pages Apply the image element to add graphics to web pages Optimize an image for web page display Configure images as backgrounds on web pages Configure images as hyperlinks Configure visual effects with CSS3 including multiple background images, rounded corners, box shadow, text shadow, opacity, and gradients Configure RGBA color with CSS3 Use HTML5 elements to caption a figure Use the HTML5 meter and progress elements Find free and fee-based graphics sources Follow recommended web design guidelines for graphics on web pages 2
3.
Copyright © Terry
Felke-Morris HORIZONTAL RULE ELEMENT Configures a horizontal line XHTML Syntax: <hr /> HTML5 Syntax: <hr> 3
4.
Copyright © Terry
Felke-Morris CSS BORDER PROPERTY Configures a border on the top, right, bottom, and left sides of an element Consists of border-width border-style border-color h2 { border: 2px solid #ff0000 }
5.
Copyright © Terry
Felke-Morris CSS BORDERS: BLOCK / INLINE ELEMENTS Block display element ◦ default width of element content extends to browser margin (or specified width) Inline display element ◦ Border closely outlines the element content h2 { border: 2px solid #ff0000; } a { border: 2px solid #ff0000; }
6.
Copyright © Terry
Felke-Morris BROWSER DISPLAY CAN VARY
7.
Copyright © Terry
Felke-Morris CONFIGURING SPECIFIC SIDES OF A BORDER Use CSS to configure a line on one or more sides of an element border-bottom border-left border-right border-top h2 { border-bottom: 2px solid #ff0000 }
8.
Copyright © Terry
Felke-Morris CSS PADDING PROPERTY Configures empty space between the content of the HTML element and the border Set to 0px by default h2 { border: 2px solid #ff0000; padding: 5px; } No padding property configured:
9.
Copyright © Terry
Felke-Morris CONFIGURE PADDING ON SPECIFIC SIDES OF AN ELEMENT Use CSS to configure padding on one or more sides of an element padding-bottom padding-left padding-right padding-top h2 { border: 2px solid #ff0000; background-color: #cccccc; padding-left: 5px; padding-bottom: 10px; padding-top: 10px; }
10.
Copyright © Terry
Felke-Morris CSS PADDING PROPERTY SHORTHAND: TWOVALUES Two numeric values or percentages first value configures top and bottom padding the second value configures left and right padding h2 { border: 2px solid #ff0000; background-color: #cccccc; padding: 20px 10px; }
11.
Copyright © Terry
Felke-Morris Four numeric values or percentages ◦ Configure top, right, bottom, and left padding h2 { border: 2px solid #ff0000; width: 250px; background-color: #cccccc; padding: 30px 10px 5px 20px; } CSS PADDING PROPERTY SHORTHAND: FOURVALUES
12.
Copyright © Terry
Felke-Morris HANDS-ON PRACTICE h1 { background-color:#191970; color:#E6E6FA; padding: 15px; font-family: Georgia, "Times New Roman", serif; } h2 { background-color:#AEAED4; color:#191970; font-family: Georgia, "Times New Roman", serif; border-bottom: 2px dashed #191970; }
13.
Copyright © Terry
Felke-Morris CHECKPOINT 4.1 1. Is it reasonable to try to code a web page that looks exactly the same on every browser and every platform? Explain your answer. 2. When a web page containing the style rules below is rendered in a browser, the border does not display. Describe what is incorrect with the following code: h2 { background-color: #ff0000 border-top: thin solid #000000 } 3. True or False? CSS can be used to configure visual elements such as rectangular shapes and lines on web pages. 13
14.
Copyright © Terry
Felke-Morris TYPES OF GRAPHICS Graphic types commonly used on web pages: GIF JPG PNG 14
15.
Copyright © Terry
Felke-Morris GIF Graphics Interchange Format Best used for line art and logos Maximum of 256 colors One color can be configured as transparent Can be animated Uses lossless compression Can be interlaced 15 Background color – no transparency Background color configured to be transparent
16.
Copyright © Terry
Felke-Morris JPEG Joint Photographic Experts Group Best used for photographs Up to 16.7 million colors Use lossy compression Cannot be animated Cannot be made transparent Progressive JPEG – similar to interlaced display 16
17.
Copyright © Terry
Felke-Morris PNG Portable Network Graphic Support millions of colors Support multiple levels of transparency (but browsers do not -- so limit to one transparent color forWeb display) Support interlacing Use lossless compression Combines the best of GIF & JPEG Browser support is growing 17
18.
Copyright © Terry
Felke-Morris HTML IMAGE ELEMENT Configures graphics on a web page src Attribute ◦ File name of the graphic alt Attribute ◦ Configures alternate text content (description) height Attribute ◦ Height of the graphic in pixels width Attribute ◦ Width of the graphic in pixels 18 <img src=“cake.gif” alt=“birthday cake” height=“100” width=“100”>
19.
Copyright © Terry
Felke-Morris ACCESSIBILITY & IMAGES Required: Configure the alt attribute Alternate text content to convey the meaning/intent of the image NOT the file name of the image Use alt="“ for purely decorative images Recommended: If your site navigation uses image links for the main navigation, provide simple text links at the bottom of the page.
20.
Copyright © Terry
Felke-Morris IMAGE LINKS To create an image hyperlink use an anchor element to contain an image element Browsers automatically add a border to image links. Configure CSS to eliminate the border img {border-style:none; } 20 Home <a href="index.html"><img src="home.gif" height="19" width="85" alt="Home"></a>
21.
Copyright © Terry
Felke-Morris THUMBNAIL IMAGE A small image configured to link to a larger version of that image. <a href=“big.jpg”><img src=“small.jpg” alt=“country road” width=“200” height=“100”></a> 21
22.
Copyright © Terry
Felke-Morris IMAGE OPTIMIZATION The process of creating an image with the lowest file size that still renders a good quality image— balancing image quality and file size. Photographs taken with digital cameras are not usually optimized for the Web 22
23.
Copyright © Terry
Felke-Morris OPTIMIZE AN IMAGE FOR THE WEB Image Optimization Reduce the file size of the image Reduce the dimensions of the image to the actual width and height of the image on the web page. Image Editing Tools: GIMP (free!) Adobe Fireworks Adobe Photoshop http://pixlr.com/editor (free!) 23
24.
Copyright © Terry
Felke-Morris CHOOSING NAMES FOR IMAGE FILES Use all lowercase letters Do not use punctuation symbols and spaces Do not change the file extensions (should be .gif, .jpg, .jpeg, or .png) Keep your file names short but descriptive i1.gif is probably too short myimagewithmydogonmybirthday.gif is too long dogbday.gif may be just about right
25.
Copyright © Terry
Felke-Morris ORGANIZING YOUR SITE <img src=“images/home.gif” alt=“Home” height=“100” width=“200”> 25 • Place images in their own folder • Code the path to the file in the src atttribute
26.
Copyright © Terry
Felke-Morris HTML5 FIGURE AND FIGCAPTION ELEMENTS Figure Element: contains a unit of content that is self- contained, such as an image, along with one optional figcaption element. <figure> <img src="lighthouseisland.jpg" width="250" height="355" alt="Lighthouse Island"> <figcaption> Island Lighthouse, Built in 1870 </figcaption> </figure> 26
27.
Copyright © Terry
Felke-Morris HTML5 METER ELEMENT Displays a visual gauge of a numeric value within a known range <meter value="14417" min="0" max="14417">14417</meter>14,417 Total Visits<br> <meter value="7000" min="0" max="14417">7000</meter> 7,000 Firefox<br> <meter value="3800" min="0" max="14417">3800</meter> 3,800 Internet Explorer<br> <meter value="2062" min="0" max="14417">2062</meter> 2,062 Chrome<br> <meter value="1043" min="0" max="14417">1043</meter> 1,043 Safari<br> <meter value="312" min="0" max="14417">312</meter> 312 Opera<br> <meter value="200" min="0" max="14417">200</meter> 200 other<br> 27
28.
Copyright © Terry
Felke-Morris HTML5 PROGRESS ELEMENT Displays a bar that depicts a numeric value within a specified range <progress value="5000" max="10000">5000</progress> Progress Towards Our Goal 28
29.
Copyright © Terry
Felke-Morris CSS BACKGROUND-IMAGE PROPERTY Configures a background-image By default, background images tile (repeat) body { background-image: url(background1.gif); }
30.
Copyright © Terry
Felke-Morris CSS BACKGROUND-REPEAT PROPERTY
31.
Copyright © Terry
Felke-Morris USING BACKGROUND-REPEAT h2 { background-color: #d5edb3; color: #5c743d; font-family: Georgia, "Times New Roman", serif; padding-left: 30px; background-image: url(trilliumbullet.gif); background-repeat: no-repeat; } trilliumbullet.gif:
32.
Copyright © Terry
Felke-Morris CSS3 MULTIPLE BACKGROUND IMAGES body { background-color: #f4ffe4; color: #333333; background-image: url(trilliumgradient.png); background: url(trilliumfoot.gif) no-repeat bottom right, url(trilliumgradient.png); } 32
33.
Copyright © Terry
Felke-Morris CHECKPOINT 4.2 1. Describe the CSS to configure a graphic named circle.jpg to display once in the background of all <h1> elements. Code sample CSS to demonstrate this. 2. Describe the CSS that configures a file named bg.gif to repeat vertically down the background of a web page. Code sample CSS to demonstrate this. 3. Explain how the browser will render the web page if you use CSS to configure both a background image and a background color. 33
34.
Copyright © Terry
Felke-Morris MORE ABOUT IMAGES Image Map Favorites Icon CSS Sprites Sources for Graphics Guidelines for Using Images Accessibility &Visual Elements
35.
Copyright © Terry
Felke-Morris IMAGE MAP map element Defines the map area element Defines a specific area on a map Can be set to a rectangle, circle, or polygon href Attibute shape Attribute coords Attribute 35 <map name="boat" id="boat"> <area href="http://www.doorcountyvacations.com" shape="rect" coords="24, 188, 339, 283" alt="Door County Fishing"> </map> <img src="fishingboat.jpg" usemap="#boat" alt="Door County“ width="416" height="350">
36.
Copyright © Terry
Felke-Morris FAVORITES ICON - FAVICON A square image associated with a Web page Usually named: favicon.ico May display in the browser address bar, tab, or favorites/bookmarks list Configure with a link tag: <link rel="icon" href="favicon.ico" type="image/x-icon">
37.
Copyright © Terry
Felke-Morris CSS SPRITES Sprite – an image file that contains multiple small graphics that are configured as background images for various web page elements Modern technique to optimize use of multiple icon or small images Saves overhead by reducing the number of http requests made by the browser. You’ll use CSS Sprites in Chapter 7! 37
38.
Copyright © Terry
Felke-Morris SOURCES FOR GRAPHICS Create them yourself using a graphics application: ◦ GIMP ◦ Adobe Photoshop ◦ Adobe Fireworks ◦ Google’s Picasa (http://picasa.google.com/) Download graphics from a free site Purchase/download professional-quality graphics Purchase a graphics collection on a CD Take digital photographs Scan your photographs Scan your drawings Hire a graphic designer to create graphics 38
39.
Copyright © Terry
Felke-Morris GUIDELINES FOR USING IMAGES Reuse images Consider image file size with image quality Consider image load time Use appropriate resolution Specify dimensions Be aware of brightness and contrast 39
40.
Copyright © Terry
Felke-Morris IMAGES AND ACCESSIBILITY Don't rely on color alone. Some visitors may have color perception deficiencies. Use high contrast between background and text color. Provide a text equivalent for non-text elements. Use the alt attribute on your image elements If your site navigation uses image links, provide simple text links at the bottom of the page. 40
41.
Copyright © Terry
Felke-Morris CHECKPOINT 4.3 Search for a site that uses image links to provide navigation. List the URL of the page. What colors are used on the image links? If the image links contain text, is there good contrast between the background color and letters on the image links? Would the page be accessible to a visitor who is sight- challenged? How have accessibility issues been addressed? Is the alt attribute used to describe the image link? Is there a row of text links in the footer section of the page? Answer the questions above and discuss your findings. 41
42.
Copyright © Terry
Felke-Morris CSS3 ROUNDED CORNERS border-radius property Configures the horizontal radius and vertical radius of the corner Numeric value(s) with unit (pixel or em) or percentage Browser vendor proprietary properties: -webkit-border-radius (for Safari & Chrome) -moz-border-radius (for Firefox) border-radius (W3C syntax) Example h1 { -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; } 42
43.
Copyright © Terry
Felke-Morris EXAMPLES OF ROUNDED CORNERS One value for border-radius configures all four corners Example: border-radius: 15px; Four values for border-radius configure each corner separately Ordered by top left, top right, bottom right, bottom left Example: border-radius: 15px 30px 100px 5px; 43
44.
Copyright © Terry
Felke-Morris CSS3 BOX-SHADOW PROPERTY Configure the horizontal offset, vertical offset, blur radius, and valid color value Example: #wrapper { -webkit-box-shadow: 5px 5px 5px #828282; -moz-box-shadow: 5px 5px 5px #828282; box-shadow: 5px 5px 5px #828282;} Optional keyword: inset 44
45.
Copyright © Terry
Felke-Morris CSS3 TEXT-SHADOW PROPERTY Configure the horizontal offset, vertical offset, blur radius, and valid color value Example: #wrapper { text-shadow: 3px 3px 3px #666; } 45
46.
Copyright © Terry
Felke-Morris CSS3 OPACITY PROPERTY Configure the opacity of the background color Opacity range: 0 Completely Transparent 1 Completely Opaque horizontal offset, vertical offset, blur radius, and valid color value Example: h1{ background-color: #FFFFFF; opacity: 0.6; } 46
47.
Copyright © Terry
Felke-Morris RGBA COLOR Four values are required: red color, green color, blue color, and alpha(transparency) The values for red, green, and blue must be decimal values from 0 to 255. The alpha value must be a number between 0 (transparent) and 1 (opaque). Example: h1 { color: #ffffff; color: rgba(255, 255, 255, 0.7); font-size: 5em; padding-right: 10px; text-align: right; font-family: Verdana, Helvetica, sans-serif; } 47
48.
Copyright © Terry
Felke-Morris CSS3 GRADIENTS Gradient: a smooth blending of shades from one color to another Use the background-image property linear-gradient() radial-gradient() Example: background-color: #8FA5CE; background-image: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#8FA5CE)); background-image: -moz-linear-gradient(top, #FFFFFF, #8FA5CE); filter: progid:DXImageTransform.Microsoft.gradient (startColorstr=#FFFFFFFF, endColorstr=#FF8FA5CE); linear-gradient(#FFFFFF, #8FA5CE); 48
49.
Copyright © Terry
Felke-Morris SUMMARY This chapter introduced the use of visual elements and graphics on web pages. As you continue to create web pages, look back at the guidelines and accessibility issues related to graphics. The number one reason for visitors to leave web pages is too long of a download time. When using images, be careful to minimize this issue. Provide alternatives to images (such as text links) and use the alt attribute on your pages. 49
Descargar ahora