MAKING A WEBSITE

If you find that you are totally unable to design a nice-looking website, no matter what you do, you'll find this five-minute website tutorial to be invaluable. I learned by imitating the websites of the professionals, and came up with this nice way of making a website.

This tutorial goes through the steps of making a left-oriented website.

Choosing a background for your website -

White website background
(reputable, mainstream) A white website background should almost always be used on a company website, or a site that is trying to sell something. The "white" theme can also be done with a navy blue background, and white text.

Black website background
(cool, different) A black website background should be used if you're making a website that's even slightly non-corporate - games websites, adult websites, personal websites. If your website is a bit different, use black.

Graphical website background
(natural, real) Making your website background graphical (e.g. by tiling), is dangerous, and rarely looks good. A very faint photo or a well-done watermark is okay. I had to tone down the background on my old website several times to get it right.

1 – Setting up the menu area

Your website should always start in Photoshop, not your web page editor.
Make a new 500x400 pixel image.
Zoom out and use the Freeform Pen tool to make an appropriate shape for a website menu. Remember to hold Ctrl whenever you want to move your points around, or drag their "arms". Make sure you have the "Paths" option at the top left of the screen selected. (You must zoom out or maximise the little window you're working in, otherwise you won't be able to drag your points into the grey area.)
Turn it into a selection. (Right click on it and choose "Make Selection".)
Make sure that your points make almost a complete circuit, as the first and last points will connect up when you turn the path into a selection.

2 – Making a website menu with a watermark

Create a new layer.
Fill the selected area with a left-right gradient of a colour and a darker shade of that colour. (I used red and dark red.)
Right-click the layer in the layers list, and choose "Blending Options" (Adobe Photoshop 6.0 & 7.0) or "Effects" (Adobe Photoshop 5). Give the area a shadow, bevelling, contour, and a texture (I used Carpet here).
To create a watermark (lightened area), use the Wingdings font, and type in "jk". It should come out as two swirly symbols.
Press Ctrl+T to rotate them, then make them into a watermark by changing them to an Overlay layer.
If your watermark extends over the edge of your menu area, just right-click it in the Layers list, and Rasterize or Render it, to make it editable. Then Ctrl+Click on your red menu layer, click Select > Inverse, and press Delete, to delete the unwanted part.

3 – Making a logo

The bulbous area at the tip is where the website's logo goes.
Use Times New Roman font here, and put some appropriate text in.
The easiest way to put the horizontal line in is by just typing underscores. ( __ )
Right-click each of these layers, and choose Blending Options (Photoshop 6.0 and 7.0) or Effects (Photoshop 5.)
Give each of these layers a 0.5 pixel black Stroke (outline), a Drop Shadow, and a Bevel.
If a black outline of one pixel is still too much, just make the outline 50% opacity, and it will look like it's half as thick.

4 – Making some buttons

Create a new layer.
Use the Shape Tool to put in a rounded rectangle. (Select the little square button at the top left that says "create new work path"). Create the shape, and then right-click it and convert it to a selection. (This step is Adobe Photoshop 6.0 and 7.0 only - just use a rectangle in Adobe Photoshop 5.0)
Put another light-to-dark gradient across the shape (I've used green), and then give them the usual bevel/contour, texture, stroke, and shadow.
Give the button some text (I've used bold Tahoma), of a new colour (I've used yellow), and give it the usual effects, but without the texture.

5 – Adding a picture

The final touch, which adds a nice effect, is to put a picture of something relevant in behind the menu. You can find stock photography easily on the web.
Use the Clone stamp tool to extend the top and bottom of the photo if it's not big enough.
While holding shift, run a white airbrush along the right side of the image.
Don't worry about the bottom of the image for now.
When you've finished making a website design, always select any non-picture elements (e.g. the menu bar, header text, buttons, and button text) and press Ctrl+U to colour-shift them. Play around with the sliders until you like the colours. (I haven't done this here, because I already knew which colours would look best. :)

6 – Making a "sliver" for your website

