Friday, December 5, 2008

Eendar

Browsing through my copy of Web Design: Portfolios, I stumbled upon these gorgeous illustrations by eendar. I'm so in love with this artist's work! The colors and drawings ... so beautiful! Check out the artist's blog/online store also.

Turning List into a Navigation Bar

{A wonderful reference article by Roger Johansson.}

I’ve received a couple of requests for a description of how I created the navigation bar that is currently used on this site. The CSS used isn’t all that advanced, and I hadn’t really thought about describing it in detail, but after being asked about it I decided to do a write-up.

I’ve cleaned up the HTML and CSS slightly, so if you compare this to what is actually used on the site there will be some small differences. In case I have redesigned by the time you read this, check out the finished example to see what the menu looked like at the time of this writing.

The HTML

The markup is very simple. It’s an unordered list, with each link in a separate list item:

View Step 1.

Why use a list? Because a navigation bar, or menu, is a list of links. The best (most semantic) way of marking up a list of links is to use a list element. Using a list also has the benefit of providing structure even if CSS is disabled.

At this stage, with no CSS applied, the list will look like any old (normally bulleted) list, styled only by the browser’s defaults.

I’ve given id attributes to the ul and li elements. The id attribute for the ul element is used by the CSS rules that style the entire list. The li elements have different id values to enable the use of CSS to highlight the currently selected link. This is done by specifying an id for the body element. More on that later.

The CSS

I’ll describe the CSS I’ve used to style the list in a step-by-step fashion.

First of all, I set the margins and padding of the list and list items to zero, and tell the list items to be displayed inline:

  1. #nav {
  2. margin:0;
  3. padding:0;
  4. }
  5. #nav li {
  6. display:inline;
  7. padding:0;
  8. margin:0;
  9. }

View Step 2

This will make all the links display one after another on the same line, as if the list wasn’t there. It will also remove the list bullets, since they are only displayed when display:list-item (the default display mode for list items) is used. Some browsers are said to incorrectly display the list bullets even though display:inline has been applied to the list items. I haven’t seen this happen in any of the browsers I tested in, but if you want to make sure that no browsers display list bullets, you can add list-style-type:none to the rule for #nav.

Next, it’s time to start styling the menu tabs. I do this by adding styles to the links, not to the list items. The reason for that is that I want the entire area of each tab to be clickable. First a bit of colour to make the changes more obvious:

  1. #nav a:link,
  2. #nav a:visited {
  3. color:#000;
  4. background:#b2b580;
  5. }

View Step 3.

Note that I’m styling the normal and visited states of the links to look the same. the next step is to add a bit of padding to the links:

  1. #nav a:link,
  2. #nav a:visited {
  3. color:#000;
  4. background:#b2b580;
  5. padding:20px 40px 4px 10px;
  6. }

View Step 4.

That’s a bit better. But there is a potential problem that isn’t visible here. Since the links are inline elements, their vertical padding will not add to their line height. It’s easier to see this if the ul element has a background, so I’ll add a background colour and a background image:

  1. #nav {
  2. margin:0;
  3. padding:0;
  4. background:#808259 url(nav_bg.jpg) 0 0 repeat-x;
  5. }

View Step 5.

Oops. Now the links are sticking out of the list element. To fix this, I’ve turned the links into block boxes by floating them to the left. I’ve also set their width to auto, to make them shrink to fit their content:

  1. #nav a:link,
  2. #nav a:visited {
  3. color:#000;
  4. background:#b2b580;
  5. padding:20px 40px 4px 10px;
  6. float:left;
  7. width:auto;
  8. }

View Step 6.

Adding display:block to the CSS rule for the links would also have made them block boxes, but since a floated element automatically generates a block box, that isn’t necessary.

As you may have noticed, the background disappeared when the links were floated. That’s because floated elements are taken out of the document flow, which causes the ul element containing them to have zero height. Thus, the background is there, but it isn’t visible. To make the ul enclose the links, I’ve floated that too. I’ve also set its width to 100%, making it span the whole window (except for the padding I’ve given the body element in this example):

  1. #nav {
  2. margin:0;
  3. padding:0;
  4. background:#808259 url(nav_bg.jpg) 0 0 repeat-x;
  5. float:left;
  6. width:100%;
  7. }

View Step 7.

To visually separate the links from each other, I’ve added a right border to the links. Then, to give the first link a left border as well, I’ve used a :first-child pseudo-class to apply a rule only to the link in the very first list item. I’ve also added top and bottom borders to the ul element:

  1. #nav {
  2. margin:0;
  3. padding:0;
  4. background:#808259 url(nav_bg.jpg) 0 0 repeat-x;
  5. float:left;
  6. width:100%;
  7. border:1px solid #42432d;
  8. border-width:1px 0;
  9. }
  10. #nav a:link,
  11. #nav a:visited {
  12. color:#000;
  13. background:#b2b580;
  14. padding:20px 40px 4px 10px;
  15. float:left;
  16. width:auto;
  17. border-right:1px solid #42432d;
  18. }
  19. #nav li:first-child a {
  20. border-left:1px solid #42432d;
  21. }

