Introduction to Flash

December 30th, 2008

While HTML is perfect for creating static websites where all the content is placed at fixed positions Flash is the best tool for creating dynamic sites, where images, texts and animations are moving.
These effects can  also be achieved with GIF images or java applets.
Lets compare these two to Flash.
An animated GIF is practically several images saved in one. The browser simply loops these images when the animated GIF is loaded, i.e. if your image has an area that moves in 20 small moves than the animated area is saved 20 times. Thus, it takes ages to load even a small animation.
Besides GIF does not support interactivity and is limited to a 256 color palette.
With Flash you can control your animations. For instance, you can make your animation start when a particular button is clicked. Flash movies load much faster that GIFs and can use more than 256 colors.

Apart from animated GIFs there is another way to achieve dynamic effect – java applets.
Java (the programming language for applets) demands programming skills.
Some programmers created free applets that can be customized though.
Among the most famous ones is the lake applet. It gives a wave effect to any image of any size. But to add anything to the applet you’ll have either to program it yourself or find a ready applet that does the effects you want.

Flash movies are very much alike java applets. They both are small programs that can be put into the HTML pages. But it’s very easy to create movies in Flash without any programming knowledge.
Besides java applets are often programmed so that it takes all the resources of your computer and as a result you’ve got a “freezed” browser.
So, compared to java applets Flash is much easier to create and is more stable in web browsers.

To create Flash movies you  have to buy the Flash program developed by Macromedia, the latest version is Flash Mx.
As soon as you’ve installed the Flash program start completing the 8 lessons that come with it.

* Introduction

* Drawing

* Symbols

* Layers

* Type

* Buttons

* Sound

* Animation

To run these lessons get the Flash started then click Help in the top menu and choose Lessons.
These lessons will teach you the very basics of the Flash.
What to do after you completed the lessons I’ll tell you in my next post.

Tags:
Posted in General Talk | No Comments »

Marry Christmas and Happy New Year!

December 24th, 2008

Hi there guys
Wow! Time runs fast! It’s Christmas eve already!
I hope you guys are all ready, the presents are bought and the Christmas trees are decorated.
LayoutsPack would like to give all our customers and all the people of the world our best wishes today!

May the spirit of Christmas bring you peace,
The gladness of Christmas give you hope,
The warmth of Christmas grant you love.

Here’s a small present from our designers, hope it’ll bring some more Christmas & New Year spirit to all of you.

LayoutsPack Xmas Card
Marry Christmas fellows!

Tags:
Posted in General Talk | 1 Comment »

Basic CSS Tutorial, part 2.

December 16th, 2008

In my previous post I gave you the brief tutorial on CSS and promissed to go on with it. Well, as promissed, here is some usefull info on Pseudo-classes and Pseudo-elements and Cascading Order.

Pseudo-classes and Pseudo-elements

Pseudo-classes and pseudo-elements are specific “classes” and “elements” that are automatically recognized by CSS-compatible browsers. Pseudo-classes distinguish among different element types. Pseudo-elements refer to sub-parts of elements, for example the first letter of a paragraph.

Rules with pseudo-classes or pseudo-elements take the form:

selector:pseudo-class { property: value }

or

selector:pseudo-element { property: value }

It’s better not specify Pseudo-classes and pseudo-elements with HTML’s CLASS attribute. Normal classes may be used with pseudo-classes and pseudo-elements as follows:

selector.class:pseudo-class { property: value }

or

selector.class:pseudo-element { property: value }

Anchor Pseudo-classes

Pseudo-classes may be set to the A element to display links, visited links and active links differently. A visited link could be defined to render in a different color and even a different font size and style.

There can be an interesting effect – an “active” link displayed in a slightly larger font size with a different color. And when the page is re-selected the visited link can be displayed in a smaller font size with a different color. The sample style sheet looks like this:

A:link    { color: red }
A:active  { color: blue; font-size: 125% }
A:visited { color: green; font-size: 85% }

First Line Pseudo-element

The first line of text in a newspaper article is often displayed in bold lettering and all capitals. CSS1 has this capability as a pseudo-element.
You can use a first-line pseudo-element in any block-level element (such as P, H1, etc.).
An example of a first-line pseudo-element:

P:first-line {
font-variant: small-caps;
font-weight: bold }

First Letter Pseudo-element

