The How To Do Things Blog » Web Designing http://www.howtoplaza.com How to wisdom from across the Internet — want to know how to do something? You may find the solution here. Wed, 13 Aug 2008 15:35:37 +0000 http://wordpress.org/?v=2.6 en How to create CSS mouseover or rollover with images http://www.howtoplaza.com/how-to-create-css-mouseover-or-rollover-with-images/ http://www.howtoplaza.com/how-to-create-css-mouseover-or-rollover-with-images/#comments Thu, 26 Jun 2008 13:17:43 +0000 Amrit http://www.howtoplaza.com/how-to-create-css-mouseover-or-rollover-with-images/ The mouseover and rollover effect not only beautifies your layout, it also helps your visitors realize that they are hovering their mouse pointer over a link. The mouseover and rollover effect can be achieved with images and without images. It is easier to create a mouseover or rollover effect using simple CSS techniques in the following manner:

a{
    border:1px solid #FFCC00;
    padding:5px;
    text-decoration:none;
    color:#000000;
}
a:hover{
    border:1px solid #FF6600;
    color:#FFFFFF;
    background-color:#000000;
    text-decoration:underline;
}

This CSS code changes the box color and the link text color when the mouse pointer is hovered over it. Padding of 5 pixels have been used to give a box-type look. Test it to know the effect.

With CSS you can use images, but mostly as background. It is something like this:

a{
    background-image:url(mouseoutimage.gif);
}
a:hover{
    background-image:url(mouseoverimage.gif);
}

You can try out different other CSS combinations to beautify your links further.


Technorati Tags: , , ,
]]> http://www.howtoplaza.com/how-to-create-css-mouseover-or-rollover-with-images/feed/ How to upload your files using FTP http://www.howtoplaza.com/how-to-upload-your-files-using-ftp/ http://www.howtoplaza.com/how-to-upload-your-files-using-ftp/#comments Tue, 24 Jun 2008 16:44:25 +0000 Amrit http://www.howtoplaza.com/how-to-upload-your-files-using-ftp/ FTP stands far file transfer protocol. You can use FTP to upload files to a server where you have an FTP account. You can also upload files as an anonymous FTP user but it depends on whether the FTP server allows you to do that or not. In order to upload your files using FTP you primarily need three things:

  • The FTP server address
  • Username
  • Password

Of course you also need an FTP client; and FTP client is nothing but a program that enables you to upload files to a remote server using FTP connection. It’s like sometimes you need a program to read your e-mail or for wordprocessing.

The FTP server address is given by the host company or the person who manages the server. He or she can create an FTP account for you and then give you the needed information. When you decide to host your own domain under commercial server when you create your domain account you automatically get an FTP server address. Most likely your FTP server address would be yourdomain.com. If it is not your domain then the people running the website will either generate an FTP server address for your account or you will need to have them create it for you.

You can use any of the freely available FTP clients. FileZilla comes highly recommended. In case you are using Firefox you also get a plug-in called FireFTP that lets you upload files through an FTP connection. After you have downloaded and installed the FTP client you need to create a new account. When you create an account you will attach a name to that account; enter the FTP server address; enter the username and then the password. When you connect you either go to your user directory where you are supposed to upload your files or you go to the main directory and then from their you go to the directory assigned for your files.


Technorati Tags: , , ,
]]> http://www.howtoplaza.com/how-to-upload-your-files-using-ftp/feed/ How to create abstract lines background with Photoshop http://www.howtoplaza.com/how-to-create-abstract-lines-background-with-photoshop/ http://www.howtoplaza.com/how-to-create-abstract-lines-background-with-photoshop/#comments Tue, 24 Jun 2008 16:23:31 +0000 Amrit http://www.howtoplaza.com/how-to-create-abstract-lines-background-with-photoshop/ You come across such abstract lines backgrounds on many websites in the headers or in the sidebars. Abstract lines in the background create an artistic effect for your background and it shows you just haven’t used some random image to create graphic effects for your website. It will also impressed your visitors. Abstract lines background can be easily created with Photoshop; this link tells you how to do it.


