Layers Magazine » Dreamweaver

Embedding HTML5 Video in Adobe Dreamweaver CS6

tom green — Tue, 19 Feb 2013 14:00:25 +0000

In this video, Tom Green sheds some light on the embedding choices for video in HTML5.

Calling an Edge Animation with HTML iFrame

tom green — Fri, 14 Dec 2012 14:35:40 +0000

Tom Green talks about how to get an edge animate composition into an html page using the iframe tag.

Edge Animations into Dreamweaver CS6

tom green — Fri, 09 Nov 2012 17:02:54 +0000

Thanks to a new update, it is easier than ever to move Edge animations into Dreamweaver CS6. Simply export an Animate Deployment Package from Edge and then insert that Edge Animate Composition into your web design in Dreamweaver. Watch the video and follow along.

New CSS3 Support in Dreamweaver CS6

adobe — Thu, 26 Apr 2012 14:41:29 +0000

Adobe Evangelist Greg Rewis shows what’s new with CSS3 support in Dreamweaver CS6.

Designing Pages in Dreamweaver with CSS3

Janine Warner — Thu, 24 Feb 2011 17:05:19 +0000

All the hype about HTML5 and CSS3 has Web designers chomping at the keyboard to make the Web more beautiful. With all of the warnings that these cool new features may not be ready for prime time, what should you do today? Here are a few of my favorite new CSS3 techniques that work well enough to put them to use right away.

1 USE ANY FONT ON YOUR WEBPAGES
Designers have been begging for years to have more fonts on the Web (without resorting to images). Now, thanks to CSS3, you can link to any font and use that font for any or all of the text on your webpages. This long-awaited feature already works in the most recent versions of most browsers, even Internet Explorer (since version 8). In older browsers, text reverts to the default font, but that’s what people with old browsers deserve anyway. Your hip friends and clients using Firefox, and even Safari on an iPhone or iPad, will see your fancy fonts.

2 TARGETING BROWSERS WITH CSS
The good news is a growing percentage of Internet users can view these new CSS features such as linked fonts. If you use a good traffic reporting service, such as Google Analytics (shown here), you can identify the browsers that visit your website—and design for your target audience. Firefox is now the most popular browser in the U.S., and other browsers that use WebKit (such as Safari) also support most of the new CSS3 features. Even Internet Explorer supports a growing number of HTML5 and CSS3 features with each new version.

3 ENHANCE DESIGNS WITH CSS3 TECHNIQUES
If you want to design for the future, without compromising the present, all of the CSS rules in this tutorial won’t break, even in older browsers. If you use something like a drop shadow or fancy font, an old browser simple won’t display it. So you have nothing to lose but a few minutes with this tutorial. The page shown here in Firefox was designed entirely with CSS, not an image on the page. The majority of the Web audience is using browsers that can display these new features already.

4 DREAMWEAVER WON’T DISPLAY HTML5/CSS3
If you know how to write the styles and other code, you can use any Web design program or text editor to create pages with HTML5 and CSS3. If you’re used to getting a good preview of your page designs in Dreamweaver, you may be disappointed that even Dreamweaver CS5 doesn’t support all of the new features of HTML5 and CSS3 (at least not yet). If you add the HTML5 Pack (shown in the next step) you can preview pages with these features, but in Design View in Dreamweaver, as you see here, linked fonts and drop shadows won’t display.

5 THE HTML5 EXTENSION FOR DREAMWEAVER
What you see here is the multiscreen display you get when you add the HTML5 Pack to Dreamweaver. (The HTML5 Pack is now part of the 11.0.3 update for Dreamweaver CS5). The HTML5 Extension adds a three-way split-screen preview that simulates how your pages will look in an iPhone, iPad, and any browser that supports HTML5. The extension also supports many new CSS3 enhancements, which is why you see the fancy fonts, rounded corners, and drop-shadow effects in this preview.

6 LINKING FONTS
You add the font link tag to the head area of an HTML page referencing where the font is hosted on a Web server. There are multiple ways to set up fonts on a server, and a growing list of online services, such as the Google Font Directory, that make fonts easy to use (if you’re willing to settle for limited font collections). Here’s the code generated to link to a font named Lobster in the Google Font Directory: . Just add this code to the top of any webpage and you can use the font in CSS styles.

