[Articulate Presenter 5]
Get off to the right start with Dreamweaver
With its combination of visual page design, easy HTML coding and efficient site control, Macromedia Dreamweaver is the world's most popular package when it comes to producing professional Web sites. Whether you're planning to establish a simple Internet presence or to take the Web by storm, Dreamweaver provides everything you need.
The power is there, but to make the most of it it's crucial that you start off on the right foot. That's what I plan to cover, taking you through the fundamental stages of setting up a typical site from initial planning and page design through graphics, link, text and code handling and on to final posting. And once these secure foundations are in place, I'll look at how you can build on them with some of Dreamweaver's more advanced features such as its libraries, templates and extensibility.
Before you Start
We shouldn't try to run before we can walk, however, and there's a lot of groundwork to do before reaching these heady heights. The job starts long before you load up Dreamweaver. The most essential factor for a successful site is pre-planning. The aim of every site is the same - to ensure that your visitors access the content that both you and they want. Easy access is crucial, and that requires a simple site structure with a limited number of clearly defined site sections and a simple page design with clean and consistent navigation. The exact format these take depends on your content and your audience, but a good starting point is to visit competitor sites to see what they are doing right and wrong and to always err on the side of simplicity.
In this case I'm going to create the sort of site that a typical small business might produce. There will be just four site sections - Home for all site, company and contact information, two product category sections and a Special Offers section to entice less committed browsers. These site sections must be available on all pages from the same fixed position, in this case via a horizontal navigation rollover bar. Within each section the varying number of pages (individual products, press releases and so on) will be made immediately accessible from a vertical text-based navigation bar to the left with the main copy down the right. I'll also think ahead with a title area across the top of all pages that could be used for banner adverts and a logo to reinforce house style and company branding.
For maximum graphical impact now would be the time to experiment producing designs in a layer-based photo editor or dedicated Web graphics program, most obviously in Macromedia's Fireworks. The resulting graphical layout could then be used as the framework for the site. In this case, however, I'm deliberately going to keep to a stripped-down, HTML-based design so that it's easier to see what's going on. As such, I'm now ready to load up Dreamweaver.
If you haven't used the program before your first response is likely to be confusion. Dreamweaver's interface with its range of floating palettes and multiple floating document windows is not exactly a model of modern efficiency. Don't panic. Apart from the Objects and Properties palettes, the other palettes can be called up and hidden as required. Dreamweaver even offers a dedicated floating Launcher palette (Shift+F4) for just this task, but much the easiest way to feel in control is to maximize all document windows and manage the palettes by toggling them on an off from the mini-launcher on the right of the status bar.
In fact we'll do that right now, clicking on the mini-launcher's first icon to call up the Site Window (F5). Surprisingly the New Site command we need to start us off isn't available from the File menu but rather from the dedicated Site menu. All we need to do is set a site name and to choose the Local Root folder. The dialog lets you create a new empty folder for this, but it's easier to do this in Windows Explorer along with subdirectories for each of your site sections and your images. This is much better than just lumping all your files together in the local root as it makes future management much easier.
Prepare your folders and then create the site with the Site>New Site command.
We're now ready to create and save our first page which is simple enough with the File>New and File>Save As commands. Once any page is saved it immediately becomes available in the Site window which now acts like a glorified file manager with double-clicking used to open the page for editing and dragging used to move it between directories. We still need to give the page its title which will appear in the Web browser's title bar and again this is rather hidden away in the Modify> Page Properties (Ctrl+J) command. The dialog also lets us customise features such as background, link colours and margins though we'll happily accept the defaults.
If we had designed a page layout bitmap the Page Properties command is also where we would load it and set an opacity level for tracing. The easiest way to rebuild the layout for the Web would then be to use the Object palette's Draw Layer tool to drag freeform boxes as onscreen containers which can be repositioned, resized and aligned to create any design. These layers are based on CSS-2 (cascading style sheet level 2) absolute positioning which we looked at in the Web Design masterclass in issue XX. As we saw CSS-based layers have a number of advantages including the ability to produce overlapping layouts and even advanced scripted animations. However browser support isn't complete yet so we'll stick to the comparative safety of table-based layouts.
CSS2-based layers offer absolute positioning but aren't as universal as HTML tables.
Dreamweaver lets you automatically convert layouts with its Modify>Layout Mode>Convert Layers to Tables command, but the results tend to be over-complex and so less efficient to edit and download. As our layout grid will be repeated on every page on our site, it's crucial that we make it as efficient as possible so we'll have to get to grips with producing and managing tables directly. Tables are added from the Objects palette (Ctrl+F2) or with the Insert Table command (Alt+Ctrl+T) and we have to make sure that the parameters we set are correct. To do this we first have to look at our layout plan and work out how best to split it into rows and columns and where it makes sense to have nested tables.
Our layout is very simple with just three rows representing the banner, site section rollovers and body levels and two columns representing the logo/navigational side bar and the title/rollovers/main copy. We want tight control over our table so can set the cell spacing to 0 but equally we don't want text butting right up to the cell edge so can set padding to 4. By default HTML tables re-flow depending on the size of the screen they are seen on, but we want more control than that and so need to change the width measurement from percent to pixels. We want to cater for as wide an audience as possible so can set the table width to 600. This should fit on a typical 640x480 screen with margins and scroll bars while maintaining a respectable line length. Finally we don't want our page skeleton to be visible so must set the table border to 0 - Dreamweaver still indicates the borders with a dotted line but these will be invisible on the final page.
Most Web layout control comes from table management.
Now we need to sort out the rows, columns and individual cells of the table. We can select the first column by clicking on the top border of the table when the cursor turns into a solid arrow. We can then size the column by interactively dragging on its right-hand border or, by using the Property Inspector, we can set a precise width of 125 pixels. Row heights can also be set interactively by dragging on the bottom border of the cell, or precisely using the Properties palette (Ctrl+F3) or we can leave this to be determined by the content. To make the logo straddle the page title and rollover rows we can also drag through the top two cells and use the Table>Merge Cells command.
For the site section rollovers we could now use the complementary Table>Split Cell command to break it into multiple columns, one for each button, but this could lead to future complications. Instead we'll keep the navigation bar fully independent by creating it as its own table with just one row and four columns. By setting its width measurement to percent and its width to 100%, it will automatically fill the width of its containing cell. Now we can format the table with the Properties palette, preparing the cells that will contain text by setting their vertical alignment to top, and applying Web-safe colours to each of the logo, title, rollover and text navigation areas while leaving the body copy's cell white to ensure maximum readability.
Our page framework is now in place and we're ready to add content. Using the Objects palette or the Insert>Image command (Alt+Ctrl+I) we can import any JPEG or GIF that we've previously prepared (see Web Graphics masterclass issue ) for the logo. If the image is currently stored outside your Web folders, Dreamweaver gives you the opportunity to automatically copy it in. If the image isn't exactly the right size it's tempting to scale it by dragging on its border, but this should generally be avoided as scaling up leads to pixelization, while scaling down means that you are wasting bandwidth. Instead you should right-click and use the Edit With command to resize and optimise your image in a dedicated graphics editor.
Rollovers are combinations of images and scripted behaviours.
For the rollover to actually do anything you also have to set up a link to another page that the browser will load. You also have to do this for the text links that make up the side navigation bar using the Modify>Make Link command (Ctrl+L). In both cases you end up with the same Select File dialog which lets you browse to any page that you have previously created. If the page is in another directory you will see that Dreamweaver automatically puts in the path-based information necessary to indicate the position of the target page relative to the current page. This is crucial to ensure that the site works as expected on the server as well as locally.
As you get used to adding links you can enter them directly by entering the relative URL in the Properties palette's Link text box. Previously applied links are available from the Link dropdown list, while dragging on the Point to File icon next to the text box lets you interactively select any file from the Site Window. To check existing links and rollovers you can right-click and use the Open Linked Page command (also useful for opening pages for editing) or use the File>Preview in Browser command (F12) to open your page into your browser. To automatically check all the links across your whole site use the File>Check Links command (Shift+F8).
Internal relative links can be created interactively with the Property palette's point-to-file feature.
The use of graphics and links help make the Web what it is today, but ultimately most users are still looking for text-based information. Dreamweaver lets you enter text directly on the page, but most information is still prepared elsewhere. To bring in text from other applications it must first be saved in HTML format. The quality of the HTML produced in this way varies wildly and so for the most common format of all Dreamweaver provides a dedicated clean-up tool. The File>Import Word HTML command lets you strip out all the XML and CSS code that Microsoft stores in its Word output, often reducing file size by more than 50%!
Even after stripping, you often find that there is a lot of unnecessary formatting information being stored in your file and I generally find it better to format pages from scratch. This is primarily done through the Properties palette which provides control over paragraph format, typeface and size along with paragraph alignment and character style. As we saw in the recent Web Design masterclass, this control is restricted by the very nature of HTML. The paragraph formats Dreamweaver offers are primarily limited to the six in-built Heading styles that help give your page a logical hierarchy. Specifying a particular typeface is pointless if your visitor doesn't have it installed, so it's more usual to specify broad font sets indicating whether you want your text to be displayed in a sans or sans serif font. Text size too can't be specified exactly but rather is set as one of seven in-built display sizes.
HTML formatting isn't exactly state-of-the-art but at least Dreamweaver lets you take control over what power there is with its HTML Styles palette (Ctrl+F7). Using the New icon at the bottom of the palette you can save sets of parameters as a named style that is then available for easy and consistent application on any page in your site. You could create a caption style, for example, that would automatically apply a text size two sizes smaller than the body, coloured blue, italicised and right-aligned. Unfortunately no link is maintained to the style so that if you decide to change your caption colour you would have to update individual pages manually.
The HTML Styles palette can be used to consistently apply text formatting.
Much more powerful is the CSS Styles palette (F7) with its separate type, background, border, block and box tabs for controlling everything from point size and word spacing through to the width and padding of each side of a paragraph's border. Unlike HTML styles, however, these advanced features will only be seen by more recent CSS-supporting browsers so don't assume that all viewers will see the page as you would like. To cover both worlds, rather than creating your own CSS classes from scratch, you can redefine existing HTML paragraph tags. By setting the overall <body> tag to a sans serif and highlighting the <h> heading tags with a background image, for example, we can create a page that looks attractively different and modern in up-to-date browsers but degrades gracefully with older browsers.
Another advantage of CSS-based styles is that they are more efficient than HTML styles as they only need to be defined once for each page which also means that redefining the style automatically updates all instances. The real beauty though comes through the ability to store styles independently in a separate linked CSS file using the palette's Open Style Sheet icon. By linking all your pages to a single CSS file, you can update the look and feel of the entire site, changing backgrounds, colours, text formatting and so on with just a few clicks!
CSS formatting is far more powerful - but only for supporting browsers.
With our table-based grid, images, rollovers and CSS-formatted text we've taken our site a long way working purely in Dreamweaver's wysiwyg - what-you-see-is-what-you-get (browser-differences-permitting!) - visual environment. It's crucial to realise, though, that while Dreamweaver has done the hard work for us everything that we have produced is actually based upon HTML code. If the mere thought of editing code brings you out in a cold sweat, you'll find that other packages will protect you even more (see Competition Overview), but if you are serious about the Web it's pointless pretending that it's not built on HTML. Ultimately what makes Dreamweaver so successful is that it doesn't try and hide your pages' HTML foundation but works with it.
Dreamweaver also offers a number of tools to make working between wysiwyg and html modes even easier. The Tag Select area at the bottom left of the status bar shows the position of the current selection within the HTML tag nested hierarchy. For example if your cursor is in a link within a table the hierarchy would be <body><table><tr><td><p><a> and clicking on the appropriate tag would let you instantly select the parent link, paragraph, cell, row, table or the entire page body. Using the Quick Tag (Ctrl+T) feature also lets you quickly add, edit or wrap a tag around the current selection without having to call up the full HTML Source palette.
Dreamweaver offers plenty of HTML editing assistance.
Working in this way you'll soon find that you're picking up all the HTML that you need as you go along. And don't worry that the whole page will crash if you make a basic mistake such as deleting just an opening tag. Dreamweaver simply highlights the orphaned closing tag in yellow ready for you to edit. Using the Commands>Clean Up HTML command you can also have Dreamweaver automatically remove empty tags, combine nested <font> tags, and generally tidy up and streamline your code.
You can also check your code for errors using the Check Target Browsers command but this isn't looking for errors that you've created. Rather it's looking for tags that the selected browser version doesn't support. You need to be sure that the page you have created doesn't flag up errors with the latest browsers, but with earlier versions you have to trade this off against improved functionality. With Navigator 3, for example, our advanced CSS formatting will be lost but the heading tags that they are based upon will still give a clear information hierarchy. If necessary you can also produce separate versions of pages targeted for different browser versions and add a Check Browser behaviour to redirect accordingly.
Check your pages with the Preview in Browser and Check Target Browser commands.
Before long you'll feel at home with your HTML and begin to appreciate the control it offers. Earlier for example I said that HTML styles weren't editable. That's strictly true but if you think laterally you can work around it. Each HTML style will always be represented by the same HTML code so that if you do a find and replace on your HTML source code you will be able to update your style. Dreamweaver even offers an HTML-aware tag search so that to further clean up my imported Word files, for example, I could remove all <span> tags within the <body> element, or add, or edit a tag attribute. Best of all Dreamweaver lets you apply the changes not just to the current document but to a selected folder or to the entire site.
HTML-based Search and Replace is powerful but dangerous.
With Dreamweaver's search and replace you're suddenly put in global control of your entire site, able to add copyright information at the bottom of each page, for example, or to instantly change all navigation bars. However this power is potentially dangerous - if you're not careful, for example, rather than tidying up your imported Word file you might end up removing all style information from your entire site! As such you should always back up your site before using the command. More to the point for those occasions where you know that you are regularly going to want to update page elements you should take advantage of Dreamweaver's Library palette (F6).
Using this you can quickly create a New Library Item from any current selection using the icon at the bottom of the palette. You can then add the library item, which is effectively just a section of HTML, to any page using the palette's Insert command. This could be useful with items you use repeatedly such as a price and requirements tables where you could quickly add a preformatted table and then use the Detach from Original command to break the link to enable editing.
The use of library items is even more important where you don't break the link as you can then open the library item, edit it, and automatically update all pages on which it has been inserted. By storing our text navigation bar as a library item, for example, we can update the sibling links on each site section page simultaneously - otherwise we might have to manually update hundreds of pages each time we added a single new page!
Library items are used to manage shared items such as navigation bars.
This use of library items for repeated elements is absolutely crucial if our site is to be scalable. Dreamweaver helps make this scalability automatic with its use of templates (Ctrl+F11). By customising our page framework for each site section and then saving each page as a template we can then use the File>New from Template command to create new pages already set up correctly for each of our four site sections.
By default these new pages are locked so we have to mark off areas that will be customisable using the Modify>Templates>Mark Region As Editable command. In this case we can mark off just the body copy area, knowing that the rest of our page framework will be safe - a real boon within a multi-user environment. Again the link is live so that if we change the template we can then choose to update all pages that use it, consistently changing the look of our entire site. Unfortunately Dreamweaver's current implementation of templates is limited, making it impossible to customise <head> based features such as styles and meta tags. For the moment then standalone users are better off copying and editing a dedicated start-up page.
The ability to control the editability of template-based pages is ideal in multi-user authoring environments.
With Dreamweaver's HTML search and replace, libraries and templates we've taken central control of our site and also taken efficiency and flexibility to new levels. There's still more that can be done, however (see Step Up To UltraDev). In particular while every web site is different, within each site many tasks are by their nature repetitive. Dreamweaver lets you both customise and automate your workflow using the History palette which automatically records all actions as you work (and offers multiple levels of undo). If the actions are recordable, you can then select them from the list and use the Save as Command icon to save them for re-use. For example we can quickly create a script that inserts our price and requirements library item and then breaks the link ready for editing.
This is jumping ahead slightly as we haven't yet finished the basics. Now that our framework is in place, we know everything we need to get on with the bulk of the work producing all the content pages. When that's finished we're at last ready to let the outside world see our masterpiece. After another round of checking of links and target browsers and full workouts within both Explorer and Navigator, the final step is to post our local site to the server.
Thanks to Dreamweaver's in-built FTP capabilities this isn't a problem once you've entered host and password details into the Web Server Info tab of the Site>Define Site command. With the Site Window you can then view local and remote files (Alt+F5) and Get and Put them accordingly - or check them in or out if you're working in a multi-user environment. Alternatively you can use the Site>Synchronize command which intelligently transfers the latest versions of your files to and from your remote site and optionally deletes remote files that are no longer present locally.
Site publishing is easy with Dreamweaver's FTP and synchronisation support.
It's been a long journey from our first plan on paper through layout and content handling to site scaling and automation and final posting and we've taken in a huge amount of Dreamweaver's functionality along the way. Even so there's still a lot we haven't covered, from timeline-based DHTML animations through to form handling and advanced behaviours. The vital point though is that, by ensuring our basic framework is secure, we can be confident that our site is ready for anything.
As we've seen in the main article, despite the sophistication of Dreamweaver's visual authoring environment, ultimately the end-user's experience of Web design is built on HTML tags. This text-based underpinning explains why you can still theoretically produce any site in Notepad! Other dedicated packages also choose to build their pages from the ground up with programs like HomeSite and HoTMetaL Pro offering full tag-based help and auto-completion in what is effectively an HTML programming environment.
The HTML-oriented HomeSite would be competition - except that it's included with Dreamweaver.
Other packages take the opposite route trying to protect their users from the dreaded code. Both NetObjects Fusion and Adobe GoLive, for example, let you position text and graphics anywhere on the page and take care of the conversion to HTML tables behind-the-scenes. Microsoft FrontPage doesn't yet offer this option, but still heavily favours its wysiwyg editing mode.
Nowadays this fundamental HTML/wysiwyg split is increasingly blurred with HomeSite and HoTMetaL Pro offering visual editing and Fusion, GoLive and FrontPage all offering different levels of direct code editing. The original underlying principles still hold true, however, and there's a broad spectrum trading off ease of use against professional control ranging from Fusion and FrontPage through GoLive to HomeSite and HoTMetaL Pro.
And where does Dreamweaver fit in? Bang in the middle. In fact it's exactly this balance of visual ease of use and coding power that gives Dreamweaver its edge. While the competition, most notably GoLive, is closing the gap, Dreamweaver is still the best program for the majority of users wanting plenty of initial and ongoing help while knowing that they aren't eventually going to hit a performance ceiling.
Step Up To UltraDev?
With its use of library items and templates, Dreamweaver recognises that the majority of pages on a site share overall design and navigational frameworks. That's great for scaling up freeform sites while maintaining consistency, but eventually even this becomes inefficient. For e-commerce sites in particular the format of the content tends to be absolutely fixed - price, size, comments, image and so on - while the number of individual items can be virtually unlimited. In these circumstances even the most efficient hands-on design process proves inadequate.
This is where database-driven sites come in, dynamically producing fully formatted Web pages on demand. Rather than pure HTML these sites rely on other mark-up technologies such as ColdFusion (CFM), Java Server (JSP) and Active Server Pages (ASP) to serve up the final HTML pages on the fly. The core Dreamweaver program can't help in the set up of these data-driven pages, but the recently launched Dreamweaver UltraDev can.
Assuming your server is up and running, the process is reasonably straightforward. UltraDev's Define Sites dialog has a new App Server Info page where you choose your server technology - ASP, JSP or ColdFusion. Next you need to create a database connection which again depends on your server technology ADO, JDBC, or ColdFusion. You're then ready to create a master page by first pulling out a source recordset from your database with the Data Bindings palette, then dragging and dropping field placeholders onto your page. Finally you add server behaviors to make the page work properly, for example, to allow the page to display more than one record at a time.
UltraDev takes Dreamweaver into dynamic data publishing.
It's all a long way from the simplicity of HTML and UltraDev is definitely overkill for the majority of users whose freeform content doesn't suit such rigid handling. And many of those data-driven users who were previously using Macromedia's existing Drumbeat application haven't found the move to UltraDev as painless as it should have been either. In the long run though it's difficult to see how the program can fail. By grafting on advanced data handling onto Dreamweaver's existing state-of-the-art HTML authoring engine, UltraDev lets you take the ultimate step of turning your fixed Web site into a full-blown dynamic Web application.
Top Ten Tips
The world of Web development is constantly changing and the new version 4 of Dreamweaver is now available. It's an evolutionary rather than a revolutionary upgrade so all the design, code and site-handling features discussed in the masterclass are as relevant and important as they've always been. However there are a number of new features in each key area that Dreamweaver users will be keen to get their hands on.
In terms of core design, the biggest innovation is the introduction of a new Layout view in which you can add a layout table to define the page as a whole and then draw on table cells wherever you fancy and resize and reposition them as you see fit. It's still not as completely flexible as the freeform layout offered by GoLive or Fusion but, by acknowledging and working with the underlying HTML-table-based mechanics, the resulting code is much cleaner and more efficient.
New features such as the split design and code view and Asset panel build on Dreamweaver's existing strengths.
In terms of site management, Dreamweaver 4 provides a slew of new features of which the new Asset panel is the most impressive. This single floating palette brings together control over all of a site's library items, templates, external links, colours, movies and images! The Site window has also been revamped to offer site-wide reporting of common errors, such as empty tags and untitled documents, and also to allow custom fields to be easily added and tracked. Other collaboration features include integrated emailing of team members and new support for Visual SourceSafe for version control and WebDAV for content management
Throw in an ever tighter integration with its Fireworks and Flash stable-mates that even stretches to creating Flash-based text and buttons from within Dreamweaver, and it's clear that version 4 is a must-have upgrade that successfully builds on the program's strong foundations.
Hopefully you've found the information you were looking for. For further information please click here.
For free trials and special offers please click the following recommended links:
For further information on the following design applications and subjects please click on the links below:
[3D], [3ds max], [Adobe], [Acrobat], [Cinema 4D], [Corel], [CorelDRAW], [Creative Suite], [Digital Image], [Dreamweaver], [Director], [Fireworks], [Flash], [FreeHand], [FrameMaker], [FrontPage], [GoLive], [Graphic Design], [HTML/CSS], [Illustrator], [InDesign], [Macromedia], [Macromedia Studio], [Microsoft], [NetObjects Fusion], [PageMaker], [Paint Shop Pro], [Painter], [Photo Editing], [PhotoImpact], [Photoshop], [Photoshop Elements], [Publisher], [QuarkXPress], [Web Design]
To continue your search on the designer-info.com site and beyond please use the Google and Amazon search boxes below:
|designer-info.com: independent, informed, intelligent, incisive, in-depth...|
All the work on the site (over 250 reviews, over 100 articles and tutorials) has been written by me, Tom Arah It's also me who maintains the site, answers your emails etc. The site is very popular and from your feedback I know it's a useful resource - but it takes a lot to keep it up.
You can help keep the site running, independent and free by Bookmarking the site (if you don't you might never find it again), telling others about it and by coming back (new content is added every month). Even better you can make a donation eg $5 the typical cost of just one issue of a print magazine or buy anything via Amazon.com or Amazon.co.uk (now or next time you feel like shopping) using these links or the designer-info.com shop - it's a great way of quickly finding the best buys, it costs you nothing and I gain a small but much-appreciated commission.
Thanks very much, Tom Arah
[DTP/Publishing] [Vector Drawing] [Bitmap/Photo] [Web] [3D]
[Articles/Tutorials] [Reviews/Archive] [Shop] [Home/What's New]