Onward Bound Project Synopsis

John Driscoll
LIS 753 Internet Fundamentals and Design

Fall 2013
This document is a compilation of HTML and screen shots from the website I created for LIS 753:
Internet Fundamentals and Design. My website is for a comic written by a friend of mine, DC Chen,
called Onward Bound. Because I do not own the copyright to his comics I was not able to host the
website online myself. DC gave me permission to use the comic for class, but expressed little interest in
viewing the finished product or using it in place of his own website (even though he admits that the
actual website is not very good).
To keep the document at a manageable length, it includes only the Index, News, and Archive pages, and
the CSS document. The website that I turned in included the first ten strips each of the two storylines in
Onward Bound published on the comics actual website, Once Upon a Time in Roughside and The Ballad
of Serrada Blue, as well as archive pages for each storyline and a news page. The thumbnails visible in
the menu link to the Amazon pages of Onward Bounds two published volumes.
I included a screenshot of the full page display in my browser (Firefox, although I tested the pages in
Chrome and Internet Explorer as well for class), as well as the HTML for each. The other pages I did not
include were basically similar except for minor differences such as which comics are linked by the Next
and Previous buttons, and of course which comic is displayed.
John Driscoll
Fall 2013
Index.HTML:
John Driscoll
Fall 2013
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<head>
<link href='http://fonts.googleapis.com/css?family=Alegreya:700' rel='stylesheet' type='text/css'>
<title>Onward Bound</title>
<link href="onwardbound2.css" type="text/css" rel="stylesheet">
</head>
<body>
<a name="top">
<center><a href="index.html"><img src="onwardbound-logo.jpg" alt="Onward Bound: Our Story Begins
as Most Stories Do, with the Words Once Upon a Time"></a></center>
<p> </p>
<hr>
<p> </p>
<p> </p>
<div id="container1">
<table id="table1">
<tr><td><a href="news.html">News</a></td></tr>
<tr><td> </td></tr>
<tr><td><b>Roughside</b></td></tr>
<tr><td> </td></tr>
<tr><td><a href="gamesofchance-latest.html">Latest Comic</a></td></tr>
<tr><td> </td></tr>
<tr><td><a href="gamesofchance-0001.html">First Comic</a></td></tr>
<tr><td> </td></tr>
<tr><td><a href="roughside-archive.html">Archive</a></td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
John Driscoll
Fall 2013
<tr><td><b>The Ballad of Serrada Blue</b></td></tr>
<tr><td> </td></tr>
<tr><td><a href="deadmansstand-latest.html">Latest Comic</a></td></tr>
<tr><td> </td></tr>
<tr><td><a href="deadmansstand-001.html">First Comic</a></td></tr>
<tr><td> </td></tr>
<tr><td><a href="serradablue-archive.html">Archive</a></td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td><b>Onward Bound in Print!</b></td></tr>
<tr><td> </td></tr>
<tr><td>Buy Roughside Book 0: Games of Chance</td></tr>
<tr><td><a href="http://www.amazon.com/Onward-Bound--Once-RoughsideChapter/dp/1461104610/ref=sr_1_1?ie=UTF8&qid=1306153415&sr=8-1" target="_blank"><img
src="once-upon-time-in-roughside-cover.jpg" width="80" height="120" border="0" alt="Roughside Book
0: Games of Chance"></a></td></tr>
<tr><td> </td></tr>
<tr><td>Buy Serrada Blue: Dead Man's Stand</td></tr>
<tr><td><a href="http://www.amazon.com/dp/1475064322/ref=cm_sw_su_dp" target="_blank"><img
src="serrada-blue-dead-mans-stand-cover.jpg" width="80" height="120" border="0" alt="Serrada Blue:
Dead Man's Stand"></a></td></tr>
</table>
</div>
<div id="container2" style="position: relative; left: 0; top: 1;">
<table id="table2" align="center" cellspacing="5">
<tr>
<td colspan="8" align="center">The Ballad of Serrada Blue: Dead Man's Stand - Page 1</td>
</tr>
John Driscoll
Fall 2013
<tr>
<td> </td>
<td><< First</td>
<td> </td>
<td>< Prev</td>
<td> </td>
<td><a href="deadmansstand-002.html">Next ></a></td>
<td> </td>
<td><a href="deadmansstand-latest.html">Latest >></a></td>
</tr>
<tr>
<td colspan="8"><img src="./BalladOfSerradaBlue/2011-05-01-serradablue-deadmansstand-001.gif"
alt="comic page"></td>
</tr>
<tr>
<td> </td>
<td><< First</td>
<td> </td>
<td>< Prev</td>
<td> </td>
<td><a href="deadmansstand-002.html">Next ></a></td>
<td> </td>
<td><a href="deadmansstand-latest.html">Latest >></a></td>
</tr>
</table>
</div>
John Driscoll
Fall 2013

