Photoshop Tutorial: How to Create a Web 2.0-Style Logo

Tableless web-designing Very important aspect

Rethinking How You Build a Page

When you build a site using tables, you have to think in a "tabular" format. In other words, you're thinking in terms of cells and rows and columns. And your Web pages will reflect that. When you move to a CSS-P design, you'll start thinking of your pages in terms of the content.

For example, the page for this article can be considered to have five content parts:

1. the header
   This is where my photo is, the top banner ad, and basic navigation.
2. the left navigation
   This is the left side of the page, with the subjects and essentials.
3. the right navigation
   This is where the tower ads and other information is.
4. the content
   The text of this article.
5. the footer
   The bottom navigation, copyright information, lower banner ad, and so on.

Rather than putting those elements in a table, I can use the

tag to define the different portions of the content, and then use CSS-P to place the content elements on the page.

For the sake of this article, I'm going to pretend there are just three columns on the page, and ignore the header and footer.

Identifying Your Sections

Once you've defined the different content areas of your site, you need to write them in your HTML. While you can, generally, place your sections in any order, it's a good idea to place first items you'd like less advanced browsers to see first.

For my three column layout, I'm going to have three sections:

1. leftnavigation
2. rightnavigation
3. content

These will be defined using div tags with the id attribute. Remember, when you use the id attribute, you need to have a unique name for each id.

Positioning

This is the fun part. Using CSS you can define the position for your id'ed divs. Store your position information in a style call like this:
#content {

}

Content within a div tag will take up as much space as it can, namely 100% of the width of the current location, or the page. So, to affect the location of a section without forcing it to a fixed width, you can change the padding or the margin elements.

For this layout, I set the two navigation columns to fixed widths and then set their position absolute, so that they wouldn't be impacted by where they are found in the HTML.

#leftnavigation {
position : absolute;
left : 0;
width : 150px;
margin-left : 10px;
margin-top : 20px;
color : #000000;
padding : 3px;
}
#rightnavigation {
position : absolute;
left : 80%;
top : 20px;
width : 140px;
padding-left : 10px;
z-index : 3;
color : #000000;
padding : 3px;
}

Then for the content row, I set the margins to be somewhat relative to the outer columns.
#content {
top : 0px;
margin : 0px 25% 0 165px;
padding : 3px;
color : #000000;
}

While the page won't look wonderful in non-CSS-P browsers, as you can see, it is possible to define how your page will look without any table tags. See the HTML. See the CSS.

Import your PSD layouts into Dreamweaver & build a Web Site!

You Suck at Photoshop #1: Distort, Warp, & Layer Effects

Difference between HTML , XHTML , DHTML

• HTML - HyperText Markup Language
  
• DHTML - Dynamic HyperText Markup Language
  
• XHTML - eXtended HyperText Markup Language

The first is the basic markup language used to create web pages. The current (and last) version is HTML 4.01, as specified by the W3C (World Wide Web Consortium).

The second is an unoffical name. It normally means HTML combined with JavaScript and CSS to provide greater response to user action (such as mousing over an image and triggering some event like the appearance of a menu).

