In order for my website to exist, I used Adobe Dreamweaver to hand code it from scratch. In lectures it was mentioned that we could use existing framework to construct a responsive site, although I wanted to be able to create my own, and I believe that using this site as a template I could create other sites using this as a framework, and it will be responsive as well. Before I started this construction,  I had already made a responsive website for another assignment after having learned a lot from lectures before.

This can be seen at: http://www.danieltooley.com

As you can see I also purchased my own url and when this website is finished I will get about adding this site into my portfolio.

To begin with I created my folders:

images
js
css

Then I created three blank html documents and a stylesheet called:

index.html
location.html
events.html
style.css

I needed to create multiple divs to incorporate everything I wanted to put into my website. This ended up looking like this:

<!DOCTYPE html>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>

<title>RIDGEWELL PARK CIRCUIT</title>

<link rel=”stylesheet” href=”css/nivo-slider.css” type=”text/css” media=”screen” />

</head>

<body>

<section id=”leftside”>

</section>

<section id=”rightside”>
<img id=”rightim” src=”images/tyre5.png” width=”250″ height=”250″ alt=”tyre” style=”-webkit-transform: rotate(0deg);”/>
</section>

<div id=”container”>

<header>

<div id=”logo”>

<div/>

<div id=”title”>

</div>

</header>

<div class=”gap”>
</div>

<nav>

<div id=”nav1″>
</div>

<div id=”nav2″>
</div>

<div id=”nav3″>
</div>

</nav>

<div class=”gap”>
</div>

<div id=”hero”>

</div>

<div id=”left”>

<aside>

</aside>

<div id=”aside2″>

</div>

<div id=”aside3″>

</div>

<div id=”aside4″>

</div>

</div>

<div id=”right”>

<div id=”article1″>

</div>

<div id=”article2″>

</div>

<div id=”article3″>

</div>

<div id=”article4″>

</div>

</div>

<div class=”gap”>
</div>

<footer>

<P>Created by Daniel Tooley &copy;2013</P>

</footer>

</div>

</body>

</html>

This gave me a header, a footer, a container containing these as well as 8 content divs separated in two left and right divs in the container as well. I also had two divs either side of the container where I want to include some jquery animation on an image, but undecided what this will be yet. Finally, there was a hero div which I will use to incorporate a slider and/or another hero object.

Once I had this, I went into the css document and styled it to make it responsive and look like my design. I wanted to make sure it was responsive before I properly styled it and make sure stuff worked as I put it in rather than doing it all and realising loads of stuff isn’t responsive or not compatible at all. Basically I wanted to go through one element at a time and gradually get a finished website.

My next stage will be to style each div individually and make it look nice!

Advertisements