Tag Archive: Responsive Website

Dreamweaver CC: PSD to HTML and CSS

Our team continues to streamline and improve Dreamweaver. It has a modern UI, edit capabilities in Live View, CSS Designer and a 64-bit architecture. That’s not all though, it gets even better. It also has a complete integration of Extract which empowers users to easily go from PSD comp to code.

Extract enables web designers and developers to build web and mobile content from a Photoshop comp directly in Dreamweaver, bridging the gap between Photoshop and Dreamweaver, and reducing the need to go back and forth between the two.

Extract Panel

The Extract panel is where all the magic happens. You can easily extract CSS, images, fonts, colors, gradients, measurement and more to help build sites faster. If the panel is not opened by default, you can launch it as follows:

Figure 1

Figure 1: Launch the Extract panel in Dreamweaver

 

Extract Tutorial (onboarding experience)

We’ve added an onboarding experience to show how easily users can Extract info from a PSD. Click on any layer, text, or image to see how to easily extract info. To get going, click on the “Get Started” (see Figure 2) button on the top left corner.

Figure 2

Figure 2: To get going, click on the “Get Started” button.

 

View Photoshop documents in Dreamweaver

Once you click the “Get Started” button, the Extract panel will automatically sync to your Creative Cloud folders (see Figure 3). You have the following options to upload and view your PSD in Dreamweaver:

  • The “Upload PSD” button, which will upload your PSD to your Creative Cloud account directly from within Dreamweaver. (Figure 3).
Extract_Panel

Figure 3: View Photoshop documents in Dreamweaver

  • Browse your Creative Cloud account folders and select any PSD to get started.

Now that you have successfully uploaded and can view a PSD in the Extract panel, here are the things you can do with it:

Extract CSS

When a PSD is opened in the Extract panel, you can fully inspect the CSS that is pulled from Photoshop layers. When you select a layer, you’ll see all the CSS associated with that selection. Let’s see how that works:

  1. In the Extract panel, select any text or image layer in your PSD. You will get prompted with the resulting dialog (see Figure 4).
  2. Click on “Copy CSS”  to copy the CSS associated with that specific element.
  3. You can now paste it into your CSS document to edit or tweak your design.
Figure 4

Figure 4: Extract CSS code from PSD layers

 

Extract an image (PNG, PNG 8 Alpha, JPG)

Web designers and developers are now able to extract web-optimized images into their designs – all without leaving Dreamweaver.

  1. In the Extract panel (see Figure 5), select an image.
  2. Figure 5: Extract web-optimized images from a PSD.

  3. In the resulting dialog (see Figure 6), click on arrow  which will prompt you with another dialog where you can:
  • Set the folder location
  • Image format.
  • Image name.
Extract web-optimized Images

Figure 6

Layer tab

The Layer tab (see Figure 7) is a convenient way for web designers and developers to view the PSD structure and layers in one place. This tab enables them to:

  • View the PSD layers and structure in one place.
  • Toggle the eye icon next to the layers to show or hide that layer.
  • Click on arrow to download one or more layers.

Figure 7: The Layer tab is a convenient way to view the PSD structure and layers in one place.

 

Styles tab

No more guessing font names, sizes or styles. The styles tab (see Figure 8) enables you to inspect, copy and easily extract font styles, colors, and gradients as follows:

  • Click on Styles tab in the Extract panel.
  • Select any font to get font style, size, and colors.

Figure 8: The styles tab enables you to inspect, copy and easily extract font styles, colors, and gradients.

Where to go from here

Download Dreamweaver CC and explore the new Extract feature videos and tutorials to see how the new capabilities speed up your development process.

More on this topic:

Extract a Photoshop design into code in Dreamweaver

Extract Assets in a browser

In future blog posts, we will cover the new contextual code hinting, extract measurement, and the new drag and drop functionalities in the Extract panel. As always, we encourage you to provide your input and feedback on the latest release of Dreamweaver CC.

Best,

The Dreamweaver Team

 

Dreamweaver In Action – Be Part of The Story!

We’re thrilled to announce the #DreamweaverInAction series. Many of our customers have shared their great work and stories, so we decided to pass it along to the community.

The primary aim of this series is to show off our customers’ exciting work, inspire further creativity by sharing ideas and cultivate a discussion about the modern Dreamweaver. It will also help our featured customers get exposure through Adobe’s social channels and website.

We kicked off the series by showing off the creative work of AltaSartoria web design agency. Claudio Caciagli, lead designer and developer, has just launched this stunning responsive website http://altasartoria.com

AltaSartoria web design agency

AltaSartoria web design agency

 

We followed that up with an inspiring example by designer Jordan Flower, who used Dreamweaver and WordPress to create a business at Keys Apparel that supports victims of human trafficking.

Keys Apparel

Dreamweaver & WordPress site.

 

