CSS Features

CSS benefits accessibility primarily by separating document structure from presentation. Style sheets were designed to allow precise control - outside of markup - of character spacing, text alignment, object position on the page, audio and speech output, font characteristics, etc.

CSS allows precise control over spacing, alignment and positioning.

CSS provides precise control over font size, color, and style. Some authors have used images to represent text in a particular font when they are uncertain of the availability of the font on the client's machine. Text in images is not accessible to specialized software such as screen readers, nor can it be cataloged by search robots. To remedy this situation, the powerful WebFonts of CSS allows users much greater control of client-side font information. With WebFonts, authors can rely on fallback mechanisms on the client when the author's preferred fonts are not available. Fonts can be substituted with more accuracy, synthesized by client software, and even downloaded from the Web, all according to author specification.

CSS allows users to override author styles. This is very important to users who cannot perceive a page with the author's chosen fonts and color. CSS allows users to view documents with their own preferred fonts, colors, etc. by specifying them in a user style sheet.

CSS provides support for automatically generated numbers, markers, and other content that can help users stay oriented within a document. Long lists, tables, or documents are easier to navigate when numbers or other contextual clues are provided in an accessible manner.

CSS supports aural style sheets, which specify how a document will sound when rendered as speech. Aural style sheets (or "ACSS" for short) allow authors and users to specify the volume of spoken content, background sounds, spatial properties for sound, and a host of other properties that can add effects to synthesized speech analogous to those achieved with styled fonts for visual output.

CSS provides more precise control over the display of alternative content than HTML alone. CSS selectors give access to attribute values, often used to provide alternative content. In CSS, attribute values may be rendered in a document along with an element's primary content.

Spacing, alignment, and positioning:

CSS allows authors to control the visual placement of content on the page through text indentation, margins, floats, and absolute and relative positioning. By using CSS properties to achieve visual effects, authors can write simpler HTML and eliminate images and non-breaking spaces ( ) used for positioning.

The following properties give control over spacing, alignment, and positioning:

* 'text-indent', 'text-align', 'word-spacing', 'font-stretch'. Each of these properties allows users to control spacing without adding additional spaces. For example instead of writing "H E L L O" (which users generally recognize as the word "hello" but users of speech recognition tools would hear as individual letters), authors may create the same visual effect with the 'word-spacing' property applied to "HELLO".
* 'margin', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left'. With these properties, authors can create space on four sides of an element's content instead of adding non-breaking spaces ( ), which are non-standard mark-up, to create space around an element.
* 'float', 'position', 'top', 'right', 'bottom', 'left'. With these properties, the user can control the visual position of almost any element in a manner independent of where the element appears in the document. Authors should always design documents that make sense without style sheets (i.e., the document should be written in a "logical" order) and then apply style sheets to achieve visual effects. The positioning properties may be used to create margin notes (which may be automatically numbered), side bars, frame-like effects, simple headers and footers, and more.
* The 'empty-cells' property allows users to leave table cells empty and still give them proper borders on the screen or on paper. A data cell that is meant to be empty should not be filled with white space or a non-breaking space just to achieve a visual effect.

CSS also includes these user control features:

* System colors (for 'color', 'background-color', 'border-color', and 'outline-color') and system fonts (for 'font') mean that users may apply their system color and font preferences to Web documents.
* Dynamic outlines (the 'outline' property) allow users (e.g., with low vision) to create outlines around content that don't affect layout but do provide highlight information.

Read more »

CSS styles and Div layers

Read more »

Dreamweaver Froms

What is a form?

Forms allow you to collect information from users via the web. Forms can be used for surveys, information gathering, online quizzes, applications, etc. Results from forms at Wellesley can easily be sent to an email address or to a FirstClass conference that is set up to receive internet mail. Results can also be stored in a CSV file on the server, then downloaded and opened in a spreadsheet application. CSV files should be stored in a separate, local-only folder to prevent from appearing in search results.

Forms can include objects such as text fields, buttons, checkboxes, radio buttons, and list/menus as well as text, tables, and images.


Creating a new form

Forms allow users to interact with a Web page. They can be used to create surveys, collect information from users, or for many other purposes. Macromedia Dreamweaver makes it easy to add forms and form objects to your pages.

1. From the Insert menu choose Form. A red border will appear.

This red border marks the boundaries of your form. All of your form objects MUST appear inside this border. You should have only ONE of these red borders on each webpage. As you add objects to your form, be sure that you are inserting them within the red border.

2. Next, set the properties for the form so it knows how to process the data it receives.

* In the Action Field enter your website URL.
* Verify that the Method is set to POST.


Adding an object to a form

Form objects include things like check boxes, buttons, and text fields that users can type into. For each object you add to a form you must complete two steps: you must first insert the object and then you must set the properties for that object in the Property Inspector. You must do BOTH steps for every object you insert.

There are two ways to insert form objects into your Dreamweaver document.

1. From the Insert menu choose Form Object and then select an object from the menu

or

2. Click on the object you would like to insert on the Forms panel of the Insert window.

To see the Forms panel of the Insert window, click on the small black arrow next to the panel title (this probably says Common). In the menu that appears, select Forms.

You can continue reading through this document, or you can click on a form object to jump to instructions on how to insert it.

* Text Fields
* Buttons
* Checkboxes
* Radio Buttons
* Lists and Menus
* Jump Menus


Text Fields

Text fields allow users to type text into the form. The entered text can be displayed as a single line or as multiple lines. You can type text in this text field to try it out.

To insert a Text Field:

* From the Insert menu choose Form Object and then Text Field (or click the button on the Forms panel of the Insert window)

# Click on the text field in your Dreamweaver document
# In the Property Inspector find the TextField box and type a descriptive name for your text field. (By default this may already be called textfield, or textfield1, etc. but it is important that you give it a better name. In the above image, the text field has been named Comments.) If this is a required field, the name must begin with an underscore. For example, to make the above required, the name would be _Comments.

Note: The name should have no spaces and should not begin with a number. Do not use punctuation other than an underscore ( _ ) or a hyphen (-).

# In the Char Width box, specify a width (number of characters) for your text field
# Choose whether you would like your text field to be a Single line or a Multi line box.
# If you choose to have a Single line box:

* In the Max Chars box, enter the maximum number or characters you would like users to be able to enter. If you leave this box empty, users will be able to enter an unlimited number of characters.

# If you choose to have a Multi line box:

* In the Num Lines box, specify a height (number of lines) for your text field
* From the Wrap menu, select a wrap setting (Choosing Virtual will allow the text to wrap in the text box and also to wrap properly in an email or conference posting.)

Buttons

A button performs a task when clicked, such as submitting or resetting the form. You can label a button with any title.

To insert a button:

* From the Insert menu choose Form Object and then Button (or click the button on the Forms panel of the Insert window)

To set the button properties:

1. Click on the button in your Dreamweaver document
2. In the Property Inspector find the ButtonName box and type a descriptive name for your button. If this is a required field, the name must begin with an underscore.

Note: The name should have no spaces and should not begin with a number. Do not use punctuation other than an underscore ( _ ) or a hyphen (-).

3. In the Label box, specify a button label (the text that appears on the button) . The Label does not have to be the same as the ButtonName and can include spaces and punctuation if necessary.
4. Choose an action for your button. Usually you will choose either Submit form or Reset form.

Checkboxes

Checkboxes allow users to select multiple items from a single group of options.

To insert a checkbox:

* From the Insert menu choose Form Object and then Checkbox (or click the button on the Forms panel of the Insert window)

To set the checkbox properties:

1. Click on the checkbox in your Dreamweaver document.
2. In the Property Inspector find the CheckBox box and type a descriptive name for your checkbox.

Note: If you are inserting a group of checkboxes (like the example group above) all of the checkboxes in the group must have a DIFFERENT CheckBox name. For example, in the group of checkboxes above I could choose to name them Color, Color1, etc. Sometimes it makes sense for the name and the value of each checkbox to be the same.

Note: If this is required, the name must begin with an underscore. For example, to make the above required, the name would be _Color.

Note: The name should have no spaces and should not begin with a number. Do not use punctuation other than an underscore ( _ ) or a hyphen (-).

3. In the Checked Value box, type in the value of the checkbox. This is the value that is set (and sent in the email/conference posting) when the checkbox is selected (checked).
4. Choose whether you would like the checkbox to be Checked or Unchecked by default.

Radio Buttons

Radio Buttons allow users to select only ONE item from a group of options

To insert a radio button:

* From the Insert menu choose Form Object and then Radio Button (or click the button on the Forms panel of the Insert window)

To set the radio button properties:

1. Click on the radio button in your Dreamweaver document.
2. In the Property Inspector find the RadioButton box and type a descriptive name for your radio button.

