Website Development Classes

zip file for dw class 7/12/07

2007-06-12T08:07:00.000-07:00

Using Pop-Up Windows in Dreamweaver

2007-05-28T17:06:00.000-07:00

How to create & edit Pop-Up Windows

Pop-Up Windows can be easily created using the 'Open Browser Window' of the Dreamweaver behaviors panel. You can give the URL and set the window properties using the 'Open Browser Window' dialog box.

To create a pop-up window for any link, create the link (either text / image) using '#', select it and then open the Behaviors panel (Shift+F3).
Click the Add (+) button and select 'Open Browser Window' from the Actions pop-up menu.
Select the URL to be opened and set the window properties, say width, height, attributes (Navigation toolbar, Location toolbar, Status bar, Menu bar, Scrollbars as needed, Resize handles) and a name.
To edit a pop-up window, select the link and then double-click the 'Open Browser Window' in the Actions column of the Behaviors panel to make the necessary changes.
Save and test your file in a web browser. That's it you've learnt how to create pop-up windows using Dreamweaver Behaviours.

To view this tutorial and others, go to smartwebby.com

Using Layers in Dreamweaver

2007-05-28T17:02:00.000-07:00

Here is a quick tutorial on using layers in Dreamweaver. In the pdf file that you download, you will also find a link to images that you can use.

Using Content Boxes in Dreamweaver

2007-05-28T16:09:00.000-07:00

Here's a tutorial that shows you how to slice up a content box in Photoshop and bring it into Dreamweaver.

You'll notice at the beginning of the tutorial that is says 'flatten your content box' in Photoshop first. Well, you can skip that part, and download the zip file below for several different content box options.

You will need to get out your text tool to write across the header section of the template. And, I'll create a couple of different sizes, one that is 188 pixels (like in the tutorial), and another that is about 550 pixels. You could sit these side by side, centered in 2 columns. (We'll go over this in class.)

download zip file

Saving for the web in Photoshop

2007-05-22T10:22:00.000-07:00

In this lesson you will learn how to save Photoshop files for the Web so that they may be viewed as rollover images via a web browser.

First, organize your .psd files and rename them so that they contain NO capital letters, spaces, or special characters

File Names such as Mike's Great Image!.psd are best corrected at this point in the process

Changing the name to mikes_great_image.psd will save you many headaches down the road

Use the underscore (Shift-hyphen) to simulate spaces

The key to understanding this process lies in the Layers Palette (F7)

Full tutorial here...

Inserting YouTube videos into your webpage

2007-05-22T10:15:00.000-07:00

How to link to a single YouTube video

Go to the video that you want to share, and look for the share details section under the video player. There you will see 2 options.

Option 1: Video URL (Permalink)

This URL points directly to the YouTube page that plays the video.
Copy and paste this URL into an E-mail and send it to your friends.

Option 2: Embeddable Player

Copy and paste this HTML snippet into your website to insert the video player directly into your page. This way visitors will be able to play the video without leaving your site. You may alter the size of the video (by changing the width or height). Example below:

Copy and paste this HTML snippet into your website to insert the video player directly into your page. This way visitors will be able to play the video without leaving your site. You may alter the size of the video (by changing the width or height). More on this here...

Getty Images - Stock Photography Site

2007-05-22T10:12:00.000-07:00

Every day people around the world see us on the front pages of newspapers and magazines, within multinational advertising campaigns, on the covers of best-selling books, in motion pictures and everywhere else images are used to tell a story.

Web marketing can be the most powerful tool in your belt. See how our web-ready photos and footage make it work harder for you.

ShutterStock.com - Digital Stock Photography

2007-05-22T10:09:00.000-07:00

~ 1,871,344 royalty-free stock photos
~ 27,057 new stock photos added this week
~ 60,336 photographers

How does Shutterstock Work?
You can subscribe for one month, three months, six months, or one year - and download up to 25 images per day (750 per month). You can even continue to use them past your membership period. There are no hidden or additional fees after you become a member. We also provide special licenses for multi-user accounts, print runs exceeding 250,000, and merchandise and media uses.

Shutterstock Homepage

Stock Photography Images

2007-05-22T10:05:00.000-07:00

iStockphoto® is the world's preeminent collection of member-generated royalty-free images, at the world's best prices. There are no subscription fees or extra costs. Just the best Stock Photography, Vector illustrations, and Flash files online, at prices for everyone.

Visit iStockphoto's homepage here...

Inserting Flash into a Dreamweaver page

2007-05-22T10:03:00.000-07:00

You’ve created a Flash movie using the “.fla” extension. The .fla extension is the design format for Flash, and is a huge file that takes up far too much bandwidth to put on a Web page. So, you’ll need to compress your .fla file into a lower-bandwidth “.swf” so it will load on a web site. (This is one of the great benefits of Flash: when compressed, the file is very low bandwidth so that nearly any connection speed can download the movie.)

