AGI: Dynamic Learning Dreamweaver CS3

108

Dynamic Learning Dreamweaver CS3
Page 9

Tag hierarchy

QuarkXPress 6.5 and 7 have a number of built-in web tools. To learn more, click here to read PDF articles X-Ray Magazine v3n2: Make Web-ready HTML Pages, X-Ray Magazine v3n4: Web Forms Part One, or X-Ray Magazine v3n5: Web Forms Part Two.

HTML tags follow a certain order of weight, or hierarchy, to make sure everything displays as it should. The tag at the top of the hierarchy is the <html> tag; every other tag you create is contained within it. Tags such as the <body> tag will always hold smaller tags such as the (paragraph), <img> (image), and (bold) tags. In addition, structural tags (such as those that create paragraphs, lists and tables) hold more weight than formatting tags such as (bold) and (italic). Take this line of code for example:

Big bold paragraph

Although code such as this may work in certain browsers, it isn't recommended, because the tag technically holds less weight than the tag. The following code represents a safer and more proper way to include the bold type:

Big bold paragraph

Dreamweaver generally does a great job of keeping tags properly nested, or contained within each other. When you choose to manipulate the code by hand, you should always keep good coding techniques in mind.

XHTML 1.0 Transitional

The latest recommended version of HTML is XHTML 1.0, a stricter version of HTML that makes the language more compatible with newer platforms, such as mobile phones and handheld devices, that require code to be perfectly formed. XHTML combines elements of HTML and XML, a language used to describe data. XML, or Extensible Markup Language, has become a popular method of exchanging information among seemingly unrelated applications, platforms, and systems. By default, Dreamweaver creates new web pages using the XHTML 1.0 Transitional standard.

What's the difference?

Although tags and attributes remain the same, the structure of the language changes with XHTML, becoming stricter. Whereas HTML was very forgiving of sloppy coding practices such as overlapping or unclosed tags, XHTML requires all tags to be closed and properly nested. HTML doesn't care which case you use when constructing tags, but in XHTML, all tags must be lowercase.

For example, a (break) tag, which normally doesn't require a closing tag, now must be closed. You can write tags to self-close, using a forward slash-making sure there is a space between the keyword (br) and the forward slash-and closing the bracket like so:

The result is a well-formed language that takes advantage of newer browsers and device platforms, while remaining compatible with older browsers. Working with XHTML in Dreamweaver requires nothing more than selecting XHTML 1.0 Transitional as the Document Type (DocType) when creating a new page.

Explorations in code

Although this book occasionally refers to the code for examples, hand coding is not a primary goal of the included lessons. The best way to learn how code represents the layouts you are building visually is to switch to the Code view and explore what's happening behind the scenes.

It's important to remember that every button, panel, and menu in Dreamweaver represents some type of HTML tag, attribute, or value; very rarely will you learn something that is unrelated or proprietary to Dreamweaver alone. Think of the Dreamweaver workspace as a pretty face on the HTML language.

A look at the Welcome Screen

A common fixture in most CS3 applications is the Welcome Screen, which is a launching pad for new and recent documents. In Dreamweaver, the Welcome Screen appears when the application launches or when no documents are open. From the Welcome Screen, you can create new pages, create a new site definition, open a recent document, or use one of Dreamweaver's many starter pages or layouts.

AGI: Dynamic Learning Dreamweaver CS3 Figure 35

The Welcome Screen appears when you launch the application, or when no documents are open.

Here's what you'll find on the Welcome Screen:

Open a Recent Item: A list of the last few documents you worked on appear in the leftmost column, or you can browse to open a different file using the Open button at the bottom.

Create New: In addition to HTML pages, you can choose from a variety of new document formats such as CSS, JavaScript, and XML. Dreamweaver is not just a web page-building tool, but a superior text editor, making it ideal for creating many non-HTML files. You can also define a new Dreamweaver site using the link at the bottom, or choose the More folder for even more new file options.

Create from Samples: If you're not up to creating a design from scratch, or if you need a little inspiration, Dreamweaver features several starter files, ranging from complete page designs to stripped-down starter layouts. Starter page designs are categorized into several themes, from Health and Fitness to Entertainment, giving you plenty of options for getting started quickly and in style. Basic starter pages include many useful and common layout structures for e-commerce, photo display, and utility forms.

Creating, opening, and saving documents

The lessons throughout this book require that you create, save, and open existing files. You can accomplish most file-related tasks from the File menu at the top, or from the Start page that appears when you launch Dreamweaver.

Creating new documents

Dreamweaver creates text files, commonly in the form of HTML files (or web pages). It can also create files in a variety of text-based languages, including CSS, XML, JavaScript, and even Flash ActionScript.

You can create blank files that you build from the ground up, or get started with a variety of layout templates and themes. You can create new documents from the File menu or from the Start page.

AGI: Dynamic Learning Dreamweaver CS3 Figure 36

The New Document dialog box gives you a choice of new files in a variety of formats and templates.

To create a new document, choose File > New. The New Document dialog box will appear.

Select Blank Page > HTML. Under Layout, choose <none> to start a new blank document.

To save a document, choose File > Save or File > Save As.

When prompted, choose a location for your file and assign it a name. Note that you must save HTML files with an .html extension, or they will not be interpreted properly in a browser. This rule applies for files of any type (.xml, .css, .cfm, etc.).

To open an existing document, choose File > Open.

Select an existing document and choose Open.

Now that you've seen what Dreamweaver can do, it's time to put what you've learned into practice. Move to the next lesson so you can begin building your first Dreamweaver site!

Self study

Explore the ready-to-use CSS layouts available in Dreamweaver by choosing File > New, then selecting HTML from the Page Type column. Browse the options listed in the Layout column and open a few layouts. Identify some that you'd like to use as a starting point for any future project.

Review

Questions

From what two locations in Dreamweaver can a new document can be created?

In what three views does Dreamweaver allow you to view and edit documents?

True or False: When a web page is requested, it is delivered to a user's browser as a completed, flat file ready for viewing.

Answers

From the Welcome Screen or by choosing File > New.

Design, Split, and Code views.

False. Files are delivered individually; the browser uses HTML code to assemble the resources together to display a finished page.

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | PDF Version