{"id":8969,"date":"2010-12-27T21:15:47","date_gmt":"2010-12-27T13:15:47","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=8969"},"modified":"2023-04-06T21:58:00","modified_gmt":"2023-04-06T13:58:00","slug":"10-useful-dreamweaver-tips-for-beginners","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/10-useful-dreamweaver-tips-for-beginners\/","title":{"rendered":"10 Useful Dreamweaver Tips & Tricks For Beginners"},"content":{"rendered":"

A Dreamweaver user will definitely reckon what a powerhouse it is. Packed with tonnes of features, options and debatably one among the most well known IDE (Integrated Development Environment) in today\u2019s market. It may not meet the criteria that some developers demanded however, Dreamweaver undeniably provides a decent range of development, collaborating and coding tools. These options and tools are hidden under layers of regrettable less intuitive menus, which is why we are providing tutorials in today\u2019s post.<\/p>\n

We will show you some of the most powerful functions of Dreamweaver to assist your access them quickly, along with many other helpful tricks that will lubricate you development time and improve your code quality significantly. Full list after jump.<\/p>\n

1. Dynamic View with \u201cLive View\u201d<\/h2>\n

We already know that DW offers a static view of our open files, but what about \"dynamic views\"<\/em> of an application such as WordPress?<\/p>\n

First, we need to tell<\/em> DW what settings to use to present our\"dynamic views\" <\/em>correctly. To do this, select HTTP Request Settings<\/strong> from the View > Live View Options<\/strong> menu, then enter the GET<\/strong> or POST<\/strong> parameters you need to view your application correctly.<\/p>\n

\"live<\/figure>\n

Then by switching to Live View<\/strong><\/em> in DW, it replaces the old Design View<\/strong><\/em> pane with a live, pixel-perfect WebKit rendering of your page; complete with live Javascript, DOM manipulations, database queries, server-side code, and rendered CSS, rather than the placeholder icons you see in Design View<\/strong><\/em>.<\/p>\n

\"dreamweaver<\/figure>\n

2. \"Code Navigator\" is DW\u2019s Firebug<\/h2>\n

Taking it a step further is all about the Code Navigator<\/strong> and when in the Live View<\/strong><\/em> window, ALT-clicking (Command-Option-clicking for Mac) anywhere in the window, instantly presents the code that rendered that item. Similar to what you might currently see in Firefox\/Firebug.<\/p>\n

\"dreamweaver<\/figure>\n

3. Freezing JavaScript<\/h2>\n

Due to the dynamic nature of Ajax, many times we need to interact with a page where certain items are not rendered or available on first page load. These are items that are injected into the page some time after page load. Here\u2019s an example:<\/p>\n

You might want to change the styling of a tool tip that is implemented entirely in JavaScript. Before today, you\u2019d have to methodically search your way through your scripts to find what was being created and where.<\/p>\n

Instead, try this:<\/p>\n

Render your page in Live View<\/strong><\/em>, then hit F6<\/strong> to Freeze JavaScript at any time, allowing you to target and dissect the code relating to any dynamic item in the page.<\/p>\n

\"freeze<\/figure>\n

4. Live View\u2019s Next Best Friend \u2013 \"Live Code\"<\/h2>\n

When using Live View<\/strong><\/em>, you can also turn on Live Code<\/strong><\/em>. Live Code<\/strong><\/em> will update your code as you hover, click and interact with elements and items in the Live View window<\/strong>!<\/p>\n

\"dreamweaver<\/figure>\n

5. Automatic JavaScript Completion<\/h2>\n

Dreamweaver comes with an intelligent and complete HTML and CSS code completion, but what about Javascripts<\/strong>? If you code jQuery or Prototype in Dreamweaver, then you should know there are API extensions that provide Javascript code completion. It reduces the typing needed and can come in pretty handy for fast coders.<\/p>\n

\"dreamweaver<\/figure>\n

6. Beautify Codes On The Fly<\/h2>\n

Does your code page look like unorganized, messy lines of code? Use the Apply Source Formatting<\/strong> feature and reformat it exactly to your preferences. To quickly clean them up, click the Format Source Code<\/strong> icon at the bottom of the Coding toolbar<\/strong> (Edit > Toolbars > Coding)<\/strong> and select Code Format Settings<\/strong> to set your preferred formatting.<\/p>\n

You can also access the formatting option from Commands > Apply Source Formatting<\/strong> or only apply it to a select block of code by selecting the Apply Source Formatting to Selection<\/strong> option.<\/p>\n

\"source<\/figure>\n

7. Get widgety<\/h2>\n

Just click the Extend Dreamweaver icon<\/strong> (it looks like a gear) in your Application Bar and select Browse for Web Widgets<\/strong>. This will take you to the Adobe Exchange where you can find additional widgets from vendors such as Yahoo!, JQuery, and many others.<\/p>\n

\"web_widgets\"<\/figure>\n

8. Subversion & Dreamweaver<\/h2>\n

And yes, Dreamweaver does support Subversion (SVN). For developers who uses SVN to maintain revision control of their project, this could be a good news. Dreamweaver developer Andrew Voltmer discuss how you can use Subversions with Dreamweaver<\/strong>.<\/p>\n

\"subversion<\/figure>\n

9. No More Redundant Styles<\/h2>\n

Many people use Dreamweaver as a way to update content visually, like a word processor. Before Dreamweaver CS4, this could result in redundant CSS rules like .class1<\/code>, .class2<\/code>, and so on. In Dreamweaver CS4, just switch your Property Inspector<\/strong> to HTML<\/strong> mode (click the HTML icon on the left of the Inspector) and you\u2019ll say goodbye to all that redundant CSS, inserting only appropriate HTML markup.<\/p>\n

10. Form Validation made easy<\/h2>\n

Want to validate your form fields, but worried that you\u2019ll have to rebuild from scratch? No worries. Simply select an existing form element, such as a text field, and apply a Spry Validation widget<\/strong> from the Insert > Spry menu<\/strong>. Then control validation requirements such as minimum or maximum characters directly from the Property inspector<\/strong>.<\/p>\n

\"spry_validation\"<\/figure>\n

Bonus: 3 more<\/h2>\n

11. Access Related Files Easily<\/h3>\n

When you open an HTML or PHP file, you will now see a row of dependent file names, such as CSS, Javascript and even included files for PHP, at the top of the document window. You can easily switch to these files, make changes and save them, all without even opening them up. When you click any file in the Related Files bar you will see its source in Code view and the parent page in Design view. Or use Code Navigator to quickly access CSS source code that affects your current selection.<\/p>\n

\"related<\/figure>\n

12. Check browsers compatibility<\/h3>\n

Open the document you want to check for compatibility; from the same menu bar where Code \/ Split \/ Design views are accessed, look to the far right for \u2018Check Page<\/strong>\u2018 button.<\/p>\n

\"check<\/figure>\n

Clicking it will expand a drop down menu, select \u2018Check Browser Compatibility<\/strong>\u2018. The Browser Compatibility results window<\/strong> will show at the bottom of the window with any issues that you need to address.<\/p>\n

Note: This will NOT check new versions of IE on Mac! To select which browsers to use for testing, select Check Page<\/strong> > Settings<\/strong> from the menu.<\/p>\n

13. Preview PHP Pages<\/h3>\n

Dreamweaver allows you to run and preview PHP codes within the software. Here\u2019s how to get it setup.<\/p>\n

\"dreamweaver<\/figure>\n

Getting started<\/strong><\/p>\n

    \n
  1. First, select Site<\/strong> -> New Site<\/strong> from the top navigation.<\/li>\n
  2. You\u2019ll see both the Basic<\/strong> and Advanced Site Definition<\/strong> option tabs. Let\u2019s proceed by selecting the Advanced Site Definition tab<\/strong>.<\/li>\n
  3. Enter a folder name for the site in the appropriate box (for this example we\u2019ll use \"myphp\" as the folder name).<\/li>\n
  4. Create another folder named \"images\" by entering its name in the \u2018Default Images Folder\u2019 field.<\/li>\n
  5. Under the Local Info<\/strong>, input the following values in the fields:\n
      \n
    • Site Name<\/em><\/strong>: the name of the site. To be used in Dreamweaver only<\/li>\n
    • Local root folder<\/em><\/strong>: This is the name of the site you will be working in. Be sure to name sites in a way to minimize conflicts, or confusing names.<\/li>\n
    • Default Images folder<\/em><\/strong>: This is optional, but it\u2019s advised to create it now as most sites will use images to some extent. This is where DW will \u2018look\u2019 to insert images in your documents during the coding phase.<\/li>\n
    • Links Relative to<\/em><\/strong>: This defines how document linking in Dreamweaver will be handled. You can select either Document or Root. The differences between the two are:\n
        \n
      • Document Relative \u2013 Will insert a path relative to the file you are working and the item being linked to.<\/li>\n
      • Root Relative \u2013 Uses \/ which causes the document\/file to be linked in relation to the ROOT folder.<\/li>\n
      • Another alternative is to add some configuration to the server configuration files. Being a more advanced task, we\u2019ll just stick to using Document-relative for now.<\/li>\n<\/ul>\n<\/li>\n
      • HTTP address<\/em><\/strong>: enter the site root folder for your project<\/li>\n
      • Case-sensitive links<\/em><\/strong>: Dreamweaver will check if any file in the project can have Case-sensitive issue when uploading to the server. Notifications will be shown when you use: Site -> Check Links Sitewide. You can leave it checked if you want. I personally don\u2019t leave it checked as I always name files in lowercase. Uppercase letter is not recommended.<\/li>\n
      • Cache<\/strong>: Check Enable cache.<\/li>\n<\/ul>\n<\/li>\n
      • In the Remote Info<\/strong> page, either setup your FTP or other access to a remote server or leave the Access to None.<\/li>\n
      • In the Testing Server<\/strong> page select the option that relates to the file type\/system you will be testing.<\/li>\n
      • Version Control<\/strong> will not be used for this example so you may leave it blank unless familiar with it.<\/li>\n
      • Cloaking<\/strong> allows you to place .psd, .fla, and other source files within your sites folder and DW will disregard them when uploading\/updating your site.<\/li>\n
      • Design Notes<\/strong> are ideal for a web design team as it retains note on changes made to the files. It\u2019s checked by default and fine for us to use this way.<\/li>\n
      • Leave File View Column<\/strong>, Contribute<\/strong>, and Templates<\/strong> as default.<\/li>\n
      • The Spry<\/strong> page simply points to the Spry assets folder which is automatically included with Dreamweaver. There\u2019s no need to change this. Once every setting is finished, click OK<\/strong>.<\/li>\n<\/ol>\n

        Preview PHP in Dreamweaver<\/strong><\/p>\n

        Now open a PHP file and make the needed changes to it. To view this file in Dreamweaver simply press F12<\/strong> and the results will show in your default browser. You can change which browser is used in Edit<\/strong> -> Preferences<\/strong> -> Preview in Browser.<\/strong> This allows a faster edit-to-preview time, eliminates the need to type long URLs into your browser bar or to use another server software to render the PHP files, all of which save time!<\/p>\n

        That\u2019s all. Happy Dreamweaver\u2019ing :-)<\/em><\/p>","protected":false},"excerpt":{"rendered":"

        Maximize Your Dreamweaver Skills with These 10 Tips. Perfect for Beginners. Improve Your Web Design Today!<\/p>\n","protected":false},"author":524,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[4492],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\n10 Useful Dreamweaver Tips & Tricks For Beginners<\/title>\n<meta name=\"description\" content=\"Powerful functions of Dreamweaver to assist your access them quickly, along with many other helpful tricks that will lubricate you development time and improve your code quality significantly\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/10-useful-dreamweaver-tips-for-beginners\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"10 Useful Dreamweaver Tips & Tricks For Beginners\" \/>\n<meta property=\"og:description\" content=\"Maximize Your Dreamweaver Skills with These 10 Tips. Perfect for Beginners. Improve Your Web Design Today!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/10-useful-dreamweaver-tips-for-beginners\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2010-12-27T13:15:47+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-06T13:58:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/dreamweaver-for-beginners\/live_view_options.png\" \/>\n<meta name=\"author\" content=\"Jesse Matlock\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jesse Matlock\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/10-useful-dreamweaver-tips-for-beginners\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/10-useful-dreamweaver-tips-for-beginners\\\/\"},\"author\":{\"name\":\"Jesse Matlock\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/d31464447bab3921ac0180adb4b49bd1\"},\"headline\":\"10 Useful Dreamweaver Tips & Tricks For Beginners\",\"datePublished\":\"2010-12-27T13:15:47+00:00\",\"dateModified\":\"2023-04-06T13:58:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/10-useful-dreamweaver-tips-for-beginners\\\/\"},\"wordCount\":1622,\"commentCount\":40,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/10-useful-dreamweaver-tips-for-beginners\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/dreamweaver-for-beginners\\\/live_view_options.png\",\"keywords\":[\"Adobe\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/10-useful-dreamweaver-tips-for-beginners\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/10-useful-dreamweaver-tips-for-beginners\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/10-useful-dreamweaver-tips-for-beginners\\\/\",\"name\":\"10 Useful Dreamweaver Tips & Tricks For Beginners\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/10-useful-dreamweaver-tips-for-beginners\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/10-useful-dreamweaver-tips-for-beginners\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/dreamweaver-for-beginners\\\/live_view_options.png\",\"datePublished\":\"2010-12-27T13:15:47+00:00\",\"dateModified\":\"2023-04-06T13:58:00+00:00\",\"description\":\"Powerful functions of Dreamweaver to assist your access them quickly, along with many other helpful tricks that will lubricate you development time and improve your code quality significantly\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/10-useful-dreamweaver-tips-for-beginners\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/10-useful-dreamweaver-tips-for-beginners\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/10-useful-dreamweaver-tips-for-beginners\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/dreamweaver-for-beginners\\\/live_view_options.png\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/dreamweaver-for-beginners\\\/live_view_options.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/10-useful-dreamweaver-tips-for-beginners\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"10 Useful Dreamweaver Tips & Tricks For Beginners\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/d31464447bab3921ac0180adb4b49bd1\",\"name\":\"Jesse Matlock\",\"description\":\"For the last six years, Jesse has been immersing himself in UI design, app development, and web trends. He is the founder and design lead for a small though very talented development team that focuses on bespoke app development.\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/jessematlock\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"10 Useful Dreamweaver Tips & Tricks For Beginners","description":"Powerful functions of Dreamweaver to assist your access them quickly, along with many other helpful tricks that will lubricate you development time and improve your code quality significantly","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/10-useful-dreamweaver-tips-for-beginners\/","og_locale":"en_US","og_type":"article","og_title":"10 Useful Dreamweaver Tips & Tricks For Beginners","og_description":"Maximize Your Dreamweaver Skills with These 10 Tips. Perfect for Beginners. Improve Your Web Design Today!","og_url":"https:\/\/www.hongkiat.com\/blog\/10-useful-dreamweaver-tips-for-beginners\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2010-12-27T13:15:47+00:00","article_modified_time":"2023-04-06T13:58:00+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/dreamweaver-for-beginners\/live_view_options.png","type":"","width":"","height":""}],"author":"Jesse Matlock","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Jesse Matlock","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/10-useful-dreamweaver-tips-for-beginners\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/10-useful-dreamweaver-tips-for-beginners\/"},"author":{"name":"Jesse Matlock","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/d31464447bab3921ac0180adb4b49bd1"},"headline":"10 Useful Dreamweaver Tips & Tricks For Beginners","datePublished":"2010-12-27T13:15:47+00:00","dateModified":"2023-04-06T13:58:00+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/10-useful-dreamweaver-tips-for-beginners\/"},"wordCount":1622,"commentCount":40,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/10-useful-dreamweaver-tips-for-beginners\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/dreamweaver-for-beginners\/live_view_options.png","keywords":["Adobe"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/10-useful-dreamweaver-tips-for-beginners\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/10-useful-dreamweaver-tips-for-beginners\/","url":"https:\/\/www.hongkiat.com\/blog\/10-useful-dreamweaver-tips-for-beginners\/","name":"10 Useful Dreamweaver Tips & Tricks For Beginners","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/10-useful-dreamweaver-tips-for-beginners\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/10-useful-dreamweaver-tips-for-beginners\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/dreamweaver-for-beginners\/live_view_options.png","datePublished":"2010-12-27T13:15:47+00:00","dateModified":"2023-04-06T13:58:00+00:00","description":"Powerful functions of Dreamweaver to assist your access them quickly, along with many other helpful tricks that will lubricate you development time and improve your code quality significantly","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/10-useful-dreamweaver-tips-for-beginners\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/10-useful-dreamweaver-tips-for-beginners\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/10-useful-dreamweaver-tips-for-beginners\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/dreamweaver-for-beginners\/live_view_options.png","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/dreamweaver-for-beginners\/live_view_options.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/10-useful-dreamweaver-tips-for-beginners\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"10 Useful Dreamweaver Tips & Tricks For Beginners"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/d31464447bab3921ac0180adb4b49bd1","name":"Jesse Matlock","description":"For the last six years, Jesse has been immersing himself in UI design, app development, and web trends. He is the founder and design lead for a small though very talented development team that focuses on bespoke app development.","url":"https:\/\/www.hongkiat.com\/blog\/author\/jessematlock\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-2kF","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/8969","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/524"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=8969"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/8969\/revisions"}],"predecessor-version":[{"id":66311,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/8969\/revisions\/66311"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=8969"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=8969"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=8969"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=8969"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}