Web design tutorials


Useful links

{w3}.execpc.com/~keithp/bdlogcgi.htm

Great information on how to use the CGI bin on FTP
Here is another free web designers site with lots
of tutorials. Mainly used by teachers of IT in schools, but we could
all benefit. Web building tutorials
{w3}.w3schools.com/
You don’t have a web site yet

It’s very difficult to keep up with the changes to web design these
days. Some of the flash sites we’ve seen are particularly brilliant,
some are not. Making a web site without buying Photo shop, paint shop
pro and dreamweaver will leave your site fairly plain. That may be
all you want, but if you want a more professional design try this.
Try these templates
Web design tips
There are things you can do to your web site to confuse
the spammers. There’s a way of using another symbol apart from @ for
your email on your site. It is @
Spider robots looking for the @ then can’t find your
email. You can use a ‘no right click script’ . But I believe that
even going to all those lengths you will still get spam mail.
Appelet menus..very attractive

The web developers
virtual library
One of the reasons we could never quite
get the colours right on the site is that without seeing them together
it is difficult to judge how they will look. As with painting a room,
we found the following site invaluable. We had the web site there
to pick the colour and the dreamweaver open to see how it looked next
to other colours. From our experience a two colour site is probably
best, but that doesn’t count the text link colours.
Check
out this colour picker
Here’s a great link to HTML tags and
which browsers the tags work in.HTML tags
Create DHTML/Javascript menus for your
web pages visually, without any programming experience required! A
Javascript menu will work alike in browsers supporting DHTML, such
as the I.E., Netscape Navigator, Mozilla and Opera browsers, without
you having to deal with DHTML incompatibilities across them. A DHTML
menu can be vertical or horizontal, it can be movable, stay visible
while scrolling, contain static or animated images, borders, colors
and much more. There is also a collection of predefined styles in
the Style Gallery that can help you build a dynamic menu very fast;
just add the text for each menu item and let the Style Gallery take
care of its appearance. Finally, a simple step-by-step process makes
it easy to compile and link a menu to your web page in just seconds!
Since menus have always been familiar and straightforward to users,
you can really boost your sites’ functionality with comprehensive,
well-designed menus; AllWebMenus is definitely a great tool to achieve
this! I have used the All web menu and can recommend it provided it
is not too graphic intensive. They are attractive and popular. All Web Menus

This site was advertised as Site Pro
News of the week. I has simply everything you’d need. Everything the web designer needs
Creating site maps with different software - all free.

I have added a target to my free software
section on the site. Webmasters freeware changes frequenty so come
back and you will see something new each week. Don’t be afraid to
download the file fs2002.exe too. You need to save that to your own
hard disk. There are hundreds of free bits of useful software there.
Free
software
Flash
Well here is a great link to flash tutorials. Good luck. I can’t make head nor tale of flash. I guess I’m not that keen on learning it either. But for the occasional banner or button flash is pretty useful. I use on-line flash generators if I need it

Articles
about web design
Web design tips
Do you have some affiliate programs from
which you’d like to receive some commission for advertising them on
your site? Have you clicked on one of these from another site and
thought you’d like to buy something but decide to get rid of the referrers ID? You can encypt your link by using my Protect your link service
to be found at the bottom of the About affiliate
programs page

Web site templates
I have changed my web page templates page to make
it easier for you. You’ll see this now at {w3}.knowledgecollegetutors.com/html/templates.html
HTML Code Tutorial’s goal is to provide the most helpful
and complete guide to creating web pages anywhere. They have good
tutorials on frames and on forms at

{w3}.htmlcodetutorial.com/
Free on-line
web tools
Flash Generators, Graphic Generators, Dhtml/Css Tools,
JS Generators,

JS/Css Generators, Html Generators, MetaTag Creators, Calculation
Tools,

Colour Charts, Site Popularity, Dates & Times, Text & Numbers,

Domain Related, Fun Tools, System Information, Ping, whois, etc.

Code Validators, Miscellaneous

{w3}.freetoolkit.net/
Make your long URL shorter

{w3}.snipurl.com/

Creating vertical lines on
your web page
We do this by building a .gif image we’ll call "vertbar.gif" and then placing that next to some text. You can build the image to width, say 2 pixels, and form the height as desired using the img
height attribute, like this:
<IMG src="vertbar.gif" width=2 height=n
align="left">

You obviously have to create your vertical graphic in your favourite
graphic program.

