My Website
So idat 102 assignment is to create a website, the specification states it must have at least 3 pages using XHTML, CSS and javascript. All pages must validate using W3C tools, both CSS and the XHTML used. The website is too be uploaded to my site www.billatron.com along with a CD copy.
So getting myself started i went over everything we had done in the sessions, i will talk through the coding and my design as i go. I set out by creating my three blank html pages along with a CSS and javascript file, all pointing to the same website in Dreamweaver. i decided to use my homepage to introduce myself, have the second page as my form and the third i would attempt to make a small image gallery.
XHTML
I created my content using the XHTML tags we had learnt in the workshops, some examples are <p> <h1> <h2> <ul> <li> <img> these simple tags can easily be used to set up a website. I created my headings, wrote up some text about myself, found and then re-sized some relevant images. i made my menu by using the <ul> tags and then entering three <li> tags with the links to my other pages. On my contact page i added a form so peopel could respond to my website.
although i did use relative positioning, so everything should be in the right place, i think my website as a whole may seem to large on most screens, i use a 1920×1080 resolution and this is larger than average. I did make nothing outside of the 800px size though, so even on old school screens it shouldn’t need to scroll left or right.
Javascript
When i moved onto my form page i needed to validate that the user had entered a correct email, i did this by using javascript code, i had quite alot of trouble getting this too works as normaly i would use txtEmail.value to find the value of what they had entered then check for an @, however the txtEmail.value wasn’t working. I researched on the web and found the way is to getelemenetbyid() instead. Once i had swaped and fidled with my code after many hours it finally only sent the information if there is an @ in the email input box.
i was confident i could make a gallery in javascript using either onclick or onhover functions to change the value of a variable which was a center picture. I had set a blank picture in the page with my thumbnails around and then gave each thumbnail and event handler. I called the event handlers in javascript and used the onhover function to then change the src of my chosen variable which was the picture. Whatever i tried i could not get the javascript to work, i know you can do it in CSS but i thought it was more difficult.
My CSS
For my CSS i added div tags into my XHTML pages along with adding some ID attributes to items i knew would need to be changed specifically.
I wanted to make a simple navigation system for my 3 pages. i used the method of making a list and then using the float tool to create a navigation bar effect.
To create the fade on both my background image and for my heading background i used the same method, this is to create a smaller image ( i used illustrator) and then tell the browser to copy the image and repeat it across the selected area. This helps with loading time of the pages. At first i used absolute positioning to choose where my images and text where displayed, however i realized the resolution on my screen was totally different to most and my website would look totally wrong if i still used it. I started to make everything relative positioning which took awhile but once i had positioned everything it looked pretty cool and i was happy. Most of my relative positioning was just moving it up the page, i did this by using top: -600px; for example.
As i decided to make my gallery in CSS it took quite a bit of work. I had to re-size all of my images from 4000×3000 because it was slowing down loading times, i made a 100px wide image for a thumbnail and the a 300-400px wide image for the main picture. I set up my list and gave it a unique id as not to get the CSS from my other <ul>. i used a <li> for the thumbnail and the a <span> for the larger image. First of all i display:none on the larger image so that by default only the thumbnail’s display. I moved on by setting the position of where i wanted the main image to be displayed just indented and down from my top and right boarders. i then used the :hover CSS code to make the image display when a user hovers over the image.
I wanted to added custom font for my heading but, as i believe the way CSS works is that you tell it the font and it looks on the users computer to find it. so if i used a specific custom font it wouldn’t work anyway. I came up with the idea of making an image in illustrator, i did this and uses a transparent background but i couldn’t get it to display both this and my fading header i was using, so i stuck with default font.
Validation
As it was part of the requirement I completed the validation for all of my pages which passed both XHTML and CSS validation with the w3c tools, however i choose not to add the images to my page. My main error in validation was missing alt attribute in the image tags, and my name attributes having spaces in them, both easily changed. I had previously had my javascript in the same file but i had to create a seperate file for it to pass validation.
Leave a Reply