LayoutsPack BLOG

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.

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!

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

Marry Christmas fellows!

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 »

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 »

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.

LayoutsPack cares about its users and we try to provide you with useful and helpful information. We continue our Web Templates Types review, so please welcome some fresh pieces of advice. Today we are going to speak about Flash Templates.

Flash Templates represent ready-made usual web design templates improved by Flash technology. Nowadays Flash Templates are of great popularity as they are considered to be advanced and modern and are appreciated by webmasters. Using Flash Templates as a basis for your website you will get vivid and impressive web presence supplemented with movements, sound and visual effects. And you may be sure your clients and visitors will be amazed how professional and qualitative your website is.
Flash Templates can relate to various categories, such as Education Flash Templates, Business templates & Finance Flash Templates, Photo Flash Templates and many others. In other words they will perfectly fit each of your purposes, either commercial or personal, and will meet all your requirements. Though Flash Templates may seem difficultly organized because of impressive animation effects, they are quite easy to work with and customize. You won’t need extra knowledge to cope with your Flash Template editing. You can easily change necessary text, images or symbols with the help of certain flash editors which exist specially for simplifying your work.
In order to work with Flash Templates and edit them you will need to install Macromedia Flash on your computer. After the installation is complete you may open the FLA file (you will find the instructions in our previous post) and start carrying out necessary tasks.
Have a look at the following tips on editing your Flash Templates.

Changing text in Flash

In case you want to modify the text within your Flash Template you only need to take several steps.
First open your FLA file in Macromedia Flash. After that you need to select the very part of the text to be edited. The first way to do it is to make use of the timeline slider. You need to move it and watch the animation process, and when you reach the text you need to edit, stop the slider. Then find “Selection Tool” on the tools panel, double click the necessary text extract and change the text typing new one instead.

Symbols library
Sometimes you may find it hard to access some symbols from the timeline. In this case you may need symbols library. In order to open it select “Library” in “Windows” option which is in the top menu.
To open symbols library you can use “Ctrl + L” hotkey or choose “Window/Library…” from the top menu.
When you get to the symbols library you need to choose the text you want to edit. All the symbols there can be previewed for convenience. After you have found the necessary text double click the symbol’s icon and it will show the text in main window. Then do the same with “Selection Tool” to modify the text.

Text Properties
You can also edit your text size and color by means of Text Tool and Properties Panel. There you will find all necessary icons and options to make the modifications of the selected text.
After you have finished editing your text use “Esc” button to exit and then you may choose other text extracts to modify them as well.

Changing images in Flash
While working with your Flash Template you will definitely need to insert some images, so follow the advice.
After you have opened the FLA file press F11 to get to Symbols Library. Find the necessary symbol there and double click its icon to see the properties. There you will find image preview and be able to check the image size. The picture you want to upload should be of original image size to fit the original animation and effects. You can also set the quality of the image using symbol properties.
You can also resize the image using Adobe Photoshop. To use the image in flash after modification make sure it has “jpeg”, “gif” or “png” format. Use “Import” option and find your image file to paste it then.

Publishing Your Flash Movie
When all the changes are done you should publish your animated header and update it. In order to publish your movie choose “Publish Settings” selecting “Publish” option there. The SWF file will be located in the same folder where FLA file is. Don’t forget to replace previous SWF file with updated one, and then check the changes.

So this was the basic information on Flash Templates we wanted you to familiarize with today. Hope you will make use of it and thank you for the attention.

You are welcome to leave comments and ask questions if necessary.

Layoutspack.com continues familiarizing its users with information about website templates types. And today we have Flash Animated Templates in question.

Flash Animated Templates are the kind of web templates that combine sound effects and live action in one. They may have flash header, animated menu and will appear a perfect solution suitable for impressing website visitors not only with professional design but also with interactive flash technology. Very often 3D models and 3D animation are used. Flash Animated Templates are good choice either for dynamic or static websites, and they will definitely make your website look professional and vivid.

A lot of web designers use Flash Animated Templates nowadays as they are considered to be stylish and improve your website presentation greatly. Nowadays there is a variety of Flash Animated Templates as their popularity grows day by day, and they are quite easy to use – you won’t need extra modern equipment to work with them.
The list of special software you will need to work with Flash Animated Templates is quite short and includes:

-    any HTML editor (Dreamweaver, Front Page etc)
-    Macromedia Flash
-    Adobe Photoshop

Any Flash Animated Template can be also modified according to your demands with the help of any popular HTML editor, and you won’t need special HTML and flash knowledge to edit and improve Flash Animated Templates. You can replace any photo, text or object easily.

In order to make necessary modifications you will work with the template FLA file - a file with all graphics and animation. You will make use of it with the help of Macromedia Flash MX 6 or higher. In order to open the FLA file, select “Open” in the “File” section, and then simply find where your FLA file is located.

“Unexpected file format” error

