Posts tagged thiet ke web

How to Build a Website

How to Build a Website Step 1 – Hosting:

Hosting is where you put your website and all the Web pages. While it’s possible to build a website on your personal computer and never move it online, it’s somewhat pointless. No one but you will ever be able to see it. So the first thing you’ll want to do is find a Web hosting provider.

There are several types of Web hosting options you can choose from:

  • Free Web hosts
  • Standard Web hosting
  • Dedicated, Virtual, and Shared Hosting
  • Colocation

Most people gravitate to free Web hosting without too much thought, but there can be drawbacks to free hosting. You don’t always get as much space, you might be required to run their ads on your site, or there may be bandwidth limits. Be sure to read all the fine print before you put your website on a free Web host. I recommend using free hosting providers for testing Web pages and for personal pages.

  • Find a Web Hosting Provider – links to other sites for help finding a good host
  • Web Hosting Reviews – find out what other users think
  • Web Hosting Profiles – overviews of several hosting providers
How to Build a Website Step 2 – Do You Need a Domain Name?:

You don’t need a domain name to put up a website. You can put up a site on free hosting or even paid hosting plans without a domain name. A domain name provides extra branding for your site and makes it easier for people to remember the URL. But domain names cost money, typically between $8 and $35 a year.

  • Get a URL that People can Find
  • How to Buy a Domain Name with Network Solutions
  • How to Register a Web Site Domain – Video
How to Build a Website Step 3 – Plan Your Website:

Once you’ve gotten a domain and decided on your URL, you can start planning your site. You need to decide:

  • Type of site – Most websites are either news/information, product, or reference sites. As such they each have a slightly different focus.
  • Navigation – The navigation affects the information architecture of your site.
  • Content – Content is the actual pages you’ll be building.

If you can recognize page types, you’ll be able to recognize what types of pages you need for your site. Play the Web Page Types game.

How to Build a Website Step 4 – Build Your Website Page by Page:

Building a website requires that you work on one page at a time. To build your site you should be familiar with:

  • Design Basics – The elements of good design and and how to use it on websites.
  • Learning HTML – HTML is the building block of a Web page. While it’s not absolutely required, you’ll do better if you learn HTML than if you don’t.
  • Learning CSS – CSS is the building block of how pages look. And learning CSS will make it easier for you to change your site’s look when you need to.
  • Web Page Editors – Finding the perfect editor for your needs will help you learn design, HTML, and CSS.
How to Build a Website Step 5 – Publish Your Website:

Publishing your website is a matter of getting the pages you created in step 4 up to the hosting provider you set up in step 1. You can do this with either the tools that come with your hosting service or with FTP clients. Knowing which you can use depends upon your hosting provider. Contact them if you are not sure.

  • How to Upload
  • Best FTP Clients for Windows
  • Best FTP Clients for Macintosh
How to Build a Website Step 6 – Promote Your Website:

The easiest way to promote your website is through search engine optimization or SEO. You build your Web content so that it ranks well in search engines. This can be very difficult, but it is inexpensive and can result in good results if you work at it.

Other ways to promote your site include: word of mouth, email, and advertising. You should include your URL on all professional correspondence and whenever it makes sense in personal messages. I put my URL in my email signature along with my email address.

  • Improve Your Page Views – With More Hits
  • Boosting Your Hits
  • Create a Great Home Page
  • Web Marketing Articles
How to Build a Website Step 7 – Maintain Your Website:

Maintenance can be the most boring part of website design, but in order to keep your site going well and looking good, you need to do it. Testing your site as you’re building it and then after it’s been live for a while is important. And you should also work on content development on a regular basis.


Leave a comment »

ASP : SSI Another Way

This is another SSI tutorial written by a friend, it shows another way of looking at SSI and also shows you some new tricks and tips.

Server Side Include (SSI) files are a great way to simplify management of a web site. If you have a 100-page site and all 100 pages have a left-side navigation menu, why have the menu written 100 times? What if one of the links on the menu changes? You would have to change the link 100 times. A much more efficient way to manage this is to create a menu file and include it on all of the pages. All you have to do then is change the link in your menu file, and all of the other pages will fall in line.

