网站开发实例（一）
来自CloudWiki
网页的基本布局
- 整个网页共分为标题、主体、尾部三个部分
- 根据我们的设计需求，标题栏又可以分为标题和导航
- 主体部分又可以分为图片区和新闻区
确定基准色调
- 在正式做之前，我们勾勒一下整个网站的布局
- 选择一种网页的主题色，这里我们把主题色设为商职传统的蓝色
- 我们把网页中各个盒子的颜色换成主题的颜色
- 源代码:
<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
*{margin:0;padding:0;}
#layer1{width:100%; height:120px; }
.layer1-1{width:50%; height:120px; background:#074C97;color:white;text-align:center;float:left;}
#layer1-1 h1{line-height:120px;font-size:3em;}
#layer1-2{width:50%; height:120px; background:#074C97;color:white;padding-left:0;float:left;}
#layer1-2 h2{line-height:120px;}
#layer1-3{clear:both;}
#layer2{width:100%; height:680px;color:black;text-align:center;}
#layer2-1{width:100%;height:400px;background:#00FFFF;}
#layer2-2{width:100%;height:280px;padding-left:2%;}
.layer2-2-1{
width:30%;height:250px;
border-style:solid;border-width:medium;
margin:10px;border-color:#074C97;float:left;
}
#layer2-2-empty{clear:both;}
.layer2-2 h2{text-align:left; background:#074C97;color:white;text-align:left;}
.layer2-2 p {font-size:1.5em;line-height:150%;}
#layer3{width:100%; height:80px; background:#074C97;color:white;text-align:center;font-size:1.5em;text-align:center;}
</style>
</head>
<body>
<div id="layer1">
<div id="layer1-1"><h1>山东商业职业技术学院</h1></div>
<div id="layer1-2"><h2>学校概况 机构设置 教育教学 就业创业 科技服务</h2>
<div id="layer1-3"></div>
</div>
<div id="layer2">
<div id="layer2-1"><h2>学校图片</h2></div>
<div id="layer2-2">
<div class="layer2-2-1">
<h2>学校要闻</h2>
<br/>
<p>新闻1</p>
<p>新闻1</p>
<p>新闻1</p>
<p>新闻1</p>
<p>新闻1</p>
</div>
<div class="layer2-2-1"><h2>通知公告</h2>
<br/>
<p>新闻1</p>
<p>新闻1</p>
<p>新闻1</p>
<p>新闻1</p>
<p>新闻1</p>
</div>
<div class="layer2-2-1"><h2>媒体报道</h2>
<br/>
<p>新闻1</p>
<p>新闻1</p>
<p>新闻1</p>
<p>新闻1</p>
<p>新闻1</p>
</div>
<div id="layer2-2-empty"></div>
</div>
</div>
<div id="layer3">
<p>学校地址：济南市旅游路4516号 邮编：250103</p>
<p>电话：0531-86335888 鲁ICP备05002370</p>
</div>
</body>
</html>
填充网页内容
- 我们收集网页有关的素材
- 把收集的网页相关的信息填充到网页中
- 文件:W4-16.PNG
- 到达这步后，为了能够自适应，可以将盒子高度设为auto
网页的美化与修饰
- 改变网页的字体，段落，行高等，使更加整齐好看
- 将之前学过的相关知识，灵活应用到网页上
- 任务一 我的第一个网页：常用标签,常用属性
- 任务二 样式表与盒子：CSS的选择符，CSS常用属性,CSS常用属性（二）,CSS的选择符（二）,盒子的基本属性
- 任务三 插入图像与盒子嵌套:插入图像，图像样式
网页测试上线
- 在本机电脑上测试
- 开通注册云主机账号
- 将网页上传云主机，查看效果
返回 网页设计与开发
