Following are two short videos that walk through the process of configuring Dreamweaver and uploading files.

Configuring Dreamweaver

Demonstration

Practice

“How to configure Dreamweaver” (PDF)

Uploading Files

Share This

Find yourself missing your favorite blog widget on your standalone Web site? While nothing will take the place of good content updated regularly, sometimes a Twitter, Facebook, Delicious or Flickr widget can provide fresh information from other sites you already update.

A word of caution: There are downsides to the gratuitous use of widgets on your Web site. Most of them contain advertising or at the very least a link back to the creator of the widget. Sometimes they don’t fit the dimensions of your design. Worst of all, sometimes they just look cheesy and amateurish. So be selective when you use widgets in your Web site or online portfolio.

Resources

• Twitter Widgets
• Twitter Goodies
• Delicious
• Flickr
• Facebook
• Skype
• LinkedIn
• 15+ Sites To Get Widgets For Your Blog (or Web site)
• Yahoo Widgets
• Google Gadgets
• Widgetbox
• GoodWidgets
• Big Huge Labs

Share This

Both of these tasks can be accomplished using a basic technique in cascading style sheets (CSS).

Consider the following example:

Link Example

Notice how the links have no underline. Also notice how the links change from blue to green as your mouse over them.

Now consider the screenshot from Dreamweaver below.  The top part of the window shows the CSS code in a stylesheet attached to the link example page below.

You can view the stylesheet directly here:

Stylesheet

If you look carefully, you can see the process.

1.  First, I created a new class called “navigation.”  It has some basic font attributes such as size and family.

2.  Next, I added characteristics that are specific to links of the class, “navigation.”  Link characteristics are identified by “a” (such as “.navigation a”).  For example, in this case, I removed the underline with “text-decoration: none;” and the changed the color of links with “color: #00F;”

3.  Lastly, I changed the characteristics of link color when moused over.  Mouseover (or “hover”) characteristics are identified by “a:hover” (such as “.navigation a:hover”).  In this case, I changed the color of the text to green when moused over with “color: #090;”

Using CSS-based mouseovers are much more efficient than image and JavaScript-based mouseovers once you get the hang of using them.

Share This

Following are a number of tips for basic Web design.  When constructing a portfolio, beginning Web developers should consider some of these essential rules for design.  Once you’ve mastered the basics, you can explore advanced techniques.  Start simple for now, however, and improve your site over time.

Layout

• Use a consistent layout and design. For the most part, your banner, navigation and footer should be the same on every page. The content area of each page can change.
• Keep navigation simple and consistent. Side navigation and top navigation are accepted standards. Learn to use those before trying “experimental” structures.
• Remember that a picture is worth a thousand words. If you can communicate with photos and clear icons, you should.
• If you can use text for links, however, you should. Unnecessary images make your layout load slower.
• Try to have central focus on every page. Often this is a photo, a chart/infographic or a quote.
• Don’t be afraid of empty space. You don’t have to fill in everything.
• Try to maintain some balance and symmetry to your page.
• Center-aligned is very popular. Consider this option with your layout over left aligned if possible.

Color

• Use no more than four or five colors. Choose a color scheme and stick with it.
• Consider the concepts of color theory. Many color scheme generators can help:
• Use high-contrast colors for text. You can’t go wrong with black text on a white background.
• Whenever possible, use table background color instead of a graphic. Solid table background colors don’t make your page load as slowly as images.

Typography

• Use no more than three or four typefaces.  Remember that text on the Web is dependent on the viewer’s computer, not the designer’s.  Stick with universally accepted typefaces.
• Convert text to graphics if you must use unusual display typefaces.
• Establish a consistent style for
  • Headlines
  • Body text
  • Navigation
  • Small text (such as for footers)

Resources

• Good design features
• 9 Essential Principles for Good Web Design
• Current style in graphic design for the web
• Simplicity in Good Web Design : Advantages & How -to
• 10 Principles Of Effective Web Design
• How to design a good website
• 10 Ways to Design a Good Web Site

Share This

