Presentation is loading. Please wait.

Presentation is loading. Please wait.

Visual Elements One of the simplest visual elements in xhtml is to insert a horizontal line (or horizontal rule) – use the line extends the width of the.

Similar presentations

Presentation on theme: "Visual Elements One of the simplest visual elements in xhtml is to insert a horizontal line (or horizontal rule) – use the line extends the width of the."— Presentation transcript:

1 Visual Elements One of the simplest visual elements in xhtml is to insert a horizontal line (or horizontal rule) – use the line extends the width of the page leaving a small gap on both left and right margins More interesting is the ability to place a border around a region, such as a heading – a border has properties of border-width, border-color and border-style further, you can differentiate between border-top, border-bottom, border-left and border-right Borders can also have “padding”, the empty space between the content (e.g., the text in the heading) and the border itself – padding is specified by size and can be uniform, or set for any/each of padding-top, padding-bottom, padding-left and padding-right – padding allows you to have your text stand out more

2 Padding and Borders Below on the left you can see how the content can be surrounded by padding before you get to the border Padding and borders can be individualized based on top, bottom, left and right, or treated uniformly On the right you can see what some of the various borders look like

3 More Details Border colors can be any legal color Border style can be any of double, groove, inset, none (default), outset, ridge, solid, dashed, dotted or hidden – some of these make the border look 3-dimensional such as inset and outset, others establish texture like ridge, groove and solid Border width is specified either using a pixel number (e.g., 2px) or as thin, medium, thick When specifying a border, you can either include the attribute names (e.g., border-color: red;) or you can omit them and just place the three values in your css definition – the three values being color, width, style without ; separators Padding is specified either by px or em – you can specify a single padding number which effects all four sides, or two numbers, the first used for top/bottom and the second for left/right, or four numbers to specify the padding-bottom, padding- left, padding-top, padding-right in that order – note: you cannot use the border shortcut of just specifying the 3 values if there is a padding specifier included

4 Example.border1 { border-color: red; border-width: 3px; border-style: groove; padding: 5px 3px; }.border2 { border-color: blue; border-width: 4px; border-style: inset; padding: 6px; }.border3 { border-color: yellow; border-width: 2px; border-style: dashed; padding: 10px; }.border4 { border-color: pink; border-width: 5px; border-style: outset; padding: 10px 20px; }.border5 { border-color: orange; border-width: 3px; border-style: double; } Here is an example of border 1. Here is an example of border 2. Here is an example of border 3. Here is an example of border 4. Here is an example of border 5.

5 Using Different Sizes As mentioned before, you can establish different sized borders and padding – If you want your text to appear closer to the bottom for instance, add more padding to the top – If you want to emphasize the border on the left, make it larger – Here is an example h1 { border-color: black; border-width: 10px; border-bottom: 20px; border-style: groove; padding: 20px 20px 20px 5px; font-size: 24px; } Explicit larger border on the bottom Padding of 5px on the left makes the text align closely to the left side

6 Background Images We saw in chapter 2 that we can specify a background color as well as a font color – We can also specify a background image in place of or in addition to a color – The image must be stored in a gif or jpg file – Use the property background-image You can also specify where the image will be placed – Use the property background-position – The value(s) for background-position is(are) either the text value left, top, center, bottom, right or it is a pair of numbers that represent the horizontal position and the vertical position (the x and the y coordinates) of the image if you use numbers, you can specify them as percentage values or pixels If you want the image repeated over and over across the web page, you can also specify this – Through the property background-repeat – This property will take on one of the following values: repeat (default), repeat-y, repeat-x, no-repeat

7 Heading/Border/Image Let’s put all these concepts together – Our web page should have a title that runs along the top of the page (not the title bar of the web browser itself) – We will develop our own title that will combine an image, text, border and padding imagine that the image is stored in the file image1.jpg – Assume we will only use heading h1 for our title, therefore we define all of this in our css code for h1 – The entry will include the following properties font-family, font-size, font-style (as needed) background-image, background-repeat (no-repeat) border with border-width, border-color and border-style padding – We then use title for our company near or at the top of our web page example follows

8 Example h1 { background-image: url(image1.jpg); background-repeat: no-repeat; background-position: left; border-color: CCFF33; border-width: 5px; border-style: outset; padding: 2px 1px; font-family: "Times new Roman", serif; font-size: 48px; font-style: bold; text-align: center; } Isotopes R Us And here is some information about our fine company...

