Posts Tagged ‘tutorials’

CSS Templates Knowledge Base

Wednesday, November 12th, 2008

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.

Video Tutorial On Editing Website Templates In Photoshop For Newbies

Friday, August 29th, 2008

A few people buying website templates do not know how to edit them. Customization – making a template fit your needs and visions - is part and parcel of web templates. What you get as a “website template” differs from what you see in a live demo mode. With a web template purchase you get a set of files which must be customized prior to being downloaded to a server. Among them usually comes a .psd-file or, in other words, a Photoshop file which controls the appearance of your future website. Although there are numerous tutorials on the web teaching you how to work with Photoshop and website templates, most non-prepared users find it hard to make any use of them. Of great help there would be a video tutorial “Photoshop Tricks: Editing Web Templates for Websites”.