Begin thinking about your website project

Portfolio Project: “A cabin, not a mansion”
Building a Simple Website Using Dreamweaver

All students are asked to produce a fully-functioning, portfolio-ready website using Dreamweaver as discussed in class. As you learn new elements of Dreamweaver, it is expected that you will apply them to your class project website. At the final class, we will share our class projects.

Topic: Choose a personal topic for your website. Examples could be a website about yourself or your family, a site promoting a specific event or business, a fan site, a special-interest site about a hobby or activity, instructions for making or doing something.
You will need at least a few paragraphs of written information to include on the site, as well as some photographs or graphics.

Basic Requirements: Your website must consist of five pages. Possible pages might be:

• About Yourself

• Contact Us

• Home/Welcome page

• Links

• Photo Gallery

• Site map

Dreamweaver Requirements: Your site must include the following Dreamweaver-generated elements. These are minimum requirements, and do not need to appear on every page.

• Cascading Style Sheets

• Form (need not be fully functional)

• Links, relative and absolute, and two external links

• Persistent navigation and consistent design*

• Rollovers

• Tables

• Template or library items

*Design/Navigation: All pages of your site should have a consistent design and persistent navigation (user interface) for your site to be considered complete.

Summary: By the time you have finished creating your website, you will have the skills to produce a fully-functioning website using Dreamweaver. You will have a good working knowledge of the Dreamweaver program and a good framework for learning to apply some of Dreamweaver’s more advanced features.

First Steps Checklist (generally speaking)

1. Create a folder for your client
2. Create sub-folders:
   Correspondence (I date each email, viz. 20090121_dive_page, and either email subject name or other descriptor) You might also include your responses to emails here.
   Site (this does not need to be the site name, but should be the folder into which all site files will go)
   Working (content and images files as received; your own .png files, .fla files [though those might all live in a subfolder to 'working'], as well as your exported .gif and .jpg files)
3. Create your site definition in Dreamweaver, pointing to your "Site" folder as the container for your site files.
4. {and here a miracle happens...} Create your site pages

First Time Blogging

This is the very first time that I have ever used a blog, so please be accepting of my slow approach to this. Please inform me if I ever break any blogging etiquette rules -- I don't know any better.

What I would request from my class members and Beth is that you provide me with feedback regards my website http://www.cybresllc.com (Cyber Research, LLC). I am making my Class Project the complete re-writing of the website using Dreamweaver. I know that it currently has no WOW factor whatsoever.

Thanks. Bob A.

Cheat Sheets

Don't hesitate to make 'Cheat Sheets' for yourself; they will be more concise than simply rereading the book. Put the citation for the book (title, page number) so you can look at it in depth when you need a refresher.

You might work out a standard format, like a recipe, that tells what the task is, a general description of how it is done, then specific step-by-step instructions.

When Should I Start From Scratch?

If you have a website that you would like to improve, think hard before you jump in and adjust it in situ. You may have a better time of it if you re-create it using the new techniques you are learning in Dreamweaver CS4. Remember, straightening bent nails (not to mention sanding off the rust) is time-consuming and not at all rewarding. 

I encourage you to do as much 'test-driving' as you can, on many small 'working/testing' files. As you go, you may build yourself a library of snippets or techniques that will be a good resource for your further work.

Visual Hierarchy

The largest headline gets the most attention, shouting at you! This might be major headlines, or page titles

Here's another level of hierarchy, in the same size, but not bold

The next size may be a subhead or a less-important item. This size might be used for different sections on the page.

Again, the same size, but not bold

...

The very smallest might be footnotes, or commentary...with or without bolding and italicization...

Another, possibly better way to think of hierarchy is levels of generality, as an outline:

A. The major headings (or maybe the page title)

  1. Sections on a page

a. Text

i. Captions or footnotes

Is it possible to 'read' your web page or your web site on each of these levels? Can you learn something...in increasing levels of detail...by reading just the major headings, or just the section headings, or the captions, or must you always read all of the text?

Remembering that you have a very few seconds to capture your viewer's interest and attention, do you make it easy for the viewer to get your message?

Visual hierarchy can also refer to images, colors, and backgrounds. If your site or page is uniformly exciting, is it confusing? Do you need to help the viewer to focus on what you believe is most important? If the background is too lively, do you really want the viewer to get hung up on the wallpaper and not read the content? Always, the answer is "maybe", but (in truth) not usually!

We'll play with hierarchy of type on Wednesday...

Keep your software up to date

If the software you own has an "automatic update" feature, make sure that's turned on. 

You will find that having the latest version of as many browsers as you can manage, as well as the latest version of Adobe Acrobat Reader, Flash Player, and so forth, will make your job as a web designer much easier. All these programs are free, so there's no economic argument against having them.

Although it is (of course!) possible to test browser compatibility right inside Dreamweaver, SEEING what your work looks like in different browsers is priceless. It can be very disheartening for a client or associate to tell you that your site breaks on their browser.

I run Chrome (a Google browser) most of the time, and also use FireFox, Internet Explorer, Safari (also available for Windows!), and Opera. If you know which browser your clients use, you NEED to test in that browser.

Often, programs like Adobe Acrobat Reader develop innovative ways of working...the latest version of Acrobat Reader uses a 'portfolio' concept, where many .pdf files are cataloged under a group name. That is the technique they have used on the Adobe Certification files. When you download one of the Adobe files from the class page on my website, you may get the message that you need to upgrade. Don't mess around: do it NOW! You'll be glad you did.

If you are creating sites that will have a general audience, you will discover that W3C (World Wide Web Consortium) keeps track of browser usage....that is, they can tell you the trend in who is using what browser. For instance, what percentage of IE6 users have moved to IE7. Of course, they are not actually tracking individual users, but the trends are good to notice. You will want to make SURE your sites and pages work in Internet Explorer and Firefox, at the very least.

For my personal use, I like the Chrome browser, as it is very fast and has some nice features. Because it is a Google product, it IS a search engine, and does not need a secondary search toolbar. Plus (if you are old enough to remember...) the Chrome logo looks like Simon.

Come On In! This is OUR space...

I hope the challenges of the first class were minimal and the potential great for the rest of the course!

Don't forget to do a little "website analyzing." This is a skill that you will want to develop and incorporate into your best practices surrounding your website work. We'll have a quick chat on Wednesday about what you found.

Next class, we will begin with a continuation of our Grand Tour of Dreamweaver CS4 and then work with text. You will want to read up on chapters 1, 2, and 3. 

Remember that when you read, you are not trying to memorize HOW to do things, just to become familiar with WHAT CAN BE DONE. Physically DOING it in Dreamweaver is more important. Henry Ford once said that he didn't need to know everything about making cars, just how to find the people who did. Or something like that.