DWcourse: Adobe Dreamweaver Blog » css http://www.dwcourse.com Tutorials, Tips & Help Adobe Creative Suite CS3 through CS6 Thu, 02 Feb 2012 21:34:05 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Using Google Fonts with Dreamweaver http://www.dwcourse.com/dreamweaver/using-google-fonts-with-dreamweaver.php http://www.dwcourse.com/dreamweaver/using-google-fonts-with-dreamweaver.php#comments Thu, 02 Feb 2012 18:53:42 +0000 dwcourse http://www.dwcourse.com/?p=2533

Google Fonts LogoSince the dawn of the web, designers have been frustrated by the lack of font choices. There were work-arounds, such as using images rather than html text or font replacement scripts such as sIFR or Cufón for display fonts. But they weren’t very satisfactory.

Today, a number of solutions exist including Google Fonts, Typekit (recently acquired by Adobe) and the CSS @font-face property.  In this article I’ll explain how you can use Google Fonts (which actually implements @font-face for you) in your Dreamweaver page.

 Adding Google Fonts to Your Site

Google Fonts Listings Figure 1: Google Fonts listings page

Visit the Google Font listings (fig. 1.) at http://www.google.com/webfonts#ChoosePlace:select and choose the font(s) you wish to use on your page.

For this example we will use the font Asap.

You can narrow you font search by using the search function or the various filters in the left sidebar.

Many of the fonts have multiple styles (bold, italic, etc) associated with them. You can show or hide the styles by toggling the See all styles/Hide all styles button to the right of the font listings.

When you find a font you want to use, select the Quick-use button. You will be taken to a new page verify your settings and copy the code needed to load the font into your page.

Google Fonts verify and copy codeFigure 2: Verify your setting and copy the code

  1. Choose the styles you want: If there is more than one style (Asap has four) associated with your font, make sure only the styles you wish to use are selected. For our font, Asap, we’ll choose Normal 400 and Bold 700.
    Note: As with any other resource (such as images), fonts take time to download so it’s best not to include any styles you won’t be using on the page and to use all downloadable fonts with discretion. Google’s Page Load Indicator will give you an indication of the impact your font choices will have on your page load time.
  2. Choose the character sets you want: In some cases additional character sets (foreign language or extended character sets) will be available. Again, choose only the character sets you will actually use. For Asap both Latin and Latin Extended are available. We’ll only use Latin.
  3. Add the code to your website(choose one of the two options below)
    1. To embed the font in a single HTML page
      Google offers three ways for you to add fonts to your website. The default choice is the Standard method, which we’ll use here.
      1. With the Standard tab selected, copy the code from the “Add this code to your website:” box to your clipboard.
 <link href='http://fonts.googleapis.com/css?family=Asap:400,700' rel='stylesheet' type='text/css'>
      1.  In Dreamweaver open the HTML document where you wish to use the font.
      2. Paste the code from your clipboard into the <head> of the HTML document. The location within the <head> is not critical but for consistency, I prefer to paste the code directly below the <title> tag.
    1. To embed the font in a style sheet
      This will allow the font to be accessed by multiple pages.
      1. On the Google Fonts Quick-use page under “Add this code to your website:” select the @import tab.
      2. Copy the code from the “Add this code to your website:” box to your clipboardA
@import url(http://fonts.googleapis.com/css?family=Asap:400,700);
      1. In Dreamweaver open the CSS document where you wish to add the font.
      2. Paste the code from your clipboard into the top of the page directly below the “@charset "UTF-8";” declaration.

Using the fonts in your CSS:

You can now use the font in your CSS style rules as you would any other font.  The simplest method is to copy and paste the code provided directly into your CSS.

font-family: Asap, sans-serif;

Notes:

  • Google fonts will not display in Dreamweaver’s Design View but will display in Live View or when previewed in the Browser.
  • Some font names (those with spaces or special characters in the name – such as ‘Times New Roman’) must be surrounded by single or double quotes.
  • It is important to provide a fall-back font option (we used sans-serif above) in case the Google font fails to load.
  • Dreamweaver does not automatically add your Google Fonts to its font selection menus (although they can be added using the Edit Font List option in the font selection menu). So, wherever you specify Google Fonts, you’ll need to type in the name.
  • If you do not specify a font-weight, the default (regular) weight will be used. You can specify the font weight using words or numbers as below.
font-family: Asap, sans-serif; font-weight: regular;
font-family: Asap, sans-serif; font-weight: 400;
font-family: Asap, sans-serif; font-weight: bold;
font-family: Asap, sans-serif; font-weight: 700;

Google Fonts tip

  • You can save a collection of fonts for future review by clicking the Add to Collection button to the right of the font display.
  • To review your collection, click the Review button at the bottom right of the page.
  • To save you collection for future reference click the Bookmark your Collection link at the upper-right of the font-listing page. Then copy the link and save it so that you can use it to access your collection in the future.

Post to Twitter

]]> http://www.dwcourse.com/dreamweaver/using-google-fonts-with-dreamweaver.php/feed 0 Creative Suite: Upgrade, Wait for Creative Cloud or ??? http://www.dwcourse.com/dreamweaver/adobe-creative-cloud-or-suite-upgrade.php http://www.dwcourse.com/dreamweaver/adobe-creative-cloud-or-suite-upgrade.php#comments Tue, 22 Nov 2011 15:00:31 +0000 dwcourse http://www.dwcourse.com/?p=2398

 Important Note: Adobe has announced a revised Creative Suite CS6 upgrade policy which includes owners CS3 and CS4. I'll revise these recommendations as soon as I"ve had the opportunity to fully consider the new policy.

