Archive for Data Management

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)

We regularly get asked questions on our forum, on Twitter and on Facebook about how to do different things in Dreamweaver CC, and we’re happy to help! We want to make sure you have the know-how to make your ideas a reality using our tools, so this is the first post in a series we’ll be publishing where we’ll answer your how-to questions. Have a burning question you’d like answered? You can always go through the channels mentioned above, or feel free to leave a comment below.

Today, we’ll be talking about how to create a web page in Dreamweaver and center-align its contents. If you are looking for the code to center your page, dive directly to the section ‘Center the Content.’ However, if you are new to web design and are getting started with Dreamweaver, it’s wise to go through every step of this tutorial.

 

How do I center a page?

First, you need to create a container (DIV) for the other DIVs on the page. When you center-align the container DIV, the rest of the content gets center aligned as well. While it is not necessary that you use Dreamweaver for the tutorial, some of the steps that are mentioned below are very specific to the use of this software.

 

Create a new site

Before we proceed to create a page that centers itself with respect to the display, we will first need to create a site to store all the files we will be creating hereafter.

To start, create a folder or directory on your computer called FAQ_Tutorials. I am on a Windows computer, and I have created this in my C drive.

  1. Select Site > New Site.
  2. In the Dialog Box that appears, enter the following information.
    1. Site Name: Tutorials on FAQs
    2. Local Site Folder: Click the Browse or Folder icon. Navigate to the FAQ_Tutorials folder on your computer. Click Select Folder.
  3. Click Save.

lesson1_site_creation

You now have created a Site with the name Tutorials on FAQs, and the files for this site will reside in the FAQ_Tutorials folder.

Create a new page

We will now create a web page that we will save in the FAQ_Tutorials folder.

  1. To make it easier to manage your files, create a subfolder called “FAQ1_center_webpage” in the FAQ_Tutorials folder.
  2. In Dreamweaver CC, select File > New. Ensure that the options Blank Page, HTML, and <none> are selected in the New Document Dialog that is displayed.
  3. Click Create.
  4. Select File > Save As.
  5. Navigate to the FAQ1_center_webpage folder.
  6. Save the file with the file name “centering_a_webpage”
  7. Click OK.

Create the Container and Header

For the web page, we will create a container div that will hold the contents of the page. When we center the container, all the contents inside get centered as well.

In the container, we will include three DIV tags: Header, Body, and Footer.

  1. In Title, replace “Untitled Document” with “Centering a web page”
  2. In the Insert panel, select Structure from the menu.
  3. Click Div.
  4. In the Insert Div dialog, enter container in the ID field. Click OK.
  5. Delete “Content for id “container” Goes Here”.
  6. Ensure that the cursor is within the Div. Click Header in the Insert panel.
  7. In ID, enter head and click OK.

insertdiv

You now have a parent container with the Header div tag inside it. Great going!

Style the Header Tag

Next, let’s style the Header tag so that we can differentiate it from the other Div tags that we are going to create. For this we are going to need some CSS love!

We will style the header to give it a blue background color with white text.

  1. Just after the Title tags in the code view, we will enter the style tags <style></style>.
  2. In between the tags, we will enter this piece of code:

#head{

                    background-color:blue;

                    color:white;

                    }

  1. Click in the Design view. You should see a blue box with white text in it.

Create the body and the footer

Let’s go ahead and create the other two DIVs below the header.

  1. Ensure that the cursor is after the closing div tag for the header (</header>).
  2. Click Div in the Insert panel.
  3. In the Insert Div dialog, select After Tag and <header id=”head”> from the Insert options.
  4. In ID, enter body, and click OK.
  5. In the Insert Panel, click Footer.
  6. In the Insert Footer dialog, select After Tag, and <div id=”body”> from the Insert options.
  7. In ID, enter foot, and click OK

You have now created a container DIV with three child DIVs (Header, body, and Footer). When you center the container DIV, all the three child DIVs get centered as well.

 insert-body-tag

Style the body div and the footer tag

Follow the procedure described for Header in “Style the Header Tag” to add styles for the body and footer Divs. Add the styles below the style for the header.

#body{

                    background-color:yellow;

                    color:black;

                    }

#foot{

                    background-color:red;

                    color:black;

                    }

You should now see three boxes blue, yellow, and red one below the other. If you don’t, go back and see where you went wrong.

Center the content

