graphics and text styling basics · 2020-04-08 · css properties for formatting text •font-size:...
Post on 13-Jun-2020
15 Views
Preview:
TRANSCRIPT
C
GRAPHICS AND TEXT STYLING BASICS
Chapter 5
Web Graphics
•Graphics can make a web page more
compelling and engaging.
•Three file types used on the web are .gif, .jpg
and.png
.gif
Graphics Interchange Format
Best used for line art and logos
Maximum of 256 colors
One color can be configured as transparent –
usually this is the background color.
The background of the web page shows through
the transparent area in the image.
.gifCan be animated – consists of several images or
frames, each of which is slightly different. When the frames flash on the screen in order, the image appears animated
Uses lossless compression – nothing in the original image is lost and the compressed image will contain the same pixels as the original.
Can be interlaced - A fuzzy outline of an image is gradually replaced by seven successive waves of bit streams that fill in the missing lines until the image arrives at its full resolution.
Optimization
• To avoid slow loading web pages, graphic files should
be optimized for the web.
• Image optimization is the process of creating an image
with the lowest file size that still renders a good-quality
image, balancing image quality and file size.
• GIF images are typically optimized by reducing the
number of colors in the image using a graphic
application such as Adobe Photoshop.
.jpg - can also be .jpeg
Joint Photographic Experts Group
Best used for photographs
Up to 16.7 million colors
Use lossy compression – some pixels in the original image are lost or removed from the compressed file. When the browser renders the compressed image, the
display is similar to but not exactly the same as the original image.
There are tradeoffs with compression: an image with less compression will have a higher quality but a bigger file size. A more compressed image will have lower quality but a smaller file size.
Cannot be animated
Cannot be made transparent
Progressive JPEG – similar to interlaced display but their rendering
scheme is usually superior to that used with GIFs. With some applications, it is
also possible to tweak the order in which the scanlines are displayed. Unlike
interlaced GIFs, progressive JPEGs are often smaller than their baseline
counterparts; with slower computers, however, they take longer to display.
.png• Portable Network Graphic
• Support millions of colors
• Support multiple levels of transparency
(but browsers do not --so limit to one transparent color for Web display)
• Support interlacing
• often progressively rendered two-dimensionally. This is done by changing the order in which pixels, as opposed to scanlines, are displayed
• PNG can change the order both horizontally and vertically. This means that an image becomes recognizable even earlier in the loading process.
.png
• Use lossless compression
• Combines the best of GIF & JPEG
• Browser support is growing
ImageType
FileExtension
Com-pression
Trans-parency
Animation Colors Progressive Display
Graphic Interchange Format (GIF)
.gif Lossless Yes Yes 256 Inter-lacing
Joint
Photographic Experts Group (JPEG)
.jpg or
.jpeg
Lossy No No Millions Progressive
Portable Network Graphic (PNG) .png Lossless
Yes
(multiple
levels)
No Millions Inter-lacing
Google’s new WebP Image Format
• Google’s new WebP image format (pronounced
weppy), offers improved compression and smaller
image file sizes but is not yet ready for use in
commercial websites.
• They are currently only supported by the Google
Chrome Browser.
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
12
Image Element
• The image element configures graphics on a web page.
• Tag Used: <img> It is a stand-alone tag, void element
• Required attributes:
• src – gives the url or file name of the image
• alt – gives alternate text phrase to describe the image, necessary for accessibility. Is shown as a screen tip when the mouse hovers over the image and shown if the browser has not yet loaded the image.
• Example:
<img src=“logo.gif” alt = “My company name” />
Accessibility & Images• Required:
• Configure the alt attribute
• Alternate text content to convey the meaning/intent of the image
• If the image contains a text message, then the text should typically be the value of the alt attribute
• 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.
Copyright © 2016 Pearson Education, Inc., Hoboken NJ 14
Other commonly used attributes
• height – sets the height of the graphic, in pixels
• width – sets the width of the graphic, in pixels
It is always recommended to set the size of the image in a graphic program such as photoshop.
Example:
<img src=“home.gif” alt=“home” height=“35” width=“90”/>
Image Hyperlinks
• To create an image link, just place the <img> tag inside
a set of anchor tags <a><a href=“index.html”> <img src=“home.gif” alt=“home” /> </a>
Browsers automatically add a border to image links.
Configure CSS to eliminate the borderimg {border-style: none; }
Thumbnail Image
A small image configured to link to a larger version of that image.
<a href=“large.jpg”><img src=“small.jpg” alt=“country road” width=“200” height=“100”></a>
17
Using CSS to center an image:
• Make it a block element and set the margin to auto.
display:block
margin:auto
Example:
<img src=“nameofImage.ext” alt =“alt text”
style="display:block;margin:auto;“ />
18
19
Creating a Transparent Image• Images often have a white box around them which
doesn't look nice on a colored background.
•We want our images to blend into the background
or be transparent
•Use a photo editor such as Photoshop to make the
image transparent.
20
Matching colors from an image
When designing a web page, you may have
a logo or other image that you want to use
as a central theme for your site.
You can match the colors in that logo so
your text, links or other elements will match
21
In Photoshop you can use the eye dropper
tool to find out the hexadecimal value of
a specific color
Click on the eye
dropper icon
Then click on the
specific color in
the image you
want to match
22
Once you click on the color, it will display
at the bottom of the toolbar. Double
click on the color
The color will show here
Double click on the color
to display the color
picker
23
The color picker will give you the hexadecimal code for that color
24
Open the Summer Build Web page and add the following:
•Make the image: SYBcollague2.png transparent and then place it centered above the heading at the top of the page.
•The image should also have:
•An alternate text of "Join a Summer Build“
Background Images
• Use the css property: background-image to configure
an image as a background of an element
• By default, background images tile (repeat)
body { background-image: url(textureone.png) }
<body src=“background-image: url(textone.png)”>
Using both background-color and background-image
•You can configure both a background color and
a background image.
•The background color will display first.
•Next, the image will be displayed as it is loaded by
the browser.
•By coding both, you provide the user with a more
pleasing visual experience
The background-attachment
property•Use the background-attachment property to
configure whether the background image remains
in place or scrolls along with the page in the
browser.
•Values can be fixed or scroll (default)
body {background-image:url(flower.gif);
background-attachment:fixed }
Control how the background image displays in the browser
• Use the background-repeat property to specify
something other than the default tiling of the image.
• Values are:
repeat - this is default that tiles the image to fill up the entire background of the element
no-repeat – image does not repeat and will display only once
in the top left of the background
repeat-x – repeats the image across the top of the page
horizontally.
repeat-y – repeats the image down the left side vertically
CSS background-repeat propertyh2 { background-color: #d5edb3;
color: #5c743d;
background-image:url(trilliumbullet.gif);
background-repeat: no-repeat; }
Positioning the Background Image•You can specify other locations for the background image besides the default top left location using the background-position property.
•Valid values include percentages, pixel values or left, top, center, bottom, right.
The first value indicates horizontal position. The second value indicates vertical position. If only one value is provided, the second value defaults to center
CSS3 Multiple Background Images
• Current versions of most popular web browsers support
the use of multiple background images
• Use the background property to configure multiple
background images.
• Each image declaration is separated by a comma.
33
Progressive Enhancement
• Start with a web page that displays well in most browsers and
then add new design techniques, such as multiple background
images, in a way that enhances the display for visitors using
browsers that support the new technique.
• Configure a separate background-image property with a single
image (rendered by browsers that do not support multiple background images) prior to the background property
configured for multiple images (to be rendered by supporting
browsers and ignored by non-supporting browsers)
body { background-color: #f4ffe4;
color: #333333;
background-image: url(trilliumgradient.png);
background: url(trilliumfoot.gif) no-repeat bottom
right, url(trilliumgradient.png);
}
36
Wrapping text around an image
• To wrap text to either side of an image on a web page use
the style attribute with the float property along with the
values right or left
Example:
<img src="pic1.jpg" alt="alt text" style="float:right" />
Fonts with CSS
•The font-family property configures font
typefaces.
•When a font, that is not installed on your
web visitor’s computer, is specified, the
default font is substituted.
•Times New Roman is the default font used
by most browsers
A common practice is to use serif fonts for headings and a
sans-serif font for detailed text content.
•Create a built-in backup plan by listing multiple
fonts and categories for the value of the font-
family property.
•The browser will attempt to use the fonts in the
order listed.
p { font-family: Verdana, Arial, sans-serif }
The browser will attempt to apply Verdana (if
installed) , then Arial(if installed) or the default
installed sans-serif font.
@ font-face
•CSS3 introduced @font-face to “embed”
other fonts within web pages if you own the
rights to the font.
•The font would need to be stored in a file
with the .woff extension and saved in the
same location as the file that uses it (or
indicate a path to get to it)
Use fonts you downloaded
@font-face { font-family: fontName;
src: url(teen.woff); }
Then use font and apply to any selector
h1 { font-family: fontName, Georgia, serif }
Use fonts you downloaded
•Pay attention to copyright issues. When you
purchase a font for use on your own computer
you do not necessarily purchase the right to freely
distribute it.
•Visit fontsquirrel.com to browse a selection of
commercial –use free fonts available for
download and use.
Using Google Fonts
•Visit fonts.google.com to search for a collection of
free hosted embeddable web fonts.
•Once you find a font, just use the link tag provided
by Google in the head section of your document
and configure your CSS font-family with the
Google web font name.
Using Google fonts
CSS Properties for Formatting Text
•font-size: – sets the size of the font.
•Value can be measured in:
•Text value – xx-small, x-small, small, medium,
large, x-large, xx-large.
•Pixel Unit – 10px, 24px. May not scale in
every browser if text is resized.
•Point Unit – 10pt, 24pt. Used to configure
print version of page.
The font-weight Property
•The font-weight
property configures
the boldness of text.
•The font-
weight:bold
declaration has an
effect similar to the
<strong> tag.
The font-style Property
•The font-style property is typically used to
configure text displayed in italics.
•The font-style:italic declaration has the
same effect as the <em> html element
•Valid values are: normal, italic and oblique
footer { font-style:italic; }
The font-variant property
•Can be used to configure text with small capital
letters
h1 { font-variant: small-caps; }
The line-height Property
•Modifies the default
height of a line of text
and is often
configured using a
percentage value.
• To configure a paragraph
with double spaced lines:
p { line-height: 200%; }
The font shorthand
• There is a shorthand CSS property for declaring certain
typographical properties that is well-supported across
all common browsers, but a little quirky to work with.
• It combines 6 properties into one.
• Syntax:
The font shorthand
• Written Longhand:
Here is the same thing written using the font shorthand property
The font-style, font-variant, and font-weight are all optional
values. If they are included, they must be placed before the
font-size. But if one or more are omitted, they do not default
to the value of their parent; their value will default to the
initial value for each property.
• The font-style, font-variant, and font-weight are
all optional values. If they are included, they must be placed before the font-size. But if one or more are
omitted, they do not default to the value of their
parent; their value will default to the initial value for
each property.
• If you omit the font-size or font-family values in the
shorthand declaration, the entire line of code will
become null in relation to its application of styles
because these are mandatory elements.
The text-align Property
•This property configures the alignment of text
and inline elements within block elements, such
as headings, paragraphs, and divs.
•Valid values are: left, center, right and justify
h1 { text-align: center; }
The text-decoration Property
•This property is used to modify the display of text.
•Valid values are: none, underline, overline, and
line-through.
•One common use is to remove an underline from
a hyperlink.
a { text-decoration: none; }
The text-indent Property
•This property configures the indentation of the
first line of text within an element.
•The value can be numeric (with pt, px, or em) or
a percentage.
• An em is equal to the current font-size, for instance, if the font-
size of the document is 12pt, 1em is equal to 12pt.
p { text-indent: 5em; }
The text-transform Property
•This property configures the capitalization of text.
•Valid values are: none, capitalize, uppercase,
lowercase.
h1 { text-transform: uppercase; }
The letter-spacing Property
•This property configures the space between text
characters.
•Valid values are: normal, and a numeric pixel or
em unit.
h3 { letter-spacing: 3px; }
Configure List Markers with CSSTo change the type of bullet or number you want to use for your list, we will use the property list-style-type:to describe the type of bullet or numbering we want.
An unordered list can have the none, disc, circle or square as the value of this property to change the style of the bullet used.
Examples of each:ul { list-style-type: none;} no list markers are displayed
ul { list-style-type: disc;} filled circle (This is default)
ul { list-style-type: circle;} empty circle ul { list-style-type: square;} square
60
An ordered list can have the following type of numbering:
Lower case roman numeral: i.,ii,iii,iv etc
<ol style="list-style-type: lower-roman">
Upper case roman numeral: I,II,III,IV,V etc..
<ol style="list-style-type: upper-roman">
Lower alphabetic: a,b,c,d…
<ol style="list-style-type: lower-alpha">
Upper alphabetic: A,B,C, D…
<ol style="list-style-type: upper-alpha">
Numeric values – a number (this is default)
<ol style="list-style-type: decimal">
61
Using an image as a bullet in a list
Use an image for a bullet in a list:
Ul { list-style-image: url(bluebead.gif); }
Name of the image
you want to use
Identify placement of list markers
•Use list-style-position to specify where you
want the list marker to be placed.
•Values:
inside Markers are indented, text wraps under
the markers
outside this is default, in front of each item
Practice using CSS text properties•Add style rules to your external style sheet that will:
• Center all heading size ones.
• Change the font of the paragraphs, hyperlinks and
heading 2’s to Arial. Use similar backup fonts for full
browser support.
• Indent the paragraphs under the heading 2’s by 15px.
• Remove the underlines under the hyperlinks by using the
text-decoration property, but make them a different
color so they stand out somehow as a link.
• Format links to be a size 14pt.
• Change the bullets on the home page to use the
hammerbullet.png image found of the L drive.
• Place the list marker so that it displays indented, with the text
wrapping under it.
The Favorites Icon
•The small icon you see in the address bar or
tab of a browser is the Favorites Icon.
•A more modern way to associate a
favorites icon with a web page is to use the
<link> element.
•Three attributes are used: rel, href and type. <link rel=“icon” href=“favicon.ico” type=“image/x-
icon”>
The Favorites Icon•Using a graphics program, create an image that is 16 x
16 pixels and save it as a .gif.
•You can save the image as any image file type you
like, but many icon generators can only support GIF
or BMP files. PNG is gaining support by many.
•Also, GIF files use flat colors, and these often show up
better in the small space than JPG photographs do.
•Once you have an acceptable image, you need to
convert it to the icon format (.ICO).
Converting to .ico
•You can use an application program such as photoshop, with the ico format plug in.
•An online converter can often be more efficient if you do not have a large quantity of icons to convert.
•favicon.cc
•favicongenerator.com
•freefavicon.com
•ficoneditor.com
67
Image Maps•Unlike putting a link tag around an image to
make the entire image a link, in an image map,
the entire image does not have to be clickable,
instead either a specific area or several areas
serve as the hotspots
• Image maps can be used for navigation. A
single image is divided into many hotspots that,
when clicked, sends the visitor to another
location, often within the same site
68
Image Map Components
•Image maps consist of two components:
1. The image that you want to use for the image
map
2. A Map Definition that describes the hotspots
•There are 4 steps in creating an image map.
69
1. Selecting Images•Not all images are
appropriate to use
•Appropriate images are
ones with obvious visual
selections.
•Use the <img> element to
place the image on the
page where you want it to
display.
70
2. Determine the Borders of Clickable Areas
• Decide the shape of the hotspot you want
to use and where on the map it will be.
• Image maps can configure clickable areas
in three shapes:
• Rectangle
• Circle
• Polygon
71
Sketching the Borders of Clickable Areas
Link to
Huntington
Beach
Web page
Link to
Maui
Web pageLink to
Ft. Lauderdale
Web page
72
3. Finding the Coordinates of each hotspot• Find the x- and y- coordinates for the images, relative to
the x-axis and y-axis
• In a coordinate pair, the first number is the x-coordinate
and the second number is the y-coordinate
Finding the Coordinates• Using Pixlr or Photoshop you can find the x and y coordinates by either
drawing a box around the shape or just placing your mouse in the
areas where the coordinates are and writing them down.
73
What coordinates do we use?
•Finding coordinates for:•A rectangle shape:
• Uses 4 coordinates: The top left corner and the bottom right corner
•A polygon shape:• Uses the x & y coordinates for every point in the shape. – 5 points, 5 x’s and 5 y’s
•A circle shape: • Uses 3 coordinates: The center point x and y are the first two. The radius is used for the third point.
74
75
Mapping Image Coordinates
Example of a circle1. Find the x & y of the
Center point
2. Then move along the y-axis to the border.
3. Find the x coordinate there
4. Subtract the two x coordinatesand that is the radius or the third point
5. Our three points in this example would be “388, 154, 71”
76
•
X and y of
the center X of the
border
459388,154
459- 388 = 71
77
4. Coding the Map
•Mapping tags
•<map> and </map>
• Creates a client-side image map
•<area />
• One area tag is used for each hotspot you have on
your map
78
Attributes•Attribute of the <map> </map> tag
1. name– defines the name of the map2. id - must be the same as the name.
•Attributes of the <area /> tag1. shape – indicates the shape of the hotspot.
shape = “rect”shape = “poly”shape = “circle”shape = “point”
2. coords – indicates the points bounding the hotspotmake sure to use the appropriate number for the shape you chose.
Attributes
3. href – indicates the URL for the hotspot
4. alt – gives alternate text description for screen readers.
5. title – to specify text that some browsers will display as a tooltip when the mouse is placed over the hotspot
79
Attribute of the <img> tag
The <img> tag also needs an attribute added so the browser knows what image is being used as the map
1. usemap – used with the # symbol and a name you give it.
<img src=“skier.jpg” alt=“ski” usemap=“#ski” />
Example of coding a mapCode for the Image to be used:
<img src=“surfmap.gif” alt=“surf” usemap = “#surf”>
* placed in the spot where you want the image to appear.
Code for the Map Definition:
<map id=“surf” name=“surf”>
<area shape=“rect” coords=“15, 190,119,345” href=“page2.htm” alt=“text to display” title=“Surf Miami” />
<area shape=“circle” coords=“388,154,71” href=“page3.htm” alt=“text to display” title=“Surf Huntington Beach”/>
</map>
81
Names must match
top related