This article is part of an ongoing series about Adobe Creative Cloud.

The recommendations

Here’s a summary of my recommendations along with links in case you prefer to skip the background information and jump directly to the recommendations relevant to your situation.

Owners of CS4 and earlier programs and suites: DECIDE BY DECEMBER 31

Owners of CS5 and CS5.5 programs and suites: WAIT

Current subscribers to Adobe products and suites: WAIT

If you’re considering buying an Adobe product: WAIT

If you absolutely have to have an Adobe product now: TRY, SUBSCRIBE AND WAIT

Behind the recommendations

Users of Dreamweaver and other Adobe Creative Suite programs often ask me if it’s worth purchasing the latest upgrade. In fact, some of the most popular posts in this blog deal with upgrade issues.

In the past, I’ve based my answers on a number of factors:

  • New features: Will new features save time or allow you to do your job better? For example, the much-improved handling of CSS in Dreamweaver CS4 made that a “MUST UPGRADE” while the focus on new mobile-related features in CS5.5 earned that upgrade a “PROBABLY NO” for the average user.
  • Cost: Upgrades offer significant savings over new purchases but are still a significant investment for most users. Adobe’s past policies often made skipping an upgrade cycle an attractive proposition.
  • The user’s current software: Single cycle upgrades often don’t add enough functionality to justify either the upgrade expense or the learning curve associated with them, offering more reasons to skip an upgrade.

Apparently a lot of folks have adopted the skip-an-upgrade policy. It’s become common enough that Adobe has announced a couple policies aimed at ending the practice: Creative Cloud and Single Cycle Upgrades. I’ve already written about Creative Cloud here and here. As for Single Cycle Upgrades, it’s worth quoting from Adobe's announcement:

For customers who prefer to remain on the current licensing model, we will continue to offer our individual point products and Adobe Creative Suite editions as perpetual licenses. With regards to upgrades, we are changing our policy for perpetual license customers. In order to qualify for upgrade pricing when CS6 releases, customers will need to be on the latest version of our software (either CS5 or CS5.5 editions). If our customers are not yet on those versions, we’re offering a 20% discount through December 31, 2011 which will qualify them for upgrade pricing when we release CS6.

Clearly Creative Cloud and Single Cycle Upgrades significantly change the upgrade equation for many users so I’ve decided to revisit my upgrade advice. Depending upon what programs or suites you own or subscribe to, it can get a bit tricky. But bear with me, I’ll offer the best advice I can based upon what we currently know and, as more information becomes available, I’ll update this post to stay current.

Owners of CS4 and earlier programs and suites

DECIDE BY DECEMBER 31

If you own a pre-CS5 version of an Adobe Product, you are faced with some difficult decisions and, to date, Adobe hasn’t offered sufficient information for you to make them. I recommend waiting until late December in hopes that Adobe will offer additional guidance for its current users before then.

While you wait for Adobe to offer more pricing guidance, I can offer some rough numbers for you to consider.

As mentioned earlier, Adobe is offering a 20% discount on products upgrades through the end of the year. In addition, to upgrade to CS6 when it is launched you will have to pay an additional upgrade fee. Let’s take a look at what that means for owners of Creative Suite Master Collection, Creative Suite Web Premium, Photoshop Extended and Dreamweaver:

Product Upgrade to CS5.5 Upgrade CS5.5 to CS6
(estimate)		 Total cost of CS6 upgrade
(estimate)		 Purchase of CS6
(estimate)
Creative Suite Master Collection CS2 $1,119 $600 $1,720 $2,600
Creative Suite Web Premium CS2 $649 $400 $1,050 $1,800
Photoshop Extended CS2 $279 $200 $480 $999
Dreamweaver CS2 $159 $100 $260 $399
Creative Suite Master Collection CS3 $1,119 $600 $1,720 $2,600
Creative Suite Web Premium CS3 $949 $400  $1,349 $1,800
Photoshop Extended CS3 $279 $200 $480 $999
Dreamweaver CS3 $159 $100 $260 $399
Creative Suite Master Collection CS4 $759 $600 $1,360 $2,600
Creative Suite Web Premium CS4 $949 $400  $1,349 $1,800
Photoshop Extended CS4 $279 $200 $480 $999
Dreamweaver CS4 $159 $100 $260 $399

