Creating a simple Manga Site

I am using the  manga WORKING. This is the output of this project




For this tutorial you need to know :
- HTML
- CSS
- Javascirpts

To download this full project Click Me

FIRST STEP:
Lets start with our HTML code. Open your notepad or dreamweaver and paste this code below. 

<html>
<head>
<title> Working </title>
<style type="text/css">

body{
background-color:#e8e8e8;
background: url(images/bg.png);
}

div#main{
background:#ffffff;
width: 900px;
height: 1582px;
box-shadow: 0 0 3px 3px #888;
}

div#cover{
background: url(images/head.jpg);
height:506;
border: 4px solid #ffffff;
}

div#home{
background:url(images/home.jpg);
height:1032px;
margin-top:508px;

}

div#down{
background: url(images/down.jpg);
width:892px;
height:38;
margin-top:90px;
margin-left:0px;
}

.button-link {
    font-family:Arial;
    text-decoration:none;
    padding: 10px 15px;
    background: #E4287C;
    color: #FFF;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: solid 2px #ffffff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    transition-duration: 0.2s;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}
.button-link:hover {
    background: #b85768;
    border: solid 1px #ffffff;
    text-decoration: none;
}
.button-link:active {
    -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
    background:  #b85768;
    border: solid 1px #ffffff;
}



</style>
</head>


<body>
<center>
<div id="main">
<div id="cover">
<div id="home">

<a class="button-link" href="Chapters/Episodes/1.html" style="vertical-align:-935px;"> Read Manga Now!</a>

<div id="down">


</div>

</center>
</body>
</html>

save this file as index.html . Then create a new folder *name it any name you want, for example in my case, I name my folder as Working.


SECOND STEP:
Lets start on designing, by creating our CSS code.

*{
outline:none;
padding:0px;
margin:0px;
}

body{
background:url('../images/bg.png'); 
}

div#main{
position:relative;
margin: 10px auto;
background:#fff9c9;
top: 500px;
border:4px solid #d91451;
height: 1230 px;
}

div#cover{
background: url('../images/head1.png');
width:900px;
position:relative;
margin:0 auto;
}

div#down{
background: url('../images/down1.jpg');
width:900px;
height:38;
margin-top:1px;
margin-left:-4px;
}


img{
margin:69px;
width:728px;
border:2px solid #000000;
height:1028px;
box-shadow: 0 0 2px 2px #888;
}

select{
border:2px solid #cbc8c7;
-moz-border-radius:5px;
padding:5px;
text-align:center;
}

select1{
border:2px solid #cbc8c7;
-moz-border-radius:5px;
padding:5px;
width:80px;
text-align:center;
right:620px;
}

