DREAMWEAVER 1

Introduction, Background, Interface

SUNNY is the name of the UNI server. Sunny is a secure FTP, you have to use SFTP, or “secure” FTP

1. Make a folder (File/New Folder).

And in that folder, make 3 other folders.

Lower case: images

documents

flash

2. Launch Dreamweaver. Go to Dreamweaver Site, select Dreamweaver Site…

3. Find the folder that you just created on your Desktop (in this case, the folder’s name is “timmiller”:

4. Twirl down “Advanced Settings” and select “Local Info”

5. Leave first dialog box blank. In second dialog box type in the UNI URL + your user name (I’m using my own as an example: my username is “fabos” and this is the address of my website.

6. Select “Servers” from the left column menu.

7. Click on the “+” sign at the bottom of the dialog window:

8. Add the following information (put in YOUR USER NAME instead of “fabos” and YOUR PASSWORD. Test your password. Hopefully it should work!

8. Create a New HTML page.

index.html- every student has a placeholder if they already created public space

You can edit this placeholder

You can replace this placeholder.

Here’s a good discussion of index pages:

http://www.mtholyoke.edu/help/creating-pages/indexes.shtml

.

FTP stands for File Transfer Protocal. Dreamweaver has FTP built into its program, but you can find numerous FTP programs for free download or purchase:

FETCH IS ONE FOR MAC.

CYBERDUCK

YUMMYSOFTWARE

To use ANY FTP program you need the following:

· A UNI SUNNY account (or an account from a private firm/cable provider, etc)

· Your User name

Hit connect

IT asks for your password and you’re connected.

JUST MAKE SURE your FTP program IT’S AN SFTP.

PREPLANNING YOUR WEBSITE:

· DRAW YOUR DESIGN OUT ON PAPER FIRST

· STORYBOARD YOUR WEBSITE FIRST

· VIDEOS SHOULD TO BE SHORT AND SMALL (160X121 is a good size.)

· SUNNY IS A WEBSERVER AND NOT INTENDED TO HOLD LOTS OF VIDEO.

· UNI HAS A STREAMING SERVER, WHERE STUDENTS CAN STREAM STUFF AND ITS CAN PROVIDE A LINK AND WORK WITH EMBEDDED CODE.

· GO TO PRODUCTION HOUSE FOR HELP WITH THE STREAMING SERVER IF YOU WANT TO UPLOAD LARGER VIDEOS.

Work Locally

upload after you’re done working locally.

Watch for slow networking: work locally….create folder on desktop…and then move to Public_www…at completion….or create folder on UDS, NETDISK,…and then move into public_www space.

Make sure you understand what it means to move content into a PUBLIC folder.

Once public, the whole world can access it and see it. You page can be harvested by a search engine. It is NOT private information anymore.

A huge School of Business fiasco at a certain university happened recently when someone placed thousdands of confidential social security numbers in a Public WWW folder. There was a huge security breach; anyone could find those numbers and download them. So it’s VERY IMPORTANT to understand that a Public folder is a PUBLIC folder.

Problems

If problems exist with student account, go to ITS (Room 36 in ITTC building). Problems with building your webpage, go to the Production House.

Extra help

http://proquest.safaribooksonline.com/0672327600/ch02

entire book - http://proquest.safaribooksonline.com/0672327600

Dreamweaver Workspace

The Start page

This is the first page that comes up when you enter DW8. Go over 3 columns:

1. Open a Recent Item: open up a recent DW8 document you’ve been working with.

2. Create New: quick link for creating new pages. Can click any of these items (HTML, ColdFusion, PHP, etc) and you can make that type of page. IF you don’t see the type of page listed here you can click MORE and you can get more types of pages DW can create.

3. Create from Samples. Create new pages based on a variety of templates. You can select a CSS page designs…good way to learn CSS by examining the code behind these pages. You can start with some Starter pages to work on some layouts based on tables. You can customize them to suit your needs. Bottom of Start page you can take an interactive tour. = A useful springboard. If you end up getting good at DW you can get rid of DW and go to Edit/Preferences (or Mac/Dreamweaver/Preferences) and select General/ShowStartpage to deselect.

HTML vs. XHTML

HyperText Markup Language: for many years the only code you could use to create webpages. ASP, JSP, Javascript, CSS, these are add-ons to HTML. Every webpage at its heart was made in HTML. But in late 2001, the WWWeb consortium, which determines worldwide standards on the web, decided to discontinue HTML and replace with XHTML Extensible Hypertext Markup Language is almost identical to HTML. Their syntax is a little different. XHTML places stricter rules on the way its code is written, and is more universally compatiable. XHTML is a cleaned up version of HTML. DW works just as well with HTML than with XHTML. The point of DW was to take the coding out of the designers hands and lets designers concentrate on the designers. Don’t need to know how to code at all. Code DW writes is clean, and DW8 all write their code based on XHTML standards. DW handles all this for you. If you’re serious about getting into web design professionally, you’ll have to learn how to code a bit in XHTML and fix up code manually. If you want to learn more about XHTML, visit the WWW consortium page and find the link on XHTML, the standard, the recommendation for using it lots of other things.

It’s helpful to learn the specifics about the standard.

What is CSS?

CSS is an increasingly important concept in Web Design: Cascading stylesheets.

Provides and controls the appearance of multiple pages in your website. Instead of formatting style on each indiv. Page, CSS helps you create a collection of stylesheets, and if you change something, the change ripples through all your changes. Once a stylesheet is linked to you pages, any change you have in style will conform across all your related webpages. It’s a big time saver. It’s a powerful tool that can be used to control text and images and layout entire page. CSS helps you separate presentation of page from its structure. Structure of the page is something like the text of a heading and the text of the content. The Style of that heading and the style of that text is the kind of thing we adjust in DW8. The most important reason for separating structure and prestentation is that it makes it so easy to change your website.

http://www.csszengarden.com/

This site is dedicated for the promotion of CSS in design layout.

Go to the page, you can see the nice layout.

Then go to the link (in lavender on that page) that says “html code” and you can see the page without any CSS implementation on. They ask people to write their own CSS styles to reformat the code. The links to the CSS styles is on the link, “css file” so anyone can change the styles. Take a look at the various styles that people have changed the page with. This is neat. You can see all these different presentations of the same content.

DW has always had great CSS support in the past and it’s getting so much better. Even if you just type a few lines and make the text bold or italicized, DW will automatically make a CSS stylesheet for you.

What is DHTML?

Dynamic HTML: essentially a collection of different technology that can include any combo of XHTML, Javscript, CSS, and DOM (document Object model). Combine these technologies and create more dynamic content….something made possible include animated objects on page, letting user drag things around on page, and complicated rollovers. DHTML has the most serious cross platform and browser issues, which result in undesired effects. It’s a little risky, but DW8 can help you sample DHTML across various browsers.

What is JavaScript?

Was developed by Netscape in 1996, increasingly popular and useful. Interacts with HTML and allows you to add dynamic content like rollover buttons or you can automatically resize a browser window. You don’t need to know how to write javascript in the DW8 interface. The Behaviors panel is where a lot of javascript happens. There are tons of other behaviors available online that you can get (Behaviors/Get More Behaviors). Further extend DW’s capabilities.

Don’t confuse Javascript with Java. Java is a high-level programming language developed by Sun Microsystems. Netscape licensed the name from Sun in the hopes of increasing the acceptance of Javascript. No other real relation. The Name seemed to have worked b/c javascript is in heavy use today.

File naming conventions

Your website consists of individual files linked together. Naming them properly is really good web design practice. A lot of today’s web browsers and servers will allow you to fudge, but it’s REALLY important to have proper naming strategies.

1. Don’t use spaces in file names. Most browsers will be able to bring up page names this way. But it can complicate things. Take the webpage name” about my company.html.” Any time you add a space, it’ll be represented in the url as %20

e.g.: http://www.teacloud.com/about%20my%20company.html

in a browser. It’s ugly, but imagine trying to tell someone your address if it’s listed like this. If you really need to separate words in a file’s name, try using a hypen or an underscore, looks nicer. You also might want to consider using as short a name as possible (“about_us.html”). AboutTheCompany can also be a solution.

2. Avoid using capital letters. OK in most situations but some unix sensors are case sensitive. It’s much easier to just avoid capital letters.

3. Don’t use special characters: .”,!?/\~*&$#@( )

dots are reserved for placing before the files’ extension (.html). And slashes are used to indicate that a file is in a nested diretory. Don’t use anything other than letters and numbers.

4. File name extensions: .html or .htm

These are the extensions appearing at the end of all webpages. Both are acceptable. .htm was initially used b/c early dos servers didn’t allow for extension longer than 3 characccters Pickk one and stick with it. It’ll cause confusion. In DW you can set your default preferences to either pick one or the other.

What is an index page?

Show the folders behind an existing Website.

Notice it contains folders and files with the .html extension. A website is essentially a collection of files and folders. Main folder is the site folder. This is also sometimes referred to as the ROOT folder. Open a site window and if you don’t see any of these folders—a Windows issue—go to Tools/Folder Option/View/ and make sure that “Hide extensions for know file types” is not checked. If you check it and apply it, the .html extensions have all been removed. It’s good to see the file extensions b/c it’s important to know what file you’re working with. Files that end with .html or .htm are the actual webpages for the site. Folders contain additional webpages as well as additional folders and images that are used throughout the site. NOTICE file labeled “index.html”. this is a very important file name. For the most part you’re free to name your webpage whatever you want. But by naming your page index you’re basically saying “this is the default goto page for the entire folder.” If you fire up: http://www.uni.edu/fabos

When you type this in you’re telling the browser to find the folder containing the default site, index. If you type /index.html and enter, it takes you to the exact same page.

(http://www.uni.edu/fabos/index.html)

The Insert bar

Essential DW interface item. Create New HTML. Insert bar contains a row of icons and each of the icons represent an element that you can add to the Webpage. And a lot more icons exist that you can’t even see here.

For convenience the insert bar is broken up in several categories that you can access from this menu:

If you want to build a form on your webpage you select “form” category, and you’ll find all the tools (represented by icons) to build a form. If you select “Common” you’ll see the most common tools, such as adding tables, inserting images, adding email link. You can customize the insert bar to some extent, when you selet Show As Tabs (at the bottom of the menu). A different way to work if you prefer it that way. You can also choose “Favorites,” Customize your favorite objects. Right Click anywhere in the Insert bar, and it’ll take you to the Favorites window. Select each icon you commonly use, and add it to your favorites. Much easier to use the icons than to pull down a menu (all tools are located in pulldown menus…Insert/Image, etc)

The Properties Inspector

Probably the most important panel to have open at all times. It’s a contextual panel, meaning the context of the panel will change depending on whatever you have on your webpage. SHOW how the properties panel changes depending on whether you have a text panel up, or a table selected, etc. You’ll want it open all the time; the settings that appear here don’t appear elsewhere in DW. Make sure panel is expanded the whole way.

The Document toolbar

Runs across window. Contains several buttons and menus.

Code/Split/Design.

Default it opens in Design view. Displays your page in wysiwyg mode (what you see is what you get.) Gives you a pretty accurate depiction of what your page will look in web browser. Code button displays code. Even what appears to be a blank page will have code behind it. Split=you can see both windows. Window/Code Inspector allows you to look at the code in a smaller window off to the side.

Title: make sure you give page a good name.

Browser target check button:

Lets you validate your pages’ code to see how it’s going to stand up in different browsers. If you select the “settings” option you can choose various browsers in which you want to test your page against.

Validate Markup Button:

Lets you check your code for tag or syntax errors. Settings: it’ll take you to your DW preferences, so you could make sure you’re following strict XHTML code.

File management button:

Allows you to upload and download files from your computer to the web server and vice versa.

Preview in Browser button:

Launches a browser and allows you to view your page in the browser of your choice.

Refresh Design View button.

Allows you to Refresh design you just did.

View Options button:

If you’re in Design view, you can look at Head content, show or hide guidelines, rulers, grid, and so on. If you’re in Code view the menu changes. Split view, you have both Design and Code options.

Design view options Code view options Split view options

Visual aid button:

where you can show or hide various options you’ll be working with.

The Document window

Where most of the action in your webpage freation will occur. Let’s look at features. Tab above the file: you’ll see the name of the page itself. Don’t confuse page name with page title. The Title is what a user will see in the browser. The file name is the name of the document itself, the one that has to end in .html or .htm The * next to the file name means that it hasn’t been saved…there are things on there that hasn’t been saved. Play around w/ * appearing or disappearing, depending on whether the page is saved.

If you have more than one tab, up at the top of the menu, it makes it really easy to switch back and forth.

Look at the bottom of the Document Window: <body> tag. If there’s more content on the page, you’d see more tags (such as <table>. You can also click the tags themselves to select whatever they represent. They’re good for selecting things when elements are difficult to select.

Next across:

Selection tool (it’s selected by default, you want to have it selected most of the time); hand tool (lets you drag page around instead of scrolling); magnifying glass (sometimes you’ll want to select really small items like tiny table cells). When you use the zoom tool, the space bar quickly changes the zoom tool to the hand tool, so you can use zoom/hand interchangeably…very convenient. Also, when zoom tool is selected, pressing option/Mac and Alt/windows you can automatically change to a zoom minus sign.

PRACTICE USING ZOOM TOOL.

100%, etc. allows you to change Document Window size. Fit Selection, Fit All…

Fit Selection represents whatever is selected so that you can see it really well in the window. Fit All: shows your entire webpage comfortably in the document window.

Finally, Window Size menu allows you to select among various pre-selected window sizes. Not everyone will be able to see your page in the same way depending on what browser they’re using. With the Window Size menu you can approximate what size your windows will be. All it does to resize your window to make you see how your material might look in a browser window that size.

LAST, the 1K/1 sec is showing you how big your file size is and the approximate download speed. It’s set to assume a 56K connection.

Panel and panel groups

Each panel serves a different purpose. They’re collected in panel groups. All the bars that have these little triangles next to them are panel groups. Some you’ll use a whole lot, some hardly ever. If you click on little skinny button, all the panels shove off to the side of the screen.

Can also drag button from left to right. Skinny buttons don’t exist on the mac. (Properties panel also has a skinny button, but again, keep property inspector opens all the time). F4 will show and hide panels as well.

Each panels group has a little options menu that gives you options within that panel group. Experiment looking at the different option menus associated with different panels.

You can also grab the gripper area and drag the panel to make it a floating panel. It allows you to customize the workspace. You can also group them together (the panels). You may also just want to detach it and close it to get it out of the way completely (or by clicking on Options/Close Panel Group.

Saving Workspace Layouts

Once you spend all this time setting up your workspace the way you like it, you can save it so you can recall it later. Window/Workspace Layout/Save Current. Can find it later, by going to Window/Workspace Layout/Title (you can save as many workspace layouts as you want)

How to Define your Browser of Choice

If you want to reach the broadest audience possible, you should have the most current version of IE, Firefox and Netscape browsers. If you’re really serious, you should test them cross platform: Mac and Windows. Checking out your pages in various browsers: you should do it at every step as you go along.

Preferences/Preview in Browser If you need to add more, click the plus button. You can assign primary and secondary browsers, which will be linkable by buttons…F12 and control F12. (Mac=option F12 and Control F12). Also button in toolbar (the globe button) in the document window will connect you to the primary and secondary browsers.

Defining a site

Very important process, defining site. You could just jump into start page and start building your webpage. But that would be foolish. In order to properly manage your site, you need to let DW know where on your Hardrive where all of your sites, files, folders, etc. will be located. This all-inclusive folder is called your site folder or local root folder. The folder that resides locally on your hard drive. Telling DW where this is located is called Defining your Site. Once DW knows where it is it’ll be able to keep track of your site. Without knowing, moving an image from one folder to another may end up in broken links.

Homework

1. Site Map: Print out a Site map of the Tea Cloud site (to be handed in)

2. Site Management and Document Basics

Defining a Site

Use the Exercise file: 04_site_control for this exercise.

In this folder there is “teacloud04”. It’ the nearly completed version of the site. You’re going to want to to work with this site in DW, therefore you need to tell DW where this site is. In many cases you probably won’t be defining a preexisting site, you’ll probably be defining a site from scratch. (next session). But if you end up inheriting the job of managing an existing site, or if you want to move a site from another program into DW.

1. To define the site, come back to DW, start page, and click on Dreamweaver Site link under the “create New” column.

At top of window you see basic tab and advanced tab. Use advanced tab (don’t let advanced scare you). When you define a site, you’ll be working with it on your own computer. When you work on your own computer, you’re working “locally.” When you’re working with files on your web server, you’re working “remotely.” Make sure your Local Info category is selected. 2 very important fields. Site name and Local Root folder.

Site Name: the name you enter here is for your computer only. Doesn’t have anything to do with website; give site a name that makes sense to you. Type in TeaCloud04. If you were working on a site about New Jersey waste management, you’d name it NJwaste.

So you have to tell DW where the site is. Browse for it by clicking the folder icon. Find the folder. Make sure you select the entire Teacloud (root) folder. That’s all you have to do to get started.

Other things in local info category: Have refresh Local file list automatically. Unchecking it may speed DW up when you’re copying files, but it’s best to have it checked.

Default images folder field. This is where DW automatically copies images if you specify a folder here. If you don’t have it already, it’s good to have an Images folder.

Http:// field: leave it blank right now…not that important at the moment.

Case-sensitive links field: you should know ONLY TO USE lower case letters, so this shouldn’t be a problem.

Cache: Enable cache…..address this later.

DW becomes a conduit through which you can interacting with the folder on your desk top.

File and folder management

You can see the contents of your folder in the File panel:

Once you’re site is defined, you’re going want to do as much file management as possible from the files panel. Avoid making any changes from the Windows or mac interface itself. Moving files is a big no no unless you want the hassle of fixing broken links. Make all changes in DW. You can create new file folders, etc. and that will also be added on your local computer. To create new webpages within the site, select New file and create it within DW/File management system.

Adding content to the site

There’s going to be times where you’re going to want to bring in images that are outside the root folder, like on a CD or something.

To use them, you need to move them into the Root folder.

1. Go to 04_site_control folder. You’re going to bring these 3 images into DW. In your images folder there’s another folder called “locations”. Location 1 needs to go into files. You drag your desktop image into the folder you want in the files panel, and it copies it automatically into your folder. In the Properties Inspector you can point and shoot to the image you want to use (attn: in the Mac, you can’t directly drag into the image folder! But I’m pretty sure once it’s in, you can point and shoot).
2. You can also drag image directly onto your site.

Document Basics

Creating a site from nothing

1., Create a new folder to hold all web related files. You can put it on your desktop. Personally, I have one folder at home called Websites and I store all my folders within that. It’s a good idea to keep EVERYTHING that you’re going to need to work on in one folder. Including images and text files that you’re not going to use yet. SO, start with a master folder, and within that, start building sub folders, including your root folder. Keep your raw images folder, for example, outside your root folder, but inside your master folder.

2. Once you have a bunch of empty folders, now you have to point DW to the right place. You COULD go to Create New/Dreamweaver Site to get to the manage sites menu:

BUT you can also select Site/Manage Sites.

You can decide for yourself what works best for you.

You need to define a new site so Select “New”

And you’ll see the same window that appeared before (“Site Definition for Unnamed Site 1”). This time use the Basic.

Select a name for site. Skip the http:// address for the site…you can do that later, b/c you don’t have site online yet.

Then you’ll get to a new page: For the moment, choose ‘No” (you don’t want any server technology), and click Next.

“How do you want to work with your files during development?”

Edit on your local computer is the recommended method.

Also, specify on your local file where you want to store your files. This is why you spent the time creating those empty folders. Find your folder. Click Next

“How do you Connect to your Remote Server?” Don’t worry about this section right now. We’ll address it when we talk about uploading files.

Click Done.

Creating and saving a new document

3 ways to do this.

1. preferred method!!

Right click Windows/Control Click Mac, on the main site folder and choose “New File”. DW generates a new page. Create it as Index.html, and off you go. It saves a couple of steps, it’s automatically saved in root folder. Fastest way to create a new page.

2. On start page, click on “HTML” to generate a new page. DW opened a brand new fresh page. But the issue here is that it’s not yet saved, and in the right place. Whenever you create a page in this method, you have to SAVE IT IMMEDIATELY. That way DW will know exactly where it should go. File/Save, and save it in the local root folder. It should automatically display local root folder, but always double check.

Since you should always give your page a title, don’t forget to do that asap. Give it a good descriptive title.

3. Select File/New. Gives you all sorts of options as well as templates. Again, you’ll get a blank document. Save it right away. You can even create a new folder in which to save the file.

As long as everything is in your main folder, you can have as many sub folders as you’d like.

Assets panel

Very important panel, you’ll find it in the files panel group. A catalogue of all the different images, colors, links, templates, library items…things you might be using in DW, and this panel is like a one-stop shop to find access to all these different things that you’ll continue to use.

The panel is broken down into several different categories. When you open DW, it automatically scans your site and finds stuff to put into the appropriate categories. So you can have immediate access to them. If you start adding different colors to your site, you’ll see the colors there. You never need to manually add assets to your assets panel.

Occasionally you might need to hit the refresh button to give it the most current listing, but DW does add assets automatically.

With each image selected you can see a preview of what each image looks like. So it’s good to use the assets panel for previewing images before you bring them into your site.

You also may want to take advantage of your ”Favorites” category….store all of your most commonly used images. Instead of having to hunt through all of your images, stick a few in your favorites category. (The little purple button at the bottom right corner of the Assets folder).

When you go into to Favorites window the little purple button will have a minus sign next to it so you can remove favorite images.

Inserting images

Several different ways to do this.

1. Preferred method!!

Add an image to the page using the assets panel. Select image in assets panel and drag it onto your page. You’ll see the Image Tag Accessibility Attributes window pop up. This will happen every time you add an image to your page. Accessiblity is a major concern when it comes to web design. It’s about making your page as accessible as possible for people with vision disabilities and to people who will be viewing on smaller browsers (a phone or PDA, for example). Here you can put an alternate TEXT in replace of the image, so that people who are using screen readers (or audible readers), which read the text of a webpage to a person out loud, can know what the image is about. You can have this window not come up if you want to by changing your preferences. If you know what image you want you can make real quick work at this.

2. Use the Files panel. You can drag images from the files, however, you don’t see a preview of the image, so you have to know the name of the image.
3. Use Insert bar. choose picture with the little tree on it.

That takes you to a dialogue box that allows you to hunt for the images that you’ll use. You can get a preview of the image. If you don’t see it, make sure you have “preview images” checked. Problem here is there is a lot of unnecessary clicking. Much easier to go to the assets panel, find image you want, and drag it in.

When you go between Design and Code, whatever is highlighted in code is whatever you happen to be working with.

<p><img src=“images/header-top.gif” width=”720” height=”58”/>

This is what is known as a relative path. Meaning this path is relative to the page in which it appears. If you switch to your files panel, this is what the path means: In the main root folder, look for the folder called images and in that folder look for the image that has the name “header-top-gif”

An Absolute path is when you give the exact address of a file regardless to the relationship of the page it’s on. In most cases it’s not necessary to give an absolute path unless you’re linking to a website other than your own.

Accessiblity means many different things: a person with vision disabilities or a person wanting to access a webpage on a mobile phone. Some people will still surf with their images turned off so things will go faster. By providing alternative texts you can help people out who want to, for example, go faster and search using their phone. In Properties Box for the Images, there’s a little area across the top layer of the box labeled “Alt” and it’s here where you can name your images.

Inserting text

Text is the most common kind of content. Not much to show you here. A lot like working w/ a word processer. Type whenever you see a flashing cursor. If you want to put space between words, you CAN’T HIT THE SPACE BAR MORE THAN ONCE. HTML only recognizes one line of space. If you want to add space, you can insert non-working spaces or use CSS to control the position of texts. When you press ENTER after another line of text, there is an awkward space between the new line and the old line. It’s a Paragraph break. You can control this to some extent if you’re working with CSS. But what if you’re typing an address and you want the town on the very next line. Instead of a Par. Break you need a LINE break. To insert a linebreak, hold down Shift on the keyboard and then press return. (in code this will be represented by <br /> )

If you go into the code view, this is a really great way to learn the basics of HTML.

Aligning text and images

Default for alignment: Everything will be aligned to the LEFThand side of the page. You can center by putting cursor on an image or in a line of text, and choose one of these and it will center, align right, etc.

Page properties

You find Page Properties by going Modify/Page Properties or going Control J (windows) Command J (Mac). Remember this key command, b/c you’ll use it often. If you’re not going to use CSS, you can use Page Properties instead (just go to Edit/Preferences to turn off the CSS default option). You can apply a background color here.

Using meta tags

When you insert metatags you make it much easier for search engine robots to understand how to categorize your site. How do you add this information? They only appear in the HTML code, not in the document body whatsoever. Go to INSERT bar and switch to the HTML category. Concern yourself with the Head button and select Keywords. It’ll open up a Keywords dialogue box

Keywords reflect the content of the page. Pick words that any person would type in to Google or Yahoo to find your site. Separate each word with comma and space: tea, tea stores, brewing, green tea (etc). Don’t go too overboard. A lot of search engines limit the keywords you can use, and will just pass you over.

Another type of metatag is a “Site Description” which will describe site when it comes up in your website listing. If you don’t do this, it’ll take the text off the first few lines of the body of the text itself. Keep it short and sweet. In the code, these changes will be marked by “meta” You CAN add a series of keywords to every single one of your pages, but most of the time people just do this to the front page of your site.