Archive for CSS

If you use Sass or LESS, then you probably already use variables in your style sheets and know how useful they are. If you don’t use a preprocessor, then you might be curious what the fuss is all about and why variables are so popular and how they can be useful. In this article, we’re going to get an overview of why variables are useful, and get acquainted with one particular variable: currentColor.

What are variables good for?

Variables in CSS are useful because they allow us to write more DRY (Don’t Repeat Yourself) code. They are also particularly useful for managing and maintaining large-scale projects that contain a lot of repeated values.

One of the most common use cases for variables are color themes/schemes throughout a website or application. With variables, creating and managing color schemes across a CSS document becomes a lot easier. For example, color schemes usually require you to reuse a few color values for different properties in the CSS file. If you want to change the primary color of a scheme, you would normally have to change all occurrences of that color in the style sheet. Using CSS variables, you can define a variable in one place (for example a variable named “primary-color”), assign a color value to it, and then use the variable as a value anywhere you want in the style sheet. Then, when the time comes to change this color, all you would have to do is assign it a different color value, and all occurrences of that variable in the style sheet will be automatically updated.

CSS 2.1 did not introduce variables. (Although, that’s not entirely true, as you will see in this article.) In 2014, native CSS variables that are similar to preprocessor variables were introduced; these variables are arguably even more capable than preprocessor variables. A CSS variable is accepted as a value by all CSS properties.

In addition to the new variables, CSS already comes with a keyword value that is practically also a variable: the currentColor keyword.

The currentColor keyword

The currentColor keyword is like a CSS variable, except that it has one main restriction: you can only use it where a <color> value is expected; if a property does not accept a <color> value, it will not accept currentColor as a value.

The following are all examples of using currentColor in properties that accept it as a value.

box-shadow: inset 2px 2px 3px currentColor;
background-color: currentColor; /* not a good idea! */
background-image: linear-gradient(currentColor, transparent);

Another difference between currentColor and other variables is that you don’t get to assign a value to it the same way you would assign other variables values. The value of currentColor is determined by the computed value of the color property that is currently being used on the element. That is, the value of currentColor is equal to the current color property value. And this is where the currentColor name comes from.

So, if we were to go back to our previous example, the currentColor keyword sets the box shadow color to whatever color value you have set on the div. If you haven’t set any color, it will use the inherited color from any of the div’s ancestors. If no ancestor has a color, most browsers will just default to black.

Put another way: the currentColor keyword is used to make properties of an element, or child elements of an element, inherit the color set by the element’s color property. It therefore acts as the inherit value to allow inheritance of a color that would otherwise not be inherited by a property or child element.

This also means that, for properties that already inherit the color value, currentColor will not be of much use.

Properties and elements that inherit the color value by default

When an element has a color value, whether it is explicitly set or inherited, some of the foreground elements of that element that accept a <color> value will inherit that color value by default.

For example, an element’s borders are part of the element’s foreground; thus, even if you don’t specify a border color, the border will get the same color as the color property value. If the element does not have one, most browsers usually default to black.

The border color in this example will be purple:

.parent {
    color: purple;
}

.child {
    border: 5px solid; /* we didn’t specify the border color here */
}

The elements that will get/inherit the element’s color value include:

  • The element’s text—it is what the color property is used for.
  • The text’s outline.
  • The element’s border.
  • The element’s box shadow.
  • An img’s alt text. That is, when the image cannot be displayed, the text that appears in its stead will have that color value.
  • A list item’s bullet(s) and border.
  • In some browsers (e.g Chrome) the horizontal rule’s (<hr>) border color. (Without a border, the color will not be affected.)

When you set these element’s properties on an element without explicitly assigning them a color, they will inherit the computed color value of the element by default.

The following demo shows the above elements in action as they inherit the color set on the page’s body. Change the color property value on the body to see these elements’ colors also change.

