Responsive websites. Really fast. Dreamweaver CC gives you faster, easier ways to design, code, and publish websites and web applications that look amazing on any size screen. Build beautiful sites for any browser or device. With support for HTML, CSS, JavaScript, and more, designers and developers can quickly create and publish web pages almost anywhere. Fast, flexible coding. Create, code, and manage dynamic websites easily with a smart, simplified coding engine. Access code hints to quickly learn HTML, CSS, and other web standards. And use visual aids to reduce errors and speed up site development. Setup to site up in fewer steps. Get your sites up and running faster with starter templates that you can customize to build HTML emails, About pages, blogs, e-commerce pages, newsletters, and portfolios. Code coloring and visual hints help you read code more easily for quick edits and updates. Dynamic display on every device. Build websites that adapt to fit any screen size. Preview your sites and edits in real time to make sure your pages look and work the way you want before you publish.
Dreamweaver excels at creating multiplatform (responsive) websites that work equally well on a phone, tablet, or computer. Any private or corporate web designer looking to replace an ancient desktop- or laptop-style website with a modern multiplatform site will find Dreamweaver the obvious first choice. I’ll describe some alternatives later in this story, but none of them comes close to Dreamweaver in terms of power and ease.
After more than 20 years of evolution, Dreamweaver still has some awkward spots where it can’t decide whether it’s a tool for advanced coders or for visually oriented designers, but these are easy for serious users to work around—and Adobe’s subscription pricing means that only serious users are likely to have it. Dreamweaver isn’t cheap, but for professional-level web design, it repays the price in power and convenience. Adobe’s subscription model means you get periodic feature updates at no extra cost.
Adobe wants you to work with Adobe tools, so it’s easy to use Photoshop and Illustrator to edit images or Premiere Pro and Audition for video and sound files. You can also use Photoshop to create a mock-up of what you want your site to look like and then use Dreamweaver’s Extract menu to drag elements from the Photoshop file into your web pages. But Dreamweaver also works with just about any third-party site-building tool that you might want to use. For example, you can use Dreamweaver to design and edit sites managed by WordPress, Joomla!, or Drupal, or you can create a Git repository and use it keep track of changes in your site.
Dreamweaver uses the Bootstrap framework for responsive sites, and by default uses the latest Bootstrap version, 4.3.1, though the earlier 3.4.1 version is still built-in if you want to continue using that. Dreamweaver guides you through upgrading sites based on the earlier version and tries to resolve incompatiblity hiccups by creating new CSS and JavaScript files that use the latest standard. Bootstrap’s responsive sites are mobile-first, meaning that the Bootstrap framework is mostly optimized for phones or tablets, but Adobe’s built-in Bootstrap templates are well-engineered enough to look equally good on desktops and phones.
First-time users face a steep learning curve, but if you’re familiar with Photoshop or Illustrator, you should be able to climb it fairly quickly. If like me, you get bewildered searching for some obscure feature, the Help menu can guide you to exactly the menu item you need, even when it’s deep in the menu structure. Dreamweaver uses the standard Adobe interface, a main editing window surrounded by a toolbar on the left and multi-tabbed information panels on the right. Unless you’re an expert coder who won’t need all the onscreen tools and panels, don’t even think of using Dreamweaver on a small laptop. This app needs all the screen real-estate you can give it.
When editing a typical, relatively simple website, you have at least four document tabs open, one for the current page, the others for JavaScript and CSS files, and an information panel with at least seven tabs, showing files, Creative Cloud libraries, HTML tags that you can drag into a file, a complex set of CSS controls, a Document Object Model (DOM) tree, a list of assets (sorted into URLs, images, media, and more), and a long list of prebuilt and custom-built snippets. Add to this a customizable toolbar at the left and a densely populated menu at the top, and you’ve got one of the most complex interfaces ever built into app, rivaled only by other development software such as Microsoft Visual Studio.
Fortunately, if you’re expert at coding, or if you want the most spacious possible WYSIWYG view, you can hide everything but Dreamweaver’s main editing window. And that window is a chameleon-like marvel of flexibility. The window’s viewing options include an all-code view with the typical coding-window indentation and color-coding to make the structure of your project visible.
You can choose between two kinds of WYSIWYG views. One is a Live view that approximates what you would see in a browser, except with page elements outlined for clarity and with buttons that let you modify the tags for individual elements simply by clicking on the element. The other is a Design view that shows all design elements on a page, including the ones that might be invisible in a browser until a user clicks on them. Finally, you can split the window to show code in one pane and either Live or Design view in the other—or with code in both panes so that you can view and edit two different parts of the code at the same time. Advanced options let you sync the changes you make on your desktop with the code on your remote web server.
Comments (0)