9 Example: Repeat Here is an example where we use background-repeat to repeat the image in both the x and y directions – The tag is used in html code that has just a number of blank lines, we might include text here but that might be difficult to read with the colors used in the figure div { background-image: url(image1.jpg); background-repeat: repeat; border-color: black; border-width: 10px; border-style: double; padding: 10px 20px; }

10 Background Image Positions You can specify the location of a background image by using background-position – You specify two values that dictate the horizontal and vertical (x, y) starting positions of the image Offset from the upper left hand position of the border – These can either be px values or % – In this way, if you have a no-repeat image, you can control where it is placed, and if you want a repeated image, you can control where it starts As an example, the following rules will cause the background image to be positioned to the right of the text rather than the left h1 { background-image: url(background1.gif); background-position: 500px 0px; background-repeat: no-repeat; text-align: center; } This is heading 1

11 Background Colors + Images Recall from chapter 3 that we can specify background colors as well as font colors – h1 { background-color: red; color: yellow; } What if we use both background colors and a background image? – The browser first displays the background color and then overlays it with the background image – If you use no-repeat, this is fine – If you use repeat, the image will tile over the color If the image has transparent parts, you will see through the image to the background behind it – However, with background-position, you can move the image (repeated or not) to the right side and still have background color on the left – Or by using repeat-y, you can have the image tiled running down the left side and have the remainder of the of the section with a background color p { background-image: url(someimage.gif); background-repeat: repeat-y; background-color: blue; color: white; }

12 The Tag Using background-image, you are placing an image behind the text If you want to have images in place of text, you will use the tag – The most important property for this tag is src, which will be used to specify the URL of the image (jpg, gif, png) A simple img tag is – In this case, the image is expected to be found in the same directory as this web page – You can also specify images in other locations including other web sites be warned that if you link your web page to another using img src, if that image is not available, you will wind up with a broken image symbol on your web page so you will typically only want to link to images that you have access to (specifically, ones in your own web site)

13 More Properties of align – right, left (default), top, middle, bottom alt – a text string that you supply that will be used in place of the image if the user’s browser has been set to omit pictures (for downloading speed) border – image border size in pixels (deprecated), 0 will prevent the border from being displayed height, width – the size that the image will take up on the page in pixels (if omitted, the image will load using its normal size) id – an id name given to the image like a variable – Example: hspace, vspace – horizontal or vertical space around the image so that you can more directly control how the image looks amid text – Note: align bottom and hspace/vspace have been deprecated

14 Alignments

15 Using Images as Links Between the and, we typically place text as our link – That is, it is the text that we click on to activate the link and the text that indicates it is a link by being underlined We can add to or replace the text with an image – So our image can become the link We can include any of the img properties that we want including height/width, align, etc – In order to indicate that the image is a link, it has a blue border You can remove the border by adding border=0 to your img tag but this may not make much sense, without the border, a visitor to your page may be unaware that the image is a link By using CSS, you can also change the border’s color or style – we will see an example of this next

16 Example Here is a link and now we have an image as a link img { border-style: ridge; border-color: black; border-width: 5px; padding: 2px; } What would happen if we had two images as links and we wanted different borders around each image/link?

17 Using Thumbnails You have no doubt seen and clicked on thumbnails which then loads the full sized image into your browser How can we set this up? – First, for each image, create a small version using some image editing software (thus, you will have 2 versions of every image) – Second, you use the small image as the link image, the link points to the big image here, thumb1.jpg is the thumbnail image for image1, clicking on the thumbnail image causes the large image to load – This is far better than the following why? because the thumbnail will be a smaller file and so loads much more quickly, so the first approach loaded a small file and left you the option of loading the larger file, but the second approach loads a large file but only displays it in a small size

18 Image Maps You have probably used these before and either never thought about it or wondered how they were implemented – An image map is a graphic where you can point at different locations of the map to activate different links To the right, for example, is a map showing the locations (cities) of the NFL football teams, click on any of the given team emblems and it will take you to a page for that particular

19 How Image Maps Work First you have to create the image Next, you have to specify in your xhtml code where each clickable area is – We will refer to these areas as hot spots We define a clickable area by its x, y coordinates and size – There are three types of areas we can define Rectangles: defined as rect, with 4 int values, the upper-left x, y coordinate and the lower-right x, y coordinate Circles: defined as circle, with 3 int values, the x, y coordinate that is the circle’s center, and the circle’s radius Polygons defined by polygon, in which we supply at least 3 pairs of x, y coordinates, each pair representing a corner point of the polygon – e.g., 0,0, 12, 0, 12, 5, 6, 9, 0, 5, might represent the figure to the left if that figure started at location 0,0 of the image

