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.
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.
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).
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.
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 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.