After thinking about what I wanted as a website design and layout I started to work on mine.
I wanted everything to be central, I wanted the text to be a light grey colour (hex code: #c5c5c5). Each page would have the same header: kkuphotography and the menu bar.
Originally I wanted my name, menu bar and two albums for photos and videos, but I then realised this is what I wanted my ‘portfolio’ section so I had to change because it would be silly to have two pages exactly the same. Many people suggested to have one image, but I felt like this could deter people away because if it is of wedding photography then those who might want me to do gig work might think all I do is wedding work. So I decided on a square filled made up of nine squares each would represent one of my photography styles. Each image would be a rollover image so when the mouse rolled over the image would go darker and the album title would come up. However I realised I only had eight styles:
- Film Experiments
- University Work
So this led me to think that I would create a disjointed roll over so when the mouse rolled over one of the outside images the inside square will give the album title. If you want to go to one of the albums just click and you will go to the album. Here are two screen shots to help explain this:
This is just simply a grid of 8 rollover images and the centre is just a blank image.
I had a huge problem that when you tried to roll off the image the central image would stay on the album title. I looked at the code and to me (my not huge history on code opinion) there was nothing wrong. I tried to find solutions but nothing happened. Then after some miracle the events image would restore itself but nothing else. I tried to copy the code and hand-write the code myself for each image. And that didn’t work. So I tried to create my website from scratch again. That didn’t work. I then happened to meet a web designer who had a look and couldn’t understand what was wrong so he added in two lines of code for me:
” var blank = document.getElementById(‘blank’);
blank.src = “150×150/blank.jpg”; ”
And it worked! So my homepage is finished.
The next page I worked on was my Portfolio page which is just simply two rollover images one for videos the other for photos in a grid.
So if you click on photos you will get to this page:
I had an issues that the first rollover images on both pages wouldn’t work in Google Chrome but would work in Safari, you could see the first image but when you rolled over the image would look like this:
I tried to search for a solution but no one seemed to have a similar problem and if they did the advice wasn’t right for my website. I came to realise after this had happened again when making my wedding page that the second file even though it was saved as a .jpg was actually a .psd. I quickly changed this and they now work.
I wanted there to be an image of me on the right hand side and text about me on the left. I created a div tag and within that div tag I created a table with two columns and one row. I centred it using <center> </center> tags and that was it. I’m hoping to change the photo very soon to something more ‘happy’. The text I wanted to include who I am, where I study and how I got into photography and where I am now with it.
I knew I wanted a thumbnail gallery and when you click on an image it gets larger and the background fades out slightly. I searched for gallery plugins and came across the Adobe Exchange where I searched for “galleries” I came across this simply designed gallery called “lightbox”. I used this tutorial to help me get started and adding it into my webpage, all I needed to do was change the photos which I did here:
The first box is for the thumbnail and the second for the larger image, the thumbnail size is 150x150px and the larger image’s longest side are 700px. For albums where I knew I need a split I created another table with rollover images and each one would go to their galleries, for example:
For the video aspect of my website I wanted to embed videos from youtube, I knew how to do this (go to a Youtube video go to share->embed and copy the code) but it doesn’t work properly as the link is broken:
So I found this quick tutorial on how to fix it. This told me to add http: in front of the link to the website. For example:
This I knew would cause the most grief so I left it until last. I wanted a contact form instead of just having a mailto link for my email because I felt it would look quite empty. So I searched for “video tutorials contact forms dreamweaver”. The first video I came across only allowed me to style the contact form and nothing else.
I soon realised that I would need to create a PHP form. I then found this tutorial. I was so nervous that I followed his instructions to the letter but it wasn’t what I wanted. So I tried to edit it slightly using CSS coding. I then proceeded onto the second part. However soon into the video he asks you to move it to your server. I tried to ignore this and carried on. I then tried to upload it into the template of my website (so it just had the header and the menu bar) but I didn’t copy it correctly and it didn’t work at all. I tried again, this time inserting the code he was telling me into the template of my website. Also with feeling more confident about CSS coding I ignored a little bit of what he was saying. But this time I did try to upload to the server, but it just wasn’t happening. I waited until the next day where I saw Mez (the course tutor) she told me I managed to press the wrong button which disallowed me to upload to the server. However somehow over night a spry menu had added itself into the code (I’ve got no clue on that) and so the form was ruined (again).
Being the stubborn person I am I didn’t let the contact form defeat me, I tried again. This time I stormed my way through the first part of the tutorial and coding it the way I wanted. But then dreamweaver crashed and I lost everything. So I tried one last time, and it was a success! However, it still wasn’t completely working, because if you tried to press the send button without entering any data the form would go back to having a spry menu in there and the url would read kkuphotography.co.uk/contact.php instead of kkuphotography.co.uk/contactme.php this was because I hadn’t removed the old php form from the server and completely uploaded the new one. I quickly did this and that solved the problem. He had coded the form so the labels “Your Name” etc were aligned to the left of each box, I changed this too.
I also wanted my social media links to go on my contact page too. I wanted them to go above the contact form so they were easily visible I searched for “free social media icons” and I found this article I narrowed the selections down because I knew some of them wouldn’t work with my style of website and some didn’t have all the icons I wanted. I ended up with a choice of two one quite simple and the other in a stained glass effect. I chose the simple ones as I felt it was more fitting for my website. I then cropped each one in photoshop and sized them I was sure on how big to have them. I knew they should be smaller than 60px squared purely judging from the other square images I had on my website. I tested on 60px squared it was too big. So I tried 40px squared, 38px squared and 30px squared. (The order in the photo is 30px, 40px and 38px)
I chose 38px squared. I added them in using a div tag and a table. I then created rollover images.
I emailed the link to my dad asking his opinions of the website, it was as followed:
- The link to the about, portfolio and video section doesn’t work on the home page. (I quickly rectified this)
- There needs to be a button to go back to the website from the blog (I added this)
- On the gigs where I mention the headline act I should mention that there are photos support acts too. (This is something I need to think about as I do want to have text to explain the photos in each gallery)
- He liked the site but felt the text over the images could have been darker. (If this is something that is mentioned a lot I might change it)
- He tested it out on an iPad and said it work well too.
I then asked my mum to have a look as she is not so tech-savvy I thought it would be interesting to get her perspective. According to my dad she is a fan, I also got this email from her and her friend:
I changed the typo too.
The future of this website:
I already know that three things will be changed after this module, these are:
- A better ‘about me’ photo, I want it to be more inviting
- I will have some form of logo instead of just the text ‘kkuphotography’
- University work will be changed to something like ‘personal photos’ or ‘miscellaneous’ so it is a collection of photos that don’t fit into the other sections.