The :first-child pseudo-class is not recognised by Internet Explorer for Windows, so the first link won’t have a left border in that browser. In this case, that isn’t a major problem, so I’ve left it like that. If it’s really important to you, you’ll need to add a class to the first list item (or the link in it), and then use that to give the link a left border.

View Step 8.

Next I’ve changed the way the link text is displayed by removing the underlining, making the text bold, specifying font size, line-height, and a different font family, making the text uppercase, and adding a little bit of drop shadow. The drop shadow is created with the text-shadow property, a CSS3 property that is currently only supported by Safari and OmniWeb:

  1. #nav a:link,
  2. #nav a:visited {
  3. color:#000;
  4. background:#b2b580;
  5. padding:20px 40px 4px 10px;
  6. float:left;
  7. width:auto;
  8. border-right:1px solid #42432d;
  9. text-decoration:none;
  10. font:bold 1em/1em Arial, Helvetica, sans-serif;
  11. text-transform:uppercase;
  12. text-shadow: 2px 2px 2px #555;
  13. }

View Step 9.

To give some visual feedback when the links are hovered over, I’ve given their :hover state different text and background colours:

  1. #nav a:hover {
  2. color:#fff;
  3. background:#727454;
  4. }

View Step 10.

In the final step, I’ve added rules that will make the selected link look different than the others, to show visitors where they are on the site.

In case you haven’t seen an example of specifying an id attribute for the body element to style the “current” navigation tab differently before, that’s what the first two rules do. In the examples linked to from this article, I’ve set id of the body element to “home”, which makes the “Home” tab the current one. Changing it to “about” would make the “About” tab the current one, and so on.

I’ve also made the selected link stay the same when it’s hovered over. It can be argued that the current menu item should not be a link at all. In this case, I’ve chosen to leave the link in the markup and use CSS to remove the visual feedback on hover.

To give some visual feedback when you click on one of the links, I’ve given the :active state of the links the same styling as the selected link:

  1. #home #nav-home a,
  2. #about #nav-about a,
  3. #archive #nav-archive a,
  4. #lab #nav-lab a,
  5. #reviews #nav-reviews a,
  6. #contact #nav-contact a {
  7. background:#e35a00;
  8. color:#fff;
  9. text-shadow:none;
  10. }
  11. #home #nav-home a:hover,
  12. #about #nav-about a:hover,
  13. #archive #nav-archive a:hover,
  14. #lab #nav-lab a:hover,
  15. #reviews #nav-reviews a:hover,
  16. #contact #nav-contact a:hover {
  17. background:#e35a00;
  18. }
  19. #nav a:active {
  20. background:#e35a00;
  21. color:#fff;
  22. }

View Step 11, the finished navigation menu.

That’s it. This step-by-step tutorial makes the whole thing look more advanced than it really is. View source on the final example to see the complete set of CSS rules. By the way, with a couple of small exceptions (the left border on the first link, and the text shadow), this works in just about any browser, even Internet Explorer (version 5 or newer).

I hope you’ve been able to follow along well enough to be able to create your own navigation menu. The styling possibilities are almost endless.

Roger Johansson

Thursday, December 4, 2008

Wednesday, December 3, 2008

Creating HTML Emails in Dreamweaver

My Dreamweaver teacher Piper Nilsson suggested this Adobe article when I asked her how to create a marketing email.

And here's another great set of tips on how to send HTML email.

~~~~~~~~~~~~~~~~

Sending HTML pages through e-mail has become a popular way to communicate on the Internet. These HTML pages can be designed in Dreamweaver and then inserted into an e-mail program. Different e-mail programs will have different processes for sending HTML e-mail; some, however, may not support HTML e-mail at all.

BASIC PROCESS

Inserting the HTML page into e-mail involves several steps, as outlined below:

1. In Dreamweaver

1. Create the HTML page. Note the Special considerations in Dreamweaver below before designing the HTML e-mail.

2. Upload the HTML page's dependent files (the images and other page elements) to a publicly-available web server.

3. Change any dependent file's path to absolute. See Special considerations in Dreamweaver below to learn more about absolute paths.

2. In the e-mail client


Send the HTML page as e-mail.

IN DREAMWEAVER

You must configure the HTML page and its dependent files properly before inserting it into e-mail.

Creating the HTML page

1. Open a new document in Dreamweaver. The document must be a static HTML page.

2. Save the file within an existing Dreamweaver site. This site must also contain all the HTML document's dependent files.

3. Design the HTML page, using document or site-root relative paths for dependent files. Save the HTML page itself and all the dependent files in the same folder (at the root level). In other words, don't put the images or other content in subfolders?every item, including the HTML page, should be at the site root level (so you can more easily determine the absolute path to the items).

