Week 3 Review --Working with CSS

 

The Box Model! Div's and CSS

Subjects

1. The Box Model
2. Div's
3. CSS, some simple rules

CLASS #3 Notes: 

“People don't read web pages, they scan them!" --anon

Tip of the Day

When you are going to insert a new element, or "widget" you are not familiar with, try it out first on a simple blank xhtml/html5 page.

Resources for this week -- go to these URL's

The Box Model
http://uofgts.com/BasicWD/BoxModel.html

Basic CSS Rules
http://uofgts.com/BasicWD/CSSRules.html

Homework

Style your web page. Use the following web page links to build your banner/header for you web site…

• Building the Banner (header in html5)  Parts 1 - 7

Build your Banner in Coffeecup, then try editing it in Blue Griffon… The free WYSIWYG editor

 

On-Line and desktop References for html and CSS

The following is one of the best on-line HTML and CSS resource anywhere!

CSS at Sitepoint.com

HTML at Sitepoint.com

Sitepoint also offers a "plug-in called Code Burner, it's a quick interface that resides on your desktop or in your FireFox Browser. It is linked to the sitepoint on-line references for CSS and HTML. Check out Code Burner!

Graphically Challenged?

The Cool Text web site will help you design a logo. The Cool Text Wizard

 

Enjoy your Thanks giving… we'll see you in class next week!

Week2 Review --Create a Website Class

Class Objective

To build a web site consisting of at least 3 interactive web pages.

This weeks Goal

• --Add content and format  with xhtml
• --Adding images to a web page

The xhtml rules

Before you can add html elements to a web page you need to know the rules!

http://uofgts.com/BasicWD/xhtml.html

Oh no, more rules! A few more things you need to know!
TYNTK

Add your content for your web page using the Web Editor of your Choice

Use this blank html5 page 

Basic Blank HTML5 Page 

When this above page loads in the browser, view the source, and copy it.

Paste it into a blank page in your web editor.

Then add your content in the order you want to see it displayed on the page

How? The following web page is a tutorial on how to add content and format it.

Just follow the steps and instructions. Got a question, send me an e-mail!

Building a Web Page-- How to add and format the content

(You will find the above web page in the class folder named week2… )

If you didn't attend the class, when the above page loads in the browser use the view source menu to copy the page and paste it into a blank page in your web editor.

HomeWork

after you do the above tutorial work on the following

1. Insert your content into an html5 wireframe
html5-3col.html

or
html5-2colindex.html

Those two files are already in your master folder!

2. Play with Sumo Paint and Make an image or graphic or logo

AND add it to your web page content!

An Image editor for everyone… SumoPaint

A free online paint program 

3. How to Insert an image on a web page

How to Insert an Image

 

Most of all have fun!

Uploading and Downloading files to and from your Host

 

1. Using FTP Programs

On the class disk you'll find an FTP Program (File Transfer Protocol). It's a utility program that is designed to upload/download web assets. It's Called Filezilla, and it's FREE (Open Source)

You can download FileZilla from here… FileZilla

You can find instructions on how to use FileZilla at this URL http://uofgts.com/BasicWD/lesson04.html

You can also find a FileZilla tutorial here… http://wiki.filezilla-project.org/FileZilla_Client_Tutorial_(en) 

2. Site Managers

Most web editors have ftp programs built in to Manage web site files… However the free CoffeeCup Editor does not have the capability to do ftp. That capability is reserved for the commercial version of Coffee Cup.

Bring your questions to class.