|
| | Over the years, we have encountered many problems in dealing with web-designing. In here, we would like to share our experiences with every web-designer who may be encountering the same problem. Please, feel free to contact us if you notice any error or have any question.
Web-designing Tips:
1. How to create an icon on the address bar?
2. How to jump around a page?
3. Validating a website.
4. Working with symbols.
1. How to create an icon on the address bar?
When using Firefox or Netscape, etc., you may notice that, upon entering certain website, a unique icon appears to the left of the address bar. When you bookmark that page, the icon will also appear on the bookmark. Not only will the icon help to convey the identity of a website, but it will also help a user to locate the bookmark for the website easier when he/she sees the icon.
So what do we need? First of all you need an icon file. If you don't have one, you can simply design an image using Photoshop or Paint or whatever graphic-designing software that you can use. Save the image into a popular image file such as ".gif" or ".jpg". Once you have the image, you can use any icon converting software such as Picture to Icon Converter or Any to Icon (these shareware/freeware can easily be founded on Google) to convert your image file into icon file. Upload your icon to your web server.
In the <head> tag of your index file (index.html or index.htm or index.php, etc.), include the following tag:
<link rel="shortcut icon" href="[yourlogo].ico">
Replace [yourlogo] with the location and the name of your logo file (remove the bracket []).
2. How to jump around a page?
Let's use this page as an example. When you click on a tip/tutorial on the top of this page, you browser automatically scroll the page down to the portion where the tip/tutorial that you chose is located without reloading the page. This is a useful and easy feature that can be very helpful on certain pages such as the FAQ page.
Using this feature is very simple. First choose the portion of the page in which you want to direct to (this feature may not seem to work if your page only contains a few lines or if your page is already down at the bottom). Using Coding mode/HTML mode, go to the left of the portion you chose and type this in:
<a name="[section1]" id="[section1]"></a>
Replace [section1] with a unique name/id (remove the bracket []).
For example, if you have this as your original code:
<p>Sample Paragraph</p>
Then, after applying the code, it should become like this:
<a name="sample" id="sample"></a><p>Sample Paragraph</p>
But wait, we are not done yet! After choosing all the locations, you need to provide the link to the viewer. Let's assume that we have chosen the Sample Paragraph above as the portion we want to direct our viewer to, and that we have given it the name/id "sample", now we want to make the word "direct" into a link that direct us to the Sample Paragraph, then put in the following code:
<a href="#sample">direct</a>
As you may have noticed, the code is almost exactly like a normal link, except for the "#" being used. Note that if you put "#top", you will direct the viewer to the top of the page, and if you put "#bottom", you will direct the viewer to the bottom of the page.
3. Validating a website.
You probably may have seen some websites with some yellowish logos like this one 
or 
. "What is that for?" You may ask. Well, let's just say that it is like a "spell-check", but instead of checking for grammatical errors, it is checking the codes on your website. If you are a web-designer, you may want to go to http://validator.w3.org/ to check your website. It is very likely that you will get some errors or warning about this and that. The followings are some errors that we have encountered and some solutions for them.
1. Before you validate your website, make sure that you have declared a DOCTYPE, such as XHTML 1.0 or HTML 4.01, etc. If not, you may get an error that says something like "No DOCTYPE Found!" Here is a list of DOCTYPE that you may consider using: http://www.w3.org/QA/2002/04/valid-dtd-list.html. Note that your DOCTYPE must be consistent with your codes else you will only get more errors!
2. If you are using JavaScript, remember to put in the following in the script tag if you have not already done so:
type="text/javascript"
3. If you are using Macromedia Flash, do not use the <embed> tag, use the <object> tag instead. Example:
<object
type="application/x-shockwave-flash" data="movie.swf"
width="500" height="400">
<param name="movie" value="movie.swf" />
</object>
The script above will include a flash file named "movie.swf" with a width of 500px and a height of 400px.
When using CSS style sheet, you may often encounter a warning concerning no background color specify. To avoid this problem, simply add this to the style needed:
background-color:inherit;
This will make the background use the default color while avoiding the warning.
4. Working with symbols.
When using symbols, such as © or ®, it is very common for new web-designers to copy and paste those symbols from an online source or from Microsoft Word onto the html code, which, more than often, will result in the appearance of some weird symbols on the website. To avoid such problem, you may use the html equivalent of those symbols. For example, © is © in html. If you are using Macromedia Dreamweaver, then a list of symbols will appear as soon as you type in & into the code. Otherwise, you may get the code for these symbols from http://www.alanwood.net/demos/macroman.html
