Site Designing:
Change colour of the text or link
- Change font colour
You can used these wapka tags
:colo*r-blue: here you will write your text or links and close it with :/color*:
then you will get like this here you will write your text or links and close it with and dont forget to delete * from anywhee you found if exist in code sample! - Change background colour
This will change only the background color of the text, not the whole page..
:bgcolor-red: Sample text :/color:
then your result will be Sample tex
thats it... Designing a Web/Wap page
To used this feature you will need to know some HTML tags, but dont worry if you know atleast the colour_name/colour_code and you will surely know it..! Only a minute will take to let you know.. Just see this carefully and learnt..
<style type="text/css"> body { color: COLOR1; background-color: COLOR2; } a:link { color: COLOR3; } </style>Now just put these codes in the Wml/xHTML code to any page.. This styles is valid for only one page.. And you have to change
COLOR1 = Text colour
COLOR2 = Background colour
COLOR3 = Link Colour
the colours are to be put in colour NAME or Colour CODE..
# How to Design in attractive way
How will you change or design the margin, Border, font, paddding, Button style, input style, textarea styles..etc..etc.. You can modify each and everything in your site in your own styles...
How to design Body
The body tag can include many things, and we are going to try to explain them briefly..
body { color: COLOR1; background-color: COLOR2;
background-image: url(''/URL.jpg'');
background-repeat: repeat-TYPE1;
background-position: TYPE2;
font-weight: TYPE3;
font-family:NAME;
font-size: SIZE;
padding: WIDTH;
margin: WIDTH1;
border: WIDTH2 STYLE COLOR3;
maximum-width: WIDTH3; }
These body attributes are the common styles that we saw in every page now lets try to explain them..
¤ COLOR1 - Name/Code of text colour
¤ COLOR2 - Background colour
¤ COLOR3 - Border colour
¤ URL - Image url for background
¤ TYPE1 - Backgroung repeat type, the posible values are- repeat-x, repeat-y, no-repeat, repeat
'repeat-x' indicate that the background image will repeat horizontally or X-axis only once!
'repeat-y' this will repeat the image vertically or Y-axis in one column
'no-repeat' this indicates that the background will not repeat..
'repeat' this indicates that the bg image will repeat in X and Y-axis
¤ NAME - font family name, Arial, verdana...and more
Also available to used background: url('URL.jpg') repeat-TYPE COLOUR POSITION;¤ TYPE2 - backgroung position (used this only when TYPE1 in 'no-repeat') and the values are- left, right, center, bottom, top, top left, top right, top center.....etc..
¤ TYPE3 - font weight weather bold, small or normal
¤ WIDTH - Padding width
¤ WIDTH1 - Margin width
¤ WIDTH2 - Border width
¤ STYLE - border style ( solid, dotted, dashed, outset, inset, ringe...etc)
¤ COLOR3 - border colour
¤ WIDTH3 - the fix maximum width of your page..
Styling A Link
here ia the sample
a:link { color: COLOUR;
text-decoration: TYPE;
font-size: SIZE;
font-family: NAME; }
Now change all the big letters..
a:hover { STYLES } this is all same with a:link, but the main difference is that this is active only on the link when the mouse or pointer is hover on it.. So to make your site more attractive you must used this..
a:active this is also same style and this will active when clicking the link, but only a short time, this confirm the link that they visit or click
a:visited And this one is for stylink the link of the user already visit for 1 session. Suppose you visit to some link and just hit Back link then this a:visited style will appear to the link you just visit.. Thats all...
Designing INPUT tags
Some common Input Tags are:-
- Text
- Password
- Submit
- File
YOU HAVE TO DESIGN THESE TAGS LIKE THIS
input[type=text] { YOUR STYLES }
input[type=file] { Your styles }
and type=password, type=submid are also same process
If you still do not know how then you must see the samples
Designing Textarea, Select field, Img tags..
+ Textarea
Not too different if you know how to design body tag.. But here is some attributes that TEXTAREA can contain:-
color, background-color, border-style, border-width, Border-color, background-image, row, column,
from here ROW represent the width of the textarea and column is the height of the area.. Normally it is counted in the size of the letter i.e. For one letter let say 'O' is row="1" column="1" but if the area for OOO is row="1" column="3"..
+ Select
you can modify this tag only background, color and border styles
+ img
Img tag is only for the arrangement of any image which you put in your site..
You can modify this tag as -
*align - for alignment of image [left,center,right]
*vertical-align - for the alignment vertically [top, center, bottom]
* max-width - fix maximum width of the image
* max-height - for fix maximum height
+ p
this is for modifying the items between < p > tag..
+ h1
This is for modifying the h1 elements between <*h1> and also you can create h2, h3, h4...and so on..
How To Create CSS Class
Now, how will you create your own class?? Let see the example first then we will explain..
.classname { color:#000000;
background-color: #ccc;
border-left: 3px solid #00ff00;
border-bottom: 1px dotted #0000ff;
border-top: 2px dashed #cc0000;
margin: 2px;
padding: 2px;
font-weight: bold;
}
you must know that before the class name . Must be put..
i.e .class1 { styles }
.class2 {styles } like this..
* How To Used CSS Class
Its very simple.. You simply put
class="classname"
this anywhere you used HTML tag which can contain class like,
<div> <a> <table> <td> <span>...etc..etc..
Demo Of A site Style Sheet
<style type="text/css">
body { background-color: #000;
color: #009900; border: 2px inset #888888;
margin: 0px;
padding: 0px;
font-family: arial;
font-weight: bold;
font-size: 12px; }
a:link { color: #cc0066; }
a:hover { color: #888;
background-color: #121212;
text-decoration: blink;
border: 2px solid #006600; }
a:active { color: #ccff00; }
a:visited { color:#0000ff;
background-color: #202020; }
input[type=text] { background-color: #101010;
color: #808080;
border: 1px solid #131313; }
input[type=password] { { background-color: #101010;
color: #808080;
border: 1px solid #131313; }
input[type=submit] { color: #000;
background-color: #006600;
border: 2px outset #004400;
textarea { background-color: #101010;
color:#fff;
border: 1px solid #330000; }
select { color: #ccc;
background-color: #000;
border: 2px solid blue; }
img { align: center;
valign: top; max-width: 50px; }
p { padding-left: 3px;
padding-top: 2px;
padding-bottom: 2px }
h1 { font-weight: bold;
font-size: large;
padding: 3px; }
.class1 { background: url('/Image_url.jpg') repeat-x #111;
color: #ffcc65;
padding: 2px;
border: 1px solid #333355; } .class1 a:hover { text-decoration: blink; }
.class2 { background-color: #ccc;
color: #000;
padding: 1px;
border: 2px inset #444; } .class2 a:hover,a:active { color: #363534; background-color: #323232; }
</style>
Now modify the above codes with your own styles then you can be a great web-designer..
You can add CLASS as many as posible..
half of this page follow this stylesheet..!!
============================================================
MORE TUTORIAL ABOUT SITE DESIGNING
============================================================
* Make your site attractive! If your site especially your home page is attractive then visitor may interested in your site, then they will visit again and again
* Your home page must look simple but must attractive
Try not to pt so many different things in your home page!. The item in your home page must be just a main category of your site.
* You must used a good Title
Used a nice and good titles for every cotegory in your site.. For example if you have a downloading site then instead of just writting DOWNLOAD you may write as New Downloads, new updates, ...etc..etc.. Its upto you..
* Domain..Domain..Domain..
A good and easy to remember domain is appreciate by everyone.. Try to used your own Domain, used less Sub-Domain!!
* Be yourself!!
Lastly, do not used too many Wapmaster Tools that other Site owner provide that can sent user to their site. If you used these too much, then the chance of leaving your site by the visitor is more, and if thei found some good site other than your site, they may not came back to your site.
But here i dont mean of using CSS and JAVASCRIPT, but if their javascript contain the authors advertisement like.. -power by domain.com.. You may not used such a worst thing to your own site.
But the good and nice CSS and Javascript will made your site More attractive.
0 মন্তব্য(গুলি):
একটি মন্তব্য পোস্ট করুন