Tag Archive: CSS

The 2014 Release Of Dreamweaver CC Brings New Live View Features And Big Productivity Improvements

Today we’re excited to announce the 2014 release of Dreamweaver CC! This latest version will improve your productivity and streamline your web design process, making it quicker for you to build and edit your web and mobile projects.

Can’t wait to get your hands on it? Download Dreamweaver CC now.

Here’s what you’ll find in this release:

New Live View editing

This update adds new editing features within Live View, which was upgraded to use a brand new rendering engine last August. You can now visually edit your page and preview changes without switching between display modes and constantly refreshing.

 

Need to change an image? Click on it and swap it out. Need to edit text? Change it without having to scrub through your markup. With Element Display, you have quick access to CSS selectors, tag information, image editing properties and text editing and formatting, so you don’t have to spend a lot of time with development tools to decipher how and where CSS properties are applied. Now, you can click on HTML elements inside of Live View and immediately see the element tag, applied CSS selectors, so you can quickly add or delete selectors found in your stylesheets. You now also have access to the CSS Designer, Insert Panel, Properties Inspector and other panels to quickly build and edit your page within Live View. Learn more about how to use Live View features here.

Element Quick View

Navigating HTML markup can be tedious since all your tags get lost between the content that fills your page. With the Element Quick View you get access to a display list of all the elements within your DOM (kind of like an elements panel for HTML) without having to sift through the noise of additional markup. Inside of this view you can view applied CSS selectors and rearrange, duplicate or delete elements. Your selection is also highlighted in both Code and Live views to see where the element lives on your page. Learn more about how to use the Element Quick View here.

 

Copy/Paste CSS

Copy > paste > edit is an old and cumbersome method of writing CSS that’s error prone. Now in the CSS Designer you can right click on a selector to copy all of the applied styles and paste them onto a new selector. You can filter what you copy by layout, text, border, background or animation styles and even navigate to live websites within Dreamweaver and grab styles from there. It’s the little things that add up.

There’s more you’ll find in this release, including new video tutorials to help you get started, site management certificate support and other improvements and bug fixes. See a full list of what’s new here.

Dreamweaver CC Video In-App Gallery

Grab the latest version Dreamweaver CC and see for yourself how these features work and can improve your productivity. This release was made possible by feedback from users like you – you can now provide your feedback directly within Dreamweaver CC(Help>Submit Bug/Feature Request) or through our community forums. Thank you for your continued support and help.

 

Amazing interior design and architecture resource

Have you ever wondered where interior designers go for inspiration and ideas? More than 70,000 of them rely on the Trade Only Design Library (TODL), a site that connects them with sellers of goods for residential and commercial interior design projects. For manufacturers, TODL is also a great resource, generating 4,000 targeted leads monthly.

To keep both buyers and sellers engaged and make the site easier to navigate, TODL recently redesigned the site using Adobe Dreamweaver CC. Executive Creative Director Scotty Smith appreciated how Live View and Code View in Dreamweaver CC saved him time and helped him improve the site’s code. The responsive website is now easily accessible by designers in the office on a desktop computer or at a job site using a tablet or a smartphone.

TODL benefitted from working with tools in Adobe Creative Cloud and looks forward to taking advantage of even more time-saving features and services. “Adobe Creative Cloud has already saved us time by enabling us to easily share files, send links to files that can be viewed using standard web browsers, and integrate a wealth of creative new features into our designs,” says Smith.

Read the full story: http://adobe.ly/1eC7rUU

Adobe Dreamweaver Survey 2013

The Dreamweaver team is conducting a customer feedback survey. The objective of this survey is to connect with you, our users, and figure out from as many of you as possible what’s working in Dreamweaver and what isn’t. 

Your feedback is important to us. Participation in this survey is voluntary and your responses are completely anonymous. 

The survey should take no more than a few minutes to complete. Once you have completed all survey questions, please remember to click the “Submit” button to send your response. 

  • To begin, click on the link below.
  • After completing each page, the page will scroll down to the next question.
  • Scroll up or down If you need to change an answer.

We know your time is valuable, and we appreciate your participation. Thank you very much for helping to improve Adobe Dreamweaver.

 

To take the survey, click below: 

http://bit.ly/18bhS2n

Best,

Tareq Aljaber

Product Marketing Manager

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.