See the Pen currentColor — Adobe DW Blog by Sara Soueidan (@SaraSoueidan) on CodePen.

At this point, you might be wondering: if so many properties/elements already inherit the color value, how or where can currentColor be useful?  

Extending color inheritance with currentColor

There are some places where retrieving the color value and using it could come in handy. One example where currentColor can be used that would not otherwise inherit the color value is gradients. CSS gradient images, be that linear or radial gradients, do not inherit colors. By using currentColor, you can make a linear gradient used as a background image, for example, adjust to match any color you specify somewhere else as the “primary color” of a theme.

background-image: linear-gradient(to bottom, currentColor, #fff);

Such an example was created by Scott Kellum who took this concept a little further and added an animation to the color property. As the color property animates, all the elements affected by that color will also animate their colors.   See the Pen currentColor by Scott Kellum (@scottkellum) on CodePen.

This is a great example of using currentColor, particularly the animation part.

However, more practical examples for currentColor exist. Let’s take a look at some of them.

currentColor Use Cases

The idea behind currentColor is to extend the color cascade. This comes in handy in a lot scenarios.

currentColor for theming UI components

From the previous demo, we can move to a more practical (and brilliant, I must say) use case for currentColor demonstrated by Simon “Simurai” in a talk he gave at CSSConfau last year. The talk was about how we can use Flexbox, currentColor and em units inside UI components to quickly style entire Web Apps straight in the browser.

To demonstrate the usefulness of currentColor, Simon created a set of UI elements, including some sliders. These elements have the same color scheme applied. For coloring the sliders and input types, he used the currentColor variable to force the color inheritance in the background color of the slider’s thumb and checkboxes that would otherwise not inherit that color.

currentColor-slider

An example using currentColor to apply the color property’s value to the slider’s thumb. (Source)


Similarly, more UI components can be created that inherit a color value that you would specify somewhere up in the cascade. With this, a UI theme is established on these components. Then, leveraging the cascade and currentColor, you can change the main color value and get a new set of colored components every time you do, thus practically automating the process.

The following GIF image shows that in action. Simon is using the browser devtools and the color picker in the browser to change the value of the color property, and get a live preview of these changes on the components.

Changing the value of the color property will update the colors of all UI components that are inheriting this color, with the help of the currentColor variable. (Source)

 

Using the browser’s devtools capabilities, you would be able to change the theme to your liking and then save the changes to your working files right from the browser. To learn all about it, refer to Simon’s talk and blog post.

currentColor for theming and styling SVG

SVGs are great, but they come with a few styling quirks and limitations depending on how you use them. One such case is reusing parts of an SVG using the SVG <use> element.

If you’re not familiar with the <use> element, you can read all about it here. The idea behind <use> is to reuse parts of an SVG anywhere we want these parts to appear on the page. By useing an SVG element, we’re practically creating a live copy of that element. This is similar to copy-pasting the element in a graphics editor, except that the copy is live—meaning that its characteristics can change as the original copy changes.

The <use> element is used a lot when creating SVG sprites. An SVG containing all of the icons would be used as the sprite, and then we can insert individual icons from that sprite anywhere on the page, using <use>. You can read all about SVG creating sprites in this article.

When an element is used, however, the copy of its contents is cloned into a shadow DOM. This means that these contents cannot be selected and styled with CSS the way we would select and style SVG elements or even HTML elements present in the regular DOM. This is one reason why styling SVG icons created like that is limited.

Using currentColor, we can work around this limitation but allowing a color we specify in CSS “leak” into the contents of the used SVG, by setting currentColor as a value for the properties we want the color value to leak into.

So with an SVG icon used like so:

&lt;svg class="home-icon"&gt;
    &lt;use xlink:href="#home"&gt;&lt;/use&gt;
&lt;/svg&gt;

And assuming the #home icon defined in the sprite sheet contains something like:

&lt;symbol id="home"&gt;
    &lt;rect id="bottom" fill="currentColor" ... /&gt;
    &lt;polygon id="roof" ... /&gt;
&lt;/symbol&gt;

We can then apply styles to the icon and have the fill color cascade down to the #roof (which does not have a fill attribute above) and the color value be inherited by the #bottom rectangle’s fill attribute:

.home-icon {
    fill: red;
    color: white;
}

The fill color will cascade down from the svg to use and then to #roof. The color value will be used as a value for the #bottom fill color because of currentColor.

Fabrice Weinberg wrote an article about this technique a while back on his Codepen blog.

This technique comes in handy when you want to create multiple icons each having different colors; all you would have to do in that case is change the color and fill values in the CSS. An example of this usage is the following demo Fabrice shows in his post:

See the Pen Sass SVG Icons 1.1KB by Fabrice Weinberg (@FWeinb) on CodePen.

Of course, you can use currentColor on multiple elements inside the SVG. However, as you probably have noticed, this only allows you to change two colors inside the SVG.

If you want to have more control over colors and specify more color values that you could leak into the SVG, you would need more variables; this is where the new CSS Variables specification will come in handy. You can read more about this here.

Final Words

In the previous examples, we saw how we can use currentColor in multiple places, and then change the colors we want in one place and have that color be applied to those multiple places, instead of having created multiple occurances of the same color and then changed all of them. This helps us write shorter CSS, and provides us with some sort of automation, especially in situations like the UI components we saw in Simon’s talk.

With CSS Variables, you will be able to define your own set of variables and use them in similar and much, much more use cases, as the new variables will be valid values for any CSS property, not only those that accept <color> values. Dealing with SVG icons will certainly become easier, as will maintaining large-scale projects. Again, if you use a preprocessor, then you already know how useful variables are.

Can you think of more use cases for currentColor? If so, make sure you share them in the comments below!

Comments (0)

We have received a number of requests from Dreamweaver users about creating menus, and we’re here to help! In this ‘Your Questions Answered’ post we’re tackling the basics of creating a menu in Dreamweaver. We’ll get more advanced in later posts, exploring how to create drop down menus and responsive menus, but for now let’s get started with a solid foundation to build off of.

If you are new to Dreamweaver, see our previous ‘Your Questions Answered’ post which walks you through setting up a site in Dreamweaver. Once you have a site set-up, you’re ready to rock this tutorial.

Let’s get coding!

Create a new page in Dreamweaver

  1. Select File > New
  2. Choose the default option (HTML), and click Create.
  3. Select File > Save As and save the file as menu.html

Create an unordered list in the body of the HTML page

Your code should look something like this:

<body>

<ul>

 <li><a href="home.html">Home</a></li>

 <li><a href="about.html">About</a></li>

 <li><a href="careers.html">Careers</a></li>

 <li><a href="contactus.html">Contact us</a></li>

</ul>

</body>

 

Depending on the view that you are in, you should be able to see an unordered list in the Design View or Live view. Notice that each item in the list is associated with an <a> tag. You specify the destination for each item in the <a> tag. For example, when you click Home, the browser opens the home.html page.

We have not yet created the destination pages. So, clicking the links now will not lead you anywhere.

unstylized_menu

Remove the bullets from the list

You do not want bullets in your CSS menu, but never fear. We we will be using CSS to take care of this! After you are done with the code, click the Design view. The bullets in the list should disappear leaving you with a clean list.

Just below the <title> tag, create the style tags:

<style></style>

Insert this piece of CSS code in between the style tags.

ul {

       list-style-type: none;

       margin: 0;

       padding: 0;

}

list-style-type:none: removes the bullets from the ordered list.

Setting margins and the padding to 0 overrides any browser default settings.

Specify a width for each of the list items

If we do not specify a width for the list items, they will take up a default width. To specify the width, we will be specifying a style for the <a> tag associated with each item in that list.

Below is the CSS code for the ul tag. Insert this piece of code:

a {
    display: block;
    width: 60px;
}

display:block: This makes the whole area around the link clickable, not just the text.

By specifying the width at 60px, we are overriding any default width settings of the browser.
You will not notice any major change in the design view except for a border around each item in the list.

Lining up the menu items

Since we are creating a horizontal menu, we want to line up the menu items next to each other. To do this, we have to first remove the line break that is associated with each item. While you don’t see the line break in the code, each block element is associated with a line break before and after the item.

To do this, use:

li {
    display: inline;
}

Good, now the line breaks are gone. You won’t see anything happening in your Design view, but that’s okay. By default, each of the items take up the entire width of the browser. When we float them to the left, we tell each of those items to move to the left and make space for the next item in the list to move up and take up the empty space on the right.

li {
    display: inline;
    float:left;
}

You should now have the menu items lined up next to each other. Perfect.

linedup_menu

Styling the menu items

The menu is in place now, but it has no color and you don’t see anything happening when you move over each of the menu items. Let’s fix that!

Defining the style for normal and visited states

When browsing the Internet, you have likely seen instances where the color of menu items changes after you have clicked on and visited the page associated with the menu item link. It is a visual indicator letting you know that you have made at least one visit to that page previously.

While that is a good idea for normal links, it’s not a great option for menus. We do not want our menu changing color after a user visits a page. So, we are going to disallow that change.

An <a> tag or tag associated with links has four states:

a:link – a normal, unvisited link
a:visited – a link the user has visited
a:hover – a link when the user mouses over it
a:active – a link the moment it is clicked

Delete this piece of code:

a {
    display: block;
    width: 60px;
}

Now enter this code in between your style tags:

a:link, a:visited {
    display: block;
    width: 120px;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #98bf21;
    text-align: center;
    padding: 4px;
    text-decoration: none;
    text-transform: uppercase;
}

Now, the style for the normal and visited states of the menu have been defined. Look in your design view. You should see something like this:

menu

Defining the style for the hover and active states

Let’s keep things simple. We don’t want two different things happening when the user moves the mouse over the link and when they try to click it. We want the same style for both actions. All we will do is change the background color for these states.

Changing the background color lets the user know the menu item that is being clicked.

a:hover, a:active {
    background-color: #7A991A;
}

Preview your menu in a browser

You should be able to see the effects when you move your mouse over each of the menu items. However, because those pages do not exist, nothing actually happens when you click on those links. You will have to create each of those pages and add some content to them to see the menu in action.

Centering the menu

To center the menu, we will associate an ID with the

    tag, and then style the ID.

In the body, your code should look something like this:

<ul id="nav">
  <li><a href="default.asp">Home</a></li>
  <li><a href="news.asp">News</a></li>
  <li><a href="contact.asp">Contact</a></li>
  <li><a href="about.asp">About</a></li>
</ul>

Now that the association has been taken care of, let’s stylize the nav ID. We will use pretty much the same trick that we used to center a web page in a browser.

#nav{
    width:750px;
    margin:0 auto;
  }