A sliver is what I call a thin slice of an image that can be repeated indefinitely on your website, to fill up an area of any size.
Save your work here, and do not save it again from this point, as the image will be flattened, and you want to keep your layers for future work.
This step can also be done easily with the Slice Tool, but for simplicity, it has been omitted here.
Select an area towards the bottom of the image, about a centimetre tall, and as wide as your image.
This area should not have any watermark on it, or any outstanding features in the photo.
Click Layer > Flatten Image, then Image > Crop, to remove everything but the selection. (If you don't flatten the image, it will apply the bevel to the top and bottom edges of your sliver, which is not what you want.)
Click File > Save for Web, and choose Jpeg, Quality 60.
On the History Palette, undo the Crop, but not the flattening.
Select the area of your menu, and click Image > Crop. This selection should be exactly the same width as your sliver.
Click File > Save for Web, and choose Jpeg, Quality 60 again.

7 – Making a website layout, using tables

In your web page editor, make a table with two columns.
Set the width of the left column width to be equal to the width of your menu image, and set the right column to be around 500 pixels wide. Make the width of the whole table equal to the sum of these two numbers.
Set the background of your left cell to be the sliver image. Then insert the menu image into that cell. Depending on your web page editor, use Hotspots or an Image Map to turn the buttons into links.
To finish up, some words about text...
Obviously, the body text of the page should be black, but what about the headings?
Scroll up and look at the image. The aim is to balance the primary colours - red, blue and green. Which colour is there the least of?
The red menu bar, and the green buttons and grass are each more prevalent than the blue water, so the best colour for the text headers on the page is blue. (Always use a dark shade of that colour when on a white background.)

HTML FOR BEGGINERS

A guide to learning html for beginners.
HTML are initials that stand for Hyper Text Markup Language

• Hyper is the opposite of linear. It used to be that computer programs had to move in a linear fashion. This before this, this before this, and so on. HTML does not hold to that pattern and allows the person viewing the World Wide Web page to go anywhere, any time they want.
• Text is what you will use. English letters, just like you use everyday..
• Markup is what you will do. You will write in plain English and then mark up what you wrote.
• Language. Some may argue that technically html is a code, but you write html in plain, everyday English language.

HTML is the code behind your webpage and is what your browser looks for to display a webpage, the way the webdesigner intended it to look, and is a series of tags that tells the browser where to display what. It is really a series of simple commands that you give to the browser, just like telling your dog to sit, and because it is in plain English it is easy to learn. For example, if you want your text to show in a bold type, you command it to be bold text , it really is that easy.

Keep this in mind: HTML documents must be text only.
When you save a HTML document, you must save only the text, nothing else. HTML browsers can only read text. Look at your keyboard. See the letters and numbers and little signs like % and @ and *? There are 128 in all (read upper- and lowercase letters as two). That's text. That's what the browser reads. It simply doesn't understand anything else.

Remember that if you are using Notepad, Wordpad, or Simple Text, the document will be saved as text with no extra prompting. Just choose SAVE.

If you are going to start learning to write HTML, it is a good idea to learn to look at other authors' HTML pages. The actual html potion of the page behind the pretty page you see in front of you now.

Looking at another's html code helps you learn how things are done and you can copy the style of pages that you like. Please do not just steal and copy the pages, but no one will be upset if you make the style in much the same way. For example, if you were going to build a house, you would look around to see what styles you like before deciding on your own design. Same thing here, look around the web and see what styles you like and apply them to your own ideas.

Here's how you look at an HTML document (known as the "source code")

• When you find a page you like, click on VIEW at the top of the screen.
• Choose SOURCE from the menu.
• The HTML document will appear on the screen.

Try it with this page. Click on VIEW and then choose the SOURCE.
It will look like mumbo jumbo right now, but soon it'll be readable and you'll be able to find exactly how a certain HTML presentation was performed.


What are HTML Tags?
HTML works in a very simple, very logical, format. It reads like you do, top to bottom, left to right. HTML is written with TEXT. What you use to set certain sections apart as bigger text, smaller text, bold text, underlined text, is a series of tags.
Think of tags as commands. For example if you want a line of text to be bold. You will put a tag at the exact point you want the bold lettering to start and another tag where you want the bold lettering to stop. There you have an example of how tags make commands and tell the browser how to display the text. Just like telling a dog to sit. You give the command.
All tags that are opened must correspondingly be closed, just as if you are writing a quoted statement with those "inverted commas". A tag is closed this way therefore we open a new tag and close the tag

Different tags call different functions. A full list of html tags and their functions is provided here.

Web Design – Syndicating Content on Websites

The role of content in Web Design has changed with time. In Web design today, it is common to combine content from various sources for use on the website. An effective web design strategy today, places a greater emphasis on syndicating content than before.
Wikipedia describes Web syndication as a method to supply content to multiple websites. One of the most common implementations of web syndication is the use of RSS feeds for making content from a website available to others that consists of a summary of recently added content on the website.
Brief History of Content Syndication
Syndication of content on the Internet became popular in Web Design since the early 2000’s. However its use has increased manifold in recent years. Today, content syndication plays an important role in web design and a wide range of content is syndicated freely on the Internet. There are millions of online publishers, including newspapers, commercial / personal websites and blogs that regularly publish their latest news, posts, offers or other information as news feeds of a standard format. Some newsfeed formats that are most commonly used are RSS and Atom.
As websites, blogs, social networks and portals continue to gain popularity on the Internet, there is and ever increasing demand for reusable content.
Web 2 and Content Syndication
The web design industry is considered to be in its second generation. The word “Web 2.0″ is often used in reference to the second generation of web design and development. One of the main characteristics of Web 2.0 is the emphasis on information sharing and collaboration on the Internet. The recent popularity of Web 2.0 as the new standard for developing and designing websites has led to the establishment of many popular website communities and social networking sites such as Twitter, Facebook and My Space to name a few.
Two of the most important characteristics of Web 2.0 are interactivity and content syndication. The emergence and popularity of Web 2.0 has led to a further increase in the requirement for syndicating and sharing content among websites on the Internet.
Two of the most popular Newsfeed formats for content syndication are the Atom and RSS standards. These are standardised methods to make ‘feeds’ of recently-published content available for sharing with other users or websites. RSS and Atom feeds make it possible for users to subscribe to feeds or use freely available software to display new and updated content.
Commercial benefits of Web syndication
Although freely available In syndicated content has become popular on the internet, content syndication also offers commercial opportunities.
Some content creators use a similar method to distribute proprietary content on multiple partnering websites or portals. Commercial web syndication involves partnerships between content producers and distribution outlets. There are different types of partnership agreement between the parties concerned. One method is where the content available via the feed is licensed on a fee basis. Another method is ad-supported content where ads are placed on the feed and the revenue is shared between the content’s producer and the publishing site.

Strategies for Effective Web Design

Here are some great web design strategies that every web designer should follow.
1. Fast Loading website designs – This is the number 1 tip that every web design specialist should follow. Your designs should be optimized and should not take more than 15 seconds to load.
2. All Resolutions – Today, computer resolutions range from 640 x 480 to 1024 x 768 and go even higher. Your job is to design your site for all these resolutions.
3. Readable and professional looking fonts – Don’t use fancy fonts that may not be available on most computers. If the font you use is not available in a visitors computer the website will use the default font of your computer which is much worse.
4. Minimize the use of images – Keep your site simple but neat. Don’t clutter your page with big, bulky images that take ages to load. Instead design eye-catching icons that will draw a visitor’s attention to a particular section of your site.
5. Use of white space – Try not to clutter up your page with too many images, backgrounds and colorful fonts. Minimize the use of graphics and use a lot of white space in your web design.
6. Check for broken links – Always check for broken links within a site before uploading it to your web server.
7. Decrease the use of animated gifs – Don’t use animated gifs in your web design unless it is necessary. Animated gifs take a long time to load and can also be very irritating.