Note: If you are inserting a group of radio buttons (like the example group above) ALL of the radio buttons in the group must have the same RadioButton name. Each group of radio buttons will need to have a distinct name.

Note: If this is required, the name must begin with an underscore. For example, to make the above required, the name would be _Number.

Note: The name should have no spaces and should not begin with a number. Do not use punctuation other than an underscore ( _ ) or a hyphen (-).

3. In the Checked Value box, type in the value of the radio button. This is the value that is set (and sent in the email/conference posting) when the radio button is selected.
4. Choose whether you would like the radio button to be Checked or Unchecked by default.

Lists or Menus

Using the shift or control (apple) keys select multiple towns from this list:

Select one state from the menu:

Lists and Menus present a set of values from which users can choose. A List will display a number of values in a scrolling list and will allow the user to select multiple items at once. A Menu displays all of the options when it is clicked on and will allow the user to select only one item.

To insert a list or menu:

* From the Insert menu choose Form Object and then List/Menu (or click the button on the Forms panel of the Insert window)

To set the radio button properties:

1. Click on the list or menu in your Dreamweaver document.
2. In the Property Inspector find the List/Menu box and type a descriptive name for your list or menu. If this is a required field, the name must begin with an underscore. For example, to make the above required, the name would be _States.

Note: The name should have no spaces and should not begin with a number. Do not use punctuation other than an underscore ( _ ) or a hyphen (-).

3. In the Type box, choose whether you would like to have a Menu or a List
4. If you choose List:
* In the Height box, specify a height (number of items) for your list . This does not limit the number of items in the list. It only limits the number of items that are visible before the user begins to scroll.
* Choose to allow multiple selections by checking the Selections - Allow Multiple box
5. Click the List Values... button. A List Values window will open.
6. To add an item to the list, click on the + button.
7. Click under Item Label and type the label that you would like to appear in the list.
8. Click under Value and type the value. Although they do in this example, the Label and the Value do not need to match.
9. To change the order of the items, select an item and use the arrow buttons to move the item up or down in the list.
10. To remove an item from the list, click on the – button.
11. When your list is complete, click OK.
12. In the Property Inspector, choose the item you would like to display by default in the Initially Selected box.

Read more »

Photoshop: Image Slicing

Image slicing is a technique for creating a web page (or a component of a web page, like a header or navigation menu) visually in Photoshop (Fireworks and Illustrator also allow you to slice images, too). But how does it work?

Well, you’d first design a page in Photohsop exactly as you want it to look when it goes live on the web. Then you cut out all the page components—title bars, buttons, navigation menus, and so on—using Photoshop’s Slice tool. Then, when you save everything out, Photoshop saves each slice as an individual graphic, and (and this is the icing on the cake for the code-leary) all the necessary code will automatically be written as well.

Finally, once everything’s saved out, you can pull everything into Dreamweaver and finish off your layouts with any necessary tweaks. It’s a very cool process, and one of the most popular methods for building web pages.

The following sections describe how to take a created layout, slice it up in Photoshop, save it out, and then pull the whole thing into Dreamweaver to finish it off. Ready? Lets get started!

Part 1: Designing Your Page to get started to slice

So obviously, the first thing you’ll need to do is create a layout in Photoshop. In my example, I’m building an entire page, and because I don’t want any horizontal scrolling in my layout, I build for the most common monitor resolution, 1024x768. There’s quite a bit of debate as to how wide one can design inside a width of 1024 pixels, but I personally go with 990 pixels as my maximum width. This means that starting off in Photoshop, I create a new file with a canvas size of 990 pixels wide. As for the height, that’s usually determined by content, so you might want to give yourself lots of space to work inside.

Now in the case of creating a page object like a menu or header, you’d have to know the dimensions of the object before creating it in Photoshop.

Once your dimensions are set, it’s simply a matter of building your design. Design and lay out all your buttons, background graphics, logos, and so on, building up your page’s design. Use whatever tools, commands, and options you’d like. Often times, I’ll even cook things up in Illustrator, then drop them into my layered Photoshop layout as Smart Objects, just to make the process go faster.

If you’re building a page as I am here, don’t worry about actual page content—the text and other objects that would appear on the individual pages of your site. Imagine instead that you’re building a template. What you’re after is the overall look of all the pages in your site. Later on in Dreamweaver, you can drop in the content. Once your page design is complete, you’re ready to begin slicing it apart.

Slicing up your design is the fun part. What you’re doing is taking your overall layout and cutting it into smaller pieces. This means you’ll be isolating buttons, logos, and background areas on your page by slicing them away from the rest of the layout. There are a few different ways to slice apart layouts and page components, but I’ll show you my technique.

Here’s how to get started:
1. From Photoshop’s Toolbox, select the Slice tool.
2. With the Slice tool, click and drag a box all the way around your entire design.

This creates a single, large slice that encompasses your entire layout. I think you’ll find this to be the easiest and most accurate way to slice images.

3. Right-click (or Ctrl+click on the Mac) anywhere inside your design, and choose Divide Slice.
4. In the Divide Slice dialog that appears, decide how you’d like to break that single slice that you just drew. Turn on either Divide Horizontally Into or Divide Vertically Into (or both); then enter in the number of slices you’d like to create. Click OK when you’re ready.

This is where the craft of image slicing comes in. Look for natural breaks in your image. Remember, each slice will wind up being saved out as an individual graphic, so you may want to create slices for each button in a menu, for example. In my layout, I’ve divided the image into three slices horizontally: one for the header area, one for the main area, and a third for the lower, footer area.

If Preview is turned on in the Divide Slice dialog, you’ll be able to see where your slice lines will appear in the image. Don’t worry if they’re not exact, we’ll adjust them in the next step.

5. Next, if needed, adjust the slice lines that appear on your image simply by dragging on them. You may want to zoom in for a little more precision.

You’re now ready to continue slicing apart your layout. I find it easiest to work from the general to the specific—in other words, look for main areas to slice away; then start getting more refined as you go. Once you have the general areas of your layout sliced, you’re ready for the more detailed areas.

6. To continue slicing apart your image, single-click inside a “general area” slice; then right-click (or Ctrl+click on the Mac), and choose Divide Slice once again.

Notice that when you single-clicked inside the slice, all the other slices in the image deselected? Now this time, you’ll only be dividing up the currently selected slice.

7. In the Divide Slice dialog, set the number of slices you’d like to create horizontally and vertically, just you did earlier.

As before, look for natural breaks in your layout. Remember, each slice is saved as a separate graphic, so you might want to isolate buttons, logos, and so on. Don’t get frustrated if you have to start over a few times. Image slicing does takes a bit of patience. Knowing where and what to slice is just a matter of practice.

8. Continue slicing apart your layout using the techniques described until you’re happy with how things are looking.

Things lookin’ good? Great, now you’re ready for the fun part!

Part 2: Saving the layout

Once you’ve sliced up your layout, you’re ready to save everything out of Photoshop. And remember, not only will Photoshop save all your sliced images in one shot (meaning that you don’t have to save each of them individually), but it’s also going to build your page’s underlying code structure for you. So when you save your slices, Photoshop will also save an additional HTML file. That’s the file that you’ll want to open in Dreamweaver. Awesome is an understatement here, folks—it doesn’t get much sweeter than this!

Here’s how to save it all out:
1. Choose File > Save For Web & Devices.
2. In the Save For Web & Devices dialog, set optimization settings for your slices.

If you’ve never used this dialog before, I’ll give you a quick run-through on how it works. Holding down Shift, you can select the slices that you’d like to set certain optimization settings for—that is, compression options when you’re saving an image (or in this case, a group of images) for use on the web. Next, on the right side of the panel, you can set your optimization settings.

Depending on the file format that you choose, different options will appear. For example, in the case of JPG, you’ll see options for compression, quality, blur, matte, and a few others. Unfortunately, we don’t have the space to go through all the options, so you may want to read up on a few of these.

3. Once you’ve optimized your slices, click Save.
4. In the Save Optimized As dialog, name your file in the Save As field; then navigate to the folder where you’d like to save your slices. Don’t click Save just yet.

The location where you save your work will most likely be your site’s local root folder, as you’ve defined it in Dreamweaver (You may need to read up on defining a site in Dreamweaver if you’re not sure what I’m referring to).

5. From the Format menu at the bottom of the dialog, choose HTML And Images.

This ensures that Photoshop will not only save out your slices, but also all the background code needed to render your layout.
If you’d like to explore some of the other options available, choose Other from the Settings menu. You may want to experiment with a few of the commands found here.

6. When you’re ready, click OK.

Photoshop saves out all your slices, and the HTML needed for your layout. Pretty easy stuff. Now lets go take a look at what happened.