With this code we have defined a width for the container, set the top and bottom margins to 0, and the left and right margins to auto. This clears the space to the left and right of the margin allowing the browser to calculate the margin.

Not sure if you got everything right? Take a look at a completed source file.

Until next time, happy coding!

Comments (0)

Instead of linking to new pages, sometimes links (`<a>` elements) reference sections, fragments or other elements of the same page. These kind of links are prevalent in one-page website navigation.

The CSS `:target` pseudo-class selector is used to select and style the target of an internal link in a document, the fragment of the page referenced in a link’s `href` attribute.

For example, if you have an anchor tag linking to a “further reading” section of an article…

<a href=“#further-reading” title=“Further reading resources” />

<!– … –>

<section id=“further-resources”>

<!— … —>

</section>

…you can use the `:target` selector to highlight this section when the link is clicked to guide the reader’s eye to it. This highlighting technique is known as the yellow fade technique and was first introduced by 37 Signals.

#further-resources:target {

animation: highlight .8s ease-out;

}

@keyframes highlight {

0% { background-color: #FFFF66; }

100% { background-color: #FFFFFF; }

}

The technique requires that you use a CSS animation to show the color for only a short period of time and then remove it again—the point is to highlight it only enough to guide the reader to it. Check out the live demo showing this technique in action:

See the Pen ogBWmL by Sara Soueidan (@SaraSoueidan) on CodePen.

The above example applied temporary styles to the target of the link. But if you apply more persistent styles, you can create effects scaling elements up, changing their visibility, and much more.

I have recently used this technique on my own website to show a search overlay for my readers to search for articles in. As part of the main navigation, there is a link that links to the search overlay wrapper—a `<div>` element, containing the search input field.

<a href=”#search”>Search</a>

<!– … –>

<div id=”search”>

<a href=”#” class=”overlay-close”>Close</a>

<h4>Search articles archive.</h4>

<!– … –>

</div>

The search overlay is initially hidden using `opacity: 0;`. It is positioned so that is remains fixed relative to the viewport using `position: fixed;`. And in order to make sure that it doesn’t block pointer events from the rest of the page “beneath” it, `pointer-events` are set to `none`.

 #search-overlay {

position: fixed;

top: 1em;

bottom: 1em;

right: 1em;

left: 1em;

/* … */

opacity: 0;

transition: opacity .3s ease-in-out;

pointer-events: none;

}

Once the Search anchor is clicked, and using the `:target` selector, the overlay is shown and pointer events are dispatched on it again. In order to show the overlay smoothly, a transition is applied that creates a fading in effect.

#search-overlay:target {

opacity: 1;

pointer-events: auto;

}