The third is the future (and it's here now). XHTML 1.0 is HTML reformulated according to the rules of XML (eXtensible Markup Language). It's almost identical to HTML 4.01, but follows stricter rules, such as all tags being in lowercase, no missing end tags, all attributes in quotes, etc.

The reason we use XHTML in Foundation Dreamweaver MX 2004 (and in all recent foED books) is to help you build sites that adhere to the latest standards, so there is less chance of them becoming obsolete in the future. XHTML cannot do anything *extra*, but learning to build sites using the stricter rules that it follows means you are less likely to build sites that fall apart in new browsers.

Author - David Powers

WEB DESIGNING

Web design is a process of conceptualization, planning, modeling, and execution of electronic media content delivery via Internet in the form of technologies (such as markup languages) suitable for interpretation and display by a web browser or other web-based graphical user interfaces (GUIs).

The intent of web design is to create a web site (a collection of electronic files residing on one or more web servers) that presents content (including interactive features or interfaces) to the end user in the form of web pages once requested. Such elements as text, forms, and bit-mapped images (GIFs, JPEGs, PNGs) can be placed on the page using HTML, XHTML, or XML tags. Displaying more complex media (vector graphics, animations, videos, sounds) usually requires plug-ins such as Flash, QuickTime, Java run-time environment, etc. Plug-ins are also embedded into web pages by using HTML or XHTML tags.

Improvements in the various browsers' compliance with W3C standards prompted a widespread acceptance of XHTML and XML in conjunction with Cascading Style Sheets (CSS) to position and manipulate web page elements. The latest standards and proposals aim at leading to the various browsers' ability to deliver a wide variety of media and accessibility options to the client possibly without employing plug-ins.

Typically web pages are classified as static or dynamic.

• Static pages don’t change content and layout with every request unless a human (web master or programmer) manually updates the page.

• Dynamic pages adapt their content and/or appearance depending on the end-user’s input or interaction or changes in the computing environment (user, time, database modifications, etc.) Content can be changed on the client side (end-user's computer) by using client-side scripting languages (JavaScript, JScript, Actionscript, media players and PDF reader plug-ins, etc.) to alter DOM elements (DHTML). Dynamic content is often compiled on the server utilizing server-side scripting languages (PHP, ASP, Perl, Coldfusion, JSP, Python, etc.). Both approaches are usually used in complex applications.

With growing specialization within communication design and information technology fields, there is a strong tendency to draw a clear line between web design specifically for web pages and web development for the overall logistics of all web-based services.

Overview

There are two kinds of technologies used in web sites; Client Side and Server Side. Client Side means the processing of the technology is done in your web browser. Server Side means the processing is done by the web server; the computer that sends the web page to your browser (e.g. www.miswebdesign.com is the name of the computer serving this page to you).

In this article I will only be dealing with Client Side technologies; the ones your web browser understands. These include HTML, XHTML and CSS. Don't worry if you have no idea what any of these abbreviations mean, that's why I've written this article.

DHTML is a technology that allows programs to be written which are executed inside the web browser. I will be dealing with DHTML in a later article.

HTML

HTML stands for Hyper Text Markup Language.

HTML is a way of labelling text so that a computer can understand what it means and figure out what it should do with it. HTML was created by Tim Berners-Lee in 1990 and is now looked after by the World Wide Web Consortium (W3C).

In order to label text with HTML a series of "tags" are used. These tell your browser what the text in between them is.

The browser you are using now shows this HTML like this:

This document uses HTML.

In most visual browsers you will see the text "HTML" above in bold formatted text. If you are using a speech browser then you should have been informed of the strong emphasis.

By using HTML "tags" to "mark-up" an entire document a HTML page is created, such as this one. There are many tags in use that together create HTML, a Hyper Text Markup Language.

If you would like to learn more about HTML (Technical Level: Beginner/Intermediate) see HTML Help by The Web Design Group.

XHTML

HTML has been succeeded by a new technology, eXtended Hyper Text Markup Language or XHTML. XHTML is a big part of the future of the World Wide Web. Through a W3C project called "The Semantic Web" the intention is that through XHTML and a number of other new technologies web pages will be understood by computers as-well as humans, allowing you to use the Internet in ways never thought possible in 1990.

For an introduction to The Semantic Web (Technical Level: Basic/Beginner) see this Scientific American Article or (Added 5th November 2002) this BusinessWeek Article.

For detailed information about the Semantic Web (Technical Level: Advanced) visit the W3C Semantic Web Activity.

CSS

Although HTML and XHTML can also be used to tell visual browsers how they should display the page, it should only truly be used to show what the text is, not how it should be displayed. To tell browsers how to display the page, it's presentation, the W3C has created Cascading Style Sheets, which we are going to look at now.

CSS provides the ability to control how documents are presented visually, whether it is on a computer screen, a television set, a printer or any other visual mediums.

For example, the following CSS property is used to set the font.

font-family:Arial, sans-serif;

With the above property the web browser would use Arial if it was available, and it's default "sans-serif" font if not.

A major advantage of CSS is that it allows a single file, a style sheet, to be used for an entire site which only needs to be downloaded once. This means that download times improve for users and pages don't take as long to load. You may have noticed that pages on this site do not take long to display, that is because all presentation for the site is done with CSS.

If you would like to learn more about CSS (Technical Level: Intermediate) see Cascading Style Sheets by The Web Design Group.

For detailed information about CSS (Technical Level: Advanced) visit the W3C CSS Activity.

Abbreviations

Abbreviations related to this topic:

HTML

Hyper Text Markup Language

XHTML

eXtended Hyper Text Markup Language

CSS

Cascading Style Sheets

DHTML

Dynamic Hyper Text Markup Language

W3C

World Wide Web Consortium

WDG

Web Design Group

photoshop expert tutorial ebook

Part 1

Part 2

Part 3

photoshop basic tutorial Ebook

Photoshop CS3 Ebook

photoshop expert tutorial

3D Pixel Stretch Effects

Click Here

MOST USED SFTWARES FOR GRAPHIC DESIGNING

ADOBE ILLUSTRATOR

MICROSOFT EXPRESSION

COREL DRAW

ADOBE PHOTOSHOP

QUARK XPRESS

ADOBE INDESIGN

C R E A T O R S - graphic designers

INTRODUCTION

A graphic designer is a professional who assembles together images, typography or motion graphics to create a piece of design. A graphic designer creates the graphics primarily for published, printed or electronic media, such as brochures and advertising. They are also sometimes responsible for typesetting, illustration and web design, or take a teaching position, although these specialties may be assigned to specialists in various graphic design occupations. A core responsibility of the designer’s job is to present information in a way that is both accessible and aesthetic.