All you need to use SSI is a web server that supports SSI. Virtually all the current popular web servers – Apache and IIS included – support SSI.

Here’s what an old index.html page might look like:

<tr><td><a href=”/img_articles/9123/link1.shtml”>Link 1</a></td></tr>
<tr><td><a href=”/img_articles/9123/link2.shtml”>Link 2</a></td></tr>
<tr><td><a href=”/img_articles/9123/link3.shtml”>Link 3</a></td></tr>
Content goes here.

Step 1 would be to take the center table out and save it as menu.htm.

<tr><td><a href=”/img_articles/9123/link1.shtml”>Link 1</a></td></tr>
<tr><td><a href=”/img_articles/9123/link2.shtml”>Link 2</a></td></tr>
<tr><td><a href=”/img_articles/9123/link3.shtml”>Link 3</a></td></tr>

And change your main page to:

<!–#include file=”menu.htm”–>
Content goes here.

Save it as index.shtml

Simple enough, right? Well, where it gets more complex is when you throw subdirectories into the mix. Suppose link1.shtml was now in a directory called subdir1.

link2.shtml was inside of subdir1/subdir2, and link3.shtml was in subdir1/subdir2/subdir3 but we still want to use the navigation menu. We would change the menu.htm file to:

<tr><td><a href=”/img_articles/9123/subdir1/link1.shtml”>Link 1</a></td></tr>
<tr><td><a href=”/img_articles/9123/subdir1/subdir2/link2.shtml”>Link 2</a></td>
<tr><td><a href=”/img_articles/9123/subdir1/subdir2/subdir3/link3.shtml”>Link 3</a>

Plus, we’d have to change the include statement to:

<!–#include file=”../menu.htm”–>

That will work, but now suppose we want to go to Link 2. It is in subdir2 underneath subdir1, so when we click on Link 2, we’d get a 404 – Page Not Found – error. So the question is, how can we avoid all these “dotdot” issues?

First, create a new subdirectory called inc and place your menu.htm file inside of it. Then instead of the previous include statement, use:

<!–#include virtual=”inc/menu.htm”–>

What virtual does is tell the server to go back to the root directory first, then pull the specified file, including any subdirectories. It makes the include statement independent of the subdirectory it being called in. So we could be inside of subdir1/subdir2/subdir3/subir4/subdir5, and by using #include virtual, it will still pull menu.htm out of the inc directory off of the root.

So that solves our first problem of having to keep track of all of the “dotdot”s in our include statement. Now we have to make sure we’re not dependent on the current place of the directory structure to load the correct page. The simple solution is to stop using relative links, and use the “/” character. It’s similar to using include virtual as it tells the server you want to back to the root directory first. So menu.htm would now look like:

<tr><td><a href=”/img_articles/9123//subdir1/link1.shtml”>Link 1</a></td></tr>
<tr><td><a href=”/img_articles/9123//subdir1/subdir2/link2.shtml”>Link 2</a></td>
<tr><td><a href=”/img_articles/9123//subdir1/subdir2/subdir3/link3.shtml”>Link 3</a>

And your done!

Leave a comment »

Web 2.0 Concepts to Keep Your Members Coming Back

Web 2.0 may be the most overused, and misunderstood, term of the decade. What it means, in a nutshell is providing a user driven website. Basically many membership marketing websites are Web 2.0, especially social networking sites. The users determine the content in the form of forums, blogs, article posting, reviews and so on. To further enhance the usability of your website and thus the benefit to your members, here are a some ideas to provide a few interactive extras or member benefits.

Training courses are an excellent tool to provide benefit to your members. There are multiple forms for delivering your courses. You could use email – text or html or both, pdf downloads, website content pages, streaming & downloadable videos and audios.

E-mail training courses – Getting your members to sign up for an e-mail training course that takes place over perhaps eight weeks, is a great way of keeping your members engaged with your site over a period of time. You could make this a free course, a paid course or both. Maybe give them a few lessons for free and ask them to pay for the rest of the course once they are into it.

