Accessibility

Website development

How to build well-designed websites

Many of you are designing and developing websites, ranging from simple web pages to complex sites and applications. Using standards such as CSS and XML is what separates a modern, well-constructed site that can grow and change with your needs from a simple, quick web page.

Your visitors are also expecting more from the sites they visit. Web developers are working to deliver more functional sites with interactive, rich interfaces to help users navigate and work with data.

AlertThis content requires Flash

Download the free Flash Player now!

Get Adobe Flash Player

See websites in action

CSS Zen Garden

CSS Zen Garden

(CSS-based website)

CSS Zen Garden is a site dedicated to CSS layout where participants contribute their own unique CSS-based designs using the exact same HTML structure as other participants. Only the CSS changes from one design to the next. Through the examples on this site, you will begin to understand what is possible when designing sites with CSS.

NBC's 30 Rock video

NBC's 30 Rock video

(Spry-based site)

NBC used the Spry framework for Ajax to aid in the layout of information and video clips from the show 30 Rock.

The Wharton School

The Wharton School of the University of Pennsylvania

 (ColdFusion-based dynamic site)

Using ColdFusion Wharton created, MySPIKE, a personalizable intranet-based communications suite for its students that provides access to course materials, news and announcements, discussion groups, e-mail, course-registrations, directories, and much more.


Ingredients for building a basic website

To get started creating websites, you first need an authoring tool to create the HTML code. If you are comfortable writing HTML code yourself, you can use any text editor such as Text Edit on Mac or Notepad on Windows. You can also use more complex applications that were created specifically for creating web pages. Adobe Dreamweaver is one example.

Once you have an HTML editor, you will need some content such as text, images or other media such as Adobe Flash content.

Finally, you will need access to a web server to place your content on so others can see your web pages in their web browser. There are many low cost web hosting services available. After you are familiar with creating basic HTML pages, if you plan to create dynamic data-driven web pages, you will also need access to an application server technology. If you think you may want to do this at some point in the future, you should consider this when choosing a web host. Some common application server technologies include ColdFusion, PHP, and ASP.

The main ingredients for creating a basic website include

  • An HTML editor such as Notepad, Text Edit, Dreamweaver, or any text editor

  • Images or other assets such as Adobe Flash content (optional)
  • A web host or some server space
  • An application server, such as ColdFusion, PHP, or ASP (optional)

Learn to design and develop websites

In the following projects, you will learn how to get started building websites using Dreamweaver. In the first set of tutorials, you will start from the beginning and build a table-based layout website. Websites these days are usually built using a CSS-based layout, however, this first set of tutorials we help you familiarize yourself with Dreamweaver features and functionality. No prior Dreamweaver experience is needed to get started. In the second set of tutorials, you will build on your skills and create a CSS-based website. The third set of tutorials will walk you through creating your first dynamic, data-driven website.


Creating Your First Website with Dreamweaver CS 3


Designing with CSS and Dreamweaver CS3


Developing a web application with Dreamweaver CS 3

Developing a web application with Dreamweaver CS 3

  1. Setting up your application environment (Follow one of the following three application server technologies. Once you have completed that tutorial, complete the tutorial on Developing a web application with Dreamweaver.)
  2. Developing a web application with Dreamweaver

Next steps