To create drop caps and other effects use first-letter pseudo-element.
The first letter of text in an assigned selector will be reflected according to the value assigned. A first-letter pseudo-element can be used in any block-level element.
Example:

P:first-letter { font-size: 300%; float: left }

creates a drop cap three times the normal font size.
Read the rest of this entry »

Tags:
Posted in General Talk, How To | 3 Comments »

Basic CSS Tutorial

December 9th, 2008

CSS, or Cascading Styles Sheets, is a way to style HTML. While the HTML is the content, the cascading style sheet is the presentation of it.
With CSS you are able to add new looks to your old HTML, restyle a whole website with a few changes to the CSS code, use the style you crate on any webpage.

A style sheet is made up of style rules that tell a browser how to represent a document. There are few ways to link these rules to your HTML documents. The simplest method is to use HTML’s STYLE element. This is the element that contains the style rules for the page. It is placed in the document HEAD.

Note: the STYLE element is a good method of experimenting with style sheets, though it has disadvantages that you should consider before using this method in practice.

Each rule is made up of a selector (an HTML element such as BODY, EM, or P) and the style that is to be applied to the selector.

Style rules are formed as follows:

selector { property: value }

Multiple style declarations are separated by a semicolon:

selector { property1: value1; property2: value2 }

The following code segment defines the color and font-size properties for H1 and H2 elements:

<HEAD>
<TITLE>CSS Example</TITLE>
<STYLE TYPE=”text/css”>
H1 { font-size: x-large; color: red }
H2 { font-size: large; color: blue }
</STYLE>
</HEAD>

These style sheet tells a browser to show level-one headings in an extra-large, red font, and level-two headings in a large, blue font. Read the rest of this entry »

Tags: ,
Posted in General Talk, How To | 2 Comments »

10 Most Common CSS Mistakes

December 3rd, 2008

Working with CSS is sometimes tricky. As great as this language is, as easy it is to use it incorrectly. Below are 10 most common mistakes web developers make working with CSS. These mistakes are well-known but still many of web developers walk twice (or even thrice) into the same water.

1. Neglecting Browser Compatibility
No matter what browser your website visitor is using the layout has to look the same. There are differences in the way Firefox renders the page and the way Internet Explorer does the task.
There is a number of sure methods to indemnify your layouts for different browser rendering. There are online tools that make screenshots of what your website looks like in different browsers and platforms, so you can be sure nothing looks wrong in a browser.

2. Ignoring Smaller Browser Resolutions
Not all your website visitors have large computer monitors. There is a big difference in the way your design looks in a 800×600 resolution  opposed to a 1024×768 resolution. Take that into consideration when developing a website and all your visitors will be happy.

3. Not Using Frameworks
Why loosing time to develop a CSS layout from the ground up when there are tonns of ready-to-use CSS templates that have cross-browser compatibility? They are created for you to make your life easier and your work faster.

4. Not Utilizing Generic Classes
Web developers often name CSS classes something different each time they develope a website. Isn’t it easier to make a simple CSS class that can be reused repetedly throughout your design? This will assure that your site design remains constant throughout the alterations of a design.

Here are the classes you might use:
1.  .right{float:right}
2.  .clear{clear:both}
3.  .left{float:left}

5. Forgeting to Validate the HTML
Validating HTML can affect your CSS. First of all, CSS can’t be validated until the HTML is validated. Secondly, the problems we think are caused by CSS can actually be caused by awry HTML. So make sure your HTML is valid.

6. Invalid CSS
If your CSS is valid you are much likely to have no problems with breaking CSS and its compatibility across browsers. Learn to validate the CSS.

7.  Using Gigantic Background Images
Using a huge backround image you make your visitor wait longer for it to load and it means you are using unnecessary bandwidth. It’s better to use repeating images or solid colors in the background.

8. Overusing CSS
It is sometimes much easier and faster to use different technologies for particular tasks. For instance, use a table to organize data than making complicated CSS-based layout with floating DIV’s.

9. Employing Inline CSS
CSS and HTML should be kept separate. Ensure you won’t have to search through the HTML for the CSS attached to an inline element when you decide to change the design.

10. Too Many Files used
A design with dozen CSS files attached is terribly hard to modify. Besides, it slows the time processing each file. Better use a simple CSS scheme. save your time and time of those who’ll have to make alterations to your layout.

Tags: , ,
Posted in General Talk, Website Templates | 1 Comment »