Now that we have the contents ready, we are going to center them with respect to the browser they are displayed on.

This is what we will do: Define 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.

While you can add the style for the container tag anywhere, I suggest that you put it above the style for the header because this is the parent tag.

#container{

                    width: 980px;

                    margin:0 auto;

                    }

Preview the page in a browser

  1. Select File > Preview in Browser.
  2. Select the Browser in which you want to preview the page.

The contents of the page should now be center-aligned. Some of the older versions of Internet Explorer might not work with this code. As a workaround you might have to create a class for the body and center-align text. Unless there is a real necessity to support really older versions of browsers, this step is not necessary.

body {                          

text-align:center;

                    }

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

Some useful notes on linking CSS files

In this tutorial, we have used CSS on the same page as that we have designed. However, it is not a good idea to have CSS on every web page if your website has many pages. A better idea is to create a single or a few CSS files and link it to the HTML pages. That way, you can make changes in one location and have them reflected across multiple pages.

For example, you can create a CSS file called theme.css and link it to your HTML page.

<head>
<link rel=”stylesheet” type=”text/css” href=”theme.css”>
</head>

In this example the theme.css is the name given to the CSS file, but you can choose any name you want. The CSS file is on the same path as the page to which it is linked. However, if your CSS file is within a folder called CSS, you will have to specify the path as say, “href=/css/theme.css”. Get more information on relative paths here.

Until next time, happy coding!

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)

Seventeen years of working on the web brings a level of experience some of Silicon Valley’s top tech entrepreneurs can’t match.

Many web development tools have come and gone in the last couple of decades, but Dreamweaver has continued to evolve and remain the choice tool of millions of web developers and designers around the world who are crafting the modern web.

In celebration of Dreamweaver’s 17th year on the market, we thought we’d take a look at the web and how we access it, now and then.

 

Dreamweaver_17Yrs_WebResolution

Comments (0)

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

 

Comments (0)

One of the new features in the latest release of Dreamweaver CC is the introduction of Code View color themes. As one who enjoys playing with code, I was pleased to see some attention given to the view sometimes used as a last resort. Just as there are those who would only look under the hood of their car in the direst of circumstances, some Web designers only go to Code view when they can’t make their design edits work correctly in Design or Live View. This is especially true for new Dreamweaver users who have a limited coding background and are uncomfortable editing code. Going to Code View helps me understand what Dreamweaver is “thinking.”

Pages of code are very tedious to read. Changing a simple preference in the Edit menu to increase the font size for code is very helpful, especially when you are using Code View as an instructor in a lab with a projected screen. This is not a new feature, but sometimes overlooked by users.

Dreamweaver preferences

With the new color themes introduced in the latest release of Dreamweaver CC, you can do much more to make reading through code easier on your eyes (depending on your preferences) by choosing the way color is used for the different code view components. These themes are selected with the Edit/Preferences/Code Coloring/Theme option. The default color theme is Classic, the color scheme that you used in previous versions of Dreamweaver. With the latest release of Dreamweaver CC, however, you can choose between Raven, Slate, Blanch, or Geneva as a color theme, as shown below.

Raven
Raven Color Theme

Slate
Salte Color Theme

Blanche
Blanche Color Theme

Geneva
Geneva Color Theme

These color themes introduce easy beginning points for developing your own preferences for the colors used for such components as the code background, foreground, and comments. You can even vary the colors for different document types, such as HTML and CSS. For example, I modified the background color of an automatic date in Code View for the Slate color theme from a light yellow to a light pumpkin color using the following steps:

  1. Select Edit on the Menu bar, select Preference, then select Code Coloring.
  2. Preferences Panel

     

  3. Select Slate from the Theme drop-down menu.
  4. Select the Edit Theme Colors button.
  5. Select Date Object from the Styles for list menu, select the Background color box, then select a new color of your choice.
    Color Theme
  6. Select OK to close the Edit Coloring Scheme for HTML dialog box, select Apply in the Preferences dialog box to apply the changes, then select Close.

By selecting Apply, the new color background for all automatic date code is saved to my Slate theme and will retain the color change from session to session.

Thinking Ahead