If you are short on one of these check out my free graphic editors
at {w3}.knowledgecollegetutors.com/gif.html
ALT TAGS
This tag is the one that is most often misused: The
alt tag. Alt tags are comments that should be used whenever you add
a graphic, or image to a web page. Pictures are worth a thousand words to you and me, but zero to a search engine. An alt tag should be a little bit of short,
descriptive text which helps any user (and search engine) understand what the reference is pointing to. If you are not aware of what an alt tag looks like, here’s an example: <img src="chinavase.jpg" width="159" height="196" border="0" alt="china vase">
Free ebook from Boogie Jack about cool web master
tips.Download from
DHTML menu
Another DHTML menu builder : this one is also cross
browser which is invaluable as many only work on some browsers. There
are free DHTML menu codes out there but often, not very exciting,
or limited to few browsers and you have to know how to code them yourself.
Mine was free at the time, but that no longer applies. Mine also does
not work on the Opera browser. Why do I like DHTML menus? Because
you add a page and you just add the page to your menu. You don’t have
to use SSI or change every page on your site.

{w3}.regnow.com/softsell/nph-softsell.cgi?item=3791-1&affiliate=26623
Interactivity
If you have a web site with content that
you want to share, FreeSticky is the place to list it. Freesticky
also locates and reviews high quality website tools and website improvements that you can easily add to increase the professional look of your site. You will find a variety of content including headline news feeds, financial content, jokes, lottery results royalty free photos, images, stock tickers, sports tickers and much, much more. Web site tools include remotely hosted applications such as free chat rooms, free hit counters, free message boards, free guestbooks, free web forums and more! Make your site sticky

Mario Sanchez Author Site design tips

I have edited her site design tips
to include only the more sophisticated of them. They are her views.

Write in layman’s terms so that everybody can understand your content, unless you’re running a technical site for technical people.

Reading from a screen is painful:
use 50% less words than you would use on print.

If a page is too long, break it into several pages and link to them.

Don’t use font sizes smaller than 10pt. for the body of your page. Specify your fonts in percentage terms instead of pixels to let users set their own size preferences using their browser’s text view options.

Use a spell checker. Spelling mistakes are embarrassing and hurt credibility.

Tips to Know Your Customers
Ask for feedback: include a feedback form in your Contact Us page.

Publish an ezine and include a subscription form in your homepage. Give your customers valuable information and encourage them to contact you.

Include polls and other tools to gather market intelligence.

Tips on Linking

Make your links descriptive. They should indicate what the user will be linking to, as opposed to just saying “click here”.

Don’t underline anything that is not a link.

Underline your links and use a consistent color for them across your site (preferably blue).

Use a different color for visited links, so that your visitors know where they’ve been (preferably purple or a more subdued tone of the unvisited links color).

When linking to a non-HTML file, such as Excel, Word or Acrobat, make it evident, by including a small icon next to the link.

Don’t link to “under construction” pages.

Make sure that your links work and that you don’t have broken links.

If you use graphic links, don’t forget to use the ALT attribute. The ALT attribute should describe what you are linking to.

Tips On How To Use Graphics

Optimize your graphics. Use only .gif and .jpg formats. Make your image files as small as possible while maintaining acceptable quality. Use a free online graphics optimization tool.

Use thumbnails (miniature versions of a picture) and make them clickable to the actual size picture.

Avoid graphics that look like ads. People ignore them.

Use the ALT attribute on pictures, even if the image is not a link. It helps users with disabilities and people who have turned off graphics.

Tips To Optimize Your Site For The
Search Engines:

Create short, descriptive page titles, to entice search engine users to click on your links.

Create a site map containing all your pages, and link to it directly from your homepage. Search engine robots will follow the link to your site map and will most likely add all your pages to their index.

Decide what the two or three main keywords are for each page (the words you believe search engine users will type to find your page) and repeat them often in your page title, description meta tag and page body.

Create a Links page and call it Resources. In it, place links to those sites that have agreed to place a reciprocal link to your page. The more inbound links you have from quality sites with a topic related to your site,
the better your site will rank with the search engines.

Use more text than graphics, and minimize the use of Flash and JavaScript. Search engines heavily favor text and will crawl and index your site faster. For more details on these tips, or for more tips, visit TheInternetDigest.net

Web design expert and author Shelley
Lowery’s latest ebook, Web Design Mastery, is taking the Internet by storm…Customers are raving…”Finally, a web design course that makes total and complete sense! Shelley, your new eBook will quickly become the “bible” for
anyone who wants to build a website. Totally top shelf!” — Rick Beneteau
For the first time, Shelley reveals all of her professional Web design
secrets in her latest book, Web
Design Mastery. Finally! A COMPLETE Web design system that
makes professional Web design easy…with 100s of copy and paste codes.
Web Design Mastery is a MUST read for anyone serious about designing a great website! I HIGHLY recommend it.

A great little colour picker, which
shows different, coloured text on different backgrounds as you watch

