Daniel Burkhard's Blog

Creating and Applying Templates for your Final Project

To start, do the following:

• Launch Dreamweaver
• Define your CAT274 site
• Create a new “final-project” folder inside of your CAT274 folder on the Local side (ie, your flash drive)
• In Dreamweaver, move and organize all of your final project files (html, gif, jpg, css, swf, etc) into the new final-project folder, inside of your CAT274 folder

Then, in Dreamweaver, do the following:

• Open your completed sample file
• Select File > Save as Template
• Name your template appropriately – NO SPACES!
• DW creates a new file inside the /Templates/ folder (which sits in CAT274)
• Open the Templates folder – the new file name will include a .dwt extension

Open your Template file in Dreamweaver, define editable regions:

• Select an area on the page (text block, headline, photo) that you want to change from page to page
• Select Insert > Template Objects > Editable Regions
• Name your editable region something intelligent – like pic01 or mainContent
• Save your file, and close the Template file

Create a new page, guided by the Template:

• Select File > New – choose HTML and blank page
• Save the HTML file immediately in your final-projects folder
• Select Modify > Template > Apply template to page
• Choose your new template from the list of templates

Notice that only editable regions are changeable on the page now.

• Click and change text or photos appropriately.
• Save and close the HTML page

Changes to template will be reflected on all associated pages:

• Open your template file
• Change the footer or something in the page design (outside of Editable regions)
• Save – notice the box that asks to update files
• Click UPDATE to update the associated files

Helpful links for web design.

Here are some recommended website hosts – this is not a definitive list, but just a few suggestions:

• Blue Host
• Chrystal Tech
• GoDaddy
• Network Solutions

Browser Shots
Browsershots makes screenshots of your web design in different browsers. It is a free open-source online service. When you submit your website URL, it will be added to the job queue.

A number of distributed computers will open your website in their browser. Then they will make screenshots and upload them to the central server and you will be notified when all testing is done, and can review the screenshots in your account.

More Info: http://browsershots.org/

^^This is a really good link, especially for beginners like myself who would like to be able to give quick rough estimates on a web design project.

More helpful links….

http://www.adobe.com/devnet/dreamweaver/articles/understanding_css.html

http://www.adobe.com/devnet/dreamweaver/articles/css_page_layout_basics.html

Cool css site

http://www.csszengarden.com/

Estimating time

http://www.sitepoint.com/blogs/2009/04/14/how-to-estimate-time-for-a-project/

If you are going to have rollovers – or images that react to the user’s mouse interacting with a button, and displaying a change – on your page, there are a few things to remember.

All rollovers require TWO images:

• an “OFF” state, or image that displays when the mouse is NOT on the graphic
• an “ON” state, or image that displays when the mouse is ON or OVER the graphic

All rollover images must be the same physical size – if your OFF state is 300 by 25 pixels, your ON state must be the same physical size.

How you design your rollover images is up to you – Fireworks or Photoshop can be used to create the initial graphics, which should be saved as JPG or GIF files.

Once you’ve created the images or added them to your layout, you can insert them into the page code in two ways:

• Using Fireworks incorporate slices and layers into your final design;
• Define slices over rollover areas and export the individual image states – be careful not to overwrite images;
• Using Dreamweaver add saved and optimized GIF or JPG images to your page using the Insert > Image Objects… > Image Rollover feature.
• Be sure to give each rollover a name, ALT tag that describes it, and define two images.

Tables

http://www.adobe.com/devnet/dreamweaver/articles/table_to_css_pt1.html

fireworks

http://www.adobe.com/devnet/fireworks/articles/export_css_images.html

http://www.adobe.com/devnet/fireworks/articles/export_css_images_02.html

my design for my website

http://bcts-potomac.aacc.edu/CAT/cat02/week10/home.jpg

Some helpful links.

Designing with Grids:
http://www.webdesignerwall.com/trends/grid-and-column-designs/

CSS Typography:
http://www.digital-web.com/articles/css_typography/

Prototyping
http://www.adobe.com/devnet/fireworks/articles/cooper_prototyping.html

My site design is coming along. Here are some helpful links from this week.

http://www.alistapart.com/articles/dao/

http://www.boxesandarrows.com/view/blasting-the-myth-of

http://bokardo.com/archives/five-principles-to-design-by/

The following article is a good one about class and id.

http://css-tricks.com/the-difference-between-id-and-class/

Most common fonts

http://www.codestyle.org/css/font-family/sampler-CombinedResults.shtml

1 baseline

The baseline is the imaginary horizontal line on which most characters sit. The only

character that hangs below the baseline in Figure 4.5 is the lowercase “q.”

2 cap height

The cap height or capline is another imaginary line. This one marks the height of all

capital letters in a typeface. Notice that the cap height is below the maximum height of

the typeface.

3 crossbar

A stroke that connects two lines in the capital letterforms of “A” and “H” is called a

crossbar. A horizontal stroke that does not connect two lines, like the one in the lower

case “f” or “t,” is known as a cross stroke.

4 serif

Serif is the name given to the finishing strokes at the bottoms and tops of certain

typefaces. I’ll talk more about serifs when we get into typeface distinctions.

Good links

http://www.groovecommerce.com/ecommerce-blog/search-engine-optimization/20-nifty-seo-tools/

http://www.seomoz.org/

Domain name registratrs

http://www.godaddy.com/

http://www.register.com/

Some good links for rollovers and design…

http://www.adobe.com/devnet/dreamweaver/articles/dwmx_design_tips.html

http://www.adobe.com/devnet/dreamweaver/articles/dwmx_design_tips.html

http://www.smartwebby.com/web_site_design/rollover_images.asp

http://help.adobe.com/en_US/Photoshop/11.0/WS50663BFE-71C1-4290-A1B2-C704E20048D9a.html

My two ideas for my final project are, 1: Portfolio website  for me

a) Porfolio showcasing my digital designs and other art

b) I currently have a lot of digital content

2: Diabetes non-profit org website

a) I have designed T-shirts for them before

b) I would use pictures from fundraisers and merchandise

Good links from week 5

http://www.gettyimages.com/

http://www.vincentflanders.com/videos/gnn.html

http://www.webpagesthatsuck.com/mysterymeatnavigation.html

http://www.webpagesthatsuck.com/worst-web-sites-of-2008-navigation.html

http://www.webpagesthatsuck.com/2009-worst-contenders-jan-march.html

Good links

http://tv.adobe.com/watch/learn-fireworks-cs4/getting-started-01-understanding-fireworks/

http://tv.adobe.com/watch/learn-fireworks-cs4/getting-started-02-the-fireworks-interface/

https://angel.aacc.edu/section/default.asp?id=CAT2748402009FA

http://tv.adobe.com/watch/learn-fireworks-cs4/using-kuler-color-themes/