Flash gives you a number of options when compressing your .fla file that will ultimately decide the quality and the load time for your Flash movie. You can experiment with different settings to determine the best trade-off between size and quality.

With your .fla movie open, choose: File > Publish settings

Under Publish Settings, there are three tabs to adjust settings: Formats, Flash and HTML.

Read more...

Replacing a cloudy grey with a blue sky - forums

2007-05-22T10:01:00.000-07:00

I have Photoshop Elements 5, and Windows XP Home operating system. I am trying to replace a grey sky with a blue sky. I have "the photoshop elements 5 book for digital photographers" by Scott Kelby. He describes on pages 301-302 the steps necessary to replace the sky in a photo. I have followed the directions and have been unsuccessful. Obviously, I have missed something important. Part of the sky is changed and part isn't.

Any suggestions??

Click here for the answer, followed by a good tutorial...

Replace clouds in Photoshop

2007-05-22T10:00:00.001-07:00

By Rick Wetzel

We've all taken photographs with dull and uninspired skies. This tip describes a subtle technique that goes beyond cutting and replacing. I've chosen a typical vacation picture that is in need of my cloud replacement therapy.

Do this tutorial...

Photoshop: How to make selections with the magic wand...

2007-05-22T09:58:00.000-07:00

Using the Magic Wand tool won't separate out a portion by itself (unless you don't plan on using layers). This is what I mean: If you have selected an area, and apply any adjustments (including using a paint brush, or a curves adjustment for example), only the selected area will be effected. This is nice, but as I keep saying, that will permanently alter the information of that area!

Do tutorial...

GetBrushes.com - Your guide to the best Adobe Photoshop brushes free downloads on the net

2007-05-22T09:55:00.000-07:00

GetBrushes.com is a brush exchange site, featuring the best Adobe Photoshop brushes on the net and their authors, free PS brush downloads, as well as linking you to the finest Photoshop resources, tutorials and art communities.

It doesn’t mater if you’re looking for grunge brushes or tech brushes, abstract brush or maybe gothic ones, here you’ll find all the resources you ever wanted, and more. All of the brushes reviewed by us are rated and categorized by brush type, author, quality and Adobe Photoshop version, plus documented with an example of usage and a screenshot for each brush set, to help you easily find and download the right Photoshop brush pack for your artistic needs.

Besides that GetBrushes.com strives to be a community for all PS artists out there, a place where you can meet, present your own Photoshop brushes and other stocks to the world, discuss and share your Photoshop tips, tricks and techniques, and well… have fun!

Homepage for GetBrushes.com

Photoshop Selective Color Adjustment

2007-05-22T09:53:00.000-07:00

Here's a simple 'Adjustment Layer' technique on how to alter a particular color within a photo.

Click here for tutorial...

How to use the crop tool in Photoshop

2007-05-22T09:51:00.000-07:00

The crop tool in Photoshop can actually do much more than crop your images. As I mentioned in the last section, the crop tool can be used to increase your canvas size. It can also be used to rotate and resample images, and in Photoshop 6 it can be used to quickly correct the perspective of an image.

Let's start by exploring the most common use of the crop tool... cropping, of course! Open any image and select the Crop tool. To select an area to be cropped, just click and drag in your image and when you let go, the crop marquee will appear. There's no need to be precise when making the first selection, because you can edit your selection before committing to the crop. You can always save some time if you get it right the first time; however, the default crop cursor makes it somewhat difficult to see exactly where your selection begins and ends.

Continue here...

Raw File Formats

2007-05-22T09:50:00.000-07:00

The RAW file format is digital photography's equivalent of a negative in film photography: it contains untouched, "raw" pixel information straight from the digital camera's sensor. The RAW file format has yet to undergo demosaicing, and so it contains just one red, green, or blue value at each pixel location. Digital cameras normally "develop" this RAW file by converting it into a full color JPEG or TIFF image file, and then store the RAW file in your memory card. Digital cameras have to make several interpretive decisions when they develop a RAW file, and so the RAW file format offers you more control over how the final JPEG or TIFF image is generated. This section aims to illustrate the technical advantages of RAW files, and makes suggestions about when to use the RAW file format.

Read full article here...

RGB vs CMYK

2007-05-22T09:47:00.000-07:00

A common error when delivering images by clients is the delivery of images in RGB-mode.

RGB is one of the two most widely used color modes and is used mainly for display on monitors.

CMYK however is the only right color mode for print.

Read full article here...

Image formats for the web

2007-05-22T09:45:00.000-07:00

