Making My Website

Basic Layout


In lesson we made a basic layout structure, this was helpful with getting started and meant it was just a case of adding some styling and the relevant content.

The screen shot above shows the basic structure that I made, which helped me to get started.

The screen shot above shows some of the html code and some of the css code for the basic structure. 

Homepage

Above is what the homepage looks like and to the left is some of the html code for it that I did in TextWrangler. I am pleased with this outcome, especially as it has been a bit of a struggle to get to grips with the code. In the navigation bar there are links to each of the other pages on the site. I found linking the pages tricky at first, but I got the hang of it with this bit of code: 


<div id="nav">

<ul>
<li><a href="index.html">Home</a></li>
<li><a href="abouttheproject.html">About the Project</a></li>
<li><a href="pressreports.html">Press Reports</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="testimonial.html">Testimonials</a></li>
<li><a href="entrepreneurship.html">Entrepreneurship</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div><!--end nav-->




I also got the hang of adding images as well, again once I got the hang of it I found the bit of code for it fairly simple. On the other hand adding a video was a bit of struggle and the bit of code that I found was a little hard to understand but with a bit of help I managed to get to grips with it get the video to work.



<!-- first try HTML5 playback: if serving as XML, expand `controls` to `controls="controls"` and autoplay likewise -->
<!-- warning: playback does not work on iOS3 if you include the poster attribute! fixed in iOS4.0 -->
<div id="video"><video width="380" height="360" controls>
<!-- MP4 must be first for iPad! -->
<source src="video/SMPORBP.mp4" type="video/mp4" /><!-- Safari / iOS video    -->
<source src="video/SMPORBP.ogg" type="video/ogg" /><!-- Firefox / Opera / Chrome10 -->
<!-- fallback to Flash: -->
<object width="380" height="360" type="application/x-shockwave-flash" data="mediaplayer-5.9-viral/player.swf">
<!-- Firefox uses the `data` attribute above, IE/Safari uses the param below -->
<param name="movie" value="mediaplayer-5.9-viral/player.swf" />
<param name="flashvars" value="controlbar=over&amp;image=video/SMPORBP.jpg&amp;file=video/SMPORBP.mp4" />
<!-- fallback image. note the title field below, put the title of the video there -->
<img src="video/SMPORBP.jpg" width="380" height="360" alt="__TITLE__"
    title="No video playback capabilities, please download the video below" />
</object>
</video>
<!-- you *must* offer a download link as they may be able to play the file locally. customise this bit all you want -->
<p> <strong>Download Video:</strong>
Closed Format: <a href="video/SMPORBP.mp4">"MP4"</a>
Open Format: <a href="video/SMPORBP.ogg">"Ogg"</a>
</p></div>

I was quite daunted when I first saw this bit of code, however after being talked through I found that it wasn't as confusing as I first thought and it turned out I didn't need to change that much of it. I have highlighted in black the parts of the code that I needed to change in order to insert my video. After doing that I placed an image for the footer and title and included a background image for the navigation. Lastly in the header I inserted the image of the post it note, the code for that was:

HTML CODE:

<div id="header">

<img src="images/title.gif" alt="" />

</div><!--end header-->

<div id="logo">

<img src="images/postitnote.png" alt="" />

</div><!--end of logo-->

CSS CODE:

#header {

width: 810px;

height: 140px;

/*background: #5d1351;*/

/*position: absolute;*/

padding: 10px;

margin: 0 auto;

}

About the Project

This is what the 'About the Project' page looks like. For this the code was pretty much the same as the homepage, however I just needed to change the images on the right hand side and the content on the left. To rotate the images, though I needed this piece of code:



transform:rotate(2deg);
-ms-transform:rotate(2deg);
-o-transform:rotate(2deg);
-webkit-transform:rotate(2deg);
-moz-transform:rotate(2deg);



I experimented with the angles, however I found that I didn't really need to change the angle that much because otherwise it wouldn't have look right.




Press Reports

This is what the 'Press Reports' page looks like. While building this page, I changed the design of the page. Instead of having the links on individual pages, I changed it so that it was on one piece of paper with a sketch on the left hand side.

The screen shot above shows the what I changed it to. I think that it works better and I thought that the sketch fitted in with the idea of designing clothing and fashion. To make the links in the middle links, I used the same piece of code as I did for the navigation but I changed the titles.

<ul id="argus">

<li><a href="press_reports1.html">Record PomPom</a></li>

<li><a href="press_reports2.html">Argus PomPom</a></li>

<li><a href="press_reports3.html">PACA Portslade</a></li>

<li><a href="press_reports4.html">BACA Want to Work</a></li>

<li><a href="press_reports5.html">Brighton and Hove Entreprises</a></li>

<li><a href="press_reports6.html">Images</a></li>

</ul>

This is the code for the links in the centre of the page.


Press Reports Pages