《网页设计与制作项目教程》-项目八

任务一DIV+CSS布局完成网站首页及分页一、项目简介本项目以全瀚通信网站为例.设计制作一个企业网站.在电子版附录三(附录内容主要讲解基于Ｐｈｏｔｏｓｈｏｐ完成“全瀚通信”网站的美工图.并对美工图进行切片.精通网页美工的读者可以略过)的基础上.前期已经进行了美工图的设计和栏目的规划.并通过切片生成了网站需要的图片素材.本项目将在Ｄｒｅａｍｗｅａｖｅｒ中制作并完成网站主页和分页的ＤＩＶ布局.并进一步将网页拓展成一个风格统一、功能较齐全的网站.完成整站超链接并制作网站后台的静态效果.本项目示范设计一个企业网站.读者根据自己的实际情况.自主设计一个班级主页或者企业网站.下一页返回

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

①示范设计:根据附录三完成的首页和二级页面效果.完成一个企业网站.并设计网站后台的效果.②自主设计:根据自己的班级(企业)情况.自行规划网站栏目和功能.完成一个班级(企业)主页.本项目中着重讲解示范的部分.同步可完成自主设计的班级主页(企业网站)综合实训.上一页下一页返回

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

二、项目目标①了解网站综合设计的前期准备工作.②能自主进行网站栏目的规划、功能和页面的设计.③掌握页面布局、超链接、模板、表单、框架、表格等技术的综合应用.④掌握在页面设计中添加行为、Ｂｏｏｔｓｔｒａｐ组件以实现特殊的效果.⑤通过实战来加强创意、设计、资料收集整理能力.上一页下一页返回

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

三、工作任务一个完整的网站.页面一般分为这样几种类型:①首页:列出本网站的主要内容.带有到其他页面的超链接.②列表页:文字列表(企业动态)或者图像列表(员工家园).③内容页:文字内容或图片内容(如员工家园详情)或图文内容(如企业动态详情).④交互页:放置动态交互内容(如公司招聘).一般用表单制作.动态网页实现.⑤单页面:一个栏目就一个页面.一般表现重要的图文内容.如“公司概况”“联系我们”等.上一页下一页返回

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

全瀚通信企业网站的功能结构设计如图8.1.1

所示.本网站文件夹组织结构图设计如图8.1.2所示.本项目具体工作任务为:①ＤＩＶ＋ＣＳＳ布局完成网站首页及分页.②应用模板完成网站的各子栏目页面.③使用浮动框架布局完成网站后台.上一页下一页返回

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

(一)任务描述基于我们绘制的全瀚通信首页和二级页面的美工图及切片生成的图片素材.ＤＩＶ＋ＣＳＳ布局完成网站的首页ｉｎｄｅｘ.ｈｔｍｌ和分页ｓｕｂ.ｈｔｍｌ.其效果图如图8.1.3

和图8.1.4所示.(二)任务目标观察“素材”文件夹中的样图.分析网站首页的结构.采用ＤＩＶ＋ＣＳＳ布局并插入Ｂｏｏｔｓｔｒａｐ组件的方法.完成网站首页的制作.注意从美工图和“图片素材＼布局图片”中获取网页元素的色彩和宽度、高度.以完成ＣＳＳ样式的设置.上一页下一页返回任务一DIV+CSS布局完成网站首页及分页自行完成网站二级页面ｓｕｂ.ｈｔｍｌ页面的制作.(三)知识准备知识准备一网站规划及制作流程本项目的制作过程如图8.1.5所示.这是一般静态网站的制作流程.也是我们自主设计“班级主页”的制作流程.由以上工作流程我们可以看出.完成一个综合的网站需要综合的素质.具体包括:①创意、设计、资料收集整理能力.②网页制作软件Ｐｈｏｔｏｓｈｏｐ和Ｄｒｅａｍｗｅａｖｅｒ的综合使用.上一页下一页返回任务一DIV+CSS布局完成网站首页及分页③掌握网页设计中的所有知识点:美工图、切片、ＤＩＶ＋ＣＳＳ页面布局、表格数据呈现、超链接、模板、表单、浮动框架及Ｂｏｏｔｓｔｒａｐ框架的综合使用.知识准备二快速获取美工图的颜色及布局大小网站美工图是由网页美工与客户经过仔细沟通之后完成的.即已经满足了用户的界面需求.而Ｗｅｂ前端设计师将由美工图进行布局完成ＨＴＭＬ页面.即从美学角度向功能的转变.此时.网页的设计与制作源于美工图.又高于美工图.尽量使网页不失真.忠于原稿.同时.又由于网站功能的需要.做一些适当的调整.如网页元素大小的改变.并添加各种ＪａｖａＳｃｒｉｐｔ特效.那么.如何获取美工图的颜色及布局大小以方便ＣＳＳ样式的设置呢?上一页下一页返回任务一DIV+CSS布局完成网站首页及分页１.获取布局的宽度和高度方法一:打开“素材”→“图片素材”→“布局图片”.双击打开某张图片后获取图片信息.即可得知图片的宽度和高度.如图8.1.6所示.方法二:用Ｐｈｏｔｏｓｈｏｐ打开“素材＼美工图”中的ｐｓｄ文件.首先打开菜单“编辑”→“首选项”→“单位与标尺”.设置标尺单位为“像素”(默认为厘米).然后用矩形选框工具选择美工图上需要测量的区域.即可测量出相应的宽度和高度.如图8.1.7所示.上一页下一页返回任务一DIV+CSS布局完成网站首页及分页２.获取背景及网页元素的颜色方法一:用Ｐｈｏｔｏｓｈｏｐ打开“素材＼美工图”中的ｐｓｄ文件.使用吸管工具吸取需要的颜色.那么相应的前景色会得到色彩值.如图８.１.８所示.在ＣＳＳ中设置时.色彩值为“＃００６０ａｄ”.方法二:在“素材＼软件素材”文件夹下提供了一个屏幕取色器工具ｃｏｌｏｒＣｏｐ.ｅｘｅ.打开运行.可以用吸管随意吸取屏幕颜色并获取色彩值.如图８.１.９所示.上一页下一页返回任务一DIV+CSS布局完成网站首页及分页知识准备三ＤＩＶ和Ｔａｂｌｅ近年来.ＤＩＶ＋ＣＳＳ布局的优势愈加显著.那么.表格Ｔａｂｌｅ是不是已经失去了作用了呢?我们来对比一下ＤＩＶ和Ｔａｂｌｅ.１.ＤＩＶ＋ＣＳＳ布局的优缺点①符合Ｗ３Ｃ标准.至少可以保证近年来不会因为网络应用的升级而被淘汰.②页面加载速度快.由于将大部分页面代码写在了ＣＳＳ当中.使得页面体积容量变得更小.浏览速度更快.而表格布局由于层层嵌套.速度稍慢.上一页下一页返回任务一DIV+CSS布局完成网站首页及分页③布局灵活.网页改版更加方便.内容和样式的分离.使页面的调整变得更加方便.④搜索引擎更加友好.但这取决于网页设计的专业水平.而不是ＤＩＶ＋ＣＳＳ本身.⑤对于ＣＳＳ的高度依赖使得网页设计变得比较复杂.⑥ＣＳＳ设置效果的浏览器兼容性问题比较突出.２.ＴＡＢＬＥ表格布局的优缺点优点:布局容易、快捷、结构严谨、兼容性好.缺点:改动不便.需重新调整整个页面.工作量大.上一页下一页返回任务一DIV+CSS布局完成网站首页及分页所以.ＤＩＶ主要用来给网站布局、定位.而表格主要用来承载数据.表格经常和ＤＩＶ一起协同使用.并经常用于数据列表.表格在网站后台出现的频率比较大.样式也可以多种多样.知识准备四溢出文本隐藏并显示为省略号ｔｅｘｔ－ｏｖｅｒｆｌｏｗ是一个比较非凡的样式.可以用它代替通常所用的标题截取函数.并且这样做对搜索引擎更加友好.如:标题文件有５０个汉字.而列表可能只有３００ｐｘ的宽度.假如用标题截取函数.则标题不是完整的.如果用ＣＳＳ样式ｔｅｘｔ－ｏｖｅｒｆｌｏｗ:ｅｌｌｉｐｓｉｓ.输出的标题是完整的.只是受容器大小的局限不显示出来罢了.上一页下一页返回任务一DIV+CSS布局完成网站首页及分页语法:ｔｅｘｔ－ｏｖｅｒｆｌｏｗ:ｃｌｉｐ｜ｅｌｌｉｐｓｉｓ参数:ｃｌｉｐ:不显示省略标记(...).而是简单的裁切.ｅｌｌｉｐｓｉｓ:当对象内文本溢出时.显示省略标记(...).说明:上一页下一页返回任务一DIV+CSS布局完成网站首页及分页ｔｅｘｔ－ｏｖｅｒｆｌｏｗ属性仅是注解当文本溢出时是否显示省略标记.并不具备其他的样式属性定义.真正实现还需要配合另外两个属性的设置:强制文本在一行内显示(ｗｈｉｔｅ－ｓｐａｃｅ:ｎｏｗ￣ｒａｐ)及溢出内容为隐藏(ｏｖｅｒｆｌｏｗ:ｈｉｄｄｅｎ).只有这样.才能实现溢出文本显示省略号的效果.示例:建立了一个无序列表ｕｌ.里面有几个列表项ｌｉ.内部建立了列表链接ａ.我们的测试主要在ｌｉ进行.同时应用ｔｅｘｔ－ｏｖｅｒｆｌｏｗ:ｅｌｌｉｐｓｉｓ.ｗｈｉｔｅ－ｓｐａｃｅ:ｎｏｗｒａｐ.ｏｖｅｒｆｌｏｗ:ｈｉｄｄｅｎ.实现了想要得到的溢出文本显示为省略号的效果.代码如下:上一页下一页返回任务一DIV+CSS布局完成网站首页及分页ｌｉ{ｗｉｄｔｈ:３００ｐｘ.ｌｉｎｅ－ｈｅｉｇｈｔ:２５ｐｘ.ｔｅｘｔ－ｏｖｅｒｆｌｏｗ:ｅｌｌｉｐｓｉｓ.ｗｈｉｔｅ－ｓｐａｃｅ:ｎｏｗｒａｐ.ｏｖｅｒｆｌｏｗ:ｈｉｄｄｅｎ.}上一页下一页返回

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

