In fourth part I'm going to show very simple online games portal design and also show basic HTML i CSS for it. I'm not going to comment everything because it is not a tutorial about XHTML or CSS. Please remember that the CSS and HTML is web standard compliant but it is very simple - I'm using only one CSS file with no presentational images so the site looks very badly, but because it has good hooks, I think anyone with better graphical skills will get it look better :)
First, I'm going to talk about general site structure:
- two columns: main and sidebox
- search and site name at top
- sidebox on right containing: list of all categories and list of several most popular subcategories (sum of hits of their games)
- main content: index (8 new games, 8 popular), search (results, paginated), new games (list, paginated), popular games (list, paginated), subcategories for category (list, paginated), games for subcategory (list, paginated), game page (three versions depending on game type)
Below is the index.html as HTML mock-up:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Games4All</title>
<link href="main.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Games4All</h1>
<div id="searchbox">
<form action="/search/" method="get">
<p><label for="sid">Search:</label> <input id="sid" name="s" value=""></p>
</form>
</div>
<div class="mainbox">
<div id="newgames" class="gbox">
<h2>New games</h2>
<ol>
<li><a href="/game/test"><img src="img.gif" width=120 height=90 alt="Game image"> Game A</a></li>
<li><a href="/game/test"><img src="img.gif" width=120 height=90 alt="Game image"> Game A</a></li>
<li><a href="/game/test"><img src="img.gif" width=120 height=90 alt="Game image"> Game A</a></li>
<li><a href="/game/test"><img src="img.gif" width=120 height=90 alt="Game image"> Game A</a></li>
<li><a href="/game/test"><img src="img.gif" width=120 height=90 alt="Game image"> Game A</a></li>
<li><a href="/game/test"><img src="img.gif" width=120 height=90 alt="Game image"> Game A</a></li>
<li><a href="/game/test"><img src="img.gif" width=120 height=90 alt="Game image"> Game A</a></li>
<li><a href="/game/test"><img src="img.gif" width=120 height=90 alt="Game image"> Game A</a></li>
</ol>
<p><a href="/new/">More new games</a></p>
</div>
<div id="populargames" class="gbox">
<h2>Popular games</h2>
<ol>
<li><a href="/game/test"><img src="img.gif" width=120 height=90 alt="Game image"> Game A</a></li>
<li><a href="/game/test"><img src="img.gif" width=120 height=90 alt="Game image"> Game A</a></li>
<li><a href="/game/test"><img src="img.gif" width=120 height=90 alt="Game image"> Game A</a></li>
<li><a href="/game/test"><img src="img.gif" width=120 height=90 alt="Game image"> Game A</a></li>
<li><a href="/game/test"><img src="img.gif" width=120 height=90 alt="Game image"> Game A</a></li>
<li><a href="/game/test"><img src="img.gif" width=120 height=90 alt="Game image"> Game A</a></li>
<li><a href="/game/test"><img src="img.gif" width=120 height=90 alt="Game image"> Game A</a></li>
<li><a href="/game/test"><img src="img.gif" width=120 height=90 alt="Game image"> Game A</a></li>
</ol>
<p><a href="/new/">More popular games</a></p>
</div>
</div>
<div class="sidebox">
<div id="categories" class="lbox">
<h2>Categories</h2>
<ul>
<li><a href="/category/A">Action</a></li>
<li><a href="/category/A">Action</a></li>
<li><a href="/category/A">Action</a></li>
<li><a href="/category/A">Action</a></li>
<li><a href="/category/A">Action</a></li>
<li><a href="/category/A">Action</a></li>
<li><a href="/category/A">Action</a></li>
</ul>
</div>
<div id="popsubcats" class="lbox">
<h2>Popular subcategories</h2>
<ul>
<li><a href="/subcategory/A">Action One</a></li>
<li><a href="/subcategory/A">Action One</a></li>
<li><a href="/subcategory/A">Action One</a></li>
<li><a href="/subcategory/A">Action One</a></li>
<li><a href="/subcategory/A">Action One</a></li>
<li><a href="/subcategory/A">Action One</a></li>
</ul>
</div>
</div>
<p id="copyright">This is just a simple demo created by Rafał Jońca and published under GPLv3 license.</p>
</body>
</html>
Below is the CSS file for mock-up containing also CSS for other parts of site. Save the CSS file in public_html folder as main.css.
html { background-color: blue;}
body { width: 760px; margin: 0 auto; background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 12px; padding: 0; position: relative;}
h1, h2, p { margin: 0 1em 1ex 1em; padding: 1ex 0;}
h1 { font-size: 180%; }
h2 { font-size: 140%; }
#searchbox { position: absolute; right: 1em; top: 1em}
#searchbox input { width: 130px;}
p#copyright { text-align: center; clear: both; border-top: 1px dashed gray; padding-top: 5px; }
.mainbox { width: 540px; float: left; border-right: 1px dashed gray; padding-right: 10px; }
.gbox p { text-align: right; padding-right: 1em; clear: both; }
.sidebox { width: 200px; float: right;}
ul, ol { list-style-type: none; padding-left: 2em; margin-left: 0;}
.gbox ol { padding-left: 15px; margin-left: 0 }
.gbox li { width: 120px; height: 125px; padding-right: 10px; padding-left: 0; margin-bottom: 10px; float: left;}
img { border: 0; }
.gbox a, .listbox a { text-decoration: none; }
.gbox p a, .listbox p a { text-decoration: underline; }
#gamebox { text-align: center; }
#gamebox p { text-align: left; }
.listbox ol { padding-left: 45px; margin-left: 0; }
.listbox li { width: 120px; height: 125px; padding-right: 45px; padding-left: 0; margin-bottom: 20px; float: left;}
.listbox p { text-align: left; padding-left: 1em; clear: both; margin-top: 0; margin-bottom: 0;}
.listbox p#paging { text-align: right; padding-right: 1em; clear: both; margin-bottom: 5px; }
Other part of the system, list page and game page do not differ much, so I'll show them in one of the next entries as ready Django templates. Save both files and you can see how main page of portal will look like. Yep, it looks bad but it fully functional (HTML part) and you just have to use more polished CSS :)
0 komentarze:
Post a Comment