bravemouse header image 1

bravemouse

teach yourself

bravemouse header image 2

CSS Positioning Intro Part 1: Why use CSS Positioning?

August 11th, 2009 by klip
Respond

This is the first post in a short series on how to use Cascading Style Sheets to control the layout of HTML web pages.  To get the most out of this series, you should already know some basic HTML & CSS, which you will find in the HTML & CSS Day Course.

CSS Positioning is the art of using Cascading Style Sheets to control the layout of a web page.  You may already have come across CSS positioning, if you have ever tried to edit your own blog template.  Once you understand the basics of CSS positioning you will be able to edit your own blog template to  create a unique look and feel.

In previous posts, we saw that CSS can be used to control some aspects of your web site's "look".  You can use  CSS to specify the size of text, the font used, background colours and so on. The post  "why use CSS"  explained how CSS can achieve a level of control not possible with other methods.  And the real power of CSS is in using it to control the entire look of your site, including the layout – CSS Positioning. [Read more →]

Tags:   No Comments.

CSS Positioning Intro Part 2: The Box Model

August 11th, 2009 by klip
Respond

Before leaping straight into how to use CSS to control your page layouts, we first need to have a closer look at how an HTML page is constructed.  I'm talking about something called the "HTML box model". Sound intimidating? Its actually ridiculously simple.   Understanding the box model is both essential to everything else that follows and incredibly straight forward.

What is the Box Model?

The box model is just another way of explaining the structure of an HTML page. According to the HTML box model, every tag can be expressed as a box.  Each box can contain other boxes (in other words, other tags), or content like text or pictures.

Lets use the following HTML page as an example: [Read more →]

Tags:   No Comments.

CSS Positioning Intro Part 3: The DIV tag

August 11th, 2009 by klip
Respond

In the previous post, we looked at how an HTML page structure could be expressed as a series of boxes.  In this post I want to show you a new HTML tag that is used a lot in CSS Positioning:  The div tag.

CSS Positioning at its simplest, consists of two tasks:

  1. Use html to Divide each document up into sections .
  2. Use CSS to create styles for these sections that will define where on the page they appear, and what they will look like.

The div tag helps you with the first step; dividing the content of a page into separate sections, ready to be styled.

Lets look at this example again: [Read more →]

Tags:   No Comments.

CSS Positioning Intro Part 4: Width and Background Colour

August 11th, 2009 by klip
Respond

In this post we are finally going to do some CSS positioning.  We will start by creating a simple page that looks like this:

cssposwidth

OK – very simple layout indeed!  But we are starting with basics here.  Soon things will get more complicated.  For the moment, what we are trying to achieve is to have two poems, each with a box around it. We will specify what the width of the box is, and what its background colour should be.

You've got to crawl before you walk! :)

You can download all files used in this exercise here.

The HTML for this page looks like this: [Read more →]

Tags:   Comments Off

CSS Positioning Intro Part 5: Margins and Padding

August 11th, 2009 by klip
Respond

In the previous post you learned the bare bones basics of how to specify the width of an element.  It did not look great.  For one thing,  the text looked uncomfortably squashed right up to the edge of each box.  Lets insert some breathing space for the text.  We will also complicate things a bit more by adding another element – a framing box. The example page will look like this:

marginpadding

We will need two new CSS properties to create this "breathing space" – margin and padding.

You can download the files used in this exercise here.

Margin

Remember the html box model?  Each set of tags is like a box.  Each tag-box can be nested inside other tag-boxes, or have tag-boxes nested inside them.

The "margin" property specifies the distance that a tag-box must be  from the tag-box it is inside of.

For example – if I had HTML like this: [Read more →]

Tags:   · · No Comments.

CSS Positioning Intro Part 6: Calculating Columns

August 11th, 2009 by klip
Respond

This series has covered some of the CSS properties that control the layout of a page.  We looked at how to set the width of a page element and how to set margins and padding to create space between page elements.

But so far we can only set up the most basic of layouts – rows that appear one below the other.  What about columns? How do you make a picture or paragraph appear next to another page element?

In this post, we will create a basic layout with one row and two columns:

coll

Calculating the widths: [Read more →]

Tags:   · Comments Off

CSS Positioning Intro Part 7: Float and Clear

August 11th, 2009 by klip
Respond

This is the last post in the "Introduction to CSS Positioning" series.  We look at two new properties that will help us create layouts with columns: "float" and "clear".

You can download the files used in this exercise here.

The Float Property

Floats take a bit of getting used to.  They are counter-intuitive and can be confusing.  In this post we will apply them without delving too much into the theory behind them – lets learn by doing.

The float property makes an element move as far as it can to the right or left side of whatever contains it.

So lets try it out.  [Read more →]

Tags:   · · Comments Off

Flash: Create a Spotlight Effect with a Mask Layer

August 6th, 2009 by klip
Respond

