Archive for February, 2011

Designing the site

The designs for my beachcombing website were created in Photoshop. The elements were then separated and saved in the appropriate format for the web, either as jpgs or pngs depending on whether transparency was required. These separate elements were then ready to be brought into Dreamweaver. After a class tutorial on creating web pages from scratch rather than using a template, I decided to use this option as it seemed easier and more flexible.

Page structure

I produced the layout of the web pages by creating boxes using the AP divs which produced editable boxes that I could freely move around the page – apart from the body – all the elements were put within the ‘wrapper’ – which is the container for holding all the elements of the page you have created in place.

Background – body
With the background ‘body’ image – the file is quite large as I had to create a pattern that would seamlessly repeat – which I could only do by copying and flipping the image so that the blue would blend into each other. I have set this to repeat only on the y axis. – For future projects I need to consider how to reduce the file size to help with loading times.

Content container

This holds the image of the torn piece of notebook paper. It is set to repeat on the y axis. I had to create several versions of this to accommodate the differing page lengths. There is probably a cleaner and simpler way of doing this which I will explore next time. I would also make a smaller section of paper to copy and repeat to ensure smaller file sizes and therefore faster loading times.

Header and Side image

Two boxes were created to contain the header and side images of hand drawn shells (and headline text). These were imported as .pngs though they do not have transparent backgrounds. The header text could have been created using fontface, which is used for the subheadings in the rest of the site.

The main nav bar is an extra container with linked text to the other pages.

I also created hotspots for the individual shell images on the side box (but not in the header).

Bodytext container

The container that holders the bulk of the text for the site – it is also used for holding images, tables (for image gallery) and form information across the various of pages.

Imageboxes container

The container on the right hand side of the page that holds the secondary navigation bar. This contains links to information pertinent to each page.


Simple footer with simple hand drawn line illustration to divide from the rest of the page.

Call to action button – Contact us

At the top of the page I have included a contact us button. I tried to follow CSS3 instructions for creating rounded corners but failed – so I created a box in Photoshop and saved it as a png and imported it into a div tag that I had set up in the header. I made a link to my e-mail address, but had problems with obfiscating this. The appropriate code was then copied and pasted in the relevant place to make the button appear in the top right hand corner across all of the pages.


The fonts used throughout were courier and Designer Face a downloaded font from Dafont. I chose these because they have an open airy feel to them. Designer Face has a hand drawn feel to it in keeping with the  overall notebook theme to the pages. I have tried to make the site as visually appealing as possible, with lots of photos of the relevant beach to draw the visitor in.

The links throughout were creating using instructions learnt in classroom sessions. The gallery page was created by using some javascript (slimbox) to create pop up boxes.

The links to sounds were created by assigning a behavior (open browser window – on click) to the relevant text – this gave me some control over when the sound could be heard without having to navigate to a completely separate page.

I created a favicon with a pepple design in Illustrator in keeping with the beachcombing theme. I then used genfavicon.com to make it ready for the web. I followed the sites instructions and copied and pasted the relevant code that the site supplied into the head of the html code for every page. – Hopefully this has worked. At the moment I am unable to see this as I haven’t yet organised any web hosting.


Read Full Post »

I tried to create some webpages at home. I used the guidelines taught in the sessions at college. There were a few problems as I am using Dreamweaver 5 rather than 4 and the selected template worked in a slightly different way to the version used in college which gave me all kinds of headaches. However I managed to create a header, insert photos and text. I got the text to run around the images, made links for the navigation bar (which was the main source of my frustration as I couldn’t get it to run horizontally across the page), added a video by pasting code from You Tube, made email, external webpage and pdf links and created named anchors with java script so the viewer can be taken back to the top of a page at a click of the button. I also but text into the title page and added some meta tag information for SEO purposes. I used this exercise to kick start some very preliminary research for my departmental website which will need to utilize all of these things (though the videos won’t be so graphic, they will be more of the PR work carried out by the department).

Read Full Post »