(四)任务实施步骤一新建站点新建站点ｑｕａｎｈａｎ.指向文件夹Ｄ:＼ｑｕａｎｈａｎ.复制“素材＼图片素材＼ｉｍａｇｅｓ”文件夹到站点文件夹下.步骤二完成网站首页①在站点中新建一个ｂｏｏｔｓｔｒａｐ网页ｉｎｄｅｘ.ｈｔｍｌ.最终实现效果如图8.1.10所示.网页标题为“欢迎访问全瀚通信网站!”.上一页下一页返回

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

②仔细观察美工图.用ＤＩＶ＋ＣＳＳ布局的思维去思考如何进行网页的布局.ａ.将网页分为头部(ｈｅａｄｅｒ)、主体(ｍａｉｎ)、底部(ｆｏｏｔｅｒ)三大部分.ｂ.头部(ｈｅａｄｅｒ)中包括顶部＃ｔｏｐ、导航条ｎａｖ和网页横幅＃ｂａｎｎｅｒ.ｃ.主体部分分为上下两部分.上半部分＃ｍａｉｎｔｏｐ分为三块.分别为通知公告＃ｎｏｔｉｃｅ、新闻资讯＃ｎｅｗｓ和关于我们＃ａｂｏｕｔ.下半部分为一体化服务＃ｓｅｒｖｉｃｅ.ｄ.底部ｆｏｏｔｅｒ从左到右依次为:底部ＬＯＧＯ＃ｌｏｇｏｆｏｏｔｅｒ、版权信息＃ｉｎｆｏ和友情链接＃ｉｃｏｎ.上一页下一页返回任务一DIV+CSS布局完成网站首页及分页③书写网站整体ＨＴＭＬ代码.并填写相对简单的图文内容.此时预览效果图如图8.1.11所示.具体ＨＴＭＬ代码如下:<ｂｏｄｙ><!－－ｈｅａｄｅｒｓｔａｒｔ头部开始－－><ｈｅａｄｅｒ><!－－ｔｏｐｓｔａｒｔ顶部开始－－><ｄｉｖｉｄ＝"ｔｏｐ"><ｄｉｖｃｌａｓｓ＝"ｂｏｘ１００２">上一页下一页返回任务一DIV+CSS布局完成网站首页及分页<ｄｉｖｓｔｙｌｅ＝"ｆｌｏａｔ:ｌｅｆｔ.ｗｉｄｔｈ:７０％."><ｓｐａｎ>＆ｎｂｓｐ.欢迎访问全瀚通信网站</ｓｐａｎ>＆ｎｂｓｐ.＆ｎｂｓｐ.<ｓｐａｎ>注册</ｓｐａｎ>＆ｎｂｓｐ.＆ｎｂｓｐ.<ｓｐａｎ>登录</ｓｐａｎ></ｄｉｖ><ｄｉｖｓｔｙｌｅ＝"ｆｌｏａｔ:ｒｉｇｈｔ:ｗｉｄｔｈ:３０％.ｔｅｘｔ－ａｌｉｇｎ:ｒｉｇｈｔ."><ｓｐａｎ>欢迎致电:０２５－８８８８８８８８</ｓｐａｎ>＆ｎｂｓｐ.＆ｎｂｓｐ.<ｉｍｇｓｒｃ＝"ｉｍａｇｅｓ/ｉｃｏｎ＿ｐｈｏｎｅ.ｐｎｇ"ａｌｔ＝""ａｌｉｇｎ＝"ｍｉｄｄｌｅ">＆ｎｂｓｐ.</ｄｉｖ>上一页下一页返回任务一DIV+CSS布局完成网站首页及分页</ｄｉｖ></ｄｉｖ><!－－ｔｏｐｅｎｄ顶部结束－－><!－－ｎａｖｓｔａｒｔ导航开始－－><ｎａｖ><ｄｉｖｃｌａｓｓ＝"ｂｏｘ１００２"><ｄｉｖｉｄ＝"ｌｏｇｏ"><ｉｍｇｓｒｃ＝"ｉｍａｇｅｓ/ｌｏｇｏ.ｐｎｇ"ｗｉｄｔｈ＝"２６８"ｈｅｉｇｈｔ＝"９０"ａｌｔ＝"全瀚通信"/></ｄｉｖ><ｄｉｖｉｄ＝"ｍｅｎｕ">上一页下一页返回任务一DIV+CSS布局完成网站首页及分页<ｕｌ><ｌｉ>首＆ｎｂｓｐ.＆ｎｂｓｐ.＆ｎｂｓｐ.＆ｎｂｓｐ.页</ｌｉ><ｌｉ>/</ｌｉ><ｌｉ>公司简介</ｌｉ><ｌｉ>/</ｌｉ><ｌｉ>企业动态</ｌｉ><ｌｉ>/</ｌｉ><ｌｉ>公司招聘</ｌｉ><ｌｉ>/</ｌｉ>上一页下一页返回任务一DIV+CSS布局完成网站首页及分页<ｌｉ>员工家园</ｌｉ><ｌｉ>/</ｌｉ><ｌｉ>联系我们</ｌｉ></ｕｌ></ｄｉｖ></ｄｉｖ></ｎａｖ><!－－ｎａｖｅｎｄ导航结束－－><!－－ｂａｎｎｅｒｓｔａｒｔ横幅开始－－>上一页下一页返回任务一DIV+CSS布局完成网站首页及分页<ｄｉｖｉｄ＝"ｂａｎｎｅｒ"><ｄｉｖｃｌａｓｓ＝"ｂｏｘ１００２"><ｉｍｇｓｒｃ＝"ｉｍａｇｅｓ/ｂａｎｎｅｒ１.ｐｎｇ"ｗｉｄｔｈ＝"１００５"ｈｅｉｇｈｔ＝"２７８"ａｌｔ＝""/></ｄｉｖ></ｄｉｖ><!－－ｂａｎｎｅｒｅｎｄ横幅结束－－></ｈｅａｄｅｒ><!－－ｈｅａｄｅｒｅｎｄ头部结束－－><!－－ｍａｉｎｓｔａｒｔ主体开始－－><ｍａｉｎ>上一页下一页返回任务一DIV+CSS布局完成网站首页及分页<!－－ｍａｉｎｔｏｐｓｔａｒｔ主体上半部分开始－－><ｄｉｖｉｄ＝"ｍａｉｎｔｏｐ"><ｄｉｖｉｄ＝"ｎｏｔｉｃｅ">通知公告</ｄｉｖ><ｄｉｖｉｄ＝"ｎｅｗｓ">企业资讯</ｄｉｖ><ｄｉｖｉｄ＝"ａｂｏｕｔ">关于我们</ｄｉｖ><ｂｒｃｌａｓｓ＝“ｃｌｅａｒｆｉｘ”></ｄｉｖ><!－－ｍａｉｎｔｏｐｅｎｄ主体上半部分结束－－><!－－ｓｅｒｖｉｃｅｓｔａｒｔ一体化服务开始－－>上一页下一页返回任务一DIV+CSS布局完成网站首页及分页<ｄｉｖｉｄ＝"ｓｅｒｖｉｃｅ">我们提供一体化的服务</ｄｉｖ><!－－ｓｅｒｖｉｃｅｅｎｄ一体化服务结束－－></ｍａｉｎ><!－－ｍａｉｎｅｎｄ主体结束－－><!－－ｆｏｏｔｅｒｓｔａｒｔ底部开始－－><ｆｏｏｔｅｒ><ｄｉｖｃｌａｓｓ＝"ｂｏｘ１００２">上一页下一页返回任务一DIV+CSS布局完成网站首页及分页<ｄｉｖｉｄ＝"ｌｏｇｏｆｏｏｔｅｒ"><ｉｍｇｓｒｃ＝"ｉｍａｇｅｓ/ｌｏｇｏｆｏｏｔｅｒ.ｐｎｇ"ａｌｔ＝"全瀚通信"ｗｉｄｔｈ＝"１９５"ｈｅｉｇｈｔ＝"６５"></ｄｉｖ><ｄｉｖｉｄ＝"ｉｎｆｏ"><ｐ>Ｃｏｐｙｒｉｇｈｔ＆ｃｏｐｙ.２０１７ＡｌｌＲｉｇｈｔｓＲｅｓｅｒｖｅｄ.＆ｎｂｓｐ.江苏全瀚通信科技有限公司版权所有<ｂｒ/>电话:０２５－８８８８８８８８传真:０２５－８８８８８８８８邮箱:ａｄｍｉｎ＠ｊｓｑｕａｎｈａｎ.上一页下一页返回任务一DIV+CSS布局完成网站首页及分页ｃｏｍ<ｂｒ/>地址:南京市鼓楼区东宝路８号时代天地广场１栋＆ｎｂｓｐ.＆ｎｂｓｐ.＆ｎｂｓｐ.＆ｎｂｓｐ.＆ｎｂｓｐ.＆ｎｂｓｐ.＆ｎｂｓｐ.技术支持:阡陌工作室</ｐ></ｄｉｖ><ｄｉｖｉｄ＝"ｉｃｏｎ">＆ｎｂｓｐ.<ｉｍｇｓｒｃ＝"ｉｍａｇｅｓ/ｌｉｎｅ２.ｐｎｇ"ｗｉｄｔｈ＝"１"ｈｅｉｇｈｔ＝"４７"ａｌｔ＝""/>＆ｎｂｓｐ.<ｉｍｇｓｒｃ＝"ｉｍａｇｅｓ/ｌｏｇｏ－ｌｉｎｋ２.ｇｉｆ"ａｌｔ＝""上一页下一页返回任务一DIV+CSS布局完成网站首页及分页ｗｉｄｔｈ＝"９３"ｈｅｉｇｈｔ＝"５０">＆ｎｂｓｐ.<ｉｍｇｓｒｃ＝"ｉｍａｇｅｓ/ｌｉｎｅ２.ｐｎｇ"ｗｉｄｔｈ＝"１"ｈｅｉｇｈｔ＝"４７"ａｌｔ＝""/><ｉｍｇｓｒｃ＝"ｉｍａｇｅｓ/ｌｏｇｏ－ｌｉｎｋ１.ｐｎｇ"ａｌｔ＝""ｗｉｄｔｈ＝"１３５"ｈｅｉｇｈｔ＝"４０"></ｄｉｖ></ｄｉｖ><ｂｒｓｔｙｌｅ＝"ｃｌｅａｒ:ｌｅｆｔ"></ｆｏｏｔｅｒ><!－－ｆｏｏｔｅｒｅｎｄ底部结束－－><!－－ｂｏｏｔｓｔｒａｐ.ｊｓ－－>上一页下一页返回任务一DIV+CSS布局完成网站首页及分页<ｓｃｒｉｐｔｓｒｃ＝"ｊｓ/ｊｑｕｅｒｙ－１.１１.２.ｍｉｎ.ｊｓ"ｔｙｐｅ＝"ｔｅｘｔ/ｊａｖａｓｃｒｉｐｔ"></ｓｃｒｉｐｔ><ｓｃｒｉｐｔｓｒｃ＝"ｊｓ/ｂｏｏｔｓｔｒａｐ.ｊｓ"ｔｙｐｅ＝"ｔｅｘｔ/ｊａｖａｓｃｒｉｐｔ"></ｓｃｒｉｐｔ><!－－ｂｏｏｔｓｔｒａｐ.ｊｓ－－></ｂｏｄｙ>上一页下一页返回任务一DIV+CSS布局完成网站首页及分页④在原有的ｂｏｏｔｓｔｒａｐ.ｃｓｓ以外.附加新的ＣＳＳ样式文件.以进行页面布局的样式设置.如图8.1.12和图8.1.13所示.此时在ＨＴＭＬ代码中.</ｈｅａｄ>之前有两行ＣＳＳ代码.请注意顺序:<ｌｉｎｋｈｒｅｆ＝"ｃｓｓ/ｂｏｏｔｓｔｒａｐ.ｃｓｓ"ｒｅｌ＝"ｓｔｙｌｅｓｈｅｅｔ"ｔｙｐｅ＝"ｔｅｘｔ/ｃｓｓ"><ｌｉｎｋｈｒｅｆ＝"ｃｓｓ/ｓｔｙｌｅ.ｃｓｓ"ｒｅｌ＝"ｓｔｙｌｅｓｈｅｅｔ"ｔｙｐｅ＝"ｔｅｘｔ/ｃｓｓ">上一页下一页返回任务一DIV+CSS布局完成网站首页及分页⑤在ＣＳＳ中添加布局需要的ＣＳＳ样式.其中ｈｅａｄｅｒ和ｆｏｏｔｅｒ宽度为１００％.而主体部分ｍａｉｎ的宽度为１００２ｐｘ.居中对齐.根据美工图设置相应的高度和背景颜色.其中公共部分ＣＳＳ样式代码如下:∗{ｆｏｎｔ－ｆａｍｉｌｙ:微软雅黑.Ａｒｉａｌ.ｃｏｌｏｒ:＃３３３３３３.}上一页下一页返回任务一DIV+CSS布局完成网站首页及分页ｂｏｄｙ{ｍａｒｇｉｎ:０ｐｘ.ｐａｄｄｉｎｇ:０ｐｘ.ｂａｃｋｇｒｏｕｎｄ－ｃｏｌｏｒ:＃Ｅ１Ｅ１Ｅ１.ｌｉｎｅ－ｈｅｉｇｈｔ:１.７.}ａ:ｌｉｎｋ.ａ:ｖｉｓｉｔｅｄ{ｃｏｌｏｒ:＃３３３３３３.ｔｅｘｔ－ｄｅｃｏｒａｔｉｏｎ:ｎｏｎｅ.上一页下一页返回任务一DIV+CSS布局完成网站首页及分页}ａ:ｈｏｖｅｒ.ａ:ａｃｔｉｖｅ{ｃｏｌｏｒ:＃００７９ｃ９.ｔｅｘｔ－ｄｅｃｏｒａｔｉｏｎ:ｎｏｎｅ.ｆｏｎｔ－ｗｅｉｇｈｔ:５００.}.ｂｏｘ１００２{ｍａｒｇｉｎ:０ａｕｔｏ.ｗｉｄｔｈ:１００２ｐｘ./∗主体部分盒子宽度∗/上一页下一页返回任务一DIV+CSS布局完成网站首页及分页}.ｃｌｅａｒｆｉｘ{ｃｌｅａｒ:ｂｏｔｈ.}上一页下一页返回任务一DIV+CSS布局完成网站首页及分页布局部分ＣＳＳ样式代码如下:/∗顶部∗/ｈｅａｄｅｒ＃ｔｏｐ{ｈｅｉｇｈｔ:４０ｐｘ.ｂａｃｋｇｒｏｕｎｄ－ｃｏｌｏｒ:＃１Ｃ１Ｃ１Ｃ.ｌｉｎｅ－ｈｅｉｇｈｔ:４０ｐｘ.}上一页下一页返回任务一DIV+CSS布局完成网站首页及分页＃ｔｏｐｓｐａｎ{ｃｏｌｏｒ:＃ｃｃｃｃｃｃ.ｌｉｎｅ－ｈｅｉｇｈｔ:４０ｐｘ.}/∗导航∗/ｈｅａｄｅｒｎａｖ{ｈｅｉｇｈｔ:９５ｐｘ.ｂｏｒｄｅｒ－ｔｏｐ:２ｐｘ＃Ｅ２Ｅ２Ｅ２ｓｏｌｉｄ.ｂａｃｋｇｒｏｕｎｄ－ｃｏｌｏｒ:＃ｆｆｆｆｆｆ.上一页下一页返回任务一DIV+CSS布局完成网站首页及分页}ｎａｖ＃ｌｏｇｏ{ｗｉｄｔｈ:２６８ｐｘ.ｆｌｏａｔ:ｌｅｆｔ.}ｎａｖ＃ｍｅｎｕ{ｆｌｏａｔ:ｒｉｇｈｔ.ｗｉｄｔｈ:７２０ｐｘ.ｈｅｉｇｈｔ:９５ｐｘ.上一页下一页返回任务一DIV+CSS布局完成网站首页及分页}＃ｍｅｎｕｕｌｌｉ{ｆｌｏａｔ:ｌｅｆｔ.ｍａｒｇｉｎ:２０ｐｘ１２ｐｘ.ｌｉｓｔ－ｓｔｙｌｅ－ｔｙｐｅ:ｎｏｎｅ.ｌｉｎｅ－ｈｅｉｇｈｔ:５０ｐｘ.ｆｏｎｔ－ｓｉｚｅ:１６ｐｘ.}上一页下一页返回任务一DIV+CSS布局完成网站首页及分页/∗横幅∗/ｈｅａｄｅｒ＃ｂａｎｎｅｒ{ｈｅｉｇｈｔ:２７６ｐｘ.ｏｖｅｒｆｌｏｗ:ｈｉｄｄｅｎ.ｃｌｅａｒ:ｂｏｔｈ.}/∗主体∗/ｍａｉｎ{ｗｉｄｔｈ:１００２ｐｘ.上一页下一页返回任务一DIV+CSS布局完成网站首页及分页ｍａｒｇｉｎ:５ｐｘａｕｔｏ.ｂｏｒｄｅｒ－ｔｏｐ:４ｐｘ＃１Ｃ１Ｃ１Ｃｓｏｌｉｄ.ｈｅｉｇｈｔ:ａｕｔｏ.ｂａｃｋｇｒｏｕｎｄ－ｃｏｌｏｒ:＃ｆｆｆｆｆｆ.}/∗主体上半部分∗/ｍａｉｎ＃ｍａｉｎｔｏｐ{ｍａｒｇｉｎ－ｔｏｐ:１０ｐｘ.ｍａｒｇｉｎ－ｂｏｔｔｏｍ:１０ｐｘ.上一页下一页返回任务一DIV+CSS布局完成网站首页及分页ｈｅｉｇｈｔ:ａｕｔｏ.}ｍａｉｎ＃ｎｏｔｉｃｅ{ｗｉｄｔｈ:２８６ｐｘ.ｆｌｏａｔ:ｌｅｆｔ.ｈｅｉｇｈｔ:３２０ｐｘ.}ｍａｉｎ＃ｎｅｗｓ{ｗｉｄｔｈ:３８０ｐｘ.上一页下一页返回任务一DIV+CSS布局完成网站首页及分页ｆｌｏａｔ:ｌｅｆｔ.ｍａｒｇｉｎ－ｒｉｇｈｔ:１０ｐｘ.ｍａｒｇｉｎ－ｌｅｆｔ:１０ｐｘ.ｈｅｉｇｈｔ:３２０ｐｘ.}ｍａｉｎ＃ａｂｏｕｔ{ｗｉｄｔｈ:３１６ｐｘ.ｆｌｏａｔ:ｒｉｇｈｔ.ｈｅｉｇｈｔ:３２０ｐｘ.上一页下一页返回任务一DIV+CSS布局完成网站首页及分页}/∗一体化服务∗/ｍａｉｎ＃ｓｅｒｖｉｃｅ{ｗｉｄｔｈ:１００２ｐｘ.ｈｅｉｇｈｔ:２６４ｐｘ.ｍａｒｇｉｎ:１０ｐｘａｕｔｏ０ｐｘａｕｔｏ.ｂａｃｋｇｒｏｕｎｄ－ｉｍａｇｅ:ｕｒｌ(../ｉｍａｇｅｓ/ｂｇ＿ｓｅｒｖｉｃｅ.ｊｐｇ).ｃｌｅａｒ:ｌｅｆｔ.}上一页下一页返回任务一DIV+CSS布局完成网站首页及分页/∗底部∗/ｆｏｏｔｅｒ{ｂａｃｋｇｒｏｕｎｄ－ｃｏｌｏｒ:＃３１３１３１.ｃｌｅａｒ:ｌｅｆｔ.ｈｅｉｇｈｔ:ａｕｔｏ.ｐａｄｄｉｎｇ－ｔｏｐ:２０ｐｘ.ｐａｄｄｉｎｇ－ｂｏｔｔｏｍ:２０ｐｘ.}上一页下一页返回任务一DIV+CSS布局完成网站首页及分页ｆｏｏｔｅｒ＃ｌｏｇｏｆｏｏｔｅｒ{ｆｌｏａｔ:ｌｅｆｔ.ｗｉｄｔｈ:２３０ｐｘ.}ｆｏｏｔｅｒ＃ｉｎｆｏ{ｗｉｄｔｈ:４２０ｐｘ.ｆｌｏａｔ:ｌｅｆｔ.ｍａｒｇｉｎ:５ｐｘ１５ｐｘ０ｐｘ２０ｐｘ.}ｆｏｏｔｅｒ＃ｉｎｆｏｐ{上一页下一页返回任务一DIV+CSS布局完成网站首页及分页ｃｏｌｏｒ:＃ｆｆｆｆｆｆ.ｆｏｎｔ－ｓｉｚｅ:１２ｐｘ.}ｆｏｏｔｅｒ＃ｉｃｏｎ{ｗｉｄｔｈ:２９０ｐｘ.ｆｌｏａｔ:ｒｉｇｈｔ.ｍａｒｇｉｎ－ｔｏｐ:８ｐｘ.}ｆｏｏｔｅｒ＃ｉｃｏｎｉｍｇ{上一页下一页返回任务一DIV+CSS布局完成网站首页及分页ｍａｒｇｉｎ－ｌｅｆｔ:２ｐｘ.ｍａｒｇｉｎ－ｒｉｇｈｔ:２ｐｘ.}此时在浏览器中预览网页.效果如图8.1.14所示.⑥接下来的工作是从“素材＼内容素材”中获取相应的文字和图片素材.填充首页.最终形成样图所示的效果.同时.由于功能的需要.我们添加网站的超链接.并添加各种Ｂｏｏｔｓｔｒａｐ组件和ＪａｖａＳｃｒｉｐｔ插件.使网页具有良好的交互性和动感的效果.⑦顶部:将普通的文字设置成按钮效果.这是应用Ｂｏｏｔｓｔｒａｐ自带的ＣＳＳ实现的.如图8.1.15

