Tutorial of Paper Texture Website in Photoshop Part 2

Part 1

Part 2 - Creating the Website Layout

So now we’re going to create a portfolio layout to go with our paper texture. Here is the approximate structure for the homepage. As you can see it’s a bit more of a complicated structure than in the previous web layout tutorial because this time we have a layout inside the layout.
So our overall grid is a three column grid, then in the main panel, we’ve used that grid to break the area into two main spaces, one is the size of column 1 and the other spans over both the other columns.

Step 13

So first we’re going to create a working area and lighten it up. So here I’ve dragged two guides on to the screen, one at 100px and one at 1100px – that makes the area I’m working in exactly 1000px which is perfect.
Then we create a new layer and draw a big white box as shown.

Step 14

Next we’ll set the white box back to 25% opacity.
Then we’re going to roughen it up. There are lots of great grunge brushes around, but for this step we’ll just use one of Photoshop’s standard brushes. You can see it in the screenshot above with the 60 underneath it.
If this brush isn’t appearing for you, just click that little right arrow at the top of the brushes screen and choose Wet Media Brushes, then click Append to add them to your current set.

Step 15

So choose the Eraser Tool (E), select that brush we just mentioned and then go around the edges of our shape and just roughen it up however you feel. I’ve left the top edge intact as you can see.

Step 16

Next create a new layer just below the white box, and draw in a Radial Gradient (G) going from white to transparency. This is just going to highlight where we’ll be placing our logo in a second. Set the layer to Overlay and 70%.

Step 17

Now we’ll add a little "logo" – in our case just a word set in a nice typeface. The font I’ve chosen here is Egyptian710 BT which is quite a well known font and suitable for our purposes because it’s very uneven looking – capital letters are thicker than the lowercase letters – and the slab serifs look kind of typewriter-ish which goes with our paper theme.

Step 18

Next we’ll make a watermark just to add a bit more stuff in the background. Actually you can go crazy and add tons of stuff into the background texture, but we’ll settle for a single watermark.
So here I’ve written out the word Folio in some random font (HumstSlab712 Blk) and I’ve set it in this colour – #c5c6ba.

Step 19

Now let’s change the blending mode to Colour Burn and 70% and we’ll add a 1px stroke as shown. Notice that for Fill Type I’ve used a Pattern and then chosen a texture I had hanging about. When combined with a low opacity (36%) and blending mode (Multiply) this makes our outline look like it’s faded out in parts.

Step 20

Now we’ll move our watermark to sit behind the logo.

Step 21

Next we’re going to make a little horizontal separator element. So create a new layer and draw in a 1px line in the dark brown.

Step 22

Now grab that same old eraser brush and just go over the line erasing little pieces out of it so it looks distressed. Also get rid of the edges so that it starts at the same place as the white box.

Step 23

Next create a new layer below and draw in a brown box that is about 3-4px high as shown.

Step 24

Set the brown box to Multiply and 5%. This will be a kind of shadow to our separator.

Step 25

Next create a new layer and this time draw a white box about 20px high above the line.

Step 26

Set the white box to about 50% opacity and once again using our brush, just erase the top in a messy fashion.

Step 27

Now repeat the last three steps to draw a second white box, but this time when you erase it, erase more so that it’s a thinner white strip.
When both white layers are combined they will give a messy sort of highlight.
Group these separator layers into a single layer group.

Step 28

Now we can duplicate our layer group to have three copies to form our horizontal grid area as shown.

Step 29

Here I’ve just placed some content in. As you can see I’ve mixed a little bit of the display typeface with a regular HTML typeface.
For the regular text I’ve actually used Cambria which is a Vista font. In the CSS you would have it default back to Georgia for people who don’t have the Vista fonts. If you, yourself don’t have the Vista fonts, you can get them freely & legally, just follow these instructions. There’s a couple neat fonts, I quite like Calibri as well.

Step 30

Now we’re going to add our main panel. So draw in a large rectangular box in the dark brown colour – #1e1a19 – and do so using the Rounded Rectangle Tool (U) with a Radius of 5px.

Step 31

Now zoom into the top left corner and grab a small square selection then fill it in with the same dark brown colour. We don’t want a curve in this corner.

Step 32

Now zoom in on the top right corner and using the Polygonal Lasso Tool (L) while holding shift down make an angled selection like shown and then hit Delete.

Step 33

Now in a new layer above draw in a square of a lighter brown colour, say #352f2b, and then make another angled selection and delete away half the square so you are left with a triangle which is 1px away from the edge.

Step 34

Next create a new layer and zoom in to the top left corner again. We are now going to make our tab shape. We do this using the pen tool and a few very precise clicks. In the image above I’ve switched off all the background layers so you can see the shape exactly. Here’s how you make it:

• Start on the bottom left point and just click a single point in
• Then hold down SHIFT so that you are getting a dead straight line and click the next point along the line, hold the mouse button down as you click so that the point has handles and drag upwards a little bit. This will mean the next point you click is going to have a curve going between.
• Now click the third position and again hold the mouse button down and also hold SHIFT down to drag the handles out at a right angle. You should be able to get that perfect curve. Having shift held makes sure the angles are all nice and precise so it’s just a matter of getting the size and positioning right. It may take you a few goes, but the good thing is you can just press CTRL-Z to undo if you don’t get it right, and if you need to go back more than one step, just press CTRL-ALT-Z
• Next while holding SHIFT down click the fourth point, again holding the mouse down and dragging right so that you get handles appearing. This handle you can see in the image above (because it’s one of the last two points before I screenshot). As you can see the handle should be dead straight – this is ensured by holding shift down.
• Finally, hold SHIFT down and click the fifth point and again drag right. This will give you that awesome final curve.