All works on this page copyright and property of Darrick Chen, 2005-2013. All rights reserved.

<a href="#top">Back to Top ↑</a>

</div>
</body>
</html>
John Driscoll
Fall 2013
News Page:

<head>
John Driscoll
Fall 2013
</head>
<body>
<a name="top">
<p> </p>
<hr>
<p> </p>
<p> </p>
<table id="table1">
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
John Driscoll
Fall 2013
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
</table>
</div>
<h1>News</h1>
<p> </p>
<p>December 12, 2013</p>
<p> </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec adipiscing, ante in vestibulum viverra,
ligula enim varius velit, vitae ultricies justo nunc et augue. Mauris lectus leo, commodo sed velit vitae,
dictum lacinia lacus. Morbi consequat odio vel venenatis aliquam. Nam bibendum, risus sit amet
malesuada varius, velit turpis imperdiet velit, id tristique lacus mi vitae felis. Aenean lobortis scelerisque
dui sit amet congue. Curabitur sed pretium metus. Aliquam tempus malesuada interdum. Suspendisse
venenatis metus at ante mattis posuere. Nullam non vehicula neque.</p>
John Driscoll
Fall 2013
<p> </p>
<p>Vestibulum sodales nisl id euismod fermentum. Vestibulum nulla augue, tempus et purus nec,
pretium scelerisque urna. Morbi cursus consectetur congue. Aliquam eu posuere nisl. Curabitur eu
consectetur ligula. Morbi ut turpis interdum, mattis elit feugiat, auctor ligula. Cras eleifend commodo
mattis. Aenean congue pharetra rutrum. Fusce mollis nunc at dapibus bibendum. Suspendisse vel
accumsan augue, at laoreet tortor. Sed mauris orci, pretium et fringilla aliquet, laoreet eu nulla.</p>
<p> </p>
<p>Suspendisse consectetur magna pretium, dictum diam vitae, tincidunt lectus. Suspendisse
pellentesque urna eu ante facilisis consectetur. Maecenas fringilla metus dignissim, convallis libero
mollis, tempor purus. Proin sed orci pulvinar, pharetra ipsum vel, semper ipsum. Maecenas fermentum
libero lacus, nec ultrices orci bibendum vitae. Ut sed dui sapien. Vivamus accumsan dictum quam auctor
consectetur. </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>Aenean porta porttitor mauris, in blandit eros congue ut. Phasellus libero tellus, aliquet non erat ut,
sodales scelerisque leo. Donec et aliquet tortor. Etiam posuere dignissim suscipit. Praesent id tincidunt
libero. Fusce vel aliquam diam. Integer quam felis, ornare in posuere eu, molestie quis massa. Phasellus
ultricies, odio eget lobortis tincidunt, metus arcu molestie mauris, in pellentesque tortor dolor vitae
metus. Sed eros tortor, volutpat sed nisi vitae, congue tincidunt libero. Aenean non mi iaculis, euismod
ipsum vitae, accumsan neque. Mauris sit amet tincidunt tortor, quis porta odio. Integer sit amet odio
erat.</p>
<p> </p>
<p>Donec consectetur in ipsum vitae molestie. Suspendisse potenti. Duis hendrerit facilisis massa, in
tempus sem iaculis ac. Donec tincidunt elit nunc, et consequat magna ullamcorper ut. Nunc fringilla
mauris velit, iaculis sollicitudin libero gravida ut. Morbi eleifend adipiscing lorem, eu tristique dui lacinia
at. Pellentesque et odio et tortor sodales gravida. Duis at velit ullamcorper, consequat mauris eget,
congue tortor. Nam vel dictum elit. Integer sit amet felis in est mattis condimentum. In fringilla ante nec
eros aliquam porttitor. Duis dolor enim, pulvinar sit amet quam at, ultrices convallis nibh.</p>
<p> </p>
<p> </p>
<p> </p>
John Driscoll
Fall 2013
<p> </p>
<p>Here is the news page! This is where news about the Onward Bound comic or the artist will be
posted.</p>
</div>