It happens sometimes that when you open your FLA file in the Flash editor you receive an error message which says that the file format is unexpected. This can be explained by the fact that your template source files were created with newer versions of the software.
So what are you to do? All you need is to upgrade your version of Adobe Flash/Macromedia, and you will be able to open the FLA file properly. In order not to meet such obstacles in future make sure you use Adobe Flash CS3 or Flash 8.
Thank you for your attention, this is the piece of information for today and we hope you will find it useful. Any comments and questions are accepted, so feel free to share your opinion.

LayoutsPack provides its users with definitely qualitative website templates of various types. But our purpose today is not to highlight the quality but to get every user acquainted with principles of website templates’ operating. So get ready for some useful piece of information. Our topic today is CSS Templates Knowledge Base.

CSS – Cascading Style Sheets – is the technology that is used for creating CSS Website Templates and helps web designers to arrange and stylize their web pages. The popularity of using CSS is growing nowadays because it’s a convenient option that is compatible with most of web browsers.

The advantage of CSS is that with its help you can separate style from the content. This means that the elements responsible for page styling are easily defined and you can find these elements within the page structure separately from the content.
Using CSS you can easily modify your web pages. Now you don’t need to repeat a number of tags – just edit a CSS file and you will get necessary changes.
So we can say that CSS Templates contain convenience of use and modern technologies in one.

There are certain software requirements for using CSS Templates and they are the following:

-you should have an HTML editor installed on your computer – any you’d like to work with (Front Page, Dreamweaver, Notepad, etc.)
-if you want to add/edit some animation than Macromedia Flash is required
-you will also need to use Adobe Photoshop to work with images

Editing CSS template

If you need CSS templates to be edited you can easily do it yourself. But you should mind that in case of editing a style sheet responsible for text all the text documents related to that CSS style sheet will be modified as well. Here is the instruction on the example of Dreamweaver:
-open the document you wish to edit
-find “Window” section and choose “CSS styles” there. Then click on the “Edit Style Sheet” option in the CSS Styles panel.
-the next task is to choose the name of the style sheet and click on “Edit” button.
-do all necessary modifications
-don’t forget to save the document after finishing your work.

Design-Time style sheets
When you work with your CSS style sheet in Dreamweaver there is a possibility of hiding or showing it during the design-time. In order to apply this option you need to:
-find the Design-Time section in the CSS Panel
-in the following dialog box mark Show Only at Design Time (Plus button) option in case you want your CSS style sheet to be displayed, then choose the very style sheet you want to apply this option to in the Select a Style Sheet section; or if you want to hide a style sheet mark Hide at Design-Time option and then browse necessary CSS style sheet.
-in order to cancel any of the show/hide options for a certain style sheet choose the necessary one and then click Minus button.

We hope you’ll make use of the information we presented you today. Feel free to post your comments, ask questions or just share new ideas. We appreciate every opinion.

It’s always exciting to start new services and feel the anticipation waiting for first requests.

As you already know last week LayoutsPack in association with WebTemplatesTalk started the new service of Website Templates Requests. Anyone subscribed to one of our Web Templates Packages just has to tell us what design he precisely needs and he’ll get it in a quickest turn around. (You may read more on this option at Website Templates Request post.)

Well, I’m happy to announce we’ve got the first order and we are already on the final stage of animating the skin! Here’s a Consulting company website design for user Pankson547.

Hope you are satisfied, Piter!

And for our other customers I remind – you will be able to download this Flash Animated template as well.
We encourage everyone to post their requests likewise. We’ll complete every order of any kind. So don’t forget to check us out for new updates and news.

Got a lot of web templates to choose from but can’t find the appropriate one? No frustration any more. We have some good news for those looking for any particular design solutions.

Layoutspack keeps it up to date and is ready to blow with an attractive innovation you may start enjoying now. Subscribing to any templates membership plan you can not only download our current collection or get new releases for free but also order a website template on your own. This means that whatever template you wish to get, LayoutsPack will make it for you.

Interested and willing to start?

Go to Web Templates Talk - discussion forum on any aspects related to web templates at one side, and our generous partner at another, and post your template requests. In your inquiries try to be as specific and detailed as possible simplifying the work of our designers.

Here are our conditions you should learn beforehand:

1. It is better for the desired template to refer to generic themes and not to be too specific. Thus it will appear more accurate and correct and will embody your ideas to the limit.

2. You can order no more than one template per month during your membership plan period.

3. The time you are to wait for the requested website template equals one or two weeks depending on the request queue.

4. When your template is ready LayoutsPack will publish it on the website in order you could download it at once. Thus you will be sure of what you get. But mind that after the work is done no correction demands are accepted.

5. And finally, it is useful for you to know that priority is given to those customers who have already subscribed to the templates membership at Layoutspack.com.

So don’t waste a minute and join as soon as possible. Layoutspack.com, a multiple website templates and membership plans provider, will embody your original ideas providing you with meritorious service.