Inheritance of properties using ID's
When using an ID of a selector, always remember that the ID inherits the properties unless redefined in the selector.
So, if you have
td {
Background-image:url(image1.jpg);
Background-color:#000000;
}
td#one{
color:#444
}
That the “one” id will inherit the background-image and color from the td selector. Either those properties need to be redefined, or set to none, e.g.
Td#one {
Background-image:none;
Background-color:#ffffff;
color:#444;
}
Note:For a repeaint color hex code, writing it in this format#444 is shorthand to save code space if the digits keep on repeating.
Why can’t I set the table height attribute to 100%
A percentage for a table height seems to be depreciated because the height of the table should really be determined by the content contained within. This is also true when it comes to efficiency of code in CSS layout and design. Each div container should not have an absolute pixel height.
Dreamweaver won’t let me select a cell in Layout mode
There have been times where I was working on a page in Dreamweaver, in Layout mode which I find is uncommon, and when I got to Ctrl Click a cell to be able to drag and change the size, I am not able to get the handles.
The problem is that Dreamweaver doesn’t understand the dimensions of the cells, or the ones surrounding it. So I found that if you add in the pixels dimensions for that cell that are listed in the properties manager hard into the code. The cell should now be selectable
Shape hints don't move with basic shape
If a movie and masks are moved using onion skinning, the shape hints will not always, if ever, move with the shape. The best solution that I have found so far, is to always do animated masking effects last, when the movie is the closest it can be to being finalized, putting more time into the planning stages of your Flash project.
Using double classes to your advantage
Have you ever made up a single class just for one instance of something in an html page? Well, did you know you can set a double class?
According to the heirarchy of CSS and inheritance of properties, the second listed class always takes precedence. Add a space between the two classes.
<Td class=”blue redletters”>
Here are the properties for each of these declarations
.blue{
color:#666;
font-size:12px;
}
.redletters{
color:#777;
}
The last use of the color property, in this instance, for redletters, is the one that takes precedence. This gets around the silly usage of some <span> tags just for a single class.
Setting Marginheight, Topmargin, etc. in Body depreciated.
As I was working on setting up a new site today, I took a look at the error checking that Dreamweaver does and found that the Marginheight, Marginwigth, Topmargin, Leftmargin properties were depreceated. Curious as to what the proper replacement should be, this is the solution.
Body{
Magin:0px;
Padding:0px;
}
The Body selector needs to have the margin and padding properties defined in it. Margin is generally for Mozilla browsers and padding for IE.
How to – Dreamweaver automatic link checker
Automated Link Checker in Dreamweaver is highly underrated.
Dreamweaver MX 2004 has the capability to check links sitewide and save you the embarrassment of the dreaded 404 error page.
Under Site > Choose recreate cache.
This will recreate your local cache and make sure all of your local web files are current. Then run check for broken links sitewide, and the reports palette will spit out all of the broken links for you. It is pretty accurate, and will find a myriad things that I guarantee you’d never thought to check for.
Make use of Noindex to make sure iframe pages aren't search engine indexed
Browsers are getting smarter and more powerful every day, thanks to Google leading the technology charge. In order to protect someone from coming to your site accidentally from a iframe page that doesn’t make sense outside of the containing page, make use of meta information.
Assuming some knowledge of how to add meta information, in your head section add this value
<meta name=”robots” content=”noindex” />
Add this to the pages that you do not want indexed by Search engines.
Bloated Fireworks code? Build HTML by hand!
Getting away from bloated code and Fireworks drop in HTML.
Until three months ago, I thought that Fireworks was a wonder. You could assemble a complex navigation element, slice it up and create rollovers with the links right in the Fireworks file and drop it right into an .html file in Dreamweaver.
But as I worked more and more with that, the biggest problem was that you could not adjust any of those images. Either the table would be based around numerous spacers and other finger crossing, or you could select an advanced option to have the layout created with nested tables instead of spacers, and have a nested table nightmare.
Well, to cut your code in a third, you loading time in half, and save precious bandwidth, in most cases for many horizontal bar navigation’s, the images can be laid out in one table cell.
All you have to do is draw one layout cell and put the images side by side. Once they reach the end, if you have them stacked, they will automatically return without a <br> tag and will stay positioned perfectly.
I have found this to be invaluable when you have two colored navigation elements that but up to one another where any space showing through would look bad and be a mistake.
Then, choose the Dreamweaver Behaviors Palette (Shift+F4) and add a swap image to create the rollover. It writes the exact same javascript function as it would exporting it out of Fireworks.
The last note I have, is if you exported your images our of Fireworks, they most likely will have strange file names that don’t mean anything. Do name the images so you don’t have any rollovers that don’t work, rollover the wrong image because of conflicting image names, and to make your life easier in finding the exact image in the Image Swap dialog box from the Behaviors palette.
Expression 3
Read about a program by chance today online called Creative House, which was bought by Microsoft in September of 2003 and is now called Expression 3.Hailed in one article as the vector program to finally displace Flash and expose it’s weak vector creation toolset, I was surprised after a 57 MB download that the program was only a vector program and not animation or timeline based at all.
With a very brief jaunt through the program, it just seemed like a more advanced controllable vector program for the illustrator in you. For those you who want to create textures and line weights, and have it be vector, then try it out. The program is very intuitive and flexible for creation of vector in every sense and knowing Microsoft’s reputation for taking a good product, making it the best, and displacing everyone else, if I was Macromedia Freehand, I would be worried. It could even give Illustrator a run for its money.
Posted by jerothe in Uncategorized