However, to get maximum exposure giving away an entire course or even multiple courses of good quality for Free will really get people coming back to your site. We do this with some of our own membership sites including

Video tutorials – This is a very effective form of training as it is much easier to show your members what you are doing, rather than trying to explain it. It prevents your students becoming frustrated when they can’t understand what you are explaining, and reduces misunderstanding.

You could do the videos yourself using software or you could hire experts in video creation if you are not comfortable using software or doing videos. You could do simple power point slideshows and narrate them or you could stand/sit in front of the camera and talk.

With many Internet users on broadband or ADSL nowadays and computer processors getting faster and faster videos are now going mainstream.

Teleclasses – Teleclasses are similar to conference calls and are conducted over the telephone. They are an excellent way for your members to take part in live learning, as well as having personal interaction with you and other members of your site.

There are many services out there that provide teleconference lines for you to use. Some are free and some have paid services, you should decide what is best for your business needs. You could even record your calls, have transcripts made and then sell that as another product in itself. To top that off you could offer reprint or resell rights to those calls and sell licenses.

Product reviews – Reviews posted by other members is a fantastic interactive medium. It could also engage heated discussions! Nothing gets traffic faster than controversy whether good or bad. Let your members speak their mind about products and services they’ve used. This will not only help other members and visitors out but it will add lots of content to your site that the search engines love. Sites such as, and others do this on a regular basis.

Guest interviews – Guest interviews with a well known personality who is connected with your niche subject will add huge credibility to your site. Promote guest interviews on your website and in your newsletter. This is a quick way to get great content.

You could post the interview on your site as website content. Or you could have the streaming audio or video up and even let your members download the interviews. Let them post reviews and comments to the interviews and you’ve got even more content.

Forums – Forums are a type of virtual community and provide the opportunity for people with similar interests to talk to each other. Your members will already have a shared interest in your niche subject, so creating active discussion forums won’t be too challenging.

Here’s a tip, have good forum monitors and admin in place to keep things smooth. Having multiple monitors can help you get your new forum started as well as keep discussions ongoing. You could keep your forums open to everyone. That will be better for search engine traffic but it can also attract spammers and forum hackers. Having a private forum for your members only can keep things more secure and full of like minded individuals.

Competitions – Encourage your members to post on your forum or blog by running a competition. Award a prize each month to someone who has made the best post on your forum, and each individual posting would be an additional entry into the prize draw. Or maybe give a prize to the member who writes the most reviews or posts the most comments each month to your site.

Involving your members in polls and surveys

Member polls – Asking your members to answer a simple question relating to your niche subject is a simple and effective way to get them involved in the site. Have a regular monthly poll and publish the results of the previous month’s poll above the question for the current month.

Surveys – Some niche subjects lend themselves well to surveys. If yours does not you could conduct a survey about your membership site itself. This gives your members the chance to express their views and let you know what changes they would like to see.

Getting feedback can also let you know where to take your membership site. By allowing your members to tell you what they want you can just simply give it to them. We’ve taken surveys ourselves over the years and they can be very insiteful. The poll or survey data you generate can be gold to your customer feedback system for the future of your business.

Newsletters – Newsletters may be used to highlight forum posts, questions that people have asked, blog posts and even case studies, survey results, success stories and more. Get your community involved in the content both online and in your newsletter. They’ll be invested in the results. We’ll get more in depth about newsletters in another article.

For now I hope these gave you some ideas to get going with.

Leave a comment »

Color Psychology Quick Reference Cards

If you’re going to be a professional in any of the creative/artistic fields, you have to understand color. We’ve been dealing a bit with Color Theory on our site, but now we’re going to dive into something equally important – Color Psychology.

Colors affect our moods. Depending on where in the world we live, we bring with us perceptions of color based on our culture. Even within a single country alone, the “meaning” of colors have changed over time. Today, though, psychiatrists are able to pinpoint a few universal truths about color and its effect on our “psyche” (conventional psychology completely dismisses the idea that color can affect our moods).

