In Dreamweaver, make sure that you have Design view selected, and that you can see the CSS Styles panel. Ask me if you can't!
Last week we looked at how to include images on a web page. You will recall that HTML can display three image file formats .jpg, .gif, and .png. Most other forms of multimedia including video, animation, games, audio, pdf etc need a third-party "plugin" or media player to be able to see or hear them. (Note that HTML5 offers a native solution for MP4 video files but browser support is still variable). Most web browsers come preloaded with the most commonly needed plugins such as Adobe Flash Player, Java, and Adobe Acrobat PDF Reader but the big limitation is that if the viewer does not have the right plugin, they cannot view the content. Some plugins are configured so that the media plays in the browser window, some will open another window to play or display the media.
There are two ways to add multimedia elements to a web page:
Link to a file
or
Embed a file
Create a hyperlink to the pdf version of the Speedy APA Referencing Guide (selecting appropriate words as your link text). You can do this in Dreamweaver by clicking on the folder icon next to the Link box in the Properties panel and navigating to your mgmt230 folder where you saved the file. Select the file and click OK.
Save your work, then press F12 to view your page in a web browser. Test the link. Observe the behaviour of your browser to open the link. What happened? (Type your answer here)
Insert the Windows Media video called innovation.wmv by by clicking on the Insert menu, selecting Plugin and navigating to where you saved the file. Select the file and click OK. Then select the icon that is inserted in the page and resize it to 200 x 200 pixels in the Properties panel.
Save your work, then press F12 to view your page in a web browser. Test the link. Observe the behaviour of your browser to open the link. What happened? (Type your answer here)
Because you are looking at the video from your local system, the video file load quickly. However if you were viewing them across the internet from a standard web server they would load more slowly because video file sizes can be very large and the viewer must wait until the file is fully downloaded before it begins to play. To be usable on the web, video needs to be served from a streaming server.
What is a streaming server? Look up the definition, type your answer here and link to the source of the information.
The easiest way to get access to a streaming server is to upload your video (if you are the copyright holder) to YouTube (or other similar sites) and then embed the code provided into your web page. The video is streamed from the YouTube server, but it plays inside your html page.
Go to YouTube and find a video of Jeff Bezos (CEO of Amazon.com) being interviewed. Click on the Share button, then click on the Embed button. Copy the code you see there. In Dreamweaver, go to Code view. Make sure your cursor is where you want the video to appear in your page. Paste the code into the HTML page, then go back to Design view.
Save your work, then press F12 to view your page in a web browser. The video should play in your web page when you click on it. Note that older browsers may not support the standard YouTube embed code.
The other topic we will cover today is a more advanced look at hyperlinks. We learned in Week 2 that hypertext links have four "states": link, visited, active, and hover. So far we have focused just on the appearance of the link state, which is the way a link looks before it is clicked for the first time. You can change all the attributes (font, size, colour, text decoration etc) of the other link states too.
Create a hyperlink to Vancouver Island University (don't forget you need the full protocol and domain name). Create your desired appearance for the link state as you did in Week 2.
Visited is the appearance of a hyperlink after it has been clicked on and followed. In the CSS Styles panel double click a:visited. Use the dialog box to change the font family, text decoration, and colour of the links on your page to the way you want them to look once they have been clicked and followed. Once again you will have to think about visibility of linked text against background colour, and also how prominent you want the link to be.
Save your work, then press F12 to view your page in a web browser. Test the link.
What is the advantage of having a visited link look different from an unvisited link? Type your answer here.
Hover is the appearance of a hyperlink when someone puts the mouse pointer over it. This state can apply to both visited and unvisited links. In the CSS Styles panel double click a:hover. Use the dialog box to change the font family, text decoration, and colour of the links on your page to the way you want them to look when someone puts the mouse pointer over them.
Save your work, then press F12 to view your page in a web browser. Test the link.
What might be the advantage of using a hover state for links?
Active is the appearance of a hyperlink the moment it is clicked. In the CSS Styles panel double click a:active. Use the dialog box to change the font family and colour. Change the colour to something quite different from the link and visited link colour so you can easily see the effect.
Save your work, then press F12 to view your page in a web browser. Test the link.
As you did last week, type your username into this url (both here and in the Link box), save the page, and test it for yourself!
http://www.discovery.mala.bc.ca/web/username/mgmt230/week4.html
There is no need to send me the url, because if you have stored this file in the correct place (and haven't renamed it), then I can just check your url for myself.
Once you have done that (and know that it works), you have finished this lab.