Out of all the projects that I have done on this course, this has been my favourite. I found coming up with an idea pretty easy even with the freedom, in the past I have struggled with ideas when I have the freedom however I found it easier to come with an idea for myself. With this project I wanted to make sure that I did really well and update my blog and sketch book on a regular basis to ensure I didn't fall behind.
From the experience of the previous project of making a website, I made sure that I was better prepared for when it came to make my own. I took a lot more time in planning my idea and ensuring that I knew exactly how I want it to look and feel. At the beginning of the project I did quite a lot of research into existing one page websites, which helped with some inspiration for a design for my own site. After doing this I was then to start experimenting and come up with mock up ideas in Illustrators, along side this I was also making using of sketchbook which I have struggled to with previous projects. Once I had established a full mock up I felt confident in starting to build my site using html and css. Based on what I learnt from the last project I felt that it was a good idea to make my basic layout first and then add the content; images and text afterwards, which I found to be a great help. I was surprised at how much I had learnt in html and css and found myself in nearly every lesson just sitting down and getting on with developing and making my site. I also found that I was able to over come difficulties and problems that I came across although it took me a little while to work it out, I found that once I did it helped me to understand what was going on and what I missed or did wrong. Throughout making my site I did change some of ideas as I struggled with making some of things that I wanted. I decided to put all of my work straight underneath the text, which wasn't my original idea. I had originally what to use a slider so that in each box there would be an arrow that would slide a long and then show my work, however even after looking at tutorials I still couldn't do it so I just decided to change my idea slightly.
I really found that my time management has improved during this project. I made sure that I blogged at least twice a week with the hope of perhaps doing more and also tried to start my sketchbook right at the start of the project and use it throughout my progression. I really wanted to focus on doing well in this project, which I think helped with me updating my blog and ensuring I do the best that I can.
I feel that after this project I think that I have a good idea now about what I need to do for the second year to ensure I don't fall behind.
Sunday 10 June 2012
Making my website
This is the code for my website.
html
This is the html code for my site. To begin with I created the basic layout in which I made a header, a main content section and a footer.
The screen shot above shows the top of my html.
At the top of the html in the <head> I have put in all of the jquery and links to other pages.
In the body tag I made another tag called wrapper and inside that is where I have put in all of my content. The first thing that I put in my <wrapper> is the title, because each word needed to be different I put each word in an unordered list.
This is what my title looks like in my html. Now that I have done this I need to go on to style it in my css, I need to change the fonts, colour and rotate some of the words. In my mock up I wanted to have a border along the top and bottom, so in my html I made a <div> with an id of "border" and placed the unordered list inside this <div>. In css I will style the border.
As well as having the title in the header I also wanted to have the horizontal navigation in there so that it sat along the top of the page. I made another <div> with an idea of "horizontal" and inside that made an unordered list with a class of "nav" with the headings for my section and where the links are aimed at. In my design I had the use of lines between each box so I tried out having the links to go the lines and found that it worked successfully. I'll be styling my horizontal navigation in css. At the end of the horizontal div I closed the header div like this; </div><!--end of header--> the comment at the end was to help me what the end div was for.
After completing the header I then moved on to make <div> with an id of "main_content". This <div> will contain all of my content that I want, the first thing that I add was my vertical navigation. I did the exact same thing as I did with the horizontal navigation, however I just changed the id of the <div> that it was in to "vertical". I need to style this in css to fix it to the left hand side of the page.
This screen shot shows the next part of my html.
The next thing that I put in the <div> was an image which is located in an images folder with a folder which contains the html and a folder for the css. I made a new <div> with an id of "bunting" and a class of "section" so that I could style it in css and put in the code <img src="images/big_bunting.png" alt="" /> I then closed the div and added a comment. After that I then added another <div> with an id of "line_1" and then closed it and gave it a comment, I will need to style it in css to give it a height, width, colour and changing positioning. This line is where my first link on my navigation will go to. The next <div> that I added was for my section of the site, I gave it an id of "bio" in which I included a title and some text.
Underneath the "bio" box I created another <div> which I gave an id of "line_2" and set it out exactly the same as "line_1", this line is used for the 'Photoshop' link on the navigation. The next section that I wanted was for Photoshop so I created a <div> with an id of "photoshop" and a class of "section". Inside the <div> I created a paragraph tag in which it will contain some text that will explain the project brief and what I think about Photoshop. The next thing that I added was another <div> this time with an id of "switcher", this <div> contains my panoramic photos and I will be styling it in css to make it an image switcher.
After that I went on to add another image, a line and another section to my site.
I created a <div> with an id of "owl_branch", which is the same name as the saved image and entered this bit of code <img src="images/owl_branch.png" alt="" />. Under that I created another <div> for the third line. I did the exact same thing as I did with the Photoshop part, however I just changed the idea to "Illustrator. Inside the <div> I made a title and paragraph tags and then after that made three separate <div>'s to put in images of my work.
The screen shot above shows my images of my work inside the three <div>'s.
Underneath the <div>'s is some java script which is used to get my light box to work, which I have been struggling with. I then ended the <div> and added another image with another line.
The next section that I added was for Final Cut.
This is the code that I used to add my video of my speech clip. In my folder which contained my html (index.html) and the folder with my images in, I made another folder which I named 'video' which contained an mp4 and ogg version of my video.
After adding my video I then went on to add another image and another line, which is used for the link on my navigation.
Underneath the image and the line I made a new <div> and gave it an id of "web" this is going to be my last section to my site. I put in a title and some text about what I have done in web and a bit about the brief of the project.
I then went on to add three images of the website that I had made, which I put under the text and then after that I put a link which will take you to my website that I made for the project. Inside my website folder I put in a copy of my other website which I then used as part of my link to get on to it.
The next thing that I did was put in some java script for the light box for the images that I just put in.
I put in another line and then ended the main content <div>.
After ending the main content <div>, I then went on to make a new <div> with an id of "footer". Inside that I created a link which would take users back to the top of the page. I created an arrow which is used as button for the link. Once I had made the link I then put my name in the footer box and my email address. Lastly I closed the footer <div> and ended the wrapper <div>.
The final thing that I did in my html was add the relevant jquery to go with the navigation and images.
css
Alongside doing my html I used the css to style all the content that I have put in.
The first that I did in css was add a background. In Illustrator I made a small square with the colour that I wanted and gave it a film grain effect and then saved it for web and devices. Back in css I put in:
background: url(../images/beigebackground.png);
I then went on to repeat the background on the x and y axis.
I went on to give the header a height and background colour. I initially used the colour as a guide so that I could see on the page, however once I had put in my title and horizontal navigation I got got rid of the background by putting in this; /*background: #ffffff;*/. After that I then went on to style the border. As a <div> in html there was nothing when I opened it up in Safari, so in css I gave it height of 240px this is so that the title would fit in between. I gave it a width of 494px, I did experiment with different measurements before deciding on this one, I then gave it a border width of 8px as I didn't want the border to be overly thick. I chose a colour for it and gave it a border style of solid.
After styling the border I then moved on to the title, I gave it the same height and width as the border and positioned it so that it was on the left hand side of the page.
I then went on to style each word. I wanted each one to have a different font and style so I needed to individually sort them out. You can see in the screen shot above how I styled the first two words in my title.
This is how I styled the other two words of my title. For the word 'web' I needed to rotate it, you can see the code for it above.
This bit of styling is for the horizontal navigation bar. I didn't need to do much styling apart from positioning it so that it was on the right hand side and had a background image which I had saved in the images folder.
Above you can see the styling for the text of the horizontal navigation. I changed the font, positioning, line spacing and margin.
I then moved on to style my vertical navigation.
I did about the same amount of styling as I did with the horizontal navigation.
After styling the navigation and header, I then moved on to the main content. You can see in the screen shot this is the styling for the bunting image.
This bit of styling is for the lines on the pages which are used as of part of the navigation.
I then moved to style the images that I put in to page, all I needed to do here was just sort out the positioning and margin of each one.
This bit of styling are the for the content boxes for each section. I gave them the same coloured background, margin and positioning, however even though they have the same width the height of some of them vary depending on the content inside each one.
I moved to sort out the headings for each section. I used the same bit of code as I used for the heading to rotate them slightly. I changed the font size, colour and the font to 'Cooper Black'
This bit of styling is for the panoramic pictures that I wanted as an image switcher.
This bit of styling is for the images which are in the Illustrator section of my site.
I wanted to position my video in the centre of the section of 'Final Cut', so I experimented with the left margin and the top margin to that it was at the bottom of the box and I could then put text above it.
The final bit of styling is for the footer. I changed the colour of it and changed the positioning of the text that was in it.
Subscribe to:
Posts (Atom)