Advanced Layout with Tables and Pixel Shims

Hey gang - this came up and this is a good analysis and reference for dealing with this sticky subject:

http://www.goshen.edu/communication/comm326/tables/tableshim.shtml

Cheerio! B

Class this week - download this file and get goin' with Templates!

Hi gang - for those of you who missed class, or didn't have a way to save the files we worked with - you can download them here:

http://www.twinlizards.com/site_fun.zip

In there you'll find a folder called "Templates" - this contains BRIT.dwt (dreamwaever template) (You'll also see the source file, nav.png, that I created in Fireworks and subsequently exported as HTml with image - thos are also included in the folder if you'd like to have a look at how the header table is composed.)

Then create a new site in Dreamweaver as we did in Week 3 - then choose New from the File menu - and then "from Template" - then locate your template. And then create it and Bob's your uncle!

You may need to save the template into the local folder you created for your site - if you do, make sure to just put the whole Templates folder in there.

Then you'll have a nifty Dreamweaver template to base the rest of your site on. This one is about the Revolution - and yes, Menifesto is misspelled - DOH! But you get the picture.

in class I asked that everyoen create several pages from this tempalte and name them corresponding to the navigation buttons on the template - so, HOME would be index.htm, About is about.htm, Manifesto is menifesto.htm, etc. Then save those files. Make some changes on the template - and then save them. The Template askes you if you wish to update the files that are attached - yes you do! And then see how your created files are now updated with the changes you made to the template.

Voila!

You may also find this of great interest:

http://www.macromedia.com/devnet/mx/dreamweaver/articles/dw_templates.html

It's a good article at Macromedia on using templates in Dreamweaver. Let me know if you have any questions;

Email me here.

Macromedia - Five Steps to More Professional Pages with Dreamweaver MX

Macromedia - Five Steps to More Professional Pages with Dreamweaver MX

OK - so this stuff is a bit advanced - bvut one day it won't be. And I found good informatoin in there and so will you - and extra brownie points to anyone who brings questions about this to class on Wednesday!

Cheerio!

Web Tool Process Documents

AMPS . Web Tool Process Documents

GREAT examples of what wireframes, sitemaps and yes, content inventories might look like. These are indispensible tools for every web designer.

Information architecture concepts

Information architecture concepts

Usability, Information Architecture, design and layout, website tips for designers, websitetips.com

Usability, Information Architecture, design and layout, website tips for designers, websitetips.com

Glen Doss .com : Research : Web Design, Information Architecture, Project Management

Glen Doss .com : Research : Web Design, Information Architecture, Project Management:

This is a good collection of web design deliverable examples by a most thorughtful information architect.

"The following are the most widely used IA deliverables. However, there are additional deliverables which some consider to be the responsibility of the IA, while others would assign them to perhaps a PM or designer. The most widely used name for the deliverable is listed with additional synonyms listed below."

Content Inventory < -- most relevant for larger sites
Use Case < -- get into the head of your user
Process Flow < -- how does your user move through your site?
Site Map < -- very important tool
Wireframe < -- likewise
Paper Prototype < -- good when you are developing a large site with different users
Story Board < -- wireframes with pictures and documented functionality and user interactions

Most important for our group is the sitemap and wireframe. This site has downloadable examples.

An Atlas of Cyberspaces - Web Site Maps

An Atlas of Cyberspaces - Web Site Maps

This is a good collection of different kinds of sitemaps as well as some links to site mapping applications. Site maps are an essential tool in both the planning of new and the extension of existing websites. Check it out!

Webmonkey | reference fun for everyone

Webmonkey | reference

Hey gang! that link takes you to the top level reference page at Webmonkey. This includes the HTML cheat sheet as well as some others that will proves useful to you:

Special Characters - Want to know how to get a © or a ® on your pages? Here's the code for all those funky characters.

Color Codes
See all the pretty colors, then use their hex codes to spruce up your backgrounds, table cell colors, and life.

And a bit more advanced - but necessary - make sure your code appears corectly on all (Windows) browsers - cause all machines, platforms and browsers are not created equal...unfortunately:

Windows Browser Chart
Can't keep track of which browser supports what? Now you don't have to — it's all here in one handy-dandy chart.

And there's more at the main link above - and here.

A great Dreamweaver tutorial

While this is oriented towards V4 of dreamweaver - it gives you a good round-the-block experience of working with Dreamweaver.

if you have time outside of class - this will take you either to the next level - or generate questions that will.

Macromedia Dreamweaver - Dreamweaver 4 tutorial (printable)

Please let me know, those of you , who would like to do this tutorial.

B (click here to email me)

Tutorial and Article Index at Macromedia for Dreamweaver

Hey gang - this is good - DreamweaverTutorial and Article Index at Macromedia

Which to use: frames or tables?

Macromedia Dreamweaver - Which to use: frames or tables?

A thoughtful look at a common question. Frames - while nifty - aren't always a good idea. in fact...often they can be a bad idea.

Macromedia Dreamweaver - Understanding basic HTML

Macromedia Dreamweaver - Understanding basic HTML

A Good HTML reference from the folks who bring you Dreamweaver.

Dreamweaver Tutorial

Dreamweaver Tutorial

Hey guys - check this out - great overall tutorial resource for you.

Branden

Welcome to the Blog!

This is a great place for us to keep track of what we're doing and what resources we have available to us.

First off I want you to check out Webmonkey's HTML cheatcheet. This - and the rest of the site - is very useful!

I'd also like you to know about the support site for Dreamweaver. Macromedia have done a lot of work to make this the best web development product on the market - and their site reflects their commitment. You can find anwers to questions, tutorials, extensions for your program, discussion groups - the works. Bookmark it!