Excerpt from Dynamic Learning - Dreamweaver CS3

Photoshop CS3 integration

Users of the industry-standard Adobe Photoshop CS3 application can now easily bring designs and components they’ve created in Photoshop into Dreamweaver for use in their web pages. The new Optimization panel lets you specify settings for how to import a Photoshop document. Editing the document later is a snap; just double-click it and edit the original layered .psd file directly in Photoshop CS3. You can even select portions of documents in Photoshop CS3 and paste them directly into a document in Dreamweaver.

Now you will see how easy it is to import Photoshop images in the .psd file format into your web pages.

1 Choose File > Open. When the Open dialog box appears, navigate to the dw01lessons folder and select the file named PhotoshopDoc.html. Press Open.

2 Locate the Insert bar above the Document window, and select the Image icon ().

3 The Select Image Source dialog box appears, prompting you to locate an image file to place in your page. Navigate to the images folder within the dw01lessons folder and select the image named Discover.psd. Press OK (Windows) or Choose (Mac OS) to place the image. If the Image Tag Accessibility Attributes dialog box appears, choose Cancel.

4 The Image Preview dialog box appears. Here’s where you can set the quality, file type, and other options for the image file that you’re about to place. Leave the default settings at JPEG, Quality 80%. Press OK.

5 Now you must save the converted image. In the Save Web Image dialog box that appears, navigate to the images folder within the dw01lessons folder. In the Name field, type Discover.jpg, then press Save.

6 Next, the Image Tag Accessibility Attributes dialog box appears. Press OK. The image is placed in your document.

7 Choose File > Save to save your work, then choose File > Close.

You can also drag and drop .psd files from a folder on the Desktop directly into a Dreamweaver document. Give it a try!

CSS layouts

The continuing efforts of web designers to find the best design practices have resulted in a migration from table-based to CSS-based layouts. The use of tables for web page layouts is an old technique, preferred for their easy grid-like structure and guaranteed compatibility in most older browsers. However, the positioning flexibility that only CSS offers has made it the standard for today’s web designers.

If you’re a CSS novice but you want to get started on the right foot, the new CSS layouts in Dreamweaver will quickly get you up and running. Extensive inline comments included in the code will help you learn so that you can sharpen your CSS expertise while being creative and productive.

1 Choose File > New. Under Blank Page > HTML, you will see dozens of preconstructed layouts that take full advantage of the flexibility and power of CSS. Press Cancel.

2 To see an example of a page based on one of these layouts, Choose File > Open. Navigate to the dw01lessons folder and select the CSSLayouts.html document. Press Open. This page is based on the three-column liquid-header and footer CSS layout, which you can find under New Document > HTML.

3 Leave this file open, as you will use it in the next exercise.

Browser compatibility check

For years, web site designers have battled with consistency issues across different browsers, which often leads to sites being geared toward one specific browser or another. This is especially true of CSS-dependent web pages, where varying standards among browsers means lots of testing, trial, and error. Dreamweaver’s new Browser Compatibility Check feature locates any potentially buggy CSS and HTML combinations and displays them in the Results panel. By combining Browser Compatibility Check with the CSS Advisor, you can address and resolve any potential compatibility issues without juggling browsers.

The Manage CSS feature and the CSS Advisor

With CSS you can format, fine-tune, and position text, images, and content boxes creatively and precisely on your web page. Dreamweaver CS3 provides several panels, menus, and helpers to get you up and running with CSS. Not all designers follow the same workflow; some like to create styles before adding content, and others may add and edit styles as they progress further into a project. The Manage CSS feature in Dreamweaver makes it possible to easily adjust, move, and transition styles as you work so that you can add and fine-tune styles across multiple pages.

Meanwhile, the software’s CSS Advisor feature flags potential CSS-related problems that may surface during the Browser Compatibility checks. The Results panel shows you the exact issue, the page and line number where it occurs, and an online link to the Adobe CSS Advisor so that you can find the best solutions to the problem. It’s like having a CSS expert sitting alongside you, ready to help!

Adobe Device Central

The widespread use of Internet-ready devices, such as mobile phones and PDAs, makes it more necessary than ever to adapt your work for multiple sizes and platforms. Dreamweaver CS3 is now integrated with Adobe Device Central, which displays and simulates the appearance of HTML content in a variety of mobile, PDA, and handheld device skins and environments. Adobe adds new device profiles quarterly so that you can always stay on top of the market and make sure your content looks its best. Small Screen Rendering (SSR) mode shrinks images and text to emulate how they will display in a selected device, making it easier and more intuitive to develop rich mobile content.

To preview a page in Device Central:

1 With the CSSLayouts.html file open, choose File > Preview in Browser > Device Central. Device Central, which is a separate application, launches.

2 The Device Central application shows the page in the default mobile device. To see how this page will look in a popular mobile phone or PDA, double-click a device name from the Available Devices list on the left. Try the Motorola RAZR listing.

3 Choose File > Close (Windows) or Device Central > Quit (Mac OS) to exit Device Central and return to Dreamweaver. Choose File > Close to close the file.

Adobe Bridge CS3

All editions of Adobe Creative Suite 3 now feature Bridge CS3, a new standalone application designed to provide you with easy access to, and organization and management tools for, files across CS3 applications. Use Dreamweaver with Bridge CS3 for a more fluid workflow between your web site projects and essential resources such as images, stock photos, and source files.

Bridge CS3 provides full search capability and XMP metadata tagging, so you can easily find and add resources within the Dreamweaver environment. If your Dreamweaver site is part of a larger project that spans print, video, and mobile applications, Bridge CS3 keeps you connected to common resources and essential documents across all CS3 applications.

An overview of features

This book is dedicated to exploring, learning, and putting to use all that Dreamweaver has to offer. In this section, we will discuss some of the application’s coolest 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.

Built-in FTP: You can easily upload and download files to your web server from 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 bars: You can find intuitive icons for most common web page elements on a categorized Insert bar, 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 bar are tools for formatting text, building forms, and creating layouts. Customize a Favorites tab with your most-used icons.

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.

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.

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 email, 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, etc.) 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 (e.g., 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 DNS (Domain Name Service) 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 that 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 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.

Previous | 1 2 3 | Next