Step 35

After you make the fifth point, you can just fill in the remainder of the shape any old how, because we’re going to just cut away the bottom edge to be perfectly straight anyway.
Once you have completed the shape, right click and choose Make Selection.

Step 36

Now you can fill in the shape with dark brown to match the main box. Then cut away the bottom extra bits so it’s nice and flat and sits perfectly on top as shown.

Step 37

Next we’ll duplicate our tab layer and move the new one below the old tab (so the brown one looks like it’s in front). Then right-click on our new tab and choose Blending Options and give it a Colour Overlay of this nice reddish-orange colour – #cc5630. The reason we do a colour overlay and don’t just fill in the tab with the new colour is that if you do the second method you will get a few left over brown pixels showing through.
Next hold down CTRL and click on the first tab then choose the Rectangular Marquee Tool and press the right arrow a few times until your selection has moved along to overlap with the orange tab. The reason I say you should choose the marquee tool in this step is that to move a selection you must have a select tool up. If instead you had the regular arrow tool selected you would actually move pixels around as well as the selection. Try both and you’ll see what I mean.

Step 38

Now we create a new layer in between the two tabs and fill in our selection with a darker orange colour – #b44724. Then hold down CTRL and click on the orange tab layer, then click CTRL-SHIFT-I to invert the selection and click on the middle layer and hit Delete. This should leave you with only the darker orange part that overlaps the orange tab.

Step 39

As you can see we’ve created a sort of shadow on our second tab.
Now if I do say so myself these tabs look awesome, and the reason they do is because they overlap. Unfortunately this also makes them harder to work with in HTML. You can however do a variety of things with transparent PNGs, or alternately just make text change colours in rollovers and not worry about changing tab colours. Anyhow this is all a bit beyond the scope of this tutorial. Suffice to say the menu might be a bit tricky to build.

Step 40

So here’s our layout so far. I’ve added a couple more tabs and given them some text.

Step 41

Now we’ll draw in the featured work area. This will be a simple white rectangle where the work will go. Then behind that create another layer and use the Polygonal Lasso Tool (L) to draw a kind of wonky rectangle and fill it with a dark, dark brown colour – #0e0c0c.

Step 42

Next we’ll add some descriptive text on the left and the item itself. Notice that with the text I’ve used a dark brown for the two descriptors (Project Title and Project Description) this makes them fade into the background which is good because they aren’t that important. The title of the project and descriptive text on the other hand stand out. These last two items are set in a light beige colour picked from the background with the title being brighter than the text.
Also I’ve added a faint radial gradient to the work sample going from white to a light beige – just because I love radial gradients and can’t get enough of them

Step 43

Now finally I’ll add a couple of little hand drawn doodles to finish off the design. For these I’ve used David Leggett of Tutorial9‘s excellent and free hand-drawn brushes. You can add brushes by opening the brush palette as shown, clicking on the little right arrow and choosing Load Brushes, then selecting the brush file you downloaded.
Because the brushes are much bigger than I want them it’s important to sharpen the layer after you’ve resized it. So here I’ve shrunk the arrow down and then run a Filter > Sharpen > Unsharpen Mask to fix it up.

The Design

Tutorial of Paper Texture Website in Photoshop Part 1

Tags : Tutorial to make website in adobe photoshop , Learn Web Designing , Learn to Make Basic Website in Photoshop , Learn Tutotorials to desing simple website in adobe photoshop , Learn to make paper texture website in photoshop , photoshop tutorial to make design create website . 

Part 1 - Creating a Paper Texture

There are three different ways you can get a textured paper look:

1. Scan in your own paper
   Check out Bittbox’s Make an Awesome Grungy Paper Texture Tutorial
2. Use someone else’s texture
   There’s heaps of sites that list textures around, check out these links: Bittbox | TextureKing | Psdtuts+ Textures
3. Make it in Photoshop
   This is what we’re going to do!

Making a texture in Photoshop will generally result in a more stylized than realistic look, but it has its own charms. Also it means you don’t need any external images.

---

Step 1

So first we’ll start a new document, this canvas is 1200px wide x 900px high. Next we fill the background layer with a beige colour – #e8e8e2.

---

Step 2

Now create a new layer on top and make your foreground and background colours: #979a8f and #cfd1c5 which are variations of the original colour. Then go to Filter > Render > Clouds

---

Step 3

Now we run Filter > Artistic > Palette Knife with the settings shown in the image above. Palette knife turns our clouds into blobs … sort of, eventually this will give a slight crumpled feel to the texture.

---

Step 4

Next we’ll add some noise to the canvas by Filter > Noise > Add Noise using the setting shown. This should make our texture look rough.

---

Step 5

Now we take our noisy, crumply layer and set it to Multiply and 30%. This will tone it right back.

---

