moock>> web>> sheridan lecture notes

WEB DESIGN LECTURE NOTES

WEEK 3: DHTML, WEB AUTHORING TOOLS, IMAGE PRODUCTION

intro to javascript and dhtml
last week you learned the basics of creating a single html page. your page had some text and some images, but the only interactivity it had was hypertext links. you've explored the web enough to have seen more advanced tricks...things like images that change when your mouse hovers over them, or windows that popup at specific sizes, or fill-in-forms that warn you when you're missing information, or even animated interfaces with menus that appear and disappear. those kinds of features on the web are outside the scope of straight html. building them requires the kind of math, string handling, and logic that you normally only find in a programming language. no surprise, then, that there actually is a programming language behind those tricks. it's called javascript.

as early as the days of netscape 1.0, web designers and developers started requiring programmatic behaviour in their pages. netscape responded by inventing livescript, a client-side programming language for web pages. before the new language was released in version 2.0 of netscape's browser, it was renamed to "javascript" as part of a marketing agreement with sun, who wanted to promote netscape's support for the unrelated, language "java". soon after, microsoft implemented their own breed of javascript known as "jscript". with both microsoft and netscape offering a relatively compatible scripting language for web pages, many content producers started incorporating programming into their pages.

it wasn't long, though, before early javascript programmers met the limits of the medium they were working in. sure, programmers could make their pages react when the user placed their mouse over a link, but what if they wanted to make it react when the user's mouse moved over a term in a paragraph? or what if they wanted to let the user drag the paragraph out of the way, or hide a toolbar? after all, as the web developed, it became clear that a site could be much more than a storage repository for networked information--a site could actually be exactly like any computer application, the only difference being that instead of writing a letter or balancing a spreadsheet, the user would purchase a sweater, or transfer funds between two bank accounts.

not wanting to lose the flexibility of markup and its data-handling abilities, but desperate to address the needs of the growing web medium, the w3c responded with a master plan for the advancement of html and web programming. first, it would support the standardization of javascript and jscript into "ecma script", a language to be maintained by the third party, ecma, a european standards organization. second, it would allow web authors to completely separate content from display by formalizing and advocating the use of css, a style sheet language that could externally dictate the appearance of the content in an html file, thereby leaving its data untouched. lastly, it would propose the marriage of client-side display with client-side programming through an updated version of html known as "dhtml", or dynamic html.

dynamic html introduces the notion of a document that is treated as a series of components, not a string of text. in dhtml, every tag in the document (and its contents) becomes an abstract object. as such, it can be manipulated by a programming language (moved, reformatted, searched), or can send events to a programming language (like mouse activity or time passing), and can be formatted by external style sheets (css), and repeatedly *re*-formatted programmatically. to accomodate for all this mutable content, the 4.0 browsers introduced the ability to layer content on the page.

in everyday web authoring terms, dhtml is usually used for animation (making things move around on the page), or advanced interactivity such as drag'n'drop, autoscrolling, and reactions to mouse use. and dhtml promised to be even more powerful than that...versions of the classic arcade games "space invaders" and "asteroids" have even been created solely with dhtml and javascript. but unfortunately, dhtml development is ridden with compatibility problems (microsoft and netscape have implemented dhtml and css differently since the beginning), and can be unstable, causing browsers to crash due to programming errors or browser bugs.

despite these problems, some web authoring tools are attempting to make dhtml production possible for the masses. macromedia's dreamweaver is currently the most successful at it, allowing authors to work in a visual environment, and writing the cross-browser code for them. macromedia also supports their product with an information resource site about dhtml called dhtmlzone. we'll be looking at building basic pages with dreamweaver, but exploring its dhtml features will be left up to you. be warned that if you use dhtml, you may end up creating an unstable site, and your site will only be accessible to people with 4.0 browsers. the rule of thumb is test, test, test. the best dhtml around these days is usually written by programmers that can hand-code fixes to problems. if your goal is strictly visual (eg. animation), you may be better of working with macromedia's flash plugin which we'll cover in the second half of the course.

