Wednesday, 23 May 2012
coding.
I started coding my site quite early on completing many versions and updating my ideas. I had completed 3 pages when I realised that I had gone about it the wrong way. Convincing myself that my layout would work best in a table of columns and rows was not the greatest thing to do. After a freak out I started again (with some much appreciated help) and found the process a lot easier the second time around. Everything made a lot more sense and fit together a lot easier.
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="Css/stylev3.css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Inside</title>
</head>
<body>
<center>
<table>
<td align="left" valign="top" style="border-right:dashed thin #CCCCCC">
<div id= "nav">
<ul id="nav">
<li><a href="#"><img src="Images/Insidelogo.jpg" width="142" height="" alt="logo"> <p></p>
<p></p>
<div id= "bar">
<li><a ref="#"><img src="Images/M.png" width="28" height="23" alt="M">MAGAZINE</a></li>
<li><a href="#"><img src="Images/N.png" width="28" height="23" alt="N">NEWS</li></a>
<li><a href="#"><img src="Images/W.png" width="28" height="23" alt="W">WORKSPACE</a></li>
<li><a href="#"><img src="Images/S.png" width="28" height="23" alt="S">SHOWCASE</a></li>
</a></li><a href="#"><img src="Images/about.png" width="28" height= "23" alt= "about">ABOUT US</li></a></li>
<li><a href="#"><img src="Images/subscribe.png"width="28" height= "23" alt= "subscribe">SUBSCRIBE</a></li>
</ul>
</ul>
</div>
</div>
<table><td valign="middle" align="left" width="80" <div id= "ad">
<h1>featured sponsor</h1><img src="Images/CottoMilan.png">
<h2>COTTO in Milan</h2>
<p> Thailand based tile and sanitaryware brand COTTO is set to launch its Marmo Granito-Paradiso collection at 2012 Milan Furniture Fair.</p></div></td></table>
</td>
</td>
<td align="center" valign="top">
<table>
<tr><td align="center"> <div id= "feature">
<img src="Images/inside-cover.png" width="438" height="319" alt="cover"/>
</div>
</td></tr>
<tr><td align="left" style="border-bottom:thin solid #CCC"> <p><b>inside magazine 70:</b> working for solutions//</p></td></tr>
<!--third row-news1-->
<tr>
<td align="center">
<table>
<td valign="top" style="border-right:thin dashed #CCC" align="left" width="120">
<p>holick sea resort, sweden</p></td>
<td valign="top"><img src="Images/holick-resort-1.jpg" width="328" height="209" alt="holick"/> </td>
</table></td>
</tr>
<!--thirdrow-news1end-->
<!--third row-news2-->
<tr>
<td align="center">
<table>
<td valign="top" style="border-right:thin dashed #CCC" align="left" width="120"><p>
500 bourke st</p></td>
<td valign="top" align="left"><img src="Images/500bourkest.jpg" width="328" height="209" alt="500bourke"/></td>
</table></td>
</tr>
<!--thirdrow-news2end-->
<!--third row-news3-->
<tr>
<td align="center">
<table>
<td valign="top" style="border-right:thin dashed #CCC" align="left" width="120"><p>
jamie's italian</p></td>
<td valign="top" align="left"><img src="Images/jamiesitalian.jpg" width="328" height="209" alt="jamies"/></td>
</table></td>
</tr>
<!--thirdrow-news3end-->
<!--third row-news3-->
<tr>
<td align="center">
<table>
<td valign="top" style="border-right:thin dashed #CCC" align="left" width="120"><p>sydney opera house</p> <p>immortalised in lego</p>
</td>
<td valign="top" align="left"><img src=
"Images/operahouse.jpg" width="328" height="209" alt="opera"/></td>
</table></td>
</tr>
<!--thirdrow-news3end-->
</tr>
</table>
</td>
</table>
</center>
</body>
</html>
Friday, 18 May 2012
User Testing.
I created a range of scenarios to complete user testing on my website:
1-
You want to call the publisher
of the magazine (Niche Media) to ask them about a featured designer.
Where would you look for this
information?
2-
You want to find what date the
article for the ‘2012 Dulux Colour Awards’ was posted.
Where would you look for this
information?
3-
You want to find the author of
the ‘in profile: coco reynolds’ article, to find more articles written by him.
Where would you look for this information?
Where would you look for this information?
I asked three people to navigate my 'site' (mock ups printed out). This exercise proved to be quite valuable as it forced me to look at the my design from the perspective of the user. Two out of the three people tested struggled to understand the layout of the 'News' section and where the date was placed. This led to me altering my design for a more user friendly experience.
Tuesday, 8 May 2012
Monday, 7 May 2012
Forms.
The more I learn about web the less intimidating it becomes.
Creating this layout tested my skills and knowledge and showed me that I actually do know a bit about web.... the next assignment doesn't seem so scary after all!
Tuesday, 1 May 2012
Table exercise.
Table exercise CSS:
@charset "UTF-8";
/* CSS Document */
<div class="forums">
<table cellspacing="0">
...
</table>
</div>
table {
border-collapse:collapse;
}
body {
margin: 0;
padding: 30px;
font-family: "Lucida Grande", Arial, sans-serif;
font-size: small;
background: #b5b5b5;
}
a { color: #77985C; }
.forums {
background: #919191;
}
table {
position: relative;
top: -4px;
left: -4px;
width: 100%;
border: 1px solid #000;
background: #fff;
}
table caption {
margin: 0;
padding: 8px 20px;
text-align: left;
border: 1px solid #000;
border-bottom: none;
background: #fff;
}
table th, table td {
margin: 0;
padding: 8px 20px;
text-align: center;
border-bottom: 1px solid #b5b5b5;
}
table th { color: #999;
}
table .name {
text-align: left;
}
table tr { background: #e6e6e6;
}
table tr.alt { background: #f1f1f1;
}
table td a { display: block; font-weight: bold;
}
/* CSS Document */
<div class="forums">
<table cellspacing="0">
...
</table>
</div>
table {
border-collapse:collapse;
}
body {
margin: 0;
padding: 30px;
font-family: "Lucida Grande", Arial, sans-serif;
font-size: small;
background: #b5b5b5;
}
a { color: #77985C; }
.forums {
background: #919191;
}
table {
position: relative;
top: -4px;
left: -4px;
width: 100%;
border: 1px solid #000;
background: #fff;
}
table caption {
margin: 0;
padding: 8px 20px;
text-align: left;
border: 1px solid #000;
border-bottom: none;
background: #fff;
}
table th, table td {
margin: 0;
padding: 8px 20px;
text-align: center;
border-bottom: 1px solid #b5b5b5;
}
table th { color: #999;
}
table .name {
text-align: left;
}
table tr { background: #e6e6e6;
}
table tr.alt { background: #f1f1f1;
}
table td a { display: block; font-weight: bold;
}
Things to remember:
Collapse the table using <table cellspacing="0"> (or the border-collapse property), and move all other borders, background, and spacing to the style sheet.
Use the <caption> element to properly assign a title to the table.
Use <th> elements to properly denote the table's headers, thus providing better structure and a way to uniquely style those cells with CSS.
Create grid lines by adding borders to the <th> and/or <td> elements.
Add background colors to rows by styling the <tr> elements. Alternate background row colors by adding a class to the desired <tr>.
Subscribe to:
Posts (Atom)