网站制作实例教程_初级篇
Download
Report
Transcript 网站制作实例教程_初级篇
化学多媒体软件设计之
网站制作实例教程
(初级篇)
2013.10.30
文档驱动
设计工具
重构工具
测试工具
使用
工具
制作
流程
需求分析
页面设计
切片重构
测试上线
一、网页制作使用的工具
文档
驱动
•
•
•
•
Word
Excel
Visio
Acrobat
设计
• Photoshop
• Firework
测试
重构
• Dreamweaver
•
•
•
•
Firebug/Yslow
IE
Chrome
Firefox
2
二、网页制作流程
需求分析
• 了解需求
• 文档驱动
页面设计
• 首页
• 栏目页
• 内容页等
切片重构
• 页面切片
• 网页重构
测试上线
• 浏览器兼容
3
1
需求分析
开始着手网页制作时，你需要先了解以下事项：
网站主题
用途
基本功能
栏目架构
首页布局
栏目页布局
内容页布局
配色
文字样式
4
1
需求分析
把需求写入项目文档，使用visio画甘特图统筹项
目进度。
5
1
需求分析
分析需求，画出网站各个页面结构图
首页布局
栏目页布局
内容页布局
6
2
页面设计
根据项目文档内容，使用FW/PS画网页效果图，精
确模拟最终网页平面效果。
（1）画出首页效果图。
注意：必须添加真实
文字内容和图片以模
拟出网页效果。
7
2
页面设计
根据项目文档内容，使用FW/PS画网页效果图，精
确模拟最终网页平面效果。
（2）画出栏目页效果图。
8
2
页面设计
根据项目文档内容，使用FW/PS画网页效果图，精
确模拟最终网页平面效果。
（3）画出内容页效果图。
9
2
页面设计
根据项目文档内容，使用FW/PS画网页效果图，精
确模拟最终网页平面效果。
（4）画出其它页
面效果图。
（网站地图、联系
我们、友情链接等
功能页或专题页）
10
3
切片重构
根据效果图布局和结构，用切片工具将效果图化整
为零。
注意：切片时应取消
显示banner以外的
文字图层
11
3
切片重构
将切片导出为图片，归入images目录。
注意：对图片语义化命名
12
3
切片重构
进入DW建立站点，准备开始重构。
进入DW后点击菜单
栏中“站点—新建站
点”
13
3
切片重构
使用html建立网站基础架构，列出各个模块的
id/class名称。
注意：盒子之间的相互关系，如
container包含着所有其他盒子；
text_list盒子包含着article和
example两个盒子。
首页栏目结构
<body>
<div id="container">
<div id="banner"> </div>
<div id="nav"></div>
<div id="slider"> </div>
<div id="text_list">
<div id=“article">
</div>
<div id=“example">
</div>
</div>
<div id="copyright"> </div>
</div>
</body>
对应html结构
14
3
切片重构
建立每个模块的基础结构，并使用css控制定位与样式
Banner的部分html结构
<div id="banner">
<h1 class="webname">
清洁生产与循环经济研究中心
</h1>
<div id="searchbar">
<div class="links">
<span>
<a href=“#”> 网站地图
</a>
</span>
</div>
</div>
</div>
对应css样式（部分）
#banner {
background: url(.. / images /
banner.jpg) no - repeat;
height: 110px;
width: 961px;
border - bottom: 1px solid#ccc;
margin - bottom: 1px;}
代码解析：
“#”对应id，“.”对应class
background：控制盒子背景
height/width：控制盒子高度、宽度
border：控制盒子边框
margin：控制盒子边距
15
3
切片重构
加上js/jQuery实现动态效果
如：首页slide效果
<script type="text/javascript“ src="/cpce/skin/js/slider.js">
</script>
（在head部分链接js文件）
16
3
切片重构
所有页面重构完成后，导入文章内容。
文章事例1
文章事例2
17
4
测试上线
对重构完成的网页在各个浏览器中测试，
修复bug
chrome
firefox
IE
18
4
测试上线
使用YSlow等测试工具对网页进行测试
完成测试即可上线（提交作业）
YSlow测试网页自动给出评分
19
本教程所用实例：
清洁生产与循环经济研究中心
http://sese.sysu.edu.cn/cpce/
更详细网站制作步骤请参阅“网站制作实例教程_中级篇”
对网站设计、页面重构等感兴趣？
欢迎加入厚朴工作室前端设计组，我们为你提供优质的学习平台！
教程制作：前端设计组—黄逸琛
20