{w3}.milonic.com/colorpicker.php

A terrific forum for webmasters. Forums are
where you can help others and get answers to your questions. This
one has many members and many categories.

{w3}.webdesignforums.net/

Jumping links

Internal links, or whatever you want to call them,
are pretty easy. Let’s set up the basics right now and then I’ll totally
explain it. The word anchor in this lesson will apply to the target
of the internal link.

The anchor is the spot you go to. If I was linking to Knowledgecollegetutors.com, the anchor would be "{w3}.knowledgecollegetutors.com".
With internal links, the link and anchor are both
on the same page usually, but they can be on another page too. So,
the link has to point to something other than a conventional anchor.

Now I will show you the HTML since you should have a solid understanding:

<a href="#soft">Free software</a>

would take you to this anchor:

<a name="soft">Free software</a>
You can jump to specific areas on another page, too.
Simply address the page area you want to go to like so:

<a href="{w3}.knowledgecollegetutors.com/java.htm#print">How
to insert a print button</a>
That HTML would lead you to the page known as java.htm
at the section (anchor) called "print".
TARGETS are great for a site map. Break up your pages
and point to more information by using targets.
A new web authoring system for Lynix which is completely
free and open source. A competitor for Front Page and Dreamweaver

{w3}.nvu.com/
Xara web service applications have just added a menu maker to their products. But there are heaps of other quite cheap things to choose from as well as free tools
How
to protect your web site from thieves.

Is it possible? Is it advisable?

Yes it is advisable for security reasons, but then there is the philosophy that the internet should be open source and free. Right click codes
don’t really do the job as people can just look at your source and write it down.
I’ll leave it up to you. Here is what HTML-Protector
says about their product, and it is pretty cheap, besides. You don’t
need to use it on every web page where you want people to download
something, but it will help stop that most annoying spam.

HTML-Protector.com
is incredibly simple to use. Within seconds, you can:

Completely hide all your HTML!

Encrypt every single e-mail link, ensuring spam "spiders"
can’t snatch your address!

Securely encrypt every single PayPal "return" link!

Lock your pages, so they only display on your site!

Disable right-clicking, offline browsing, text highlighting and printing!

Stop URLs being shown in the status bar!

Cancel any clipboard copying or screenshots from being taken!

Prevent dragging-and-dropping and Adobe Acrobat Web capture!

Automatically break out of frames!

… and more!
Do you use Front Page?

{w3}.outfront.net/

Favicons

I have made a favicon. What is that, I hear you ask.

The tiny icon next to your bookmarked page really makes it stand out.
One note about it. It can disappear because it relies on cookies.
If you delete your history and cache you will need to upload it again.
You can download a free program called FavOrg
to bring them back again. See my tute on making one

Web design tips

Even though this site looks a lot like one of my own pages,
I recommend it. It has HTML tutorials. It talks about communications and
it has a crossword on it, which really tests your knowledge of computers.
The crossword is made in a very interesting way. It is really designed
for year 12 IT students. Web design

Tips on web design

{w3}.tlc- systems.com/webtips.shtml

How to write HTML

{w3}.mcli.dist.maricopa.edu/tut/index.html

Accessibility

See how your site is viewed by all browsers, link checker and more

{w3}.anybrowser.com/

Web tips

1. For Dreamweaver users (and possibly Front page users)

I was sent an email by Roy Bryant of {w3}.seventwentyfour.com
which alerted me to broken links outside my page. As I went into the
code to see what was causing this I discovered that if you don’t put
in front of your link, it will not work. At the same time I
discovered that I had plenty of 20% all over the place. I had to delete
these from my code. Also those sites where you see {w3}.geocities/~sam
for example, the squiggle translates to something else in the code,
but doesn’t seem to effect the viability of the link. You can make these
mistakes so easily. Only yesterday as I was rejigging this site, I discovered that I had a ‘h’ missing for a URL link. Result?
Yet another broken link.

File structures
I am changing the file structure by separating out the images and HTML
files.

So on my computer I have a folder called ‘knowledgecollege’ containing
all the HTML files which belong to that and under that file I have one
called images. On the remote site (my server) I created a new folder
called images too, so all the images go there.

But in my HTML code I have to change it to <img src="images/banner.gif"
width="286" height="138" alt="how to make a
banner"> for example.

Now you can use this same process to separate up more parts of your
site.

Web site interactivity

I recommend Bravenet to you at {w3}.bravenet.com
for the many free things it offers to add sticky content to your site.
There are message boards, forums, guestbooks, games: you name it, they
have it.


Web hosting
Here is a large directory of web hosts {w3}.webhostingstuff.com/

0 comments: