Excerpt from Adobe Dreamweaver CS4
Digital Classroom

• Page 1
• Page 2
• Page 3

Links

• Additional Resources for Learning Dreamweaver

Dreamweaver CS4 Jumpstart - continued

An overview of features

This book is dedicated to exploring, learning, and putting to use all that Dreamweaver has to offer. This section looks at some of the application’s key features.

Three different points of view: When you edit a document, Dreamweaver lets you see your work in one of three views: the Design, Split, or Code view. Dreamweaver’s easy-to-use Design view lets you build visually and see everything come to life as you create your pages. More experienced web designers and coders can use the Code view to edit a document’s HTML code and scripts directly, enhanced with easy-to-read color-coding and visual aids.

For those who like something in between, the Split view provides a split-pane Design and Code view all at once. You can easily change views at any time with a single click in the Document toolbar.

The Split view lets you edit your page visually while seeing the code being created behind the scenes.

Built-in FTP: You can easily upload and download files to and from your web server using the Files panel’s drag-and-drop interface, or use the Get/Put button at any time to post pages you’re currently working on. There’s no need for separate software. Dreamweaver also provides Check In/Check Out functionality and synchronization features for easy management.

Page and code object Insert panels: You can find intuitive icons for most common web page elements in a categorized Insert panel, from which you can add elements to your page with a single click. You can use additional panels to fine-tune any page element to ensure that you see exactly what you want. Included in the default Insert panel are tools for formatting text, building forms, and creating layouts. Customize a Favorites tab with your most-used icons.

The Insert panel is divided into several categories geared toward specific tasks.

Customizable workspace layouts: You can save combinations and positions of panels and toolbars for easy recall at any time. Save multiple workspace layouts for different users, or create different workspaces for specific tasks, such as coding or designing page layouts.

You can customize the Favorites panel with icons from any of the other Insert panel categories.

Powerful visual aids: Take advantage of the precision you’re accustomed to in other design programs through Dreamweaver’s guides, rulers, measuring tools, and customizable positioning grid. Dreamweaver’s Design-Time style sheets let you customize the look of your page exclusively for the editing process, making layout quicker and easier without permanently altering the page’s appearance.

Rulers, a document grid, and guides help you to size and position page items with precision.

CSS panel: Take advantage of the vast design and formatting options that CSS provides through Dreamweaver’s full-featured CSS panel, which lets you create, edit, and manage styles on-the-fly from a single panel.

How web sites work

Before embarking on the task of building web pages (and in turn, a web site), it’s a good idea to know the basics of how web sites work, how your users view them, and what you need to know to make sure your web site looks and works its best.

A simple flow chart

What happens when you type in a web site address? Most people don’t even think about it; they just type in a URL, and a web site appears in a flash. They likely don’t realize how many things are going on behind the scenes to make sure that pages gets delivered to their computers so that they can do their shopping, check their e-mail, or research a project.

When you type in a URL or IP address, you are connecting to a remote computer (referred to as a server) and downloading the documents, images, and resources necessary to reconstruct the pages you will view at that site. Web pages aren’t delivered as a finished product; your web browser (Internet Explorer, Firefox, Safari, and so on) is responsible for reconstructing and formatting the pages based on the HTML code included in the pages. HTML (Hypertext Markup Language) is a simple, tag-based language that instructs your browser how and where to insert and format pictures, text, and media files. Web pages are written in HTML, and Dreamweaver builds HTML for you behind the scenes as you construct your page in the Design view.

An Internet Service Provider (ISP) enables you to connect to the Internet. Some well-known ISPs include America Online and Earthlink. You view web pages over an Internet connection using a browser, such as Internet Explorer, Firefox, or Safari. A browser can decipher and display web pages and their content, including images, text, and video.

Domain names and IP addresses

When you type in a web site address, you usually enter the web site’s domain name (such as eBay.com). The web site owner purchased this domain name and uses it to mask an IP address, which is a numerical address used to locate and dial up the pages and files associated with a specific web site.

So how does the web know what domains match what IP address (and in turn, which web sites)? It uses a Domain Name Service (DNS) server, which makes connections between domain names and IP addresses.

Servers and web hosts

A DNS server is responsible for matching a domain name with its companion IP address. Think of the DNS server as the operator at the phone company who connects calls through a massive switchboard. DNS servers are typically maintained by either the web host or the registrar from which the domain was purchased. Once the match is made, the request from your user is routed to the appropriate server and folder where your web site resides. When the request reaches the correct account, the server directs it to the first page of the web site, which is typically named index.html, default.html, or whatever the server is set up to recognize as a default starting page.

A server is a machine very much like your desktop PC, but it’s capable of handling traffic from thousands of users (often at the same time!), and it maintains a constant connection to the Internet so that your web site is available 24 hours a day. Servers are typically maintained by web hosts, companies that charge a fee to host and serve your web site to the public. A single server can sometimes host hundreds of web sites. Web hosting services are available from a variety of providers, including well-known Internet service companies, such as Yahoo!, and large, dedicated hosting companies, such as GoDaddy. It is also common for a large company to maintain its own servers and web sites on its premises.

The role of web browsers

A web browser is an application that downloads and displays HTML pages. Every time you request a page by clicking a link or typing in a web site address, you are requesting an HTML page and any files it includes. The browser’s job is to reconstruct and display that page based on the instructions in the HTML code, which guides the layout and formatting of the text, images, and other assets used in the page. The HTML code works like a set of assembly instructions for the browser to use.

An introduction to HTML

HTML is what makes the Web work; web pages are built using HTML code, which in turn is read and used by your web browser to lay out and format text, images, and video on your page. As you design and lay out web pages in Design view, Dreamweaver writes the code behind the scenes that is necessary to display and format your page in a web browser.

Contrary to what you may think, HTML is not a programming language, but rather a simple text-based markup language. HTML is not proprietary to Dreamweaver—you can create and edit HTML in any text editor, even simple applications such as Windows Notepad and Mac OS X’s TextEdit. Dreamweaver’s job is to give you a visual way to create web pages without having to code by hand. If you like to work with code, however, Dreamweaver’s Code view, discussed earlier, is a fully featured text editor with color-coding and formatting tools that make it far easier to write and read HTML and other languages.

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 10 (indicated at the left edge of the Code panel). The text My Bold Title is inside a Strong tag, which is simply the word strong contained within angled brackets. Any words or characters inside these tags are formatted in bold, and 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 CSS rules that specify additional information for how the tag should display the content. CSS rules 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 a class rule 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 With the CSS button selected in the Property Inspector, locate the paragraph align buttons. Press the Align Center button ().

5 In the New CSS Rule dialog box, type .center into the Selector Name field, and press OK.

Name a newly created style in the New CSS Rule dialog box.

6 The text is now centered. Take a look at the Code view, and notice that the .center rule has been added to the opening <p> tag.

Align or format text in the Property Inspector, and then see the appropriate rules and attributes created in your code.

For more information on formatting text with CSS rules, please see Lesson 3, “Adding Text and Images.”

7 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 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 are 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 that 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 category in the Insert panel on the right side of the screen, click on the Images element () and choose Image. When the Select Image Source dialog box appears, select the file named gears.jpg, located in the images folder within the dw01lessons folder.

Choose 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, type 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). Click on the background of the page to deselect and note the appearance of the border. 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

Adobe Dreamweaver Training Class Locations

AGI offers regularly scheduled and private Dreamweaver classes at our training centers. Adobe Dreamweaver Training in or near Boston, Chicago, New York City, Philadelphia, Orlando, and London, England. Visit our Dreamweaver training class locations page.