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
Open Dreamweaver. Click on Site and choose New Site.
For site name, enter a phrase that describes your site.
Click Remote Info from the left hand side.
Connect using FTP Then enter your FTP Host which is your domain name (vucreativeindusties.com) or the IP address of your server.
Host or Root Directory should be left blank.
Enter your login name and password (as specified above)
Click "use passive FTP".
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.:
Dreamweaver & HTML/CSS
Today we will examine the <DIV> element (tag) and the possiblities for style and layout.
Definition and Usage
The <div> tag defines a division or a section in an HTML document.
The <div> tag is used to group block-elements to format them with styles.
Tips and Notes
Tip: The <div> element is very often used together with CSS, to layout a web page. Note: By default, browsers always place a line break before and after the <div> element. However, this can be changed with CSS.
When to use the <DIV> element & its attributes
You can wrap a <DIV> tag around almost anything within the <BODY> tag. it is used to separate parts of a webpage so they can be positioned or styled with different CSS styles.
Applying style to the <DIV> element
the <DIV> tag can be styled in the same manner as the styles we applied last week - although generally you don't redefine the <DIV> tag, you use Classes and IDs to target groups and individual <DIV> tags for particular style elements.
Positioning content with the <DIV> element using CSS
We will experiment with positioning content today in class - generally there are 3 properties for positioning:
the left position - defines how far from the left edge the <DIV> and its contents are in pixels
the top position - defines how far from the top the <DIV> and its contents are in pixels
the Z-index (also known as stacking order) - the z-index property specifies the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order.
Zero (0) is the bottom number of the stack, and all other elements can have numbers
* There are many other properties that can also be used such as width, height, borders, colours, etc.
Nesting <DIV> elements
<DIV> tags can be nested inside each other to create complex layouts.
There are many rules about how "parent" and "child" nested <DIV> tags can work. We will experiment with a couple of popular usages which allow us to do things like centre content in the page, or to create overlapping content.
here's a little video tutorial to help you remember<DIV> tags
a coding example showing nested <DIV> tags:
<p>CX4 (Context & Culture 4)</p>
<a href="http://scr.im/blackaeonium" target="_blank">lisa cianci</a> | 2012
Diploma of Visual Art (21885VIC) | School of IT & Creative Industries | Faculty of Workforce Development | Victoria University
<a href="http://scr.im/blackaeonium" target="_blank">lisa's email address</a>
Text quoted from a source.
Written by W3Schools.com<br />
<a href="mailto:email@example.com">Email us</a><br />
Address: Box 564, Disneyland<br />
Phone: +12 34 56 78
CSS stands for Cascading Style Sheets
Styles define how to display HTML elements
Styles were added to HTML 4.0 to solve a problem
External Style Sheets can save a lot of work
External Style Sheets are stored in CSS files
Styles Solved a Big Problem
HTML was never intended to contain tags for formatting a document.
HTML was intended to define the content of a document, like:
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
When tags like <font>, and color attributes were added to the HTML 3.2
specification, it started a nightmare for web developers. Development of large
web sites, where fonts and color information were added to every single
page, became a long and expensive process.
To solve this problem, the World Wide Web Consortium (W3C) created CSS.
In HTML 4.0, all formatting could be removed from the HTML document, and stored
in a separate CSS file.
All browsers support CSS today.
CSS Saves a Lot of Work
CSS defines HOW HTML elements are to be displayed.
Styles are normally saved in external .css files. External style sheets enable you to change the
appearance and layout of all the pages in a Web site, just by editing one single file!
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.
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.