intro to dreamweaver (2.0)
last week you tried making your first web page by hand-coding your own html. this week you'll try creating your second web page using a visual application, macromedia's dreamweaver. while working with dreamweaver, you'll spend most of your time in its wysiwyg mode, where you create web pages using dreamweaver's tools to visually approximate what you want it to look like. there are, however, two other aspects to basic page creation in dreamweaver: 1) code-edit mode, where you can directly hand edit the html the way you did in last week, and 2) preview mode, where you launch external browsers to check what your page is actually looking like.

let's take a look at the basic tools you'll be using to make pages with dreamweaver.

the dreamweaver workspace
when you launch dreamweaver, you are presented with a document window and three toolbars--the properties inspector, the object palette, and the launcher. these four components contain everything you need to create basic web pages.

the document window: the page you are creating lives in the document window. as soon as dreamweaver loads, you can simply start typing into the document window, and you've already got a basic page (though you can't see it, dreamweaver adds the standard html document skeleton needed to create a valid web page). as you build your page using the tools in dreamweaver (or by typing raw code in to the html editor) the document window will display it visually.
the properties inspector: the html attributes for the element in which the cursor is located are displayed in the properties inspector. using the properties inspector you can modify the current tag's available attributes. as you move the cursor around your document, the properties inspector will change to reflect the different attributes of the html tags in your document. in addition to attributes, the properties inspector can also be used to change some tags, for instance to change a paragraph tag into an <H> tag, or into a list item. by default, the properites inspector only shows the basic attributes for each element. to see a more complete selection of attributes, click the little arrow on the bottom right of the inspector.
the object palette: you insert more complicated html components and externally embedded objects into your page using the object palette. the object palette has four panels, each of which contains a group of things you might want to put on your page. most commonly you'll use the object palette to add tables and images to your page, both of which are located in the default common panel. the other panels are: forms (for creating user-feedback forms), head (mostly for adding meta-information about your page), and invisibles (a collection of elements that don't show up on the page when added--things like comments, breaks, and script tags).
the launcher: by clicking the buttons on the launcher, you can access dreamweavers advanced page creation tools and palettes.

the site window, used to manage your pages as an integrated site (creating pages, moving pages, transfering pages to a server, handling version control, etc). we won't be covering this aspect of dreamweaver, but it can be a useful means of working with your pages as an integrated whole. try going through the built-in dreamweaver tutorial to learn more about the site management tools.
the library palette, used to manage components of your pages that are reused commonly. you can only use the library if you set your site up to work with dreamweaver's site management tools.
the style palette, used to add css styles to your document. this is a very attractive feature of dreamweaver that we'll cover in some detail.
the behavior inspector, used primarily to add javascript events to elements.
the timeline inspector, used to govern animation and events that occur over time on your page. this is one of dreamweaver's claims to fame because it allows non-programmers to create dhtml-based animation and interactivity that works on both netscape 4+ and ie 4+. because of the complexity and problems inherent in dhtml, we won't be going into depth with it. instead, we'll look at using flash to create stable, vector based animation and interactivity for the web.
the html inspector, used to hand-edit the actual html code dreamweaver creates.