Estimates are based upon Adobe’s current prices and past update pricing.

Arguments for upgrading: Clearly, if you expect to stay on the upgrade track, it makes sense to upgrade now and take advantage of the 20% discount. Keep in mind that you won’t have to upgrade to CS6 right when it debuts (or anytime for that matter). You can delay that purchase until the next full upgrade cycle is imminent (about two years) or until Adobe changes the rules again.

Arguments against upgrading: If you believe your current software will remain viable for another couple years it may make financial sense to delay upgrading and then subscribe to Cloud when upgrading becomes necessary.

If you feel that the currently announced $49.99 per month Cloud plan or the yet to be announced changes in the subscription pricing structure will make sense for you, there’s also no reason to upgrade now. The best strategy is to wait until Cloud is officially released and see what incentives Adobe offers to encourage people to transition to Cloud.

You should also keep in mind that, when a new version of software is announced, older versions tend to be discounted sharply. So, if you’re a gambler, you might want to wait and bet that, when the time comes to upgrade, you’ll be able to score a copy of CS5 and upgrade it to CS6. Of course, not all bets are winners.

Bottom line: Owners of Adobe programs who don’t upgrade regularly face a difficult decision. The new policies Adobe has put in place make it likely that you’ll end up paying more to be their customer. You need to gather all the information you can prior to the end of the year in order to make an informed decision.

Important: Things get hectic during the holiday season. If you plan to upgrade, make sure you don’t miss the end-of-the-year deadline.

Owners of CS5 and CS5.5 programs and suites

WAIT

You will qualify for upgrade pricing when CS6 is released. At that time you will be able to make an informed decision about whether to upgrade to CS6 or purchase a Creative Cloud subscription.

Bottom line: You have nothing to lose by waiting for the launch of CS6 and Creative Cloud before making a decision about whether to upgrade or convert to Creative Cloud.

Current Subscribers to Adobe programs and suites

WAIT

In its Creative Cloud FAQ Adobe states:

There will not be any immediate impact to your existing subscription. You will be able to continue to enjoy your subscription to the software titles you have selected. We will announce more information about Adobe Creative Cloud as it becomes available.

Adobe has indicated that current subscribers will be transitioned to some form of Creative Cloud and that current subscription pricing (Master Collection is $129 per month, Photoshop alone is $49 per month and Dreamweaver is $19 per month) will be adjusted to reflect the announced Creative Cloud pricing.

Bottom line: You have nothing to lose by waiting for the launch of Creative Cloud.

If you’re considering buying an Adobe product

WAIT

If you are planning to purchase an Adobe product but can delay the decision there is no incentive for you to act before Creative Cloud and CS6 are announced. At that time you can make an informed decision regarding the licensing model that is best for you.

Bottom Line: If you purchase a CS5.5 product prior to the launch of CS6, you’ll end up paying an upgrade fee to move to CS6. On the other hand, if you purchase now and then decide to move to Creative Cloud, you’ll be writing off your investment in CS5.5.

If you absolutely have to have an Adobe product now

TRY, SUBSCRIBE and WAIT

Since the launch announcements for Creative Cloud and CS6 are expected early next year, you’ll want to delay and minimize your expenses until the announcement.

  • Step one:  Download a trial of the software you need. Trials are full versions good for 30 days.
  • Step two: After 30 days convert your trial to a subscription. While you’ll pay a few months of subscription fees while you wait, that will likely be less costly than purchasing now and upgrading or subscribing later.
  • Step three: Once Creative Cloud and CS6 are launched decide which licensing model works best for you and purchase it.

Bottom Line: As much as possible, avoid purchasing Adobe creative programs until the launches of Creative Cloud and CS6.

Conclusions:

Clearly the best path for most Adobe customers is to sit tight and wait for additional information and the official launch of Creative Cloud and CS6 next year. In fact, a lot of users may decide to postpone the move to Cloud or CS6 until it becomes a necessity rather than jumping on board at the launch.

For owners of CS4 and earlier versions of Adobe software the decision is much more difficult and Adobe has so far failed you by not providing the information you need to make an informed decision. The time is now for this group of Adobe customers to demand more and better information from the company NOW!

Next up: Frequently Asked (and not always answered) Questions about Creative Cloud

