3 (. 3.2): (header), (navigation), (form) (footer).
. 3.2
Dreamweaver, :
1. Denwer 3 C:/WebServers. C:/WebServers/home/localhost/www c
2. Adobe Dreamweaver CS3 Sites Manage sites
3. New Site Definition. C:/WebServers/home/localhost/www/
4. ( 2):
2.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>
<div id="container">
<!-- -->
<div id="header"><img src="img/header.jpg" width="900" height="160"></div>
<div id="wrapper">
<div id="content"> </div>
</div>
</div>
<!-- -->
<div id="navigation">
1
<div>
<!-- -->
<div id="extra"> </div>
<!-- "" -->
<div id="footer">
<p> : , </p>
</div>
</div>
</body>
</html>
1.C index.php;
2. php-. blocks, ;
3. php blocks header.php, navigation.php, form.php, footer.php;
4. Dreamweaver index.php <div></div> .
5. <div> php- include (" "), ( 3):
3. php-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> </title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>
|
|
|
<div id="container">
<!-- -->
<?php include ("blocks/header.php");?>
<div id="wrapper">
<div id="content">
</div>
</div>
<!-- -->
<?php include ("blocks/form.php");?>
<!-- -->
<?php include ("blocks/navigation.php");?>
<!-- "" -->
<?php include ("blocks/footer.php");?>
</div>
</body>
</html>
include :
include $fileName;
$fileName - , . . , HTML-, PHP. : , . HTML- "" PHP-, web-.
1. . , (CSS). style.css.
2. style.css ( 4):
4. style.css
html,body{margin:0;padding:0}
body{background-image: url(img/fone-tr.png);
background-color: #f7fcf8;margin:0;padding:1em 0;font-family:"Lucida Grande","Lucida Sans Unicode",Verdana,Helvetica,Arial,sans-serif;font-size:small}
p{margin:0 20px 10px}
a{color: #981793}
hr{clear:both;height:1px;color:#ccc;background:#ccc;border:none}
form {margin:10px 2px}
textarea {width:180px}
#textfield {
background: #FDF5E6;
border: 1px inset #660000;
}
#button {
background: #FDF5E6;
border: 1px outset #660000;
color: #000;
font-weight:bold; }
h2{margin:0 20px 10px;padding:0.5em 0;letter-spacing:-0.1ex;font-size:1.2em}
div#top {background:#AE202B; text-align:center;padding: 5px 0px;font-weight:bold}
div#topicwhite {padding:10px 5px;border-top: 2px dashed #FF8539}
div#header h1{height:80px;line-height:80px;margin:0;
padding-left:10px}
div#container{background: #FF8539;text-align:left;margin:0 auto;width:900px;border:1px solid #660000; height:auto}
div#wrapper{float:left;width:100%}
div#footer{background: url(img/bg-footer.png);color: #FFF}
div#footer p{margin:0;padding:5px 10px}
div#container{width:900px;margin:0 auto}
div#content{background:#FFF;margin: 0 200px 0px 205px;min-height:370px}
div#navigation{background:#FF8539;float:left;width:200px;margin-left:-200px}
div#extra{float:left;width:200px;margin-left:-900px}
div#footer{clear:both;width:100%}
img {float: left; padding:0px 10px 0 0}
1. . cssverticalmenu.css. ( 5):
5. cssverticalmenu.css
.glossymenu,.glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
|
|
|
width: 200px; /*WIDTH OF MAIN MENU ITEMS*/
border: 1px solid black;
}
.glossymenu li{
position: relative;
}
.glossymenu li ul{ /*SUB MENU STYLE*/
position: absolute;
width: 130px; /*WIDTH OF SUB MENU ITEMS*/
left: 0;
top: 0;
display: none;
filter:alpha(opacity=100);
-moz-opacity:1;
}
.glossymenu li a{
background: white url(glossyback.gif) repeat-x bottom left;
font: bold 12px Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
}
.glossymenu.arrowdiv{
position: absolute;
right: 2px;
background: transparent url(arrow.gif) no-repeat center right;
}
.glossymenu li a:visited,.glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
background-image: url(glossyback2.gif);
}
/* Holly Hack for IE \*/
* html.glossymenu li { float: left; height: 1%; }
* html.glossymenu li a { height: 1%; }
/* End */
1) , JavaScript. cssverticalmenu.js. ( 6):
6. cssverticalmenu.js
var menuids=new Array("verticalmenu") //Enter id(s) of UL menus, separated by commas
var submenuoffset=-2 //Offset of submenus from main menu. Default is -2 pixels.
function createcssmenu(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
var spanref=document.createElement("span")
spanref.className="arrowdiv"
spanref.innerHTML=" "
ultags[t].parentNode.getElementsByTagName("a")[0].appendChild(spanref)
ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName("ul")[0].style.left=this.parentNode.offsetWidth+submenuoffset+"px"
this.getElementsByTagName("ul")[0].style.display="block"
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul")[0].style.display="none"
}
}
}
}
if (window.addEventListener)
window.addEventListener("load", createcssmenu, false)
else if (window.attachEvent)
window.attachEvent("onload", createcssmenu)
2) JavaScript index.php. <head> ( 7):
7. cssverticalmenu.js
<link rel="stylesheet" type="text/css" href="cssverticalmenu.css" />
<script type="text/javascript" src="cssverticalmenu.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