Step 6

Now create a new layer on top and make your foreground and background colours: #42433e and #cfd1c5 – which is a darker version of the last set so that we get more contrast this time. Then go to Filter > Render > Clouds

---

Step 7

Then we again run the Filter > Artistic > Palette Knife filter.

---

Step 8

And this time we set the new layer to Overlay and 60%. This should give our texture a bit more depth.
And that’s it! This is our texture!

---

Step 9

For this tutorial the light texture is perfect, but you can easily make other variations just by messing about with blending tools. For example to make this dark brown paper texture:

1. Take the light version and press CTRL-U to alter the Hue/Saturation, set the sliders to -30, -10 and -5 respectively.
2. Duplicate the layer and press CTRL-SHIFT-U to make it black and white
3. Then still on the black and white layer, go to Edit > Adjustments > Brightness/Contrast and go to -30 and +30 respectively
4. Now set the black and white layer to Overlay
5. Then create another layer on top and fill it with #beac93 then change that layer to Multiply.
6. Duplicate the Multiplied layer
7. Then duplicate the black and white layer and pull it right to the top. Set it to Overlay and 20% and rotate it 90′ to get a bit more depth to the texture.

---

Step 10

If colour variations aren’t enough, you can also change the feel of the texture with the use of different filters. For example here we’ve made a more parchment-y feel by taking our light texture and:

1. Grab the first crumply/noise layer and run a Filter > Texture > Texturizer and use Canvas, 75% and 2 for your settings
2. Grab the second crumply/noise layer and run the same filter
3. Now duplicate the second layer and rotate it by 90′, keeping it set to Overlay and 60%.
4. Create a new layer on top and fill it with white – #ffffff
5. Run a Filter > Texture > Texturizer and this time use Canvas, 200% and 16 then set this layer to Overlay and 20%
6. Now create another layer on top and again fill it with white, this time change the layer blending mode to Color and 53% to get our texture a bit whiter.

---

Final paper texture notes

Now that you have a texture you can of course turn it into a seamlessly tiled background.
For this tutorial we will be using the first texture we made – the one from step 8

Annoying Website Design

Have you ever considered that your website may be annoying? When it’s comes to website design, knowing what visitors hate most is a must, unless you don’t want them to visit you again. This article describes what you should exclude from your website. If you know about an annoying website, feel free to send this article to its webmaster.

A few weeks ago I received an email from a colleague asking me to check one of the website he had developed. He is a web designer and his client wanted a nice attractive flash header. The flash header was great. You can’t miss it at all. Some nice graphics elements were flying in while sound effects created just the right atmosphere. However, after starting to explore the website, the header became very annoying because every time you clicked on the website the header restarted. What was pleasant initially became very annoying very quickly, disturbing your concentration and making it difficult to read what was on the page.

He is not the first to create what I like to call – "annoying website design". Many webmasters, especially new webmasters are totally “in love” with their ideas and tend to go overboard with their design in one way or another. It’s nice to have an attractive header, but is it really necessary to assault the visitor’s mind with it? In my opinion, absolutely not!

Webmasters sometimes forget that their website design should send a message to the visitor that should reflect the website topic and not the programmer’s skill level.

Is Your Website Design Annoying?

Well…. It’s not that hard to be annoying. However, some webmasters are much better than others at annoying their visitors. Check my top 5 list and decide for yourself whether you have been annoying your visitors.

1. Background music – Unless you are operating an online internet radio station or sell music CDs, why play a midi/wav file in the background continuously on every page?
2. Huge font size – If you are designing a website for people with a disability then you are doing the right thing, but if not then you are shouting. People don’t like it when someone shouts at them.
3. Small font size – Do you want to be heard? Keep a normal tone, don’t shout but "speak" in a reasonable volume.
4. Overlapping layers – Layers can be very useful up to the point. But not when they are being used to put an annoying message in the visitor’s face. Don’t try to force your visitor to read your messages. Try persuasion instead of brute force.
5. Popup windows – Even though popup windows are now blocked by many add on tools, webmasters keep using them. The annoying part of popups is sometimes we actually miss important information because of those anti popup tools. Haven't you heard the old phrase "if you can’t beat him, join him”? Don’t use pop up windows. Put your important messages in a central place on your website.

Most likely each one of us has our own private top five lists. You probably have many more annoying design cases in mind. Well, you’re right, the list is much longer then that. I just wanted to describe some of the highlights in order to bring this important subject your attention.

Some of you are probably reading those lines and smiling while some others have a feeling a deja-vu. Keep in your mind that as a webmaster the last thing you want to do is put lots of effort into your website and then find out that your visitors hate it. It's not a matter of taste, it's more about being the same polite person we all try to be when we go to a party.

I tried to point out a few things that might be useful to some web designers and webmasters. I don’t know about you, but I’m going to send this article to my friend, hopefully he’ll send it to his client :)

How to find a good freelancer ?

Whether you currently deal with a freelancer website, or are just looking for the best place to find a freelancer, the biggest problem you face is how to find a good reliable freelance, one that will do the job properly with good quality work and finish it on time.

Many sites offer you, the webmaster, a place to post your projects to be bid on by freelancers. All of these sites let you contact offshore workers that live in countries where wages are only a fraction of what they are in the more industrialized nations. This allows you to keep your project budget low and save money by keeping your full-time staff small.

