CAS 111d
Beginning Web Site Creation: Dreamweaver - Useful Tips

CSS

CSS stands for Cascading Style Sheets. Style sheets come in three types:

  1. inline = style tags are used inline with the HTML tags.
  2. embedded (internal) = style information is in a <style> tag which is nested in the <head> tag of a single Web page.
  3. linked (external) = the style is in one .css file that is linked to multiple Web pages.

The term cascading refers to which of these takes precedence when it comes to styling a page, a line, or any other element on the page. The rules that are followed regarding precedence are long and complex.

The goal for most Web designers is to avoid using inline and embedded style, and move the style information to a separate .css file so that it can be linked to many Web pages. By linking multiple Web pages to one .css file, style changes can be made more quickly to the entire Web site.

Embedded style and .css files contain selectors and not HTML tags. There are three different types of selectors as follows:

  1. Type selectors are used to style all the tags on a Web page and are often called Tag selectors.
  2. Class selectors are typically used as exceptions to various tags that are used infrequently on a Web page.
  3. ID selectors are typically used to identify tables, table cells, or divs that are used throughout a Web site.

 

Jump back up to the top

 

 

Div Tags

Div tags are the most important and versatile layout or structural element in HTML. While the table tag may appear to be an easier structural element to layout your Web pages, there are several reasons to avoid table tags for layout.

Problems with Table Tags for Layout

In other words, if it wasn't clear from that list above, follow this one rule: don't use tables to layout your Web pages.

Instructor Note:
You can still use tables, just use them for tabular data as they were intended, and not for Web page layout. I also like to use them to contain form fields on form pages because forms lend themselves to the row and column separation that tables were meant for.

Positioning

Div tags can be positioned in three ways: fixed, relative and absolute. The choice static is the default for all items and is not generally used.

Check out this div positioning example and view the embedded CSS source to understand how they work.

Instructor Note:
When you view the link above, be sure to change the size of your browser window and scroll through the text to see how the three types of divs work on a page and with each other. This is a great demonstration of how they work!

The following links can help you understand div tags and positioning better:

 

Jump back up to the top

 

 

Dynamic vs. Static Web Page Design

This is the way Web Pages were first designed. They were static and content, structure and presentation were all part of the HTML script.

Phase 1

 

This is the the new model for static Web pages. The presentation (CSS) is separate from the XHTML.

Phase 2

 

This is the dynamic model. Both presentation and content are separate from the XHTML and can be called on command through a combination of client-side and server-side scripts.

Phase 3

Jump back up to the top

 

 

 

File Management

A pre-requisite for this course is an understanding of file management. If you want to learn more about file management, PCC offers the following courses: CAS 103 (Intro to Windows) or CAS 133 (Beginning Computers).

You will need a utility program to manage the files on your disk and on the Student Web Server (SWS). For the PC, Windows built-in file management utility My Computer (Windows XP) or Computer (Windows Vista) is the preferred program. Unfortunately, there isn't a file management utility built into the Mac OS that allows you to manage files on your disk and on a Web server, so you will need to get a program like Fetch (free trial version available).

It's important that you construct a file storage hierarchy on your USB thumb drive, complete with the necessary folders, sub-folders and files, that mirrors what you will have on the Student Web Server (SWS). If they don't look exactly the same, you will likely be falling into file management chaos (see below).

On your USB drive, you should create a folder called cas111d. Under that folder you should create the following folders:

You should also copy the Tutorial folders from the Data Files to the cas111d folder. These Tutorial folders have the files used in the textbook exercises.

On the SWS, in addition to the private folder that is already there, the following folders will be under your username folder on the SWS after you upload them all by the end of the course:

 

File Management Goodness:

To be established properly files and folders should contain names that are in all lower case with no spaces.Underscores can be used, but avoid unusual characters and extra periods or punctuation in file and folder names.

These are proper file names:

Folder names should not include extensions.

File Management Chaos:

