What does the "label" tag do and why should I use it?
Posted by jerothe in 
That is what I was asking when the new version of Dreamweaver came out and I started using it this spring. When ever I was inserting a form field of any sort, DW was inserting a
If you have a checkbox or a radio button or some small form element like that, it may be hard for some users to click in that specific spot to fill out a form. So by using a
This should work for most form fields, try it out and see what happens. For text field your cursor will change from a pointer to a typing tool to indicate to the user what should be done in that box.
The best possible image quality in Flash MX
Working with Photos in Flash can be a tricky proposition.
I have had problems before when importing photos for use in a Flash presentation. Many times photo quality can seriously decrease disproportionately to the quality level that is set in the publish settings.
Today, I read a post regarding image quality on Macromedia forums saying that “You cannot scale photos in Flashâ€. Having problems with a Flash file that contained photos, I tried out this theory.
I had imported three photos into a flash file, scaled them down approximately 20% and I had set my publish settings to a reasonable 92%. The images looked jagged and all text used in the images was illegible. Even when the publish settings were set to 100% quality, the text still looked jagged.
By resizing this images to the exact size needed in Fireworks and then re-importing them into Flash, all text was legible, and images were crisp. I was even able to reduce my export quality back down to 94% and have the images and text look presentable. Also, surprisingly, I reduced the overall movie size by 200-300K.
This would be my advice to all of you out there.
If working with photos in Flash and you can’t figure out why they look so bad, use the tips above to troubleshoot.
I would always advocate that any and every webpage is first laid out in Fireworks. That way no image adjustments will be made in Flash. All image size decisions will have already been made in the layout.
If there is an instance where layout decisions are being made in Flash and you are scaling an image multiple times to try to make a layout work, when the final size is chosen, the image should then be sized correctly in Fireworks and re-imported into Flash.
Design your own CSS website Part 1: The Wrapper
When I first started disecting CSS websites, which is sometimes the best way to learn, I found that each site has a “wrapper”. This not really a jargon term, but I found it showing up time and time again in designers CSS style sheets as the first layer entry. When I started to read tutorials and explanations on the internet I found out that the “wrapper” contains all of your content. See my entry below for more information.
So knowing now what the most basic building block was, I started as I usually do, in Macromedia Fireworks.
By laying out my sites, meaning, designing the front page of the site down to the pixel, I then have the roadmap for everything I am going to need when building my site. I have exact dimensions, I have color codes to pull from, and I have already created the images so all I need to do is crop them into their own seperate files, export them, and start making my site.
One of my goals with this site was to have a cool looking background. Originally I had this gradient in Purple and Blue, but for some reason, it seemed too overpowering to me and not what I had originally pictured my blog to look like.
I have always been a strong advocate of detail. Detail is what will set you apart from the crop. When I started to design my background I made the image that you see repeated at about 400 x 400 pixels and shrunk it down. In fact, here is the base pattern;
I tried to draw on other websites, logos I had found, and even a little Art Noveau to come up with my idea. Now, you may saw, why design it so huge when it will be so small and most of that detail will be lost. I say because it is that consideration of the detail that most users won’t pick up, but at the same time they won’t pause and go, “Gosh, that looks kind of funny.” Remember, everything looks that much better reduced when it was created a million times larger.
I then created a orange to red gradient, repeated the symbol pattern at a set height, {in this case the background image is 40px wide by 1350px high} and set my blending mode on the background pattern to multiply. Check out this link to see the background alone. Finally, in the Body selector I set up the background image and the repeat declaration;
Body {
background-image:url(http://www.rotheblog.com/images/background5.jpg);
background-repeat:repeat-x;
margin:0px;
padding:0px;
background-color:#960E0E;
}
Remember for the background-repeat declaration, repeat-x will repeat horizontally. I also set the margin and the padding to 0 in the Body so that my website butted right up against the sides of the browser. Finally, I set the background color to the same as the bottom of the image so that the pattern faded into a solid color. I didn’t want to have to plan for how tall my pages could get with however many entries, so I limited the height of my background pattern and had it fade out.
With my site designed in Fireworks, I can now make the declaration for my “wrapper” div block because I have the defined width of the site.
I know that most of this doesn’t apply to CSS, but this is the basis for my site. Tune in for Part 2 of my series when I get into how I made the second step of the website, the header and maybe even in part 2, the navigation.
The difference between flypage.html and results.html
I have been having a problem at work with the Interchange site I am building. The flypage, which is exactly what it is titled (A page that generates on the fly based on user input) was not applying the template. Every page of my site had the correct template except the flypage, and even then, it only seemed to be in a product category with all of the products listed respectively.
If you clicked on a specific product, the page came up with the correct template. Well, in the Pages folder there is a file called results.html. This is the page that is used solely to generate another page on the fly, this time only displaying the results of a user chosen category.
After I went in and set the correct template for that page everything seemed to work fine. And easy mistake to make, my boss actually pointed this out to me since this is the first site I have built that has steered away significantly from the base template.
New version of Maxathon released!
Everyone’s favorite alternative to regular IE, Maxthon, with it’s tabbed browser windows and fun plugins for one click flash downloads and view source has released an update. On version 1.1.035, you can try this browser out at Maxthon’s homepage..
For those of you who have already upgraded from what was MyIE2 originally, now named Maxthon, you may ask why get this latest update. The new version fixes some bugs you may have it you have installed Windows SP2 with Active X controls. So check it out, super fast and fun this is the browser that makes all of those who want something more than IE, but feel too comfortable to change to something like Mozilla.
Response to my question about character limits in Flash URL link field.
Well, when I had this problem three days ago I posted on the Macromedia Flash forums. I did get one reply that said that there is a character limit for the URL address in Internet Explorer upwards of 2000 characters. But he didn’t think there was any managing of that in Flash.
I think he may have misunderstood me though, and said I should use a quotes in my getURL calls. Well, I am just using a plain text link, but to fix the problem until a later date, I added an invisible button.
Shortcomings of using Images in place of HTML buttons.
I was working on EVS Minder, the one stop shop for advanced online (pre) registration and on-site registration for conventions, at Esystems today. The online interface is very form intensive, and has a lot of submit buttons. My original designs had called for image replacement of the standard HTML button.
In order to use an image for a submit button, set this attribute in the input field;
<input type=”image” src=”something.jpg”>
However, the problem with using images for submit buttons is we found when a user submits information, the values returned were two numbers instead of the value set in the “value” attribute. The two numbers returned are coordinates, the value name plus an x and y coordinate. These numbers signify the place where the user clicked the button in relation to the upper left of the button.
So for Chris our programmer, it was screwing up his php code because he was testing for a value of “submit” and instead it was giving him something like this;
submit_y = 4
submit_x = 12
The other downfalls are that the buttons can be problematic in browsers. For browsers like Mozilla and Opera where a user can set whether they want to turn off all image downloading, the form will be useless as the image button wont’ show up at all. Since HTML 4.0 you can add an alt tag to the input field, so at the very least, if you insist on aesthetic over function, it will show the text in place of the image and the user can get an inclination of what was supposed to be there.
All in all, I decided to use a background image for all my submit buttons to spruce them up a little, but to keep them most accessible across the board.
Small HTML Tidbits
I came across some HTML I had never seen today. <big> and <small>which basically scale the text size in your webpage. It seems highly useless as it isn’t very specific.
<> These characters are known as chevrons.
Save time with MM Exporter for site definitions
When I was upgrading my computer a couple of weeks back to a dual processer machine at work, I had to reinstall all of my programs.
As a result, I needed to reinstall Dreamweaver, and needed a way to get all of the existing client sites I had set up out of the old computer. Now, if you open your files palette in DW, and go to your file menus > site > manage sites you have the option of exporting each site individually as native site file information “.ste”
That really sounded like a lot of work, so we looked, and found a plug-in that solved all of our problems. To export all of your sites at once into one neat nice file, as well as other things such as shortcuts and even serial numbers, use MM Exporter.
This third party plugin is easy to use. Make sure if you are installing a newer version of DW on a computer, that you only have one installed at once. And before you uninstall anything, that you export your sites using this program. It will only recognize one version of DW to import your site definitions into, and won’t give you an option to find the program you want to import into, instead finding the programs itself.
Linux Commands Defined
Here are some very useful shortcuts I have learned when moving around and working in a Linux environment.
To type changes in a file once you navigate to it and pull it up, hit I. Then, when finished making changes, hit ESC.
To see all of the files in a directory you can do a couple of different commands.
LL = Long List
LS = List (In columns). I find this to not be as nice looking as ll, but if you don’t want the listings to go off screen, you can type this in.
If there are hidden files in the folder you are looking and you need to see them, type in ll -la
Another way to prevent listings from going off screen is to type in ll | more. This will list whatever is in a directory as tall as your terminal screen is, then stop. To advance entry by entry, hit the enter key, and to advance the list by page hit the spacebar.
A basic one is if you are trying to navigate to a different directory, you do a cd or “change directory”. So, the format looks like this cd documents/home.html
To see the processes for the server and all of CPU usage and other information, similar to a Windows processes list, type in top.
To get rid off all of the commands and all of the other stuff you have done on the screen, and start with a fresh terminal at the top of the screen, type clear.
And of course, if at any time you want to look up what a command actually does, type in man, (manual) and then the name of the command. This is the format man clear.
To save changes to a file, or “write” to it, type in :w.
To exit without changing a file type, or “quit”, type in :q.
To exit your connection to the server, type in exit.
Opera 7.54 Released
A new release of Opera has been released. A fun browser that is fast and beautiful, give it a try. Visit Opera’s homepage..