DWcourse: Adobe Dreamweaver Blog » tips 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 12-Step Program for CSS’oholics http://www.dwcourse.com/dreamweaver/12-step-program-css.php http://www.dwcourse.com/dreamweaver/12-step-program-css.php#comments Wed, 04 Aug 2010 20:07:39 +0000 dwcourse http://www.dwcourse.com/?p=1443

Hi, my name is Jim and I’m a CSS’oholic.

I remember my first floated div. It was heaven. Soon I escalated to CSS rollovers buttons and list-based menus. I was on top of the world!

And then, the downward spiral began. Before I realized what was happening, I found myself watching the sun come up over the lonely back alleys off the information superhighway as I hunted for one more CSS fix that would finally get my pixels aligned.

And then a friend took me to a CSS Anonymous meeting. I was skeptical at first but, thanks, to CA I’m on the road to recovery. Sure, I still face the occasional dawn with a mouse in one hand and an empty can of Red Bull in the other. I know I’ll always be a CSS’oholic but with the help of the 12 Step CSS Anonymous program at least I’m getting more sleep.

12 Steps to Conquering CSS’aholism

When faced with an impossible deadline and uncooperative CSS.

  1. Just say “NO!”  Why waste time making your page look perfect in Explorer 6? If the user cared what your pages look like, he wouldn’t be using IE6.  
  2. Back up: Now. And now! And NOW! When you stretch the limits of your CSS knowledge, the code will probably break before you do. When that happens a backup means you’ve only wasted time not trashed your site.
  3. Search: OK, I know Google is probably the first place you turn when faced with a CSS issue but do you use it effectively? Here are few suggestions:
    • Construct your query carefully: You’ll get better results and the very process of refining your query may lead to the solution.
    • Focus on newer results: Web design has come along way in a very short time. By limiting your results to the last year you can eliminate a lot of once good advice that’s gone bad.
    • Bookmark sites that come up regularly: There’s a reason you keep stumbling across sites like W3.org and W3schools.com.
  4. Exploit forums: Online forums are full of CSS enablers. I try to be active in forums where the people are knowledgeable and help and usually, when I need help, it’s offered.
  5. Tweet: It seems crazy to think you can get the answer to a complex question in the 140 characters Twitter allows but:
    • Distilling your issue into a question of 140 characters helps you focus on the real problem.
    • You don’t need THE answer; you just need the idea that leads to it.
      Of course, if you’re not active on Twitter, when you desperately need help probably isn’t the time to get started.
  6. Take a time out: What works for kids, works for adults. A brief break can help you approach the problem from a fresh perspective.
  7. Compare your code to code that works: If you’re customizing standard code (like Dreamweaver’s built-in Spry) invest in software such as BBedit (Mac) or TextWrangler (PC) that allows you to compare your copy of a document to a virgin, working copy. Then you’ll only need to worry about the code you know has changed.
  8. Get the big picture: Does your issue occur on one page or many?
    • If your pages share a fixed structure and only one page is broken, the problem is probably in the unique content of that page.
    • If the problem occurs throughout your site or in a particular section of your site then focus on the elements that are common to those pages.
  9. Narrow your focus:
    • Where’s the break? If everything after X is whacky, the problem probably occurs at or before X.
    • Which browser(s): Does the problem occur in one browser (think Internet Explorer) or multiple browsers? Since each browser has its own quirks, pinpointing the problem browser can help you locate a solution.
    • Validate: I’ve got nothing against a bit of invalid HTML or CSS if things still work but a validator can quickly locate unclosed tags, syntax issues and other potential problems.
  10. Start over: It’s tough to abandon several hours of work and start over or revert to a backup but, if you’ve spent several hours trying to solve a problem and haven’t, then you’ve probably spent those hours making it worse. The second time through the process you’ll know the issue (if not the solution) and, by working methodically and checking for the problem after each step, you’ll be able to pinpoint the problem if it happens again.
  11. Break something else: Sometimes it’s simpler just to accept that you can’t fix every issue and adapt your design accordingly. For instance, if you can’t get rid of a pesky border on the left, try adding one on the right.
  12. Write it down: When you learn a new bit of code, develop a new technique or discover a new resource, write it down. That way, the next time you fall off the CSS wagon at least at least the answer will be close at hand.

Post to Twitter

]]> http://www.dwcourse.com/dreamweaver/12-step-program-css.php/feed 0 Linking to a specific item on a page http://www.dwcourse.com/dreamweaver/link-to-specific-point-on-page.php http://www.dwcourse.com/dreamweaver/link-to-specific-point-on-page.php#comments Tue, 26 Jan 2010 03:03:00 +0000 dwcourse http://dwcourse.com/?p=798