4. Upload the dependent files to a publicly-available web server. (You can also upload the HTML page although uploading it is not necessary for this method. If you upload the HTML page using Dreamweaver's FTP program, choose to include dependent files when prompted.)

5. Determine the absolute paths to all dependent files. Since the dependent files are at the root level, determining the absolute path will be fairly straightforward in most situations. For example, if the web site is hosted athttp://www.mysite.com, then an image called image1.gif should have an absolute path ofhttp://www.mysite.com/image1.gif.

6. Change any dependent file's path to its absolute location on the web server.

Note: Make sure that the paths for the HTML page's links are also absolute.

IN THE E-MAIL CLIENT

So many e-mail applications are available that instructions cannot be offered for all of them in this TechNote. Below, however, you will find example steps for sending an HTML page through e-mail in Microsoft Outlook 2000 (for Windows). The process of sending HTML through e-mail in other programs may differ from the steps below.

Note: See Special considerations in the e-mail program to evaluate whether your e-mail program will support this technique.

Inserting HTML into e-mail in Outlook 2000 Example

1. In Outlook, choose Tools > Options.
2. Click the Mail Format tab.
3. In the Send in this message format pop-up menu, choose HTML.
4. Click Settings.
5. Select the option to Send pictures from the Internet with messages.
6. Click OK.
7. Click the New button to open a new message.
8. Choose Insert > File.
9. Browse to find the Dreamweaver HTML file on your hard drive or disk. Click the HTML file once to select it.
10. Before clicking Insert, click the drop-down arrow next to the Insert button.
11. From the submenu, select Insert as Text.
12. Complete your e-mail options.
13. Click Send.

Alternative method for sending an HTML page using Outlook 2000 (Windows)

Outlook 2000 offers another method for inserting HTML into e-mail, which may allow for internal anchors and background images. However, the success of this method varies, depending upon: 1) the e-mail client used by your recipients and 2) the settings the recipients have chosen in their e-mail client. HTML pages which are framesets cannot be sent as e-mail using this method.

In this second Outlook 2000 method, both the HTML page and its dependent files must all be uploaded to a publicly-available server. Moreover, the paths to the dependent files do not have to be absolute.

Sending a Favorites web page through e-mail in Outlook 2000

1. Set the default message format in Outlook 2000 by following steps 1 - 6 in Method 1 above.

2. Choose Favorites > Open Favorites. Select the Internet Shortcut to your HTML page on the server if it is listed.

Note: If it is not listed in Favorites or a subfolder in Favorites, create an Internet Shortcut to your HTML page using the following steps:

1. Click Configure in the Favorites dialog box.
2. Choose File > New > Shortcut.
3. In the text box, type the URL (absolute path) of your HTML file located on the server.
4. Click Next.
5. Type a name for your HTML page shortcut in the text box.
6. Click Finish.
7. Close the Configuration dialog box.
8. Select the Internet Shortcut you just created in the Favorites folder while in the Favorites dialog box.
9. Click Open.
3. Choose Actions > Send Web Page by Email.
4. Fill in the e-mail addresses of your recipients.
5. Change the subject matter if you wish.
6. Click Send.

Note: Netscape Messenger users must choose View > View Attachments Inline to be able to see the HTML e-mail content.

SPECIAL CONSIDERATIONS IN DREAMWEAVER

As you design your HTML page, keep in mind that:

* Absolute paths for dependent files

All paths to the dependent files must be absolute. Absolute paths provide the complete URL of the dependent files, including the protocol to use (usually http:// for Web pages). For example, http://www.macromedia.com/dreamweaver/technote.gif is an absolute path to an image on a server. To have an absolute path, a dependent file must be uploaded to a publicly-available server.

* Some HTML features not supported in e-mail

Currently, e-mail HTML will not work if the page is a frameset. Also, internal anchors will not function nor will background images appear in the e-mail.

SPECIAL CONSIDERATIONS IN THE E-MAIL PROGRAM

* E-mail protocols

E-mailing HTML pages requires that your e-mail application support standard mail protocols, such as:

o POP (Post Office Protocol)
o IMAP (Internet Mail Access Protocol)
o SMTP (Simple Mail Transfer Protocol)
o MIME (Multipurpose Internet Mail Extensions)

Note: Consult your e-mail program instructions or, if you are in a corporate environment, your company's Information Technology department to determine if your e-mail program supports these mail protocols.

* E-mail settings on the receiving end

Your e-mail recipients will also need to set their e-mail application's MIME type correctly to receive HTMLe-mail. See What is MIME and what does it do? (TechNote 14478) for an explanation of MIME content types.

ADDITIONAL INFORMATION

For more information about sending HTML through e-mail, consult this general-information article: All about HTML Email, Carter Stowell, Webmonkey: The Web Developer's Resource, 26 February 1998.

Permanent Link: http://www.adobe.com/go/tn_15200