1、HTML5+CSS3网页设计基础第12章 爱德照明网站前台页面第1页第第12章章 爱德爱德照明网站前台页面照明网站前台页面本章概述 本章的学习目标主要内容HTML5+CSS3网页设计基础第12章 爱德照明网站前台页面第2页本章概述本章概述l网站设计中要考虑网页内容的显示、整体颜色搭网站设计中要考虑网页内容的显示、整体颜色搭配、页面的排版布局等。本章配、页面的排版布局等。本章主要应用前面章节主要应用前面章节讲解的网页设计技术，设计制作爱德照明材料网讲解的网页设计技术，设计制作爱德照明材料网站的前台页面，进一步巩固网页设计与制作的知站的前台页面，进一步巩固网页设计与制作的知识和技术识和技术。HTM
2、L5+CSS3网页设计基础第12章 爱德照明网站前台页面第3页本章的学习目标本章的学习目标l了解网站的开发流程了解网站的开发流程l掌握网站开发中需求分析法的方法掌握网站开发中需求分析法的方法l了解站点规划的内容和要求了解站点规划的内容和要求l掌握用掌握用Hbuilder建立站点、设计网页的技术，能够建立站点、设计网页的技术，能够建立规范的站点建立规范的站点HTML5+CSS3网页设计基础第12章 爱德照明网站前台页面第4页主要内容主要内容12.1 网站网站的开发流程的开发流程12.2 用用HBulider创建创建WEB项目项目12.3 案例案例：制作爱德照明网站首页：制作爱德照明网站首页12.
3、4 案例案例：制作公司新闻页面：制作公司新闻页面12.5 案例案例：制作联系方式：制作联系方式页面页面12.6 本章小结本章小结 HTML5+CSS3网页设计基础第12章 爱德照明网站前台页面第5页12.1 网站的开发流程网站的开发流程本节主要内容：本节主要内容：l 需求分析需求分析l 站点站点规划规划l 网站网站制作制作l 测试测试发布发布HTML5+CSS3网页设计基础第12章 爱德照明网站前台页面12.1.1 需求分析需求分析l1.建站建站目的目的l2.目标目标定位定位第6页HTML5+CSS3网页设计基础第12章 爱德照明网站前台页面12.1.2 站点站点规划规划l1.网站结构规划网站
4、结构规划 网站结构设计网站结构设计、文件夹文件夹设计设计、文件命名文件命名要求要求l2.网站内容网站内容规划规划l3.网站界面网站界面规划规划l4.网站功能设置网站功能设置第7页HTML5+CSS3网页设计基础第12章 爱德照明网站前台页面12.1.3 网站网站制作制作l1.前台页面制作前台页面制作 前台前台页面制作包括内容收集整理、图片的处理、背景设页面制作包括内容收集整理、图片的处理、背景设置、页面布局排版及样式设计等。置、页面布局排版及样式设计等。l2.后台程序开发后台程序开发 后台程序后台程序开发包括数据库设计、网站和数据库的连接、开发包括数据库设计、网站和数据库的连接、动态网页编程等
5、。动态网页编程等。第8页HTML5+CSS3网页设计基础第12章 爱德照明网站前台页面12.1.4 测试测试发布发布l1.测试站点测试站点 检查检查是否按照设计的要求运行是否按照设计的要求运行，测试，测试系统在不同用户端系统在不同用户端的显示是否合适的显示是否合适，进行进行安全性安全性和和可用性测试可用性测试，包括包括页面是页面是否美观、链接是否正确和浏览器兼容性是否良好等。否美观、链接是否正确和浏览器兼容性是否良好等。l2.发布站点发布站点 当当完成了网站的设计、调试、测试和网页制作等工作完成了网站的设计、调试、测试和网页制作等工作后，需要把设计好的站点上传到服务器来完成整个网站的后，需要把
6、设计好的站点上传到服务器来完成整个网站的发布。发布。第9页HTML5+CSS3网页设计基础第12章 爱德照明网站前台页面第10页12.2 用用HBulider创建创建WEB项目项目l启动启动HBuilder，创建，创建WEB项目。依次点击文件项目。依次点击文件新建新建选择选择Web项目，弹出项目，弹出“创建创建Web项目项目”对话框，在对话框，在“项项目名称目名称”后的文本框中输入后的文本框中输入Web项目的名称项目的名称“AladLed”，单击，单击“浏览浏览”按钮，选择文件要存放的路径，如图按钮，选择文件要存放的路径，如图12-1所示所示。lcss文件夹文件夹存放存放CSS样式表样式表文件
7、；文件；ljs文件夹文件夹中中存放存放JS脚本脚本文件文件limg文件夹文件夹存放存放图片图片资料资料lmedia文件夹文件夹放置放置音频音频和视频等媒体和视频等媒体文件文件HTML5+CSS3网页设计基础第12章 爱德照明网站前台页面12.3 案例：制作爱德照明网站首页案例：制作爱德照明网站首页第11页l【案例展示】制作爱德照明网站首页，本例文件【案例展示】制作爱德照明网站首页，本例文件index.html在浏览器中的显示效果如图在浏览器中的显示效果如图12-3所示，页面结所示，页面结构如图构如图12-4所示。所示。l【知识要点】页面布局、文本、图像、列表、超链接、导【知识要点】页面布局、文
8、本、图像、列表、超链接、导航、航、CSS3动画、多媒体。动画、多媒体。l【学习目标】掌握综合应用页面元素、布局技术、【学习目标】掌握综合应用页面元素、布局技术、CSS样样式等设计网页的技术。式等设计网页的技术。HTML5+CSS3网页设计基础第12章 爱德照明网站前台页面12.4 案例：制作公司新闻案例：制作公司新闻页面页面第12页l【案例展示】制作公司新闻页面，本例文件【案例展示】制作公司新闻页面，本例文件news.html在在浏览器中的显示效果如图浏览器中的显示效果如图12-5所示，页面结构如图所示，页面结构如图12-6所所示。示。l【知识要点】图片、列表和图文混排技术。【知识要点】图片、
9、列表和图文混排技术。l【学习目标】掌握图像、列表和图文混排等【学习目标】掌握图像、列表和图文混排等CSS样式等设样式等设计网页的技术。计网页的技术。HTML5+CSS3网页设计基础第12章 爱德照明网站前台页面12.5 案例：制作联系方式页面案例：制作联系方式页面l【案例展示】制作联系方式页面，本例文件【案例展示】制作联系方式页面，本例文件contact.html在浏览器中的显示效果如图在浏览器中的显示效果如图12-7所示，页面结构如图所示，页面结构如图12-8所示。所示。l【知识要点】纵向导航菜单、新闻列表和翻页导航按钮设【知识要点】纵向导航菜单、新闻列表和翻页导航按钮设计。计。l【学习目标
10、】掌握综合应用页面元素、布局技术、【学习目标】掌握综合应用页面元素、布局技术、CSS样样式等设计网页的技术。式等设计网页的技术。第13页HTML5+CSS3网页设计基础第12章 爱德照明网站前台页面第14页12.6 本章小结本章小结 l本章首先介绍了科学合理的网站开发流程，然后介绍了用本章首先介绍了科学合理的网站开发流程，然后介绍了用HBulider创建创建WEB项目的流程，并介绍了网站首页的设项目的流程，并介绍了网站首页的设计方法、企业新闻的设计方法和联系方式的设计方法。计方法、企业新闻的设计方法和联系方式的设计方法。l通过本章的学习，读者要掌握网站的开发流程、通过本章的学习，读者要掌握网站的开发流程、CSS布局布局设计网页的方法。设计网页的方法。
