CRT - Creative Technologies
Diploma of Creative Industries (WDCI)

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

 

Class 6 - HTML & CSS with Dreamweaver


Discuss Assessment Task 2

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

 

Class Activities

Dreamweaver & HTML/CSS

Today we will spend more time with the the <DIV> element (tag) and explore the possibilities for style and layout.

Use this class to consider how you can block out the design for your HTML Poster as a wireframe, and think of the areas of content, the layering of content and the images and text required.

A good way to get ideas and think about layout and style is to Google (image) "film posters" and "political posters" you'll see thousands of examples of posters from the last 100 years with many varying styles and layouts.

 

Class Exercise

Start working on your assessment task - HTML Poster. See if you can create a simple HTML/CSS wireframe in Dreamweaver for your poster concept using <div> tags for the layout. You can just block it out with CSS style for the <div> background-colour property using top, left, width, height and z-index properties, then you can always change and edit it later to put the real content in and tweak it until you are happy with the outcome.

A simple way to create your poster might be to develop the images that you will need as <div> tag backgrounds. You can layer up images - especially if you save them as PNG-24 format with transparency - you can have images with transparent backgrounds that you can then layer up in Dreamweaver. Then you can create further <div> layers for the text.

Remember the z-index property to make sure your layers are stacked in the right order

 

Remember this from last week - Images as Backgrounds

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.

 

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.