Webspace

Create a home base/webspace/website/ for research and experimentation.
Consider this site as a sketchbook or idea warehouse. _levels 1 and 2Site contents must include an index, statement, portfolio, contact and links pages.
Do not use flash until the page works graphically, without animation. Examine how pages are created on other sites.
Analyze the navigation strategies. Define the site’s emotional center using Hillman Curtis’ method presented in his book,
Flash Web Design. Experiment with bg images, rollovers, drop down menus, named anchors, email links, image maps,

For the initial demonstration we will define a site in Dreamweaver, and create an empty, titled, index.html page. Rename and save this page as links.html, portfolio.html, contact.html and statement.html. Link them together with simple text/html links so you can navigate from one to another. I will demonstrate this in class, along with other template techniques.

The more simple sites you create, the faster you will learn, and the easier it will be to incorporate more sophisticated techniques._all levels: Investigate the links in my link section. Think about the the web/virtual/monitor environment as an installation space or exhibition venue. Consider working outside the computer monitor in installation, broadcast, audio projects.

_notes Having a web presence necessitates an understanding of many different technologies and WYSIWYG programs: Macromedia and Adobe products, javascripting, actionscripting (Flash), Browser characteristics and limitations, and platforms. This requires constant research, experimentation. development, and application. _popup windows Sooner or later you need to open an image, a movie, in another window. Getting rid of borders, having the window appear in a particular place, having the image or movie fit correctly in the window...these are issues addressed by different technologies. the DHTML link below is a nice solution, but is designed for a text link, and it takes some knowledge and tweaking to make it work for an IMAGE MAP or THUMBNAIL image. OPEN PICTURE WINDOW FEVER is a dreamweaver extension that works well for thumbnails.

http://www.dhtmlshock.com
1 Keep in mind this creates a text link. Clickable thumbs, image maps will have to be tweaked
2 the correct pathname to the file is important. remember, you can change this in dreamweaver.

_dreamweaver notes 1 The best resource to begin with is the macromedia site. There you will find extensions, tutorials, and forums.

2. Extensions will augment the standard toolbox that came with the program. Learning to download and use extensions will increase your productivity.

3. The new media enterprise is often one of working alone, using tutorials, manuals, and experimentation in order to learn.
When you have a problem the best thing to do is go to an online resource, a forum, where you can post your question. Usually, within a day or so you will get answers from the group.

4. Information on this page will continue to expand. It is Dreamweaver specific. Information on javascripting, xml, browsers, will be found on the notes/web section of this site. _text Style sheets (CSS) provide the most control. The cleanest generic html font I have used is geneva 1 point. It does not blur like verdana does in some resolutions. PC does not support geneva, and converts to arial. _image maps potential problem. If you create library items using image maps, name them with unique names. If you do not, then upon dragging them into a page, they will be confused with image maps already on that page, resulting in image maps placed in the wrong areas or not working. You can name image maps in the properties window. You can name tables and layers as well to avoid confusion. _remove underline on links put the following code in between the head tags:
<style><!--
A { text-decoration:none }
//--></style> _Change color on rollover put the following code in between the head tags:<STYLE type="text/css">
<!--
A:hover { color:red }
-->
</STYLE>for more on this go to:
www.smartwebby.com/web_site_design

_back-to-top anchor not taking you all the way to the top? remove the 'paragraph' format at the top and change it to 'none'

_library items and templates using these can save you immense amounts of time. Learn to use them.

_define your audience This will affect your design decisions, connection speeds, page sizes, browser limitations.

_define the emotional center of the site Use Hillman Curtis' method of defining the three most important ideas driving your work. This allows you to coordinate the elements and principles of design present in your site : emphasis, unity, contrast, movement....

www.macromedia.com/support general support area.
macromedia.com/dreamweaver/ Forum for designer/developer.
/webmonkey/ developer resource. tips.
www.adobe.com/web/tips tips from adobe software co.
javascript.internet.com/ free javascripts 

_tips 1. Build up your font library and obtain a font juggler of some sort for your system at home.

2. Get a copy of the extension used to get rid of the line created around a link that has been clicked - my copy is called IE Link scrubber and came with "Dreamweaver 4 Magic". This does wonders for the look of your site.

3. Visit linkdup.com frequently and get on their mailing list.

4. Sign up for user forums and daily mailings on the Macromedia and Adobe webistes, for example Dreamweaver, Flash, and Photoshop. The sooner you overcome the technical learning curve, the sooner you can spend your time making art. This involves an investment in time and effort. Some of the most noted new media artists and theorists have worked as web designers and programmers. The integration and understanding of design, fine art, scripting, 3rd party software, multiple platforms, and many other elements allows you to communicate effectively.

5. Research typography and page layout. Experiment with javascripting, actionscripting, and css styles. Learn as much as you can about video, audio, and 3d.

6. Read theory to contextualize your artwork. Write and re-write your artist statement. This section does not try to take the place of the many online resources that provide tutorials and downloads. It is a place for notes on various things that come up during class or working with Flash. _flash is used not just for effects and animation that provides visual interest, but for the layering of information, as described by Edward Tufte in Envisioning Information.

Example: Folder tabs instead of scrolling down long html pages. Or panel scrollers. Or sliding panels, or the text scroller you may be using throughout this site.

What we will discuss is the application of these technologies. Are they appropriate to the work? Trendy eye candy or efficient navigation aids? _flash text

1 Use a pixal font and follow directions that come with the font or are on the font website (listed on the previous teaching page under fonts) 2 if it is blurry on one side, try center justifying the alignment, or snap to pixal/object. Make sure there are no fractions when you select the text and view the placement coordinates. Sometimes however - you can break this rule and add .5 to the placement if the 0 0 coordinates still apppear fuzzy.3 In some instances you make it dynamic and save the outline4 Scrolling text fields are dynamic text. The cleanest dynamic font is geneva 10 pt for mac. Unfortunately, PC doesn't have geneva, so it converts to arial, which nis less pleasing. You can also make the scroller using a panel. See components in the flash library. _preloaders When you do incorporate flash into your web experience, you will need a preloader to let your audience know the loading status of the page content.

There are many recipes for preloaders. I use two on this site, one from Flash MX magic and one from flashcomponents.net (there are 2 at that site: one called loader, the other preloader). There is also one listed in the Peachpit Press Advanced Flash bookRegardless of which you select, be sure it utilizes the new 'get bytes loaded' command, and not the 'if frame loaded' command previously in use, and now not supported. Once you create one that works, it becomes a library element that you can drag into the first frame of every movie you make.instructor note: see hypermedia_spring_2002/grodner, jarrel, reneau for examples of student sites