CRT - Creative Technologies
Diploma of Creative Industries (WDCI)

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

 

Class 5 - HTML & CSS with Dreamweaver


Class Activities

a reminder for how to access your website:

FTP

How to access your student web folder and place content live on the Internet:

You have been given an account on our web domain vucreativeindustries.com.

Your username will be the first letter of your firstname and your lastname with the vucreativeindustries email bit attached - e.g. John Smith = jsmith@vucreativeindustries.com. Your password will be the same with some numbers at the end e.g. jsmith98765

 

Configuring FTP for Dreamweaver
  1. Open Dreamweaver. Click on Site and choose New Site.
  2. For site name, enter a phrase that describes your site.
  3. Click Remote Info from the left hand side.
  4. Connect using FTP Then enter your FTP Host which is your domain name (vucreativeindusties.com) or the IP address of your server.
  5. Host or Root Directory should be left blank.
  6. Enter your login name and password (as specified above)
  7. Click "use passive FTP".
  8. Save this information and try to connect.
The message "Dreamweaver connected to your Web server successfully" indicates that you successfully connected to the FTP server.

Once you have uploaded something to your site, you should be able to see it - for example, if you make a homepage titled index.html, you can go to your own site to see it e.g.:

http://johnsmith.vucreativeindustries.com

 

Dreamweaver & HTML/CSS

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

Class Exercise

You will be provided with sample HTML/CSS files with a fairly standard web page layout. You can choose how you want to populate it with text and image content, applying styles to the content to design an engaging web page.

click here to see sample page

Note the use of "float" properties in the style for <DIV> tags. here's a really good website with lots of information for learning about floating elements and positioning in general:

http://css.maxdesign.com.au/floatutorial/

Try out some different float types in the sample page, or in a new test page. The best way to learn how to use floats is to experiment and try them out. you can use <DIV> tags with just a width & height property, although using images can be an easy way to practice.

I will provide some images that you can use, but if you want to grab some of your own content and use that in your design, give it a try.

 

Something else to try - 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 delend on whether you havea 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 dfferent 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 versionssuch as CS5.5 and CS6, there will be further instrucitn 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.