(应用divcss技术.docVIP

网页制作 作业（四） 应用div/css技术制作网页并结合层、行为与spry构件制作特效 网页主题、设计风格、配色方案的定位 网页主题：本网站是书籍网站,介绍书籍网站（书架、读书名言、读者分类、打折书籍、书籍种类、书籍网站的功能、日志、功能、服务等）、必威体育精装版书籍（惊喜书籍、励志名言、优惠书籍）、推荐书籍、用户登录、用户注册、图书购买、关于我们、联系我们、图书价格、定制购买、售后服务。目的在于向访问者展示该网站中的书籍，使其在了解网站内容的同时能注册成为会员、登陆即时购买并在不满意时也能通过售后服务得到补偿。 2、设计风格：书籍是进步的工具，是灵魂拓展的工具。读万卷书,行万里路,书开阔了我们的视野。网上书籍为大众开辟了更为方便之门，快捷方便，为大众所喜爱。因此书籍网站的设计偏重素雅的颜色。 这个网站是简单的国字型的。整个网页背景为白色的。top最顶部即logo是褐色和白色相间，营造气息。 Logo 下面是深褐色的menu,给人以稳重的感觉。 3、配色方案：颜色搭配：网页是白色为底，白色的底色配上小的书籍封面图片以及褐色的页眉，让人感觉读书的圣洁，是一种身心的放松。干净和庄重并存。 Div/CSS技术的设计与实现 1、布局结构图 网页布局： 该网站套用模板。模板中包括logol、menu、页脚（文字和图片）。 其中logol部分为一张图片，其上有书架一角和翻开的书。营造出一种读书的氛围，轻松将人带入书卷境界。 Menu部分有十个小标题：书籍网站（书架、读书名言、读者分类、打折书籍、书籍种类、书籍网站的功能、日志、功能、服务等）、必威体育精装版书籍（惊喜书籍、励志名言、优惠书籍）、推荐书籍、用户登录、用户注册、图书购买、关于我们、联系我们、图书价格、定制购买、售后服务。 页脚部分书籍网站、关于我们、联系我们、售后服务。 网页中间空出左右两部分。这两部分在作业中补充。其中设定成可编辑区。 中间内容： 左边内容主要是导航中的内容。即首页，关于我们，必威体育精装版书籍，推荐书籍，用户登录，用户注册，图书购买，联系我们的具体内容。 右边是与导航内容相关的或读者比较关注的一些零碎的小块知识。比如说打折书籍等。 例如打头网页“首页（Untitled-2）”这页的图片为： 2、CSS的设计与实现 Css在每个网页里都有各自的新建的 .Css文件里面有.里面有ID类的和类的。 其中模板的，框架结构CSS代码如下（列举几个，具体的可见文件里的）： .top { height: 1000px; width: 901px; clip: rect(auto,auto,auto,auto); margin-top: 0px; margin-bottom: 0px; margin-right: auto; margin-left: auto; } .top1 { float: left; height: 137px; width: 901px; background-image: url(file:///C|/Users/Administrator/Desktop/%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/cx/images/images/A01.gif); } .menu { background-color: #5A3121; float: left; height: 25px; width: 901px; } body,td,th { color: #CCCBCA; font-size: 12px; } .left { background-image: url(file:///C|/Users/Administrator/Desktop/%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/cx/images/images/A04.gif); float: left; height: 738px; width: 501px; } .right { background-image: url(file:///C|/Users/Administrator/Desktop/%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E