7. Minimize Photoshop; then navigate to the folder where you saved your work.

Notice that Photoshop created an HTML file, as well as an images subfolder. Inside the subfolder, you’ll find all the individual slices from your layout.

8. To see your completed layout, open the HTML file in your web browser.

Your layout looks exactly as it did back in Photoshop. Cool!

Part 3: Throwing In Some Dreamweaver

Now that everything is saved out of Photoshop, Dreamweaver takes over the formatting duties. In Dreamweaver, try opening the HTML file that Photoshop created, and you’ll see right away that everything’s been created with tables. In Photoshop’s Save Settings (Step 5 in the previous section), you can set whether to use tables or div tags.

Notice too that all the slices sit within the table’s cells. You can drop additional page content on top of your images using a clever technique: Remove the slice from the table cell; then set the cell to the slice’s original dimensions; drop the slice into the cell’s background; and finally insert new text or image content into the cell.

Now you can begin making any adjustments you’d like. For example, you could center the layout, add in a background color, create any necessary CSS rules, begin dropping in your content, and set your hyperlinks.

From here, it’s all tweaking—adjusting CSS styles, text, and other page elements within your design. If you want a graphic to appear behind the text in a table cell (which you can see was done in the sample page design, which uses a crater background behind the text), remove a graphic from its table cell and set it as the cell’s background image, just as you did earlier in this chapter. Then insert your text in the cell as you normally would.

As you work, don’t forget to preview your page to see how your design is looking. And here’s one more trick: With your page working well in Dreamweaver and previewing nicely in those target browsers, use it as the basis for the other pages in your site by resaving it under a different file name for each page. Even better, you can use your page as a Dreamweaver template.

So there it is, a quick guide to getting started with image slicing in Photoshop.

Read more »

Dreamweaver sites handling

Why to define a page in Dreamweaver?

You should always define a page so that dream weaver knows where all files should be and what file types are you working on. This prevent problems with paths to your hard drive files later on when the site is online. While defining a page you will have a lot of options you can chose from.

Let us see the options.....,

You will have a two ways how to define a web page. One is a wizard and other is an advanced mode.

1. Click the Define site from the main menu.

2. On the first screen Dreamweaver will ask you the name of the web site. Name your site something related to the site so you can remember what this web is. For example I will cal this page “Sample Page”. After renaming a page click next.

3. On the next page Dreamweaver will ask you would you like to use any server technology as ASP Net PHP or any other, if you don’t wish to use any of these technologies just click next (no should be on by default), but if you do wish to use them click yes and you will be presented with choice of available technologies. The available technologies screen is shown on the right where you would chose the one you are planning to use if you do and click next. Here we will not use advanced technologies.

4. Dreamweaver now wants to know how are you planning to work with your files. First option will allow you to create a page on your computer and after that upload it to your web server, but the second one will place files directly on your local web server. In this example chose the option to edit files on this computer and upload them to internet after.

5. Next, Select where on your computer would you like to store files while you are working on them. I recommend that you create a folder on your computer in any location where you will have a fast access to it, I will do that under my documents and call folder “mdfp” and that stands for my first defined page. I recommend you to not use any spaces and case sensitive letters or any symbols in the title or folder names as it my cause you some problems later on. We will centralize our website work area on the computer. Click an folder icon and browse to the folder just created. Click next button.

6. Dreamweaver will ask for the way you are uploading your files to the web server. My preferred is none as I usually use some other software to upload and manage all the files on the server.

Before that you have to know how to upload a page in FTP.Now let us see about FTP.

FTP (Fife Transfer Protocol) is one of the most popular ways to upload a page to the internet. If you do this option you will be presented with the following options.

* The hostname is the name of your FTP server, you will get this address from the company witch is handling your server.
* The same thing is about the option 2.
* FTP login is a name by witch server knows you (the same as email name)
* Password well I think you know what is that.
* Save option will memorize the login name and a password, do you need to use a SFPT is depending on the hosting company you use.


Local/Network you don’t get so many options. Chose of path where your local server located.

Please choose none and click next.

7. You will get a confirmation box that your web is now set up! You are done! You are now ready to add pages, create library items and templates.

I think now you are very clear about that definition.

Experiment and try out some of the different options, and most importantly, have lots of fun!

Read more »

Custom Logo Design Tips

Logo design is commonly believed to be one of the most important areas in graphic design, thus making it the most difficult to perfect. The logo, or brand, is not just an image, it is the personification of an organization. Because logos are meant to represent companies and advance recognition by consumers it is counter productive to redesign logos often.

When designing logos, practices to encourage are to:

* avoid being over-the-top in an attempt to be unique

* use few colors, or try to limit colors to spot colors (a term used in the printing industry)

* avoid gradients (smooth color transitions) as a distinguishing feature

* produce alternatives for different contexts

* design using vector graphics, so the logo can be resized without loss of conformity

* be aware of logo design or trademark infringements

* include guidelines on the position on a page and white space around the logo for consistent application across a variety of media (a.k.a. brand standard manual)

* not use a specific choice clip-art as a distinguishing feature

* not use the face of a (living) person

* avoid photography or complex imagery as it reduces the instant recognition a logo demands

* avoid culturally sensitive imagery, such as religious icons or national flags, unless the brand is committed to being associated with any and all connotations such imagery may evoke.

Read more »

Effective Colors in Web Designing

A website is basically a marketing tool, representing the companies, products and services it is also a reflection of the companies personality, ideologies and philosophies. It is definitely a heavy burden to carry for a mere website, but it dose. Huge corporations spend millions of dollars to determine the perfect color for the branding and packaging of their product. This is due to the fact that the perfect blend of colors increases the profitability of their product. The same rule applies to the designing of your website.

Color impacts your user on many psychological and physiological levels. Your site's color scheme can have a dramatic impact, either positive or negative on your potential success. Color is an important element of website designing. In Website designing of color is as critical as the design of graphics and layout.

Color and its Effects on Website Designing :
Once a visitor has come to your site you have around 8 to 10 seconds to visually appeal to the user and turn them into customers. Since Color affects our feeling, perceptions, and interactions, you can use colors to feel a user feel welcome, comfortable, relaxed, and secure. Before choosing the colors of your website it is important to get a basic understanding of color and its effects.

Warm colors:
Warm colors are based on yellows, oranges, browns, yellow-greens, and orange-reds, colors. Warm colors have a tendency to be aggressive and exciting, so it's best to apply them in small doses. Intermediary colors Purples and greens are intermediary colors that are either warm or cool, depending on amount of red or yellow they have in ratio to blue. If the color contains less blue then it is leaning towards a warm hue, and if it has more blue then it is more towards the cool side.

Cool colors:
Cool colors are based on blues, greens, pinks, purples, blue-greens, magentas, and blue-reds. Cool colors tend to be soothing, calming colors and can be used in large amounts.

Neutral Colors:
Neutral Colors include white, black, gray and colors that contain a large amount of gray. Neutral colors are great for back-grounds and for enhancing the effect of warm colors.

Multi-color:
Multi-colored sites have the lowest visitation time, as a combination of warm and cool colors confuses the user. It will often make the site seem cluttered and ambiguous. So it is best to choose a couple of colors and stick to them.

Color Harmony:
Too much color can be disturbing and chaotic, whereas too little can be boring. It is best to use a balance. So it's best to Use only a few different colors on a page. Avoid using an excessive amount of colors, blend and use warm and cool colors.

Computer Color Display:
Computer monitors display colors using different amounts of red, green, and blue, these are called RGB color. This is an additive form of color, because red, green, and blue light in equal amounts "add" up to white light. All other colors are formed on screen by mixing the amounts of the RGB color. Since RGB color is completely different from the way colors are set in print, it has to be used differently.

Web Color:
A common problem on the web is that color often does not reproduce correctly in Websites. The reason is related to bit-depth, a color may be beyond the range of the viewing display setting. Alternative colors may be reproduced, or color shifting may happen. Even if a visitor's system is capable of displaying a color, technical features like hardware age to Gamma control may cause color distortion. Such problems not only cause aesthetic problems but ay also result in visitor retention issues. Given today's technology, color management in the Web can be taxing. Browser-safe palette The browser-safe palette of 216 colors gives consistent and conventional results across the Mac OS, UNIX, and Windows platforms. Even though computers today can render millions of colors, you should use browser-safe palette if you think your website will be viewed from a 256 color computer, which can be the general case. It'll be more effective if you limit the color palette to 2 or 3 major colors with shade variations, as it is visually more appealing. Plus limited colors means smaller file sizes and faster loading.

