Archive for Database Programming

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)
Jul
14

Be Part of the Story!

Posted by: | Comments (0)

Dreamweaver + You = Great stories

We’re working hard to get the word out about the stories behind the great work our users are doing with Dreamweaver CC and we’re hoping you can help.

If you’ve recently created a website or app with Dreamweaver CC that you think is worth recognition, let us know. We’d like to help share with the world the great work you’ve done to inspire others to do the same.

So, how can I get involved?

It’s quite simple. All you need to do is complete a form and we’ll be in touch to bring your story to life.

What’s in it for me?

The stories which we publish will receive public recognition by way of promotion on Adobe social channels, and a special thank you will be sent to you in the mail. Not to mention, it’s likely that this new found attention to your work will result in an uptick in traffic. We’d call this one a win-win. Agree? Then get started by completing this simple form to be part of the story!

We can’t wait to see your innovative work and help give it the attention it deserves with exposure to millions of our fans and followers.

Best,

Tareq Aljaber

Product Marketing Manager

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)

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.