Why is this so vitally important? Simple – if you’re creating a website that should bring ideas of nature, and all things natural you’re going to stay away from purple. Because purple appears so little in the natural world, it is often seen as “artificial”. However, if your site is about furnishings and opulent decoration, purple accents would be perfect – imparting ideas of royalty, luxury, wealth, and sophistication.

So you get the idea. Let’s get cooking.

Colors in Advertising

I’ve already mentioned the idea that colors can – and should – affect website layouts. There are actually many simple rules in choosing the right color combinations, and most of them relate to how the color affects the conscious mind of individuals.

For instance, if you are selling products on your website, you should understand the specific role of color psychology in online marketing. Red stimulates us into action, represents aggressiveness, excitement, and paired up with gray, it represents impulsiveness. Blue represents sensitivity in feeling, and loyalty. In an online business, shades of red, blue, and brown have been found to be the “safest”. While white is always seen as “professional” when viewed on a business site, it is color that makes the first impression.

History of Color Psychology

Johann Wolfgang Goethe was one of the first people to connect color and psychology, with his book “Theory of Colours”. In 1947, Max Luscher took Goethe’s theories one step further and actually created a color test for the use of psychiatrists, psychologists, physicians, and others involved with the “conscious and unconscious characteristics and motivations of others”. Despite the ease with which Luscher’s test can be administered, it is a very “deep” psychological test that can reveal a multitude of things about one’s personality.

Color Meanings

I had a lot of fun with this. You can actually print the following cards and save them for reference – I promise, not only will you “look” more professional with a set of these (might I suggest laminating them?) but you will be able to quickly and easily perform more professional work. Hey, we just love you guys, you think we would make something any less cool than this? 🙂

Color Psychology: The Cards

image 1

image 2

image 3

image 4

image 5

image 6

image 7

Leave a comment »

Links and Pseudo-Classes in CSS

Today we learn about Links and Pseudo-Classes in CSS. I have made tutorials about rollover’s here and here, but this is something different and we talk about links & elements where we can put Pseudo-Classe, on a div, text,etc…



We start with an exemple to use :hover pseudo-class on a image

1. Let’s create the CSS:

2. Now we need to create the HTML:

:hover Pseudo-Class on a element (img)

:hover Pseudo-Class on a element (div)


That’s it! You can create this for any element you want ( paragaphs, headings, links, etc). From here you can download my files and here is the final result. Thank you!

Leave a comment »

Add Depth and Dimension in Dreamweaver CS4

In the early days of the Web you could only use background images that filled the entire screen or tiled down and across the page. Thanks to CSS, now you can control how background images appear by creating CSS rules that define alignment and positioning. In this tutorial, we’ll explore a few examples of how you can use backgrounds with CSS to add depth and dimension to your pages. (Note: This tutorial works for both Adobe Dreamweaver CS3 and CS4.)

1. Combine background images to add depth

Background images are a great way to add decorative elements-such as textured backdrops, gradients, and borders-to your webpages. You can create rich, seemingly layered, designs by combining background images in the body, as well as div and other tags. Keep in mind, these aren’t really layers like you’d find in Photoshop, and I’m not using the Layer tag that was included in earlier versions of Dreamweaver. What you see in this example is a background image positioned in a div tag with an ID style that centers it on the page.

Add  Depth and Dimension in Dreamweaver CS4 image 1

2. Center a background image on a page

You can still add a background image to the entire body of a webpage, but don’t insert it into the HTML body tag where it will just repeat and tile down the screen. Instead, create a new CSS style for the body tag and use the CSS Rule Definition dialog to choose alignment options. Using CSS, you can control whether the image repeats on the x or y axis (across or down the page), or prevent the image from repeating at all. You can also center your background in the middle of the page.

Add  Depth and Dimension in Dreamweaver CS4 image 2

3. Background colors with background images