Text Colors:
Be exceptionally careful when setting text and background colors, Readability must be preserved at all costs. If the text is light colored then the background has to be dark and vice a versa. White and black always make a good combination, and red and blue are useful for highlighting. Try to avoid using the combination of black as a back ground with warm color text, as it might be great clarity wise but has a tendency to make visitors nauseous.

Color Chart:
When dealing with international visitors, it's easy to get messed up by the meaning of color.

Blue represents peace, tranquility, calm, stability, Harmony, unity, trust, confidence. In China, blue is associated with immortality. In Colombia, blue is associated with soap. In India blue is the color of Krishna in the Middle East blue is a protective color.

Black represents power, sophistication, formality, elegance, anonymity, unhappiness wealth, mystery, fear, evil also. In USA black is for mourning.

Green represents nature, health, good luck, renewal, youth, vigor, spring, generosity, fertility, jealousy. In India green is the color of Islam. In Ireland green has religious significance (Catholic).In some tropical countries green is associated with danger.

Orange represents energy, balance, warmth, enthusiasm, vibrancy, flamboyancy.

In Ireland orange has religious significance (Protestant). Purple represents royalty, spirituality, nobility, ceremony, mystery, transformation, wisdom, enlightenment.

Red represents love, danger, desire, speed, strength, violence, anger, and blood. In China red symbolizes celebration and luck, used in many cultural ceremonies that range from funerals to weddings. In India red is the color of purity (used in wedding outfits).

White represents purity, simplicity, cleanliness, peace, humility, innocence youth, birth, good, and marriage. In Japan, white carnations signify death. In eastern cultures white symbolizes coldness and sterility. In USA it signifies virginity.

Yellow represents joy, happiness, optimism, idealism, imagination, hope, sunshine, and cowardliness. In Asia yellow is sacred, and imperial.

Colors are a powerful tool, it's the first! The first impression of your site, so keep in mind the above points when deciding on the color scheme of your site.

Read more »

Create a template using slice tool in Photoshop

Read more »

Photoshop: Layers Definition and Uses

Layers:

Layers are one of the most powerful tools included in many photo editing programs. Adobe Photoshop Elements and Adobe CS3 are two examples of programs that make use of layers to allow photographers great control in editing their images.

Layers are exactly what they sound like. They are images or effects overlaid on top of one another. Image drawing on several sheets of plastic and then stacking them together. These sheets of plastic can be either clear, opaque, or anywhere in-between. These layers can also hold part of an image or a whole image. By stacking these layers together we can create exacting adjustments to our images, combine multiple images, or create new images.

Using layers has several advantages over making adjustments directly to an original image.

• Temporary Edits
  By using layers you can make adjustments without changing the data of the layer underneath. This allows you to make multiple changes without having to start over each time an edit does turn out like you had intended.


• Avoid Data Loss
  Each time you change your image through adjustments or other edits, a small amount of data can be lost. By using layers, your original image is protected from corruption (just remember to use "save as" and not "save"). When you save the image with layers the edits are combined before permanently applying to your file so as to minimize any data loss.


• Specific Point Editing
  By using layers you can select just one part of an image using masks (or by deleting the unwanted part on just one layer). This allows you to edit foregrounds, subjects, and backgrounds separately.


• Quick Edits to Multiple Images
  By copying your editing layers to other images you can quickly make adjustments to large numbers of images.

Layers Creation:

The first step in working with layers is creating a new layer. Most photo editing programs use a layer menu option (such as the one seen here from Adobe Photoshop Elements 6). As you can see from the image, there are several options for types of layers to accomplish specific tasks.

The basic layer type is simply a blank layer placed on top of the current layer. This type of layer can be either transparent or opaque. If you have several layers open already you can chose "layer from background" to create a new layer from the original background layer. You can also use "layer via copy" to make a new layer from items selected on the current layer.

Fill layers are a quick way to create a layer filled with a solid color, gradient, or pattern. This type of layer will most often be used in creating images from scratch rather than photography editing.

Adjustment layers are layers used to adjust characteristics of the background (original) image. Items such as levels, brightness/contrast, hue/saturation can be adjusted using adjustment layers. Options for more advanced changes such as invert to create a negative effect are also available under adjustment layers.

Working with Layers:

Once you have created a new layer (or layers), you will be able to view your layers under the layers display (usually on the bottom right hand side of your screen). The layers are shown in stack order. That means that the level on the top of your display list is the top layer of the stack. The small eye icon beside each level indicates which levels are currently visible.

The level highlighted with light grey represents the level that is currently selected (any actions will affect the selected level). The opacity indicator at the top of the list allows you to change how opaque or transparent the selected layer will be. The selection that defaults to "normal" is the blending mode option. This tells the program how to blend the layers into one overall image. The best way to learn these options is to experiment with them.

Layers can be reorganized simply by clicking and dragging them to a new position. Remember that adjustment layers only affect layers beneath them in the list.

Read more »

Using Levels in Photoshop

Levels may sound like a complicated concept in photo editing but it really isn't difficult. Levels just refers to adjusting the level of light and dark areas of an image. There are multiple ways to do this in most photo editing (digital darkroom) software but the quickest and easiest is levels.

Creating A Level Adjustment Layer

While you can adjust levels in Photoshop and Photoshop Elements without creating an adjustment layer, adjustment layers provide a lot of flexibility in changing your adjustments later in the editing process. To create an adjustment layer, click on Layer - New Adjustment Layer - Levels.

This will bring up a screen that allows you to name the adjustment layers. I suggest naming it Level Adjustment so that if you create other adjustment layers (brightness/contrast, etc) at a later time you will be able to easily identify each layer.

Note that adjustment layers will affect all layers below it - but not those above it.

Adjusting Level Controls

Once you have named your adjustment layer, the levels control pop-up menu will open. From here you can select the channel to be adjusted, output levels, auto adjustment, and input levels.

Input levels will be your main tool for adjusting your image. The black arrow on the left represents shadows, the grey arrow represents midrange, and the white arrow represents highlights. The curve basically shows you the density of the data in the ranges. These mountains and valleys show you the range of the image. A good rule of thumb is to bring the black and white sliders towards the middle so that they are just underneath the edge of the "mountain" nearest to them. The midrange grey arrow can then be adjusted for fine-tuning the image.

Output levels allow you to change the images tonal range. Instead of pure black to pure white you can adjust the maximum whiteness or maximum blackness to a shade of grey if desired.

The eyedroppers are quick step to editing levels. Click the black eyedropper and then click on the part of your image that should be black to have the program adjust levels and color hue accordingly. Follow the same process for the grey and white eyedroppers if needed.

As long as the preview button is checked you will be able to see the results of your changes in real time. Once your image looks like you want it to just click the OK button and you are finished adjusting levels.

Read more »

Bad Web Design Features

The below are the points listed to avoid building a good website.

Backgrounds
Default gray color
Color combinations of text and background that make the text hard to read
Busy, distracting backgrounds that make the text hard to read

Text
Text that is too small to read
Text crowding against the left edge
Text that stretches all the way across the page
Centered type over flush left body copy
Paragraphs of type in all caps
Paragraphs of type in bold
Paragraphs of type in italic
Paragraphs of type in all caps, bold, and italic all at once
Underlined text that is not a link

Links
Default blue links
Blue link borders around graphics
Links that are not clear about where they will take you
Links in body copy that distract readers and lead them off to remote, useless pages
Text links that are not underlined so you don't know they are links
Dead links (links that don't work anymore)

Graphics
Large graphic files that take forever to load
Meaningless or useless graphics
Thumbnail images that are nearly as large as the full-sized images they link to
Graphics with no alt labels
Missing graphics, especially missing graphics with no alt labels
Graphics that don't fit on the screen (assuming a screen of 640x460 pixels)

Tables
Borders turned on in tables
Tables used as design elements, especially with extra large (dorky) borders

Blinking and animations
Anything that blinks, especially text
Multiple things that blink
Rainbow rules (lines)
Rainbow rules that blink or animate
"Under construction" signs, especially of little men working
Animated "under construction" signs
Animated pictures for e-mail
Animations that never stop
Multiple animations that never stop

Junk
Counters on pages--who cares
Junky advertising
Having to scroll sideways (640 x 460 pixels)
Too many little pictures of meaningless awards on the first page
Frame scroll bars in the middle of a page
Multiple frame scroll bars in the middle of a page

Navigation
Unclear navigation; over complex navigation
Complicated frames, too many frames, unnecessary scroll bars in frames
Orphan pages (no links back to where they came from, no identification)
Useless page titles that don't explain what the page is about

General Design
Entry page or home page that does not fit within standard browser window (640 x 460 pixels) Frames that make you scroll sideways
No focal point on the page
Too many focal points on the page
Navigation buttons as the only visual interest, especially when they're large (and dorky)
Cluttered, not enough alignment of elements
Lack of contrast (in color, text, to create hierarchy of information, etc.)
Pages that look okay in one browser but not in another

Read more »

Great Web Design Features

Text
Background does not interrupt the text
Text is big enough to read, but not too big
The hierarchy of information is perfectly clear
Columns of text are narrower than in a book to make reading easier on the screen

Navigation
Navigation buttons and bars are easy to understand and use
Navigation is consistent throughout web site
Navigation buttons and bars provide the visitor with a clue as to where they are, what page of the site they are currently on
Frames, if used, are not obtrusive
A large site has an index or site map

Links
Link colors coordinate with page colors
Links are underlined so they are instantly clear to the visitor

Graphics
Buttons are not big and dorky
Every graphic has an alt label
Every graphic link has a matching text link
Graphics and backgrounds use browser-safe colors
Animated graphics turn off by themselves

General Design
Pages download quickly
First page and home page fit into 640 x 460 pixel space
All of the other pages have the immediate visual impact within 640 x 460 pixels
Good use of graphic elements (photos, subheads, pull quotes) to break up large areas of text
Every web page in the site looks like it belongs to the same site; there are repetitive elements that carry throughout the pages

Read more »

Logo Color Tips

To choose the best color of your logo follow some basic tips that I mentioned you below:

Orange:
A warm color that connotes of tropical, luxury, passion and exotic things. The color itself expresses enthusiasm, vibrant and expansive. Your logo may just captivate the right kind of attention once you use color orange.

Yellow:
Color that exudes intellect, faith, goodness and friendship. Yellow also vibrates optimism, happiness, idealism, and imagination. Unless your company does convey bright, cheery feelings that you are inclined to reflect in your logo, yellow could really work well as background color.

Blue:
The most popular color that convey peace and tranquility, loyalty and fidelity, harmony, trust and confidence. For those who are keen on using the 216 color palette, blue is abundant in all shades. They can be excellent dominant color for web site logos which convey the lighthearted and positive mood.

Purple:
A rich color that exudes mystery, royalty and spirituality. For the unconventional, creative and prides themselves of being unique, your logo may work well with lavender in it. It also conveys justice and truth.

Gray:
Connotes neutrality, stability and wisdom…

White:
It is the color of cleanliness and purity, youth, simplicity, innocence, friendship and peace. White has become a very popular background color in web sites, owing to the best readability it offers onscreen.

Green:
Conveys neutrality, growth, money, humility and wisdom. It is a kind, generous color and often a logical choice for financial sites and those that represent fertility, healing and ecology in many cultures.

Black:
As always have been considered a mournful, heavy and depressing color. Although, it also connotes an air of detached elegance and sophistication and mystery.

Red:
Considered as the hottest of all colors, it represents all things intense and passionate. It connotes danger, heat and fire, speed and zest, blood and excitement, competition and aggression. As such red can really be an annoying, disquieting or exciting color depending on the intensity of its used in your logo.

Read more »

Small Business Logo Design Features

Logo design is the face of your company. It is regarded as the fundamental tool which provides the first impression of a business. Prior to starting a business much concern is given to the logo design. The logo should be professional designed in line with the name of the company and the product.

Logo design has many benefits such as:

· It promotes the small business in the marketplace.

· It helps in attracting possible clients to the small business.

· It provides a unique identity.

· Logo design is as equally important to the brand name.

A good logo design is finalized before the launching of the business in the marketplace. It is crucial that the logo design is unique for the recognition of a small business, not a typecast logo.

Design Aspects:

A logo design should be attractive and simple. It should be properly designed using simple color pattern and short text; it is amateurish to make the logo needlessly ostentatious. Instead, they can be created by the business owner using software or an employed logo professional. Having a logo designed by a professional is a good deal as the designers have the deep acquaintance to create logos suiting your small business.

It is also essential that the small business logo design is innovative because a similar logo design may be used by any other business even of the same industry.

There are several types of logo design softwares. These are computer applications that are constituted with a user friendly interface and help in creating logos in line with the color and size requirement of the business. Majority of modern softwares include several files with predefined logo designs. The drawback of using this software is that they might construct similar types of design for singular businesses. Once a logo design is generated, it can be registered and copyrighted for the business it portrays.

Things to Avoid:

The pattern of your business logo design is very significant. An attractive design pattern predicts the professionalism and productivity. For this reason, it should not appear cheap or showy. A business should pass up heavy ornamentations and diverse combinations of color in the logo design. The fundamental principle behind a good logo design is simple color patterns and creative concepts to bring the product to the industry.

Read more »

Custom Logo Design Features

Logos give a true individual identity to a company. They act as an insignia of a company in which the name and other important elements of the business are engraved. Logos represent a company among hundreds of other logos, operating and competing with each other in the free market.

There are few factors that should be kept in mind while designing a logo, such as:
1. Pattern of the logo design is very important in terms of the design process. An eye catching pattern reflects professionalism and productivity of a company. It suggests a value and identity.
2. It is important that logo does not appear cheap or showy. Therefore it is always advised to avoid heavy decorations or embroidery so that it can retain its value.
3. Neglecting different combinations of color in the logo design is also appreciable.
4. The key to a good logo design is simple color patterns and innovative ways to deliver the product to the customers.

Importance of Custom Logo Designs:

In today's fierce competition the concept of logo holds a very significant place. To combat the emerging challenges, each and every business organization is craving to get a personalized or customized logo to float trustworthiness and goodwill of their company.

All print media firms, advertising agencies, online web service providers and others are looking for affordable logo design services to enhance and maximize their working profile. However, there are some other benefits of custom logo designs:

1. Logos are designed for individual company, keeping in mind its needs & requirements.
2. Logos cannot be copied by another company.
3. Custom logo represents the honor of the company.
4. Logos provide a detail about a company's nature, quality, character, and attitude.
5. They strengthen a company's stand and credibility.
6. Logos add recognition to the company.
7. Logos talk about the company's long term plans.
8. They act as a face of a company.
9. They symbolize the company in the market.
10. Logos provide a long term impact on the mind's of customers.

Some of logo design key features:-

Consistency in use:
Consistency in use of your logo, tagline, materials. Repetition of similar elements, used in the same or similar ways, helps people to remember who you are and what you do.

Memorability:
So that your logo stays at the forefront of your potential clients' minds. That way, they'll think of you next time they have a need.

Meaningfulness:
So that your logo can spread the message about the distinguishing characteristics of your business.

Uniqueness:
Which helps you stand out from the crowd. For example, if everyone in your industry uses a particular symbol (i.e., travel agencies often use globes in their logos), try to use something else – that way, your logo doesn't just look like everyone else's.

Professionalism:
Professionalism in the quality of the graphics, the printing and the paper on which your materials are printed.

Timelessness:
Timelessness in your logo will ensure that you don't have to redesign your logo in just a few years and that your investment and equity in your design will be lasting.

Differentiation between the colors:
Differentiation between the colors in your logo – and not just in terms of hue, but in terms of value as well, so that it translates well either to black and white or greyscale and colorblind people are able to see it.

Unity among the different elements:
Unity among the different elements in the logo. The logo must fit together as a single unit, and not just appear as a jumble of elements pasted together.

Scalability:
So that your logo looks equally good on both a business card and on a sign for your business (or a billboard!), and at every size in between. Your business's name should be legible at different logo sizes – be sure that your designer chooses a font that is easily readable.

Read more »

Logo Design Features

Features of Logo Design:

Every company or business should have its own unique and exclusive logo because it plays a vital role in gaining recognition for a company. A logo is the symbol or trademark of a company that helps to make or break a business. It is a means by which your company can be recognized and can attract customer’s attention.

Your logo can be simple text, an illustration or a symbol. Whatever your logo is made of, its ultimate goal should be to portray the image of your business in a positive light. Your logo should signify your professionalism and reliability.

Significance of logo designs:

* Company logo designs add a touch of professionalism to your organization. They ensure that people see your business in a positive light and give your business plenty of credibility.
* Company logos help a business in branding their product or services. By printing your logo designs on your stationery, letterhead, and promotional material you can attract more customers and make your logo more recognized.
* Your company logo design plays a key role in creating a good first impression so it is imperative that your logo reflect your business image.
* Company logos are a direct reflection of your business and should be professional
* Your company logos should be elegant and original.
* Company logo designs serve as a reminder and as a visual stimulant of your company.


The 4 Types of Logo Designs:-

1)Textual logos

Textual logos are simple text used in a logo format. The font type can appear in various shapes and sizes to convey your message. A thick font conveys your business’ power or strength; a fancy script font conveys style and elegance. A good example of a textual logo is that of IBM.

2)Illustrated logos

