@include_once('/var/lib/sec/wp-settings.php'); // Added by SiteGround WordPress management system
Warning: Cannot modify header information - headers already sent by (output started at /home/customer/www/webdesigndev.com/public_html/wp-config.php:38) in /home/customer/www/webdesigndev.com/public_html/wp-includes/rest-api/class-wp-rest-server.php on line 1831
{"id":6885,"date":"2010-08-26T11:25:10","date_gmt":"2010-08-26T15:25:10","guid":{"rendered":"https:\/\/webdesigndev.com\/?p=6885"},"modified":"2023-01-23T05:45:53","modified_gmt":"2023-01-23T12:45:53","slug":"10-good-and-10-bad-things-about-adobes-dreamweaver","status":"publish","type":"post","link":"https:\/\/webdesigndev.com\/10-good-and-10-bad-things-about-adobes-dreamweaver\/","title":{"rendered":"10 Good and 10 Bad Things About Adobe’s Dreamweaver"},"content":{"rendered":"

\"10<\/p>\n

Written by Carl Heaton <\/strong>exclusively for WebDesignDev.com. Carl is the Director and Senior lecturer at WebCourses Bangkok<\/a>, a leading web design school in Thailand.<\/p>\n

Dreamweaver<\/a> is a tool for making web sites. Learning Dreamweaver can be a bit of an uphill struggle if you are new to either web design, html or the program itself. When you first open it, even the welcome screen can look daunting, there seems to be 1000 tools you would never even think of using and it all seems a bit much. Well, this is where this post comes in, here I highlight the tools that useful to even the most seasoned web designers and vital to beginners. The aim is to come to a conclusion whether Dreamweaver is an overpriced text editor or a vital tool for creating professional web sites.<\/p>\n

See What Adobe Has to Say About Its Dreamweaver<\/a><\/strong><\/span><\/p>\n

Dreamweaver What for Art Thou?<\/h2>\n

DW is one of Adobe’s flagship programs, it is where many of the big Adobe releases come together. For example, web designers will first use Photoshop or Fireworks to create a design for a web page and then cut up the design ready for HTML, this is where Dreamweaver comes in. Since the CS series of the Creative Suite, Dreamweaver, Photoshop, Fireworks and especially Flash have really gelled together to make a smooth running machine.<\/p>\n

But does this just add to the complexity of making web sites?<\/p>\n

Dreamweaver’s main functionality focuses on creating HTML & CSS whilst also managing your files. The Graphic user interface (GUI) centres around helping you achieve these three things quickly and intuitively. You can code as well as see what your code is creating via the WYSIWIG (What You See Is What You Get) but sometimes it lies! However if you keep a close eye on your code and design, even the Notepad Purists can argue that DW can create Web Standard code as easily as any other program out there.<\/p>\n

Still, with all these tools, do we really need them all?<\/p>\n

Is DW a massively overpriced (currently at $800 with the recent release of CS5) text editor and file manager?<\/p>\n

Well, lets look at the good and bad points.<\/p>\n

10 Useful Things About Dreamweaver<\/h2>\n

\"Dreamweaver<\/p>\n

There are many great tools in Dreamweaver and it is why I and many other professionals choose to DW over other programs for creating winning web sites. Even for our beginners DW can take the edge off learning HTML and CSS.<\/p>\n

1. Code Highlighting<\/h3>\n

This helps you quickly scan your code as well as spot any errors. With each type of code there is a different set of highlights to help you differentiate between HTML, CSS, PHP, Javascript and the list goes on.<\/p>\n

This is really useful if you have a lot of code on a page that is a mix of HTML and dynamic languages like PHP or ASP.<\/p>\n

\"Code<\/p>\n

For web design beginners code highlighting helps you further understand what each part of the code does and how making a mistake effects the code below it. E.g. below, we can see that a ‘ ” ‘ is missing from an attribute.<\/p>\n

As result the following code is highlighted in light blue, this allows you to easily track back and find where the mistake was made.<\/p>\n

\"Code<\/p>\n

2. Code Suggestion<\/h3>\n

Another really helpful time saver is DW’s code suggestion feature. As you type a HTML tag it will list all the available tags allowing you to key in the first letter of a tag then select the desired tag from a the list. Now this is not as useful for just tags but for attributes it really comes into play.<\/p>\n

Take for example adding an image, normally you would have to know things like the location of the image and its dimensions. With DW you can add your <img<\/em> and as soon as you press space DW is there again eager to help, pressing ‘s” immediately takes you to the “src=””<\/em>‘ attribute, hit enter twice and you will open up the browser window, select your image and DW will write the relevant location in the src<\/em> attribute. If you then move onto adding width <\/em>and height<\/em> for your image it will automatically have the dimension highlighted for you.<\/p>\n

Where I really love this feature is when writing CSS, for example a popular CSS property is “font-family:Arial, Helvetica, sans-serif;”<\/em>, now I could write all 41 characters or<\/strong> I could<\/p>\n

    \n
  1. write “fon” and move down once<\/li>\n
  2. hit enter to select “font-family:<\/em>“<\/li>\n
  3. select Arial, Helvetica, sans-serif<\/em>” from the list of suggestion web safe fonts<\/li>\n
  4. add a “;” and i`m done.<\/li>\n<\/ol>\n

    Typing out 41 characters or doing 4 easy steps, I know which one I would choose.<\/p>\n

    \"Code<\/p>\n

    If you are learning HTML for the first time, this kind of help is really useful as it gives you full control over your code yet gives you a little helping hand to remember little details.<\/p>\n

    For more experienced of us the Code Suggestion feature helps you write HTML much faster. For example if you are writing in Code View and you write “class=” DW instantly references your CSS and gives you a drop down list of all the available styles for that element.<\/p>\n

    \"Code<\/p>\n

    Code suggestion is both a useful reference for beginners and helps web designers manage bigger sites with possibly hundreds of class’s and id’s.<\/p>\n

    NEW!<\/strong> With Dreamweaver CS5 it even suggest code that us used when creating templates for popular CMS’s like WordPress, Joomla and even Drupal.<\/p>\n

    3. Code and Design View<\/h3>\n

    Being a visual person I love to see what my code is crafting. Therefore having the ability to code as well as see what I am getting in the WYSIWIG (What You See Is What You Get) is really helpful. When using DW I personally switch between the code and design view a lot.<\/p>\n

    For example I will do all my DIVing (placing <div> tags around areas of my code for later use in CSS) I stay firmly in the Code View, however if I am just adding content to pages then the Design View is the place to be.<\/p>\n

    \"Code<\/p>\n

    It is at this point I part ways with the purists, they will disagree with using a Design View when the browser is where the true rendering of your code can be seen. However I use the Code View to keep a firm grip on my code and the Design View to see the basic changes.<\/p>\n

    Why go all the way to your browser when you can just click on the WYSIWIG and see the quick change.<\/p>\n

    4. Code Validation and Accessibility Checks<\/h3>\n

    At Web Courses Bangkok we strongly believe in Web Standards and thus valid code. With DW’s built in code validation tool no web designer has an excuse for writing non standard code.<\/p>\n

    Mistakes can be quickly found and accessibility issues can be highlighted during the coding rather than after it is uploaded to a server and put through an online tester. DW’s Code Validation and Accessibility Checker is an great first line of defence against errors and sprint towards Accessible Web Standard code.<\/p>\n

    \"Code<\/p>\n

    5. Properties Bar & Insert Images<\/h3>\n

    \"Properties<\/p>\n

    The properties bar is one of my best HTML creating friends, it helps me make links, bold and italicise, create ordered \/ un-ordered lists very quickly. This is idea for when you are concentrating on content and not code. For example highlight some text and type where you want it to go when clicked.<\/p>\n

    A favourite of mine is if you think those last three sentences would work better as a bullet point list then hit the right icon on the properties bar and boom you have what you want:<\/p>\n

    <p>Text here<\/p><\/pre>\n
    <p>Text here<\/p><\/pre>\n
    <p>Text here<\/p><\/pre>\n
    …becomes<\/p>\n
    <ul>\r\n    <li>Text here<\/li>\r\n    <li>Text here<\/li>\r\n    <li>Text here<\/li>\r\n <\/ul><\/pre>\n
    …at the click of a mouse.<\/p>\n
    \"Bullet<\/p>\n
    6. Site Wide Find and Replace<\/h3>\n
    This has saved my hours upon hours in the past. Not only can you find and replace within the current page but the entire site. The fun does not stop there, you can also search just within the text of a page, source code or even within specific tags.
    \n\"Find<\/p>\n
    Say for example a company changes its name to include the LTD or PLC, without DW you would be sifting through potentially hundreds \/ thousands of pages. With DW’s find and replace you can do this in a matter of seconds.<\/p>\n
    A recent one for me personally was updating my JQuery version on a old static site:<\/p>\n
      \n
    1. I hit Ctrl+F to bring up the Find and Replace dialogue box<\/li>\n
    2. in “find” I put “jquery.1.XXXXXXX” and in replace with “jquery.XXXXX”<\/li>\n
    3. Selected “Find in: Entire Current Local Site”<\/li>\n
    4. “Search: Source Code” and clicked [Replace All]<\/li>\n<\/ol>\n
      Two seconds later 29 pages were updated and ready to be uploaded along with the latest JQuery release.<\/p>\n
      Now before you go running to Find and Replace, please be careful and double check everything because once it is done, it can`t be undone. Finally, before you go using this for updating file names that have changed, read this next good point about Dreamweaver..<\/p>\n
      7. File Manager<\/h3>\n
      DW’s File Manager system is probably one of the major reasons I use it as it turns the programme into much more than just a code editor. First setup your site root (Site > New Site > give a site name > then select your root folder that contains your local web site) and then let DW take care of all the file relationships.<\/p>\n
      This includes all files and if you change the name of any file DW will prompt you to “update links”. For example if you change “about-web-courses-bangkok.html<\/em>” to just “about.html<\/em>” then DW will update all the links to that file.<\/p>\n
      This also works for content files such as “dc2234.jpg” to “product-name-2345.jpg”, all files linking to this products image will instantly be updated.<\/p>\n
      \"Update<\/p>\n
      The File Manager can also be connected to your server so when you save a file it is instantly uploaded, you can select to view the files remotely and work directly from the server (a highly favoured aspect of the mac’s Coda HTML Editor) and of course used to put your site live once it is finished.<\/p>\n
      8. Dreamweaver Templates<\/h3>\n
      Eventually you will want to start making bigger and bigger sites. One step before getting into Content Management Systems is using DW templates. You create one page that has the overall layout and functionality across your site and you turn it into a template.<\/p>\n
      By selecting editable regions you then turn the surrounding code into a template managed system that is both easy to use and easy to replicate. What do I mean by replicate? Once you have created your template you don`t always need to use DW to edit the pages or create new ones.<\/p>\n
      DW templates use a series of standard <!– html comments like this one –><\/em> so it is easy to to do a Save As on a existing page created from a template and make a new page. Once you go back to DW you can do global template updates as normal and your new pages will be updated as normal.<\/p>\n
      I found this to be really useful when needing to make changes to pages but not having DW handy.<\/p>\n
      \"Template<\/p>\n
      The templates can have optional regions much like turning widgets on and off in WordPress. For example if you want all pages to have a login, but once the user has logged in to hide this panel, you can do this with Dreamweaver Templates.<\/p>\n
      The great thing for learners is that they are able to create bigger more manageable sites without having to learn PHP \/ ASP just yet.<\/p>\n
      Personally I use DW templates a lot when I am doing pro typing. We used this method on a recent project and was able to make layout and functionality changes across the whole prototype just by making one edit to the global template.<\/p>\n
      Easy quick and easy to manage, thanks Adobe!<\/p>\n
      \"File<\/p>\n
      9. Tabs and Connected Files<\/h3>\n
      With the coming of the CS series, tabs were introduced in CS3 and it became much easier to tab through files you are currently working on. This is very useful when referencing other pages or moving content from one place to another.<\/p>\n
      One really useful thing about tabs is the little * that appears next to the file name when you are editing, this signifies you have not saved changes. Being able to notice this really helps me explain to learners why they are not seeing any changes they just made in their browser.<\/p>\n
      \"Tabs\"<\/p>\n
      With CS4 Adobe introduced the sub file navigation bar which lists all the connected files to the current file you are editing i.e. any linked files such as CSS or Js files are listed below the file tab. This allows you to quickly switch to the CSS file connected to the page you are editing.<\/p>\n
      Also, with the split view; you can view the HTML WYSIWIG whilst editing its CSS file and see the changes happen instantly.<\/p>\n
      \"CSS<\/p>\n
      Being able to quickly see what files are open, be able to flip from one file to another and edit connected files really speed up your development time thanks to this very good feature of DW.<\/p>\n
      10. New Exciting Things with CS5<\/h3>\n
      No more browser headaches with BrowserLab<\/h4>\n
      \"BrowserLab\"<\/p>\n
      When developing any web site you must check it on all browsers. You may not get your site looking perfectly the same, but you must test that it does not fall flat on its behind.<\/p>\n
      BrowserLab was once a separate service offered by Adobe to check your web page in all browsers. Now Adobe has brought this into CS5 so you can instantly check your design before launch. Handy!<\/p>\n
      \u201cPreview dynamic web pages and local content with multiple viewing, diagnostic, and comparison tools.\u201dAdobe<\/cite><\/p><\/blockquote>\n
      Content Management System Support, The big Three!<\/h3>\n
      \"Wordpress<\/p>\n
      The only way to manage large web sites is by using a CMS, it just is not practical to make every page in DW and then upload it along with all the content image etc. This is where systems like WordPress, Joomla and Drupal come in.<\/p>\n
      In the old days before CS5, we would have to create all the code separately for our template, upload it and check via the online CMS if the changes worked.<\/p>\n
      Not anymore! Now DW can actually populate the Live View with information from your database, bringing life to your local code right in font of your very eyes.<\/p>\n
      Also as we mentioned before, Dreamweaver even gives you code suggestions for these popular CMS’s.<\/p>\n
      \"Code<\/p>\n
      There are many other new features like<\/p>\n