Web design and resources for beginners and before CSS and web 2.0
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 emailon 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.
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, Firefox 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 a page of resources on my web site.
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
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 encrypt your link by using my Protect your link service to be found at the bottom of the About affiliate programs page
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
http://www.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 http://www.freetoolkit.net/
Make your long URL shorter http://www.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
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: <imgsrc=”chinavase.jpg” width=”159″ height=”196″ border=”0″ alt=”china vase”>
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.
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
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 ozwebhub.com, the anchor would be “http://www.ozwebhub.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=”http://www.ozwebhub.com/dreamweaver.html#dwvideo“>How to use dreamweaver</a>
That HTML would lead you to the page known as dreamweaver.html at the section (anchor) called “dwvideo”.
TARGETS are great for a site map. Break up your pages and point to more information by using targets.
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!
Favicons
I have made a favicon.
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 http://www.tlc- systems.com/webtips.shtml
How to write HTML
http://www.mcli.dist.maricopa.edu/tut/index.html
Accessibility
See how your site is viewed by all browsers, link checker and more http://www.anybrowser.com/
Web tips
1. For Dreamweaver users (and possibly Front page users)
I was sent an email by Roy Bryant of http://www.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 http:// 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 www.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 my 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 ‘ozwebhub’ 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, like your blog.



September 10th, 2007 at 3:16 am
Sorry about some of the very old and very basic tips here.
I’m just also testing anew plugin here.
September 10th, 2007 at 4:08 pm
Wow! There are heaps of good old links here.