Make Design for your own Website

The design is your website interface, good design will attract site visitor, and make him stay more in your site. In this tutorial we will learn together how to make design for your website using adobe Photoshop, and also to build your website pages using Macromedia Dreamweaver.

Draw Sketch for your design

Take an A4 Paper and draw sketch page for your website design, you have to take care to include in your design a place for site logo, menu, content, and the site footer.

You can have a look at the sketch page I draw for the communication company website at the following link, and this link..

Design your Own Website using Adobe Photoshop

Designing your sketch page in adobe Photoshop is not difficult. First, fire up Photoshop, start to draw elements of your website in, and be aware to draw them in separate layers. Good arrangement will make it simple for you to modify your design or add any new elements later.

To simplify steps of designing sketch page on Photoshop, view video I made below, explains what I am talking about.

Part1

Part2

To show how I slice my design, please watch the following video:

Understanding Google Adsense

Adsense is program runned by google allow publishers like you to earn money from running ads on their web sites. You will get paid for each click user clicked on ad placed on your website.

All what you have to do, is to apply for Google Adsense, and after accepting your application by Google ( actually, it needs one to two days), you can login to your google adsense account and setup ads, copy ads code, and finally paste it into your webpage.

Create Google Adsense Account

Click the following link
Next, click ‘Sign up now ‘button
Apply. by typing your web site information, billing address, and contact information. I highly recommend to take Google instructions serious.
At last , click submit button
Google team will review your application, and will return to you in the next two days from application at the email you entered in the application.

If they accept your application, you will be able to login to your account, setup ads, and placing them in your web site, and start making money.
In part two we will learn how to place Google Ads on your website.

Placing Google Ads on your Web page
Go to Google.com
Click on ‘Advertising Program’ link
Next, click ‘Google Adsense’ on the right of the window
Then, enter your Google account username and password in login form.
Click on ‘AdSense setup’ tab
Then, click ‘ AdSense for Content’ link.
Choose whether you want to display ad unit or link unit on your web site
I choose Ad unit
Then, click continue button, in the bottom of the page
Next,Format your ad.
Then, click continue button
If you want to specify channel to track your ad, you can, specify, and click continue button.
Finally, cut and paste script to your web page, and its done.

Don’t forget to upload webpages which you add Google ad to them.

Congratulation!! You have a website running Google Ads.

In the next step we will learn many strategies you may use to market your web site, increase its visibility, ranking, and get high traffic to it.

Get Web Site Traffic

In previous tutorials, we learn together how to build your web site, order hosting package, and placing ads on it, and upload its pages. The time comes to learn marketing web site (let people know about your site), we will learn two strategies to make it easy for you to get traffic to your website, and get high ranking in Google, Yahoo, and Microsoft. Keep reading. You will never be disappointed.

Submit your web site to Open Directory Project!!

It’s not a secret that the best way to reach list of search engines is to enter it through the back door. That’s achieved by work on the two most important directories, Open Directory Project (DMOZ) , and Yahoo Directory!!

Listings in these directories are valuable, it’s worth much more for you to create your own hand-done submission. The directory is edited by human that have the right to accept or refuse your application. If the site has been accepted, it will be included within a certain category in the directory with in two week.

I advise you before submit your web site to DMOZ or even to Yahoo Directory to read their guidelines.

DMOZ guidelines

Google uses information derived from DMOZ to form its directory (directory.google.com)
To submit your web site to DMOZ follow this link.

Submit your web site to Yahoo! Directory

if you have an non-commercial site you can submit it to Yahoo! Directory for free.
If you have a commercial site, Yahoo! Directory charge you annual submission fee at first glance, seen a little pricey. However, because of the advantages obtaining such a listing provides your site, I think you will find it a worthwhile investment.

To submit your web site to Yahoo Directory go from here, then click ’suggest site’ link, and follow instructions.

Submit Press Releases
Press Releases to let people know about your business. A press release is all about the publicity that you can do for your online business. The more publicity you do for your goods and services the more your business gets recognized everywhere on and off of the web. The trick is in making use of all the publicity tools including press releases in the correct way to draw attention to your site. Publishing press releases on the web is one great way of going about the successful publicity of your site.

PRWEB.com

