ideally have started work on it. The WWW assignment is due on Monday 28 th October at 4pm.

Transcription

1 CSCU9B1/PDMU9L7: WEB PAGE DESIGN 5 Learning Outcomes INTERACTION AND MULTIMEDIA By the end of this workshop, students should be able to: Use classes, pseudo-classes and contextual selectors to create customized styles. Use images as links Use CSS to create more stylish button and lists. Understand the different multimedia formats common to web pages. Add multimedia to web pages. Remember: Attendance: Record your attendance each week. Help: Ask us if you have a question. Checkpoints: keep up to date with checkpoints. Assignment: You should be thinking about your WWW assignment, and ideally have started work on it. The WWW assignment is due on Monday 28 th October at 4pm. Pseudo-classes» First, open up guide6.htm from your Web Design folder (from last time) in TextPad.» Save it as guide7.htm. Now open it in Internet Explorer too. You ve seen classes, now for pseudo-classes. The idea of a pseudo-class is to let you specify style elements relating to the state of the element you re styling. This is a bit complex, so let s look at an example. CSS offers some predefined pseudo-classes. The most commonly used of these are pseudo-classes of the anchor <a> tag. In fact, an anchor can be in one of four states: link it s a link to another document. The default style is blue and underlined. visited as above, but you ve clicked it previously. The default style is purple and underlined. hover when you mouse-over the link, something happens. The default is no change. active when you click the link, something happens. The default styling is no change.» Add the following rules into the style sheet. Note the use of a colon (:) to separate the selector from the pseudo-class name. a:link {color: #483d8b a:visited {color: # a:hover {color: #0000ff a:active {color: #ff0000» Save and refresh. COMPUTING SCIENCE & MATHEMATICS PAGE 1 OF 8

2 » Move the cursor over some of the links and notice that they change colour (to strong blue) when hovering over the link.» Click on a link, holding the mouse button down, and notice that the link colour changes to red (i.e. when the link is active). This is all very nice but it s unlikely to feature in the nominations for best animation on the web. Let s try to produce a more interesting effect! Contextual selectors We can combine CSS containers with pseudo-classes, relating the use of the pseudo-class to the context it s in. For example, we can define a rule for a:link, but only when it s found inside the div#quicklinks container.» Add the following rules to the style sheet. div#quicklinks a:link { color: #483d8b; text-decoration: none div#quicklinks a:visited { color: #708090; text-decoration: none div#quicklinks a:hover { color: #ffffe0; font-size: 110%; font-weight: bold; text-decoration: none; background: #483d8b; div#quicklinks a:active { color: #ff0000; font-weight: bold; text-decoration: none As you type, work out what the definitions mean. Note the space between the context (div#quicklinks) and the element being specified (e.g. a:active). Note also the use of 110% as a font size: this is a relative size.» Save and Refresh. Contextual selectors are a really useful approach because we don t have to change anything in guide7.htm.» Try moving over the links in the Quick Links table. The link being hovered over should undergo a colour reversal and appear in a larger font without underlining. It s not quite right get, because you can see that making the text bigger makes it jump around rather disturbingly. You can fix this with styles by setting a value for the height and width of <td> elements. Add the following to your td rule: height: 25px; width: 110px;» Save and refresh. COMPUTING SCIENCE & MATHEMATICS PAGE 2 OF 8

3 The footer section looks a bit forlorn. Often the text in such sections appear smaller than in the rest of the document.» Add the properties font-size: 75%; padding: 40px; to the div#footer rule. Let s use contextual selectors here too, to change the style of the links.» Add the following rules to your guidestyle.css div#footer a:link {text-decoration: none; div#footer a:visited {text-decoration: none; div#footer a:hover {text-decoration: underline; div#footer a:active {text-decoration: none; The result should be that the links are not underlined except when the mouse moves over them.» Save and Refresh. Images as links Links need not be text. Images can be used as clickable parts of web pages.» To make the picture of Stirling Castle in guide7.htm function as a link to the same URL as the text, wrap the entire <img /> tag with an <a>... </a> pair so the HTML should read: <a href=" ngcastle/"> <img src="unipics/stirlingcastle.jpg" height="150" alt="a view of Stirling Castle" /></a>the Castle overlooks...» Save and Refresh. The image will now have a thin blue border around it. The colour of the border will change after the target link has been visited. You could do this with any of the images in your document. Beautiful Buttons It would be possible to make your guide more attractive by making fancy buttons. One way to do this is through images. If an image can be a link (as above), then the image might be something like this (taken from Tesco.com) : This starts to make your browsing experience more like using an application. Such button images can take a long time to prepare using specialist applications: CSS can help. COMPUTING SCIENCE & MATHEMATICS PAGE 3 OF 8

4 In guide7.htm add this text after the footer: <p> <a href="#para1" class="button">go to para1</a> <a href="#para2" class="button">go to para2</a> <a href="#para3" class="button">go to para3</a> <a href="#para4" class="button">go to para4</a> <a href="#para5" class="button">go to para5</a> </p> (essentially, you can duplicate the footer, and add the class= button definition to each link). When you refresh the page you should just see the footer duplicated. Why is this? Now switch to your guidestyle.css: you need to add some definitions for the buttons class..button { display: inline-block; white-space: nowrap; background-color: #ffdead; border: 1px solid #483d8b; padding: 0 1.5em; margin: 0.5em; font: bold 1em/2em Arial, Helvetica; text-decoration: none; color: #ffffcc; As above, think about each line as you type. What do you think it means? If you re not sure, check the tutorial at W3C schools. Check your page in Internet Explorer. How has the new CSS changed the presentation? Still rather chunky? More sophisticated CSS is required. Add the following to your list of properties for the button class: border-radius:.2em; What did that do? (If nothing, you need to check your browser is running in the right mode. Select Tools: Developer Tools, and then change Document mode to at least IE9 standards). Now add background-image: -ms-linear-gradient(top, #ffffcc, #ffdead); filter: progid:dximagetransform.microsoft.gradient(startcolorstr='#ffffcc', EndColorStr='#ffdead'); box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3); Work out what each line does by adding them one at a time to your CSS and checking the effect. You should end up with something like this. COMPUTING SCIENCE & MATHEMATICS PAGE 4 OF 8

5 Using CSS for buttons is great because the page is faster loading (there are fewer images than if you d used images for the buttons). Also, the buttons scale when the font size changes, and it s easy to change the colour of the button. Do it now. Change the background of the button to bright green! You ll need to change the gradient colours too to get a good effect. (Change it back when you re done.) There s much more you can do with buttons. See the tutorial at Notice that the tutorial gives all the options for different browsers (-ms, -mz, -webkit etc). Add the effects for hover, active, and focus to your own CSS. Remember to set the colours to something appropriate for your colour scheme. Stylish Lists CSS3 has lots of other tricks: too many to cover here. But let s look at one more: how to make lists appear more stylish. Add the following to your guide7.htm after the text about the Royal Institute of British Architects. <p> The University of Stirling has more than one campus: <ol class="rounded-list"> <li><a href=" Campus</a></li> <li><a href=" highlands-and-western-isles/highland-campus/">highland Campus</a></li> <li><a href=" highlands-and-western-isles/western-isles-campus/">western Isles Campus</a></li> </ol> </p> You can find those links from the University campus life link: (and then just cut and paste from your browser into the above, to save typing). Refresh to make sure your HTML is ok. Now add suitable styling rules to your CSS file. First, a rule to govern the ordered list display: ol{ counter-reset: li; list-style: none; *list-style: decimal; font: 15px 'trebuchet MS', 'lucida sans'; padding: 0; margin-bottom: 4em; text-shadow: 0 1px 0 rgba(255,255,255,.5); COMPUTING SCIENCE & MATHEMATICS PAGE 5 OF 8

6 Save your CSS and check the result. Now add the rounded list class definitions. Notice that this is for links within a rounded list (both tags given as the selector):.rounded-list a{ position: relative; display: block; padding:.4em.4em.4em 2em; *padding:.4em; margin:.5em 0; background: #DAA520; color: #ffffcc; text-decoration: none; border-radius:.3em; transition: all.3s ease-out; Save, and check the result. Looking better already? Now add some animation on mouse movement:.rounded-list a:hover{ background: #F5DEB3; Lastly, add some more sophisticated numbers to the list:.rounded-list a:before{ content: counter(li); counter-increment: li; position: absolute; left: -1.3em; top: 50%; margin-top: -1.3em; background: #483D8B; height: 2em; width: 2em; line-height: 2em; border:.3em solid #fff; text-align: center; font-weight: bold; border-radius: 2em; transition: all.3s ease-out; There are lots of other things you can do to lists by changing these parameters. As before, make sure you understand what each part does by commenting it out and reloading the page. Change some of the parameter values: what happens? Consider the colour choices. Are they suitable, given the guidelines presented in the lectures? Improve the colour choices by changing the relevant parameters. COMPUTING SCIENCE & MATHEMATICS PAGE 6 OF 8

7 This CSS came from the following tutorial: Check it out and see what else you can do to lists. What s Multimedia? Multimedia is basically anything that contains more than one medium: for example a Word document or web page containing text and pictures could be called a multimedia document. The term is more frequently applied to media containing sounds, music, animation, video and so on. You ve already used Multimedia today (text and images), and previously in the PowerPoint workshops. Multimedia on the web comes in many flavours. Some kinds of multimedia you ve seen already (images). These are dealt with by the browser directly. Other kinds of multimedia may be handled by helper applications called plug-ins.» I ve prepared some files for you to use, so copy the contents of the Web5 folder from the CSC9B1 Groups folder to your Web Design folder. Thumbnails Large numbers of images on a web page will increase the download time for the user, so what can you do if your web site needs to host lots of images? For example, cycling through the Alps seems to be a very popular pursuit among people who like to produce web sites containing their holiday pictures (and why not?). Obviously, you could break your site into a number of pages so that no page will exceed a maximum acceptable size. Another solution is to have small versions of the pictures acting as links to the full-size images so that the user can enlarge a chosen image by clicking on the small (thumbnail) version.» To see how this works, use the picture called wallaceandcampus.jpg (the third one down in the page) as a link to the image wallaceandcampusbig.jpg in your unipics folder. In other words, wrap the <img /> tag for wallaceandcampus.jpg inside anchor <a> tags using wallaceandcampusbig.jpg as the href attribute. <a href="unipics/wallaceandcampusbig.jpg"><img src="unipics/wallaceandcampus.jpg" height="150" alt="a view of Stirling University campus and the Wallace Monument" /></a>the University Campus,...» Save, refresh and try it out! Sound and video» Open the file multimedia.htm in Internet Explorer and TextPad. This is just a simple web page with a heading and a number of links. (Sometimes there are problems in the lab with the Flash clock in this file. If you have this, then please use multimedia_noflash.htm instead.)» Click on each of the links in turn. Notice that we have used the <a> tag to point directly at the media files. What should happen is that IE should start up a helper application (or plug-in), probably in the shape of Windows Media Player, to play the media files. This is all very well but it doesn t really count as being part of the web page.» Switch to your guide7.htm document. Add the HTML COMPUTING SCIENCE & MATHEMATICS PAGE 7 OF 8

8 <embed src="bach.mp3" hidden="true" /><br />» to the file. Does it matter where? Try it and find out!» Save and refresh. This should cause the sound file to play automatically in the background when the page loads. The hidden attribute prevents a sound console from appearing in the page. Setting hidden equal to false or just removing the attribute will allow the users of the page to control aspects of the sounds including whether to turn it off.» Now let s add a movie. Do a search to find a suitable video. For example, and click on the embed link at the bottom of the film. Just copy and paste that code into your guide7.htm (it will be long and complicated!)» Save and refresh. This should have the effect of inserting the movie to your page, with all its controls Checkpoint Demonstrate your guide7.htm web page, with CSS styled links and lists, fancy buttons (with hover, active and focus effects), sounds, film. Don t stop here There is far far more to HTML5 and CSS3 than we can present in this module. The good news is that there are lots of tutorials around to help you. See the links on the CSC9B1 lectures web page for more information. We particularly recommend: W3C tutorials Two current lists of CSS tricks are: But just type CSS3 tutorial into your favourite search engine to find more. As with all computing, the best way to learn is by doing. HTML5 Have a look at some of the demos around (see links on the CSC9B1 lecture page). Web Assignment You should be working on your web design assignment, due after the mid-semester reading week. You are encouraged to get help from the demonstrators with your development if you wish. The remaining sessions on web design will focus on putting your web design in a public place, and on assessing your design (and each others!). COMPUTING SCIENCE & MATHEMATICS PAGE 8 OF 8