HTML5+CSS3网页设计任务教程（第2版） 课件 单元8 HTML5综合案例

HTML5综合案例单元8目录01静态网页开发的基本流程02期末大作业8-1HTML5+CSS3网页设计任务教程（第二版）静态网页开发的基本流程静态网页开发的基本流程和软件开发的流程基本一致，包括对网站先进行需求分析、概要设计、详细设计、代码编写、项目测试、网站交付、网站运维等一系列操作以满足客户的需求并且解决客户的问题，如果有更高需求，还需要对网站进行二次开发、升级处理、运营推广等操作。1、需求分析相关系统分析员向用户初步了解需求，然后用相关的工具软件列出要开发网站的大功能模块，每个大功能模块有哪些小功能模块，对于有些需求比较明确相关的界面时，在这一步里面可以初步定义好少量的界面。系统分析员深入了解和分析需求，根据自己的经验和需求用WORD或相关的工具再做出一份文档系统的功能需求文档。这次的文档会清楚列出网站大致的大功能模块，大功能模块有哪些小功能模块，并且还列出相关的界面和功能。任务8-1

静态网页开发的基本流程

2、概要设计概要设计需要对网站的整体设计进行考虑，根据需求分析确定网站由哪些页面组成、每个页面的网站风格、页面结构、模块划分、数据结构设计和出错处理设计等，为网站的详细设计提供基础。3、详细设计在概要设计的基础上，开发者需要进行网站的详细设计。在详细设计中，根据用户提供的素材确定网站展示的内容、大小、位置、颜色、展示形式等，以便开发人员进行编码和测试。应当保证网站的需求完全分配给整个网站。详细设计应当足够详细，能够根据详细设计报告进行编码。4、代码编写在代码编写阶段，不同技术人员会根据《网站系统详细设计报告》，根据自己的职责安排进行代码编写，分别实现软件在功能、性能、接口、界面等方面的要求，这过程需要项目经理、UI设计师、安卓开发工程师/苹果开发工程师、测试工程师等人员共同配合完成，在开发过程中需要项目经理统筹全局，保持和客户的紧密沟通，对于开发出现的问题采取相应措施进行解决。任务8-1

静态网页开发的基本流程

5、项目测试测试人员根据业务逻辑，尽可能全方位地测试项目，找出网站的缺陷，并且提交测试报告，研发人员根据报告对项目bug进行修复。测试过程需要反复多次进行，尽量多的找出网站的问题所在。6、网站交付在网站测试证明达到用户要求后，网站开发者应向用户提交开发的网站源代码、《用户安装手册》、《用户使用指南》、需求报告、设计报告、测试报告等双方合同约定的产物，同时将网站部署到服务器，给用户使用。交付网站之前，需要给客户申请域名并完成备案工作，同时将域名解析到云服务器。7、网站运维维护是指在已完成对网站的开发（分析、设计、编码和测试）工作并交付使用以后，对网站运行所进行的一些软件工程的活动。即根据网站运行的情况，对网站进行适当修改，以适应新的要求，以及纠正运行中发现的错误。编写网站问题报告、网站修改报告。任务8-1

静态网页开发的基本流程

8-2HTML5+CSS3网页设计任务教程（第二版）期末大作业本任务主要是了解期末大作业的要求，每位学生需根据老师给的图片模板，开发完成PC端、移动端、响应式三种网站。期末大作业建议放在第8周布置，教师可以定期检查学生完成情况，掌控过程往往比给出结果更为重要。1、模板选择班级有学生N名，准备好N幅难度相近的网站图片，人手一图，各不相同。先选先得。2、需求分析1)、设计主题，例如：家乡、美食、游戏、汽车、动漫、电影、专业、校园、班级、室友等等，收集文字、图片、音视频等网站素材。2)、设计好网站的栏目、栏目对应的页面名称、栏目放置哪些内容。3)、设计好网页的大块，每大块分别放什么内容，哪些地方放什么特效。4)、将设计好的网站模块及每个模块放置的内容整理成电子文档。任务8-2

期末大作业

3、制作流程1)、新建网站文件夹，网站主题单词命名，例如car（汽车网）、movie（电影网）、school（校园网）、class（班级网）、game（游戏网）等，网站名称建议采用英文，不建议使用中文。2)、img文件夹放图片，CSS文件夹放样式，js文件夹放js脚本文件，back文件夹放半成品网站备份，font文件夹放下载的字体，file文件夹放收集的网站素材，psd文件夹放处理的图片，jquery文件夹放特效，other文件夹放其他文件。文件夹名字最好不要使用中文。3)、网页引入reset.css，将网页样式初始化，淘宝、腾讯、新浪、搜狐、网易等网站的reset.css均可使用。4)、新建样式style.css，新建公共样式body（修饰网页页边距，背景、字体等等）、a（修饰超连接）、.clear（清除浮动）、.left（左浮动）、.right（右浮动）。style.css引用在reset.css之后。5)、开发pc端网页，采用960网格系统布局网页，将12列合理的进行两栏或者三栏布局。任务8-2

期末大作业

6)、对网站首页index.html进行大块布局，一般网页都有以下大块布局#container（设置宽度和居中）、header（网页头部）、menu（菜单栏，一般里面放ul、li、a制作菜单）、#banner（大块广告图片）、#main（网页主体，里面根据要求可以进行两栏或者三栏布局）、#sidebar（网页侧边栏）、#content（网站主体部分，多用ul、li、a制作新闻列表或者缩略图列表）、footer（网站页脚，放制作公司和版权信息等）。7)、放置网页内容，并进行局部修饰，规划好menu中每个菜单的名称及链接地址：index.html（网站首页），news.html（新闻列表），product.html（公司产品），service.html（公司服务），contact.html（联系我们）。一般网站首页index.html会放入显示当前日期、天气预报、无间隙滚动图片、轮播图片等。任务8-2

期末大作业

8)、参照index.html制作各个子网页，news.html放新闻列表，product.html放缩略图列表，service.html放图文混排列表，contact.html放表单。9)、