CRT - Creative Technologies
Class 5 - HTML & CSS with Dreamweaver
a reminder for how to access your website:
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 = firstname.lastname@example.org. Your password will be the same with some numbers at the end e.g. jsmith98765
Configuring FTP for Dreamweaver
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.:
Dreamweaver & HTML/CSS
Today we will spend more time with the the <DIV> element (tag) and explore the possiblities for style and layout.
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.
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:
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.
Other Things to Do/Remember