The search overlay fades in. Mission…half accomplished—we need to make sure it fades out again when the user requests so.

The overlay container needs to contain another link that will allow us to go back to the main page. To do that, we could give the `body` or `html` element an ID, and then have the Close link to that ID—this would do it. However, that is not necessary. By linking to no particular fragment using only the `#` as a value, you’re practically linking to the main page, but you gain the advantage of not adding any fragment identifier to your page’s URL.

Once the Close link is clicked, we want the search overlay to fade out, so we’re going to add a transition again to the `#search-overlay:target` to make sure its opacity transitions to `0`. You can, of course, avoid this step if you just want to make it disappear instantly when the user closes it.

#search-overlay:target {

opacity: 1;

pointer-events: auto;

transition: opacity .3s ease-in-out;

}

Check out the live demo.

You can take it further and add a transformation animation to the overlay so that it scales up into view as it fades in—kind of like (yes, you guessed it) a Lightbox effect. Instead of an overlay with a search form, you could have an image that would scale into view when its respective thumbnail is clicked. Manoela Ilic has a nice and complete working image gallery showing this in action, with a tutorial explaining the code behind it.

Christian Heilmann also wrote a post about creating a simple image gallery using the `:target` selector that is also worth checking out.

CSS-only image galleries, modals, and off-canvas navigation, are  all examples of fully-functional UI components that you can create using only CSS, by taking advantage of the the `:target` selector.