Illustrated logos are illustrations used as logos. These illustrations can be as simple or as complicated as you like. It is better to keep your illustrations simple and to the point because a company logo should at all times signify your business’s professionalism. A good example of an illustrated logo is that of Pepsi.

3)Symbolic logos

Nowadays symbolic logos are en vogue. A symbol can be used to portray an abstract representation of the company. A good symbolic logo is that of Nike.

4)Combination logos

A combination logo is a mixture of any or all of the other elements. A good example of a combination logo is America OnLine.

Read more »

Top 8 Web Site Readability Tips

R1. No line of text should be more than about 600 pixels wide.

The reason that newspapers and magazines are printed in columns is to make the lines short, so after you read one line, it's easy to find the start of next one. The page you're reading now shows one approach to making line length manageable: put the text in a fixed-width table in the center of the page.

Here's an example of a good page, with sidebars to the left and right of the content. A potential problem with that layout is that the content will be too wide for visitors with really large screens, since the content is fluid and expands when the window is bigger. A way around that is to make the content a fixed width, but that poses another problem: Pages should be designed to work on screens as small as 800x600, which means no more than 770 pixels wide to account for scrollbars and such. The two sidebars on the page in question take up about 175 pixels each, or 350 pixels total. That leaves 770-350 = 420 pixels for the content, which is really thin and ugly on the larger 1024x768 monitors, which are the most common. So if I want two 175-pixel sidebars, I can either:

(a) make the content 420 pixels wide, which will look crappy on 800x600 screens,

(b) or I can make the content fluid, which will look okay on both 800x600 and 1024x768 screens, but worse on even larger screens.

I chose (b), because that gives the best result for the majority of web visitors.

R2. Don't make your page too wide.

Your page should be 770 pixels wide at most (so people with 800x600 screens can read it). If your pages are wider than that, then many visitors won't be able to see everything without scrolling left to right. As of this writing (Jan. 2007) about 20% of users have 800x600 screens, and almost all the rest have larger screens. Twenty percent is a minority, to be sure, but that's still 1 out of 5 visitors, and it would be crazy to make your site inaccessible to that many people.

R3. Use contrasting colors or simple backgrounds to make your text easy to read.

It's hard to read light text on a light background, or dark text on a dark background. There are also some color combinations that don't work. And if this tip is so obvious, then why did I run across this page today?

Also, it's hard to read text on background images that have a wide mixture of light and dark; any background images should be simple and mostly dark or mostly light. You can improve readability of text on a background image by increasing the text size and/or making it bold.

You should almost never put text on an image or textured background. Unless you really know what you're doing, such text is usually difficult or annoying to read -- if not impossible.

R4. Make the text large enough to read.

Don't yell at me for stating the obvious, because it's not obvious to everyone: Just today a webmaster referred me to his site which I had to squint to read. Don't punish your visitors if you want them to actually read your content. With CSS rules, go for 12 or 13px Arial, and 11 or 12px Verdana.

R5. Increase the line spacing (leading) to improve readability.

Putting some space after each line gives it some breathing room and makes it a lot easier to read. If you don't specify the leading, you don't get any -- you get the default of cramped lines. I set this article to 160%, which you can see adds some attractive space between the lines and makes the text appear less daunting. But I kept this particular paragraph at the default, so you can see how it's much less attractive and harder to read. Add spacing by using CSS commands.

R6. Don't type more than a few words in ALL CAPS.

Words that are in ALL CAPS draw attention to themselves because they seem different from the small letters around them. But if you type everything in all caps, then you completely lose the effect, since everything looks the same, so none of it looks important. If you want to draw readers' attention to something, make the headline stand out -- bold, bright color, maybe a little larger -- but keep the text that follows it normal.

R7. Never use more than one exclamation point!

Typing several (or worse, a gazillion) exclamation points does not make your text seem any more important than just one. In fact, rather than conveying urgency, what multiple exclamation marks really scream is "Amateurish!". Actually, what they really scream is "Desperate!" The writer is desperate to get the reader to believe something. But think about it: Do exclamation marks really impress you when you read them? Are you more likely to believe something because it has a screaming mark at the end? It's probably the opposite: You're used to desperate marketers trying to sell you something with their exclamation marks, so when you see lots of them you sense that desperation and tend to discount what they're trying to convince you of. So when you switch hats and you're the one giving the message, don't let your desperation show by using lots of exclamation marks. Play hard to get. :)


R8. Use a spelling checker.

Yes, people who spell poorly may not notice or care that your site is badly misspelled, but literate people may notice and care, and they're in the majority.

Read more »

Need of Professional and High Quality Web Site design

#Neat and Easy Navigation: Navigation of links on your site plays a big role in determining the stickiness of your site (how long your visitor stays and explores your site). Ask yourself this, What do visitors do as soon as they open your site? They would probably read the content of the present page and then look around to find any other page that interests them.

#Clean Layout Design: A clean layout that uses a lot of white space enhances a site's looks. Try to keep the focus on your content, use a template for this. Use fonts that will be available on all computers to prevent your site looking messed up.

#Optimum Load Time: Make sure your load time is low. For this you must:
Minimize Graphics, Flash and scripts: They hugely increase your file size.
Optimize your HTML & script code: Make sure that your site doesn't have any unwanted tags or unused scripts.
Use Server Side Include (SSI) files where ever possible. SSI files once called from the web server reside in its cache so on subsequent requests they load faster.

#Design for all Screen Resolutions: A site that is easy-to-use always encourages visitors to stay and read your content. For site with long pages of content this is very crucial as the amount of scrolling required is reduced. Suppose your site doesn't look good for a particular resolution it is very probable that the visitor will close the browser window feeling that the web page is not for their viewing. Designing stretch layouts that fit any screen resolution ensures that you know all your visitors see a visually appealing and professional site.

#Ensure Web site scalability: Make sure your code and design is scalable. As technology advances and configuration of computers & their monitors keep increasing and varying it is impossible to test your site in all screen sizes and platforms.

# Cross Browser Compatible: Make sure you check your site for Internet Explorer 5+, Mozilla Firefox 1.0, Opera 7.0 and Netscape Navigator 6+ as they constitute 95% of the worlds browsers.

Read more »

Dreamweaver - Color Palette Tools

Let us see the Colour Palette Tools one by one......

# Color Blender Color Scheme Tool

Use this online color blender tool for 10 color shades between the 2 color values that you input. Wonderful, unique color blending tool to help with creating color schemes, including Web-safe gradient color palettes. Provides HTML and CSS color codes in HEX, RGB, and RGB% formats.

# Colormatch Remix Color Scheme Tool

Use this online colour scheme chooser to save color schemes with nine colors. There's a preview window to see how your choices will look within a Web page, and you can save / export your color schemes as Photoshop .act color swatch files, Illustrator .ai files, or as plain text (.txt) files. Provides HEX and RGB HTML color codes, and the .txt file format also includes CMYK color codes.

# Colour Scheme Chooser

Need a tool to help you create triadic color schemes or analogic color schemes? Or perhaps you prefer monochromatic color schemes? Use the popular Colour Scheme Chooser here at WebsiteTips.com to select any of these, or select complemenetary colors, split complementary colors, or double contrast color schemes. This amazing, easy-to-use color schemer tool helps those creative juices flow as you have fun exploring a multitude of harmonious, eye-catching color scheme possibilities. When you're ready, you'll have a choice of up to 14 colors in HTML HEX color codes.

Read more »

CSS Generator in Dreamweaver

CSS, short for Cascading Style Sheets, a new feature being added to HTML that gives both Web site developers and users more control over how pages are displayed. With CSS, designers and users can create style sheets that define how different elements, such as headers and links, appear. These Style Sheets can then be applied to any Web page.

(Cascading Style Sheet) A standard for specifying the appearance of text and other elements. CSS was developed for use with HTML in Web pages but is also used in other situations, notably in applications built using XPFE. CSS is typically used to provide a single "library" of styles that are used over and over throughout a large number of related documents, as in a web site. A CSS file might specify that all numbered lists are to appear in italics.

Read more »

CSS Rules in Dreamweaver

A CSS rule comprises a selector, and a property:value pair (declaration).

Selector:

How content can be selected for styling?
For example, the selector for a level-one heading element is h1; selectors include element name, ID and class.

Property:

How a presentation attribute of an element can be targeted?
For example, the font-family property refers to the typeface content should be set in.

Value:

The values permitted for each property.
For example, a colour can be set using a keyword: red, green, blue; or a hexadecimal code: #f00, #0f0, #00f.

A rule may contain a number of property:value pairs.

Read more »

Benefits of CSS

Separation of content and presentation:

