CRT - Creative Technologies
Diploma of Creative Industries (WDCI)

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

 

Class 4 - FTP, HTML & CSS with Dreamweaver


Class Activities

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 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:

    1. the left position - defines how far from the left edge the <DIV> and its contents are in pixels
    2. the top position - defines how far from the top the <DIV> and its contents are in pixels
    3. 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:

 

<div id="wrapper">
  <div id="header">
    <p>CX4 (Context &amp; Culture 4)</p>   
  </div>
  <div id="content"> 
    <p class="style20">
      <a href="http://scr.im/blackaeonium" target="_blank">lisa  cianci</a> | 2012
    </p>
    <p class="style21">
       Diploma of Visual Art (21885VIC) | School of IT &amp; Creative Industries |  Faculty of Workforce Development |  Victoria University 
    </p>
    <p class="style22">
      <a href="http://scr.im/blackaeonium" target="_blank">lisa's email address</a>
    </p>
  </div>
</div>

 

and some styles for positioning the <DIV> tags:

#wrapper {
     text-align:center;
}
#header {
     text-align:left;
}
#content {
     width: 800px;
     height: 40px; 
     margin-top:120px;
     z-index:2; 
}

 

 

 

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.

 

HTML Basic Document

<!DOCTYPE html>
<html>
<head>
<title>Title of document goes here</title>
</head>

<body>
Visible text goes here...
</body>

</html>

Heading Elements

<h1>Largest Heading</h1>

<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>

<h6>Smallest Heading</h6>

Text Elements

<p>This is a paragraph</p>
<br /> (line break)
<hr /> (horizontal rule)
<pre>This text is preformatted</pre>

Logical Styles

<em>This text is emphasized</em>
<strong>This text is strong</strong>
<code>This is some computer code</code>

Physical Styles

<b>This text is bold</b>
<i>This text is italic</i>

Links

Ordinary link: <a href="http://www.example.com/">Link-text goes here</a>
Image-link: <a href="http://www.example.com/"><img src="URL" alt="Alternate Text" /></a>
Mailto link: <a href="mailto:webmaster@example.com">Send e-mail</a>

A named anchor:
<a name="tips">Tips Section</a>
<a href="#tips">Jump to the Tips Section</a>

Unordered list

<ul>
  <li>Item</li>
  <li>Item</li>
</ul>

Ordered list

<ol>
  <li>First item</li>
  <li>Second item</li>
</ol>

Definition list

<dl>
  <dt>First term</dt>
    <dd>Definition</dd>
  <dt>Next term</dt>
    <dd>Definition</dd>
</dl>

Tables

<table border="1">
  <tr>
    <th>Tableheader</th>
    <th>Tableheader</th>
  </tr>
  <tr>
    <td>sometext</td>
    <td>sometext</td>
  </tr>
</table>

Iframe

<iframe src="demo_iframe.htm"></iframe>

Forms

<form action="http://www.example.com/test.asp" method="post/get">

<input type="text" name="email" size="40" maxlength="50" />
<input type="password" />
<input type="checkbox" checked="checked" />
<input type="radio" checked="checked" />
<input type="submit" value="Send" />
<input type="reset" />
<input type="hidden" />

<select>
<option>Apples</option>
<option selected="selected">Bananas</option>
<option>Cherries</option>
</select>

<textarea name="comment" rows="60" cols="20"></textarea>

</form>

Entities

&lt; is the same as <
&gt; is the same as >
&#169; is the same as ©

Other Elements

<!-- This is a comment -->

<blockquote>
Text quoted from a source.
</blockquote>

<address>
Written by W3Schools.com<br />
<a href="mailto:us@example.org">Email us</a><br />
Address: Box 564, Disneyland<br />
Phone: +12 34 56 78
</address>

 


 

About CSS

  • 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!

http://www.w3schools.com/css/

 

How to use styles in Dreamweaver

You will be shown in class how to create simple styles for your webpage exercise

http://www.adobe.com/devnet/dreamweaver/css.html

 

 

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.

 

Reading/viewing for next week:

Differences Between HTML4 & HTML5

http://www.w3schools.com/html5/html5_intro.asp

 

 

Other Things to Do/Remember

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