So, how can you find this “diamond in the rough”? You know, that reliable individual who delivers quality work on time and within agreed upon budget? There is no simple answer. The best you can do is using the tools provided by the freelance website to try and minimize your risk.

Unfortunately, most of the existing freelance websites use a very poor rating system that only allows a webmaster to rate a freelancer on a scale from 1-10. This system doesn’t take any of the more important variables into account, such as the complexity of the project.

The complexity of a project is important. A freelancer doing many simple and inexpensive jobs may have an excellent rating and do very good work for that kind of project. But, there is no guarantee they can handle a more complex project. Since the more complex projects cost more to get done, at least one freelance website has developed a rating system that takes complexity into consideration by using the dollar amount of the project as part of the rating formula to provide the webmaster with additional information. Thereby, hoping to make the webmaster’s decision a little easier.

Here are a couple of additional suggestions for hiring a freelancer:

Do Not Post a Budget !!!

“Why not?” you ask. If you post a budget, most freelancers will bid based on the budget amount. Unfortunately, a reasonable cost in one part of the world is insanely high or ridiculously low in another part of the world.

For example, you want someone to create a logo for you. Any decent graphic artist should be able to do that. So, it probably is safe to go with the lowest bidder. But, suppose you need a sales letter written for an Australian audience, do you really think someone is Eastern Europe or China will be able to do as good a job as a native Australian? Probably not, but, the cost of living is a lot higher in Australia and that individual would need to charge more for the same amount of work.

Do Not Hire Outside of Your Expertise.

But, you say, “If I was an expert, I wouldn’t need to hire someone else!” While that may be true, you do need to be sufficiently familiar with the area of work to be able to accurately describe the project, to know what and isn’t technically possible and know whether the bids you receive are reasonable for the amount of work involved.

If Necessary, get advice from someone who does know the area of work. Most sites provide a message board for you to negotiate with the bidders anonymously before you select one of them for the project. Pay careful attention the freelancer’s reaction to the project. The ideal candidate is one who loves his work. Ask them to describe similar projects they have done in the past or to provide samples of their work if feasible. Graphic artists, web designers and writers will be able to provide samples. Programmers and some others may not be able to provide samples but they may be able to provide references if they haven’t already been rated by other webmasters.

Following the steps above and keeping the lines of communication open will dramatically increase your chances of having a successful experience with your chosen freelancer. It can save you both time and money as well as help you manage your business in the most effective manner. After all, you face all of the same challenges in dealing with freelancers as you face in dealing with any employee, plus the additional challenges created by being in different geographic locations.

Web Design Versus Web Development

The terms web designer and web developer are used interchangeably in the media and advertisements. But, they are not the same thing. Design involves what the visitor sees on your website, development involves the site’s functionality. This article explores the difference between these two disciplines.

A website contains several distinct aspects:

• Look and feel – primarily the graphics, color scheme, navigation elements, etc.
• Content – information, products, etc available on the site.
• Functionality – functionality includes interactive features that the web site provides to the visitors and the required infrastructure needed to provide them.
• Usability – the site from a visitor’s perspective and includes things like program interactions, navigation and usefulness.

Look And Feel

Look and feel includes overall appearance of the website. A Graphic designer decides on what colors and fonts to use and how to layout each of the sites pages.

The graphic designer needs to have a good appreciation for aesthetics and feeling for what combinations of colors and imagery will project the image that the website owner wants visitors to have of the site.

Content

Content is all of the text that is found on a website and includes everything from the privacy policy to a very persuasive sales letter extolling the benefits of a product and asking the visitor to part with their hard earned money and everything in between. If it is written text then it is part of the content. You need a copywriter and editor to create good content.

Functionality

Functionality includes all of the interactive aspects of a web site and includes animation. The common denominator is that programmers using the various web programming languages that work either on a web server or in a web browser create all of these functions.

Flash can be used to animate graphics. Perl, php and java are programming languages used on the web server to create sophisticated dynamic web pages. These pages can work independently but most commonly with a database to create all of the features we have come to expect from a website.

JavaScript is used in browser to create a lot of cool effects such as swapping images when a mouse moves over an image, “ticker tapes”, links changing colors, etc. JavaScript works in the user’s web browser rather than on the web server.

There are also other “backend” applications that are transparent to the visitor such as form processing, content management and other administration programs that make it possible for non-programmers to maintain some aspects of the website’s data.

All of these programs have to be integrated into the HTML code to be used on the webpage.

Usability

Usability is the website viewed from the user’s point of view and involves mostly testing things like:

• Does the look and feel are actually portraying the proper image?
• Is the navigation is user friendly?
• Does the navigation lead the visitor to where the owner wants them to go?
• Does the site load quickly?
• Do the applications work properly?

Design Versus Development

Unfortunately, there is a lot of overlap and integration needed between web design and web development. When you toss in content creation and usability testing, it becomes a real mess.

Can a single individual do all of these things? There are some people who can do all of these things but most people only do one or two of the tasks.

Web design usually involves content creation and look and feel while web development involves creating the functionality and testing its usability.