I hope this introduction helped show you to the possibilities at hand when using and styling content with CSS pseudo-class selectors.

More to come! ;)

Comments (0)

Using CSS to create drop caps in your design can be cumbersome. If you’ve used dropcap.js, you know it’s a much easier way to realize your design. The good news? We’ve made it even easier for Dreamweaver CC users with a native dropcap.js extension called Dropcaps.

Now you can enlarge the first letter of a paragraph or section of text to catch readers’ attention and jazz up your design.

 

Dropcap first character

Dropcap first character

 

Let’s take a look how you can do that in a few easy steps:

Installing the Dropcaps extension

  1. Quit Dreamweaver CC.
  2. Make sure you have installed the Creative Cloud Desktop App. 
  3. Make sure sync-files feature is turned on and not paused. 
  4. Make sure you have installed a compatible Adobe application.
  5. Install the Dropcaps extension from the Adobe Add-ons page.
  6. Check that you have acquired your Add-on.
  7. Restart Dreamweaver CC 2014.1 so that the Add-on can be enabled.


Using the Dropcap extension

  1. Launch Dreamweaver CC.
  2. Open your web page in Dreamweaver.
  3. Select the required paragraph:
    • If you are in Live View, simply click the text element.
    • If you are in Code View, position the cursor inside the text or tag, or select the text.
  4. Open the Dropcaps extension dialog box by selecting Window > Extensions > Dropcaps, or by using the Keyboard shortcut = Cmd+Alt+L on Mac; Ctrl+Alt+L on Windows.
  5. Specify the following details in the Dropcaps extension dialog box (see Figure 1):
    • Height: Number of lines that the height of the drop caps element spans. Counting is from top to bottom.
    • Baseline (optional): The line number to which the base of the drop caps element aligns with. Counting is from top to bottom. (Default value: same as height)