所示.上一页下一页返回任务一DIV+CSS布局完成网站首页及分页代码如下:<ｓｐａｎｃｌａｓｓ＝"ｂｔｎ－ｘｓｂｔｎ－ｉｎｆｏ"ｓｔｙｌｅ＝"ｃｏｌｏｒ:＃ｆｆｆｆｆｆ">注册</ｓｐａｎ>＆ｎｂｓｐ.＆ｎｂｓｐ.<ｓｐａｎｃｌａｓｓ＝"ｂｔｎ－ｘｓｂｔｎ－ｄｅｆａｕｌｔ"ｓｔｙｌｅ＝"ｃｏｌｏｒ:＃３３３３３３">登录</ｓｐａｎ>上一页下一页返回任务一DIV+CSS布局完成网站首页及分页⑧导航:添加超链接样式.当鼠标划过和单击时.文字变蓝色并加下划线.并且当前页面的超链接是活动状态.如ｉｎｄｅｘ.ｈｔｍｌ的“首页”链接处于活动的状态.如图8.1.16所示.其ＨＴＭＬ代码如下:<ｄｉｖｉｄ＝"ｍｅｎｕ"><ｕｌ><ｌｉ><ａｈｒｅｆ＝"ｉｎｄｅｘ.ｈｔｍｌ"ｃｌａｓｓ＝"ａｃｔｉｖｅ">首＆ｎｂｓｐ.＆ｎｂｓｐ.＆ｎｂｓｐ.＆ｎｂｓｐ.页</ａ></ｌｉ><ｌｉ>/</ｌｉ>

