DWcourse: Adobe Dreamweaver Blog » Tutorials 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 Web Images and Photoshop Smart Objects in Dreamweaver http://www.dwcourse.com/dreamweaver/images-photoshop-smart-objects.php http://www.dwcourse.com/dreamweaver/images-photoshop-smart-objects.php#comments Mon, 21 Nov 2011 15:00:23 +0000 dwcourse http://www.dwcourse.com/?p=2368

I've had a number of questions about web images and Dreamweaver recently so I thought I would share this video from my Dominate Dreamweaver Course.

Inserting Photoshop Smart Objects into web pages with Dreamweaver and using the Image Preview dialog to explore the JPEG, GIF and PNG image formats and the related options. Duration 17:12

(And yes I have trouble deciding whether to pronounce GIF with a hard or soft G!)

Post to Twitter

]]> http://www.dwcourse.com/dreamweaver/images-photoshop-smart-objects.php/feed 0 Mobile-friendly web pages with Dreamweaver CS5.5 http://www.dwcourse.com/dreamweaver/dreamweaver-multiscreen.php http://www.dwcourse.com/dreamweaver/dreamweaver-multiscreen.php#comments Thu, 11 Aug 2011 17:33:34 +0000 dwcourse http://www.dwcourse.com/?p=2270

Lately I've been working the CSS3 media queries in order to provide a better user experience for folks viewing my sites on mobile devices. My first effort was a Free Dreamweaver Multiscreen Template and I've followed that up with Creating a mobile-friendly web page with Dreamweaver CS5.5 which was just posted at DreamweaverClub.com. I hope you'll check it out.

Post to Twitter

]]> http://www.dwcourse.com/dreamweaver/dreamweaver-multiscreen.php/feed 0 Adding a Colorbox jQuery slideshow in Dreamweaver http://www.dwcourse.com/dreamweaver/colorbox-jquery-slideshow.php http://www.dwcourse.com/dreamweaver/colorbox-jquery-slideshow.php#comments Mon, 21 Mar 2011 02:45:15 +0000 dwcourse http://www.dwcourse.com/?p=1899


Click logo above to play video…

Clarifications:

1. Colorbox may not preview correctly in Live View in some versions of Dreamweaver. In that case use Preview in Browser instead. It should dispaly correctly in all browsers.

2. Colorbox comes with five example files which demonstrate various appearance settings. In step 2 below, choose the example file you wish to mimic and copy the colorbox.css and images folder from that example.

3. Each color box example demostrates a variety of settings (Elastic Transition, Fade Transition, etc.). These correspond to the rel="exampleX" attribute you add your link in step 10 below. Here is a list of the possible rel attributes and the corresponding Colorbox effect:

  • example1: elastic transition (popup smoothly transitions to match size of image)
  • example2: fade transition between image
  • example3: no transition with container set to 75% of screen size
  • example4: auto playing slide show
  • additional examples are available for non-image content but that is beyond the scope of this tutorial.

Summary of the video:

Before you begin: Download the Colorbox zip file at http://colorpowered.com/colorbox/. When the file is unzipped, it will create a colorbox folder containing the following folders:

  • colorbox
  • colorbox.ai
  • content
  • example1
  • example2
  • example3
  • example4
  • example5

Plus the files colorbox.ai and README.

  1. In Windows or the Mac Finder (not Dreamweaver) locate your local site folder and create a new folder colorbox inside it.
  2. Copy the following downloaded files into the new colorbox folder in your website that you created in step 1:
    • From the colorbox folder:
      jquery.colorbox-min.js
    • From the exampleX folder (X is the example you are trying to emulate):
      colorbox.css
      the complete images folder
  3. In Dreamweaver, create and save the file that will contain your Colorbox slide show (I called mine colorbox.html).
  4. Create a folder (I called mine slides) in your local site  to hold the images for your slide show and place your web-formatted images in it.
  5. In the code, in the <head> of your of your document: In the Insert palette, click the script icon and insert the link to the jQuery file hosted by Google at:
  6. In the code, in the <head> of your of your document immediately following the script tag you inserted above: In the Insert palette, click and link to the jquery.colorbox-min.js file.
  7. In the CSS Styles palette, click the Attach Style Sheet (link) icon and link to the colorbox.css file.
  8. Cut and paste the javascript code below into the <head> of your document BELOW the scripts added above (Colorbox will not function properly if the scripts do not appear in the correct order in the code.):
  9. Insert the link(s) to your images.
  10. Add the

    attribute to your links using the Quick Tag Editor (right click on the <a> tag in the status bar). You can use any value (not just example1) but be sure to give each link the same rel attribute so that they are all part of the same slide show.
  11. Give each link a title (which will be used as the caption in Colorbox) by selecting the link and typing the title into the Title field in the properties inspector.
  12. Switch to Live View and test your slide show.

Post to Twitter

]]> http://www.dwcourse.com/dreamweaver/colorbox-jquery-slideshow.php/feed 0