No. of characters (optional): The no. of characters to which the drop caps effect should be applied. (default: 1)

Dropcaps Extension

Dropcaps Extension

 

  1. Click “OK”.
  2. File > Save to confirm changes.

 

Note: An ‘extDropcaps’ folder gets created in the same directory as your web page. This folder contains the JavaScript for the drop cap effect, and needs to be uploaded to your publishing server along with the rest of the files and scripts.

To edit the drop cap’s properties, select the text element, open the Dropcaps extension, and edit its values.

That’s it! You’re done. Please follow us on Facebook or Twitter so you can always get the latest Dreamweaver news.

Best,

The Dreamweaver Team

 

Comments (0)

The latest release of Dreamweaver CC has not only introduced new features but also has major improvements to existing ones such as the CSS Designer and the Element Quick View. We’ve created a couple of videos to provide an overview of these features and the enhancements we’ve made in Dreamweaver CC.

CSS Designer

This video provides an overview of the CSS Designer panel and highlights the improvements to it. In this video you’ll learn how to:

  • Start a page design with the CSS Designer.
  • Work with the CSS Designer visual controls.
  • Use the panel’s workflow enhancements.

You’ll also take a look at how Live View integrates with the CSS Designer feature, making web design easier than ever.

Element Quick View

The Element Quick View panel lets you easily modify the HTML structure of your page with a tree view.  In this video you’ll get an overview of the feature and learn how to:

  • Use the Element Quick View to precisely insert elements into your website.
  • Easily edit the structure of your website.
  • View editable and dynamic (read-only) elements.

 

Where to go from here?

Download Dreamweaver CC and give these features a spin. Adobe has published thousands of free learning tutorials and videos for all skill levels: beginners, intermediate, and advanced. We encourage you to continue to provide your feedback and input as this is what shapes our products.

Best,

Dreamweaver Team


Comments (0)

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.

 

Comments (0)

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

Comments (0)
Nov
21

Adobe Dreamweaver Survey 2013

Posted by: | Comments (0)

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

Comments (0)

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.

 

Comments (0)

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 will be overhauling the HTML & CSS preview / inspect / edit workflow, file and site management and collaboration in the app, responsive design tooling, performance, and more. 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. 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

To install, follow instructions in the video

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

 

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.
Widget browser Widget Browser was the only way to manage Spry extensions across Adobe applications. For more information please visit the following link:
http://labs.adobe.com/technologies/widgetbrowser/
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

Comments (0)

Database Design and Management

Cwebpro can design and develop a small business data management solution for you. We will provide professionally crafted entry screens and a database that will grow with your business.

Professional Web Designs

If you need a web site designed or updated contact Matthew at Cwebpro for quality work at a fair price. The Web Creation Zone (Cwebpro) can meet all of your business website design and data management needs.