For the last week or so I have been slaving over a hot computer creating a website for Mark. It went live today. The domain name is www.yogawithmark.co.uk Although I took my own website as a starting point it took a lot longer to develop than I thought that it would and I hit a few problems along the way. I have to say though that as a result I've learnt quite a bit! I use Publisher to create and maintain my website (yes, yes, I know it's ****, but it's what I've got and know and I'm not ready to bite the bullet and change) The most important thing that I've learnt to do is how to link to images rather than have them embedded in the document. This makes the website more efficient and quicker to load. I spent ages searching MS documentation trying to find out how to do this to no avail. Eventually I found this basic article which put me on the right track. From there I searched the web to find out more about the 'img' element. As they say "If a jobs worth doing, it's worth doing well" so I decided to define alternative text (alt attribute) and width and height as well for each image. Specifying the height and width makes the loading of the website more efficient. The alternative text is displayed if the browser cannot display the image for some reason.
Having finished the website I previewed it in Firefox, our default browser, and was very happy with the result. Feeling pleased with myself I loaded the site into Mark's webspace and checked it out with IE. Eeeek! My heart sank. No pictures. Or rather each picture was replaced by a thin line. There followed hours of frustrated tinkering trying to find out what was upsetting IE. Eventually I managed to right click on a line and read its properties. It turned out that IE was interpreting the width correctly but was setting the height to 1px! More trawling of the web followed. This time I was searching, unsuccessfully, for a solution. There are many requests on message boards for help with various problems to do with IE not displaying pictures correctly/at all and a lot of 'ill will' directed towards MS, IE and Publisher. Most replies to requests for help were to advise not to use Publisher. No help to me with my site already developed and looking great, though I say so myself, in Firefox! I was resigned to having to embed the images after all and took myself off for a bath before going to bed to sleep on it.
Eureka! As so often is the case inspiration came to me as I sank beneath the water. The banner to Amazon displays correctly in IE so maybe looking at the HTML fragment for that would give me a clue as to the way around the problem. I discovered that Amazon specifies the height and width in a style element. I tried it and it worked! If you should be having the same problem (and in case I forget) here is an example of the HTML fragment that you need to put in your Publisher document.
<img src = "domainname/directoryname/imagename" style="width:140px;height:105px;" alt = "Your alternative text" />
The imagename is case sensitive so make sure that you type it exactly as it is in the directory listing. Replace 140 and 105 with the dimensions you want.
Another couple of tips to ensure that you keep IE happy are
- put the element and attribute tags in lower case (img rather than IMG) and
- ensure that there is a space followed by / before the closing >
as I have done above.
Having learnt how to link to images I now need to alter my own website. That's going to be a slow and laborious task which I don't relish. I think I will have to break it down into more manageable chunks!
Warning - developing a website can be addictive! I've not achieved much else this week.
No comments:
Post a Comment