input{
width:100px;
-moz-border-radius:6px;
padding:2px;
border:2px solid #cbc8c7;
background: -moz-linear-gradient(center top, #f3f3f3, #dddddd);
}

input:hover{
background:#ffcbb3;
}

NOTE: You can change the images. Save this file as style.css. 
THIRD STEP:
Now let's give functions by creating our Javascript

name this file as Volumes.js
function fey2()
{
var a;
a=document.getElementById("456").value;

if(a=='Chapter 1'){
document.location = '1.html';
}
else if(a=='Chapter 2'){
document.location ='2.1.html';
}
else if(a=='Chapter 3'){
document.location ='3.1.html';
}
else if(a=='Chapter 4'){
document.location ='4.1.html';
}
else if(a=='Chapter 5'){
document.location ='5.1.html';
}
else if(a=='Chapter 6'){
document.location ='6.1.html';
}
else if(a=='Chapter 7'){
document.location ='7.1.html';
}
}


function fey3()
{
var a;
a=document.getElementById("457").value;

if(a=='Chapter 1'){
document.location = '1.html';
}
else if(a=='Chapter 2'){
document.location ='2.1.html';
}
else if(a=='Chapter 3'){
document.location ='3.1.html';
}
else if(a=='Chapter 4'){
document.location ='4.1.html';
}
else if(a=='Chapter 5'){
document.location ='5.1.html';
}
else if(a=='Chapter 6'){
document.location ='6.1.html';
}
else if(a=='Chapter 7'){
document.location ='7.1.html';
}
}

this code is for accessing the volume of you're manga

save this file as scroll_link.js
function fey()
{
var a;
a=document.getElementById("123").value;

if(a=='1'){
document.location = '1.html';
}
else if(a=='2'){
document.location = '2.html';
}
else if(a=='3'){
document.location = '3.html';
}
else if(a=='4'){
document.location = '4.html';
}
else if(a=='5'){
document.location = '5.html';}
else if(a=='6'){
document.location = '6.html';
}
else if(a=='7'){
document.location = '7.html';
}
}
function fey1()
{
var a;
a=document.getElementById("124").value;

if(a=='1'){
document.location = '1.html';
}
else if(a=='2'){
document.location = '2.html';
}
else if(a=='3'){
document.location = '3.html';
}
else if(a=='4'){
document.location = '4.html';
}
else if(a=='5'){
document.location = '5.html';
}
else if(a=='6'){
document.location = '6.html';
}
else if(a=='7'){
document.location = '7.html';
}
}

if you notice the two js codes, they are all have the same syntax. Just play with the codes and change the link to your html files to the  pages of your manga.

 HERE IS THE EXAMPLE OF CREATING THE PAGES OF YOUR MANGA

<html>
<link href="../../css/style.css" rel="stylesheet" type="text/css"/>
<script src="../../js/scroll_link.js"></script>
<script src="../../js/Volumes.js"></script>


<head>

</head>
<body>

<!--main layer-->

<div id="cover">
<div id="main">


<table><tr>
<td width="500px">
<select style="width:400px" id="456" onChange="fey2();">
<option>Chapters</option>
<option>Chapter 1</option>
<option>Chapter 2</option>
<option>Chapter 3</option>
<option>Chapter 4</option>
<option>Chapter 5</option>
<option>Chapter 6</option>
<option>Chapter 7</option>
</select>
</td>
<!--end-->

<td>
<form action="1.html">
<input class="btn1" type="submit" value="PREVIOUS"/>
</form>
</td>

<td>Page</td>

<td><select id="124" onChange="fey1();">
<option>...</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
</select>
</td>

<td>of 7</td>
<td><form action="2.html">
<input class="btn2" type="submit" value="NEXT"/>
</form>
</td>

</tr>
<table>
<a href="1.html"><img src="../image/1.jpg"></img></a>

<!--chapter-->

<table style="margin-top:-50px"><tr>
<td width="500px">
<select style="width:400px" id="457" onChange="fey3();">
<option>Chapters</option>
<option>Chapter 1</option>
<option>Chapter 2</option>
<option>Chapter 3</option>
<option>Chapter 4</option>
<option>Chapter 5</option>
<option>Chapter 6</option>
<option>Chapter 7</option>
</select>
</td>
<!--end-->

<td>
<form action="1.html">
<input class="btn1" type="submit" value="PREVIOUS"/>
</form>
</td>

<td>Page</td>

<td><select id="123" onChange="fey();">
<option>...</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
</select>
</td>

<td>of 7</td>
<td><form action="2.html">
<input class="btn2" type="submit" value="NEXT"/>
</form>
</td>

</tr>
<table>
</div>
<!--end of main layer-->

<div id="down">
</body>
</html>

I think that's all you're done creating your project. For more question feel free to contact me or just download the whole project.

Gene Tuesday, April 30, 2013
Labels: , ,

8 comments :

  1. Anonymous said... :
    May 28, 2013 at 10:16 AM

    Next Step please? Do we need to upload those files in Hosting site?

  1. Gene said... :
    May 28, 2013 at 12:55 PM

    it's not necessary, but it's up to you if you want to upload or publish your work online sure you need a hosting site ^_^

  1. Anonymous said... :
    May 28, 2013 at 4:00 PM

    Thank you for answering my question, i really like your blog. Keep it up! :)

  1. Sakura Chan said... :
    August 28, 2013 at 5:15 PM

    How to use this on blogspot?

  1. Unknown said... :
    September 13, 2013 at 11:33 PM

    can i ask a question mam .. i want css only and html .. pls give me a css only and html1 to work for mang pls thanks

  1. Gene said... :
    September 24, 2013 at 10:56 PM

    @merwin: you can download the whole project :) (css and html are included there)

  1. Anonymous said... :
    September 24, 2013 at 11:19 PM

    can you help on my web 2? Pleassseee :(

    -bico :D

  1. Jin said... :
    September 25, 2013 at 9:35 PM

    your so imba maaam :D

Post a Comment

Subscribe to: Post Comments ( Atom )
 
My IT Life © 2011-2014|Gene Rose