How to Choose Web Software | WebReference

How to Choose Web Software

How to Choose Web Software

Excerpted from Dreamweaver 8 Design and Construction by Marc Campbell. ISBN 0-596-10163-5, Copyright © 2006 O'Reilly Media, Inc. All rights reserved.

Chapter 1: Stocking Your Technological Toolbox

In this chapter

  • Choosing Software

  • Comparing Static and Dynamic Sites
Not to start this book on a philosophical note, but if you want to build something, you need tools. And because the quality of your tools helps to improve the quality of your creation, you want the best web design software that your budget can tolerate.

You're off to an excellent start by selecting Dreamweaver, by the way. It's the industry standard in web design for good reason, and it's particularly useful for building web sites quickly.

This chapter explains what else you'll need to weave the web site of your dreams.

Choosing Software

A web site is a patchwork of computer files of various types. Some are HTML documents. Others are image files. Yet others are multimedia files like Flash movies and Acrobat documents. To create and edit these files and organize them into a coherent, consistent whole—to turn them into a web site—you need several pieces of software.

Unfortunately, no single software package—not even Dreamweaver—gives you the tools to do everything from designing your pages to creating images and multimedia to previewing your site and sampling the user experience. With that in mind, here is a checklist for the well-rounded web designer's software library:

  • Code editor

  • Web browsers

  • Image editor

  • Multimedia design tools and plug-ins

Choosing a Code Editor

A code editor is software that enables you to build web pages. Dreamweaver's got you covered here, so you can check the code editor off your list. In fact, Dreamweaver does you two better. It includes tools for organizing your pages into a site and then publishing your site on the World Wide Web.

As your code editor, Dreamweaver is the most essential piece of software in your studio, because it's the center of production from the beginning of your project to the very end. You use Dreamweaver to create the HTML files that become the foundation of your site. You build the layout of the pages, add the text, connect the links, and position the images and multimedia files. The site-management features help you to craft the flow of your site from page to page and section to section, and the publishing features help you to launch your site and keep it up to date with your latest changes and additions.

But the Dreamweaver feature that appeals the most to visually-oriented people like designers and graphic artists is that the code editing happens behind the scenes. You build your site in a WYSIWYG environment—that's What You See Is What You Get, meaning that you don't code your layouts into existence but draw them on the screen, much like you would on a piece of paper. Dreamweaver translates your design into code that's usable in any web browser.

As you build your site, you'll use Dreamweaver to create three types of code: HTML, CSS, and JavaScript.

About HTML

HTML --- HyperText Markup Language—is the language of the Web, and HTML files are its lifeblood. When you go to your favorite web site and choose a page, what you're actually seeing on screen is an HTML document that the browser has interpreted and displayed visually, in the form of a graphic design.

An HTML document is essentially a text file that has been marked up to indicate its structure, or the page elements that make it up. Take a web page that contains, among other things, the following paragraph:

To indicate that this piece of text is a paragraph and not some other structural element, like a heading, for instance, or an item in a list, you drop special markers called tags around it. Most tags come in opening/closing pairs. The opening tag goes immediately before the element in the HTML code, while the closing tag comes immediately after it.

The correct pair of tags for a paragraph is <p>…</p>, so:

You have now identified this piece of text as a paragraph. When a web browser comes to this line of code in the HTML file, it understands that this text is supposed to be a paragraph, which in turn determines how the browser displays the text on the screen.

Now say you have a list of items to present:

  • Chemical

  • Biological

  • Nuclear

To mark these up as list items, you place the <li> (list item) tag around each one:

As you’ll see a bit later in this book, there are two kinds of lists in HTML: unordered (bulleted) and ordered (numbered). To display your items in the bulleted format, you mark up the entire list with the <ul> (unordered list)tag:

If you want a numbered list:

    1. Chemical

    2. Biological

    3. Nuclear

you go with the <ol> (ordered list) tag:

Now, if you're starting to get that old clutch in your chest like the one from trigonometry class, worry not. When you work in Dreamweaver, it's more important to understand the concept of tagging, not the exact process behind it.

 

Created: March 27, 2003
Revised: June 6, 2006

URL: https://webreference.com/programming/web/1