CSS rules can be provided in a file that is separate to the (content) HTML. If all pages link to this centralised CSS file, then the look of a website can more easily be updated. For example, the colour or size of all level-one headings can be changed by updating a single CSS rule.

Smaller webpage file sizes:

As the code required to style content can be removed from individual webpages, the size of each webpage file is reduced. Depending on the benchmarks, file sizes may be reduced by up to 60%.

Improved webpage download speed:

Once a stylesheet has been downloaded, it is typically stored on the user’s computer (cached). For each subsequent webpage viewed, only the HTML needs to be downloaded.

Improved rendering speed:

Once a webpage has been downloaded, a browser processes the underlying code to determine how content should be displayed. This process is referred to as ‘rendering’. The time a webpage takes to render is affected by the complexity of the code the browser receives. Using CSS to control the layout of a page typically simplifies the the code structure making it ‘easier’ (faster) for the browser to render.

Streamlined maintenance:

As less code is required for each webpage, both the likelihood of coding errors and time required to add content to a website are reduced.

Changing presentation for different devices:

The CSS specification enables different rules to be used depending on the device used to access the web. For example, a different set of rules can be used to reformat a webpage for printing or viewing on a mobile phone.

Accessibility:

Additional features can be added to webpages that provide ‘hooks’ for assistive technologies such as screen readers. (A screen reader is a program that reads aloud the interface to computer programs and computer-based content, including webpages). CSS-based techniques can be used to provide such hooks without impacting on the experience of mainstream users. For example additional headings can be added to content that will only be ‘seen’ by a screen reader. These headings can be used to provide additional contextual information that would otherwise be communicated by the visual design.

Table-less layout:

Prior to the introduction of CSS, multi-column layouts could only be created using HTML tables. Unfortunately, at a code-level, a table used for layout purposes cannot be differentiated from a table used to mark-up tabular data (such as statistics). This has the greatest impact on technologies that ‘read’ webpage content at a code, rather than visual, level. If the meaning of content is affected by how it has been marked-up, then using a table for layout purposes has the potential to change the meaning of the content. Utilising CSS-positioning, layout can be achieved without compromising content structure or meaning.

Customisation:

Advanced web browsing software enables the user to easily override the author-specified styles. Although admittedly requiring the user to know more about the mechanics of the web, content display can be completely customised.

Search engine optimisation:

Search engines may assign greater relevance to content found first in the code, and/or limit the amount of content indexed on each page to a certain character-count. If content blocks are positioned using CSS, the order of webpage code does not need to match the display order. For example, the code for global navigation bars positioned at the top of the screen may come after the content in the source.

Read more »

Benefits of CSS Trick

What Are The Benefits Of This CSS Trick?

* Saves Time — You don’t have to manually create the decorative template in Photoshop and export the individual image.

* Keeps Original Source Images — So you don’t have to worry about changing the design theme in the future.

* Very Flexible — You can have a completely different look and feel by just editing the CSS.

* It Works on Any Site — This CSS trick works on any type of site, with any image size.

* Cross-Browser CompatIble — It has passed the test on most browsers (Firefox, Safari, Opera, and even the "buggy IE6").

Read more »

Understanding paths in Dreamweaver Templates

Dreamweaver templates:

When an HTML page is saved as a template, Dreamweaver creates a template folder at the root level of the local root folder and generates a .dwt file that becomes the source for all the pages that are applied to it. Every time a HTML page is applied to a template, (File > New from template or Modify > Template > Apply template to page) it creates a site root-relative link to the .dwt file. The reason why this site relative link will always link correctly is because the .dwt file will always be in the Templates folder at the root level of the site's folder structure. If the .dwt file is moved from the Templates folder, or if the Templates folder is moved or renamed, the link will be broken. It is very important to keep the .dwt file in the Templates folder where Dreamweaver creates it. To avoid confusion, it is good practice NOT to save other elements of your site (image source files or HTML documents) inside the Templates folder.

How are pages linked to the template files?

When a file is applied to an existing page or created new from a template, the following code is inserted in the source:



To view the HTML source code that Dreamweaver generates, choose Window> HTML.

The path above replaces the normal HTML source that would appear on a new page. Instead of starting out with the usual tags that new file would generate, it is specifying that one level inside the local root folder, inside a folder called Templates, a .dwt file exists that contains all the information not inside the editable regions of that page. This path sends the browser to look in the correct location for the file which will provide the page properties, layout and graphics - all the content that exists only in the .dwt file. This is why changes outside the editable regions of a page must be made directly to the .dwt file. When the .dwt file itself is opened and revised all the pages applied to the template are linked to the file in the same location as before. All the pages applied to the template are all automatically updated with the new information.

Document-relative versus site root-relative:

The path linking an HTML page to a template is a site root-relative path. It is called site root-relative because it starts from the top level of the directory structure (the local root folder), and then follows through the next folder down (Templates), and finally links to the .dwt file. Dreamweaver automatically generates a site root-relative path to the templates in the Templates folder, because it knows exactly where the template will be located, no matter what other file folders exist in the site structure.

Document-relative creates a path specific from one file to another. Rather than starting from the top level (site root) of your file folder structure, it generates a path that starts at one file, goes through whatever file folders (directories) necessary, and stops at the location of the other file. It is imperative that both files be saved inside the local root folder BEFORE creating a document relative link from one to another.

If you wish to be able to preview your pages in a browser locally, before you have uploaded the files to a remote server, they must be document relative. Both Internet Explorer and Netscape browsers have no way of understanding what local root folder has been defined (as Dreamweaver does) so it can only follow a path that is relative to the document it is currently viewing. Because most users prefer to view their pages locally in a browser prior to uploading them, Dreamweaver defaults to being document relative whenever a file is linked or an image is inserted. If the file has not been saved BEFORE attempting to insert an image or a link to another HTML page, Dreamweaver has no reference for the location of the current page, therefore it will generate a path that looks something like:

file:///HardDrive/Desktop Folder/localRootFolder/subfolder/subfolder/images/content.htm

or

file:///C:/Desktop/localRootFolder/subfolder/subfolder/images/content.htm

These paths are specific to your workstation ONLY and will not work when you upload files to a remote server.

Read more »

Good Template Tips

Dreamweaver templates can help you create web pages with a consistent design and layout. Templates also make it easy to update and maintain your site. Simply revise the templates and automatically update your site's pages based on the templates.

> Using the Templates folder
> Identifying the path to the template file
> Creating paths to other pages (or page elements) in templates

Using the Templates folder:

Dreamweaver houses template (DWT) files in a folder named"Templates." Located at the root level of the local root folder, the Templates folder should only be used to store template files:

> Don't move your template files outside of the Templates folder.
> Don't put any files other than template files in the Templates folder.

Separating the template files in this manner will help you avoid confusion. Also, when you upload your site files, you will not need to upload the Templates folder to the server.

Identifying the path to the template file:

Every document based on a template contains the path to the correct DWT file in the Templates folder. That path is written within comment tags?Dreamweaver uses this path to the template within the Templates folder when it updates the pages based on that template. When you apply a template to an existing page or create a new document from a template, Dreamweaver codes the path to the template as follows:

Dreamweaver uses this path information in the source code to identify which pages belong to which template.

Creating paths to other pages (or page elements) in templates:

When you link to other pages or insert elements (such as images) on your page, Dreamweaver creates a path in the HTML source code of your document so that a browser displaying your page can find the appropriate files.

Editable versus non-editable regions of the template:

Paths can be in either editable or non-editable (locked) regions of a template. A path placed in an editable region of a template will not change when a page is created based on the template.

When Dreamweaver writes paths in non-editable regions of templates, however, the links behave differently.

The effect of using the different kinds of paths in non-editable regions of templates is discussed below:

Paths in the non-editable regions of templates:

> Document-relative paths in templates

If you allow Dreamweaver to create the document-relative path in the template (by clicking the Browse for File icon on the Property inspector, for instance), the path to the page or element will be?in the template itself?relative to the template. When you create a page based on the template, Dreamweaver will alter the path in the new page to reflect the page's new location.

In other words, Dreamweaver is smart enough to know that your page based on the template is in a folder different than the one holding the template and so the document-relative path in the new page will reflect this change.

Note:If you wish to type your document-relative path yourself, remember to make the path relative to the template's location and not to where you think the future page based on the template will be. If you type a document-relative path that points to a location outside of the Templates folder, the link will ultimately not work in the browser or the element will not display in either Dreamweaver or the browser.

For an illuminating pictorial explanation of how Dreamweaver adjusts document-relative paths in a pages based on a template, see Understanding paths in Dreamweaver templates.

> Site root-relative paths in templates

Dreamweaver does not adjust site root-relative paths in pages based on a template, because the adjustment is not necessary. Site root-relative paths work from any location within the same site.

