《网页设计与制作教程HTML+CSS+Bootstrap》课件 项目八创建网站全瀚通信

项目八创建《全瀚通信》网站

项目简介

本项目以全瀚通信网站为例，设计制作一个企业网站。

“附件二”中进行了美工图的设计和栏目的规划，并通过切片生成了网站需要的图片素材。本项目我们将在Dreamweaver中制作并完成网站主页和分页的DIV布局，并进一步将网页拓展成为一个风格统一、功能较齐全的网站，完成整站超链接并制作网站后台的静态效果。

项目目标

1.了解网站综合设计的前期准备工作；

2.能自主进行网站栏目的规划、功能和页面的设计；

3.掌握页面布局、超链接、模板、表单、框架、表格等技术的综合应用；

4.掌握在页面设计中添加行为、Bootstrap组件以实现特殊的效果；

5.通过实战来加强创意、设计、资料收集整理能力。

工作任务

一个完整的网站，页面一般分为这样几种类型：

首页、列表页、内容页、交互页、单页面

本项目具体工作任务为：

1.Div+CSS布局完成网站首页及分页

2.应用模板完成网站的各子栏目页面

3.使用浮动框架布局完成网站后台

工作任务——网站功能结构图

工作任务——网站文件夹组织结构图

任务一Div+CSS布局完成网站首页及分页

任务目标

观察样图，分析网站首页的结构，采用DIV+CSS布局并插入Bootstrap组件的方法，完成网站首页的制作。

自行完成网站二级页面sub.html页面的制作。

知识准备一网站规划及制作流程1.获取布局的宽度和高度用Photoshop打开“素材\美工图”中的psd文件，首先打开菜单“编辑-首选项-单位与标尺”，设置标尺单位为“像素”（默认为厘米），然后用矩形选框工具选择美工图上需要测量的区域，即可测量出相应的宽度和高度。2.获取背景及网页元素的颜色方法一：用Photoshop打开psd文件，使用吸管工具吸取需要的颜色，那么相应的前景色会得到色彩值。方法二：使用屏幕取色器工具colorCop.exe，可以用吸管随意吸取屏幕颜色并获取色彩值。知识准备二快速获取美工图的颜色及布局大小

知识准备三DIV和TableDIV+CSS布局的优缺点：优点：符合W3C标准、页面加载速度快、布局灵活，内容和样式的分离，改版更加方便；搜索引擎更加友好。缺点：对于CSS的高度依赖使得网页设计变得比较复杂、浏览器兼容性问题比较突出；TABLE表格布局的优缺点:优点：布局容易、快捷、结构严谨、兼容性好。缺点：改动不便，需重新调整整个页面，工作量大。总结：DIV主要用来给网站布局定位，而表格主要是用来承载数据。

知识准备四溢出文本隐藏并显示为省略号li{ width:300px; line-height:25px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}步骤一新建站点步骤二完成网站首页步骤三完成网站分页

任务实施——具体参见教材

任务二应用模板完成网站子栏目

在首页和分页的网页布局的基础上，应用“模板”从一个网页扩展到一个网站，做到风格统一、内容完整、布局合理。任务二的工作重点就是新建模板和应用模板完成网站子栏目的建设。由分页sub.html另存为模板sub.dwt。并应用模板完成整个网站的制作，具体栏目包括：1.关于我们——两个单页面“公司概况”和“企业文化”。知识点：图文混排；2.企业动态——文字列表页“新闻资讯”和三级页面“新闻详情”及“公告详情”；3.公司招聘——文字列表页“招聘岗位”和三级页面“岗位详情”及交互页面“我要应聘”。知识点：表单；4.员工家园——图片列表页“企业环境”和“员工活动”，图片详情为模态框。知识点：Bootstrap栅格系统和模态框；5.联系我们——单页面“联系我们”。知识点：百度地图。

任务目标

知识准备一block，inline和inline-block概念和区别常见的块级元素有div,form,table,p,pre,h1~h6,dl,ol,ul等。常见的内联元素有span,a,strong,em,label,input,select,textarea,img,br等。1.display:blockblock元素会独占一行。block元素可以设置width、height、margin和padding属性。2.display:inlineinline元素不会独占一行。inline元素设置width,height属性无效。3.display:inline-block既具有block的宽度高度特性又具有inline的同行特性。

知识准备二清除浮动使DIV高度自适应在应用DIV布局时，希望有一种效果：DIV的高度会随着内容的变化而变化。这需要分两种情况进行解释：1.若子级div没有浮动（float），此时父级div不设置高度，即高度自适应内容的高度；2.若子级div有浮动（float），此时父级div就没有高度，有两种方法来解决自适应的问题：(1)子元素最后使用空标记清除浮动（<brclass=“clearfix”><div>）(2)设置父元素的样式(style="overflow:hidden")

知识准备三Bootstrap模态框（Modal）插件1.百度地图开放平台——2.百度地图生成器——

/lbsapi/createmap/index.html3.百度地图开放平台——

/map/jsdemo.htm#a1_2

知识准备四百度地图API步骤一将分页另存为模板

任务实施步骤二“关于我们”栏目的制作步骤三“企业动态”栏目的制作步骤四“公司招聘”栏目的制作步骤五“员工家园”栏目的制作步骤六“联系我们”栏目的制作1.修改sub.dwt中导航部分的超链接，并更新基于该模板的html页面；2.完成首页到分页的超链接；3.测试整个网站。步骤七完成站点的超链接

任务三浮动框架完成网站后台

进行网站后台的布局及功能呈现，使大家对网站有一个完整的概念。网站的后台具有管理权限，所以必须先登录后管理，为了实现类似于软件平台的即视感，一般为满屏显示，并且用表格来管理大量的数据。1.登录页——后台入口。知识点：DIV布局、表单；2.后台管理首页——带有浮动框架，实现左侧超链接目标都显示在右侧浮动框架中的效果。知识点：页面自适应、DIV布局、浮动框架；3.后台管理列表页——如文章管理、招聘管理等。知识点：表格布局；

任务目标

知识准备一CSSposition的绝对定位与相对定位position:static|absolute|relative|fixed1.static:静态定位。默认的定位方式。2.absolute:绝对定位。依据父级的坐标原始点为原始点,但要求父级元素设置为相对定位，否则以浏览器的左上角为原始点进行定位。元素的位置通过"left","top","right"以及"bottom"属性进行规定。可以通过z-index进行对象的层叠，z-index值越大越靠前；3.relative:相对定位。对象不可层叠、不脱离文档流。可以通过CSS的设置使相对定位的元素改变自己的位置，如通过float让元素浮动，通过margin来让元素产生位置的移动。4.fixed:固定定位。生成绝对定位的元素，相对于浏览器窗口进行定位。

知识准备二DIV水平居中且垂直居中

知识准备三浮动框架iframeiframe是一种浮动框架，可以放在网页中的任何位置，它是一个容器，里面放的内容是一个网页。标记：<iframe></iframe>如何创建一个到浮动框架的超链接？第一步：为浮动框架添加name属性(如name=”ma