I would love to have a highlighter tool in my Coding toolbar. With a highlighter tool, I could quickly highlight code when I was interrupted while working on a coding issue. Upon my return, I could quickly scan down the code to locate the issue. A highlighter tool would also be a great tool for instructors. When I was grading pages and pages of code for my web design students, I would ask the students to copy the code, paste it into Word, then highlight and number the code to be graded. This saved immense time. How lovely it would be to be able to highlight code in Dreamweaver! Would you be interested in a Code View highlighter tool?
—————————————————————————————————————————————————————————-

Sherry Bishop is an instructor emerita of Information Technology at North Arkansas College in Harrison, Arkansas. She is the author of several Adobe Dreamweaver books in the Cengage Revealed and Illustrated Series, the latest being Adobe Dreamweaver Creative Cloud Revealed. In addition to holding three endowed chairs in technology during an accomplished teaching career, Bishop was selected as the outstanding instructor at North Arkansas College in 2004 and given the NISOD Teaching Excellence Award in 2002 and 2004. In 2011, the Text and Academic Authors Association awarded her book Adobe Dreamweaver CS5 Revealed the Textbook Excellence Award for the outstanding textbook in College Computer Science/Engineering for 2011. Sherry enjoys traveling, gardening, photography, cooking, reading, and yoga.

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)
Oct
06

The New Dreamweaver is Here

Posted by: | Comments (0)

Hello Web Pros!

The Dreamweaver team has been hard at work to bring you the latest release of Dreamweaver CC 2014, available for you to download right now.


So fresh, so clean  check out the new Dreamweaver interface

We’ve been keeping busy with this release for over a year, and as a result this is no ordinary update. This release contains groundbreaking functionality for taking your Photoshop documents to the web, new innovations in Live View, code improvements, and has been re-architected as a native 64-bit app for improved performance and stability.

New feature summary
Download now

What you’ll find in this release:

PSD Support with Extract

code

You can now browse and view your Photoshop documents stored in Creative Cloud directly within Dreamweaver, letting you rapidly take your designs to code. Yes, that’s right, you can open a fully layered PSD in Dreamweaver. When a PSD is loaded, you can extract CSS, colors, gradients, fonts, measurements and web-optimized images from your Photoshop layers when building your web projects. This will let you preserve the integrity of the design when bringing it to code, and takes the guesswork out of how that PSD will translate to web. No need to wait for a designer to send you a style guide or redline specs anymore!

Getting CSS and Images

When a PSD is loaded in Dreamweaver, you can fully inspect the CSS pulled from Photoshop layers. When you select a layer, you’ll see all the CSS associated with that selection. This is useful for grabbing colors, gradients, border-radius, font styles and more when building the front-end of your website. It’s kind of like Web Inspector for a PSD.

You can also code hint directly into a PSD, giving you full control as you write styles. When writing CSS, contextual code hints are pulled right from your Photoshop layers, expediting the time it takes to go from comp to code.

This is just a snapshot of what you can do, to view a full tutorial of how to use PSDs in Dreamweaver click here. We’ve also included a sample PSD for you to try out within the Extract panel.

Live View

lv

This release is a significant milestone for the preview surface in Dreamweaver. You might be familiar with the Netscape 4 view-of-the-world you get with Design View, and in this release we’ve put Live View front and center so you can preview your website as you build it, with everything rendering in HTML5. Live View is now the default viewing surface, but you can go back to Design View if you need it.

There’s now more editing features for previewing those quick edits as you build your site. This’ll save you all those trips to the browser just to check small changes.

Live Guides

Use Live Guides to directly select elements to rearrange on your site. When you make a selection in Live View, the tag and everything nested with it gets selected; you can drag this around on your page to rearrange, hold while dragging to bring up the Element Quick View for precise DOM insertion, or use as a visual reference in code for bulk selections.

Live Refresh

All of your code gets updated for preview in real time as you build your website – no refreshing, and you can save the browser preview for when you need to make a serious review.

Quick Access to CSS

This is a simple addition which will make your life easier when writing CSS. When you select an element in Live View, you can see all the selectors applied to that element. Right click and select “Go to Code”; this will take you to the exact selector in your CSS file, saving you from having to fight with debugging tools to find what style is applied where.

(Hint: you can paste copied styles from a PSD here too!)

The (not so) Little Things

The little things make a big difference in the way you work. There’s more incremental improvements you’ll find in this release:

Code theming

You can now change the color of your code editor. Choose from a list of themes, customize to make your own and take them with you between machines when synced to Creative Cloud.

Keyboard Shortcuts

