Basic Web Design
Ask me a question!

 

This page was created because, when I was just starting out and trying to learn web design, there were so many things no body told me. I had to teach myself, although it was fun, it was a very slow process. So I hope to inform people who are just starting out on the basics.

I know what your thinking, why do I need to know all this stuff? I only want to make it look pretty and put my information on the internet! Unfortunately you can't do any of the fun stuff until you know the basics, so please take a moment to learn little about web design. Before attempting to learn the hard way.
I recommend this web site for all internet terms. Dyma Designs


Programs I recommend:  
For making the web pages: (you know a little HTML)

Dream weaver 4

For making the web pages: (you know HTML)

Microsoft note pad (comes free with windows.)

For editing photos and images:

Adobe Photoshop 6

For putting the files on the internet: (FTP)

Cute FTP

These questions are answered below....read on....
Why has my picture dissapeard? and is now a box with a cross in ?
Why is my picture taking so long to appear?
Why does my photo look blury?
What file type do i use? and for what?
Why does my picture link have a box around it?


Most common mistakes
(Yes I made most of these, this is the section you go to when you are at the stage of throwing your computer in the pool cause you cant get something to work.)

Problem: Pictures not appearing on your web page, they appear as a small box with a cross in it. For example:


Possible causes:
1 the link to the file isn't correct. Eg your picture is in a folder called "images" but u didn't tell your page it is in there.
Wrong: "img src="mypicture.JPG">"
Right: "img src="images/mypicture.JPG">"

2 you forgot to put the picture on the internet, forgot to upload it.

3 the file extension is wrong, JPG and jpg are different, file extensions are case sensitive on some internet servers.

4 you saved the picture wrong, it can only be a JPG, GIF or BMP.
BMP is not recommended because the file size is too big and it will take too long to download.

5 there is a space in the file name, SPACES ARE BAD! The internet doesn't understand spaces in file names eg. "my picture.jpg" won't work. But "my_picture.jpg" will. So instead of using spaces use an underscore (the key is near the backspace key on your keyboard).

Pictures

  • All photos and images should be saved as JPG the size should be around 12 -20 KB never a MB.

    JPG example, this images size is 18.7 Kb

  • You can also save clipart as a GIF this is for solid colours, like Microsoft clip art.

    GIF example. Also note that GIFs can be transparent.

  • Don't save photos as GIF cause the file size will be too big.

  • Another tip is, only save a JPG once, because it looses quality every time you save it, for example if the picture is too big u resize it, then save it, then resize it again, and save it, the quality gets worse every time you do this.

  • Another thing is, NEVER NEVER resize up...eg, if u have a small picture and want to make it bigger...it will look really bad if u make it bigger...so just leave it the way it is, and search for a bigger picture.

Before
After being resized UP.



Original image.

 

Why does my picture link have a box around it? Eg,


<a href="index.html"><img src="pic_link_eg.jpg" width="150" height="60"></a>

To fix, simply add border="0" to the link.


eg: <a href="index.html"><img src="pic_link_eg.jpg" width="150" height="60" border="0"></a>

Ask me a question!

 


Counter 1