20 To Define an Image Map First, work out the coordinates for each hot spot – This can be difficult, especially if you are dealing with say a map of US states – some image editing/creation software like Adobe photoshop can generate the hot spots for you you will practice this in an exercise Define a tag – … – The name is used by the img tag to tie the image to the map (coordinates of hot spots) – In between the and tags, we place tags each tag describes one hot spot and includes an href to specify the link, the type of hot spot (rect, circle, polygon) and the hot spot’s coordinates – After, include an tag that includes src as before, but now includes usemap=“#...” where the … is the name given in the tag – the name must match exactly – NOTE: the tag can include other properties as before, e.g., height, width, alt

21 Example Here is a simple example using the image imagemap.jpg shown to the right – The coordinates were worked out in Paint when the image was drawn – If you do not know the coordinates, it may be a matter of guesswork to figure them out – In this case, the shape rect was used because the text “Selection #” most closely matches a rectangle – a circle would not be useful and a polygon might be too complex for the image

22 More Challenging Example To the right is an image found off a website to demonstrate the tri-state region of Cincinnati – Yeah, the drawing is pretty crappy, but lets forget about that What if we wanted to make an image map out of it? How do we know if the user has clicked in IN, OH or KY? – What kind of region should we define? – We could use a circle defined as being the center of the state with the radius being the distance from center to a border. this would be easy to define but would respond poorly if the radius overlapped between states or if the radius was too small to cover the entire state – a circle might work well for OH since it is rounder than the other states – A rectangle might work fairly well for IN and KY but not OH, and what if you click close to a border? – Polygons may be hard to define given the shapes with the curves and “bumpiness” but would give us the best accuracy but how do we define these states as polygons?

23 Defining the Map Recall to define an image map you use the … tag where you place tags as the individual areas (we have 3 areas, IN, KY, OH) – Load the image into Paint move the mouse cursor along the border and in the bottom of the Paint window toward the right, you will see the coordinate make a note of the coordinates at each significant point of a region there seem to be about 6 significant points for IN and OH – My definition is shown below, its not perfect, but it works fairly well

24 Practical Considerations of Graphics Consider image load time – Images tend to be far larger in size than text, if you have a lot of images in your web page, it takes longer to load an image begins to display when only a portion of the file has been loaded, using a technique called interlacing (see page 129) but even so, a lot of large images will cause the web page loading time to be much longer than a user may want to sit through Total size of web page + media should be <= 60 KB Images, if used as background, can interfere with text – Generally, you do not want to use an image as a background, but if you do, select your text color wisely Reuse images – If the image is loaded for one area of the page, it is already available (in the user’s cache) to be used again, so using an image three times on one page only requires loading it once this is also (usually) true if the same image is used on multiple web pages thanks

25 Other Considerations Test the image’s quality and size out before you publish your page – Do not increase the size of an image beyond its resolution – Do not decrease the size of an image such that it is not understandable, particularly if the image has text – Make sure you have kept the height and width proportional – If possible, test your image on all platform of computers Macintosh’s and Windows machines use different levels for contrast and brightness, an image may look good on one platform but not the other Use height and width as necessary to control the size of the image so that it does not monopolize the page and so that multiple images can line up Ensure the images used are not copyrighted Do not use inappropriate images! Place images in their own image directory and reference them using.. – For instance, if your web page is in a directory ~foxr/INF286 and you have a directory called ~foxr/IMAGES, then use

26 Graphics Types Web browsers support 3 types of graphic images: – gif (graphics interchange format) lossless images but limited colors (255) the colors are based on a palette – if someone uses a different palette to create their gif, it will appear differently than expected when displayed in your browser can use a transparent background to blend in better with your web page background, can be interlaced and can be animated best used for line art and logos – jpg or jpeg (joint photographic experts group) lossy compression – you lose quality to reduce the image storage capacity but capable of displaying a full range of colors (16.7 million) progressive jpg allows for something like interlacing so that image displays while still loading – png (portable network graphic) combines the best of gif and jpg

Download ppt "Visual Elements One of the simplest visual elements in xhtml is to insert a horizontal line (or horizontal rule) – use the line extends the width of the."

Similar presentations

Ads by Google