上一页下一页返回任务一DIV+CSS布局完成网站首页及分页<ｌｉ><ａｈｒｅｆ＝"ａｂｏｕｔｕｓ.ｈｔｍｌ">关于我们</ａ></ｌｉ><ｌｉ>/</ｌｉ><ｌｉ><ａｈｒｅｆ＝"ｎｅｗｓ.ｈｔｍｌ">企业动态</ａ></ｌｉ><ｌｉ>/</ｌｉ><ｌｉ><ａｈｒｅｆ＝"ｊｏｂ.ｈｔｍｌ">公司招聘</ａ></ｌｉ><ｌｉ>/</ｌｉ>

上一页下一页返回任务一DIV+CSS布局完成网站首页及分页<ｌｉ><ａｈｒｅｆ＝"ｍｅｍｂｅｒ.ｈｔｍｌ">员工家园</ａ></ｌｉ><ｌｉ>/</ｌｉ><ｌｉ><ａｈｒｅｆ＝"ｃｏｎｔａｃｔ.ｈｔｍｌ">联系我们</ａ></ｌｉ></ｕｌ></ｄｉｖ>上一页下一页返回任务一DIV+CSS布局完成网站首页及分页ＣＳＳ样式代码如下:/∗导航部分的超链接∗/＃ｍｅｎｕａ{ｆｏｎｔ－ｓｉｚｅ:１６ｐｘ.ｌｉｎｅ－ｈｅｉｇｈｔ:３５ｐｘ.ｄｉｓｐｌａｙ:ｂｌｏｃｋ.ｐａｄｄｉｎｇ－ｌｅｆｔ:５ｐｘ.ｐａｄｄｉｎｇ－ｒｉｇｈｔ:５ｐｘ.ｔｅｘｔ－ｄｅｃｏｒａｔｉｏｎ:ｎｏｎｅ.上一页下一页返回任务一DIV+CSS布局完成网站首页及分页}/∗导航部分的超链接ｈｏｖｅｒ和ａｃｔｉｖｅ状态∗/＃ｍｅｎｕａ:ｈｏｖｅｒ.＃ｍｅｎｕａ:ａｃｔｉｖｅ{ｂａｃｋｇｒｏｕｎｄ－ｉｍａｇｅ:ｕｒｌ(../ｉｍａｇｅｓ/ｌｉｎｅ＿ｎａｖｂｌｕｅ.ｐｎｇ).ｂａｃｋｇｒｏｕｎｄ－ｒｅｐｅａｔ:ｒｅｐｅａｔ－ｘ.ｂａｃｋｇｒｏｕｎｄ－ｐｏｓｉｔｉｏｎ:ｌｅｆｔｂｏｔｔｏｍ.}上一页下一页返回任务一DIV+CSS布局完成网站首页及分页/∗活动的超链接.指示当前页面∗/＃ｍｅｎｕ.ａｃｔｉｖｅ{ｂａｃｋｇｒｏｕｎｄ－ｉｍａｇｅ:ｕｒｌ(../ｉｍａｇｅｓ/ｌｉｎｅ＿ｎａｖｂｌｕｅ.ｐｎｇ).ｂａｃｋｇｒｏｕｎｄ－ｒｅｐｅａｔ:ｒｅｐｅａｔ－ｘ.ｂａｃｋｇｒｏｕｎｄ－ｐｏｓｉｔｉｏｎ:ｌｅｆｔｂｏｔｔｏｍ.ｃｏｌｏｒ:＃００７９ｃ９.ｆｏｎｔ－ｗｅｉｇｈｔ:６００.}上一页下一页返回任务一DIV+CSS布局完成网站首页及分页⑨网页横幅:插入Ｂｏｏｔｓｔｒａｐ的ＪａｖａＳｃｒｉｐｔ插件Ｃａｒｏｕｓｅｌ.实现轮播广告的效果.具体操作为:删除原先的ｂａｎｎｅｒ图片.在“插入”面板中单击“Ｂｏｏｔｓｔｒａｐ组件－Ｃａｒｏｕｓｅｌ”.即插入了Ｂｏｏｔｓｔｒａｐ的ＪａｖａＳｃｒｉｐｔ组件.切换到“代码”视图.修改图片地址.删除网页中不需要的标题文字即可.最终代码如下:上一页下一页返回任务一DIV+CSS布局完成网站首页及分页<ｄｉｖｉｄ＝"ｂａｎｎｅｒ"><ｄｉｖｉｄ＝"ｃａｒｏｕｓｅｌ１"ｃｌａｓｓ＝"ｃａｒｏｕｓｅｌｓｌｉｄｅ"ｄａｔａ－ｒｉｄｅ＝"ｃａｒｏｕ￣ｓｅｌ"><!－－三个列表小圆圈－－><ｏｌｃｌａｓｓ＝"ｃａｒｏｕｓｅｌ－ｉｎｄｉｃａｔｏｒｓ"><ｌｉｄａｔａ－ｔａｒｇｅｔ＝"＃ｃａｒｏｕｓｅｌ１"ｄａｔａ－ｓｌｉｄｅ－ｔｏ＝"０"ｃｌａｓｓ＝"ａｃ￣ｔｉｖｅ"></ｌｉ>上一页下一页返回任务一DIV+CSS布局完成网站首页及分页<ｌｉｄａｔａ－ｔａｒｇｅｔ＝"＃ｃａｒｏｕｓｅｌ１"ｄａｔａ－ｓｌｉｄｅ－ｔｏ＝"１"></ｌｉ><ｌｉｄａｔａ－ｔａｒｇｅｔ＝"＃ｃａｒｏｕｓｅｌ１"ｄａｔａ－ｓｌｉｄｅ－ｔｏ＝"２"></ｌｉ></ｏｌ><!－－三幅轮播图片－－><ｄｉｖｃｌａｓｓ＝"ｃａｒｏｕｓｅｌ－ｉｎｎｅｒ"ｒｏｌｅ＝"ｌｉｓｔｂｏｘ">上一页下一页返回任务一DIV+CSS布局完成网站首页及分页<ｄｉｖｃｌａｓｓ＝"ｉｔｅｍａｃｔｉｖｅ"><ｉｍｇｓｒｃ＝"ｉｍａｇｅｓ/ｂａｎｎｅｒ１.ｐｎｇ"ａｌｔ＝"Ｆｉｒｓｔｓｌｉｄｅｉｍａｇｅ"ｃｌａｓｓ＝"ｃｅｎｔｅｒ－ｂｌｏｃｋ"></ｄｉｖ><ｄｉｖｃｌａｓｓ＝"ｉｔｅｍ"><ｉｍｇｓｒｃ＝"ｉｍａｇｅｓ/ｂａｎｎｅｒ２.ｐｎｇ"ａｌｔ＝"Ｓｅｃｏｎｄｓｌｉｄｅｉｍａｇｅ"ｃｌａｓｓ＝"ｃｅｎｔｅｒ－ｂｌｏｃｋ">上一页下一页返回任务一DIV+CSS布局完成网站首页及分页</ｄｉｖ><ｄｉｖｃｌａｓｓ＝"ｉｔｅｍ"><ｉｍｇｓｒｃ＝"ｉｍａｇｅｓ/ｂａｎｎｅｒ３.ｐｎｇ"ａｌｔ＝"Ｔｈｉｒｄｓｌｉｄｅｉｍａｇｅ"ｃｌａｓｓ＝"ｃｅｎｔｅｒ－ｂｌｏｃｋ"></ｄｉｖ></ｄｉｖ><!－－左右箭头－－>上一页下一页返回任务一DIV+CSS布局完成网站首页及分页<ａｃｌａｓｓ＝"ｌｅｆｔｃａｒｏｕｓｅｌ－ｃｏｎｔｒｏｌ"ｈｒｅｆ＝"＃ｃａｒｏｕｓｅｌ１"ｒｏｌｅ＝"ｂｕｔ￣ｔｏｎ"ｄａｔａ－ｓｌｉｄｅ＝"ｐｒｅｖ"><ｓｐａｎｃｌａｓｓ＝"ｇｌｙｐｈｉｃｏｎｇｌｙｐｈｉｃｏｎ－ｃｈｅｖｒｏｎ－ｌｅｆｔ"ａｒｉａ－ｈｉｄｄｅｎ＝"ｔｒｕｅ"></ｓｐａｎ><ｓｐａｎｃｌａｓｓ＝"ｓｒ－ｏｎｌｙ">Ｐｒｅｖｉ￣ｏｕｓ</ｓｐａｎ></ａ><ａｃｌａｓｓ＝"ｒｉｇｈｔｃａｒｏｕｓｅｌ－ｃｏｎｔｒｏｌ"ｈｒｅｆ＝"＃ｃａｒｏｕ￣ｓｅｌ１"ｒｏｌｅ＝"ｂｕｔｔｏｎ"ｄａｔａ－ｓｌｉｄｅ＝"ｎｅｘｔ"><ｓｐａｎｃｌａｓｓ＝"ｇｌｙｐｈｉｃｏｎｇｌｙｐｈｉｃｏｎ－ｃｈｅｖｒｏｎ－ｒｉｇｈｔ"ａｒｉａ－ｈｉｄｄｅｎ＝"ｔｒｕｅ"></ｓｐａｎ><ｓｐａｎｃｌａｓｓ＝"ｓｒ－ｏｎｌｙ">Ｎｅｘｔ</ｓｐａｎ></ａ></ｄｉｖ></ｄｉｖ>上一页下一页返回任务一DIV+CSS布局完成网站首页及分页效果如图8.1.17