Post to Twitter

]]> http://www.dwcourse.com/dreamweaver/adobe-creative-cloud-or-suite-upgrade.php/feed 0 Dreamweaver versus WordPress: Which should you choose? http://www.dwcourse.com/dreamweaver/dreamweaver-wordpress.php http://www.dwcourse.com/dreamweaver/dreamweaver-wordpress.php#comments Fri, 04 Nov 2011 19:33:16 +0000 dwcourse http://www.dwcourse.com/?p=2293

Dreamweaver versus WordPressCartoon © TOONrefugee.com

OK, I should admit up front that I'm not really going to answer that question because there is no simple, one-size-fits-all answer. But I do get a lot of questions from people who look at Dreamweaver and WordPress as competitors (I don't). So I thought I'd share parts of an email I got today along with my answers.

Do you think that knowing the fundamentals of Dreamweaver would be a help if I wanted to tweak a [WordPress] website to suit my needs.

I use WordPress myself on this blog and for a number of clients. It's a good choice for many applications. However, the answer to your question depends upon your goals and how you plan to use WordPress.

Installing WordPress (one click on some web hosts) and using a Theme (the WordPress term for templates) can be done without much/any knowledge of HTML/CSS, etc. A lot of functionality comes built in (some of it has a learning curve) and you can add a lot more with plugins and widgets. This lets you accomplish a lot of things that would be very difficult or impossible (especially for a novice user) in Dreamweaver alone.

However, once you start making changes in WordPress, things get very complex very quickly. The first level of changes - modifying the appearance of a theme - requires a fairly good understanding of HTML and CSS and I think Dreamweaver is a great place to learn those skills. I try to emphasize HTML and CSS in my courses but I've found that a lot of college Web Design instructors don't and that's a disservice to the students.

In any case, the more you know about HTML and CSS, the more successful you'll be modifying a WordPress theme. You should be aware however that the HTML/CSS in WordPress is much more complicated than what you're likely to build on your own in Dreamweaver (CSS beyond the basics is fairly complex and also evolving - I've worked with it for several years and I'm still learning).

When you get to the point of making major changes to an existing WordPress theme (or creating your own) you'll also need to become somewhat familiar with the PHP scripting language on which WordPress is built. That goes beyond what I teach in my course but Dreamweaver has become a fairly powerful PHP editor over the last couple versions and I expect this will continue in the future.

If you weren't a trained web designer/developer would knowing Dreamweaver enable you to manage someone else's website?

I consider the things you learn using Dreamweaver – HTML, CSS, uploading files to your server, etc. – the basic building blocks of web design/development. Knowledge in those areas will allow you to manage/maintain small, static HTML sites (which will help you to learn more site management skills). Managing more complex sites, especially ones based upon a Content Management System (CMS) such as WordPress is something that requires more experience (such as managing your own WordPress site) before you'll want to take responsibility for other people's sites.

You should also be aware that there are specialized areas such as e-commerce that are really specialties unto themselves and best left to experienced developers.

Final Answer

Dreamweaver and WordPress are not antagonists (although Adobe might disagree). They are just tools, each with their own strengths and weaknesses. The decision to use one, both (as I do) or some other tool (which I also do) should depend upon the level of your knowledge, your skill set and your goals.

Most importantly, whatever tools you use, the first step in learning to create and manage websites should be to focus on learning HTML and CSS. Your ultimate success depends upon it.

Let me know what you think

I've got a lot more to say about this topic and I'll return to the issue in future posts and I hope you'll join the conversation by submitting your opinions and questions using the comment form below.

Post to Twitter

]]> http://www.dwcourse.com/dreamweaver/dreamweaver-wordpress.php/feed 4 Highlighting the current page in a Spry menubar on a template-based page http://www.dwcourse.com/dreamweaver/highlighting-current-page-template.php http://www.dwcourse.com/dreamweaver/highlighting-current-page-template.php#comments Thu, 13 Jan 2011 03:10:11 +0000 dwcourse http://www.dwcourse.com/?p=1757

Dominate Dreamweaver Video

Duration: 7 minutes

Here's a follow up to my earlier post about highlighting the current page in a Spry menubar. In this video you'll learn a technique which will allow you to perform the same trick on a menubar which is locked by a template. In the process you'll learn to use the powerful but often overlooked Make Attribute Editable function in Dreamweaver templates.

If you enjoyed the information in this article, you may be interested in Dominate Dreamweaver. My 12-week online course which will take you from the basics of Dreamweaver through complex topics such as Spry menubars and on to building complete interactive websites. The cost for the course is $397 (or three payments of $149.99).

Click here for more information or use the button below to register now.

order-button

Post to Twitter

]]> http://www.dwcourse.com/dreamweaver/highlighting-current-page-template.php/feed 3