PRWeb is a leader in online news and press release distribution, has been used by more than 40,000 organizations of all sizes to increase the visibility of their news, improve their search engine rankings and drive traffic to their Web site.

Watch the following video, it will help you very much in learning how to submit a press release.
Click here to submit a press release through prweb.com

After submitting your site to DMOZ, and Yahoo Directory. Submit press release, why not to share in online forums, and place a link for your website in the signature. It will help your website to rank higher in Google, and other search engines.

After all the work you have done to build your web site, the time comes to go online with your website, to make it viewable.

Web site pages can’t be seen by people if they lived in our pcs hard drives. In this tutorial we will learn together how to upload website pages to your webhosting account.

Smart FTP Program

For me,I always use smartftp, and it is the best FTP program I heared about.

To upload your website pages please do the following steps:

First, click the following link to download latest version from Smart FTP now.
Next, launch setup application from your hard drive after it is installed from smartfrp.com
Next, open Smart FTP program by clicking its icon on desktop
Then, type your web site domain name in the host field (i.e. your web site address), your ftp user name in the user name field, your ftp password in the password field. see image below.

Click ‘ok’ button to connect you to the web server
Next to that, drag and drop your web site pages from your pc hard drive to web server.

Congratulation!!! Now you can fire up Internet Explorer and type in the address bar your web site domain name and access it.

- Don’t forget to upload any related images to uploaded web pages.

Conclusion

I find my self forced to commend on your efforts to get success in your online project (creating web site and make money from it), but you don’t have to give up, till now you walk half the way, you have to walk the second half. Don’t give up!!

In the next two tutorials, we will learn together how to placing ads on your web site, and then learn how to market and get serious traffic to it.

– Go to the next tutorial (Webmasters make money)

Before we explain how to order a hosting plan, let take idea about domain names first.

Domain name is really your site address on the internet. Before coming to site hosting you need to register a domain name for your web site.
– Tips on selecting Domain Name for your website

The website cannot be viewed if it is stay in our pcs hard drives. It must uploaded to a web server. And before doing that, you need web hosting for your site, give you permission to upload your webpages to their web server.

I am 1&1 customer, a great web hosting company that give an affordable and reliable service.

Actually, I like 1&1 and you should too for simple reasons they always have great customer service. They respond to my problem emails after 1-2 h max. and also they have great features there like:

FREE domains included with all web hosting plans!
FREE 1&1 WebsiteBuilder: 4 easy steps,
no programming required.
10 GB Webspace
1&1 Marketing Center to drive traffic
to your site.
and alot alot alot more features

The amazing thing in 1&1 that they have great customers service with affordable price start from $3,49/month.

Take my advice, I am talking to you from my expierence,and besure ordering a webhosting package for your website is like signup to yahoo mail. The difference here is you have to privide them with your visa card or paypal details.

To order webhosting package go from link below, you will be able to upload your website after doing the pervious step.

http://www.1and1.com/

In case you don’t have visa card, you can ask your bank to provide you with an internet visa card.

Create Template page for your Own Website using Adobe Dreamweaver

It is simple. Start by adding few css lines to your html code, put a title of your page, insert editable regions you want, etc..

Watch the following video to get better idea about what I am talking about.

Create Pages of your Own Website

It is easy. Begin, by firing Dreamweaver up, click File>>> New>> Templates tab. In the site box click on the template you named. Type in editable regions you create in your template page content of the page you create (headline, text, and don’t forget to type title of the page you create).

Do the previous steps for all your website pages.

Site planning is important. A good planning for your web site is important for your website to stands over the competition. Through this tutorial, we will learn together how to put a plan for a website.

Define the purpose of your website

What is your purpose from creating website? The answer of this question is the most important of all questions and answers you may ask yourself. Do you want to talk about your hobby and give details about it. Or you want to create a website for a company talking about its services and products as in our case. Or you want to sell products on your website. Clear purpose will help you to build a clear imagine about what your ways you need to pass in creating your website.

In case you want to sell products in your site, you have to order an e-store, and customize it.
In case you want to create a website for a company, you have to create or even use a web template, and customize it to suit your needs.

– Don’t worry, Next tutorials will well explain how to do that in easy to follow steps.