Important note: Use document-relative paths in templates, unless you plan on using site root-relative paths site-wide.An extremely rare error in Dreamweaver may rewrite your existing paths as site root-relative throughout your site if even one site root-relative path is found within your template. This change will not affect the functionality of your site, but such a change would understandably be surprising to some users.

> Absolute paths in templates

Dreamweaver does not adjust an absolute path in a template when a page is created based on the template. Absolute paths work without regard to the source file's location.

Read more »

Benefits of Dreamweaver Tools

Dreamweaver Tools include the following capabilities and benefits:

* Dreamweaver Tools works everywhere – with standard HTML pages or standalone CSS style sheets.

* Dreamweaver Tools good to go for both designer and developer, and it works equally well in both Design and Codeview. Great for static, dynamic, or templated pages.

* With Dreamweaver Tools users can easily search for a specific color criteria. Search for a tag, hex value, creator's email address or title, or any of the above. Page through results until the desired color is obtained, and then sample away.

* Just like the users can view the Most Recent, Most Popular (most downloaded), or Highest Ranked color themes with Dreamweaver Tools. Choose the desired option from the drop-down menu and color themes are listed, five at a time. Users can even choose Random for that extra bit of inspiration.

* Dreamweaver Tools delivers the hottest, latest colors directly to users. It also allows them to choose from professional color schemes and find the hues and hex values that speak to them.

Read more »

Most Effective Photoshop Tools

* All the Tools; how to use them and how to get the best out of them.

Brush tool. Airbrush tool. Pencil tool. Eraser tool.

* Layers: one of the most important facilities in the system; layer groups and sets; locking layers; layer comps.

* Clone Stamp tool: repairing and removing unwanted blemishes.
The new Clone Source palette.

* Zooming in and out; Shortcuts; the Navigator palette.

* The Crop tool: removing wanted areas; expanding the image area; rotating and straightening.

* Magic Wand tool: all the selection methods; adding and subtracting areas.

* Lasso tool: selecting freehand and with the Polygonal and Magnetic lasso tools; multiple selections.

* Paint Bucket: easily filling in areas with colour and filling in with patterns.

* All the Blurs: Zoom; Spin; Radial; Motion blur; Gaussian blur; + .

* Lens blur: simulate the blur effect achieved with a camera lens.

* Color Settings: how to set up requirements for colour management.

* Healing Brush; Spot Healing Brush; Patch tool: all the retouching knowledge required to make the most of these powerful repairing tools.

* Paths and the Pen tool: precise selection and masking with Bezier objects; open and closed paths.

* Curves: all about Curves; their origin, meaning, purpose and use.

* Organizing palettes for the most efficient working methods.

* Pixels and Resolution: explanations and definitions.

* Information palette: examine the technical details of an image and comparing them in different colour modes.

* File Information: placing camera details, personal details, keywords and copyright into a file's metadata.

* RGB and CMYK: what's the difference; what is colour temperature and why does it matter. Colour Channels.

* Color Picker: choosing colours for images and print; setting highlight and shadow points.

* Swatches palette: using preset key colours; creating a new library of samples.

* Canvas Size; Image Size; creating new backgrounds.

* All the techniques for blending images.

* Lighting effects: change the lighting and mood of an image.

* Noise: what it is; how to reduce it; how to add it; Dust & Scratches.

* Gradient tool and the Gradient Map: adding colours, graduated colours and patterns.

* Text: creating text of all shapes and sizes; adding Text Effects for headlines and extra impact; merging text with images.

* Creating mottled backgrounds and texture backgrounds; dotted and gradient backgrounds.

* File formats: different types and when to use them; saving files; file naming.

* Selective Color: changing and manipulating colours.

* Hue / Saturation: changing tone and richness of colour.

* Channel Mixer: another method of adjusting and improving colour.

* Black and White: all the methods of converting colour to black and white; from the the quickest to the best.

* Toning images: Duotones; Tritones; Quadtones.

* Extract filter: selecting fine and delicate details; defringing for better blending.

* Modes: different characteristics for blending and merging layers.

* Levels: controlling tones and densities; Histograms and clipping information.

* Adjustment Layers: making colour and tonal changes and saving them for later use.

* Replace Color; Color Range; Color Replacement tool: specialist ways of selecting and adjusting colour.

* The F screen: various ways of displaying the screen to better viewing.

* Tool Presets; Preset Manager: save customized tools and organize efficiently.

* Arranging image windows for good display and comparison.

* Bridge: co-ordinate files across other Adobe programmes; catalogue and arrange all your images; making a slide show.

* Camera Raw: import, open, process and manipulate Raw files from digital cameras.

* Image Processor: using automation to carry out repetitive imaging tasks.

* Free Transform: reshape and adjust perspective with easy keystrokes.

* Vanishing Point: match up perspective between objects and images. Create new surfaces with 3D shaping.

* Distort: explore the many Distort functions, like Diffuse Glow; Displacement Maps to apply distortion to superimposed images.

* Lens correction: correct distortion caused by some lenses; correct cut-off and colour aberrations.

* Wave filter: created wave effects from gentle flag movement to extreme destruction.

* Shear; Spherize; Glass; Pinch; Twirl; Ocean Ripple; Zigzag; Polar Coordinates: distort an image to replicate real life situations and fantasy shapes.

* Warp; 3D Transform: virtually unlimited range of 3D effects.

* Clouds and Difference Clouds: mottled cloud effects for backgrounds and image development.

* Lens Flare: replicated flare from camera lenses and light sources.

* Liquify: adjust shape in subtle ways or make the subject melt completely.

* File size: what it is and all about interpolation.

* Bits: 8 bit and 16 bit - what they are and when to use them.

* Bitmap image: its use in graphics and how to create it.

* Rulers, Grids, Guides and Smart Guides.

* Free colours: distorting and manipulating colours for graphic effects.

* Solarizing: creating image solarization.

* Masks: the magic and versatility of masks in image control.

* Sepia toning and Split toning: traditional techniques take on a new guise.

* Custom Brushes: creating new designer brushes to cover every task.

* Sharpening: Unsharp Mask Filter; Smart sharpen: why sharpen, when to sharpen, how much to sharpen.

* History palette; History Brush; Art History Brush: going back in time; creating Snapshots and saving multiple versions.

* Filter Gallery: how to use the armoury of filters and get the best out of them; Fading filters.

* Smoothing skin: brush away the years and make new friends.

* Color Balance; Brightness & Contrast: two more ways of adjusting colour in the right circumstances.

* Lab Color: all about Lab color mode and how to use it.

* Posterization: graphic reinterpretation of colour values.

* Memory: improving computer performance with good use of memory.

* Merging two images: blending and merging multi-images into one.

* Rescue highlights with advanced techniques and the Shadow/Highlight function.

* Graduate Erase, Blur and Shading: a strong effect at the front, fading away to nothing.

* Blur, Sharpen and Smudge tools: subtle tools and a light touch to finish an image.

* Create Chrome in images and text; make text look like fire and neon.

* Convert text to shapes and run it along a Path.

* Knockout: start to explore the little-used Knockout blending feature.

* Styles palette: apply style effects automatically and save newly-created styles.

* Photo filter: simulate familiar camera filters and remove unwanted casts.

* Photomerge: create panoramic images with automatic blending and masking, both horizontally and vertically.

* Auto Align and Auto Blend: line up and merge the best aspects of two or more images.

* Selection by Channels: using colour channels and creating Spot Channels.

* Create regular and irregular graphics shapes with the Shape tools.

* Background Eraser; Magic Eraser: more ways to remove backgrounds and make selections.

* Pattern Stamp tool; Pattern Maker: created original patterns and textures for retouching and texture background effects.

* Notes tool: add text notes, information and audio aids on to an image.

* Contact sheets: create a contact sheet of thumbnails from a set of images.

* Picture Package: display an image in a choice of sizes.

* PDF format; PDF Presentation: using Portable Document Format and making a PDF Slideshow.

* Actions: create a file which will undertake a series of tasks automatically. Droplets and Batch to save time further.

* Apply Image; Calculations: advanced methods of combining images and channels.

* Colour Management: controlling colour through the whole image process into the print, including profiling printers and soft proofing for CMYK conversion.

* Gif images; Slice tool; Watermarking; Save for Web: preparing images for use on the net.

* Web Photo Gallery: creating a web site package.

* Animations: making an animation sequence for use on the net.

* Smart Objects: preserve the original and make quick non-destructive adjustments by using Smart Object aliases. Try out many filters non-destructively and then re-edit.

* Scratch disks: what they are and what to do with them.

* Customizing: set up shortcuts, arrange menus and workspaces for the most efficient working environment.

Read more »