A while ago, I wrote a post about Mask Layers.  Here is the answer to the second challenge in that post: Create a Spotlight Effect using a mask layer. (Click on the play button below to see the animation.)

Get Adobe Flash player

Create the Images [Read more →]

Tags:   No Comments.

Flash: Create a Scribble Effect with a Mask Layer

August 3rd, 2009 by klip
Respond

I promised to reveal how to create a "scribble effect" using mask layers in Flash.  If you don't know what a mask layer is yet, have a look at this post on Mask Layers.

So how do you use mask layers to create animated writing like the example below? ( press the play button to see the animation)

Get Adobe Flash player

[Read more →]

Tags: 1 Comment

Flash: Painting with selections

July 30th, 2009 by klip
Respond

Once you get the hang of it drawing in Flash can be a lot of fun.  Especially if you take advantage of the "Brush Mode" menu. 

kittybit

 

You will find the Brush Mode like this: [Read more →]

Tags: No Comments.

Flash: Mask Layers

July 27th, 2009 by klip
Respond

A mask layers are used to selectively hide and reveal other layers.  You can use them to achieve effects that are otherwise either impossible, or really difficult to create.  Here are some examples of mask layers in action.
Press the play button to see the animation:

Example 1: A scribble effect:

Get Adobe Flash player

Example 2: A spotlight effect: [Read more →]

Tags:   No Comments.

Flash: Create an Endless Kaleidoscope Part 3

July 15th, 2009 by klip
Respond

Today we take the animation  we made in Part2 and make it a lot more interesting.  At the moment, it looks something like this – a simple repeated animation.  Not very exciting – click the play button below to see the animation so far:

Get Adobe Flash player

We are going to add another dimension to this animation, taking advantage of the independent nature of a movie clip's timeline: [Read more →]

Tags:   · 1 Comment

Flash: Create an Endless Kaleidoscope Part 2

July 15th, 2009 by klip
Respond

The previous post explained the first stage of making an animating kaleidoscope: making a single, animated movie clip.

Get Adobe Flash player

In Part Two of this exercise, we are going to use the Transform panel to easily rotate and copy this movie clip and make the second stage of the kaleidoscope: [Read more →]

Tags:   · No Comments.

Flash: Create an Endless Kaleidoscope part 1

July 8th, 2009 by klip
Respond

To get the most out of this exercise you need to know how to create an animated movie clip. So you should have completed at least up to Day four of the Flash Day Pages.

I love making endlessly repeating, phase shifting kaleidoscope patterns like this.  Click  on the arrow button to see all the animations:

Get Adobe Flash player

I want to show you how to make one because its a great way to help you understand the power movie clip symbols in Flash.  Plus its fun and rather addictive :P .  I'm going to make a very simple one – once you understand the principle, you can go wild. [Read more →]

Tags:   · No Comments.

Flash: Make a set of colour swatches from an image

July 8th, 2009 by klip
Respond

A sure fire way to enrich your Flash work is to move away from the standard "Web Safe" colour palette that comes with Flash.  Here is a quick and easy way to create rich colour palettes from an image.

Find an image with the range of colours you wish to use.  Like this wonderful image of an insect by Martin Amm

dewbug

You will need an image editing program like Photoshop to save this image as a Gif.  You can choose how many colours the Gif should contain.  This will influence how many swatches you can generate from the image.

Now open the Swatches Panel in Flash (Window > Swatches).  Click on the top right corner to access the Options Menu,  and choose "Load Colors" or "Replace Colors". Navigate to where you saved the Gif.  And voilà:

debugswathces

Your own unique set of colours.

Save your swatches by choosing "Save Colors" from the options menu.  This will allow you to save a .clr file.  Open this file in Flash by choosing "Replace Colors" or "Load Colors" in the Swatches Panel options menu.

Tags:   · No Comments.

Flash: Create your own colour gradient

July 8th, 2009 by klip
Respond

You can create your own gradient with as many colours as you please using the Color Palette.  Open the Color Palette at Window > Color.

gradient

Look for the Type drop down menu.  Choose either "linear" and "radial"  – the two kinds of gradient fills available in Flash. [Read more →]

Tags:   · No Comments.

1 HTML & CSS Day One

July 2nd, 2009 by klip
Respond

HTML & CSS Day One starts with an introduction to Internet and Web Browsers.  We also look at the fundamentals of  HTML.  You will create a (very) simple HTML web page with text in it. You will use HTML to format the text so that it looks bold and italicised.  You will also learn how to insert a  hyperlink to another .html page.

Its tempting to jump right in and start experimenting – but you will find it useful to read up about the context first.  Lower down on this page you will find links to various pages explaining various aspects of the Internet and HTML that will help you later on.  Read these before starting on your exercise.

Exercise1

  • Create a root folder in which to save all your .htm pages
  • Create a new .htm page
  • insert a page title
  • view your page in a web browser
  • insert some content: make some of the words bold, and some italicised.
  • Create another .htm page.
  • Create a link in your first .htm page which will open the second .htm page