Besides that, there are alternatives way to pass in to create a website, you may use a CMS. In this website we will talk about creating a website using Dreamweaver template and a design made in photoshop.

Define your target audience

Who are interested in what you show through your website. What are their background and skills. As a result, you will know what to say and which criteria you will choose to use in your site. In our website, our target audience will be people over 18 years old located in west bank, in Palestine.

You may ask yourself, why, simply, because the communication company which ask us to create a website for them is located in Palestine.

Define the color of your website

Many web designers overlook the importance of color when designing a web site. Color should be one of your first concerns when it comes time to start your web site design. If you don’t pay close attention to the colors you chose, your site you will end up either plain and boring or so chaotic it’s hard to look at. The color you use should only be chosen after careful consideration.

Unfortunately web browsers can only see 256 colors. Currently web browsers only share 216 common colors. When designing key elements in your web site you should stay within the 216-color pallet.

You should use yellow and red colors sparingly in your web site itself. Only use them in areas where you want the visitor to focus on. Do not make large parts of your web site with bright color. It might get your visitors attention but they will either consciously or subconsciously notice their eyes getting fatigued. This will make them not want to look at your web site for long periods of time. There are enough reasons why a visitor would leave your web site. You don’t need to add to that list by using irritating color
.
I highly recommend you to read a great article about using color on your website at the link you can below. Read it and return.
http://www.creativepro.com/article/learning-to-use-color-on-your-web-site

Prepare the content of your Website

Prepare a draft for each web page, in our case, drafts we need to create is home page, services, products, profile, any special offer, and location.

About images, you need to prepare images to put them in the website. You may also want to add videos to your website. For our project we prepare images related to communications, and the company products. Put all materials in a separate folder you can get back later.

Draw sketch pages one for your design and another for site navigation and the way in which site user will navigate through the site.

To get a clear imagine about what I am talking about view two sketch pages I draw for the site I talk to you about through the following link, and this link.

Write about your Website

In advanced stages, you will need a written material about your site in order to market it to target audience you classify in the beginning of this tutorial. Written material will help you to attract web users to your website. Think in what your site will add to its users, fire up notepad, and write at least 4-5 lines about your site. do it now, what are you waiting for!! Eevery word you wrote will help later!!

You may ask yourself, is it good to put ads in a site dedicated to explain company services and products to whom are interested.
I say to you. its is not your decision, its their( owners of that company), and the ultimate goal from that here is to teach you how to place ads in your website, not anything else! It is just an example!!

But before we begin in the next tutorials let us get a better idea about what does a website mean, what does webpage mean, what does a web server mean, and what are the programs we need in our work.

If you find yourself good in the previous points I talked to you about, you can skip this page to the next tutorial where I will clarify how to plan well to your website.

At first…

What is a Website?

A website is a collection of Web pages, images, videos or other digital assets that is hosted on one or more web servers, usually accessible via the Internet. Google, Yahoo, Microsoft , and GoInternetWebsites all of them are example of websites.

One may said: I don’t know what do you mean by web pages, and web server. What does that mean?

A Web page or webpage is a resource of information that is suitable for the World Wide Web and can be accessed through a web browser. This information is usually in HTML or XHTML format, and may provide navigation to other web pages via hypertext links.

A web server is a computer program that is responsible for accepting HTTP requests from web clients, which are known as web browsers, and serving them HTTP responses along with optional data contents, which usually are web pages such as HTML documents and linked objects (images, etc.).

But, what do you mean by HTML?

HTML, an initialism of HyperText Markup Language, is the predominant markup language for web pages. It provides a means to describe the structure of text-based information in a document by denoting certain text as links, headings, paragraphs, lists, and so on and to supplement that text with interactive forms, embedded images, and other objects. HTML is written in the form of tags, surrounded by angle brackets.

Programs you need to create your website

Adobe Photoshop

Dowload it from here

Swish Max

Dowload it from here

Adobe Dreamweaver

Dowload it now from here

Smart Ftp

Dowload it now here

How to Create Website Series will cover following topics:

Website Planning

Design Own Website

Slice your Website Design in Adobe Photoshop

Create Website in Dreamweaver

Web site hosting

Upload Website Pages using SmartFtp

Monetize your Website

Get Web site Traffic