File management chaos is a disease which can infect even the most knowledgeable computer user. Don't let it infect you. Examples of file management chaos are:

  1. When you say "my files just disappeared." Files are not magical -- they do not just disappear. You did something with them, you just aren't sure what you did.

  2. Sub-folders with the same name as their parent folder. These are just confusing.

  3. File names that include odd symbols, spaces or upper or mixed case are not appropriate. The following are samples of bad file names:

  4. Any other odd, confusing, and inappropriate folder or file usage or naming.

File management chaos will result in a deduction of points on assignments until the chaos is corrected.

 

Jump back up to the top

 

 

 

Forms

To insert a form in Dreamweaver, you can click the Forms tab, then click the Form button on the left of that toolbar to start off your form. You must always start by creating the form first in this way. This will create a red dashed box in Design view. Then you can begin to add your text fields (input tags), textarea fields (textarea tags), and all the other pulldown and check box items inside that one form tag.

Better still, instead of adding the form fields directly into the form tag (red dashed area), you may want to insert a table in the form area first to control the layout of the fields, then insert the fields into the table td's as is described in Chapter 13.

Instructor Note:
It's very important to remember: a form consists of one form tag, and all of the table, input, textarea and Spry fields are nested inside that one form tag. That's ONE FORM TAG. You are doing it correctly in Dreamweaver if, in Design view, you have only one red dashed box surrounding all of the fields of the form.

Consider the disaster if you have multiple form tags. If your Submit button is in a separate form tag by itself, it has no relationship to the fields that are in other form tags. When you click that Submit button, it submits nothing.

Unfortunately, in Dreamweaver Design, if you forget to start off with a form tag, everytime you insert a field, it automatically surrounds it with a new form tag... a new form tag for EVERY field... thus making your form useless... ugh!

To make the form work is another matter and the textbook doesn't describe this process.

Also, the SWS doesn't have the SMTP set up, so making forms e-mail doesn't work properly. For the purposes of testing a form, feel free to use the instructor's Netfirms server. This Netfirms server is a LAMP platform, so you will be using PHP as your server-side scripting language to send e-mail messages from the form.

Below is the login information for the instructor's server. Be sure to create a user folder (your name) to put the files you are testing.

Upload: ftp://gregkerr.netfirms.com

Login name: gregkerr.2

Login FTP: ftp://gregkerr.2@gregkerr.netfirms.com

Password: ask the instructor for this

View: http://www.gregkerr.net/student/yourfolder/yourfile.html

Check out the following address for a form generator:

Tele-pro.co.uk Website Contact Form Generator

Jump back up to the top

Helpful Links and Other Resources

The following are a few interesting Web pages and articles that may help you in creating your Web site:

Some useful, current statistics for Web professionals:

To learn more about XHTML and CSS, check out the following links:

To learn more about creating interesting navigational bars with CSS, check out these links:

The learn more about creating pulldown menus in CSS navigational bars, check out this link (you will need to download the project files linked on this page because the instructions are included in those):

The following link provides information on how to do a disjointed text rollover using only CSS:

The following links can help you understand div tags and positioning better:

The following is a link to download a program that creates a Flash-based picture viewer:

To validate your site for proper XHTML click here:

To validate your site for proper CSS click here:

To view some examples of Spry in action, check out the following links:

To improve the accessibilty of your site, consider the information at:

To track statistics on your Web site, Google has a variety of tools:

To learn more about XHTML and CSS coding best practices, you may want to check out the following book:

To learn more about Dynamic HTML, Javascript and AJAX, you may want to consider the following books:

To learn more about server-side scripts, such as ASP and PHP, and databases, such as MySQL, the following books are helpful:

 

Jump back up to the top

 

 

 

HTML and XHTML

HTML and XHTML are the languages used to construct Web pages. They are really the same language, except that XHTML is more formal. A good analogy to understand these is that they are basically like the difference between using slang English and proper English. Slang English is like HTML, whereas XHTML is the more proper, structured version of the language.

In the future, Web browsers will expect that your Web pages are designed with the proper grammar and not alternative versions of that language.

The main differences between XHTML and HTML are that in XHTML:

  1. Tags must be closed. If you start with a <p> tag, then at the end of that paragraph there should be a </p> tag.
  2. Tags must be properly nested, such as when used in lists or inline style.
  3. Tags and attribute names must be in lower case letters.
  4. All attribute values must be in quotes.
  5. A Doctype declaration should appear in the first line to clarify which version of the markup language you are using.
  6. Empty tags like <hr /> and <br /> should contain a slash at the end.

The mandatory minimum tags you must include in an XHTML Web page are the following:

<html>
<head>
</head>
<body>
</body>
</html>

While not absolutely required, the <title> tag should be embedded within the head section and is important to most Web designers.

Jump back up to the top

 

 

 

Linking

Absolute Links

Absolute links are links to Web pages outside your site. These should always include the full URL, including the http part. For example: http://www.pcc.edu

Relative Links

Relative links are links to your own pages in your own site.

To create functional relative links in Dreamweaver, be sure to:

  1. Always operate in a defined site in Dreamweaver (i.e., green folders, not yellow ones in the Files panel) when attempting to make relative links.
  2. Save the Web page you are working on and give it a name and location in your defined site BEFORE attempting to establish relative links.

Null Links

Null links are dummy links that don't go anywhere when they are clicked on, but create an a (anchor) tag so that it can be styled in CSS. These are used when you want to style a link, but you haven't yet created the page that it will relatively link to.

To create a null link in Dreamweaver Design view, select the item (p tag, li tag, image, or selected text) you want to create a link on, then type a # sign in the Link field in the Properties panel. In the code you will see a new anchor tag with an href attribute that looks like this: <a href="#">

 

Jump back up to the top

 

 

 

SEO

Search Engine Optimization (SEO), which basically means designing a site to be ranked well by search engines, is one of the primary challenges faced by Web designers. Here are some useful tips to optimize a Web site for good search engine placement:

  1. Have a relevant title on all your pages: site name on home page, different titles on other pages.
  2. Use relevant alt text on all your pictures.
  3. Do not use hidden text: text the same color as background, div with visibility: hidden property or display: none, or have text placed outside of normal browser window.
  4. Straight-forward HTML links are preferable, not Javascript or Flash links.
  5. Avoid duplicate content: Google and other search engines take into account the number of links pointing to your page to determine how important your web page is. If you have identical content appearing on two different pages on your website, some sites will link to one page while others will link to the alternate page. The result is that neither of those pages will be regarded as very important in the search engine's index since you have effectively halved the links pointing to your article.
  6. Validate your HTML and CSS.
  7. If you use Meta tag descriptions, try not to make them sound too generic:
    http://www.thesitewizard.com/sitepromotion/meta-description-tag-problems.shtml
  8. Use real URL links as opposed to Dynamic URL links:
    http://www.searchtools.com/robots/goodurls.html
  9. Avoid frames.
  10. Use real headings with h1 through h6. It's also best to try to have only one h1 tag per page and have it at the top of the page.
  11. Get linked to.
  12. Write good, clear content without typos.

To learn more about Search Engine Optimization (SEO), check out the following links:

To target Google directly for optimization, consider the information at the following link:

 

Jump back up to the top

 

Site Definition

The Site Definition is one of the most important aspects of how Dreamweaver functions. Once you have created a Site Definition, Dreamweaver knows

Why is this important? Because Dreamweaver remembers how everything within the Site Definition is linked together. And by "links", that means any tags that use the href or src attributes. That would include links to other Web pages, links to images, links to the CSS file, links to Flash or other embedded assets, and links to JavaScript files which include the Spry features that come with this version of Dreamweaver.

If you work outside a Site Definition, be prepared to have your links scrambled and not functional once they are uploaded to the server. Even though your links may test fine in preview, the links are likely just linking to files on your specific drive on your specific computer. Here's a perfect example of a bad relative link to a folder called nifty:

<a href="file:///C|/Documents and Settings/HP_Administrator/Desktop/nifty/">

When it says file:///C| that means a place on your C: drive on your home computer. When you upload the files, the links are still looking JUST AT YOUR SPECIFIC DRIVE ON YOUR SPECIFIC COMPUTER. They are not looking for the files you just uploaded to the server computer. In other words when someone else on their own computer (like, ahem, your instructor!) goes to use your Web pages, some or all of the links will be broken and your Web pages will look and/or act like junk. This is the biggest disaster possible when using Dreamweaver.

If you create links in Dreamweaver, within a site definition (green folders), you'll get good links. Here's a perfect example of a good relative link to a folder called nifty:

<a href="nifty/">

Folder Equivalence

Always construct one Site Definition as described in your textbook, and in the Uploading section below, for use with this course. In other words, have all your chapter folders, assignment folders, and test folders under one main folder for the class. I recommend calling the main folder cas111d.

The folder on your computer or USB drive is equivalent to the folder you have defined on the server, so when you upload your files from your computer/USB drive, they will go to the proper server folder.

For example, in the case of this class, your folder on your computer or USB drive should be named cas111d. Your folder on the SWS is your username folder, which is always your name followed by a number, like janedoe18. In this example then, cas111d = janedoe18, which means they are at an equivalent folder level and any files or folders you upload that are stored under cas111d will automatically go under janedoe18 on the SWS and create an equivalent file/folder structure. That's good file management!

After you have completed a Site Definition, you will see the folders in the Files panel turn green -- GREEN IS GOOD. Those folders are all of the ones under your Site folder which, in this example, is cas111d. Always work inside green folders. If you are working in yellow folders, you are working outside the Site Definition and probably destroying your links. YELLOW IS BAD.

One Site Definition Per Server

Also, you should only create one Site Definition per server that you are working with. Since most of this course utilizes the SWS, create only one Site Definition for that. Later on in the course, you will be asked to upload files to the instructor's Netfirms server. You should plan to make a separate Site Definition for that server when the time comes.

Instructor Note:
The textbook describes making separate Site Definitions for each chapter. This is probably one of the most baffling suggestions in the book. Nothing will create the potential for more file management chaos than creating multiple Site Definitions -- if you make one error regarding the Local Root Folder or Remote Folder, chaos will ensue. Instead, stick to the rule of one Site Defition per server and your life will be easier.

Back Up Your Site Definition

One last thing: your Site Definition is saved with the copy of Dreamweaver you are using on the computer you are using. That's great news if you are working with Dreamweaver on your home computer -- your Site Definition will always load when you run Dreamweaver. Of course, that's terrible news if you are using a computer temporarily, or one, like at PCC, that when you restart it, loses all the saved settings. In this case, and even on your home computer because you never know when it might crash, be sure to Back Up or Export your Site Definition.

  1. Click on Site...
  2. Click on Manage Sites...
  3. Choose Export...
  4. The radio button for Back Up will be selected.
  5. Click Ok.
  6. You'll be asked to save the Site Definition as an .ste file under a folder. The best choice of folder is the one the Site Definition uses as your Local Root Folder. This way, you won't lose track of the .ste file or forget which is the Root Folder.

After you have exported a good Site Definition, you can Import it again (under Manage Sites) whenever you need to on the PCC computers. To Import, you

  1. Click on Site
  2. Click Manage Sites...
  3. Click Import...
  4. Find the .ste file and click Open.
  5. Then choose the top level folder that's used for the class (cas111d usually).
  6. Click Done.

Instructor Note:
That .ste file that contains your Site Definition information is only used for that purpose. It's not a Web page, nor does it do anything other than give Dreamweaver information about the folders you are using on your computer and on the server. Of course, be sure not to delete or misplace that .ste file in case you need to Import it later.

Also, if you are using a laptop or home computer, you should only have to do this once ever since your settings are saved on the computer.

 

Jump back up to the top

 

 

Uploading

HTTP stands for hypertext transfer protocol, and it's the protocol used to view Web pages. If you want to view your files on a Web server, you must HTTP to that Web address. An address that begins with http:// allows you to view a Web page in your browser.

FTP stands for file transfer protocol, and it's the protocol used to upload pages to a Web server. If you want to copy or upload your files to a Web server, you must FTP to that Web address. An address that begins with ftp:// allows you to upload or download a Web page in a file management program such as Computer window (PC) or Fetch (Mac) or Filezilla (either format).