Basics

• Introducing Photoshop: The Tools (Video)
• Photoshop CS4 Tutorial – First six tools overview (Video)
• Understanding Layers (Video)
• Speed Up Your Website with Better Image Optimization in Photoshop

Text Effects

• 65+ Smoking Photoshop Text Effect Tutorials
• 40 Really Useful Photoshop Text Effect Tutorials

Banners

• Designing a simple website banner with a logo using Photoshop
• Professional Banner

Logos

• “How to make an awesome logo“
• 60+ Beautiful Logo Design Tutorials And Resources
• 35 Logo Designing Photoshop Tutorials

Textures

• 36 Cool Free Textures
• 60+ Totally Free Rusted Metal Textures for Designers
• 29 Most Useful Texture Packs of 2008
• The ultimate photoshop resource list part 2: patterns + textures

Tutorial Lists

• Tutorials for: Adobe Photoshop
• Photoshop Lover
• 60 Most Wanted Photoshop Tutorials, Brushes, .PSDs and Resources
• 75+ Huge Compilation of Stunning Photo Manipulation Tutorials for Photoshop
• Grunge and dirty Photoshop tutorials, brushes and textures
• Textures Photoshop Tutorials
• 20+ Photoshop Video Tutorials

Share This

While it’s important that beginning Web developers understand the basics of modern design, sometimes these concepts can best be understood by examining cases of really poorly designed sites.

Fortunately, there is no shortage of poorly designed sites on the Web to study. A visit to Web Pages that Suck or 30 Web Designs that Will Hurt Your Eyes will provide more than a few examples of what to avoid.

Following are some typical design techniques beginning Web designers should avoid:

• Untitled pages
• Default type (Times only)
• Unconstrained text width
• Use of all caps
• No central focus
• Page weight over 100k
• Overly busy/crowded
• Inconsistent layout throughout site
• Confusing navigation
• Not enough contrast
• Overuse of animation/blinking text
• Improperly sized graphics
• Tiling/busy backgrounds
• Large table borders
• Non-contrasting text/backgrounds
• Page counters
• Under construction pages
• Framesets
• Background music
• “Best viewed with…” statements

Resources

• 20 Do’s and Don’ts of Effective Web Design
• The Do’s and Don’ts of Modern Web Design
• The Do’s and Don’ts of Web Design
• Web Pages That Suck
• The World’s Worst Website
• 30 Web Designs That Will Hurt Your Eyes
• 20 of the Worst Designed Websites in the World

Share This

Image Dimensions

Dimensions on the Web are measured in pixels.

As opposed to fixed measurements, a pixel is relative to the resolution of the target monitor.  For the sake or argument, however, you could consider a pixel to be about the size of a pencil point.

Following are some common dimensions:

100 pixels wide by 100 pixels high

250 pixels wide by 200 pixels high

File Size

File size on the Web is generally measured in bytes. Since a byte is so small, most images are measured in kilobytes (Kb) or–if *really* large–in megabytes (Mb).

Since the Web works by transferring files from one computer (the server) to another (the client), the amount of time it takes for a page to load is directly proportional to the size of the files being transmitted.

As a result, file size on the Web is extremely important. When transmission speeds were slower (such as with 56k modems), the standard on the Web was that a page (and all associated graphics) shouldn’t be more than 50k. With increased bandwidth becoming standard, total file size (sometimes referred to as “weight”) has increased. It is still a good idea, however, to keep file size as small as possible (~100k).

Plain HTML pages usually aren’t the problem. A page with five paragraphs of text (around 450 words) weighs in at under 5k!

Problems arise when a page becomes bloated with unoptimized graphics, sound files, video, PowerPoint presentations, etc.

Moral: Try to keep the total file size of your images as small as possible!

Compression

Due to the fact that large files take longer to download through the Web, all images must be “optimized.” Optimization entails compressing the image down to the smallest possible file size.

Different types of graphics require different compression methods. For example, photographs should be compressed as a JPEG, while simple logos (with solid blocks of horizontally continuous color) should be compressed as GIF. Compression is generally accomplished in dedicated image software such as Photoshop Elements, Fireworks, or ImageReady.