~图8.1.19所示.⑩通知公告:添加Ｍａｒｑｕｅｅ代码.使公告由下向上滚动.并当鼠标划过滚动文字时停止滚动.便于单击查看详情.而当鼠标离开时继续滚动.如图8.1.20所示.上一页下一页返回任务一DIV+CSS布局完成网站首页及分页具体代码如下:<ｍａｒｑｕｅｅｂｅｈａｖｉｏｒ＝"ｓｃｒｏｌｌ"ｄｉｒｅｃｔｉｏｎ＝"ｕｐ"ｈｅｉｇｈｔ＝"２５０ｐｘ"ｓｃｒｏｌｌａｍｏｕｎｔ＝"２"ｓｃｒｏｌｌｄｅｌａｙ＝"２"ｏｎＭｏｕｓｅＯｖｅｒ＝"ｔｈｉｓ.ｓｔｏｐ()"ｏｎＭｏｕｓｅ￣Ｏｕｔ＝"ｔｈｉｓ.ｓｔａｒｔ()"><ｕｌ><ｌｉ><ａｈｒｅｆ＝"＃"><ｓｐａｎｃｌａｓｓ＝"ｇｌｙｐｈｉｃｏｎｇｌｙｐｈｉｃｏｎ－ｖｏｌｕｍｅ－ｕｐ"ｓｔｙｌｅ＝"ｃｏｌｏｒ:＃ｆｆｆｆｆｆ">＆ｎｂｓｐ.</ｓｐａｎ>公告标题一【２０１７－０５－１０】</ａ>上一页下一页返回任务一DIV+CSS布局完成网站首页及分页</ｌｉ><ｌｉ><ａｈｒｅｆ＝"ｎｏｔｉｃｅ＿ｄｅｔａｉｌ１.ｈｔｍｌ"><ｓｐａｎｃｌａｓｓ＝"ｇｌｙｐｈｉｃｏｎｇｌｙｐｈｉｃｏｎ－ｖｏｌｕｍｅ－ｕｐ"ｓｔｙｌｅ＝"ｃｏｌｏｒ:＃ｆｆｆｆｆｆ">＆ｎｂｓｐ.</ｓｐａｎ>公告标题二【２０１６－０７－０７】</ａ></ｌｉ></ｕｌ></ｍａｒｑｕｅｅ>上一页下一页返回任务一DIV+CSS布局完成网站首页及分页11.企业资讯:利用ｕｌ、ｌｉ添加新闻列表.并实现文字溢出隐藏显示为省略号的效果.可以看出短标题新闻没有省略号.长标题新闻被截断.并以省略号代替.如图8.1.21所示.具体ＨＴＭＬ代码如下:<ｄｉｖｃｌａｓｓ＝"ｎｅｗｓｌｉｓｔ"ｃｌａｓｓ＝“ｃｌｅａｒｆｉｘ”><ｕｌ><ｌｉ><ａｈｒｅｆ＝"ｎｅｗｓ＿ｄｅｔａｉｌ１.ｈｔｍｌ">新闻标题一</ａ>上一页下一页返回任务一DIV+CSS布局完成网站首页及分页<ｓｐａｎｃｌａｓｓ＝"ｒｉｇｈｔｄｉｖ">２０１７－０６－１８</ｓｐａｎ></ｌｉ><ｌｉ><ａｈｒｅｆ＝"ｎｅｗｓ＿ｄｅｔａｉｌ２.ｈｔｍｌ">新闻标题二</ａ><ｓｐａｎｃｌａｓｓ＝"ｒｉｇｈｔｄｉｖ">２０１７－０６－１８</ｓｐａｎ></ｌｉ><ｌｉ><ａｈｒｅｆ＝"ｎｅｗｓ＿ｄｅｔａｉｌ３.ｈｔｍｌ">新闻标题三</ａ><ｓｐａｎｃｌａｓｓ＝"ｒｉｇｈｔｄｉｖ">２０１７－０６－１８</ｓｐａｎ></ｌｉ>

上一页下一页返回任务一DIV+CSS布局完成网站首页及分页<ｌｉ><ａｈｒｅｆ＝"ｎｅｗｓ＿ｄｅｔａｉｌ４.ｈｔｍｌ">新闻标题四</ａ><ｓｐａｎｃｌａｓｓ＝"ｒｉｇｈｔｄｉｖ">２０１７－０６－１８</ｓｐａｎ></ｌｉ><ｌｉ><ａｈｒｅｆ＝"ｎｅｗｓ＿ｄｅｔａｉｌ５.ｈｔｍｌ">新闻标题五</ａ><ｓｐａｎｃｌａｓｓ＝"ｒｉｇｈｔｄｉｖ">２０１７－０６－１８</ｓｐａｎ></ｌｉ></ｕｌ></ｄｉｖ>上一页下一页返回任务一DIV+CSS布局完成网站首页及分页具体ＣＳＳ样式设置如下:.ｎｅｗｓｌｉｓｔｌｉ{ｂｏｒｄｅｒ－ｂｏｔｔｏｍ:１ｐｘｄａｓｈｅｄ＃ｃｃｃｃｃｃ.ｈｅｉｇｈｔ:２７ｐｘ.ｍａｒｇｉｎ－ｒｉｇｈｔ:５ｐｘ.}.ｎｅｗｓｌｉｓｔａ{ｄｉｓｐｌａｙ:ｉｎｌｉｎｅ－ｂｌｏｃｋ.ｗｉｄｔｈ:２８０ｐｘ.上一页下一页返回任务一DIV+CSS布局完成网站首页及分页ｗｈｉｔｅ－ｓｐａｃｅ:ｎｏｗｒａｐ.ｏｖｅｒｆｌｏｗ:ｈｉｄｄｅｎ.－ｍｓ－ｔｅｘｔ－ｏｖｅｒｆｌｏｗ:ｅｌｌｉｐｓｉｓ.ｔｅｘｔ－ｏｖｅｒｆｌｏｗ:ｅｌｌｉｐｓｉｓ.ｌｉｎｅ－ｈｅｉｇｈｔ:２７ｐｘ.}ｕｌｌｉ.ｒｉｇｈｔｄｉｖ{ｆｌｏａｔ:ｒｉｇｈｔ.上一页下一页返回任务一DIV+CSS布局完成网站首页及分页ｃｌｅａｒ:ｂｏｔｈ.ｌｉｎｅ－ｈｅｉｇｈｔ:２７ｐｘ.}12.关于我们:图文混排布局.“详细”设置为按钮的样式.并超链接到ａｂｏｕｔｕｓ.ｈｔｍｌ.如图8.1.22所示.13.�一体化服务:插入“鼠标经过图片”.实现五个图标的变换图像效果.如图8.1.23

所示.上一页下一页返回任务一DIV+CSS布局完成网站首页及分页具体操作如下:单击插入面板的“鼠标经过图像”按钮.在弹出的对话框中进行设置.即可自动添加ＪａｖａＳｃｒｉｐｔ代码.并实现鼠标划过时变换图像的效果.如图8.1.24

