CRT - Creative Technologies
Diploma of Creative Industries (WDCI)

Teacher Name - lisa.cianci@vu.edu.au
Class Website - http://lisacianci.vucreativeindustries.com/2012/CRT

 

Class 7 - User Testing, Interactivity & Interface


Discuss Assessment Task 2

Review the assessment task and discuss options for the topic you might choose for your HTML Poster.

 

Class Activities

1. How to create a "fancy" font piece of text in Photoshop with transparent background

In Photoshop, create a new file with transparent background. You can then experiment with fonts in different sizes and colours, using different effects. Make sure your background stays transparent. You can save your working file as a PSD (Photoshop file), but when you want the image you need for the web, you will need to do an "Export for Web" output and save the file as a PNG-24 with transparency (check the box that allows transparency).

You must save this image in the folder that has all of your HTML content. The best practice is to have a sub-folder in your web folder titled "images" and put all of your images in there.

Remember the requirements for image format:

JPG - good for background images as they are smaller than PNG-24. you can select a compression quality so that if you have a large background image, you might be able to get a way with a "medium" quality compression for your JPG which will give a small file size.

PNG-24 - good for high quality images and images that require transparent backgrounds. you may need transparency in images that you want to layer together in the web page.

Resolution: It is important to make sure that your images for the web are only 72 dpi (dots per inch) because this is the maximum that your screen displays content at. Higher dpi such as 300, 600, 1200 are used for printing purposes, and are much too big for the web.

Dimensions: you must consider the width and height in pixels for your images - you don't want to use a massive image and scale it down because this is a waste of broadband for your user to download. This is why it is important to create wireframes and think about the entire width/height for your screen size, then plan the images that you need according to that size.

For example, if your screen size is 1200 x 800 pixels, then your logo may only be about 400 x 200 pixels in size. So if you have a logo that's 1000 x 500 pixels, you need to resize it in Photoshop, then save a copy in your web/images folder and use the smaller version. you need to apply this method to all of your image development for the web.

 

 

2. How to layer background image and content in <div> layers in Dreamweaver

You can use images as your background instead of colour. This requires understanding styles for "tiling" the image to see how it repeats in the page or element. If you want a background image for your whole page, the image needs to be large. There are considerations here because of file size. I try to make a JPG image with low compression so that even if the image is large in width & height, it is still small in Kilobytes so it loads quickly.

to set a background image for your page, go to the Modify menu in Dreamweaver and choose Page Properties. You can set a number of different page properties that will affect the whole webpage. For the background image, choose Background Image and link to a file in your Dreamweaver Site - remember, you must put the files in your Site images folder before you link to it.

The other property you need to know for background images is the Repeat property. By default, any background image in a webpage will tile (repeat) itself in both X (across, left-right) and Y (down, up-down) directions. You can control this with CSS styles and the Repeat property in the Page Properties panel makes the task easier by allowing you to choose from a drop-down list.

Choose from repeat, repeat-x, repeat-y or no-repeat. your selection will depend on whether you have a small image that can be tiled, or a very large image that will not be repeated. You should consider how big the contents of your webpage will be and how much scrolling will be involved to make sure your background image is adequate. There are many tricks and techniques that designers use to make clever background images that tile in different ways like very thin but very long images with gradients that only repeat on the X so you get a very small file size, but it looks as if your whole background has a gradient image covering it. In the early days of web design, there were some pretty horrible background tiled images - even very annoying animated GIF images as backgrounds, so if you want to make a "retro" website circa 1995, make a loud, irritating small image and tile it over your entire background.

sample folder with HTML file, CSS file and images

 

The sample folder contains an example I have created that demonstrates the following:

a large background image ( low compression JPG)

several <div> tags with text and image content - some <div> tags contain text as PNG-24 images with transparency

a CSS style sheet which controls the style and position of all the DIV tags including the left, top, width, height and z-index (stacking order of the content).

 

Reference

HTML Elements

http://www.w3schools.com/html/html_quick.asp

HTML Quick List from W3Schools. Print it, fold it, and put it in your pocket.

Video Tutorials

Adobe TV has some of the best tutorials and videos so you can refresh your memory when you are out of class. We are using Adobe applications of the CS4 version (which are not the latest) so it is best to use the documentation and tutorials for CS4 because newer versions have different menus and functionality which might be confusing.

http://tv.adobe.com/show/learn-dreamweaver-cs4/

If you want to look at later Dreamweaver versions such as CS5.5 and CS6, there will be further instruction about using HTML5. CS4 doesn't automatically show code hints for HTML5, but you can use HTML5 in the code view.

 

Other Things to Do/Remember

Keep working on your blog content & commenting on colleagues' blogs.

The HTML CSS Poster is due by the end of next week's class, so you need to be working on it in class and at home.