Tags: 4 Comments

1.1 Getting data from another computer

July 2nd, 2009 by klip
Respond

To understand how computers get information over the internet, you first need to understand what happens when you open a document which is saved on your computer.

When you open a document using the Finder or Windows Explorer you are usually do it by clicking on little pictures of folders. But what is a folder and why does this process help your computer find documents?

As you know, a folder is a category into which you can sort the documents. In fact, a folder acts like a document's "address".   To find a document , we need to know what folder it has been saved in, what folder that folder is in, and again what folder that folder is in…this is called the "path" to that document.  The "path" starts with the place where all folders are saved: the hard drive of your computer. The hard drive is referred to by a letter – usually C:

Imagine we are looking for a document called letter.doc.  If you wanted to find a document that was saved directly on the hard drive and had not been put in a folder, its folder path would be written like this:

C:\letter.doc

Now, there might be any number of folders on the hard drive. And each of these folders can contain many folders, each of which contain many folders. If letter.doc was saved in a folder called "homework" which is in a folder called "school" which is in a folder called "My Documents" which is in a folder called "Documents and Settings" the folder path would look like this:

C:\ Documents and Settings\My Documents\school\homework\letter.doc

But what if you want to get a document from another computer via a network?

All computers on a network have their own individual addresses – this is called an IP address. Networked computers use the IP addresses to specify which computer a message is going to, and to check where it is coming from.

Finding a document over a computer network also requires you specify that document's path. This time, instead of the first letter in the path specifying the hard drive of your own computer it would specify the name of the computer that you want to contact over the network. Something like this:

Mandy's Computer\Documents and Settings\My Documents\school\homework\letter.doc

Of course, the name of the computer would not be "Mandy's Computer" but I'm using that for simplicities sake.

Back to HTML & CSS Day One

Tags: No Comments.

1.2 How servers help you get online

July 2nd, 2009 by klip
Respond

Before you can see a web page displayed on your computer's screen, it must first be copied from the machine on which it is saved on your own hard drive.  Retrieving a web page over the internet is essentially just like getting a document over a local network.  The basic steps are:

  • You need to specify which computer, and where in the world, the page you want is saved.
  • You need to specify where on that computer the page is saved – in which folder.
  • The page must then be copied to your computer

But how does the message from your machine get to the computer on which the web page is saved?  If the internet is really thousands of computers all joined up together, how on earth can anything be found?

What are servers for?

A small network is relatively easy to understand. Ten or twenty computers can all be connected to one another without too much difficulty. But it would be impossible to have a direct connection between every computer linked to the Internet.  To cope with this complexity, there are two types of computers.  "Client Computers" which are your personal machine that you use at home, work or at your school.  "Servers" ( or "Routers") are a backbone of computers that communicate with one another, relaying messages along the shortest route.

internet

The diagram above shows a very simplified view of the client computers and servers on the Internet.

  1. When the client computer 'A' wants to see a web page that is saved on the server 'D', it cannot send a message directly to that server – the server might be in another city or country. Instead it sends a message to its local server – server 'B' in the diagram.
  2. The server checks the message to see where in the world it is headed, and sends it on to the server closest to server 'D'.
  3. That server does the same, and the message gets passed on until it reaches the correct server.
  4. Server 'D' then sends a copy of the requested web page back, from server to server until it reaches the original client computer.

 

In the first step the client computer must specify which server the web page is saved on.  This is done by you typing the address of the web page in the web browser's "address" field.  A web site's address is a special kind of path called a Uniform Resource Locator or URL. The URL specifies where in the world the server is, and where on that server the document has been saved.

Now you might be thinking: when you type an address into a browser, you don't usually type in an IP address or a full path listing the folders in which a particular web page is saved. You usually type in something much shorter, like www.amazon.com or www.dogstuff.co.za/dogs.  So what's the deal?

This page is based in part on an article from howstuffworks.com – you can read the whole article at How Internet Infrastructure Works

Back to HTML & CSS Day One

Tags: No Comments.

1.3 What is a domain name?

July 2nd, 2009 by klip
Respond

If we wanted to retrieve a document saved on a server on the other side of the world, the address of that document can be quite long and complicated.
The address would specify in which country to find the computer that the document is on. Maybe which institution in that country. Which network in that institution. Which computer on that network. Which folder in which folder in which folder in which folder…… on the hard drive of that computer.

A long and complicated address.

Instead, we have worked out a system of "nicknames" called domains. When you store a website in a  folder on a server, you register that folder as a unique domain. Your domain might be called www.bestflowers.com. or www.shirts.co.za. The actual full address of your site is saved on a special server called a Domain Name Server (DNS) which keeps a list of all the domains and their corresponding addresses.

Next time somebody types in www.bestflowers.com into their browser's address field, a message is sent to the DNS to check what the real address is. The domain is matched to the address, and the request is sent off.

Back to HTML & CSS Day One

Tags: No Comments.