Over the course of the week I have started making the actual website. As I missed Monday's session, I started at home making a Photoshop file which I would later Split and Save for Web and Devices. I chose to use Photoshop instead from scratch on dreamwevaer or through coding. I prefer to plan things visually so this was the better choice for me. It also allows me to get better more detailed and organised graphics.
The first change I made from my initial designs (and have since updated on my wireframes) is to make it a vertically/centred site. Originally I wanted to break the conventions I'd seen by having a more horizontal layout but in practice this posed some problems. If you want your site to look good in all resolutions when not using tables, you need to have a repeating background that will appear on columns to the side of your content. Then whatever the resolution the site won't distort. I had a horizontal nav bar instead. In the end i prefer it like this and feels more organised and easier to understand.
I left a space that could potentially be filled by a web banner later, another space was left for the iFrame. I saved Up and Down states for for the Photoshop layers for the nav bar. I knew I wanted the buttons in the nav bar to link to the iframe but I struggled to get this working. I had a code for an iframe which made text hyper links which would successfully change the contents of the iframe. Initially I planned to position the text hyperlinks subtly at the bottom of the page and then link the nav bar buttons to these. We worked out that instead you could do away with the hyperlinks all together. Instead each button is linked normally with an href to it's corresponding page. You then need to target the iframe. This was initially annoying, i had the behaviour of
Onclick="getElementsByID('test1').src=this .href"
inserted but it just wouldn't work. With some help we worked out that the problem was targeting the iframe. By changing the name and defining it as a window and using the same behaviour it worked. It would laso open most links in the iframe if you clicked on a link for an external page.
With this done, all I had to do was make the content for my pages. I really didn't do anything overly fancy with my pages. Everything was just linear content going down the page, images and text. I didn't use AP divtags or spry objects as, with the iframe, they really weren't needed. Also it benefited the iframe to have everything aligned left on the page. My images were PNGs or GIFs to allow for transparent backgrounds to make drop shadows looks effective etc. I would layout the pages with a yellow title with a thunder bolt icon for the whole page. Next a yellow banner and black text would give the project title or segment title. There would be the images or video followed by a summary of my contribution, the release date and a brief synopsis. Any external links were at the bottom of the page with icons and drop shadow rollovers.
I think i could have probably improved the layout of my individual pages and perhaps use more of the techniques I learnt during the skills audit. i think as much as I liked the iframe, it did limit me because of it's size and initial lack of reliability during programming. By either changing the size of the iframe or using something similar but newer (in terms of code) would have improved my site.
My website is nearly complete and the next stage will involve upload and testing.
No comments:
Post a Comment