所示.步骤三完成网站分页请自行研究网站分页ｓｕｂ.ｈｔｍｌ的样图.并完成分页的ＤＩＶ＋ＣＳＳ布局.注意:①如自己重新书写ＨＴＭＬ和ＣＳＳ.可复习巩固前期所学的内容.上一页下一页返回任务一DIV+CSS布局完成网站首页及分页②如将首页另存为ｓｕｂ.ｈｔｍｌ再修改.建议将ｓｔｙｌｅ.ｃｓｓ另存为ｓｕｂ.ｃｓｓ.再重新附加样式并修改.以免首页和分页互相影响.与首页相比.分页变化提示:①网页横幅放一张图片.不再轮播.②主体部分ｍａｉｎ分为左、右两部分.左侧ａｓｉｄｅ放置二级子栏目＃ｓｕｂｍｅｎｕ.右侧ｓｅｃｔｉｏｎ放置当前页定位＃ｐｏｓｉｔｉｏｎ和文章内容ａｒｔｉｃｌｅ.其中文章标题和文章内容根据需要设置ＣＳＳ样式.上一页下一页返回任务一DIV+CSS布局完成网站首页及分页(五)任务评价上一页下一页返回任务一DIV+CSS布局完成网站首页及分页(六)思考练习上一页下一页返回任务一DIV+CSS布局完成网站首页及分页(七)任务拓展①结合前期所学知识.完成二级页面ｓｕｂ.ｈｔｍｌ.要求使用ＤＩＶ＋ＣＳＳ进行布局.ＣＳＳ样式附加外部样式表ｓｕｂｃｓｓ.实现效果如图8.1.4所示.②开始构思项目实训“××班班级主页”网站.搜集班级图文素材.构思栏目.绘制首页的草图和美工图.上一页返回任务二应用模板完成网站子栏目(一)任务描述我们已经完成了首页和分页的网页布局.接下来的工作就是从一个网页扩展到一个网站.并且要风格统一、内容完整、布局合理.本任务的工作重点就是新建模板和应用模板完成网站子栏目的建设.(二)任务目标由分页ｓｕｂ.ｈｔｍｌ另存为模板ｓｕｂ.ｄｗｔ.并应用模板完成整个网站的制作.具体栏目包括:①关于我们:两个单页面“公司概况”和“企业文化”.知识点:图文混排.下一页返回任务二应用模板完成网站子栏目

②企业动态:文字列表页“新闻资讯”、三级页面“新闻详情”及“公告详情”.③公司招聘:文字列表页“招聘岗位”、三级页面“岗位详情”及交互页面“我要应聘”.知识点:表单.④员工家园:图片列表页“企业环境”、“员工活动”.图片详情为模态框.知识点:Ｂｏｏｔｓｔｒａｐ栅格系统和模态框.⑤联系我们:单页面“联系我们”.知识点:百度地图.上一页下一页返回任务二应用模板完成网站子栏目

(三)知识准备知识准备一ｂｌｏｃｋ、ｉｎｌｉｎｅ和ｉｎｌｉｎｅ－ｂｌｏｃｋ概念和区别１.总体概念ｂｌｏｃｋ和ｉｎｌｉｎｅ这两个概念是简略的说法.确切地说.应该是ｂｌｏｃｋ－ｌｅｖｅｌｅｌｅｍｅｎｔｓ(块级元素)和ｉｎｌｉｎｅｅｌｅｍｅｎｔｓ(内联元素或者行内元素).ＨＴＭＬ元素各有其自身的布局级别:上一页下一页返回任务二应用模板完成网站子栏目

常见的块级元素有ｄｉｖ、ｆｏｒｍ、ｔａｂｌｅ、ｐ、ｐｒｅ、ｈ１~ｈ６、ｄｌ、ｏｌ、ｕｌ等.常见的内联元素有ｓｐａｎ、ａ、ｓｔｒｏｎｇ、ｅｍ、ｌａｂｅｌ、ｉｎｐｕｔ、ｓｅｌｅｃｔ、ｔｅｘｔａｒｅａ、ｉｍｇ、ｂｒ等.ｂｌｏｃｋ元素可以包含ｂｌｏｃｋ元素和ｉｎｌｉｎｅ元素.但ｉｎｌｉｎｅ元素只能包含ｉｎｌｉｎｅ元素.个别也有特例.２.ｂｌｏｃｋ、ｉｎｌｉｎｅ和ｉｎｌｉｎｅ－ｂｌｏｃｋ细节对比上一页下一页返回任务二应用模板完成网站子栏目

(１)ｄｉｓｐｌａｙ:ｂｌｏｃｋｂｌｏｃｋ元素会独占一行.多个ｂｌｏｃｋ元素会各自新起一行.默认情况下.ｂｌｏｃｋ元素宽度自动填满其父元素宽度.ｂｌｏｃｋ元素可以设置ｗｉｄｔｈ和ｈｅｉｇｈｔ属性.块级元素即使设置了宽度.仍然独占一行.ｂｌｏｃｋ元素可以设置ｍａｒｇｉｎ和ｐａｄｄｉｎｇ属性.上一页下一页返回任务二应用模板完成网站子栏目

(２)ｄｉｓｐｌａｙ:ｉｎｌｉｎｅｉｎｌｉｎｅ元素不会独占一行.多个相邻的行内元素会排列在同一行里.直到一行排列不下.才会新换一行.其宽度随元素的内容而变化.ｉｎｌｉｎｅ元素设置ｗｉｄｔｈ和ｈｅｉｇｈｔ属性无效.ｉｎｌｉｎｅ元素的ｍａｒｇｉｎ和ｐａｄｄｉｎｇ属性.水平方向的ｐａｄｄｉｎｇ－ｌｅｆｔ、ｐａｄｄｉｎｇ－ｒｉｇｈｔ、ｍａｒｇｉｎ－ｌｅｆｔ、ｍａｒｇｉｎ－ｒｉｇｈｔ都产生边距效果.但竖直方向的ｐａｄｄｉｎｇ－ｔｏｐ、ｐａｄｄｉｎｇ－ｂｏｔｔｏｍ、ｍａｒｇｉｎ－ｔｏｐ、ｍａｒｇｉｎ－ｂｏｔｔｏｍ不会产生边距效果.上一页下一页返回任务二应用模板完成网站子栏目

(３)ｄｉｓｐｌａｙ:ｉｎｌｉｎｅ－ｂｌｏｃｋ简单来说.就是将对象呈现为ｉｎｌｉｎｅ对象.但是对象的内容作为ｂｌｏｃｋ对象呈现.之后的内联对象会被排列在同一行内.比如.可以给一个ｌｉｎｋ(ａ元素)ｉｎｌｉｎｅ－ｂｌｏｃｋ属性值.使其既具有ｂｌｏｃｋ的宽度和高度特性.又具有ｉｎｌｉｎｅ的同行特性.总结:一般会用ｄｉｓｐｌａｙ:ｂｌｏｃｋ、ｄｉｓｐｌａｙ:ｉｎｌｉｎｅ或者ｄｉｓｐｌａｙ:ｉｎｌｉｎｅ－ｂｌｏｃｋ来调整元素的布局级别.上一页下一页返回任务二应用模板完成网站子栏目

知识准备二清除浮动使ＤＩＶ高度自适应在应用ＤＩＶ布局时.有时会希望ＤＩＶ的高度随着内容的变化而变化.但是又想设置ＤＩＶ的一个最小高度.特别是当ＤＩＶ有背景色或背景图片时.设置最小高度会使视觉效果更好.这需要分两种情况进行解释:①若子级ｄｉｖ没有浮动(ｆｌｏａｔ).此时父级ｄｉｖ不设置高度.即高度自适应内容的高度.②若子级ｄｉｖ有浮动(ｆｌｏａｔ).此时父级ｄｉｖ就没有高度.有两种方法来解决自适应的问题:上一页下一页返回任务二应用模板完成网站子栏目

ａ.子元素最后使用空标记清除浮动(<ｂｒｃｌａｓｓ＝“ｃｌｅａｒｆｉｘ”><ｄｉｖ>).ｂ.设置父元素的样式(ｓｔｙｌｅ＝"ｏｖｅｒｆｌｏｗ:ｈｉｄｄｅｎ").举例如下:上一页下一页返回任务二应用模板完成网站子栏目

<!ｄｏｃｔｙｐｅｈｔｍｌ><ｈｔｍｌ><ｈｅａｄ><ｍｅｔａｃｈａｒｓｅｔ＝"ｕｔｆ－８"><ｔｉｔｌｅ>设置ｄｉｖ最小高度及高度自适应的实例</ｔｉｔｌｅ><ｓｔｙｌｅ>.ｄｉｖ１{ｗｉｄｔｈ:８００ｐｘ.上一页下一页返回任务二应用模板完成网站子栏目

ｂａｃｋｇｒｏｕｎｄ:＃ｂｂｅｅｅｂ.ｍａｒｇｉｎ:０ａｕｔｏ.ｈｅｉｇｈｔ:ａｕｔｏ./.父级ｄｉｖ的最小高度./ｍｉｎ－ｈｅｉｇｔｈ:２００ｐｘ./.自适应高度方法一———溢出隐藏./ｏｖｅｒｆｌｏｗ:ｈｉｄｄｅｎ.}上一页下一页返回任务二应用模板完成网站子栏目

