We hope you find this list useful.

Web design is the skill of creating presentations of content (usually hypertext or hypermedia) that is delivered to an end-user through the World Wide Web, by way of a Web browser or other Web-enabled software like Internet television clients, microblogging clients and RSS readers.

The intent of web design is to create a web site—a collection of electronic documents and applications that reside on a web server/servers and present content and interactive features/interfaces to the end user in form of Web pages once requested. Such elements as text, bit-mapped images (GIFs, JPEGs) and forms can be placed on the page using HTML/XHTML/XML tags.

This is an H1 Header

Displaying more complex media (vector graphics, animations, videos, sounds) requires plug-ins such as Adobe Flash, QuickTime, Java run-time environment, etc. Plug-ins are also embedded into web page by using HTML/XHTML tags.

This is an H2 Header

Improvements in browsers' compliance with W3C standards prompted a widespread acceptance and usage of XHTML/XML in conjunction with Cascading Style Sheets (CSS) to position and manipulate web page elements and objects.

This is an H3 Header

Latest standards and proposals aim at leading to browsers' ability to deliver a wide variety of content and accessibility options to the client possibly without employing plug-ins.

This is an H4 Header

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/programmer) manually updates the page. A simple HTML page is an example of static content.

This is an H5 Header

Dynamic pages adapt their content and/or appearance depending on end-user’s input/interaction or changes in the computing environment (user, time, database modifications, etc.)

Notice Styles are shown below

This is a sample of the 'attention' style. Use this style to denote very important information to your users. To use this use the following html: [span class=attention] ...some content.... [/span] This is a sample of the 'notice' style. Use this style to denote very important information to your users. To use this use the following html: [span class=notice] ...some content.... [/span] This is a sample of the 'alert' style. Use this style to denote very important information to your users. To use this use the following html: [span class=alert] ...some content.... [/span] This is a sample of the 'download' style. Use this style to denote very important information to your users. To use this use the following html: [span class=download] ...some content.... [/span] This is a sample of the 'approved' style. Use this style to denote very important information to your users. To use this use the following html: [span class=approved] ...some content.... [/span] This is a sample of the 'media' style. Use this style to denote very important information to your users. To use this use the following html: [span class=media] ...some content.... [/span] This is a sample of the 'note' style. Use this style to denote very important information to your users. To use this use the following html: [span class=note] ...some content.... [/span] This is a sample of the 'cart' style. Use this style to denote very important information to your users. To use this use the following html: [span class=card] ...some content.... [/span] This is a sample of the 'camera' style. Use this style to denote very important information to your users. To use this use the following html: [span class=camera] ...some content.... [/span] This is a sample of the 'doc' style. Use this style to denote very important information to your users. To use this use the following html: [span class=doc] ...some content.... [/span]

This is a sample [pre] ... [/pre] tag:
 
div.modulebox-black div.bx1 {
  background: url(../images/black/box_bl.png) 0 100% no-repeat; 
}
 
div.modulebox-black div.bx2 {
  background: url(../images/black/box_tr.png) 100% 0 no-repeat;
}
 
div.modulebox-black div.bx3 {
  background: url(../images/black/box_tl.png) 0 0 no-repeat;
  padding: 0;
  margin: 0;
}

Blockquote Styles