Web designers need to be proficient with graphic design tools like Photoshop. Most also know HTML so they can implement their designs. However, using animation on the site and layout for the site’s content are also part of the web designer’s responsibility.

Many site owners provide the content for the website but a web designer needs to be able to edit and even rewrite the content if necessary. Web designers also normally do the usability testing for the navigation and site loading speed.

Web development programmers create the functionality for the website, but all of that functionality must be integrated into the HTML pages on the site. Alternatively, the HTML content could also be integrated into the program. Web developers also do usability testing on the site, at least for the functionality they create. So the programmer also needs to have some HTML knowledge as well.

In either case the web designer and web development programmer need to work together to assure that the website does everything that the site owner requested.

Bottom Line – Only large companies can afford to hire separate experts in graphic design, content creation, programming and usability testing when building a new website. In most other cases, the web designer and web development programmer are two different people who must work together to create a successful website.

Website Templates

Website templates are web page designs created by professional web designers that are sold to others for their use. Templates normally have dummy content used as a placeholder so you can see what a finished page will look like. A template is an easy way for a novice to create a good-looking professional quality websites quickly and easily.

Most of the commercially available templates can be found in a variety of themes and color schemes. Theme templates come complete with appropriate graphic for each theme. If you have some graphic or web design skills and a knowledge of HTML, you can create a customized professional looking website at a fraction of the time it takes to create everything yourself. Just remember you don’t own the copyright to the design.

Before selecting a template, you will need to identify the goals you have in mind for your website so you can select the most appropriate template.

Advantages of Using Website Templates

There are several advantages to using templates such as:

• Templates provide the basic webpage layout.
• Templates can provide a consistent look and feel for the site.
• Most come with professional quality graphics.
• Most allow you to customize the graphics if desired.
• It is usually easy to add your content using almost any HTML editor.

Disadvantages of Using Website Templates

• It can be difficult to make any web design changes unless you are skilled in both HTML and can use a graphics program like Photoshop.
• Although features like a login box may be part of the template design, the programs needed to make them work are not included.
• Any interactive features have to be integrated into the template.
• You do not own the copyright to the design unless you actually purchase it from the designer.

Features of a Quality Website Template

The following items are things to look for in a well-designed web template. A template should:

• Be easily editable.
• Be compatible with most HTML editors.
• Upload easily.
• Come with complete html files.
• Have header graphics provided in psd format for easy editing.
• Have their both the fla and swf files if the template uses flash.
• Download quickly after the content is added.
• Retain the original design no matter how much content is added.

Customizing an HTML Web Template

If you want to customize a web template but don’t have the necessary skills to do it, most template designers and other web designers offer template customization services as reasonable prices. These services usually involve minor design changes, customizing header graphics, adding logos, removing unneeded unattractive elements, etc.

Many web developers will be happy to integrate any interactive features into your template. Please keep in mind that the developer will either need to write the necessary scripts or modify existing scripts to make the interactive features work. If an existing script is not freeware, the web developer will have to add the cost of purchasing a license for the script to his labor charges.

Customizing a Flash Web Template

If you want to do anything more than just add text or substitute a graphic file in a flash template, you will either need have expertise in creating flash programs or hire a flash programmer to modify the template.

If the fla files came with the template, you can modify it using a flash editing program such as Macromedia Flash or Swish. If the fla files are not available the first thing that needs to be done is to decompile the movie since the swf files are movies. Once the movie is decompiled, the necessary changes can be made and the flash movie recompiled in any flash editor.

Summary

A quality web template can allow a novice webmaster create a professional looking website quickly and easily at a reasonable cost. Since the templates came in a variety of industry specific themes and color schemes, you should be able to find one that is right for your website.

Web template can offer the professional designer a lost cost alternative to creating the web design, header graphic, logo and all of the other graphical elements, which will allow them to charge less for their work. In either case, it is important to purchase a quality template.

Banner Design Success Techniques

Banners have been a major part of the World Wide Web world since its early days. Copywriters burn the midnight oil looking for new designs that will grab the visitor’s attention and compel him to click on their banner. This article discusses some of the most successful banner designs.

Teasing your curiosity

“Do Not Click Here”. How many of you have seen this slogan in a banner? What did you do when you first saw it? If you are like most people, when you first saw it, you clicked on it. What makes this simple sentence so powerful that it compels the visitor to click on it? The answer is curiosity !!!

Copywriters and web designers are always looking for ways to arouse the website visitor’s curiosity. As banner designers their goal is to attract the visitor to the banner, usually completely ignoring the other elements on the web page that are more important to the website owner. However, because the “Do Not Click Here” slogan tells us nothing about what is on the next page, it arouses the visitor’s curiosity and makes it almost impossible not to click on this banner to see what’s behind it.

Simple integrated design

When Larry Page and Sergey Brin first introduced their product, “Google”, to potential investors, they mentioned Adwords as a backup option in case they didn’t make any money. We all know how lucky they were that they eventually needed to use that backup plan. What made these “boring” ads such a great success?

Unlike other ads, Adwords neither arouse the visitor’s curiosity nor disturb the main flow of the web page. In fact, the opposite is true. Adwords are meant to look like part of the search results giving the user the feeling that those ads are there because he asked for them. No one has any doubt that this simple design helps Google to promote both their search engine and the Adwords advertising program.