You can set background colors as well as a background images and combine them to create seemingly layered designs. In this example, the background color of the page was set to a dark gray and then an 1100 pixel-wide image was inserted using a CSS body tag style to center it on the page. On a wide monitor, you can see the color behind the background image, but on a smaller screen the background color may be cut off. Designing a page with backgrounds this way helps create the illusion that the design fills the screen on big monitors.

Add  Depth and Dimension in Dreamweaver CS4 image 3

4. Add background image to a container div

One of the advantages of the CSS Box model, and the practice of building a page with div tags, is that you can add multiple background images to a page by placing them in different divs on the page. Here, adding to the last step, a div tag has been inserted with an ID style #container that’s set to 950 pixels in width. It was centered by setting the Left and Right Margins to Auto, and then a background image was inserted that’s also 950 pixels wide. The height of the #container div is determined by its content.

Add  Depth and Dimension in Dreamweaver CS4 image 4

5. Long backgrounds for expandable content

If you’ve done much CSS development, you’ve probably learned that it’s best not to specify a height on any div or other tag that will contain text. That’s because most browsers make it possible for users to enlarge or reduce text and you want to ensure that the page layout will adjust to the content and not cut off any text. With that in mind, if you’re using a background image, it’s good practice to make sure the background is longer than your content so that as content expands down the page, the background will still cover the full area.

Add  Depth and Dimension in Dreamweaver CS4 image 5

6. Repeat background to fill page

Of course you can still have a background that fills an entire page by repeating, or tiling, across and down the page. With CSS, you can use repeating images in sidebars, banners, footers, or any other area of the page, as well. Experiment with the effects of using a small image that repeats. If you smooth or match the edges, you can get rid of the edges you see in this example and create a seamless effect that looks like one big image. Here the repeating image fills the entire page because it’s included in the body tag style.

Add  Depth and Dimension in Dreamweaver CS4 image 6

7. Repeat backgrounds in targeted areas

This design example is a bit busy, but it demonstrates how you can repeat a background in a single div, not just the entire page. In this case, you can see that the sidebar on the right has a repeating red tiled background. A different background that looks like a giant sheet of parchment paper has been inserted into the main #container div, which is centered on the page. For this, the body background has been set to white to make it appear that the parchment paper, which has a white background, is floating on the page when displayed on larger monitors.

Add  Depth and Dimension in Dreamweaver CS4 image 7

8. Use large backgrounds in targeted areas

Here you see the same layout used in the last step, but the backgrounds have been changed: a smaller version of the light parchment image in the background of the sidebar and the darker red image in the background of the #container div. Both background image styles have been set so they won’t repeat, and images have been used that were big enough to fill their respective sections of the page. Now text and other images can easily be added inside the divs so that they’ll appear to be layered on top of the background images.

Add  Depth and Dimension in Dreamweaver CS4 image 8

9. Use backgrounds in CSS navigation bars

There are many advantages to using text instead of images for links (including better accessibility and SEO), but that doesn’t mean you can’t make your links look like images. By using CSS to place background images behind your text links, you can create rich effects using gradients, patterns, and anything else you can imagine. In this example, a small image has been repeated with a gradient effect across the x axis of a div to create the background for this site’s main navigation links. For perspective, the same image used in the background has been placed just above the navigation bar.

Add  Depth and Dimension in Dreamweaver CS4 image 9

10. Frame your images with backgrounds

To put a frame around a photo, consider this trick: Create a div with a style that includes a background image, and then insert the photo into the div. The trick is to use margin and padding settings to align the image where you want it within the frame in the background. In this example, you see the red background in the main #container div, and then a second div inside it with the ID #photo-background. That style contains a background image (it looks like a piece cut from a strip of film), as well as margin and padding settings to position the photo over the background.

Add  Depth and Dimension in Dreamweaver CS4 image 10

11. Use CSS to create frames

This picture frame was created entirely with CSS. A style was defined with a thick, dark brown border and a light background color, and margins and padding were used to control the space between the photo and border. A thin black frame was also included around the photo itself. If you make a frame like this a class style, it can be applied to any div, and can be used multiple times on the same page. Because the frame is created with CSS, it automatically adjusts to any image size and can be applied to as many images as you want.