Choosing the right file format to save your images in is of vital importance. There are three image formats in constant use on the net — GIF, JPG and PNG. Each is suited to a specific type of image, and matching your image to the correct format should result in a small, fast-loading graphic. Saving and exporting into these formats will require a decent image editor.

When choosing the format for your image, you should always be conscious of both the image’s quality and filesize.

Read about the difference between GIF, JPG, and PNG files here.

Understand how colors work in Photoshop

2007-05-22T09:42:00.000-07:00

Computers know nothing about images, or tone, color, truth, beauty, or art. They're just very complicated adding machines that crunch numbers. Fortunately, you don't have to learn hexadecimal or binary math to use Photoshop, but unless you like heavily pixellated output and wildly unpredictable color shifts, you really want to understand the essential lessons about images that authors Bruce Fraser and David Blatner lay out in this chapter.

Read more...

Adjusting Levels in Photoshop

2007-05-22T09:39:00.000-07:00

Levels is a tool in image editing programs (such as Photoshop) which can move and stretch the brightness levels of an image histogram. It has the power to adjust brightness, contrast, and tonal range by specifying the location of complete black, complete white, and midtones in a histogram. Since every photo's histogram is unique, there is no single way to adjust the levels for all your photos. A proper understanding of how to adjust the levels of an image histogram will help you better represent tones in the final image.

HOW IT WORKS
The levels tool can move and stretch brightness levels in a histogram using three main components: a black point, white point and midtone slider. The position of the black and white point sliders redefine the histogram's "Input Levels" so they are mapped to the "Output Levels" (default is black (0) or white (255), respectively), whereas the midtone slider redefines the location of middle gray (128). Each slider is shown below as they appear in Photoshop's levels tool, with added blue labels for clarity:

Read full article...(Includes complete tutorial)

Simple forms in HTML

2007-05-17T14:50:00.000-07:00

Here is a simple tutorial to follow, with links provided for additional resources.

Download the PDF here.

Setting up basic page code in HTML

2007-05-17T12:35:00.000-07:00

Here's a pdf file you can download to help you set up your basic HTML code, your DOCTYPE, meta tags, and title of your website.

You can download it here.

Code Snippets

2007-05-16T17:13:00.000-07:00

Code snippets are pieces of code you put into the HTML of your web page to make it do something, show something, etc. If you are using Dreamweaver, there are ways to automatically put some of these bit of code into your site. More on that later...

If you follow the links below, you'll find several javascript sites that will allow you to:

Highlight an Image on Mouseover

Open a New Window With a Button

Open a New Window With a Link

Open a Window on Page Load

Add to Favorites Button (IE)

Dreamweaver Templates

2007-05-15T07:26:00.000-07:00

Here is another short tutorial on how to create a dreamweaver template.

Download PDF here

Creating frames in Dreamweaver

2007-05-15T07:17:00.000-07:00

There are several different ways to create frames in Dreamweaver, but here is a short tutorial so that you will understand the main concept. Also, when you download the tutorial, take note of the links provided at the bottom of the page.

You can download the PDF here.

Cascading Style Sheets - Tutorials

2007-05-13T13:26:00.000-07:00

As we are getting ready to launch into our CSS class (following the conclusion of HTML), I thought I'd post this link to w3Schools. They have great tutorials and a WYSIWYG editor (what you see is what you get) that you can practice with.

What is CSS?

CSS Stands for Cascading Style Sheets
Styles define how to display HTML elements
Styles are normally stored in Style Sheets
Styles were added to HTML 4.0 to solve a problem
External Style Sheets are stored in CSS files
Multiple style definitions will cascade into one

HTML tags were originally designed to define the content of a document. The layout of the document was supposed to be taken care of by the browser, without using any formatting tags.

As the two major browsers - Netscape and Internet Explorer - continued to add new HTML tags and attributes to the original HTML specification, it became more and more difficult to create Web sites where the content of HTML documents was clearly separated from the document's presentation layout.

To solve this problem, the World Wide Web Consortium (W3C) - the non profit, standard setting consortium, responsible for standardizing HTML - created STYLES in addition to HTML 4.0.

All major browsers support Cascading Style Sheets.

Style Sheets Can Save a Lot of Work

Styles sheets define HOW HTML elements are to be displayed, just like the font tag and the color attribute in HTML 3.2.

Styles are normally saved in external .css files. External style sheets enable you to change the appearance and layout of all the pages in your Web, just by editing one single CSS document!

CSS is a breakthrough in Web design because it allows developers to control the style and layout of multiple Web pages all at once. As a Web developer you can define a style for each HTML element and apply it to as many Web pages as you want. To make a global change, simply change the style, and all elements in the Web are updated automatically.

Multiple Styles Will Cascade Into One

Style sheets allow style information to be specified in many ways. Styles can be specified inside a single HTML element, inside the head element of an HTML page, or in an external CSS file.