Take part in the action

Banner designers wisely used interactive technologies like Flash to develop type of banners that invite the user to take part in the action. Drawing the user into the action can be accomplished in many creative ways. Some web designers use popular old games elements as part of the scene. You all know the famous game pacman. One of the banners that I like the most is the one where the user is allowed to let pacman “eat” few dollar signs. At the successful completion of this mission, a nice slogan is revealed asking him to open a saving account that will earn money with a fixed interest rate. The idea behind those interactive banners is simple: Let the user take part in the action and then at the right moment when his mind is less resistant, show him the sales message. Those interactive banners proved to be very efficient. Their biggest disadvantage is that most webmasters will not allow that kind of banner because it distracts too much from the web page content.

Back to Black and White

Website designers are always seeking to be different with their design ideas. One banner fashion trend that can be found lately is Black and White banners. Although research shows that blue and yellow are the most efficient color to use in a banner, Black and White banners have been seen a lot lately. It’s probably something that will eventually vanish, but the idea behind it is to be different and to make the user wonder what’s up and hopefully click on the banner to find out.

Get Out of the box

Have you heard about the milliondollarhomepage.com? If not, check out this website before continuing to read this article. This website has proven that creative thinking not only can bring you money but also create a whole new trend. Right after the milliondollarhomepage.com got the internet community’s attention, many designers used this idea to deign a banner on which they sell a 10x10 pixel area. Like the original concept, this banner design had its impact. Advertisers are investing money on these ad spaces while at the same time visitors are curious enough time after time looking at those unorganized pixel banners to click on them.

What about the next trends

What the next trends of banner design will be is something that probably no one can accurately predict. It’s up to some web designer to come up with a new concept that proves to be efficient. There is no doubt that in the future we will see new ways of designing banners, especially when more and more advertising budgets are being spent on the internet instead of commercial TV and other types of advertising media. I guess we will just need to be patient.

W3C and Validation

TAG : What is W3C , Learn About W3C Validation , HTML VALIDATION , CSS VALIDATION ,

TUTORIAL of W3C ,

Simple Javascript Drop Down Menu

TAgs : How to Make Javascript Drop Down Menu , Learn Javascript ,Simpple Javascript Drop Down Menu , Javascrit Sliding Menu , Javascript Drop Down Navigation , Tutorials , Tutorial , How can Make Amazing Javascript Drop Down Menu for Website

---

Simple Drop-Down Menu v2.0

It is a One Level Drop-Down Menu with Timeout effect.
Internet has a lot of scripts with the name "Drop Down Menu". One day I needed to make such menu for my site. I have rummaged a heap of sites and archives with scripts. And not found what I looked for. On the Net scripts shared on two variants. The first - utterly worthless scripts. The second - too complex heap up and chargeable.
And I just wrote this simple script:

Sample

This menu can be located anywhere on the page:

• Home
  HTML Drop Down DHTML Menu JavaScript DropDown Cascading Menu CSS Horizontal Menu
• Download
  ASP Dropdown Pulldown Menu AJAX Drop Submenu DIV Cascading Menu
• Order
  Visa Credit Card Paypal
• Help
  Download Help File Read online
• Contact
  E-mail Submit Request Form Call Center

HTML Code

HTML code is very simple and without tables. It used unordered list for menu items and hidden layers near own parent items.
Parent items and hidden layers have unique identifiers. Also these have event handlers onmouseover and onmouseout:

<ul id="sddm">
    <li><a href="#" 
        onmouseover="mopen('m1')" 
        onmouseout="mclosetime()">Home</a>
        <div id="m1" 
            onmouseover="mcancelclosetime()" 
            onmouseout="mclosetime()">
        <a href="#">HTML Drop Down</a>

        <a href="#">DHTML Menu</a>
        <a href="#">JavaScript DropDown</a>
        <a href="#">Cascading Menu</a>
        <a href="#">CSS Horizontal Menu</a>

        </div>
    </li>
    <li><a href="#" 
        onmouseover="mopen('m2')" 
        onmouseout="mclosetime()">Download</a>
        <div id="m2" 
            onmouseover="mcancelclosetime()" 
            onmouseout="mclosetime()">
        <a href="#">ASP Dropdown</a>

        <a href="#">Pulldown menu</a>
        <a href="#">AJAX Drop Submenu</a>
        <a href="#">DIV Cascading Menu</a>
        </div>

    </li>
    <li><a href="#">Order</a></li>
    <li><a href="#">Help</a></li>

    <li><a href="#">Contact</a></li>
</ul>
<div style="clear:both"></div>

CSS Code

<li> tag have loat: left; declaration. sumbmenu layer have visibility: hidden; and position: absolute;. Anchor tag set to display: block;
Everything else is usual decoration:

#sddm
{ margin: 0;
 padding: 0;
 z-index: 30}

#sddm li
{ margin: 0;
 padding: 0;
 list-style: none;
 float: left;
 font: bold 11px arial}

#sddm li a
{ display: block;
 margin: 0 1px 0 0;
 padding: 4px 10px;
 width: 60px;
 background: #5970B2;
 color: #FFF;
 text-align: center;
 text-decoration: none}