This is a blockquote, you will want to use the following formatting: [blockquote]....[/blockquote]Content can be changed on the client side (end-user's computer) by using client-side scripting languages (JavaScript, JScript, Actionscript, etc.) to alter DOM elements (DHTML). Dynamic content is often compiled on the server utilizing server-side scripting languages (Perl, PHP, ASP, JSP, ColdFusion, etc.).

This is a blockquote, you will want to use the following formatting: [blockquote class=blue]...[/blockquote] Both approaches are usually used in complex applications. With growing specialization in the information technology field there is a strong tendency to draw a clear line between web design and web development.

This is a blockquote, you will want to use the following formatting: [blockquote class=red]...[/blockquote]Web design is a kind of graphic design intended for development and styling of objects of the Internet's information environment to provide them with high-end consumer features and aesthetic qualities.

This is a blockquote, you will want to use the following formatting: [blockquote class=green]...[/blockquote]The offered definition separates web design from web programming, emphasizing the functional features of a web site, as well as positioning web design as a kind of graphic design.

This is a blockquote, you will want to use the following formatting: [blockquote class=purple]...[/blockquote]The process of designing web pages, web sites, web applications or multimedia for the Web may utilize multiple disciplines, such as animation, authoring, communication design, corporate identity, graphic design, human-computer interaction, information architecture, interaction design, marketing, photography, search engine optimization and typography.

This is a blockquote, you will want to use the following formatting: [blockquote class=orange]...[/blockquote]Markup languages (such as HTML, XHTML and XML). Style sheet languages (such as CSS and XSL). Client-side scripting (such as JavaScript). Server-side scripting (such as PHP and ASP). Database technologies (such as MySQL and PostgreSQL). Multimedia technologies (such as Flash and Silverlight).

This is a blockquote, you will want to use the following formatting: [blockquote class=brown]...[/blockquote]Web pages and web sites can be static pages, or can be programmed to be dynamic pages that automatically adapt content or visual appearance depending on a variety of factors, such as input from the end-user, input from the Webmaster or changes in the computing environment (such as the site's associated database having been modified).

This is a blockquote, you will want to use the following formatting: [blockquote class=grey]...[/blockquote]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.

List Styles - Special Icons

Below is a list with special icons. To use this style create a list in the following format: [list class=class name][li]....[/li][li....[/li][/list]

• To use this style create a list in the following format: [list class=special-1][li]...[/li][li]...[/li][/list].

• To use this style create a list in the following format: [list class=special-2][li]...[/li][li]...[/li][/list].

• To use this style create a list in the following format: [list class=special-3][li]...[/li][li]...[/li][/list].

• To use this style create a list in the following format: [list class=special-4][li]...[/li][li]...[/li][/list].

• To use this style create a list in the following format: [list class=special-5][li]...[/li][li]...[/li][/list].

• To use this style create a list in the following format: [list class=special-6][li]...[/li][li]...[/li][/list].

• To use this style create a list in the following format: [list class=special-7][li]...[/li][li]...[/li][/list].

• To use this style create a list in the following format: [list class=special-8][li]...[/li][li]...[/li][/list].

• To use this style create a list in the following format: [list class=special-9][li]...[/li][li]...[/li][/list].

• To use this style create a list in the following format: [list class=special-10][li]...[/li][li]...[/li][/list].

• To use this style create a list in the following format: [list class=special-11][li]...[/li][li]...[/li][/list].

• To use this style create a list in the following format: [list class=special-12][li]...[/li][li]...[/li][/list].

• To use this style create a list in the following format: [list class=special-13][li]...[/li][li]...[/li][/list].

• To use this style create a list in the following format: [list class=special-14][li]...[/li][li]...[/li][/list].

Span Styles - Number

Below is a list with number. To use this style create a list in the following format:[number color=color value=1]...some content...[/number]

1To use this style create a list in the following format: [number value=1]...some content...[/number]

2To use this style create a list in the following format: [number value=2]...some content...[/number]

3To use this style create a list in the following format: [number value=3]...some content...[/number]

4To use this style create a list in the following format: [number color=red value=4]...some content...[/number]

5To use this style create a list in the following format: [number color=blue value=5]...some content...[/number]

6To use this style create a list in the following format: [number color=green value=6]...some content...[/number]

7To use this style create a list in the following format: [number color=purple value=7]...some content...[/number]

8To use this style create a list in the following format: [number color=orange value=8]...some content...[/number]

9To use this style create a list in the following format: [number color=brown value=9]...some content...[/number]

10To use this style create a list in the following format: [number color=grey value=10]...some content...[/number]

Highlight Styles

This is a span that allows you to highlight words or phrases. Use the following format: [highlight] ... some content ... [/highlight]

This is a span that allows you to highlight words or phrases. Use the following format: [highlight color=red] ... some content .... [/highlight]

This is a span that allows you to highlight words or phrases. Use the following format: [highlight color=blue] ... some content .... [/highlight]

This is a span that allows you to highlight words or phrases. Use the following format: [highlight color=green] ... some content .... [/highlight]

This is a span that allows you to highlight words or phrases. Use the following format: [highlight color=orange] ... some content .... [/highlight]

This is a span that allows you to highlight words or phrases. Use the following format: [highlight color=brown] ... some content .... [/highlight]

This is a span that allows you to highlight words or phrases. Use the following format: [highlight color=purple] ... some content .... [/highlight]

This is a span that allows you to highlight words or phrases. Use the following format: [highlight color=grey] ... some content .... [/highlight]

This is a span that allows you to highlight words or phrases. Use the following format: [highlight color=bold] ... some content .... [/highlight]

Inset Styles

Purposing web design is a complex, but essential ongoing activity. Before creating and uploading a website, it is important to take the time to plan exactly what is needed in the website. Thoroughly considering the audience or target market, as well as defining the purpose and deciding what content will be developed, are extremely importantYou will need to use the following formatting: [inset side=right] ... some content ...[/inset]Web design is similar (in a very simplistic way) to traditional print publishing.

Every website is an information display container, just as a book; and every web page is like the page in a book. However, web design uses a framework based on digital code and display technology to construct and maintain an environment to distribute information in multiple formats. Taken to its fullest potential, web design is undoubtedly the most sophisticated and increasingly complex method to support communication in today's world.

You will need to use the following formatting: [inset side=left] ... some content ...[/inset]It is essential to define the purpose of the website as one of the first steps in the planning process. A purpose statement should show focus based on what the website will accomplish and what the users will get from it. A clearly defined purpose will help the rest of the planning process as the audience is identified and the content of the site is developed.

Setting short and long term goals for the website will help make the purpose clear and plan for the future when expansion, modification, and improvement will take place. Setting a goal practices and measurable objectives should be identified to track the progress of the site and determine success.

DropCap Styles

PDefining the audience is a key step in the website planning process. The audience is the group of people who are expected to visit your website – the market being targeted. These people will be viewing the website for a specific reason and it is important to know exactly what they are looking for when they visit the site. A clearly defined purpose or goal of the site as well as an understanding of what visitors want to do or feel when they come to your site will help to identify the target audience.

You will need to use the following formatting:[dropcap cap=P]...some content...[/dropcap]

PUpon considering who is most likely to need or use the content, a list of characteristics common to the users such as audience characteristics, information preferences, computer specifications, web experience. Taking into account the characteristics of the audience will allow an effective website to be created that will deliver the desired content to the target audience.

You will need to use the following formatting:[dropcap color=red cap=P]...some content....[/dropcap]

PContent evaluation and organization requires that the purpose of the website be clearly defined. Collecting a list of the necessary content then organizing it according to the audience's needs is a key step in website planning. In the process of gathering the content being offered, any items that do not support the defined purpose or accomplish target audience objectives should be removed. It is a good idea to test the content and purpose on a focus group and compare the offerings to the audience needs. The next step is to organize the basic information structure by categorizing the content and organizing it according to user needs.

You will need to use the following formatting:[dropcap color=blue cap=P]...some content....[/dropcap]

PEach category should be named with a concise and descriptive title that will become a link on the website. Planning for the site's content ensures that the wants or needs of the target audience and the purpose of the site will be fulfilled.

You will need to use the following formatting:[dropcap color=green cap=P]...some content....[/dropcap]

PCompatibility and restrictions. Because of the market share of modern browsers (depending on your target market), the compatibility of your website with the viewers is restricted. For instance, a website that is designed for the majority of websurfers will be limited to the use of valid XHTML 1.0 Strict or older, Cascading Style Sheets Level 1, and 1024x768 display resolution. This is because Internet Explorer is not fully W3C standards compliant with the modularity of XHTML 1.1 and the majority of CSS beyond 1. A target market of more alternative browser (e.g. Firefox, Safari and Opera) users allow for more W3C compliance and thus a greater range of options for a web designer.

You will need to use the following formatting:[dropcap color=purple cap=P]...some content....[/dropcap]

PAnother restriction on webpage design is the use of different image file formats. The majority of users can support GIF, JPEG, and PNG (with restrictions). Again Internet Explorer is the major restriction here, not fully supporting PNG's advanced transparency features, resulting in the GIF format still being the most widely used graphic file format for transparent images.

You will need to use the following formatting:[dropcap color=orange cap=P]...some content....[/dropcap]

PMany website incompatibilities go unnoticed by the designer and unreported by the users. The only way to be certain a website will work on a particular platform is to test it on that platform. Planning documentation is used to visually plan the site while taking into account the purpose, audience and content, to design the site structure, content and interactions that are most suitable for the website. Documentation may be considered a prototype for the website – a model which allows the website layout to be reviewed, resulting in suggested changes, improvements and/or enhancements. This review process increases the likelihood of success of the website.

You will need to use the following formatting:[dropcap color=brown cap=P]...some content....[/dropcap]

PThe first step may involve information architecture in which the content is categorized and the information structure is formulated. The information structure is used to develop a document or visual diagram called a site map. This creates a visual of how the web pages or content will be interconnected, and may help in deciding what content will be placed on what pages.

You will need to use the following formatting:[dropcap color=grey cap=P]...some content....[/dropcap]

Important Emphasis Styles