Do you have a great story to tell? Tell it to millions of Adobe customers. Send us your website or work you’ve created with Dreamweaver CC and be part of the story. You can share your story by sending us a message on Facebook (https://www.facebook.com/AdobeDreamweaver) or tweet it with the (#DreamweaverInAction) hash tag.

 

A Look at the Modernized Dreamweaver CC

When the first version of Dreamweaver launched, the web had only begun to emerge as a viable platform, and its capabilities were a fraction of what they are today. Since then, the web platform has changed dramatically, and continues to evolve at a rapid pace.

Designing for an evolving platform means that the tools one uses must also evolve. To best serve our customers, we are modernizing Dreamweaver to provide an all-in-one visual tooling environment for creating websites and mobile content. To do so we are streamlining the user interface, introducing new ways to tackle key areas of the web design process, and removing support for technologies that are not widely used by our customers.

Our first task has been to streamline the User Interface, which we have begun by consolidating several workflows (such as font management) and simplifying parts of the application (such as the Document Tool Bar and the Insert Panel). In addition, we have begun to identify and remove parts of the application that are redundant. We have already removed 10 panels, 14 dialog boxes, and 62 menu items. A simpler UI means fewer steps to accomplish your tasks, and fewer interruptions to your workflow.

The modernization efforts also include the introduction of the new CSS Designer panel in Dreamweaver CC. In future updates to Dreamweaver we intend to improve the HTML & CSS preview/inspect/edit workflow, streamline file and site management, enhance our support for responsive web design, as well as continue to focus on improving performance and responding to customer feedback. Dreamweaver will also continue to receive regular updates that expose the evolving capabilities of the web and further integrate tools and services that improve productivity.

As we remove older features from Dreamweaver, we recognize that some customers may still depend on existing workflows/technologies. Therefore, in addition to making Dreamweaver CS6 available through Creative Cloud, we are also providing some alternatives. The table below covers some of the features we have removed, and the list of the extensions or workarounds that will enable affected customers to continue using Dreamweaver CC as part of their existing workflows.

Removed feature / functionality

Extension/Workaround

Additional information

Server Behavior, Bindings and Components Panels and Database feature There is a single extension to restore these features. To install, please follow these steps: 1. Launch Dreamweaver CC
2. Update both Dreamweaver CC and Extension Manager (if the update is available) to the latest versions
3. Go to Windows > Extensions > Adobe Exchange
4. Search for Server Behavior extension
5. Install by clicking Free button
6. Follow the onscreen instruction

 

ASP, ASPNET, JSP Support There is a single extension to restore these features. Extension is available at:* Vista/Windows 7: C:\Program Files (x86)\Adobe\Adobe Dreamweaver CC\Configuration\DisabledFeatures* Mac OS X: /Applications/Adobe Dreamweaver CC/Configuration/DisabledFeatures These extensions are in MXP format. To convert them to the correct format, please follow the instructions in this video: http://youtu.be/8bzlrjHGsQcTo install, follow instructions in the video

http://www.youtube.com/watch?v=cB2vmNfcq7A

 

 

Spry There is an extension to replace Spry datasets with jQuery datasets. It is available for free on Adobe Exchange. More info here:HTML5 Data BindingsBootstrap Extension  Replacement provided via deep integration with JQuery UI & JQuery effects. You can still download Spry from Adobe GitHub.
ColdFusion Support ColdFusion has a dedicated IDE (ColdFusion Builder) that serves the development needs of the ColdFusion developers & community. Download ColdFusion Builder 2. Note: You can also open ColdFusion documents from within the files panel in Dreamweaver. Please click here for step-by-step instructions.

 

While Adobe has tested the extensions listed above with Dreamweaver CC, we do not provide support for functionality provided through extensions.

In addition to the extensions we’ve provided, we are particularly excited about two new extensions for Dreamweaver developed by DMXzone. They provide modernized replacements for two Spry workflows featured in previous versions of Dreamweaver. More information is available at:

HTML5 Data Bindings
Bootstrap Extension

We have just begun the modernization process and invite you to voice your opinion. We are committed to taking action on customer feedback and remaining as transparent as possible about our future plans.

Best Regards,

Tareq Aljaber

Product Marketing Manager

Dreamweaver CC: Your all-in-one tool for creating, publishing, and managing websites and mobile content

We are pleased to announce the release of a modernized and streamlined Dreamweaver. Dreamweaver CC is the all-in-one visual tool to efficiently and intuitively create, publish and manage websites and mobile content.

New in Dreamweaver CC:
Create immersive web experiences with the new CSS Designer and visually apply CSS properties such as gradients, box shadows, and more. Dreamweaver CC is committed to producing clean, web-standards code, enabling you to design without the need to hand-code.

Dreamweaver CC also includes enhancements to its responsive design framework, Fluid Grid Layouts. We’ve addressed key usability issues to improve the design workflow, and to help you visually construct and build responsive websites that render properly on multiple screen sizes and devices.

Responsive Design in Dreamweaver CC

Responsive Design in Dreamweaver CC

By removing under-utilized features in Dreamweaver, we are clearing the way to provide optimized workflows for the latest and most relevant front-end web technologies and standards. Over time we plan to evolve the Dreamweaver feature set to include relevant middle-layer and server side technologies as well. Our aim is to provide the ultimate user experience – a collection of productive and modern visual development features in a single tooling environment.

We have just begun the modernization process and invite you to voice your opinion. We are committed to taking action on customer feedback and remaining as transparent as possible about our future plans. More details will follow on what the modernization effort entails in Dreamweaver CC, and we eagerly await your feedback.

Over the past 12 months, we have been expanded Dreamweaver’s integration with many Creative Cloud services and tools. One of the many benefits to being part of the Creative Cloud is that you can access the vast and ever-growing Adobe Edge Web Fonts library. Also, with web technologies evolving rapidly, Dreamweaver CC helps you keep up by implementing features and addressing issues quickly. Creative Cloud members will receive regular updates to Dreamweaver.

Adobe Edge Web Fonts

Adobe Edge Web Fonts

Another benefit of integration with Creative Cloud is Sync: Dreamweaver CC lets you sync both site settings and preferences, streamlining your creation workflow. Sync in seconds and start creating without the need to recreate or manually copy and paste files. With Dreamweaver CC & Creative Cloud, the creative world is at your fingertips.