2007 Web Design Articles
Web Design, HTML, and XML Articles from 2007
Related Resources Current Articles
CSS Cheat Sheets
These cheat sheets will help you learn to use CSS both for basic styles and to create great layouts for your Web pages. Free CSS cheat sheets for you to download and print out.
Use Your Search Statistics to Improve Your Site
Many Web developers use their website statistics to evaluate how their pages are doing and improve their sites. But one statistic that is often overlooked is the search results. The statistics your search engine provides can be a valuable tool for improving your website.
Finding a Web Hosting Provider
The first step to building a Web page or website is to find a Web hosting provider. There are a number of things you should think about when choosing your Web hosting provider
Before You Start Building a Website
Learn what you need in order to build a website for your business or for pleasure. There is more to building Web pages than just learning HTML and CSS. You need a hosting provider, a domain name, and there are legal and privacy issues to consider.
Pros and Cons of Image Maps
Image maps used to be extremely popular. But now you hardly ever see them. It could be that they became less popular as other features such as CSS came into the foreground. Or it could be that they are useful only in certain situations and should generally be avoided.
Using Search and Replace in Dreamweaver
It's easy to use Dreamweaver to do a search and replace over either the current file, or every file in your Web site. Follow the instructions in this tutorial to learn how to make changes to one page or your entire Web site.
Using Search and Replace in Expression Web
It's easy to use Microsoft Expression Web to do a search and replace over either the current file, or every file in your Web site. Follow the instructions in this tutorial to learn how to make changes to one page or your entire Web site.
Using Search and Replace in FrontPage
It's easy to use Microsoft FrontPage to do a search and replace over either the current file, or every file in your Web site. Follow the instructions in this tutorial to learn how to make changes to one page or your entire Web site.
Using Search and Replace in HomeSite
It's easy to use HomeSite to do a search and replace over either the current file, or every file in your Web site. Follow the instructions in this tutorial to learn how to make changes to one page or your entire Web site.
Why People Plagiarize Web Page Content
Web writers are always fighting plagiarism of their content. This article is a compilation of some of the best excuses and responses to requests to remove plagiarized content - written by Elizabeth Weintraub of About.com Home Buying and Selling with commentary by Jennifer Kyrnin.
Create a Web Photo Album in Dreamweaver
It's easy to use Dreamweaver to create a Web photo album of all the pictures in a directory. The Dreamweaver Web Photo Album wizard makes it easy.
Writing Great Alt Text
Alternative text is an important (and required) attribute on all your images. But it can be tempting to just write simple text or leave the attribute blank. Alt text is used for more than just accessibility, and if you get good at writing alt text, your pages will be more usable.
What's the Difference Between @import and link for CSS?
There are two ways to load an external style sheet into your Web pages - @import or link. But why would you use one or the other? This FAQ explores the original purpose of both methods of including style sheets and then explains some of the common reasons for choosing one over the other or using a combination of both.
What is Search Engine Optimization (SEO)?
If you want your Web page to rank well in search engines, you need to learn how to do search engine optimization or SEO. Search engine optimization is a technique where you make your pages as easy to read by search engine robots as it is for your customers to read. And once your pages are easy to read by the robots, they can determine what your page is about, and rank it in their database.
Create a Pull Quote with HTML and CSS
Pull quotes can make your Web page content look more literary. A pull quote is something you see in magazines - where a short part of the content is pulled out and enlarged to attract attention to the content. You can make basic pull quotes with the blockquote element, but with CSS you can make it even more interesting.
How to Add CSS Style Sheets in Dreamweaver
It's easy to use Dreamweaver to add CSS style properties to your Web pages or create entire CSS style sheets for use on your Web site.
How to Add CSS Style Sheets in Expression Web
It's easy to use Expression Web to add CSS style properties to your Web pages or create entire CSS style sheets for use on your Web site.
Alt Text on Image Maps
One of the biggest problems with image maps is that they can be very inaccessible. One way to make them at least a tiny bit better is to add alternative text to each item. With alt text and titles on the image map clickable areas, your maps will be better received by your customers.
How to Create a Rollover Image in Dreamweaver
It's easy to create a rollover image with Dreamweaver. This tutorial shows how to do it in Dreamweaver CS3, but the instructions are identical for versions back through Dreamweaver MX, including MX 2004, and Dreamweaver 8.
Flow in Design - Layout and Artwork that Conveys Motion
Visual flow carries the viewer's eye through the document. Using obvious flow elements like arrows or numbers is the most common way Web designers use flow, but there are other types of elements that can be used and mis-used to direct your readers to move along a specific path. The steps in this tutorial will show you examples of good and bad flow and help you learn the vocabulary of visual flow in design.
How to Create a Portfolio
Creating an online portfolio of your best work is a very important way to show what you are capable of. Portfolios provide details of your skills in design and development and are often critical to finding work. But a Web portfolio is more than just a list of screen shots and these tips will help you create a Web portfolio that will work for you.
Differences Between Dreamweaver 8 and Dreamweaver CS3
Learn some of the practical differences between Dreamweaver 8 and Dreamweaver CS3 to help you decide whether or when to upgrade. What new features are must-haves and what features can you live without?
Prioritizing Web Projects
What to do when everything you're working on has top priority. How to prioritize Web projects.
CSS Cheat Sheet
When you're starting a Web page from scratch, there are some simple styles that you should define right away for your designs. With this sample style sheet and CSS cheat sheet, you can make sure you get the basic styles defined every time so that you're spending your time creating the custom styles that make your design unique.
Alignment in Web Page Layouts
Most Web developers, when they think of alignment think of the align attribute or the CSS float property or something like that. But the alignment of the elements on your page is just as important as whether your text is justified or your image is floated to the left. Alignment provides the structural framework of a design. The alignment can affect the mood of the page as well as how effective it is at getting its message across.
Make Fancy Headings with CSS
Plain HTML headings are ugly. There's no getting around it. H1 is big, bold, and ugly, and h2 isn't much better. H3 isn't so bad, but since it's so close to bold it's kinda pointless, and h4, well, that really is bold. H5 and H6 are typically too small to read. So why use headings? Well, search engines like them. And with CSS you can make them look as pretty as you please with text styles, borders, and even images.
How to Evaluate a Web Editor
When you're looking for an HTML editor it can be easy to get suckered by the price - many people focus on free editors, while others assume that if it costs a lot it must be good. These are the criteria I use to rank HTML editors. Editors with more of the features or more of the important features get a higher ranking.
CSS Border Styles
Use CSS to change the style of borders around your elements.
Add and Edit Images in Dreamweaver
Dreamweaver MX 2004 adds a new feature to images - editing. Now you can use Dreamweaver MX 2004, Dreamweaver 8, or Dreamweaver CS3 to edit your images without needing to move to a separate image editing program. This tutorial shows you how.
Common Problems Using CSS Descendant Selectors
Descendant CSS selectors are getting much more popular in CSS style sheets because they give you a lot more control over precisely which elements you want to style. Add to that that child selectors and sibling selectors weren't widely supported until recently, and that adds to their popularity. But descendant selectors often select more than what you intend - with strange results.
Nesting HTML Tags
When you write HTML from scratch, it's very common to need to put multiple tags around one block of text. This is called nesting. But it's easy to do it incorrectly if you're not paying attention, and this can result in invalid HTML and sometimes pages that don't display correctly.
CSS Initial Caps
Learn how to use CSS to create fancy initial caps for your paragraphs. There is even a simple image replacement technique to use a graphical image for your initial cap.
Emphasis in Web Design
Trying to make everything on a Web page stand out means that nothing will stand out. Good designers learn to use emphasis wisely so that the important parts of the layout dominate without overwhelming and there is a visual hierarchy that leads the reader through the Web page. You do this through the use of design emphasis.
Dreamweaver CS3 New Files Menu
Creating a Web page in Dreamweaver CS3 can be overwhelming because there are so many choices in the New Files menu. This gallery will show you how to get the most out of the Dreamweaver CS3 new files window.
Types of Web Hosting
When people think of Web hosting, they often think that it's a very simple thing - you just have space on a machine that hosts your Web site. But there's more to it than that. You can get standard Web hosting, free Web hosting, colocation, ecommerce, and dedicated or shared hosting. And these all mean something different.
Common Validation Problems and How to Fix Them
HTML validators can be very intimidating to the novice Web developer. But if you learn a few simple steps you can turn the W3C validator and others like it into a valuable tool for solving problems with your Web pages.
What Education and Experience is Required to be a Web Developer?
Becoming a professional Web designer or developer is different for nearly everyone who does it. Some people start out building sites for friends and family and teach themselves all they need to know while others spend years in school learning the ropes and others learn the ropes from someone with more experience to guide them.
6 Ways to Get Unblocked
Web designers, like any creative person, can suffer from writers block. But because of our work, there are many ways you can learn to deal with the blocks and get unstuck. These six suggestions have worked for me to get new design ideas in the past and will work again.
Pros and Cons of Adding Sound to Web Pages
Sound on Web pages can be a contentious issue. Some Web designers feel that it should never be used on Web pages, while others feel that there is always a use for sound to improve and enhance designs.
HTML and CSS in Email
HTML email is very widespread. Most email clients use it and it makes email a lot easier to read and understand the messages. But HTML email can have drawbacks. If you use HTML to write or format messages you should be aware of the issues and make an informed decision.
CSS inheritance is what defines how styles will be applied to child elements in a document. Inheritance in CSS allows the Web designer to define one set of styles for a top-level, parent element and have child elements beneath it carry the same styles, without explicitly calling them out.
What is Graceful Degradation and Why Should Web Designers Care?
Creating a Web site with the most advanced features in Ajax, CSS, and XHTML can be a lot of fun. But the first time your page is viewed in IE 5 or a cell phone you end up with a page that is hideous at best, and often unusable. Your goal shouls be to write Web pages that degrade gracefully - they still work even on a cell phone or in older browsers.
10 Tips to Promoting Your Web Design Business
If you're running or thinking of starting a Web design business, you should know that getting customers is more than just putting up a Web site and waiting for them to roll in. There is a lot of work involved and you have to try hard to get customers and keep them. These 10 tips will help you promote your Web design business and not lose customers through silly mistakes.
Mathematics, Seashells, and Web Design
Many designers would like to believe that there is no way to scientifically quantify why things look good. It's just a feeling. But the Greeks came up with a formula for classical beauty that is used to this day. And if you use that same formula on your Web pages, you'll have a design that is pleasing and understandable to the majority of your audience.
How to Set up Dreamweaver to Transfer Files
In order to use Dreamweaver to transfer files from your hard drive to your Web site, you need to set up Dreamweaver to do file transfer. The most common method of file transfer is FTP, and this tutorial will show you how. There are also several other methods that Dreamweaver provides to help you manage your files, and this article will show how they are set up.
Why Use DOCTYPE Declarations
Letting the Web browser know what to expect from your Web page HTML is a good idea. Some browsers will change how they display a Web page depending upon the presence or absence of a DOCTYPE definition. And Internet Explorer 6 has a special feature all it's own for handling issues with DOCTYPE.
What Kind of Web Developer Are You?
If you figure out what type of Web development you prefer you can focus on that and become more of a master of the skills required. There are three types of developer: content builder, designer, and programmer. What type are you?
What is HTTPS - Why Secure a Web Site
HTTPS or HTTP over SSL is a way to encrypt data sent and received over the Web so that monetary and other sensitive transactions are secure. If you are going to run a store on your Web site and collect credit card or other monetary data, you should use an HTTPS secured server so that the data is secure.
Changing the Design of a Page for Wireless Devices with the Handheld Media Type
First use a media type to define a style sheet for handheld or wireless devices. Then once you've decided on the style sheet, use these tips to create a page that is styled so that wireless devices get the most out of the design.
How to Write Web Pages for the iPhone and Other Wireless Devices
If you're going to build Web pages that can be viewed on cell phones like the iPhone, you should be aware of some of the drawbacks to these devices so that your site is not impossible to use. These tips will help you build Web pages that are either designed solely for cell phones and wireless handheld devices or help you design pages that adapt depending upon what type of device is viewing it.
Anatomy of an RSS File
RSS stands for Really Simple Syndication and it's called that because it's one of the easiest XML formats to use - there is very little to it. This article will walk you through how to write your own RSS file so that you can syndicate your site even if you don't have a blog or don't want to buy the Dreamweaver extension to write RSS.
How to Add RSS Feeds to a Web Site with Dreamweaver
Sometimes, it seems like the only way to get an RSS feed is to have a blog or to write the RSS by hand. But there is a Dreamweaver Extension you can use to build RSS feeds for your Web site. This extension will build feeds manually or take content from your existing Web pages to build the feed.
But I Want That Font - Standard Fonts on Windows and Macintosh
Changing the font family to your favorite font will make the page look great in your browser, but if your readers don't have that font, you might be surprised at what it looks like to them. Use the fancy fonts as you please, but you should always have a standard font near the end of your list, and a generic font choice last.
Solving Problems in Web Design
Building Web pages can be very challenging because of all the possibilities for problems. Having a plan for finding the problems and fixing them makes them easier to deal with when you come across problems.
Writing HTML Code in Dreamweaver
Dreamweaver is more than just a WYSIWYG editor, it also has a very powerful HTML editor built in. These tips will help you maximize your efficiency when using Dreamweaver to edit HTML code directly.
Pixel Perfect Design Does Not Necessarily Equal Good Web Design
We all know that a Web page is not a printout, but it's still very common for designers who started in print media to attempt to make their pages look and act like printouts. However, if you decide to move away from the print beginnings, that doesn't mean you should throw away all design principles - you just need to be less rigid in your interpretation of them.
Absolute vs. Relative - Explaining CSS Positioning
Positioning elements with CSS can be very challenging, as there is more to it than just tacking elements to the page. One of the most confusing parts is the concept of absolute and relative positioning and why you need this propery to achieve CSS positioning.
Illustrated Box Model
What are the parts of the CSS box model. Learn about how the different parts of the CSS box model work and how they interact with one another.
Playing with the Cursor
Using the CSS cursor property you can change the cursor that displays on your Web pages. This can result in some interesting effects if you do it well. Learn how to change your cursors using CSS.
How to Add Styles with Dreamweaver
Dreamweaver comes with a very easy to use style sheet editor. The trickiest part is finding how to add your styles.
CSS Styles and Languages
When working with Web pages, you need to be aware of both the language your Web site is written in and the language encoding used by your customers. CSS can help affect the style of your text and determine the direction and how it works within Unicode.
The Principles of Design
The principles of design are how you apply design elements to your page. These principles are some of the more accepted methods of design.
KompoZer 0.77 Walkthrough
If you've never used a WYSIWYG editor before or are not familiar with nVu or KompoZer, this walkthrough will give you a good idea of the capabilities of this free editor.
The Elements of Design
The elements of design are the basic building blocks of all design projects. The elements of design include lines, shapes, texture, color, and direction.
Adding Space to Web Page Text
Adding white space to HTML used to be fairly difficult, but now with CSS it's a lot easier to add spaces around objects, next to elements, and inside your pages. These CSS properties help you with indenting, outdenting, letter spacing, word spacing, line height, and white space.
How to Create a Dreamweaver Template
Dreamweaver templates help you to maintain sites by creating editable regions and regions that are maintained by the template.
Web Design Basics - Placement and Position
The first thing you do when you design a Web page is you start with a blank page and you place elements on that page. Placement of your elements can be critical to whether your design works or is a dismal failure.
Styles that Improve Your Text
CSS provides several properties for modifying your text so that your Web pages look more interesting. Text-decoration, text-transform, and text-shadow are useful properties to understand.
How to Customize the Dreamweaver Favorites Insert Bar
Make Dreamweaver easier to use by putting the insert buttons you use the most on the Favorites bar so that they're always available to you.
Color and CSS
There are several different ways to specify color values in CSS, the best known are with color names and color numerical values. But there are two other ways you can define colors in CSS 3 and once you understand how you can define your colors you'll have more options available in your color palette.
What Makes a Web Form Usable or Unusable
Dreamweaver Workspaces (for Windows)
How to change the workspace in Dreamweaver for Windows.
Specifying Language in XHTML and HTML Content
When you specify the language of your XHTML documents, you are making your Web pages more useful to many different applications. This article examines the W3C's Internationalization Best Practices, and gives suggestions for how to implement them in your HTML and XHTML documents.
Syntax of the Font Property
The CSS font property has a lot of great features that make it easy to use. Plus CSS 2 adds a bunch of additional features that you might not be aware of.
How Do you Stretch a Background Image in a Web Page?
Stretching a background image seems like something that would be fairly easy to do, but until CSS 3 properties are more widely supported, we have to use a workaround.
Tabbed Navigation in Web Design
It's easy to add tabbed navigation into your Web pages with CSS and page identifiers.
Small Caps - A Font Variant
Fonts vary in either small caps or regular. You use the font-variant style property to set the font variant.
How to Change the Doctype in Dreamweaver
It's easy to change the doctype in a Dreamweaver document.
Web Browser Window Size Matters More than Monitor Resolution
Monitor resolution is the most often used metric for determining what size to make a Web page, but is it the right one? At larger resolutions most people do not maximize their browser window, so assuming that it's maximized will force people to scroll horizontally.
Font Style - Italics and Emphasis in Web Typography
The style of a font is whether it is upright or slanted. Most people think of the font style as italics.
How to Use Dreamweaver Tracing Images
Dreamweaver makes it easy to go from a graphic design rendering of your Web page to the Web page itself using tracing images.
Creating a Web Color Scheme
Color schemes are important on Web sites, but it's easy to get carried away, especially if you like a large number of different colors. Use these standard color schemes to create a standard color scheme for your Web site.
How to Edit Noframes Content in Dreamweaver
Dreaweaver hides the noframes area a little, but in order to create valid and useful noframes content, you want to be sure to edit your noframes page.
Web Color Synchronization
Is it possible to ensure that your Web page colors will look the same browser to browser, platform to platform, and monitor to monitor? Web color synchronization can be challenging.
How to Create a Frameset in Dreamweaver
HTML frames are complicated, but with Dreamweaver you can create new framed Web pages in just a few steps.
Why should I use frames rather than CSS?
Can CSS do all the same things that frames can do? Or does it make sense to use frames in certain situations?
03/19/07 - Where do you do Web Design work?
It is possible to do Web design work for places around the country or the world or are you limited to face-to-face meetings and development?
03/18/07 - Font Weight
The weight of a font is the relative lightness or darkness. Most people think of the font weight as the boldness of a font face.
03/17/07 - What is the ID Attribute?
The id attribute is important to understand because it provides a way to identify unique sections of your Web page. You can give any element on your Web page a unique identifier using the ID attribute.
Common Myths and Facts About Modern WYSIWYG Editors
WYSIWYG editors have been much maligned but are they still as bad as they ever were? I look at the common knowledge about WYSIWYG editors and determine which ones apply and which ones don't.
The Business Case for Editor Types
Most well-run businesses require justification and reason before making decisions, especially for large purchases that may cost a lot of money or impact the company materially. The company Web site is a serious business investment, and making sure you have the best tool for the job is important.
The Legalities of Linking
Is it legal to link to sites outside your own? What are the legal ramifications to linking to other sites?
How to Add Meta Data to a Dreamweaver Page
Adding meta data in Dreamweaver is a bit hidden, but it's possible to add any meta tag you need in Dreamweaver and then edit them later right from your design view.
Why should I use DIV tags, standards, and validate my HTML?
A question from a reader about why beginning designers should spend the time it takes to learn standards-based design.
First Things First - Where to Start When Editing a New Page in Dreamweaver
When you start to build a page in Dreamweaver, there are a lot of properties that you'll want to control about the basic aspects of your Web page.
Book Review: Teach Yourself CSS in 24 Hours by Kynn Bartlett - Second Edition
Review of the book Teach Yourself CSS in 24 Hours by Kynn Bartlett
How to Build an Internal Style Sheet
Learn how to create and use external style sheets on your site.
What is a CSS Shorthand Property?
CSS shorthand style properties allow you to write some CSS properties in a more compact form, saving space, download time, and development time.
What is CSS?
Before you can use Cascading Style Sheets, you need to understand what they are and what they are for.
Check Links with Dreamweaver
You can use Dreamweaver to check the pages on your Web site for broken links, external links, and orphan pages.
What is a 301 Server Redirect?
It's better to use a 301 permanent redirect for your Web pages that redirect than to use a meta refresh tag.
Book Review: The Design of Sites by Van Duyne, Landay, and Hong, second edition
Using design patterns is a great way to create a site that works and is easy for your customers to use. The second edition of the book The Design of Sites, by Van Duyne, Landay, and Hong provides a huge number of paterns.
Simple Table Styles
Tables can be styled using CSS, but there are a few tricks you need to use to make sure they appear as you want them to. This article takes you through the basics of table styles to adding dynamic table row highlighting.
How to Add Anchor Links with Dreamweaver
Anchor links or internal links are a way to link to various sections of a Web page. These are easy to add using Dreamweaver.
Tagging: What is Tagging and Why Should We Do It?
Understand what tagging is so that you can add more meta data onto your pages for easier searching and navigation.
How much programming does a Web Designer do?
Is it important to learn C++ or Java or some other programming language in order to be a successful Web developer?
What's the difference between display: hidden and visibility: none?
These properties may seem like they do the same thing, but they actually act differently.
How to Create a Dreamweaver Image Placeholder
Dreamweaver image placeholders make it easy to create a new design without needing the images for that design until you're ready to build them.
CSS and Bulleted Lists
Learn how to get your unordered and Bulleted lists to look as you want them to.
How can I create a variable-width container without a table?
The display: table; CSS property is not supported in IE. This means that the only way to get the look of a table with CSS is to use a table.
What is a Dreamweaver Design Note?
Use Dreamweaver design notes to describe and annotate files so that your customers won't see them, even if they view the source, but your team mates will.
Centering Stuff with CSS
Learn how to center text, images or blocks on your Web page with CSS.
Change is Good - It's Time to Give Up Your Table-Based Designs
It's time to break your old habits and admit that using tables for layout is outmoded and lazy. It's time to move on to CSS layouts, as your excuses just won't hold water for much longer, and why keep bailing when you could join the rest of us at the helm!
Why are There Different Versions of HTML?
If you understand what the different versions of HTML mean you'll have an easier time writing HTML or XHTML that meets your needs and displayed correctly.
How to Style a Tag Cloud
The styles for a tag cloud aren't that difficult to master, but once you understand them, you can use them to create a tag cloud of anything on your site that is measurable.
How to Convert Word to HTML with Dreamweaver
When you use Word to save as HTML you end up with a lot of strange codes that can make the page look wrong on your Web site. Plus the HTML is a lot larger than it needs to be. Luckily you can use Dreamweaver to convert Word documents to HTML in just a couple of steps.
What is a Sitemap?
What is an XML sitemap and why should I use them on my site? XML sitemaps are a new schema and protocol accepted by Google, Microsoft, and Yahoo! to help assist search engines. Setting up a sitemap for your Web site allows search engines to more accurately review the files on your site, including their locations and relative importance to each other.
The Three Layers of Web Design
Understanding the three layers of Web development can help site maintenance easier as well as give you focus on what you're working on.
Styling Horizontal Rules with CSS
If you want to divide sections of your HTML, one way to do it is with the HR tag. But this tag can be really ugly if you don't style it. Learn how to use CSS to style your HR tags.
Dreamweaver 8 Walkthrough
Learning Dreamweaver can be tricky, but this walkthrough will take you through the standard panels and what you can expect from Dreamweaver.
Understanding CSS Float
If you understand how to use the CSS float property, you'll have a lot more control over how your Web pages are laid out and you can more easily join the ranks of CSS designers everywhere.