Webdesign

 

Learn to make an "image-swap", where one picture is changed into another, on mouse-over (see the picture above). Watch this page for further instructions http://htmlgoodies.earthweb.com/tutors/imageflip.html 

Joe Burns, Ph. D. has a great collection of tutorials regarding HTML, JavaScript, and Java Applets.   
 
Learn how to position a watermark on your webpage  (e. g. in the middle of the page), and make it visible (no matter if you scroll down the page). See how it is done here http://www.dynamicdrive.com/dynamicindex3/fixback.htm
 
Here is a table nested into another table, to obtain a 1 pixel size border. Pretty cool and shown on this webpage

 http://resources.the-protagonist.com

 
In FrontPage you cannot make dashed lines as table borders.  Instead you have to "cheat" and put pictures of dashed lines in you table, so that it looks like the table is dashed. See how it is done here http://www.webdesignskolan.com
 
Make the small arrow appear  " on.gif (112 bytes) ", on mouse-over (se the navigation menu to the left) Get the JavaScript code on this webpage http://www.wsabstract.com/script/script2/arrowimage.shtml.
 
Learn to remove the line under your links. Go to this page to see the simple Java Script code http://www.wsabstract.com/script/cut108.shtml
 
Learn to make tabs. Draw the tab in PSP or PS, or copy this one   Chose the grey area with the "magic wand"  tool and fill it with colour. Then apply text, I chose font Verdana", size 8 and bold, but do as you like. First apply a black copy of the text to act as a shadow, then a white one moved one pixel up and to the left. And viola - your tab is finish! Make the tab clickable and attach a hyperlink to each tab.  

You can make lots of different tabs, here are some examples ....

 
The tabs on Apples homepage are really cool. See how to make "Mac-style" tabs or buttons  on this page   http://home.zonnet.nl/epragt/tutorials/photoshop/shapesandobjects/macbutton/index.jsp.htm
Mac has also a cool horizontal line under their tabs. Make it using "gradient fill" in PSP. Here is a try. 
 
 
Change the colour on your  scroll-bar (only works with IE), see how it is done on this page, and watch the example to the right http://www.websitetips.com/info/css/scrollshot1.html or on this page  http://www.draac.com/css/csstricks.html
 
How do you hide the little grey "Picture icon" in Internet Explorer 6. See how it is done here http://www.webdesignskolan.com

 
 


Here is an  IFRAME. You can learn to make this kind of frame on the page: 

 

Webdesignskolan

 

 

This page is  50% transparent and with a background picture in the table.  

 

 

Here is a table     
with shadows. See how it is made   

 
here  Webdesignskolan    


You can make a dashed line around a table with CSS, look at this page to see how it is done http://www.dionaea.com/web/css-lines.html  It is not very difficult.
 
 

Learn to make tables with a border on this page http://www.webdesignskolan.com/ Here you can also learn to make the cells change colour on mouse-over (try example 1). If you add a link, you have a simple menu. 

Example 1 - all is marked
 Red  Yellow  
 Green  Pink  

Example 2 - only the border is marked
   
   
 
Text
This is an example on the simple table with a thin border and a top text. It is made like the table above, but with an extra column on the top, which has the same colour as the background colour. 

 

Painless thin borders on traditional table
Cell spacing will need to be "0"

Style the <table>

Style the <td>'s

table.yourclass {
border-top: 1px solid #000000;
border-left: 1px solid #000000; }

table.yourclass td {
border-right: 1px solid #000000;
border-bottom: 1px solid #000000; }
 

If you want to make vertical lines, make a table with three horizontal cells, make the middle cell width 1 pixel and chose the background colour to the colour you want for the horizontal line. Use the two other cells for your text. 

 Write your text here

 

 
 

Put text or picture here

More cells form a menu, where you can add links


A table made with CSS, the cell has black/white shadows, and the cell changes colour on mouse-over. Change the colour yourself. Very elegant and seen on this page  http://www.beckisdesign.se . On the same side is a good Photoshop tutorial.
 
Link with yellow background     

How do you get links with a yellow background, learn from this page http://www.javascriptcity.com/scripts/local/smouse2.htm

 
Here are some text which turns yellow when using CSS.  

Learn how to do it here http://www.codeave.com/css/code.asp?u_log=4007

See how you make the textbox and button here
http://www.draac.com/css/csstricks.html

 
     You can also make buttons with other colours!

 

Rounded corners with CSS without using any .gif files - really cool! 

The corners are really several boxes with a difference in size on a few pixels, which makes your eye think that the corner is round. To make the radius bigger you use more boxes. See how it is done here  http://www.webdesignskolan.com/ 

Wit CSS you can make one letter big and the following letters smaller. You can sometimes see this in newspapers or magazines.  

I have tried to make the first letter cover four lines. The font size is exactly 100 pixels, while the height is 70 pixels. See how you do it here http://www.mandarindesign.com

If you continue to write more text, you can see how the first big "W" follows the rest of the text. It is very easy to make with CSS. 

Sometimes you need a big letter as the first letter in a paragraph. It looks best if it is followed by a lot of text. See how it is done here http://www.mandarindesign.com

 
1 pixel border with HTML

Here is another example showing the table with a 1 pixel border. Paste the following code to make a similar table: 

<table align=left width=233 height=72 cellpadding=0 cellspacing=0 border=0 bgcolor='#000000'>
<tr><td width=100% valign=middle align=center BGCOLOR='#000000'>
<table align=center width=231 height=70 border=0 bgcolor='#E9E3DE' cellpadding=0 cellspacing=0>
<tr>
<td align=center width=100% height=100%>1 pixel kant med HTML</td>
</tr>
</table>
</td></tr>
</table>

 

A box made with CSS with ROUNDED CORNERS AND 1 PIXEL BORDER. It took me ages to learn how to make it, but finally here it is!
______________________________

Learn how to  make it here: 

 http://www.roast-horse.com
      Macromedia box

This box is a copy of the ones on Macromedia's homepage with rounded corners and a small shadow, cool isn't it ?

  Box number 1

Here I have tried to make boxes like on this webpage http://dmxzone.com
______________________

Rounded corners in two of the corners and a small shadow, really cool!

 
  AUDIOFEEDS

Here is a box made like the ones on the page 
http://audiofeeds.org/


They have a small shadow on the right, really cool!  

 
 
IE 6.0 cannot show 1 px dotted borders, but hopefully the error is corrected in IE 7.0. Until then, we have to cheat and use pictures ........ 
Buttons are always useful. Learn how to make a glass button on this page http://www.v4images.com

Learn how to make different kind of links. The normal colours on links are: 

Standard link - not used  (blue - #0000ff)
Visited link - used (purple - #800080)
Active link - the colour when mouse-over (red - #ff0000)

Here are some examples: 

Example 1: Link changes colour and dotted line appears                     www.storeide.se

Example 2: Dotted line changes colour                                            www.storeide.se

Example 3: Classic link which looses underline on hover                     www.storeide.se

Example 4: Link without underline, which changes colour                    www.storeide.se 

Link  With CSS you can make cute buttons, which previously could only be made with a picture. Here is an example. See the code on this page:  http://www.webcredible.co.uk

[Return to top]