It’s Not Your Father’s Dreamweaver – It’s The New Modernized Dreamweaver

We are pleased to announce that Dreamweaver CC will be available to our customers to download very soon. With many new features and enhancements, the new Dreamweaver CC is modernized, lighter, smoother and easier to use than ever. Dreamweaver CC is THE all-in-one visual tool for building and creating mobile and web content.

The new CSS Designer in Dreamweaver CC provides a visual interface to let you quickly and intuitively work with CSS properties such as gradients, box shadows; CSS Designer helps you get your work done quickly and efficiently.

In addition, Dreamweaver CC comes with a streamlined workspace; a modernized UI and smoother workflows help you work more efficiently and intuitively. We have been focusing all of our energy and resources on making sure Dreamweaver supports the latest and greatest web and mobile technologies such as HTML5 and HTML5 forms, jQuery mobile support, CSS3, SASS / Less and more.

Constructing and building responsive layouts can be challenging for web designers, and requires learning new skills, but Dreamweaver CC is here to help. By using the enhanced Fluid Grid Layout feature in Dreamweaver CC, users can visually design & lay out their websites to display nicely on different screen sizes for desktop and devices.

Dreamweaver CC brings typography to the party and gives you access to the vast and ever-growing Adobe Edge Web Fonts library. You can use any of Adobe Edge fonts in a few clicks.

Building native mobile apps for Android, iOS, Blackberry, and Windows Phones never been easier with the tight integration between Dreamweaver CC and PhoneGap Build. You can now publish and package your web content as native mobile apps in moments.

Dreamweaver CC, as part of Creative Cloud, boasts tight integration with many CC services and tools, and you can now easily sync your website settings and preferences from anywhere. Anything you need, whenever you need it, is at your fingertips with Adobe Creative Cloud. Watch our video to learn more about what’s new In Dreamweaver CC

 

Make sure you sign up for Adobe Creative Cloud. We look forward to seeing all the exciting work and experiences you will build with Dreamweaver CC. Buckle up and enjoy the ride on Adobe Creative Cloud.

Getting rid of blue borders around image links

Here’s a really annoying problem that we often hear people asking about: how do I get rid of a blue border that surrounds an image when I make the image a link?

Annoying blue border around a linked image

Annoying blue border around a linked image

Some people will tell you to simply set a zero border in the Dreamweaver Property inspector, but according to David Powers, you should really use CSS instead.

Here’s how to do it:

  1. Create a new CSS rule for linked images, either in the head of the document or in an external style sheet. (We recommend the latter.)
    The new rule looks like this:
    a img { border: none; }
    Note: If you don’t know anything about creating CSS rules, you’ll need to read up on some basic CSS info first.
  2. If you’ve created the rule in a <style> block in the head of your document, you don’t need to do anything else. If you’ve created the rule in an external style sheet, make sure the sheet is linked to the page that’s displaying the annoying border.

Creating a CSS style to remove borders automatically removes the blue border from ALL images that you’ve turned into links. If you use an external style sheet, and link it to all the pages in your site, the same rule affects every image link in your site. This is a much more efficient method of eliminating those pesky borders than adding zero to the border property for every image in your website!

Thanks to David Powers, who originally posted this helpful tip in the Adobe Dreamweaver Forum.

 

Adobe recommends: CSS Inspect

Over the past week, we publicized some high-value content from adobe.com and  other community sites. Hopefully you enjoyed these posts and found the resources useful. This will be the last post in the “Adobe Recommends” series (for now!)

Continuing our trip along the CSS highway, we have this recommended video by Dreamweaver Product Manager, Scott Fegette:

Dreamweaver CS5 — CSS Inspect

This video shows you how you can use CSS Inspect in Dreamweaver’s Live view to inspect and edit your CSS structure.

Adobe recommends: Enhanced support for CSS3 in Dreamweaver CS5.5

Over  the past week, we publicized some high-value content from adobe.com and other community sites. Hopefully you enjoyed these posts and found the resources useful. Today is our last day of the “Adobe Recommends” series.

Continuing our trip along the CSS highway, we now move to CSS3 with our next recommendation, by Preran Kurnool:

Enhanced support for CSS3 in Dreamweaver CS5.5

This blog post takes you through using box shadow, text shadow, border radius, and border image properties in Dreamweaver CS5.5.

Give it a spin and let us know what you think!