When you've been creating web pages as long as I have, it's easy to start thinking you're hot stuff. Then along comes some perfectly obvious little html shortcut that you've been overlooking for a decade. It tends to humble you pretty quickly!

And judging by the response at the DreamweaverClub.com forum, I wasn't the only one surprised by this one. So I thought I'd share it with you.

As you know, when you link to a page using a normal link (such as <a href="http://www.dwcourse.com">DWcourse</a>) the link takes you to the top of the page. And, as many of you no-doubt also know, you can also insert an empty, non-link Anchor Tag (such as <a name="item" id="item"></a>) into your page and then link directly to the location of the Named Anchor within the page like this <a href="http://www.dwcourse.com#item">Link directly to item on DWcourse page</a>. To insert a named anchor in Dreamweaver select menu: Insert>Named Anchor.

Now here's the obvious html fact that that I'd been overlooking. You don't have to insert a named anchor into your page to link to a specific point within the page. You can link directly to any named object within your page. For instance, if you want to link to particular sub-sections of your page, each of which begins with an level 2 heading <h2> you can give each h2 a unique ID and link directly to it. In Dreamweaver you can assign an ID to an html object by selecting the object and typing the ID into the ID field in the Properties Inspector.

So, if your page looks like this:

<h1>Main Headline</h1>
<h2 id="section1">section 1 </h2>
content for section 1
<h2 id="section2">section 2 </h2>
content for section 2
<h2 id="section3">section 3 </h2>
content for section 3

You can link directly to section 2 from within the current page like this: <a href="#section2">Section 2</a> or from another website like this: <a href="http://www.dwcourse.com#section2">DWcourse Section 2</a>. No need to clutter up your code with an empty Named Anchor!

And, to point out the (now) obvious, the # (number sign) within a link refers to a named html object within the page, just as a # within a CSS selector refers to a named object.

Post to Twitter

]]> http://www.dwcourse.com/dreamweaver/link-to-specific-point-on-page.php/feed 1 Using the font tag in Dreamweaver CS4 http://www.dwcourse.com/dreamweaver/font-tag-dreamweaver-cs4.php http://www.dwcourse.com/dreamweaver/font-tag-dreamweaver-cs4.php#comments Mon, 03 Aug 2009 23:26:48 +0000 dwcourse http://dwcourse.com/?p=390

A lot of folks are whining and moaning because Dreamweaver CS4 now enforces the use of CSS styles rather than HTML attributes for formatting. One of the things this means is no more font tag (and its related attributes).

That's a good thing in my book. No more code like this:

<p><font color="#003399" size="5" face="Tahoma, Geneva, sans-serif">paragraph 1…</font></p>

<p><font color="#003399" size="5" face="Tahoma, Geneva, sans-serif">paragraph 2…</font></p>

<p><font color="#003399" size="5" face="Tahoma, Geneva, sans-serif">paragraph 3…</font></p>

Well you get the idea!

But CS4 has a dirty little secret and , against my better judgement, I'm going to reveal it:

IT'S STILL POSSIBLE TO USE THE DREADED FONT TAG!

The secret is CS4's Wrap Tag… and Edit Tag… commands, both of which are accessed from a pop-up menu that appears when you right+click on a selection in the Design window. Here's how it works:

  1. In the Design window select some text.
  2. Right+click on your selection and select Wrap Tag… from the pop-up menu.
  3. In the Tag Editor dialog type in <font> (or choose it from the tag list) and press the Enter key twice (once to "set" th tag and once to dismiss the dialog). The text will remain  selected.
  4. Right+click once again on your selection and select Edit Tag <font>… from the pop-up menu
  5. In the Tag Editor - font dialog, make your selections for Face, Size and Color and click OK.

If you look at your code you'll see something like this (shudder):

<font color="#FF0000" size="+2" face="Tahoma, Geneva, sans-serif">content</font>

That's all there is to it.

To edit an existing font (or some other HTML) tag:

  1. Select the entire tag by clicking within the tag in the Design window AND then selecting the tag from the tag listing in the status bar at the bottom of the Document window..
  2. Right+click on your selection and select Edit Tag <selected tag>… from the pop-up menu.
  3. Edit the tag attributes in the Tag Editor dialog and click OK.

Just don't tell anyone I told you how to do it.

As always, feel free to comment here or email me with your questions, comments and suggestions. And please follow me on Twitter (DWcourse) for additional Dreamweaver news and tips.

Post to Twitter

]]> http://www.dwcourse.com/dreamweaver/font-tag-dreamweaver-cs4.php/feed 14