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!
HTML can support three image compression formats (other file formats such as .psd will not work on the web):
JPEG which uses the file extension .jpg - it is the most commonly used format for photographs on the web
GIF which uses the file extension .gif - it is best used for diagrams and simple images which use blocks of colour
PNG which uses the file extension .png - it was designed specifically for web use as a replacement for the GIF format, and is not really suitable for photographic images
The html code for inserting images on a page is the same no matter what image format you use. Place your cursor where you want the image to appear on the page (just here, will be fine!) In Dreamweaver, go the the Insert menu and select Image. From the dialog box that appears, go to your images folder and select the sunset.jpg image. Click OK.
Another dialog box will open, called Image Tag Accessibility Attributes. Here, in the box for Alternate Text, you will enter a description of what the image shows. This is so that the visually impaired (or people who have images turned off) can get information about what is in the image. This is particularly important if you create images with words in them for navigation purposes. This text is also used by search engines for image search and relevancy ranking. Once you have entered a description, press OK and your image will be inserted in this page. (Don't worry about entering anything in the Long Description box).
Save your work, then press F12 to view your page in a web browser.
Back in Dreamweaver, press enter, then insert the .gif and the .png images in the same way.
Save your work, then press F12 to view your page in a web browser. You should be able to see all three images.
In Dreamweaver, select one of the images, then go to Code view and have a look at the code that has been inserted. The "path" to the image file shows where it is stored on the server.
When you looked at the image code you probably (I hope) also noticed that Dreamweaver had inserted the size (width and height) of the image in pixels. If you click on one of the images you inserted in this page you will also see this information in the Properties panel. Image size in html is always specified in pixels. Search for a definition of pixel and type it here. Include a link to the source of the definition.
It is important to resize images so that they "fit" on the page when viewed on an "average" monitor. The original version of that sunset photograph is actually 4000 pixels wide x 3000 pixels high. If you inserted it into this page without resizing it, then viewed it on a monitor with (for example) 1366 x 768 resolution, you would have to scroll sideways and down to be able to see it. The browser does NOT resize it for you - the browser displays the image at the size specified in the code (or if no size is specified, then it displays the actual size of the image). So the best way to include images is to resize your image to an appropriate size in pixels that works with the other elements on your page, and then make sure that size is specified in your html code.
Select the sunset image and change its size to 4000 x 3000 in the Properties panel. Save your work, then press F12 to view your page in a web browser. See what I mean? Change the image size back to the original, and actual size(500 x 258).
Another important reason for resizing images is file size. The larger the original actual size of an image in pixels, the larger the file size and the longer it will take to download. But note that when you resized the small sunset picture, you didn't change the size of the file, just the way it was displayed.
So to optimize an image for the web, you would start with the original actual size, then either crop it (to show just a portion of the photograph), or resize it to make it smaller (or both).
When you resize an image, be careful to keep the aspect ratio the same as the original (called scaling or constraining proportions), otherwise it will appear distorted.
You should prepare your images by cropping or resizing before you start work on building your web site. For convenience in the lab you can use an online image editor such as http://pixlr.com/editor/. Open the sunset image in Pixlr and experiment with cropping and resizing. When you save the image, rename it, then insert the new version below this paragraph. The important thing to understand is that you have changed the actual size of the image by this process. Never resize an image to make it bigger, the result will be distorted and pretty ugly. Always start with the largest actual image size that you can and resize downwards from there.
In basic html the options for positioning an image on a page are somewhat limited. When we look at the use of CSS for layout and positioning in Week 5, we will revisit this topic and experiment with making text flow around images etc.
Any image on a web page can be make into a hyperlink. In Dreamweaver, select the image of the dice. In the Properties pane, you will see a box labeled Link. Create a link from the image to the VIU home page by typing the full URL (including the http) into this box.
Save your work, then press F12 to view your page in a web browser. Test the link.
The basic rule is that copyright ownership of an image rests with its original creator (eg. the photographer or digital artist). If someone else wants to use an image, then they must get permission from the owner. This is particularly important if the image is to be used for commercial purposes (otherwise it is regarded as theft of intellectual property). In the university setting the "Fair Use" provisions provide some flexibility where images are used only for school projects. For your web project you can use your own images, you can get permission from the copyright owner, or you can find images on the web. If you want to use images you find on the web, rather than relying on Fair Use, you should use images licensed specifically to be used by others.
Rights under copyright can be assigned to others (without changing the underlying ownership). The most common way to do this is to license works under a Creative Commons (CC) licence. There are various types of CC licence, but in simple terms, you can modify, adapt, and/or build upon works that are licensed for that purpose.
I own the .jpg and .gif images you have used for this assignment. I still own the copyright to those images, but have assigned you the rights to use and modify them. The dice image is licensed under CC by its creator.
On the course website you will find a link to a Creative Commons search engine. Use this to find an image licenced under Creative Commons, resize it (keeping the same aspect ratio), then insert it below this text. Make the image into a link back to its source (the web page it is on - not Google Images, but the actual source website).
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/week3.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.