Excerpt from Dynamic Learning - Dreamweaver CS3
Tag structure and attributes
HTML uses tags, or bracketed keywords, that you can use to place or format content. Many tags require a closing tag, which is the keyword preceded by a forward slash (/).
1 Choose File > Open. When the Open dialog box appears, navigate to the dw01lessons folder. Select BasicHTML.html and press Open.
2 Select the Split button ( ) in the Document toolbar to see the layout as well as the code that makes up the page.
Take a look at line 9 (indicated at the left edge of the Code panel). The text My Bold Title is inside a Bold tag, which is simply the letter b contained within angled brackets. Any words or characters inside these tags will be formatted in bold, and will appear as shown in the Design view.
|
A look at the code reveals the tags used to format text in your page. |
Tags can also accept attributes that specify additional information for how the tag should display the content. Attributes are always placed inside the opening tag, and very often they can take a number of different values, such as a size, a color, or a direction in which to align something. Take a look at the line that reads This text will appear inside of its own paragraph. This line is enclosed in a p (paragraph) tag, which separates it from the other text by a line above and below. You can add attributes to this to align the text in whichever direction you want.
3 Highlight the entire line that reads This text will appear inside of its own paragraph at the bottom of the Design view.
4 Locate the paragraph align buttons in the Property inspector. Click the one that centers text ( ).
5 The text is now centered. Take a look at the Code view, and you’ll see that the align attribute has been added to the opening <p> tag, and has been set to a value of center.
|
Align or format text in the Property inspector, then see the appropriate tags and attributes created in HTML. |
6 Choose File > Save to save your work, then choose File > Close.
The structure of an HTML document
Although you use many HTML tags to format text, certain tags are devoted to establishing structures, such as lists, tables or, most importantly, the HTML documents themselves. The HTML tag is the most fundamental tag. It is used to specify the beginning and end of HTML in a document:
<html></html>
Inside the main HTML tags are two tags that define the key areas of your web page: the head and the body. The head of your page contains items that are not visible to your user, but are important nonetheless, such as search engine keywords, page descriptions, and links to outside scripts or style sheets. You create the head of the document inside the HTML tags using the <head> tag:
<html>
<head></head>
</html>
The body of your page is where all the visible elements of your page are contained. Here is where you’ll place and format text, images, and other media. You define the body of the page using the <body> tag:
<html>
<head></head>
<body>
My text and pictures go here...
</body>
</html>
Whenever you create a new HTML document in Dreamweaver, this framework is created automatically before you add anything to the page. Any visual elements you add to the page will be added, using the appropriate HTML code inside the <body> tags.
Placing images in HTML
You use some tags in HTML to place items, such as pictures or media files, inside a web page. The IMG tag is the most common example; its job is to place and format an image on the page. To place an image and see the resulting code, follow these steps:
1 Choose File > Open. When the Open dialog box appears, navigate to the dw01lessons folder. Select the Images.html file and press Open to edit the file.
2 Click the Split button () in the Document toolbar so you’re viewing both the layout and the code for your page. In the Design view portion of the Split view, click below the line of text to place your cursor underneath it. This is where you’ll place a new image.
|
Enter the Split view before you insert the image onto your page. |
3 From the Common tab on the Insert bar at the top of the page, press the Image button
( ) and choose Image. When the Select Image Source dialog box appears, select the file named gears.jpg, located under images within the dw01lessons folder.
|
Choose Insert Image from the Common tab on the Insert bar. |
4 Press OK (Windows) or Choose (Mac OS); when the Image Tag Accessibility Attributes dialog box appears, enter the words Gears Image in the Alternate text field and press OK to place the image.
|
Attach alternate text to your image. |
|
The Image Tag Accessibility Attributes dialog box appears when you add images to provide additional information for users with special needs (such as the visually impaired). You should always provide each image with alternative text, but you can disable this panel by choosing Edit > Preferences (Windows) or Dreamweaver > Preferences (Mac OS). In the Accessibility category, uncheck the Images option. |
5 The code shows that the HTML <img> tag has been used to place the image. Click once on the image in the Document window to select it. The Property inspector at the bottom of the page displays and sets the properties for the image.
6 In the Border box of the Property inspector, type 3 to set a three-pixel border around the image, then press Enter (Windows) or Return (Mac OS). The <img> tag now contains the border attribute, which is set to a value of 3, just the way you typed it in the Property inspector.
|
As you change or add options to a selected image, Dreamweaver changes code behind the scenes. |
7 Choose File > Save to save your work, then choose File > Close.
Note that in HTML, images and media are not embedded, but placed. This means that the tags point to files in their exact locations relative to the page. The tags count on those files always being where they’re supposed to be in order to display them. This is why HTML pages are typically very lightweight in terms of file size.
Colors in HTML
In Dreamweaver’s various panels and in your code, each color is referred to by a six-character code preceded by a pound sign. This code is called hexadecimal code, and is the system that HTML pages use to identify and use colors. You can reproduce almost any color using a unique hexadecimal code. For example, you represent dark red in HTML as #CC0000.
The first, middle, and last two digits of the hexadecimal code correspond to values in the RGB spectrum. For instance, white, which is represented in RGB as R:255 G:255 B:255, is represented in HTML as #FFFFFF (255|255|255). Choosing colors is easy in Dreamweaver, thanks to a handy Swatches panel, which you can find in many places throughout the work area.
|
The Swatches panel makes it easy to work with colors. |
|
The color pickers in Adobe Photoshop and Illustrator also display and accept hexadecimal codes, making it easy to copy and paste colors between these applications and Dreamweaver. |
Case sensitivity and whitespace rules
HTML is a flexible language that has very few rules regarding its own appearance. Based on how strict you wish to write it, HTML can be either very specific about whether tags are written in upper- or lowercase (called case sensitivity) or not specific at all. To see how HTML treats whitespace, follow these steps.
1 Choose File > Open. When the Open dialog box appears, navigate to the dw01lessons folder. Select the Whitespace.html file, then press Open.
2 If your file is not in Split view, press the Split button () in the Document toolbar, so you can view both the layout and the code. You’ll notice three seemingly identical tags beneath line 9 in your code:
|
All of these tags are valid, even though they have very different case structures. |
All three tags use a completely different case structure, but all are valid and are treated in the same way. Take a look at the text that reads This is one sentence. This is another. The code shows lots of space between the two lines, but the Design view shows no space at all. This is because whitespace or line returns between two pieces of text or tags are not recognized.
|
Despite the large amount of space between the two sentences,
they appear side-by-side in the Design view. |
3 To create a line return, or a new paragraph, you need to enter the HTML tags necessary to do so. In the Design view at the bottom, position your cursor after the word sentence, then press Shift+Enter (Windows) or Shift+Return (Mac OS) twice. This creates two line returns—you can see that each line return is created in your code by a <br> (break) tag.
|
To create a line return, hold down the Shift key while pressing the Enter/Return key. |
4 To create a new paragraph, position your cursor before the phrase, This is another, and press Enter/Return. The text is separated by a line above and below, and is wrapped inside a set of <p> (paragraph) tags.
|
Dreamweaver creates a new paragraph each time you press Enter/Return. |
|
Other than a standard single space (such as the ones used in between words), several consecutive spaces created by the Space bar are ignored, and are still be displayed as only one space in Design view and in a browser. |
5 Choose File > Save to save your work then, choose File > Close.
Tag hierarchy
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 <p> (paragraph), <img> (image), and <strong> (bold) tags. In addition, structural tags (such as those that create paragraphs, lists and tables) hold more weight than formatting tags such as<strong> (bold) and <em> (italic). Take this line of code for example:
<strong><p>Big bold paragraph</p></strong>
Although code such as this may work in certain browsers, it isn’t recommended, because the <strong> tag technically holds less weight than the <p> tag. The following code represents a safer and more proper way to include the bold type:
<p><strong>Big bold paragraph</strong></p>
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 <br> (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:
<br />
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.
|
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.
|
The New Document dialog box gives you a choice of new files in a variety of formats and templates. |
1 To create a new document, choose File > New. The New Document dialog box will appear.
2 Select Blank Page > HTML. Under Layout, choose <none> to start a new blank document.
3 To save a document, choose File > Save or File > Save As.
4 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.).
5 To open an existing document, choose File > Open.
6 Select an existing document and choose Open.
Opening a recently opened document
To open a document you’ve worked on recently, Choose File > Open Recent or, from the Start page, select a document under the Open a Recent Item column.
|
Choose a file from the Welcome Screen or choose File >
Open Recent to select a recently opened file. |
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!
Previous | 1 2 3 |