Use Cmd/Ctrl + [ / ] keys to easily traverse between parent and child elements. See the selections in Live View or use a way to quickly navigate code.

Starter Templates

If you don’t want to start with a blank page, you can choose between five responsive templates ready for you to customize and style.

This is just a sample of what you’ll find. Check out the new features summary to learn more about all the updates, or some of our new tutorials. If you’re working with PSDs and the web, or are still on an older version of Dreamweaver like CS6, this release is for you! Below are a few resources for you to get started.

Download now
New features summary
Tutorials
Community forums

Thanks for your support!
The Dreamweaver Team

Comments (0)

Over the last year, we’ve made a lot of improvements to Dreamweaver to make it easier for you to see edits in real-time without going to your browser, produce standards compliant code, and complete tasks more quickly in the streamlined user interface. We’ve also made substantial improvements to the underlying architecture of Dreamweaver to help you work more efficiently.

In our next release of Dreamweaver we will take another big step towards modernization by moving to a native 64-bit architecture. The next version of Dreamweaver will only be supported on 64-bit Macs aligning with Apple’s decision to require 64-bit hardware with the release of OS X 10.7 (Lion). Mac and 64-bit Windows users will enjoy newfound responsiveness, stability and performance, as Dreamweaver CC will begin to take full advantage of better memory addressability inherent with modern hardware and operating systems. On Windows, both 32 and 64-bit processors will be supported (Windows 7 and higher).

As a result of this architectural change, the new installation experience will be different than in the past:

  • Installing the next version of Dreamweaver CC will replace your installation of the June 2014 release. If you wish to continue using the June 2014 release, you will be able to download and reinstall it separately.
  • If you are using third-party extensions, they will need to be reinstalled. We expect a very small number of these extensions to be incompatible with the next version of Dreamweaver CC and require reinstallation. We have been working with extension developers, to help ensure a smooth transition to 64-bit support and expect the transition to go smoothly.

The next version of Dreamweaver CC will take a giant leap into the future, and having a 64-bit computer will ensure you’ll be able to have the best experience possible. Be sure to watch the live stream of Adobe’s MAX keynote to see what else is coming for Dreamweaver.

Thanks,
The Dreamweaver Team

Comments (0)
Aug
13

NEW Dreamweaver CC 2014 Tutorials

Posted by: | Comments (0)

Get to know the new features in Dreamweaver CC 2014 with the help of a whole bunch of recently published tutorials. From managing your websites to ensuring HTML5-compliancy, we’ve got a round-up of the latest learning materials available below.

Learn how to…

Use Live Highlight, modernized Live View and CSS Designer

Get a rundown on new features including how to edit and preview web pages with new Live View features in this Dreamweaver CC video tutorial.

1_livehighlight

Develop responsive and mobile sites

Take the next step in web design and learn how to create fully responsive site and mobile apps that play well with all screen sizes in this Dreamweaver CC video tutorial.

2_responsive

Use Code View to edit your web designs

Learn how to design web pages using the tools in Dreamweaver CC that are made for writing and managing code in this video tutorial.

3_codeview

Publish and manage your websites

Get up and running! Learn how to publish and manage your websites by following along with this Dreamweaver CC video tutorial.

4_publish

Enhance typography in your web designs

Make your designs bold. Get the rundown on how to add unique typography to your projects using Edge Web Fonts and Typekit integration in this Dreamweaver CC video tutorial.

5_fonts

Test and preview your work in Dreamweaver

Ensure you’ve got it right. Get acquainted with the different ways you can test and preview your work in this Dreamweaver CC video tutorial.

6_preview

Edit CSS properties visually

Learn how to leverage the visual CSS Designer Panel in Dreamweaver to control the look of your HTML content in this Dreamweaver CC video tutorial.

7_CSS

Create HTML5-compliant pages

Use the visual tools in Dreamwevaer CC to add HTML content that jives well in a variety of browsers in this video tutorial.

8_HTML5

Navigate Dreamweaver’s user interface to work faster

Find your way around Dreamweaver CC. Get to know the different panels, menu options, and editing views you can use to create web pages in this video tutorial.

9_interface

Looking for more?

You can find a whole lot more Dreamweaver CC learning content on Adobe Learn & Support center. Stay up-to-date on the latest tutorials by following us on Twitter @Dreamweaver or give us a ‘Like’ on Facebook! Happy coding!

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.