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

知识准备三浮动框架iframeiframe是一种浮动框架，可以放在网页中的任何位置，它是一个容器，里面放的内容是一个网页。标记：iframe/iframe如何创建一个到浮动框架的超链接？第一步：为浮动框架添加name属性(如name=”mainframe”)；第二步：设置超链接的target属性，属性值为框架的name属性(如target=”mainframe”)。步骤一后台登录页面制作任务实施步骤二后台管理首页的制作步骤三后台管理列表页的制作步骤四测试、调试整个网站1.测试浏览器兼容性2.测试不同的终端和分辨率显示的效果3.测试整站的超链接*第*页《网页设计与制作教程

（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.联系我们——单页面“联系我们”。知识点：百度地图。任务目标知识准备一bloc