</div>
</body>
</html>
John Driscoll
Fall 2013
Archive Page The Ballad of Serrada Blue:
John Driscoll
Fall 2013
<head>
</head>
<body bgcolor="#00adee">
<a name="top">
<p> </p>
<hr>
<p> </p>
<p> </p>
<table id="table1">
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
John Driscoll
Fall 2013
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
</table>
</div>
<h1 align="center">The Ballad of Serrada Blue</h1>
<table id="table2" align="center">
<tr><td> </td></tr>
<tr><td> </td></tr>
John Driscoll
Fall 2013
<tr><td>Dead Man's Stand</td></tr>
<tr><td> </td></tr>
<tr><td><a href="deadmansstand-001.html">Page 1</a></td></tr>
</table>
</div>


</div>
</body>
</html>
John Driscoll
Fall 2013
Onwardbound2.css:
#container1
{
width:150px;
height:1020px;
margin-top:0px;
margin-right:60px;
margin-bottom:0px;
margin-left:120px;
background:#ffffff;
padding:15px;
float: left;
}
#container2
{
width:900px;
height:1250px;
margin-left:00px;
margin-bottom:00px;
font-family: 'Alegreya', serif;
font-size: 28px;
background:#ffffff;
background-image: url(blank-wanted-poster2.jpg);
padding:0px;
float: left;
}
John Driscoll
Fall 2013
#container3
{
width:900px;
height:80px;
margin-top:50px;
margin-left:20%;
margin-bottom:20px;
font-family: Courier New;
font-size: 14px;
text-align: center;
padding:10px;
float: left;
}
p
{
font-size: 24px;
line-height: 20px;
text-align: center;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 25px;
padding: 0px;
text-indent: -25px;
}
John Driscoll
Fall 2013
h1
{
font-size: 50px;
font-weight: normal;
line-height: 56px;
text-align: center;
margin: 0px;
padding: 0px;
color: black;
}
h3
{
font-family: Georgia;
font-size: 14px;
font-weight: normal;
line-height: 20px;
text-transform: uppercase;
text-align: center;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding: 0px;
letter-spacing: 1px;
}
John Driscoll
Fall 2013
body
{
background-color: #00adee;
}
table1
{
width: 150px;
padding: 5px;
margin-left: 0px;
border: 2px;
border-style: dotted;
border-color: black;
font-family: Georgia;
font-size: 12pt;
background: #ffffff;
float: left;
}
table2
{
font-size: 36px;
float: center;
padding: 10px;
}
a:link
{
color: black;
John Driscoll
Fall 2013
}
a:visited
{
color: darkred;
}
a:hover
{
background: black;
color: white;
}

Onward Bound Project Synopsis

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Onward Bound Project Synopsis

Загружено:

Авторское право:

Доступные форматы

John Driscoll

LIS 753 Internet Fundamentals and Design

<div id="container3" style="position: relative; left: 0; top: 0;">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

Вам также может понравиться