Rule of thumb:
Lots of colors = JPEG
Solid colors = GIF

Photographs
Example

Appropriate compression method: JPEG

Graphics and illustrations (using large blocks of similar horizontal color)

Example

Appropriate compression method: GIF

PNG is a less-common format that has strengths and weaknesses of both JPG and GIF compression. While PNG is lossless (like GIF), the image size is larger.

Share This

When creating Web sites, beginning designers often overlook one of the most important elements in design: typography.  While we look at text every day, we may not notice that such characteristics as font family, weight (boldness), size, kerning, and leading affects not only the tone of our design, but also the overall legibility of our message.

At the same time, typography on the Web provides some interesting challenges for developers.  For the most part, fonts are dependent on the viewer, not the designer, for example.  Without cascading style sheets, one cannot control line spacing (other than single and double) or line height.

Such obstacles can still be overcome, however, with creative solutions (such as converting display type into graphics).  A clear knowledge of how to use type as a design element–and how to overcome the limitations of type on the Web–are essential skills every Web designer should know.

Resources:

• Emigre
• House Industries
• Font Freak
• 40 Spectacular Typography Videos

Share This

Zappos team members Sara Mattan (Information Architect/Taxonomist), and Rafael Mojica (User Experience/Usability Specialist), explained to aspiring journalists and designers the concept of Web site usability and the process to improve the user experience at UNLV on October 27, 2009.

When it comes to usability, few design teams consider the issues more than those at large online shopping Web sites.  Whether the customer can find what they’re looking for, select it easily, then pay painlessly will determine whether the company will stay in business.

That’s why major dot.com industries like the online shoe and clothing site, Zappos, have a full team of professionals to study and perfect the user experience.  Sara Mattan, and Rafael Mojica, for example, are part of a team that is constantly researching the behavior of customers through statistical data (such as Google Analytics) and in-person user testing to determine how to improve the design of the Web site.

From the Zappos Web site:

“This team is dedicated to the constant evolution of how customers interact with our site. Their goal is to provide the absolute best customer experience online by utilizing User Interface, the organization of information, and interaction design. They probe for answers that will enable you to find stuff easily on the site!”

As an aspiring designer, always be looking for ways to improve the navigational process your audience will experience.  And don’t forget to learn from the professionals at Zappos!

Resources:

• Zappos User Experience on Twitter:  @UXZappos
• Surveymonkey
• Competitive Analysis
• crazyegg
• Silverback
• Card Sorting
• Heuristic Reviews
• Google Analytics
• Internal Search Logs
• Google Insights
• Keyword Finder

Share This

Although many people use the World Wide Web on a daily basis for news, shopping, communication, entertainment and more, quite a few are unclear regarding the basic principles how it works. From a journalist’s perspective, understanding these principles are imperative to transitioning to the digital age. While such tools as blogs and other content management systems make the presentation of information quick and easy, sooner or later the limitations of these applications become restrictive.

Essentially, the World Wide Web works by simply transferring files from one computer to another through a network.

An analogy would be if I created a word-processed document on my computer, then saved it on a shared hard drive. Through a network, someone else could access my document and open it in their word processor.

The Web operates in exactly the same way. When someone types a URL in the address bar of a browser and hits return (or clicks a link), they are sending a request to a remote computer (called a server) to send a text document (and any associated graphics) back to the requesting computer (called the client).

HTML documents are simply text files. Text editors (including MS Word, NotePad or Text Edit) are able to view and manipulate the source formatting.

The difference is that Web pages (HTML documents) are interpreted by a browser. Web pages contain more than just text. They contain text formatting code, links to graphics, information about the page itself, and much more.

The browser (such as Internet Explorer or Firefox) interprets the source code of the HTML, assembles all the associated pieces, then presents the completed page to the viewer.

Resources

• The Yale Web Style Guide
• HTML Reference
• CSS Reference
• Web Monkey

Share This