Advanced Web Design Tips
Easy That's how you'd like life to be, right? Especially when you're creating a website on your own. But that doesn't mean you want the site to look severe and just functional. you want it to be pretty , smart and also respond and move when you interact with it, while saying all that you want to say to its visitors . There are little tips and Features incorporated into software just for people like you.
Love what Flash can do but don't know how to use it ? Macromedia thought of you and built a feature into Dream weaver that lets you create cool animated Flash buttons just by entering parameters. Want to have button respond to a mouse-over but have no idea or patience to create one with graphics software? You can make a quick and easy mouse-over button right from within FrontPage. What do you do if you need to optimize 150 images within an hour? No need to panic, image ready can help you out with a little droplet. Check out the different tips that make life easier or better for you as a Web designer.
Animated Flash Button & Macromedia Dream weaver:
Dream weaver lets you create some custom vector graphics from within the software. You can make Flash and embed them into your Web pages. There are different kinds of style that you can choose for these from the available set-play back type of buttons .Arrow shaped button, shopping cart button And so on, or make some of your own.
Making a smart interactive button is simple in Dream weaver, select insert-interactive Image-Flash Button. Form the window that opens select different button style by looking at the preview image below. Customize the button the way you want it by adding the name of the button, the Font color and font size , then specify the URL that the button has to link to . The button is saved with SWF extension you can preview the button in your browser to see if it looks the way you want.
Easy Mouse-Over Buttons :
Mouse-over and Front Page? Oh Yes. The software has quit a few convenient features up its sleeve, one of which is Hover buttons. Granted, these buttons don't have snazzy graphics they look like typical button blocks, but they react to mouse-over and you can archive it very simply. Here's how.
Select Insert Web component. in the window that opens , select Dynamic Effect in the component type and select the Hover Button effect on the right . Type in the text that should appear on the button, choose a font for the text, specify the URL to link to on clicking, and select the size and color of the button. In the drop-down menu for Effect, Glow is the default selection. Try it you can select the color of the glow-check the button in preview mode-the button light up when you move your mouse over it. There are several other effects available that are worth checking out, especially the bevels quite neat!
Cool Effects With DHTML :
DHTML or Dynamic HTML offers some cool effects that could make your Web pages stand out click? Or your page to load with a transition Effect? DHTML will do this for you along with other little tricks. After you've built your Web page, from the menu bar, select Format-Dynamic HTML Effect. A tool bar appears in the work area. Choose an event from the first drop down list. This could be on click' double-click.' Mouse over or page load. Depending on the event selected here, the next Drop-Down list offers the possible effect that can be achieved , This could be a change in the color and style of the font if it is text, a border added around it , or in case of an image , you can replace the image with another one by a swap .
Most of the effect toggle Meaning if there was a font change on click, another click will change the font back to what it was before. However, some effects are one-time like the disappearing act of an image or button .you select fly out' from the effects list for this . On page load' you could have the selected text drop in word by word, or hop in, spiral in, zoom out, and so on. This is especially useful for advertisements or parts of the page that you want to draw the user's attention to.
Animation In Reverse :
You've made an animation using image Ready-may be a tween of position, opacity or effects or a manually placed and manipulated animation backwards? No need to re-tween or manually place the frames backwards; simply click on the little arrow in the animated palette and select Reverse Frames. You can also create a rubber band effect by copying the forward sequence (small arrow > copy Frames), pasting it at the end of sequence (small arrow > Paste Frames > Paste after selection ) and then, by selecting the newly pasted sequence and applying Reverse Frames on this.
All It Takes Is A Droplet :
Want to optimize several images with the same settings? Create a droplet and save time.
Open the optimize palette in Image Ready with your image open. Set the optimization to what you want-file type (JPG, GIF or PNG), quality (low, medium, high), lousiness, dither and so on while previewing the result in the optimized tab of the main in the Optimize palette. This creates what is called a droplet that contains your optimization settings. Save this droplet anywhere you want, say on your desktop.
Now drag the folder containing the images to be optimized onto this droplet. All the images in the folder will get optimized the way you specified. This may take a while depending on the number and size of the images in the folder. You can also drop images one at a time onto the droplet.
Precise Hot Spots :
Want to link different parts of an image to various URLs? You can do this by slicing the image and assigning links to the relevant slices, but the disadvantage of this is the lack of precision: slice is necessarily rectangular. Also, slices are pieces of the image.
Say you're working on a Web page for children about the different parts of ancient castles. You would like the parts-dungeons; moat, guard towers, and so on-to have precise rollovers and links so that the information is conveyed correctly. Rather than slices such an images and allot links, use image maps, select the polygon Image Map tool in Image Ready and outline the part you want to talk about precisely . Even circular image maps work fairly well in some areas. You can adjust points of the map edge after finishing the shape, too .in the image map palette, you can specify the URL to link to along with ALT text. To preview your work, save Optimized as a HTML file and check it in a browser.
Optimize Your Web Graphics Easily :
Despite the cable Internet connections and high-speed modems, Web graphics are still limited speed-wise. The sites that load fastest and work most efficient have well-optimized graphics .GIF images are generally good for line drawings and illustrations while JPG ones are best suited for photographs. Besides file format, there are various factor that affect the optimized image like the lousiness'-the amount of data in the image that you're willing to sacrifice for smaller file size-the number of colors you need minimum, whether you can have dithering or not, so on .
In Photoshop, to try out different optimization settings, click Save for Web . A window opens up showing the current image along with various options and menus on the right . in the image window itself, you can see two tabs: 2-up tab to see two versions-the original and the optimized-for comparison along with time needed to load the image according to various modem speeds . The 4-upshows you 3 versions against the original. These previews are useful and convenient, rather than having to manually save the image repeatedly in different ways and comparing each of them.
Making A Banner Ad:
We're all familiar with banner ads that we see all over the Web: a strip with an image and text that changes into another and another conveying some information. Clicking on this ad takes you to the site that the company is advertising for. You don't have to use GIF Builder or any other graphics software to animate such an ad. You can make it easily using Front Page. Select Insert-Web component-banner ad manger. In the window that opens, specify the size of the ad, the transition effect, the number of seconds to display each image, the URL to link the ad to and add the images you've prepared. That's it.
This feature could also be used you want to share a few photographs coiled also be used when you want to share a few photographs or images but don't want the images to be save-able on the cline's side; right-click will not work on these images. Although the images may be found in the cache, at least they won't be able to be copied directly.
Redirect to a New Page
<meta HTTP-EQUIV="REFRESH" content="0; url=http://www.yourdomain.com/index.html">
This META tag redirect code will redirect your visitors to another web page instantly. The content="0; may be changed to the number of seconds you want the browser to wait before redirecting. This code comes in handy if you change your web address and need to redirect your visitors to the new page.
Expanding Web Page Full Screen
(Internet Explorer)
You can remove the top, bottom and side page margins on a web page by adding the following code within your <body> tag.
<body bgcolor="#ffffff" topmargin=0 bottommargin=0 leftmargin=0 rightmargin=0>
Mouseover Text Description
(Internet Explorer)
You can create a mouseover text description, similar to an image alt tag, that will be viewed when the mouse is placed over your text. Place title="your text description" within your HTML link code.
<A HREF="http://www.yourdomain.com/" title="your text description">
Changing Link Colors
You can change the color of an individual link by adding a font tag in front of your linked text.
<A HREF="http://www.yourdomain.com"><FONT COLOR="#FF0000">Your Link</FONT></A>
Status Bar Link Description
You can display a description in the status bar for all of your links. When the mouse is placed over a link, the link description will be viewed in the status bar.
<A HREF="http://www.yourdomain.com" onMouseOver="window.status='Your text description'; return true" onMouseOut="window.status='';return true">Your linked text</a>
Auto Fill Email Subject
You can create an email link that will automatically fill in the subject line when clicked on. Add the following code to your HTML.
<A HREF="mailto:you@yourdomain.com?subject=Your_Subject">
Preventing Browser Cache
When visiting a web site, your browser will cache or make a copy of the web site for faster viewing your next visit. This will prevent visitors from seeing new content unless they manually reload their browser.
To prevent this problem, add the following code between your <HEAD> and </HEAD> tags.
<META http-equiv="Pragma" content="no-cache">
Preventing Search Engine Indexing
To prevent a Search Engine from indexing a page, place the code below between the <HEAD> and </HEAD> tags.
<META NAME="ROBOTS" CONTENT="NOINDEX,NOFOLLOW">
This tag tells the robots not to index this page and not to follow any links within the page.
<META NAME="ROBOTS" CONTENT="NOINDEX,FOLLOW">
This tag tells the robots not to index this page, but follow any links within the page.
Auto Fill Email Subject and Body
You can create an email link that will automatically fill in the subject line and body when clicked on. Add the following code to your HTML.
you@yourdomain.com
<A HREF="mailto:you@yourdomain.com?subject=Your Subject&body=Message for the body">you@yourdomain.com</a>
Create a Gradient Background Effect
You can use the style tag to create a gradient background effect within your web page. This effect can be used for your entire web page background, or within your table cells.
To use the gradient effect as your web page background, use the following BODY tag:
<body style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#C0CFE2', startColorstr='#FFFFFF', gradientType='0');">
To use the gradient effect within your tables, place the following code within your table tag:
style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#C0CFE2', startColorstr='#FFFFFF', gradientType='0');"
Although you can edit the gradient colors indicated in red, keep in mind, in order for the effect to display properly, you must use a light color and a darker color.
Embedding Web Pages within Web Pages
You can embed a web page within a web page by using the object and embed tags. Copy and paste the code below into your web page where you would like to embed the additional page.
<object data= http://www.evrsoft.com width=" 600 " height=" 400 "> <embed src= http://www.evrsoft.com width=" 600 " height=" 400 "> </embed> Error: Embedded data could not be displayed. </object>
Change the text indicated in bold to suit your needs.
Creating a Robots.txt file
Some people believe that they should create different pages for different search engines, each page optimized for one keyword and for one search engine. Now, while I don't recommend that people create different pages for different search engines, if you do decide to create such pages, there is one issue that you need to be aware of.
These pages, although optimized for different search engines, often turn out to be pretty similar to each other. The search engines now have the ability to detect when a site has created such similar looking pages and are penalizing or even banning such sites. In order to prevent your site from being penalized for spamming, you need to prevent the search engine spiders from indexing pages which are not meant for it, i.e. you need to prevent AltaVista from indexing pages meant for Google and vice-versa. The best way to do that is to use a robots.txt file.
You should create a robots.txt file using a text editor like Windows Notepad. Don't use your word processor to create such a file.
Here is the basic syntax of the robots.txt file:
User-Agent: [Spider Name]
Disallow: [File Name]
For instance, to tell AltaVista's spider, Scooter, not to spider the file named myfile1.html residing in the root directory of the server, you would write
User-Agent: Scooter
Disallow: /myfile1.html
To tell Google's spider, called Googlebot, not to spider the files myfile2.html and myfile3.html, you would write
User-Agent: Googlebot
Disallow: /myfile2.html
Disallow: /myfile3.html
You can, of course, put multiple User-Agent statements in the same robots.txt file. Hence, to tell AltaVista not to spider the file named myfile1.html, and to tell Google not to spider the files myfile2.html and myfile3.html, you would write
User-Agent: Scooter
Disallow: /myfile1.html
User-Agent: Googlebot
Disallow: /myfile2.html
Disallow: /myfile3.html
If you want to prevent all robots from spidering the file named myfile4.html, you can use the * wildcard character in the User-Agent line, i.e. you would write
User-Agent: *
Disallow: /myfile4.html
However, you cannot use the wildcard character in the Disallow line.
Once you have created the robots.txt file, you should upload it to the root directory of your domain. Uploading it to any sub-directory won't work - the robots.txt file needs to be in the root directory.
I won't discuss the syntax and structure of the robots.txt file any further - you can get the complete specifications from here (http//info.webcrawler.com/mak/projects/robots/norobots.html)
Now we come to how the robots.txt file can be used to prevent your site from being penalized for spamming in case you are creating different pages for different search engines. What you need to do is to prevent each search engine from spidering pages which are not meant for it.
For simplicity, let's assume that you are targeting only two keywords: "tourism in Australia" and "travel to Australia". Also, let's assume that you are targeting only three of the major search engines: AltaVista, HotBot and Google.
Now, suppose you have followed the following convention for naming the files: Each page is named by separating the individual words of the keyword for which the page is being optimized by hyphens. To this is added the first two letters of the name of the search engine for which the page is being optimized.
Hence, the files for AltaVista are
tourism-in-australia-al.html
travel-to-australia-al.html
The files for HotBot are
tourism-in-australia-ho.html
travel-to-australia-ho.html
The files for Google are
tourism-in-australia-go.html
travel-to-australia-go.html
As I noted earlier, AltaVista's spider is called Scooter and Google's spider is called Googlebot.
A list of spiders for the major search engines can be found here.
Now, we know that HotBot uses Inktomi and from this list, we find that Inktomi's spider is called Slurp.
Using this knowledge, here's what the robots.txt file should contain:
User-Agent: Scooter
Disallow: /tourism-in-australia-ho.html
Disallow: /travel-to-australia-ho.html
Disallow: /tourism-in-australia-go.html
Disallow: /travel-to-australia-go.html
User-Agent: Slurp
Disallow: /tourism-in-australia-al.html
Disallow: /travel-to-australia-al.html
Disallow: /tourism-in-australia-go.html
Disallow: /travel-to-australia-go.html
User-Agent: Googlebot
Disallow: /tourism-in-australia-al.html
Disallow: /travel-to-australia-al.html
Disallow: /tourism-in-australia-ho.html
Disallow: /travel-to-australia-ho.html
When you put the above lines in the robots.txt file, you instruct each search engine not to spider the files meant for the other search engines.
When you have finished creating the robots.txt file, double-check to ensure that you have not made any errors anywhere in it. A small error can have disastrous consequences - a search engine may spider files which are not meant for it, in which case it can penalize your site for spamming, or, it may not spider any files at all, in which case you won't get top rankings in that search engine.
An useful tool to check the syntax of your robots.txt file can be found at http//www.tardis.ed.ac.uk/~sxw/robots/check/. While it will help you correct syntactical errors in the robots.txt file, it won't help you correct any logical errors, for which you will still need to go through the robots.txt thoroughly, as mentioned above.
Table Trouble And Table Tips
Trouble with tables? Here are some common table issues, and some possible solutions for these situations when they arise.
Disappearing Tables
If you load your site and get blank space instead of your table, the first thing you'll want to look for is a missing </TABLE>, </TD>, or </TR> tag in your table code. Leaving these out can cause various problems, including the "disappearing table". If you find one missing, add it in and reload. If it still is not there, check for more. Hopefully once you have found them all your table will be visible again.
Unknown Space
If you seem to have lots of space for no reason, look for <BR> or <P> tags that may be in places you did not want them. Watch out for these outside of <TD></TD> tags, as they can cause weird spacing problems. So, avoid structures like this:
<BR>
<TR>
<TD>Write words etc.</TD>
<BR>
<TD>More content</TD>
<BR>
You'll notice there that the <BR> tags are in places they should not be for the table to work properly. To make the new table row, use only the <TR> and no <BR> tags. To break the content within a cell, be sure the <BR> is between the <TD> and </TD> tags and not outside of them.
Nesting Tables
Another thing to remember is to try and nest your tables (one table within another) as little as possible to avoid potential errors. The more you nest tables, the harder it is to find an error when you have problems. When you do need to nest your tables, try to use indentions to your favor so you will have an easier time when you look at the code. One option that may help is to indent a number of spaces each time you nest a new table, something like this:
<TABLE>
<TR>
<TD>
<TABLE>
<TR>
<TD>Content words etc.</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
This way, you can see both the inner and outer table more easily, and be able to discover problems more quickly.
Spacing Trouble
If your table shows up with too much spacing around the edges, try checking your cellspacing and cellpadding attributes with your <TABLE> tag. If you want no space around your table contents, both of these must be set to zero. The default leaves space there, so they must be set to zero rather than left alone.
<TABLE cellspacing="0" cellpadding="0">
Check them out, especially if you nest tables. You may have to do quite a bit of tinkering to get the spacing you want, including more nesting!
Percentages vs. Pixels
This topic alone has sparked many heated discussions on internet discussion lists and forums. Both have their advantages and drawbacks, so you'll need to consider them when designing your tables and your web site.
Tables defined with a percentage will expand and contract with the browser at different resolutions, or if the viewer changes the size of the browser window. These are often used on pages or sections containing mostly text, which may not need precise formatting. The advantage here is that you can fill the screen no matter what its size, so you don't have to worry about blank space. Also, when a browser is opened in a really small window, the viewer may still be able to read your text (depending on your layout). On the other hand, percentages can be risky as they may look bad in really high or low screen widths. If you use this method, be sure to test with as many widths as you can to ensure everything looks how you want it to appear. Also, you have to be careful using images and horizontal rules, as they can cause the table to expand beyond the percentage you set if they are too long in width.
Tables defined with a set pixel width will remain at that width no matter what the viewer does to the screen. In this way, you will know what your table looks like on all screen widths. On the bad side, you leave lots of blank space for those at high resolutions, or you may end up giving the dreaded horizontal scroll bars to those with smaller screen widths. Often these are set at about 600 pixels so those with 640x480 can view the page with a maximized browser. This keeps the page viewable for most everyone, but can leave blank space on one or both sides at high resolutions.
Yet There Still Could Be More
There are numerous other issues and potential problems with tables, but it is almost impossible to cover them all at once. Hopefully these tips and bits of information will help you get the most out of your tables until a sequel or two can be written!
|