#sddm li a:hover
{ background: #49A3FF}

#sddm div
{ position: absolute;
 visibility: hidden;
 margin: 0;
 padding: 0;
 background: #EAEBD8;
 border: 1px solid #5970B2}

 #sddm div a
 { position: relative;
  display: block;
  margin: 0;
  padding: 5px 10px;
  width: auto;
  white-space: nowrap;
  text-align: left;
  text-decoration: none;
  background: #EAEBD8;
  color: #2875DE;
  font: 11px arial}

 #sddm div a:hover
 { background: #49A3FF;
  color: #FFF}

JavaScript Code

Insert this code between your <head></head> tags. Look to the code for the comments:

var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;

// open hidden layer
function mopen(id)
{ 
 // cancel close timer
 mcancelclosetime();

 // close old layer
 if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

 // get new layer and show it
 ddmenuitem = document.getElementById(id);
 ddmenuitem.style.visibility = 'visible';

}
// close showed layer
function mclose()
{
 if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}

// go close timer
function mclosetime()
{
 closetimer = window.setTimeout(mclose, timeout);
}

// cancel close timer
function mcancelclosetime()
{
 if(closetimer)
 {
  window.clearTimeout(closetimer);
  closetimer = null;
 }
}

// close layer when click-out
document.onclick = mclose; 

That’s it! All you have to do now is add some hover styles and make it your own. Enjoy!

Web Hosting Tutorial

How does the Internet work? How can I have my own Web Site?

What is a Web Host? What is an Internet Service Provider?

---

What is the World Wide Web?

• The Web is a network of computers all over the world.
• All the computers in the Web can communicate with each other.
• All the computers use a communication protocol called HTTP.

---

How does the  WWW work?

• Web information is stored in documents called web pages. 
• Web pages are files stored on computers called web servers.
• Computers reading the web pages are called web clients.
• Web clients view the pages with a program called a web browser.
• Popular browsers are Internet Explorer and Firefox.

---

How does a Browser Fetch a Web Page?

• A browser fetches a page from a web server by a request.
• A request is a standard HTTP request containing a page address.
• An address may look like this: http://www.example.com/default.htm.

---

How does a Browser Display a Web Page?

• All web pages contain instructions for display.
• The browser displays the page by reading these instructions.
• The most common display instructions are called HTML tags.
• HTML tags look like this <p>This is a paragraph.</p>.

---

What is a Web Server?

• The collection of all your web pages is called your web site.
• To let others view your web pages, you must publish your web site.
• To publish your work, you must copy your site to a web server.
• Your own PC can act as a web server if it is connected to a network.
• Most common is to use an Internet Service Provider (ISP).

---

What is an Internet Service Provider?

• ISP stands for Internet Service Provider.
• An ISP provides Internet Services.
• A common Internet service is web hosting.
• Web hosting means storing your web site on a public server.
• Web hosting normally includes email services.
• Web hosting often includes domain name registration.

---

Summary

If you want other people to view your web site, you must copy your site to a public server.
Even if you can use your own PC as a web server, it is more common to let an Internet Service Provider (ISP) host your site.
Included in a Web hosting solution you can expect to find domain name registration and standard email services.
You can read more about domain name registration, email and other services in the next chapters of this tutorial.

To make your web site visible to the world, you'll have to store it on a web server.

---

Hosting your own Web site

Hosting your web site on your own server is always an option. Here are some points to consider:

Hardware Expenses

To run a "real" web site, you will have to buy some powerful server hardware. Don't expect that a low cost PC will do the job. You will also need a permanent (24 hours a day ) high-speed connection.

Software Expenses

Remember that server-licenses often are higher than client-licenses. Also note that server-licenses might have limits on number of users.

Labor Expenses

Don't expect low labor expenses. You have to install your own hardware and software. You also have to deal with bugs and viruses, and keep your server constantly running in an environment where "everything could happen".

---

Using an Internet Service Provider

Renting a server from an Internet Service Provider (ISP) is a common option.
Most small companies store their web site on a server provided by an ISP. Here are some advantages:

Connection Speed

Most ISPs have very fast connections to the Internet.

Powerful Hardware

ISPs often have powerful web servers that can be shared by several companies. You can also expect them to have an effective load balancing, and necessary backup servers.

Security and Stability

ISPs are specialists on web hosting. Expect their servers to have more than 99% up time, the latest software patches, and the best virus protection.

---

Things to Consider with an ISP

24-hour support

Make sure your ISP offers 24-hours support. Don't put yourself in a situation where you cannot fix critical problems without having to wait until the next working day. Toll-free phone could be vital if you don't want to pay for long distance calls.

Daily Backup

Make sure your ISP runs a daily backup routine, otherwise you may lose some valuable data.

Traffic Volume

Study the ISP's traffic volume restrictions. Make sure that you don't have to pay a fortune for unexpected high traffic if your web site becomes popular.

Bandwidth or Content Restrictions

Study the ISP's bandwidth and content restrictions. If you plan to publish pictures or broadcast video or sound, make sure that you can.

E-mail Capabilities

Make sure your ISP supports the e-mail capabilities you need.

Front Page Extensions

If you use FrontPage to develop your web site, make sure your ISP supports FrontPage server extensions.

Database Access

If you plan to use data from databases on your web site, make sure your ISP supports the database access you need.

A domain name is a unique name for your web site.

Choosing a hosting solution should include domain name registration.

Your domain name should be easy to remember and easy to type.

---

What is a Domain Name?

A domain name is a unique name for a web site, like w3schools.com.
Domain names must be registered. When domain names are registered, they are added to a large domain name register. In addition, information about the web site, including the IP address, is stored on a DNS server.
DNS stands for Domain Name System. A DNS server is responsible for informing all other computers on the Internet about the domain name and the web site address.

---

Registering a Domain

Domains can be registered from domain name registration companies.
These companies provide interfaces to search for available domain names, and they offer a variety of domain name extensions that can be registered at the same time.

---

Choosing a Domain Name

Choosing a domain name is a major step for any individual or organization.
New domain name extensions and creative thinking still offer thousands of excellent domain names!
When choosing a name, it is important to consider the purpose of a domain name, which is to provide an easy way to reach your web site.
The best domains have the following characteristics:
Short - People don't like to type! A short domain name is easier to type, read, and remember.
Meaningful - A short domain is nothing without meaning, 34i4nh.com is not easy to enter or to remember. Select a domain that relates to your site in a way that people will understand.
Clear - Clarity is important when selecting a domain name. Avoid a name that is difficult to spell or pronounce.
Exposure - Names that are short and easy to remember are an asset. In addition to visitors, also consider search engines. Search engines index your site and rank it for relevance against terms people search for. In order to maximize your sites exposure, consider including a relevant search term in your domain. Of course, only consider this if it still maintains a short, clear and meaningful domain name.

---

Sub Domains

Most people are unaware that they use sub domains daily. The famous "www" of the World Wide Web is an example of a sub domain. Sub domains can be created on a DNS server, and they don't need to be registered with a domain name registrar, of course, the original domain name needs to be registered before a sub domain could be created.
Examples of sub domains used on the internet are http://store.apple.com and http://support.microsoft.com.
Sub domains can be requested from your web hosting provider.

---

False Domain Names - Directory Listings

Some providers will offer you a name under their own name, like:  www.theircompany.com/yourcompany/
This is not a real domain name, it is a directory - and you should try to avoid it.
Directory domains are not desirable, especially for companies.
Typically, directory domains are used for personal web sites and free web sites provided by an ISP, you may have seen www.theircompany.com/~username as an address.
Competition in domain name registration has resulted in a dramatic decrease in pricing, so domain sharing is not common, since it is possible to register a domain name for only $15 per year.

---

Expired Domains

Another source for domain registrations is expired domains.
When you register a domain, think of it as a rental, assuming there are no legal or trademark issues with the domain name, you are free to use it as long as you continue to pay the yearly fee (you can now register in advance as many as 10 years). Some people register domains as speculators, hoping that they can later sell them, while others may have planned to use a domain and never had the time. The result is that domains that were previously registered, become available again.

---

Use Your Domain Name

After you have chosen and registered your own domain name, make sure you use it on all your web pages, and on all your correspondence, like e-mail and traditional mail.
It is important to let other people be aware of your domain name, and to inform your partners and customers about your web site.

Earn Money by Alert Pay

 10$  Per 10 Reffere

 Earn Money by Alert Pay

Earn money with AlertPay! Each time you refer someone to AlertPay, you could earn up to $10.00 USD. The more people you bring to AlertPay, the more we will reward you. Helping you earn more money -- think of this as our way of saying thank you. Click Here Now

Rules

• Referrals must open an AlertPay Personal Pro or Business account.
• Referrals must transact $250.00 (sending and/or receiving).
• After your 10th referral, we will pay you $10.00 USD a referral.
• Self-referrals, or referrals from the same IP address, will not be paid out.

BANNER

AlertPay provides banners to help you advertise and build your referrals network. Use any of the banners below by copying the link code to your HTML page where you want it displayed. Your referral URL is included in the link code so that any new registrations that are a result of your banner will be added to your referrals network.

Click Here Now

TEXT LINK

A text link looks just like a standard hyperlink and will take on the font and color characteristics of your page.

Click Here Now

Info

• Use your referral URL to put in emails or your website
• Earn money by referring other people to our services.
• Direct referrals are those who used your link to register for an account.
• Learn more about referrals and the rewards

Earn Money

Hey are you Ready to want earn money by clicking on ads or earn money by affilate system or Earn Guaranteed Money by your website value if your website have daily 10 uniqe visitor so your site value is $10 per month

---

Earn money by PixMac

Earn money by pixmac have guaranteed money just ceck your site value on pixmac get html code and paste on your site and earn guaranteed monthly or reffer user and seller to earn money click here now

---

---

Earn money by clicking on ads

Earn money by BUX earn money online by clicking on ads earning is base on your clicks earn per click $0.1 daily click 500 your daily earning is $5.00 and your monthly is 100 $ Click here now

---

Ad Clicks PTC

Ad clicks PTC is provide earn 0.01 per ad click daily and reffer for your freinds and other if your freind earn 0.01 your earning money is 0.01 reffer 50 people 50 peoples clicks 10 ads per day 0.01 x 10 = 0.10 x 50 peoples earning = 05.00 $ so your daily earning is 05.00 $ your in your monthly earning is 150.00 $ montyl Click here now

---