Instructor Note:
There, I just said it, but I'll say it here more simply: HTTP is for viewing Web pages, FTP is for uploading Web pages. If you attempt to view a Web page with an FTP address, it won't display the linked files. Linked files are images, your linked CSS, linked JavaScript, etc., etc., which is pretty much everything that makes your page look like it looks.

You will upload all your assignments to the Student Web Server (SWS) or to the instructor's Netfirms server.

 

Uploading to the SWS with a File Management Utility

To ftp to your folder on the SWS, copy and paste the following address into the address field of your file management utility, My Computer (PC - Windows XP), Computer window (PC - Windows Vista), Fetch (Mac), or Filezilla (PC or Mac):

ftp://sws.pcc.edu/student/CAS111D_gkerr_?????/

The ????? stands for the 5 digit course reference number (CRN) of this course. You can find that at the top of the main syllabus page.

You will then be required to put in your Login Name and Password to be able to place files in your private folder. Your password is your PCC identification number (it starts with a capital G). Be sure to use a capital G. You will not have to log in to place files in the shared folder.

 

Uploading to the SWS with Dreamweaver

You will use the Manage Sites function in Dreamweaver to prepare to upload your Web pages to the Student Web Server (SWS). Uploading a file is called "Put a File" in Dreamweaver. Refer to the textbook for more instructions on using these functions.

At the point where you are asked to provide information for Sharing Files, you should include the following information to use your user folder on the SWS.

After creating a site using the Manage Site function you can Export the definition and save it on your disk for use later.

 

Viewing your Files After Upload

To view your folder on the SWS, copy and paste the following address into the address field of your Web browser:

http://sws.pcc.edu/student/CAS111D_gkerr_?????/

Then replace the ????? with the 5 digit course reference number (CRN) of this course. You can find that at the top of the main syllabus page.

 

 

 

Jump back up to the top

 

Web Site Creation

The proper process to designing and developing your Web site is best organized into these steps:

  1. Plan your Home Page: either on paper, a dry erase board, or in a graphic design program like Photoshop. Be sure to mark off the rectangular quandrants or zones that the page can be divided into and give those zones names. Those zones will be the divs and their names will be their IDs.

  2. Create the Home Page Structure: this means insert the div tags on your home page. Just like they are your children, give all your divs unique names (using the ID attribute in the HTML). For example, if the upper left most div will be the container for your logo, then give it id="logo" as an HTML attribute. You may want to give your divs some minimal styling at this point, such as giving them height, width, z-index, and a type of positioning (relative, absolute, or fixed). To do this part, create ID selectors in the CSS that correspond to their ID attributes in the HTML. If you are designing your Web site with a table (NOT RECOMMENDED) then give all your td's IDs, too.

  3. Add Content to the Home Page: add text or pictures into the divs as appropriate. Also, add a navigational bar (menu buttons) using an unordered list. Give the navbar an ID attribute in the HTML. Call it something like "navbar".

  4. Style the Page with CSS: it's best to start with tag selectors to provide the bulk of your styling. Then add ID selectors and their descendant tags for the navbar, then finish off styling the div ID selectors that you started in step 2 above (give them color, borders, etc.). Finally, create and apply class selectors if you need to make any exceptions to the style you created with the tag selectors. Give your class selectors names to describe their function and also names that you'll remember when you have to find them later.

  5. Add Scripting: include client-side scripts (JavaScript), Spry (or other AJAX), and set your form actions to whatever server-side script files they will be referring to. You may also want to create and test the server-side scripting files at this point especially if they provide password protection or a site search feature to your home page.

Once you have a well structured and well styled home page, you can make copies of it for your other pages. Then all you'll have to do is update the links and change the content. Voila!

 

Jump back up to the top

 

Web Platforms

Click here to view a table that demonstrates the relationship between various, common Web technologies.

 

Jump back up to the top

 

 

 

Copyright © 2008-03-21
Greg Kerr