Social Network Website Building Tutorial Series Intro and Design Template Production
Listening Video
Learn to build a social networking website from scratch. All new software systems and scripting approaches for 2013. All of the technologies we are using are free and open source(HTML, CSS, JavaScript, PHP and MySQL). This first video in the series runs through a quick introduction then jumps right into constructing your website design template system that passes HTML5 and CSS validation.
Lesson Code
<!-- **** index.php **** -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Web Intersect Social Network Tutorials and Demo</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="style/style.css">
</head>
<body>
<?php include_once("template_pageTop.php"); ?>
<div id="pageMiddle">
</div>
<?php include_once("template_pageBottom.php"); ?>
</body>
</html>
<!-- **** style.css **** -->
body { margin: 0px; font-family: Tahoma, Geneva, sans-serif; font-size: 14px; }
/* PAGE TOP */
#pageTop {
background:url(headerSliver.png) repeat-x;
height: 90px;
}
#pageTop > #pageTopWrap {
width: 1000px;
margin: 0px auto;
height: 90px;
}
#pageTop > #pageTopWrap > #pageTopLogo {
float: left;
height: 90px;
width: 108px;
}
#pageTop > #pageTopWrap > #pageTopRest {
float: left;
height: 90px;
width: 892px;
}
#pageTop > #pageTopWrap > #pageTopRest > #menu1 {
height: 44px;
}
#pageTop > #pageTopWrap > #pageTopRest > #menu1 > div {
margin-top: 8px;
padding: 4px;
text-align:right;
}
#pageTop > #pageTopWrap > #pageTopRest > #menu1 > div > a {
color: #CCC;
text-decoration: none;
}
#pageTop > #pageTopWrap > #pageTopRest > #menu1 > div > a:hover {
color: #C0E73D;
}
#pageTop > #pageTopWrap > #pageTopRest > #menu2 {
height: 44px;
}
#pageTop > #pageTopWrap > #pageTopRest > #menu2 > div {
margin-top: 2px;
padding: 4px;
}
#pageTop > #pageTopWrap > #pageTopRest > #menu2 > div > a {
display: block;
float: left;
color:#CCC;
text-decoration: none;
margin: 0px 16px;
}
#pageTop > #pageTopWrap > #pageTopRest > #menu2 > div > a:hover {
color: #C0E73D;
}
/* PAGE MIDDLE */
#pageMiddle{
width: 1000px;
margin: 0px auto;
height: 900px;
}
/* PAGE BOTTOM */
#pageBottom{
background: #666;
padding: 24px;
font-size: 12px;
color: #CCC;
text-align: center;
}
<!-- **** template_pageTop.php **** -->
<div id="pageTop">
<div id="pageTopWrap">
<div id="pageTopLogo">
<a href="http://www.webintersect.com">
<img src="images/logo.png" alt="logo" title="Web Intersect 2.0">
</a>
</div>
<div id="pageTopRest">
<div id="menu1">
<div>
<a href="#">Sign Up / Log In</a>
</div>
</div>
<div id="menu2">
<div>
<a href="http://www.webintersect.com">
<img src="images/home.png" alt="home" title="Home">
</a>
<a href="#">Menu_Item_1</a>
<a href="#">Menu_Item_2</a>
</div>
</div>
</div>
</div>
</div>
<!-- **** template_pageBottom.php **** -->
<div id="pageBottom">©2013 Web Intersect</div>
0 Response to "Social Network Website Building Tutorial Series Intro and Design Template Production"
Post a Comment