Technorati Tags: , , ,
]]> http://www.howtoplaza.com/how-to-create-abstract-lines-background-with-photoshop/feed/ How to make your web design layout cross browser compatible http://www.howtoplaza.com/how-to-make-your-web-design-layout-cross-browser-compatible/ http://www.howtoplaza.com/how-to-make-your-web-design-layout-cross-browser-compatible/#comments Thu, 19 Jun 2008 11:50:28 +0000 Amrit http://www.howtoplaza.com/how-to-make-your-web-design-layout-cross-browser-compatible/ While designing CSS layouts you must have encountered situations than is your CSS web design looks great in one browser but renders horribly in another. This mostly happens when you’re trying to design a website that you want to took the same in Firefox as well as Internet Explorer. Many web designers pull their hair while trying to make the CSS layout look the same in all major browsers. Although some browsers like the Internet Explorer have some faults if you remain within the conventions and don’t overtly change the nature of fonts, images and DIVs you can easily create a cross browser CSS web design layout. This link discusses very nice techniques to make your CSS web design layout cross browser compatible.


Technorati Tags: , ,
]]> http://www.howtoplaza.com/how-to-make-your-web-design-layout-cross-browser-compatible/feed/ How to style your text or fonts using CSS http://www.howtoplaza.com/how-to-style-your-text-or-fonts-using-css/ http://www.howtoplaza.com/how-to-style-your-text-or-fonts-using-css/#comments Sat, 14 Jun 2008 16:59:02 +0000 Amrit http://www.howtoplaza.com/how-to-style-your-text-or-fonts-using-css/ By using CSS styles you can control the complete look of your website with just a single file; it is called the stylesheet file in which you define all the styles for all the components of your website. A great thing about the stylesheet file is that by merely changing that file, whether your website has 5 pages or 5000 pages you can completely change the look and feel of your website without having to change individual web pages. Since most of the written content is displayed by using fonts it helps if you know how to style your fonts and text using CSS or cascading style sheets. A basic example of styling your font using CSS would be

#content p{
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:10pt;
    text-align:justify;
    color:#CCCC66;
}

Most of the style definitions are easy to understand. For instance font family means what fonts to use while displaying the textual contends of a paragraph of the DIV called content. Before going further let us see what a DIV means in a cascading style sheets file. It’s basically a block on your webpage. Or you can call it a container. So everything defined within that container will look the way it has been styled in the CSS file. In the example above what we mean to say is that whenever <p> tag appears within the container "content" it should look the way it has been styled in the stylesheet file. In a similar manner you can style any text element on your webpage. Let us now see how to define a header tag.

#content h1{
    margin:0;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:20pt;
    color:#CC6633;
    border-bottom:1px solid dotted;
    padding-bottom:3px;
    display:block;
}

If you use the <h1> tag without the stylesheet definition it will use the default font of the user that might not look good with your current theme. The above definitions help you decide how your <h1> tag looks on your webpage. Most of the definitions are self explanatory but there are three things that might look a bit confusing. We have set margin to zero so that there is no blank space above and below the header tag. The bottom padding is used so that the bottom border does not touch the text. The display is set to block so that in case you define a background color or an image for your header tag it horizontally fills the space within the container. This is how you can style your font or text using CSS.


Technorati Tags: , ,
]]> http://www.howtoplaza.com/how-to-style-your-text-or-fonts-using-css/feed/ How to learn the basics of web designing http://www.howtoplaza.com/how-to-learn-the-basics-of-web-designing/ http://www.howtoplaza.com/how-to-learn-the-basics-of-web-designing/#comments Thu, 12 Jun 2008 17:11:50 +0000 Amrit http://www.howtoplaza.com/how-to-learn-the-basics-of-web-designing/ Your web designing skills can help you a lot if you conduct your business on the Internet. A little bit of web designing skill can come handy even if you manage a blog. This way you don’t always have to depend on your web designer for small changes. Not much knowledge is acquired if you want to make some small tweaks in your existing design. Even a little bit of programming shouldn’t be intimidating. For instance in php it is enough to know what command gives an output on the webpage. This way if you want to change that output you can go to that particular command and change the text string within that command. The main thing is knowing how to learn the basics of web designing. Fortunately Web designing is the subject that has been vastly covered on the Internet due to obvious reason: the Internet functions on websites and websites need web designing. If you simply search for "web designing" on Google you will find millions of pages telling you how to design websites. This link at Mashable showcases a few videos that teach you the basics of web designing.

]]> http://www.howtoplaza.com/how-to-learn-the-basics-of-web-designing/feed/ How to SEO as a web designer http://www.howtoplaza.com/how-to-seo-as-a-web-designer/ http://www.howtoplaza.com/how-to-seo-as-a-web-designer/#comments Tue, 10 Jun 2008 12:57:42 +0000 Amrit http://www.howtoplaza.com/how-to-seo-as-a-web-designer/ Since more and more websites depend on targeted traffic from search engines it is very important for you as a web designer to know how to design search engine optimized websites. In fact these days when a client contacts a web designer he or  she asks for an SEO website and not just simply a website.  But how do you SEO a website? It is not as difficult as it seems; you just need to put the right pieces at the right places. When search engine crawlers come to index your website they look for certain information at particular places and when the don’t find that information where they are looking for they draw their own conclusions and rank the page or website for the wrong keywords.