making a page in dreamweaver
in class, we'll walk through creating the same page you made last week, but this time we'll make it with dreamweaver. once we've finished making that basic page, we'll move on to making a simple table (we'll do tables as layout devices next week). here's what we'll cover while using dreamweaver:

starting a new document
examining the html skeleton using the html inspector.
saving your page
previewing your page
making headers (<H1>, <H2>, etc.)
changing font characteristics using the properties inspector (size, font face, colour, style, alignment)
changing font characteristics using css and the style palette
adding an image
creating a link
inserting a table

preview your work
dreamweaver does a decent job of giving you an idea of what your page will look like while you work on it. it is essential, however, to look at your work in all target browsers on a regular basis (a target browser is any browser you know will be used to view your site). for a site with a generic, broad audience, you should be examining every page you make in netscape 3 and 4, and microsoft internet explorer 3 and 4 on both mac and pc.

to examine your document while working in dreamweaver, you can use the preview in browser command under the file menu. choose from the browsers available, or add the browser of your choice to the list using edit browser list. if you are using css (cascading style sheets) to dictate the look of your document, it is extremely important to test in both netscape and ie as those browsers have serious differences in their css display capabilities. be aware, though, when you're using preview in browser, that dreamweaver launches a new browser window each time you issue a preview command. it's therefore probably easiest to simply open your document in a browser and switch between dreamweaver and the browser to view your pages.

another tool offered by dreamweaver for resolving compatibility issues is the check target browsers... function (found under the file menu). use check target browsers... to have dreamweaver produce a list of what it considers to be the unsupported aspects of your document per selected browser. dreamweaver will render its evaluation in your default preview browser. generally its reports are quite valid, but css differences are not covered, and really it's always best to actually test in the browsers themselves.

the table tag
at a glance, making a table might seem like something you might only use occassionally when you wanted to present data specifically suited to a row/column arrangement. in fact, tables are actually one of the foundations of web design, particularly in page layout. next week we'll cover the use of tables as a layout device, but for now we'll simply learn how the tag itself works.

the table element is like most other elements: it has a start tag and an end tag. so the basic structure of a table looks like this:

<TABLE>
</TABLE>

once you've declared the beginning of a table with the table start tag, you add rows and columns with the row tag, <TR>, and the column tag <TD>. each row and column tag has a start and end tag, and column tags are nested inside row tags.so a table with a single row and two columns looks like this in code:

<TABLE>
     <TR>
          <TD>this is content in cell one </TD>
          <TD>this is content in cell two </TD>
     </TR>
</TABLE>

which will give you a table that looks like this:

this is content in cell one this is content in cell two

by adding attributes to your table start tag, you can affect the look of your whole table. for example, to give your table a border, use the "border" attribute and specify the border width (in pixels) as a number between 1 and 10. to change the background colour of the cells in your table, use the "bgcolor" attribute to specify a colour value in hex. by adding border and bgcolor attributes to our table start tag (above) like this: <TABLE BORDER="1" BGCOLOR="#FFCC99">, we can produce a table that looks like this:

this is content in cell one this is content in cell two

some common table attributes are:

CELLPADDING="0" (remove space around content in cells; or set higher than 0 to add space)
CELLSPACING="0" (remove space between cells; or set higher than 0 to add space)
WIDTH="100%" (force table to be as wide as the browser window)
WIDTH="600" (force table to be 600 pixels wide; change 600 to specify desired width)
HEIGHT="100%" (force table to be as high as the browser window, unless the table's contents are longer than the browser window).
ALIGN="CENTER" (center table on screen; use "LEFT" or "RIGHT" for alternate alignments)

you can also change the look of each table cell (<TD>) with attributes. in addition to the commonly used WIDTH and BGCOLOR attributes for <TD>, you can also set the vertical and horizontal alignment with VALIGN="MIDDLE" (or "TOP" or "BOTTOM") and ALIGN="CENTER" (or "RIGHT" or "LEFT"). you can prevent the text in a table cell from wrapping by using the "NOWRAP" attribute (it's a standalone attribute that doesn't take a value).

here's a final table example that shows some of the discussed attributes in action (try viewing the table in both netscape and ie to see their different rendering of the code):


<TABLE BORDER="0" 
	CELLPADDING="10" 
	CELLSPACING="5" 
	WIDTH="80%" 
	BGCOLOR="#CC9933" 
	ALIGN="CENTER">
  <TR> 
    <TD BGCOLOR="#FFFFFF" ALIGN="LEFT">
	<FONT COLOR="#000000">this is content in cell one</FONT> 
    </TD>
    <TD ALIGN="CENTER" NOWRAP>
	<font color="#FFFFFF">this is content in cell two</font> 
    </TD>
    <TD BGCOLOR="#000000" ALIGN="RIGHT">
	<font color="#CCCCCC">this is content in cell three</font> 
    </TD>
  </TR>
</TABLE>

this is content in cell one

this is content in cell two

this is content in cell three

creating web images with photoshop
just to be clear: this is definitely not a course in photoshop. most, if not all, of you are already using that aged piece of software, so i'm only going to explain how to set it up for working on the web, and how to export images from it for web use.

setting up your work environment

first, open your photoshop preferences under the file menu. select units and rulers and change the rulers units to "pixels" (not "inches" or "points" etc).
while still under preferences, select saving files, and set file extension to "use lower case".
when you create your new image, be sure the rulers are shown. if there are no rulers around your image, select view, then show rulers. the rulers show the exact pixel dimensions of your image, and make adding guides easy. get used to working with guides. make sure everything is pixel perfect by aligning components of your image with guides. to add a guide, click on a ruler and drag your mouse onto the work area of the image. a guide will appear, which you can move later when you have the move tool active.
if you are not already in rgb colour mode, change to it now by selecting image>>mode>>rgb. do *not* use cmyk mode when creating web graphics.
set the resolution of your image to 72 pixels/inch (aka "dpi") by selecting image>>image size, then entering "72" under print size>>resolution.

using the chart below, set the dimensions of your image depending on your target screen width. to cover all audiences, use the 640x480 setting. anything above 600x800 is currently not recommended as you'll be excluding large amounts of most visitors from viewing portions of your site.

*to address this resolution*	*use these dimensions*
640w x480h	600w x 300h
800w x 600h	760w x 420h
1024w x 768h	955w x 600h

exporting an image

decide what kind of image you're going to use. if your image has lots of colours or subtle gradients, try a jpeg first. if your image is fairly flat with fewer colours in bold segments, try a .gif. if you're unsure, try both.
to export a .gif, follow these steps:
1. select the area of your image you want to export as a gif.
2. if your image is a single layer, use edit>>copy to copy your selection to the clip board. if your image is multilayer, use edit>>copy merged.
3. create a new document (file>>new). the document should automatically size itself to match the dimensions of your selection.
4. paste the contents of the clip board into the new document (edit>>paste).
5. convert to indexed colour mode by selecting image>>mode>>indexed color. (yes, it's okay to flatten the layers). under "palette" choose either "exact" (if it's available) or "adaptive". under "color depth" choose "8 bits/pixel". under "dither", choose "none". under "color matching", choose "best".
  
  (...short colour digression: you may have noticed that there is a web option available under the "palette" setting. there are cases where using it is appropriate, but we're trying to get your images working relatively quickly without getting stuck deep in the muck of web colour optimization. if you want to serve as many audiences as possible, and produce highly consistent colours, with the smallest file size, you'll have to make a thorough study of the subject. a decent place to start is is lynda weinmann's book, coloring web graphics 2. a good rule of thumb for colour-choosing is to make all flat areas of colour use multiples of 51 as their rgb values (ie, 0, 51, 102, 153, 204, and 255). that will ensure your colours fall in the standard colour palette supported by browsers on mac and pc. anyway, back to exporting a gif...)
6. use file>>export>>gif89a export to begin saving your file as a .gif. you'll be shown a preview of your image. to make part of it transparent, click on colours in the palette or in the preview window. any colours you select will be invisible in the browser. after you've chosen your transparent colours, click ok.
7. name and save your image.
8. that's a pain, right? i think so too. so i created an action for photoshop that pretty much automates the tasks outlined above. you still get to make choices along the way though, like a happy little meat bot.
9. when you are sure you have the final image exported, optimize it with a tool like image ready, fireworks, or ulead gif saver. alternately, try an online optimization tool like gif cruncher, which yields excellent results.
to export a .jpeg, follow steps 1-4 for creating a .gif, then:
1. select file>>save a copy.
2. name your file and select the jpeg format instead of the .psd format.
3. under jpeg image options, choose a quality level to save at. try to balance file size with quality...export several copies until you find one that doesn't look too messy. something around 2 or 3 is often good. if you have image ready or photoshop 5.5, you can actually preview the jpeg before you save it.
4. under jpeg format options choose baseline ("standard"). then click ok to save your image.