Even multiple external style sheets can be referenced inside a single HTML document.

Cascading Order
What style will be used when there is more than one style specified for an HTML element?

Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by the following rules, where number four has the highest priority:

Browser default
External style sheet
Internal style sheet (inside the head tag)
Inline style (inside an HTML element)

So, an inline style (inside an HTML element) has the highest priority, which means that it will override a style declared inside the head tag, in an external style sheet, or in a browser (a default value).

Read more here...

Simple Javascript Slideshow

2007-05-13T13:11:00.000-07:00

Go to http://www.anewavenue.com/dw_class.html and download each of the large images (5 total, just do the orchids) into your images folder that you created inside of your root folder. Don't change any of their names, just leave them as they are.

Scroll back down that page that you got the images from. There is code that will create a nice looking javascript slideshow with smooth transitions in IE.

You'll need to follow the directions and place code in three places: between the head tags, in the opening body tag, and inside of a table cell that you will create.

Optimizing images for the web....

2007-05-10T20:04:00.000-07:00

Optimizing Images for the Web-
Do you want to make your site load fast but still look good? This section will tell you how to create fast loading images for your web page.

The Most Common Mistake-
Once, I was asked to look at why a very simple web page will one small image and about 400 words of text took over 1 minute to load.

The answer was simple and is a mistake I see over and over again. The original image, which was large, was scaled to a small image size in a web site creation program, not an image editing program.

DO NOT resize your images in your website design program. The result will be a small image with the same file size.

DO resize your image in your image editing program.

When you resize your image on your web page to the size of a postage stamp, you really have not done anything to the image file size at all. What you are actually doing is telling the browser to re scale the image on the fly. This creates a lot of work for the browser.

The image that you thought is the size of a postage stamp is still that same large 8 x 10 inch image that takes over 2 minutes to download.When you use an image editing program to resize the image, and you save it as a JPEG or GIF, you have actually created a smaller image. Now that postage stamp size image that you saved as a postage size JPEG will now load quickly on your visitor's computer. GIF and JPEG:

Two Image Formats You Need to Know About If you want to optimize your images the first thing you need to know about is the two image formats recognized by your web browser.

These are GIF (pronounced jif as in Jiffy Peanut Butter) and JPEG (pronounced Jay-Peg).

Both JPEG and GIF are compressed. That means that information has been organized inside the file in a special way in order to minimize the file size.

The difference between JPEG and GIF is the way that they compress the data. JPEG compression is designed to optimize photographs or images with fine gradations of color. GIF compression is designed to optimize images with large continuous areas of color, such as illustrations.

link to full article...

Wondering how to title your webpage?

2007-05-10T19:55:00.000-07:00

SEO and Your Web Site

The Title Tag
One of the first elements in a Web page is the title tag (). This is one of the, if not the, most important elements for SEO on the entire page. All too often, the information contained in this tag is either left blank, has a default value (e.g. “insert title here”), or is simply the company name.

Why is this tag so important? First of all, it is used by every major search engine as a key indicator of the page’s content, and, second, it used by the search engine as the first line in the SERPs.

Give this tag the consideration it deserves.

More links on search engine optimization..........

Website Analyzer

Net Mechanic

Website Optimization through Web Source.com

Read more here...

Information on DOCTYPES

2007-05-10T19:05:00.000-07:00

Here are some good links for you to read about DOCTYPES, or c/p from:

You'll need to put the code ABOVE your opening html tag.

Choosing a DOCTYPE

Browser News: Resources - DOCTYPEs

A List Apart: Articles: Fix Your Site With the Right DOCTYPE!

Doctype switch: Summary table

Mozilla's DOCTYPE sniffing - MDC

O'Reilly Network -- DOCTYPE Explained

HTML Links

2007-05-10T17:27:00.000-07:00

This tutorial goes over hyperlinks, linking to images, anchor links, two different kinds of mailto: links, etc.

Download this PDF tutorial

Some HTML Basic Tags

2007-05-10T17:13:00.000-07:00

This tutorial goes over headings, heading alignment, paragraphs, line breaks, invisible comments, horizontal rules, page colors, and a short reference guide.

download this tutorial in PDF format

HTML Lists

2007-05-10T16:46:00.000-07:00

Creating Lists in HTML....this tutorial will teach you how to create several different types of lists, including: ordered; unordered; definition lists; lettered; lowercase; roman numerals

PDF Online for this tutorial

New Blog site for web tutorials and links

2007-05-10T14:40:00.000-07:00

From now on I'll be posting tutorials for the Dreamweaver, HTML, and CSS classes, along with some extra photoshop and image stuff that I've done over the last year.

After each class the information, links, and downloads should be available on this site.

Thanks for your patience as I get this up and running...