The SEO process of a website starts at the very beginning and this you should keep in mind when starting a new project. Include keywords in the page titles, keep your content as near to the top as possible, have a clearly defined navigation structure containing all your important keywords and key phrases, use headlines and bulleted lists to organize your main points, use appropriate anchor text for hyperlinks and keep your source code as clean as possible. Visit this link for more details.


Technorati Tags: ,
]]> http://www.howtoplaza.com/how-to-seo-as-a-web-designer/feed/ How to make sure people don’t leave your website quickly http://www.howtoplaza.com/how-to-make-sure-people-dont-leave-your-website-quickly/ http://www.howtoplaza.com/how-to-make-sure-people-dont-leave-your-website-quickly/#comments Wed, 21 May 2008 15:19:20 +0000 Amrit http://www.howtoplaza.com/how-to-make-sure-people-dont-leave-your-website-quickly/ The success of your website or blog depends on how long your visitors say on there. When they stay there longer they explore the website, access other pages and sections and this increases the chance of they doing business with you, or remembering your blog or website to return, or bookmark.

Once they are on your website or blog you have to first engage them, and then make all the important sections easily available. There must be very few unnecessary distractions. Vandelay Design tells you more about how to keep people on your website or blog for longer time.
Technorati Tags:
]]> http://www.howtoplaza.com/how-to-make-sure-people-dont-leave-your-website-quickly/feed/ How to create a dark-themed web design from scratch http://www.howtoplaza.com/how-to-create-a-dark-themed-web-design-from-scratch/ http://www.howtoplaza.com/how-to-create-a-dark-themed-web-design-from-scratch/#comments Wed, 21 May 2008 14:44:26 +0000 Amrit http://www.howtoplaza.com/how-to-create-a-dark-themed-web-design-from-scratch/ Frankly, dark themes are not my favorite web design themes, but some of them are really cool. A have visited a few dark-themed website but right now I cannot recall their links.

When you are creating a dark-themed web design from scratch (or for that matter, even if you are redesigning an existing website) you should pay special attention to the contrasts. The backgrounds and the foregrounds should strain the eyes of your visitors. Read a few more tips on how to create a dark-themed web design from scratch at PSDTuts (wonder who thought of this name).
Technorati Tags: ,
]]> http://www.howtoplaza.com/how-to-create-a-dark-themed-web-design-from-scratch/feed/ How To Save More Money http://www.howtoplaza.com/how-to-save-more-money/ http://www.howtoplaza.com/how-to-save-more-money/#comments Tue, 09 Oct 2007 13:27:11 +0000 Amrit http://www.howtoplaza.com/2007/10/09/how-to-save-more-money/ Want to save more money? You need to develop a habit of saving money regularly. Once you build a habit of saving money it’ll become a second nature to you and you won’t even have to try hard. You don’t even have to get labeled yourself as a miser in order to save money, all you have to do is carry out some lifestyle changes and constantly remain aware of the need to save money. When you constantly remind yourself that you need to save money you make a conscious effort of saving it.

I think the best habit of saving money would be to keep a track of it. Observe your saving trends for a few months and then keep that as your target. Remember that your target shouldn’t become a nuisance to your family and yourself. People need clothes, food, education and other stuff to live so don’t start saving money by investing on these necessities less. Just re-orient your spending. Click here to read more.

]]> http://www.howtoplaza.com/how-to-save-more-money/feed/