实用小知识
文章浏览次数: 634

前面两篇文章讲到了环境搭建和模板站点搭建，这里还是给大家贴上链接，以便前后多了解，

使用html+css+mysql+php来制作动态网站详细操作 – 01环境搭建和工具

使用html+css+mysql+php来制作动态网站详细操作 – 02本地模板站点搭建

那么在这篇文章，就制作一个门户网站，用来向外界展示个人或者公司的的成果及联系方式等，这里制作的是一个纯静态的HTML网页。

网站前期策划：

网站设计需求

定义网站结构

网站风格定位

网站预览

在dreamweaver中创建网站,站点→新建站点，在弹出的窗口中设置站点名称，同时指定网站储存位置

点击服务器设置项，指定服务器信息为“本地网络”，设置服务器路径为网站文件夹。在设置完成后单击“保存”按钮，完成网站的创建。

设计网站首页

网站布局结构，网站的整体结构由logo栏、导航栏、内容区域和页脚部分组成。由于HTML的div元素默认时会以块方式呈现，因此可以想象，对于这样的布局方式只需要排列几个div元素即可。为了实现重用，将首先创建一个模板页，既可以让其他页面重用整体的结构设计，又能简化维护更新工作。

→单击主菜单文件 | 新建菜单项，从弹出的窗口中选择“空模板 | HTML模板 | 无”项，单击创建按钮，DW在网站目录下创建一个templates的文件夹，使用DW的保存功能将模板文件命名为sitetemplate.dwt, 保存到该文件夹中。

好了给大家贴上，

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>
江南未羊- 网站建设，seo，电商模板单间和功能教程</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<meta name="keywords" content="江南未羊、网页设计、seo、电商站点搭建、后台功能介绍、opencart">
<meta name="description" content="江南未羊 - IT技术社区,网页设计、网站建设系列web技术教程,服务器、浏览器语言学习。中英文SEO优化、电商模板网站安装及后台功能详细操作。" >
<!-- TemplateEndEditable -->
<link href="../css-content.css" rel="stylesheet" type="text/css">
</head>

<body>
<!-- 顶部信息区，包含logo和公司简介与联系方式 -->
<div id="top-information">
<div id="logo"><img src="http://www.sweetdan.com/wp-content/uploads/2018/09/cropped-logo_db-2.png" width="121" height="30" alt="江南未羊 - 网站建设" ></div>
<div id="top-information-home">
<a href="index.html">首页</a>
<br/>
<br/>
啦啦啦，我是画画的小行家，大风大雨都不怕！
</div>
<div id="top-information-mail">
邮箱：miemiesd@163.com
</div>
</div>
<!--导航模板区-->
<div id="navplace"><!-- TemplateBeginEditable name="navarea" -->navarea<!-- TemplateEndEditable -->
</div>
<!--主要内容区-->
<div id="master-content"><!-- TemplateBeginEditable name="contentarea" -->contentarea<!-- TemplateEndEditable -->
</div>
<!--页脚区域-->
<div id="footer">
江南未羊出品，版权所有 支持原创
<div>&nbsp;</div>
</div>
<div id="footer-sub">
<ul class="nav">
<li><a href="index.html">首页</a></li>
<li><a href="about-us.html">关于我们</a></li>
<li><a href="content.html">主要课程</a></li>
<li><a href="partners.html">合作伙伴</a></li>
<li><a href="contact.html">联系我们</a></li>
</ul>
</div>
</body>
</html>

下面就可以使用CSS控制布局显示，

在网站中定义一个名为css-content.css的CSS文件，在该文件中根据页面的布局的区域定义了多个CSS样式，用来控制具体的页面元素的显示。

首先是对logo显示区的显示样式，该div中包含了多个嵌入的子div元素，通过使用CSS属性left和right来控制这些div的具体呈现位置，代码如下吧，

/*logo区容器div的CSS样式*/
#top-information {
height:112px
margin-left:auto;
margin-right:auto;
margin-bottom:3px;
color:#999999;
font-size:.85em;
position:relative;
width:950px
}
/*放置logo图像的div的显示样式*/
#logo {
position:absolute;
top:3px;
left:16px;
height:30px;
padding:.1em 0 .2em 0;
font-variant:small-caps;
}
/*logo中的链接文本的显示样式*/
logo a {
	color:#4A6BB3;
	text-decoration:none;
}
/*链接的首页的链接和文字的显示样式*/
#top-information-homt {
	text-align:left;
	border-bottom:1px dashed #CACACA;
	position:absolute;
	top:0;
	right:25.5%;
	height:2em;
	width:20%;
	font-size:9pt;
	padding:0 1.5% 0 0;
}
/*联系电话显示区的样式*/
#top-information-phone {
	text-align:center;
	border-left:1px dashed #CACACA;
	position:absolute;
	top:0;
	left:75%;
	font-size:9pt;
	height:100%;
	padding:0 0 0 2%;
}
/*容器区域的显示样式*/
	#mastercontent，#navplace{
		margin:0px auto;
		width:950px;
	}

footer区的CSS定义，

/*页脚版权信息区容器的div样式*/
#footer {
/*显示背景图案*/
background:#608fc8 url(images/bg-nav.png) bottom left no-repeat;
margin-top:3px;
margin-left:auto;
margin-right:auto; /*使之居中显示*/
width:950px; /*div宽度*/
padding:.8em 0 1em 0px;
position:relative;
color:#a9c0db;
font-size:9pt; /*版权信息字体*/
}
/*版权区内嵌的div元素的显示样式*/
#footer div {
background:#4b6cb5 url(images/bg-nav-side.png) bottom right no-repeat;
width:25%;
_width:25.5%;
position:absolute;
top:0;
right:0;
padding:.8em 0 1em 0;
}
/*页脚链接的样式*/
#footer a:link,
#footer a:visited {
color:#FFFFFF;
text-decoration:none;
}
#footer a:hover {
color:#D4E7F8;
text-decoration:none;
}
#footer a:active {
color:#FFFFFF;
}
/*页脚链接区容器的样式*/
#footer-sub{
margin 0px auto;
width:950px; 
}
/*页脚链接区导航的ul和li的样式*/
#footer-sub .nav { 
text-align:center; padding-bottom:30px;
}
#footer-sub .nav li { 
display:inline;
font-size:9pt;
}
/*导航链接的样式*/
#footer-sub .nav li a { 
color:#000000; padding:0 20px 0 20px;
}

CSS+DIV导航结构

在构建好模板之后，就可以在DW中引用模板来创建网站首页了，单击DW主菜单中的文件| 新建 窗口，弹出“新建文档”对话框，从对话框中选择模板中的页，在“站点”项目列表中选择当前网站，然后找到新创建的sitetemplate模板。选择完成后，单击“创建”按钮，使用当前模板创建一个新的网页，命名为index.html.

下面就是定义各个模块的内容和样式。这里给大家贴出一个静态网站的资料。供大家交流学习。

about-us

consulting

contact-us

css-content

index

partners

solutions

模板页文件贴不了，参考作者写的模板页即可。

发表评论