.ｌｅｆｔ{ｆｌｏａｔ:ｌｅｆｔ.ｗｉｄｔｈ:２０％.ｈｅｉｇｈｔ:４００ｐｘ..ｒｉｇｈｔ{ｆｌｏａｔ:ｒｉｇｈｔ.ｗｉｄｔｈ:８０％.ｈｅｉｇｈｔ:４００ｐｘ.上一页下一页返回任务二应用模板完成网站子栏目

}.ｃｌｅａｒｆｉｘ{ｃｌｅａｒ:ｂｏｔｈ.}</ｓｔｙｌｅ></ｈｅａｄ><ｂｏｄｙ><ｄｉｖｃｌａｓｓ＝"ｄｉｖ１"><ｄｉｖｃｌａｓｓ＝"ｌｅｆｔ">左侧ｄｉｖ</ｄｉｖ>

上一页下一页返回任务二应用模板完成网站子栏目

<ｄｉｖｃｌａｓｓ＝"ｒｉｇｈｔ">右侧ｄｉｖ</ｄｉｖ><!－－自适应高度方法二———清除浮动－－><ｂｒｃｌａｓｓ＝“ｃｌｅａｒｆｉｘ”></ｄｉｖ></ｂｏｄｙ></ｈｔｍｌ>知识准备三Ｂｏｏｔｓｔｒａｐ模态框(Ｍｏｄａｌ)插件模态框(Ｍｏｄａｌ)是覆盖在父窗体上的子窗体.显示的效果一般是单击某个链接.会弹出一个窗口.并带有过渡效果.如何触发并切换模态框(Ｍｏｄａｌ)插件的隐藏内容?上一页下一页返回任务二应用模板完成网站子栏目

通过ｄａｔａ属性.在控制器元素(比如按钮或者链接)上设置属性ｄａｔａ－ｔｏｇｇｌｅ＝"ｍｏ￣ｄａｌ".同时设置ｄａｔａ－ｔａｒｇｅｔ＝"＃ｉｄｅｎｔｉｆｉｅｒ"或ｈｒｅｆ＝"＃ｉｄｅｎｔｉｆｉｅｒ"来指定要切换的特定的模态框(带有ｉｄ＝"ｉｄｅｎｔｉｆｉｅｒ").一个静态的模态窗口实例.如下面的实例所示:<ｈ２>创建模态框(Ｍｏｄａｌ)</ｈ２><!－－按钮触发模态框－－>上一页下一页返回任务二应用模板完成网站子栏目

<ｂｕｔｔｏｎｃｌａｓｓ＝"ｂｔｎｂｔｎ－ｐｒｉｍａｒｙｂｔｎ－ｌｇ"ｄａｔａ－ｔｏｇｇｌｅ＝"ｍｏｄａｌ"ｄａ￣ｔａ－ｔａｒｇｅｔ＝"＃ｍｙＭｏｄａｌ">开始演示模态框</ｂｕｔｔｏｎ><!－－模态框(Ｍｏｄａｌ)－－><ｄｉｖｃｌａｓｓ＝"ｍｏｄａｌｆａｄｅ"ｉｄ＝"ｍｙＭｏｄａｌ"ｔａｂｉｎｄｅｘ＝"－１"ｒｏｌｅ＝"ｄｉａ￣ｌｏｇ"ａｒｉａ－ｌａｂｅｌｌｅｄｂｙ＝"ｍｙＭｏｄａｌＬａｂｅｌ"ａｒｉａ－ｈｉｄｄｅｎ＝"ｔｒｕｅ">上一页下一页返回任务二应用模板完成网站子栏目

<ｄｉｖｃｌａｓｓ＝"ｍｏｄａｌ－ｄｉａｌｏｇ"><ｄｉｖｃｌａｓｓ＝"ｍｏｄａｌ－ｃｏｎｔｅｎｔ"><ｄｉｖｃｌａｓｓ＝"ｍｏｄａｌ－ｈｅａｄｅｒ"><ｂｕｔｔｏｎｔｙｐｅ＝"ｂｕｔｔｏｎ"ｃｌａｓｓ＝"ｃｌｏｓｅ"ｄａｔａ－ｄｉｓｍｉｓｓ＝"ｍｏｄａｌ"ａｒｉａ－ｈｉｄｄｅｎ＝"ｔｒｕｅ">＆ｔｉｍｅｓ.</ｂｕｔｔｏｎ><ｈ４ｃｌａｓｓ＝"ｍｏｄａｌ－ｔｉｔｌｅ"ｉｄ＝"ｍｙＭｏｄａｌＬａｂｅｌ">上一页下一页返回任务二应用模板完成网站子栏目

模态框(Ｍｏｄａｌ)标题</ｈ４></ｄｉｖ><ｄｉｖｃｌａｓｓ＝"ｍｏｄａｌ－ｂｏｄｙ">在这里添加一些文本</ｄｉｖ><ｄｉｖｃｌａｓｓ＝"ｍｏｄａｌ－ｆｏｏｔｅｒ"><ｂｕｔｔｏｎｔｙｐｅ＝"ｂｕｔｔｏｎ"ｃｌａｓｓ＝"ｂｔｎｂｔｎ－ｄｅ￣ｆａｕｌｔ"ｄａｔａ－ｄｉｓｍｉｓｓ＝"ｍｏｄａｌ">关闭</ｂｕｔｔｏｎ>

上一页下一页返回任务二应用模板完成网站子栏目

<ｂｕｔｔｏｎｔｙｐｅ＝"ｂｕｔｔｏｎ"ｃｌａｓｓ＝"ｂｔｎｂｔｎ－ｐｒｉｍａ￣ｒｙ">提交更改</ｂｕｔｔｏｎ></ｄｉｖ></ｄｉｖ><!－－/.ｍｏｄａｌ－ｃｏｎｔｅｎｔ－－></ｄｉｖ><!－－/.ｍｏｄａｌ－－></ｄｉｖ>上一页下一页返回任务二应用模板完成网站子栏目

知识准备四百度地图ＡＰＩ百度地图ＡＰＩ是一套为开发者免费提供的基于百度地图的应用程序接口.包括ＪａｖａＳｃｒｉｐｔ、ｉＯＳ、Ａｎｄｒｉｏｄ、静态地图、Ｗｅｂ服务等多种版本.提供基本地图、位置搜索、周边搜索、公交驾车导航、定位服务、地理编码及逆地理编码等丰富功能.①打开百度地图开放平台ｈｔｔｐ://ｌｂｓｙｕｎ.ｂａｉｄｕ.ｃｏｍ/.可以申请密钥.也可以获取“ＷＥＢ开发/ＪａｖａＳｃｒｉｐｔＡＰＩ”.上一页下一页返回任务二应用模板完成网站子栏目

②进入“百度地图生成器”页面ｈｔｔｐ://ａｐｉ.ｍａｐ.ｂａｉｄｕ.ｃｏｍ/ｌｂｓａｐｉ/ｃｒｅａｔｅｍａｐ/ｉｎｄｅｘ.ｈｔｍｌ.可通过地址获取经纬度.获取到代码复制到自己的网页中即可.③如需要完成更复杂的地图定制效果.可以到ｈｔｔｐ://ｄｅｖｅｌｏｐｅｒ.ｂａｉｄｕ.ｃｏｍ/ｍａｐ/ｊｓｄｅｍｏ.ｈｔｍ＃ａ１＿２页面反复运行调试.直至得到最满意的效果.获取到代码到自己的网页中即可.上一页下一页返回任务二应用模板完成网站子栏目

(四)任务实施步骤一将分页另存为模板①打开ｓｕｂ.ｈｔｍｌ.打开菜单“文件”→“另存为模板”.将分页另存为模板文件ｓｕｂ.ｄｗｔ.如图8.2.1所示.Ｄｒｅａｍｗｅａｖｅｒ会自动新建Ｔｅｍｐｌａｔｅｓ文件夹.并且更新链接.此时文件列表如图8.2.2所示.②此时.打开资源面板.可以看到模板的存在.如图8.2.3所示.接下来的子栏目网页都应用此模板来制作完成.上一页下一页返回任务二应用模板完成网站子栏目

③仔细观察样图.可以看出各栏目基本上头部和底部不变.而主体部分发生了变化.值得注意的是.“导航菜单”部分的活动的超链接会根据页面的定位发生变化.所以.需要定义两个可编辑区域.切换至“插入”窗口的“模板”标签.使用“可编辑区域”工具设置可编辑区域ｍｅｎｕ和ｍａｉｎ.实现效果如图8.2.4所示.④保存模板.以下的各个栏目都是应用ｓｕｂ.ｄｗｔ模板制作完成的.上一页下一页返回任务二应用模板完成网站子栏目

步骤二“关于我们”栏目的制作①有两种方法可新建基于模板的页面:方法一:打开菜单“文件”→“新建”.在对话框中切换至“网站模板”.选择“ｓｕｂ”模板.将网页存储为ａｂｏｕｔｕｓ.ｈｔｍｌ.如图8.2.5所示.方法二:在文件窗口中直接新建空白网页ａｂｏｕｔｕｓ.ｈｔｍｌ.然后在资源面板中应用模板.②修改可编辑区域的内容———ｍｅｎｕ部分.将“关于我们”设置为活动的超链接.上一页下一页返回任务二应用模板完成网站子栏目

<ｌｉ><ａｈｒｅｆ＝"＃"ｃｌａｓｓ＝"ａｃｔｉｖｅ">关于我们</ａ></ｌｉ>③可编辑区域ｍａｉｎ中插入“公司概况”的图文材料.设置标题和内容的相应ＣＳＳ样式.最后达到如图8.2.6所示的效果.④应用模板新建“企业文化”页面ｃｕｌｔｕｒｅ.ｈｔｍｌ.最后实现的效果如图8.2.7所示.步骤三“企业动态”栏目的制作①完成“企业动态”列表页的制作.ａ.应用模板ｓｕｂ新建页面ｎｅｗｓ.ｈｔｍｌ.实现“企业动态”列表页的效果如图8.2.8所示.上一页下一页返回任务二应用模板完成网站子栏目

ｂ.使用Ｂｏｏｔｓｔｒａｐ自带的分页组件Ｐａｇｉｎａｔｉｏｎ完成分页的效果.②完成“企业动态”内容页的制作.效果如图8.2.9所示.③举一反三.完成五条新闻详情页的制作和一条公告详情页的制作.④完成首页到分页的超链接.步骤四“公司招聘”栏目的制作公司招聘栏目用户操作的流程为:公司招聘→岗位列表→岗位详情→我要应聘→应聘反馈.由此完成了“公司招聘”的完整流程.以下简略描述制作过程.其中页面都是应用模板ｓｕｂ完成的.上一页下一页返回任务二应用模板完成网站子栏目

①公司招聘:岗位列表页ｊｏｂ.ｈｔｍｌ.如图8.2.10

所示.②单击第一条岗位.出现岗位详情页ｊｏｂ１.ｈｔｍｌ.如图8.2.11所示.③单击“我要应聘”按钮.出现应聘填写的表单页ａｐｐｌｙ.ｈｔｍｌ.如图8.2.12所示.其中表单包括各种类型的表单元素.注意表单元素的命名.且表单提交的动作指向ａｐｐｌｙ＿ｏｋ.ｈｔｍｌ.<ｆｏｒｍｉｄ＝"ｆｏｒｍ１"ｎａｍｅ＝"ｆｏｒｍ１"ｍｅｔｈｏｄ＝"ｐｏｓｔ"ａｃｔｉｏｎ＝"ａｐｐｌｙ＿ｏｋ.ｈｔｍｌ">④表单提交后出现反馈页面.整个流程结束.如图8.2.13所示.上一页下一页返回任务二应用模板完成网站子栏目

步骤五“员工家园”栏目的制作“员工家园”栏目具体分为“企业环境”和“员工活动”两个子栏目.呈现为图片列表页.其中缩略图的排版直接使用Ｂｏｏｔｓｔｒａｐ框架的缩略图组件实现.而图片详情则由Ｂｏｏｔｓｔｒａｐ框架的ＪａｖａＳｃｒｉｐｔ插件模态框实现.①应用模板新建页面ｍｅｍｂｅｒ.ｈｔｍｌ.在可编辑区域ｍａｉｎ中插入Ｂｏｏｔｓｔｒａｐ缩略图组件.更换图片.并删除不必要的文字.此时.１２列栅格化布局类为ｃｏｌ－ｍｄ－４.正好一行放置１２/４＝３个图片.复制代码完成另外８个缩略图.最终实现效果如图8.2.14

所示.上一页下一页返回任务二应用模板完成网站子栏目

<ｄｉｖｃｌａｓｓ＝"ｒｏｗ"><ｄｉｖｃｌａｓｓ＝"ｃｏｌ－ｍｄ－４"><ｄｉｖｃｌａｓｓ＝"ｔｈｕｍｂｎａｉｌ"><ｉｍｇｓｒｃ＝"ｉｍａｇｅｓ/ｍｅｍｂｅｒ/ｈｕａｎ￣ｊｉｎｇ１.ｊｐｇ"ａｌｔ＝"ＴｈｕｍｂｎａｉｌＩｍａｇｅ１"><ｄｉｖｃｌａｓｓ＝"ｃａｐｔｉｏｎ"><ｈ３>Ｔｈｕｍｂｎａｉｌ１ｌａｂｅｌ</ｈ３></ｄｉｖ>上一页下一页返回任务二应用模板完成网站子栏目

</ｄｉｖ></ｄｉｖ></ｄｉｖ>②同理.可完成员工活动页面ｍｅｍｂｅｒ＿ａｃｔｉｖｅ.ｈｔｍｌ的制作.不同的是.缩略图一行放置２个.即<ｄｉｖｃｌａｓｓ＝"ｃｏｌ－ｍｄ－６">.效果如图8.2.15所示.③单击缩略图看大图.使用模态框来实现.首先在第一张缩略图上添加触发事件:上一页下一页返回任务二应用模板完成网站子栏目

<ｄｉｖｃｌａｓｓ＝"ｐｉｃ"><ａｈｒｅｆ＝"＃"ｄａｔａ－ｔｏｇｇｌｅ＝"ｍｏｄａｌ"ｄａｔａ－ｔａｒｇｅｔ＝"＃ｈｕａｎｇｊｉｎｇ１"><ｉｍｇｓｒｃ＝"ｉｍａｇｅｓ/ｍｅｍｂｅｒ/ｈｕａｎｊｉｎｇ１.ｊｐｇ"ａｌｔ＝"ＴｈｕｍｂｎａｉｌＩｍａｇｅ１"></ａ></ｄｉｖ>④然后插入代码实现模态框＃ｈｕａｎｊｉｎｇ１.最终效果如图8.2.16

所示.其中模态框＃ｈｕａｎｊｉｎｇ１的代码实现如下.同理.可以实现“企业环境”子栏目前三张缩略图的触发模态框的效果.上一页下一页返回任务二应用模板完成网站子栏目

<!－－ｍｏｄａｌｈｕａｎｇｊｉｎｇ１－－><ｄｉｖｃｌａｓｓ＝"ｍｏｄａｌｆａｄｅ"ｉｄ＝"ｈｕａｎｇｊｉｎｇ１"ｓｔｙｌｅ＝"ｗｉｄｔｈ:７００ｐｘ.ｍａｒ￣ｇｉｎ:３０ｐｘａｕｔｏ."><ｄｉｖｃｌａｓｓ＝"ｍｏｄａｌ－ｃｏｎｔｅｎｔ"><ｄｉｖｃｌａｓｓ＝"ｍｏｄａｌ－ｈｅａｄｅｒ"><ｂｕｔｔｏｎｔｙｐｅ＝"ｂｕｔｔｏｎ"ｃｌａｓｓ＝"ｃｌｏｓｅ"ｄａｔａ－ｄｉｓｍｉｓｓ＝"ｍｏｄａｌ"ａｒｉａ－ｌａｂｅｌ＝"Ｃｌｏｓｅ"><ｓｐａｎａｒｉａ－ｈｉｄｄｅｎ＝"ｔｒｕｅ">＆ｔｉｍｅｓ.</ｓｐａｎ></ｂｕｔｔｏｎ>上一页下一页返回任务二应用模板完成网站子栏目

<ｈ４ｃｌａｓｓ＝"ｍｏｄａｌ－ｔｉｔｌｅ">企业外景</ｈ４></ｄｉｖ><ｄｉｖｃｌａｓｓ＝"ｍｏｄａｌ－ｂｏｄｙ"ｓｔｙｌｅ＝"ｔｅｘｔ－ａｌｉｇｎ:ｃｅｎｔｅｒ"><ｉｍｇｓｒｃ＝"ｉｍａｇｅｓ/ｍｅｍｂｅｒ/ｈｕａｎｊｉｎｇ１.ｊｐｇ"ｃｌａｓｓ＝"ｉｍｇ－ｒｅｓｐｏｎ￣ｓｉｖｅ"ａｌｔ＝"Ｐｌａｃｅｈｏｌｄｅｒｉｍａｇｅ"ｓｔｙｌｅ＝"ｄｉｓｐｌａｙ:ｉｎｌｉｎｅ－ｂｌｏｃｋ">上一页下一页返回任务二应用模板完成网站子栏目

</ｄｉｖ><ｄｉｖｃｌａｓｓ＝"ｍｏｄａｌ－ｆｏｏｔｅｒ"><ｓｐａｎｃｌａｓｓ＝"ｂｔｎｂｔｎ－ｉｎｆｏ"ｄａｔａ－ｄｉｓｍｉｓｓ＝"ｍｏｄａｌ">ｃｌｏｓｅ</ｓｐａｎ></ｄｉｖ></ｄｉｖ></ｄｉｖ>步骤六“联系我们”栏目的制作“联系我们”是一个简单的单页面.其中的地图使用百度地图ＪａｖａＳｃｒｉｐｔＡＰＩ代码生成.也可直接截屏放一张地图的图片文件.效果如图8.2.17所示.上一页下一页返回任务二应用模板完成网站子栏目

其中插入的百度地图代码如下.“密钥”可用自己在百度ＡＰＩ申请的密钥代替:<ｄｉｖｉｄ＝"ａｌｌｍａｐ"></ｄｉｖ><ｓｃｒｉｐｔｔｙｐｅ＝"ｔｅｘｔ/ｊａｖａｓｃｒｉｐｔ"ｓｒｃ＝"ｈｔｔｐ://ａｐｉ.ｍａｐ.ｂａｉｄｕ.ｃｏｍ/ａｐｉ?ｖ＝２.０＆ａｋ＝密钥"></ｓｃｒｉｐｔ><ｓｃｒｉｐｔｔｙｐｅ＝"ｔｅｘｔ/ｊａｖａｓｃｒｉｐｔ">上一页下一页返回任务二应用模板完成网站子栏目

//百度地图ＡＰＩ功能ｖａｒｍａｐ＝ｎｅｗＢＭａｐ.Ｍａｐ("ａｌｌｍａｐ").ｖａｒｐｏｉｎｔ＝ｎｅｗＢＭａｐ.Ｐｏｉｎｔ(１１８.８１９５８２.３２.０７２３５４).ｖａｒｍａｒｋｅｒ＝ｎｅｗＢＭａｐ.Ｍａｒｋｅｒ(ｐｏｉｎｔ).//创建标注ｍａｐ.ａｄｄＯｖｅｒｌａｙ(ｍａｒｋｅｒ).//将标注添加到地图中ｍａｐ.ｃｅｎｔｅｒＡｎｄＺｏｏｍ(ｐｏｉｎｔ.１５).ｍａｐ.ｅｎａｂｌｅＳｃｒｏｌｌＷｈｅｅｌＺｏｏｍ(ｔｒｕｅ).上一页下一页返回任务二应用模板完成网站子栏目

ｖａｒｏｐｔｓ＝{ｗｉｄｔｈ:３２０.//信息窗口宽度ｈｅｉｇｈｔ:８０.//信息窗口高度ｔｉｔｌｅ:"<ｓｐａｎｓｔｙｌｅ＝ˈｃｏｌｏｒ:＃ｆ３６ｃ００ˈ>江苏全瀚通信</ｓｐａｎ>".//信息窗口标题ｅｎａｂｌｅＭｅｓｓａｇｅ:ｆａｌｓｅ.//设置允许信息窗发送短息上一页下一页返回任务二应用模板完成网站子栏目

}ｖａｒｉｎｆｏＷｉｎｄｏｗ＝ｎｅｗＢＭａｐ.ＩｎｆｏＷｉｎｄｏｗ("地址:南京市鼓楼区东宝路８号时代天地广场<ｂｒ/>电话:０２５－８８８８８８８８".ｏｐｔｓ).//创建信息窗口对象ｍａｒｋｅｒ.ａｄｄＥｖｅｎｔＬｉｓｔｅｎｅｒ("ｃｌｉｃｋ".ｆｕｎｃｔｉｏｎ(){ｍａｐ.ｏｐｅｎＩｎｆｏＷｉｎｄｏｗ(ｉｎｆｏＷｉｎｄｏｗ.ｐｏｉｎｔ).//开启信息窗口}).</ｓｃｒｉｐｔ>上一页下一页返回任务二应用模板完成网站子栏目

而ＤＩＶ＃ａｌｌｍａｐ的ＣＳＳ样式为:＃ａｌｌｍａｐ{ｗｉｄｔｈ:６５０ｐｘ.ｍａｒｇｉｎ:０ｐｘａｕｔｏ.ｈｅｉｇｈｔ:４５０ｐｘ.}上一页下一页返回任务二应用模板完成网站子栏目

步骤七完成站点的超链接①修改ｓｕｂ.ｄｗｔ中导航部分的超链接.并更新各基于该模板的ｈｔｍｌ页面.②完成首页到分页的超链接.③测试整个网站.上一页下一页返回任务二应用模板完成网站子栏目

(五)任务评价上一页下一页返回任务二应用模板完成网站子栏目

(六)思考练习上一页下一页返回任务二应用模板完成网站子栏目

４.举例说明块级元素和行内元素的区别、这两者之间如