Add  Depth and Dimension in Dreamweaver CS4 image 11

12. Replace list bullets with images

Another great way to use images in CSS is to replace the boring bullets in the list item tag. Although this isn’t a background image, I include this tip because it’s a nice addition to the tool chest of any Web designer who wants to use more design elements. Changing the bullet is as simple as creating an optimized JPEG, GIF, or PNG file in the size you want for the bullets in your design. Then create a new style for the < li > or list item tag and use the CSS Rule Definition dialog to add the image in the List settings.

Add  Depth and Dimension in Dreamweaver CS4 image 12

13. Testing your work

To fully test any CSS Layout, you need to preview your page in as many Web browsers as you can. Not all browsers support CSS background, margin, and padding styles equally and the preview features in Dreamweaver can’t replicate all of the ways your page may be displayed. Keep in mind that not all images should be used in the background. Photos, logos, and other graphics that add meaning are best inserted into your pages as inline elements where they can include Alt text. And remember, if you use an image as a background, you can’t turn it into a link.

Add  Depth and Dimension in Dreamweaver CS4 Tutorial: Final Result

Leave a comment »

7 Reasons Why CSS Is Better Than HTML Tables

Website designers have been utilizing CSS (Cascading Style Sheets) for many years now. Over and over again, however, I come across an argument that CSS offers no real advantage and whether you code with it or not is just a matter of preference and habit.

I couldn’t disagree more.

If you are looking to improve the presentation of your website, CSS will help you do it more efficiently and effectively. CSS based design offers advantages that table-based layout can’t compete with.

And here’s how:

Faster loading of pages

First of all, you are separating the content of the web page which is text and images into the HTML file and the visual presentation such as the layout, style, color etc. into a CSS file. This minimizes the amount of code in the actual webpage so the loadtime is shorter.

Also, designing a layout using tables requires much more HTML coding then if you were laying things out using CSS. With CSS, the usual table tags such as “td align” or “td width” are replaced with “divs”. Code for specifying margin, padding, width, height and other visual details is much more consolidated with CSS. What used to take 200 characters with HTML, may take 50 when coding with CSS. Simply because CSS have cut the use of too much markups, websites can load a lot faster than using tables which is good when attracting visitors to a website.

With these two working hand in hand, the difference is substantial.


Since the content is separated from the layout styles, redesigning is a snap with CSS. All you have to update is the CSS file and the changes will be carried across the entire structure. No more digging through the site, page by page, to update a single tag. Because the layout information is centralized, these changes can be made quickly and globally by default. Markup tags are also much easier to locate since they can be logically organized in your file.


As you only update a single file (although you can have many CSS for a single website), the style that you specify applies to any page that you want consistently, without any chance for diversion. This is most evident with positioning. Widths, heights, and margins will be handled the same by any HTML page linking to the same CSS file. You will improve your site’s usability, credibility and overall user experience.

SEO advantage

There is a debate whether the use of CSS has any direct impact on SEO. I would say that Google (and any other search engine for that matter) do not have any preference and will certainly not give you any advantage just because your site is CSS based. However, just because there is less code (less messy code) involved, spiders will have easier time crawling your site. And it’s known for a fact that they love clean code (just as much as valid one).

Layouts and design sophistication

CSS offers freedom in designing that HTML tables never might. While tables are rigid, inflexible, and grid based, CSS-based designs are fluid, flexible and expandable. That gives designers more power and freedom to exercise their creativity. For example, CSS offers absolute positioning of elements paired with the z-index property. This allows CSS-based designs to position elements on top of one another (like layers in Photoshop), allowing for more unique, complex, and beautiful layouts.

Bandwidth efficiency

A stylesheet is usually stored in the browser cache, and can therefore be used on multiple pages without being reloaded, increasing download speeds and reducing data transfer over a network.

And the 7th reason why you should use CSS? All the cool people gave up tables ages ago . Here, how is that for an incentive?

Leave a comment »