7 USING LINKED FONTS IN CSS STYLES
Once you link a font to your page, you can use it in any CSS style rule. Here are two examples that use the Lobster font and the Molengo font from the Google Font Directory:
? .molengo { font-family: ‘Molengo’, arial, serif; }
H1 { ?font-family: “Lobster, arial, serif; font-size: large; ?}? .

Finally, you need to apply a style to text in the page (like the ones shown in the image above and the example below):

. This is how you’d format the HTML to apply a class style like .molengo to use the Molengo font to format this sentence.

8 GENERATE FONT CODE AT FONTSQUIRREL
Check out how FontSquirrel.com makes it easy to use free fonts or to generate the code you need for your website to use any font you can upload to their server. (You’ll find detailed instructions on how to use their Font-Face Generator on the site.) They also offer a collection of font kits that are ready for you to use. Essentially, they have collected all the best free fonts they could find (so you don’t have to worry about licensing issues, even on commercial projects). Similar to the Google Font Directory, you can generate the code you need from their site, but FontSquirrel has a bigger collection of fonts.

9 CREATE SIMPLE ROUNDED CORNERS
One of the simplest and most popular new options in CSS3 is the ability to create rounded corners without a lot of extra markup or that image trick we used to put in the corners of our divs. If the Web were a perfect, standards-based world, border-radius: is all the code you’d need, but if you want your rounded corners to work in Firefox, you’ll need to add a second line with -moz to create a style like this:
.rounded-corners { width: 225px; padding: 10px; border-radius: 15px; -moz-border-radius: 15px; border: 1px solid #333;}

10 CREATE COMPLEX ROUNDED CORNERS
Now, rounder corners can be created with a single line of the border-radius option in CSS and can be used to create a different style for each corner. Using the four border-radius properties (border-bottom-right-radius, border-top-right-radius, etc.) you can create more complex designs. For example, this code makes the two left corners rounded:
.two-rounded-corners { width: 200px; padding: 20px; margin: 10px; color: #fff; background-color: #999; border-top-left-radius: 50px 50px; border-bottom-left-radius: 50px 50px; -moz-border-radius: 50px 50px 0px 0px; }

11 ADD A DROP SHADOW TO TEXT
CSS3 finally eliminates the need for Photoshop when all you want to do is add a simple shadow. The text-shadow property can be used in a style rule. For example, this code adds a drop shadow to any text formatted with the H1 tag. You can adjust the color and spacing of drop shadows by changing the pixel size and hexadecimal color code in the example below:
h1 { text-shadow: 2px 2px 2px #999;}

12 COMBINE FONTS AND DROP SHADOWS
You can use the CSS rules in combination to create more elaborate text effects. In this example, we used a font face, text shadow, and contrasting text and background colors. Remember, you must first link a font to a page (see Step 6) before you can use a font in a style rule. Here’s the style:
.logo { font-size: 300%; color: #FFF; background-color: #930; padding: 10px; text-shadow: 2px 2px 2px #000; }

13 ADD A DROP SHADOW TO A DIV
You can also add drop shadows to div tags. Again, you can control the color and location of the shadow, and you can even control how big it is, but the code for this is a bit more complex when you add all of those options, and you’ll need to use three different variations on this code to create shadows that work in Firefox and WebKit browsers. The code for this example is included in the following step, where you can see how it looks in Safari (like the other features in this column, you won’t see the drop shadows in Dreamweaver).

14 VIEW SHADOWS IN FIREFOX AND SAFARI
To view most of these features, you’ll need to preview your pages in the latest version of Firefox or Safari. Here’s the example shown in Safari above (and in Dreamweaver in the previous step).
.drop-shadow {
width: 625px;
padding: 5px;
-webkit-box-shadow: #CCC 10px 10px 5px;
-moz-box-shadow: #CCC 10px 10px 5px;
box-shadow: #CCC 10px 10px 5px; }

Editing a WordPress blog with Dreamweaver CS5

Janine Warner — Thu, 13 Jan 2011 16:21:33 +0000

One of the most dramatic improvements to Dreamweaver CS5 is the ability edit WordPress themes, but before you can get WordPress (or Joomla! or Drupal) to work, you’ll need to set up your computer as a Web server. It’s a lot of technical steps, but once you get all this set up, you’ll be able to use all of the great design tools in Dreamweaver.

1 WEB SERVER AND DATABASE SOFTWARE
To run WordPress, you need a Web server, a MySQL database, and PHP installed on your local computer. It’s also best to have the Firefox Web browser, so be sure to install it if you haven’t already. On a Mac, you can get everything you need in one nifty package at www.mamp.info. If you’re on Windows, go to wampserver.com/en. Because of the limited space in this column, these steps are specific to the Mac, but the process is similar for both platforms (and you’ll find special instructions for Windows users in the Dreamweaver Help Center on my site at www.DigitalFamily.com).

2 LAUNCH MAMP
After you download, install, and launch MAMP, a little window opens with controls to turn the Apache server and MySQL database on and off. Give them a second to get going and MAMP will launch the Firefox Web browser. If the browser doesn’t open automatically, click on the Open Start Page button. You’ll know that the server is working on your Mac when you see the Welcome to MAMP screen in your browser window and http://localhost/8888/MAMP in the address bar.

3 SET SERVER PREFERENCES
This is an optional step to remove the 8888 from the local URL: In the small, floating MAMP window, click Preferences, then click the Ports tab, and click the Set to Default Apache and MySQL Ports button. This changes the port from 8888 to 80. Click OK. Anytime you make a change to the server setup, or if things just don’t seem to be working right, restarting the server often fixes the problem. Click the Stop Servers button, wait a minute, and then click the Start Servers button to restart the server. Click the Open Start Page button to refresh the browser with the simplified URL.

4 CREATE A MYSQL DATABASE
Next, you need to create a database. Don’t worry, it’s not as hard as you may imagine because WordPress builds all of the tables for you. With MAMP open in Firefox, click on the phpMyAdmin tab at the top. In the Create New Database Field, enter a name (don’t use spaces or special characters). Make note of the name. Better yet, copy it so you can just paste it into WordPress when you get to Step 8 (you’ll need to enter it exactly). Click the Create button and you’ve created a database (WordPress takes care of the rest).

5 DOWNLOAD AND INSTALL WORDPRESS
Next, go to WordPress.org (not WordPress.com) and download WordPress (it’s free and it’s a quick download.) Unzip the WordPress folder and you’ll find all of the files and subfolders for a new blog. There’s really nothing to install but you’ll need to copy these files into the root folder of your local Apache Web server. On a Mac, the htdocs folder inside the MAMP folder inside the Applications folder is the root folder of your local server. (More on copying these files into the htdocs folder in the next step.)

6 COPY FILES INTO THE HTDOCS FOLDER
If you’re creating a single blog, simply copy all of the files in the WordPress folder you unzipped into the htdocs folder (inside the MAMP folder). If you’re working on multiple blogs, or if your blog is part of an existing Dreamweaver site and you want to work on all of the files together, you can create subfolders in the htdocs folder. Then copy the entire WordPress folder into the subfolder within htdocs as well as any Dreamweaver site files. This way you can work on them together in the same root folder in Dreamweaver.

7 OPEN WORDPRESS IN FIREFOX
Now it’s time to open the blog in a Web browser on your computer. Make sure that the Apache server and MySQL database are still running in the background (you can always check the floating MAMP dialog). In Firefox, enter the URL: http://localhost/ followed by any subfolder names you added to the htdocs folder. Note: The http:// isn’t optional, and you don’t use www. Also note: If you didn’t change the preferences in Step 3, you’ll still need the 8888, so your URL would be something like this: http://localhost/8888/foldername. Don’t panic when WordPress returns an error.

8 CREATE A CONFIGURATION FILE
Click the Create a Configuration File button and follow the WordPress instructions. On the screen where you have to enter the name of the database, enter the exact name you entered when you created the database in Step 4. In both the MySQL User Name field and the Password field enter “root.” Note: All MySQL databases come with the user name and password “root.” Unless you’re worried about someone hacking your blog on your local computer, there’s no reason to change them. Leave the last two fields in the WordPress setup page as they are and click Submit.

9 INSTALL AND SET UP WORDPRESS
Click Run the Install button and fill in the WordPress Welcome screen. I recommend you don’t use “admin” as the Username and that you take note of your user name and password because you’ll need them to access your blog even on your local computer. Follow the rest of the WordPress instructions and you’ll soon find yourself at the WordPress Dashboard. From here you can do all the things on your local computer that you can do on a remote server with a WordPress install, including creating and editing posts, downloading and changing themes, adding plug-ins, etc.

10 SET UP YOUR BLOG IN DREAMWEAVER
Once you have the Apache server and MySQL database working and you’ve installed WordPress, you can set up your blog so that you can edit it in Dreamweaver. You set up a blog much as you would set up any site in Dreamweaver. Choose Site>New Site. Give the site a name (this name is just for your reference). Click on the Browse for Folder icon at the far right of the Local Site Folder field and browse to find the htdocs folder in your MAMP folder in the Applications folder. If you created a subfolder for your site, select that folder. Don’t click Save yet.

11 SET UP THE TESTING SERVER
With the Site Setup dialog still open, click the Servers category on the left. Click on the small plus sign (+) near the bottom of the servers dialog to add a new server (just as if you were setting up a remote server connection). Enter a name, such as “Testing Server” (again this name is just for your reference). From the Connect Using drop-down list, choose Local/Network (not FTP). With Local/Network selected, the rest of the options will change. Again, use the Browse icon (folder) to find the site folder. If you didn’t create a subfolder, it should be Applications/MAMP/htdocs.

12 SAVE SERVER SETTINGS
In the Web URL field at the bottom of the Server Setup dialog, type http://localhost/ (again, adjust this name to include any subfolder names you may have added to the htdocs folder.) Note: You’ll need to add 8888 if you didn’t change the preferences in MAMP in Step 3. Click Save. The dialog closes and the server is added to the Servers list in the Site Setup dialog. Important: Next to the server name are two checkboxes for Remote and Testing. Uncheck Remote and check Testing. Then click Save to complete the setup.

13 OPEN THE INDEX.PHP PAGE
Choose File>Open and select the index.php file in your WordPress blog folder (you can also open it by double-clicking on the index.php page in the Files panel). Expect a blank screen—this doesn’t mean you’ve made a mistake (necessarily). In tiny text at the top of the workspace, look for the message: This page may have dynamically-related files that can only be discovered by the server. Click the Discover link, then click Yes. Finally, click the Live View button at the top of the workspace to make Dreamweaver act like a Web browser and display the dynamic WordPress page.

14 EDIT YOUR BLOG IN DREAMWEAVER
If you got through all those steps, congrats! Setting all that up is complicated, but you only have to get it right once. Dreamweaver saves your server settings and you can now take advantage of all of the wonderful CSS and PHP features in Dreamweaver to edit your blog theme. (Note: You still want to create and edit posts in the WordPress Dashboard.) When you get the theme design the way you want it, you can copy just the CSS file to your remote Web server, or use the WordPress export/import features to move the entire blog from your local server to a remote server.

Editing CSS Layouts in Dreamweaver CS5

Janine Warner — Tue, 09 Nov 2010 18:29:07 +0000

Dreamweaver CS5 includes a new collection of CSS layouts you can customize to create webpage designs. These layouts are designed to work well in a variety of Web browsers, and they can help you avoid common problems with CSS. This tutorial shows you how to edit these layouts to make them your own.

1 CREATE A NEW PAGE
To use a CSS layout in Dreamweaver, create a new document by choosing File>New. Then, choose Blank Page from the left column and HTML from the Page Type column. Choose one of the more advanced options—such as ASP.NET, PHP, or ColdFusion—only if you’re working on a dynamic site. (If you’re not familiar with these technologies, stick with HTML.) From the Layout column in the middle, click to select a CSS layout and a preview of the layout is displayed in the top right of the dialog.

2 CHOOSE A FIXED OR LIQUID LAYOUT
Dreamweaver includes several layouts designed with two distinct approaches to CSS. When you create a new page with one of these layouts, the first thing you must do is decide which type you want to use. Essentially, you have two options: Liquid layouts are designed to expand and contract depending on the size of the browser window; fixed layouts are centered within the browser and set to a width of 960 pixels. Although there are some advantages to the flexibility of liquid layouts, you’ll have more design control with fixed layouts. We chose the 2 Column Fixed, Left Sidebar, Header and Footer layout.

3 SPECIFY HOW TO SAVE THE STYLES
When you save a CSS layout, Dreamweaver generates all of the CSS styles to create the layout as it creates the page. You can choose to save the styles in an internal style sheet or an external one. The Layout CSS drop-down menu includes three options: Add to Head creates an internal style sheet with all of the styles saved in the Head area of the file; Create New File saves all of the styles in a new external style sheet linked to the page; and Link to Existing File lets you add the styles to an existing external style sheet.

4 SAVE THE NEW PAGE AND STYLES
Click Create to open the page in the main workspace. If you chose to save the styles in an external style sheet, a dialog will first prompt you to save the style sheet separately. If the styles are contained in an internal style sheet, they’re saved automatically when you save the page. With the new page open, choose File>Save to save the page and the corresponding styles at the same time. It’s also good practice to add a page title as soon as you create a new page so you don’t forget to replace the words “Untitled Document” in the Title field.

5 EDITING TEXT IN A CSS LAYOUT
To add text, just click and start typing. You can replace any of the text in the page or simply delete it. Just be careful as you delete and replace text that you don’t remove the formatting unintentionally. Keep in mind that there is code behind the Design view and if you delete too much, you may turn a headline into plain text by accident. If this happens, just use Undo (Command-Z [PC: Ctrl-Z]) to restore the formatting, or use any of formatting features to format the text as you prefer. You format text in these layouts as you would format any other text on a page in Dreamweaver.

6 EDIT STYLES IN CSS STYLES PANEL
When you work with CSS layouts, the style information is saved in an internal or external style sheet. Either way, you can edit the styles in the CSS Styles panel. Choose Window>CSS Styles to open the panel. Make sure you have the All button selected at the top of the CSS Styles panel to view all of the styles. Click the triangle (PC: plus [+] sign) next to the style sheet name to open the style sheet and view the list of style names.

7 CHANGING THE WIDTH OF A CSS LAYOUT

The CSS layouts in Dreamweaver follow a common practice of using div tags as dividers (or boxes) around each element on the page and then using styles to describe how those boxes should be displayed. Each layout includes a div tag with a class style named .container that surrounds everything else in the layout. To change the width of the overall design, click on .container and change the Width in the CSS Styles panel. The fixed width of CSS layouts in version CS5 is 960 pixels wide, which is the recommended width for most pages on the Web today.

8 CLASS STYLES VS ID STYLES
In versions CS3 and CS4, layouts in Dreamweaver used a combination of Class and ID styles, but the layouts in CS5 use only Class styles. All of these layouts follow the rules of CSS, but they were created by different designers with different philosophies about CSS. ID styles can only be used once per page and are commonly used for the container, header, and footer styles in CSS layouts. Class styles can be used multiple times per page so they are more versatile. The designers who created the CS5 layouts preferred this option for all of the styles in these layouts.

9 REVIEW CSS STYLES
If you’re new to CSS, the layouts can be confusing at first because you can’t just change the colors or sizes of elements in the design area of Dreamweaver. You need to create new styles or edit the style that’s already associated with an element to change the color, width, or other formatting. A good way to start is simply by clicking on each style in the CSS Styles panel to get familiar with the rules defined in the style sheet. You can double-click on a style name in the CSS Styles panel to edit it in the CSS Rule Definition dialog.

10 EDIT PAGE-WIDE SETTINGS
To edit page-wide settings, such as the background color of the page or the main font face, size, and color of the text used throughout the page, double-click on the style named body in the CSS Styles panel. In the CSS Rule Definition dialog, select the Type category from the left to change font settings. Select the Background category and use the color well in the Background-Color field to specify a color for the entire background of the page. If you prefer, you can enter any hexadecimal color code in the Background-Color field. Click OK to save the changes.

11 ADD AN IMAGE TO THE HEADER
You can insert images into any section of a CSS layout just as you would any other page in Dreamweaver. To add an image into the header area, you should first delete the placeholder image with the text “Insert_logo (180 x 90).” You can insert an image of any size into the header area of the page. First, click to place your cursor in the header area, then choose Insert>Image and select any image on your hard drive and click OK. If the Image Tag Accessibility Attributes dialog opens, enter a brief text description in the Alternate Text field and click OK again.

12 EDIT THE SIDEBAR
You can change the color and width of the sidebar by editing the style named .sidebar1. Double-click on .sidebar1 in the CSS Styles panel to open it in the CSS Rules Definition dialog. Click on the Background category on the left to change the background color. To remove the background color, delete the hexadecimal color code from the Background field and leave it blank. To change the width, choose the Box category on the left, enter the width you want in the Width field, and choose a size option, such as pixels. Click Apply to preview the changes; click OK to save them.

13 EDIT LINK STYLES
The color, size, and style of the links in the left sidebar of the CSS layouts in Dreamweaver are controlled by three different style rules. The top border and bottom margin are defined in the style ul.nav; the bottom border is defined in the style ul.nav li. The way the links appear in the page is defined in the style ul.nav a, ul.nav a:visited. To change the rollover effect, edit the style name ul.nav a:hover, ul.nav a:active, ul.nav a:focus. Double-click the name in the CSS Styles panel to open any of these styles in the CSS Rule Definition dialog to edit them.

14 ALIGN IMAGES AND OTHER ELEMENTS
All of the CSS layouts that come with Dreamweaver CS5 include styles you can use to align images and other elements to the left or right of the page. To use these styles to align an image, insert the image and then select it. With the image selected, the Properties inspector at the bottom of the workspace changes to the image options. Click to open the Class drop-down menu and select fltrt (to align the selected image to the right using the float right style) or fltlft (to align the selected image to the left using the float left style).

ALL IMAGES BY JANINE WARNER UNLESS OTHERWISE NOTED

Six New Features in Dreamweaver CS5

Janine Warner — Tue, 21 Sep 2010 17:36:16 +0000

Every upgrade brings something new, but Dreamweaver CS5 brings more goodies than most previous upgrades, and you can put these new features to use right away. Here’s how to use some of the coolest new features, from troubleshooting CSS with the new inspect option, to adding advanced Ajax and jQuery features using the widget browser, to testing your pages in different Web browsers using the Adobe BrowserLab website.

1 THE NEW, SIMPLER, SITE SETUP
In version CS5, Adobe streamlined the website setup process. When you first start working on any new or existing site in Dreamweaver, it’s important to begin by setting up the site and identifying your main website folder. The new Site Setup dialog (Site>New Site) requires two settings to get started. First, give your site a name (any name will do, it’s just for your reference). Next, click the folder icon to the right of the Local Site Folder field and select the folder on your hard drive where you’ll store all of the files and subfolders in your site.

2 SETTING UP WEB SERVERS
Use the list on the left of the Site Setup dialog to access more advanced features and FTP settings. The new dialog now makes it possible to set up multiple servers for any site, a great way to manage both a testing server and a live server for the same website. Note: You’ll need to click the Add New Server icon (+, plus sign) at the bottom of the
Servers tab to open the FTP settings dialog.

3 OPTIONAL IMAGES FOLDER AND MORE
You’ll find many other options in the Site Setup dialog when you click the Advanced Settings tab, including the setting for an images folder in your local site folder. If you identify an images folder, and then insert an image into a page that is outside your root folder, Dreamweaver will copy the image into the folder you identify in this field. You can also use the Advanced Settings tab to specify a folder for spry assets, setup version control, cloaking, contribute, and other advanced features. When finished defining your settings click Save and you’re done.

4 THE WIDGET BROWSER
The Adobe Widget Browser makes it easy to add a growing list of widgets to your site. Most are created in jQuery or Ajax and you can use them to add slide shows, drop-down menus, and other interactive features to your webpage. To access the Widget Browser, select it from the Extend Dreamweaver menu (the gear icon) located in the Application Bar (Window>Application Bar) just below the Dreamweaver menu (just to the right of the Help menu on Windows). Note: When you click this option for the first time, read the resulting dialog and follow its prompts to download the Widget Browser from Adobe Labs.

5 DOWNLOADING WIDGETS
Click the Adobe Exchange link at the top left of the Widget Browser window to view all of the widgets available on the Adobe Exchange website. To download a widget, click to select it, and then enter a valid Adobe ID and password (if you don’t already have an Adobe ID, you can create one for free, simply click the Create Account button at the bottom of the Sign In dialog).

6 ADDING WIDGETS TO DREAMWEAVER
Most widgets are small so they download quickly and once a widget is downloaded to your hard drive, it opens in its own widget browser window automatically. Click the Add to My Widgets button at the bottom right corner of the Adobe Widget Browser window to add the widget to your local widget browser where it becomes available in Dreamweaver. Click the Go To My Widgets button in the Widget Added dialog to open the local widget browser and view the new widget in your local collection; or click on My Widgets, which is located at the top of the Adobe Widget Browser window.

7 INSERTING WIDGETS INTO PAGES
You can insert any widget that you’ve added to the Adobe Widget Browser into a page in Dreamweaver by clicking the Widget icon in Insert panel (Window>Insert), or by selecting Insert>Widget. Then, in the Widget dialog, select your desired widget from the Widget drop-down menu and click OK.

8 CUSTOMIZING WIDGETS
Each widget is different, but most come with default images or other content in place and need to be customized to feature your content. In this example, I replaced the default images that come with the LightBox widget by changing the image references in the HTML code to reference images in my main images folder.

9 ACTIVATING CSS INSPECT
Dreamweaver CS5 adds a new tool designed to help you identify how CSS is used in a webpage. The CSS Inspect option makes it easy to quickly view the CSS that defines the styles used in different parts of any webpage. To use CSS Inspect, click the Inspect button at the top of the Workspace and click the text link Switch Now (it appears just below the Inspect button). The Switch Now link automatically changes the Dreamweaver layout to best take advantage of the CSS Inspect feature.

10 USING CSS INSPECT
Once it’s activated, just roll your cursor around the screen to use CSS Inspect. As you do, Dreamweaver highlights content in the Design View area with color-coded highlighting that identifies each tag and associated style, as well as any margins and padding created by the style rule. Simultaneously, Dreamweaver identifies the corresponding code in Code View, and displays the corresponding style rules in the CSS Styles panel (which automatically pops-up when you use Switch Now). Click the Inspect button again to turn off CSS Inspect.

11 TESTING IN ADOBE BROWSERLAB
Adobe BrowserLab is designed to help you preview how your pages will display in a variety of Web browsers, even if you don’t have all of those browsers available on your local hard drive. In CS5, you’ll find a new Adobe BrowserLab panel you can use to preview any open page in your local site. To preview a page, save your page (File>Save) and click the Preview button in the Adobe BrowserLab panel (Window>Extensions>Adobe BrowserLab), or go to File>Preview in Browser>Adobe BrowserLab. You must have the page open in Dreamweaver and you must be connected to the Internet to use this feature.

12 USING ADOBE BROWSERLAB ONLINE
When you open a page in Adobe BrowserLab, you’re connected to the Adobe BrowserLab website and a screen shot of the page is automatically created using whatever browser was last selected in Adobe BrowserLab. In the top left corner of the Adobe BrowserLab website, click the View button and choose 2-up View menu to display the same page in two different browsers side by side, or Onion Skin to place two previews on top of the other; which makes it easier to identify subtle differences.

13 CHOOSING AVAILABLE BROWSERS
You can preview your pages in a variety of Web browsers in the Adobe BrowserLab website, including the notorious Internet Explorer 6.0. You can also use the Browser Sets option (located near the top of the Adobe BrowserLab webpage) to create a shortcut to any collection of browsers available on the site that you want to use for testing. Note: You can’t click on the links or test interactive features on your page with this option active because it only takes a screen shot of the page in each browser.

14 SPELL CHECK IN 37 LANGUAGES
As the Internet becomes increasingly multilingual it’s great to see Adobe upgrade the spell check features in Dreamweaver to handle 37 languages (previous versions supported less than half that many). To change the dictionary to any of the included languages, go to Dreamweaver (PC: Edit)>Preferences. In the General category, use the Spelling Dictionary menu to select any of the listed languages and click OK. Then choose Commands>Check Spelling to use spell check in the language you selected.

ALL IMAGES BY KEN RIDDICK

Six New Features in Dreamweaver CS5

Janine Warner — Tue, 24 Aug 2010 18:34:55 +0000

Save Time with Templates in Dreamweaver

Janine Warner — Fri, 02 Jul 2010 15:55:10 +0000

Templates come in many shapes and styles on the Web. You can find templates for Adobe Flash, Photoshop, Dreamweaver, WordPress blogs, and more, but not all templates work in all programs. This column is about creating templates with the .dwt extension—a timesaver when creating custom sites in Dreamweaver.

1 BEST USES OF DREAMWEAVER TEMPLATES
Dreamweaver templates are great for portfolios, photo galleries, and other sites where a series of pages use many of the same elements. In our sample website, CaliforniaWildlifePhotography.com, the template includes common elements, such as the banner graphic and navigation links across the top and bottom of the pages.

To create templates for your webpages, you must already have a site set up using the Manage Site features in Dreamweaver to define a local root folder on your computer.

2 CREATE/OPEN A PAGE IN DREAMWEAVER
To create a new HTML template in Dreamweaver, choose File>New. In the New Document dialog, select Blank Template. For the Template Type, select HTML Template, choose a Layout, and click Create.

To save an existing page in Dreamweaver as a template, choose File>Save As Template. We’ll show you how to design HTML templates, but you can also save other kinds of templates (including PHP, JSP, or ASP.NET). Give each template a special name to identify it later and to help organize a site that uses many templates. If you expect to use many different templates in the same site, a description can be useful.

3 VIEW YOUR TEMPLATES FOLDER
Dreamweaver stores all of the templates you create in a folder called Templates, which it creates for you when you save your first template. The Templates folder is saved at the top level of your site folder and you shouldn’t move or rename this folder. If you want to view your templates, choose Window>Files and then open the Templates folder in the File panel.

4 SELECT AREA TO MAKE EDITABLE
Before you can use a template, you need to designate editable regions—areas that you’ll change on individual pages created from the template. Say you want to change the photo and caption on each gallery page, you’d make those sections of the template page editable. Start by clicking on the edge of a region to select it—choose an HTML tag (div tags work best) that surrounds the contents you want to make editable.

5 INSERT AN EDITABLE REGION
After you select an area of the page you want to make an editable region, such as a Div tag, choose Insert>Template Objects>Editable Region to add the necessary code in Dreamweaver. Remember, you don’t want to make everything editable, just the areas you’ll change; for example, the list of navigation links at the top of this template should not be editable regions, because then you’ll be able to update those areas on all of the pages that use this template at a later time by simply updating the template (see Step 9).

6 NAME EDITABLE REGION
Each time you insert an editable region into your page, you need to name it. You can name editable regions anything you like, just don’t use spaces or special characters. Each editable region in a template must have a unique name. Insert a name for your new region in the New Editable Region dialog and click OK. You can identify editable regions in the template, and the pages created from the template, by the blue outline and tabs. If you don’t see these features in the Dreamweaver workspace, choose View>Visual Aids>Invisible Elements. After you save your template, you can always return later to add more editable regions.

7 CREATE A NEW PAGE FROM A TEMPLATE
To create a new page from a template, choose File>New. Choose Page From Template in the New Document dialog, choose the name of the site you’re working on from the Site list, and select a template for your site. Use the preview to make sure you select the correct template. This is easy if you’re only working on one site with one template, but as your site gets larger and more complex, you need to make sure you’re using the correct template when you create new pages. After you’ve selected all of the Preferences you want, click Create to generate a new page from the template.

8 EDIT A PAGE CREATED FROM A TEMPLATE
After you’ve created a page from a template, you can edit it as you would any other page, inserting images, text, and multimedia into the editable regions. Just remember, you can only change the areas of the page that are editable. If you decide you want to change something that’s not in an editable region, you’ll need to open the DWT template file and make changes to locked areas in that file. When you save a page that you’ve created from a template, give it a new name with an HTML (or other) extension, just as you’d save any other page you create in Dreamweaver.

9 EDIT THE TEMPLATE
The greatest advantage of templates is when you want to edit elements you use throughout your site (such as the navigation links at the top of these pages), you can go back and make that change once to the template and it’s automatically changed on every page created from the template. For instance, if I added a new gallery link to the template, it automatically updates all of the pages with the new link.

10 SAVE CHANGES TO ALL PAGES
When you save a template with changes (File>Save), Dreamweaver opens an Update Template Files dialog. Dreamweaver gives you the option to update all of the pages created from the template, or not. I usually click Update, because it’s a big advantage and timesaver to be able to update all of those pages automatically. After clicking Update, an Update Pages dialog appears. Click Close and all of your pages will be updated.