网页设计指导书.doc

大型作业任务书 设计题目：百居易房屋超市网站首页设计要求：1. 按照网站开发的方法步骤进行网站设计与制作，并编写相应文档；2. 要求设计的网站主题鲜明，内容丰富，布局合理，界面美观，但界面和风格在满足具体的基本要求下可增加自己的创意，发挥自己的创造能力；3. 将以上设计整理编写出大型作业说明书，字数不少于8000字；4. 按期完成大型作业任务，时间为周。 班级：电子商务1203 学号：1001120337 姓名：宋建辉 指导教师：李伟 2013年6月23日摘 要通过本课程安排的实训项目，让学生掌握设计静态网页的基础知识和基本方法，对网页设计的流程有一个全面的认识和了解，并能够独立利用DreamWeaver设计制作出完美的个人网站或商务网站. Dreamweaver是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。随着互联网的家喻户晓，HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器），两者各有千秋。所见则所得网页编辑器的优点就是直观性，使用方便，容易上手，您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别。通过本课程安排的实训项目，让学生掌握设计静态网页的基础知识和基本方法，对网页设计的流程有一个全面的认识和了解，并能够独立利用DreamWeaver设计制作出完美的个人网站或商务网站，一个可视化的网页设计和网站管理工具，支持最新的Web技术，包含HTML检查、HTML格式控制、HTML格式化选项、HomeSite/BBEdit捆绑、可视化网页设计、图像编辑、全局查找替换、全FTP 功能、处理Flash和Shockwave等富媒体格式和动态HTML、基于团队的Web创作。前 言Macromedia公司推出的Dreamweaver网页制作软件可以说是众多网页制作软件中的佼佼者。作为一款专业的网页制作工具，Dreamweaver具有可视化编辑界面和强大的所见即所得网页编辑功能，它不仅可以制作网页，而且为设计和开发站点提供了良好的操作平台，集网页制作与网站管理于一身。用户只需稍稍能看懂HTML语言，就可以应用Dreamweaver制作出跨平台、跨浏览器的精彩网页。Dreamweaver在多媒体方面颇有建树的Macromedia公司推出的可视化网页制作工具，它与Flash、Fireworks合在一起被称为网页制作三剑客，这三个软件相辅相承，是制作网页的最佳选择。其中，Dreamweaver主要用来制作网页文件，制作出来的网页兼容性比较好，制作效率也很高，Flash用来制作精美的网页动画，而Fireworks用来处理网页中的图形。 Dreamweave字面意思为“梦幻编织”，这一软件有着不断变化的丰富内涵和经久不衰的设计思维，它能充分展现你的创意，实现你的想法，锻炼你的能力. 目 录课题来源 01一、网站开发项目需求分析 02二、网页设计的要素 032.1排列方法要素032.2色彩要素042.3网页设计技巧04 2.4 CSS样式的使用05三、网站设计的前期准备 063.1涉及软件063.2软件界面06四、本网站设计规划 08 4.1本网站建设的方向和目的084.1.1网站建设方向 084.1.2网站建设目的 08 五、百居易房屋超市网站结构 10 5.1站点组织结构10 5.2站点目录结构10 六、网站制作步骤 116.1首页制作116.2部分二级页面制作14七、网站最终效果 167.1 主页面效果167.2 部分二级页面效果17 实训体会21参考文献23课题来源随着二十一世纪新兴科技的飞速发展，如今的电子信息产业正在经受着一个巨大的挑战，同时也面临着一个重大的机遇。就目前的科技发展水平而言，电子信息产业的发展已经不能够满足社会化大生产的要求，因此，各个国家集中人力、财力加大对信息技术产业的投入，以适应目前需要。可喜的是在这几十年的发展中我们有了互联网。互联网加大了我们了解世界的眼界，缩紧了人与人之间的距离，这就更容易的使我们走上信息化的道路。以往，人们大多数都是自己操劳自己的住房，后来房地产事业发展壮大，网络迅猛发展，人们便通过网络解决住房问题。正是因为人们的这些需求，越来越多的房地产网站出现在网络上，使人们可以随时了解自己想知道的房子方面的新闻，真正的做到足不出户，便知天下事。把楼房销售与网络连接起来，是今后楼房销售发展的必然方向之一。 第一章 网站开发项目需求分析 一个网站项目的确立是建立在各种各样的需求上面的，这种需求往往来自于客户的实际需求或者是出于公司自身发展的需要，其中客户的实际需求也就是说这种交易性质的需求占了绝大部分。面对对网站开发拥有不同知识层面的客户，项目的负责人对用户需求的理解程度，在很大程度上决定了此类网站开发项目的成败。因此如何更好地的了解、分析、明确用户需求，并且能够准确、清晰以文档的形式表达给参与项目开发的每个成员，保证开发过程按照满足用户需求为目的正确项目开发方向进行，是每个网站开发项目管理者需要面对的问题。所以，做好房地产网站就是为了使广大的消费者提供及时和有效的信息，为其选择适合自己的产品提供良好的参考。 第二章 网页设计的要素 在一个网站中，最重要的页面当属主页，所以在此以主页为例，说明在网页制作中版面设计的问题。从版面设计来讲,一个有特色的主页,必须包含有四个要素：文字，图片，排列方式和主色调，这四者相辅相成，缺一不可。 图片要素 要设计出漂亮的主页，首先要成为计算机图形高手，仅这一点就可以让初学者花上一年半载的时间。图片的要求与页面的内容有关，一些较随意的主页像股票、医药站点等，来访者并不在乎你能否做出精彩的图片，有些时候他们反而觉得放置图象后影响了访问速度，他们关心的只是页面内容；相反像一些需要靠图象来吸引访客的主页，如游戏介绍、影视介绍、风光名胜等站点，图象是一个极为重要的要素，在这里缺少了恰当的图象，整个页面就会黯然失色、就是一个不完整的主页。这需要去学习像photoshop这样的图形图像处理软件，还要有一定的美术基础，如审美观、创意技巧等， 2.1 排列方法要素 主页的第二个要素是排列方法，即网页布局。网页作为一种版面，既有文字，又有图片；文字有大有小，还有标题和正文之分；图片页有大小而且有横竖之别。图片和文字都需要同时展示给观众，不能简单地将其罗列在一个页面上，否则会搞得杂乱无章。关于具体的网页布局，常见的有“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型等，关于它们，在网页设计的相关书籍中或者在网络上都可以看到详细的叙述。比如如果内容非常多，就要考虑用“国字型”或拐角型；而如果内容不算太多而一些说明性的东西比较多，则可以考虑标题正文型；而如果是一个企业网站想展示一下企业形象或个人主页想展示个人风采，封面性是首选；Flash型更灵活一些，好的Flash大大丰富了网页，但是它不能表达过多的文字信息。还没有提到的就是变化型了，只有不断的变化才会提高，才会不断丰富我们的网页。 F、基于屏幕的可视开发环境；G、可视编程环境；H、高级可控制外观组件支持；I、数据绑定；J、Web 服务和 XML 的预建数据连接器；K、项目管理功能；L、源代码控制系统；M、其它2.2 色彩要素 色彩在网页所占比重很大。有了合理清新的色调，会弥补主页上的其它不足。页面的色彩搭配是与网站的主题分不开的，一个网站必须有一种或两种主题色。不至于让浏览者迷失方向，也不至于单调乏味。一般来说，页面的主体文字应尽量使用黑色等较深的颜色，与背景对比明显，按钮、边框等使用彩色。例如教育类网站使用蓝色为主题色，再用红色和黑色作为配色，就能表达出严肃、稳重的效果。 2.3 网页设计技巧 一张完美的主页设计需要积累丰富的知识以及掌握大量的技巧。在这里从框架和CSS样式的运用两方面来介绍网页设计的技巧。 框架的使用 FRAME（框架）是Web上经常会看到的页面结构。框架的最常见用途就是导航。一组框架通常包括一个含有导航条的框架和另一个要显示主要内容页面的框架。 使用框架具有以下优点：访问者的浏览器不需要为每个页面重新加载与导航相关的图形；每个框架都具有自己的滚动条(如果内容太大，在窗口中显示不下)，因此访问者可以独立滚动这些框架。例如，当框架中的内容页面较长时，如果导航条位于不同的框架中，那么向下滚动到页面底部的访问者就不需要再滚动回顶部来使用导航条。 使用框架具有以下缺点：可能难以实现不同框架中各元素的精确图形对齐；对导航进行测试可能很耗时间。 许多专业 Web 设计人员不喜欢使用框架，并且许多浏览 Web 的人也不喜欢框架。在大多数情况下，这种反感是因为遇到了那些使用框架效果不佳或不必要地使用框架的站点(例如，每当访问者单击导航按钮时就重新加载导航框架内容的框架集)。如果框架使用得法(例如，在允许其他框架的内容发生更改的同时，使一个框架中的导航控件保持静态)，则这些框架对于某些站点可能非常有用。 2.4 CSS样式的使用 CSS(层叠样式表)是一种制作网页的新技术,它的全称是级联样式表,即Cascading StyleSheets的缩写，又称之为风格样式表单。CSS是在网页制作过程中普遍用到的技术。采用了CSS技术控制的网页，设计者会更轻松、有效地对页面的整体布局、颜色、字体、链接、背景以及同一页面的不同部分、不同页面的外观和格式等效果实现更加精确地控制。 第三章 网站设计的前期准备 3.1 涉及软件 3.1.1 DreamWeaVer cs5介绍Dreamweaver CS5是Adobe(奥多比)公司收购Macromedia公司后最新推出的Creative Suite 3 设计套装中用于网页设计与制作的组件。作为全球最流行，最优秀的所见即所得的网页编辑器，Dreamweaver可以轻而易举地制作出跨操作系统平台，跨浏览器的充满动感的网页，是目前制作Web页站点,Web页和Web应用程序开发的理想工具。Dreamweaver，Fireworks，Flash被称为网页制作的“三剑客”，这三款工具相辅相承，是制作网页的最佳拍档之一。3.1.2 DreamWeaVer cs5操作界面DreamWeaVer cs5界面设计友好，空间广阔，操作精微细致,是一种所见即所得的网页编辑器，既有效的减少了代码编写的工作量，也确保所设计文档的专业性和兼容性。，如图所示。第四章 本网站设计规划4.1 本网站建设的方向和目的：4.1.1 网站建设方向：网站的建设不仅仅是制作主页的问题，还需要考虑网站的定位、目标用户、网站内容、服务事项、空间方案、安全性、艺术设计、数据库技术等等。任何网站在建设之前就必须明确方向、用途和服务群体等一系列的问题，写出详尽的建站计划，可以说这是网站建设的根源和核心所在。其实任何网站都一样：企业网站的宗旨就是对外宣传企业形象，发布企业最新的企业产品，其服务群体就是为对其产品感兴趣的客户或者正在使用企业产品的用户服务，这就是企业网站的建设方向；个人网站的宗旨就是宣传自己，提供一个自身和外界交流的场所；由此可见，网站的设计方向是依据网站的客户、服务群体等多方面来确定的。4.1.2 本站明确的目的：不同的网站目的要求通过不同的方式来实现。一个展示个人能力的网站与一个以花卉种植为主题的网站，以及一个大型门户网站和一个小型企业网站，其出发点和建站目的都有所不同，在整个网站的建设规划方面的要求也是肯定是大不一样的。因此在规划我的这个网站时，我选择了和楼房销售相关联的主题。本网站预计的用户群体：对于网站的设计者和建设者来说，在设计规划网站时必须要明确自己网站的浏览者，也就是确定自己的用户群体。在已经确定了建设目的的前提下，应根据建站方向所会导致出现的不同用户群体的需求来规划设计整个网站。本网站的结构和风格：网站的风格反映了一个网站的特色，它具有很大的代表性。出色的网站吸引人的地方不仅仅在于其内容，鲜明的结构和独特的风格往往能起到画龙点睛的作用。一个网站即使内容再丰富，如果网站的结构和风格不能吸引人，那也是毫无价值的。往往整个网站的风格是一个网站吸引浏览者的魅力所在，因此应当根据网站的主题、内容和浏览者的要求来设计自己独特的网站风格。那么什么是网站的结构和风格呢？网站的结构是连接网站内容之间的支架。网站的结构是网站的核心和骨架，如果没有网站结构，网站将会变得一团糟。现在，只有高度发展、高度结构化、易用且能独立行走的网站才受浏览者的欢迎。 第五章 百居易房屋超市网站结构5.1 站点组织结构首页购房计算器百姓家常二手房中心置业锦囊房屋信息新闻热区5.2 站点目录结构 第六章 网站制作步骤6.1 首页制作打开Dreamweaver软件界面，执行“站点/新建站点”，在打开的未命名站点制作步骤：站点定义为对话框，切换到高级面板，将站点名称设为“百居易”；单击本地根文件夹后的，在弹出对话框中选择正确的路径。1、 新建一个网页，并保存在同一级文件夹下。2、 在页面属性中将其背景图片设为pic/bg1-2.gif，在常用面板上单击表格按钮，插入一个2列1行的表格1。在第1列中插入一个22行1列的表格2，将最后两行背景颜色改为红色。3、 在第2列中插入一个3行1列表格3。在第1行中插入一个2列1行的表格4。光标置于第1行中，单击常用面板中的图像按钮，插入pic/logo.GIF图片。4、 在第2列中插入一个2行1列的表格5，并将第1行拆分为2列，在每个单元格中插入相应图片。在第2行插入相应图片后，选中图片，在属性面板上单击矩形热点工具，依照图片上大小绘制多个热点。5、 在表格3的第2行插入一个3列1行的表格6，在表格6第1列插入一个6行1列的表格7，在表格7的第1、3、5单元格中插入相应图片，将光标放在表格7的第2行中，在代码编辑区域输入相关代码，改变第2行的对齐方式水平方向为：居中对齐；在表格7的第4行插入一个1行1列的表格8，改变表格7第4行的对齐方式水平方向为：居中对齐；同样在表格7的第6行插入一个8行1列的表格9，在表格9中插入对应图片。6、 在表格6的第2列插入一个5行1列的表格10，在表格10的第1行中插入一个2列1行的表格11，将表格11的第1列拆分为2行，在第1行插入图片pic/house2.gif，在第2行的代码编辑区域中输入相关代码。7、 在表格11的第2列中插入一个2行1行列的表格12，在表格12的第1行插入一个1行2列的表格13，在表格13的第1列插入图片pic/p_01.gif，在第2列插入图片pic/bang.gif，第2列的对齐方式为水平：居中对齐；将表格13的背景颜色设为#F7DEDE。8、 在表格12的第2行中插入一个9行3列的表格14，在表格14中插入对应文字。9、在表格10的第2行插入图片pic/line.gif;在表格10的第3行插入一个2行1列表格15，在表格15第1行插入图片pic/fangwu.gif;在第2行插入一个17行6列的表格16，在表格16中输入相关内容。10、在表格10的第4行中插入图片pic/line.gif;在表格10的第5行中插入一个2行1列的表格17，在表格17第1行插入图片pic/jinnang.gif，并输入相关文字；在表格17第2行中插入一个13行2列的表格18，并在表格18中输入法相关内容。11、在表格6中插入一个5行1列的表格19，将表格19的背景图片设为bg.gif；在表格19的第1行中插入一个2行1列的表格20；在表格20的第1行中插入图片pic/so.gif。12、光标放在表格20的第2行中，单击表单面板中表单域，在表单域中插入一个10行1列的表格21，在表格21的第1、2行中插入单选按钮并输入相关文字，在第3、4行中插入列表表单。在第5、6中，输入文字。在第7、8行中插入文本字段。在第9、10中，输入文字。13、在表格19第2行中插入图片pic/line_1.gif；在表格19第3中插入一个8行2列的表格22，在表格22第1行的2列合并成一个单元格，并插入图片pic/esf.gif。在表格22的其他单元格中输入文字。14、在表格19第3行中插入图片pic/line_1.gif；在表格19第5行中插入一个3行1列的表格23，在第1行中插入图片pic/bbs.gif；在表格23的第2行中输入文字并对其进行项目列表编辑。15、在表格3的第3行输入文字和版权符号。并将背景颜色设为#CC0000。16、在布局面板中单击绘制AP Div按钮，在页面中绘制一个AP元素。在其中插入一个图片；拖动AP元素到时间轴上，设定运动时间和关键帧来控制AP元素的运动。17、预览并再次保存。6.2 部分二级页面制作 1、Ctrl+N打开新建面板，选择空模板中的HTML模板的无，单击创建按钮。保存在对应文件夹下。 2、在页面了插入一个5行1列的表格1，在表格1的第1行中插入一个2行1列的表格2，在表格2的第1行中插入一个2列1行的表格3，在表格3的第1列中插入图片pic/logo.GIF。 3、在表格3和第2列中插入一个2行1列的表格4。在表格4的第1行拆分为2列，在第1、2列中分别插入图片。 4、在表格4第2行中插入图片后，使用热点工具，创建超级链接。 5、在表格2的第2行插入图片，将第3行的背景图片设为pic/yellow.gif 6、在表格2的第4行插入一个2列1行的表格5，在表格5的第1列中执行“插入记录/模板对象/可编辑区域”插入一个可编辑区域。 7、在表格5的第2列中插入图片right-backgroup.gif。 8、使用模板创建三个子网页，并编辑。第七章 网站最终效果7.1 主页面效果7.2 部分二级页面效果：第一个子网页效果图：第二个子网页的最终效果图：第三个子网页的最终效果图：第四个子网页的最终效果图：实训体会 经过两个星期的实训，对网页制作的认识有所加深。涉及了各方面的知识，大大扩展了我的知识面，同时是我学会了如何使用所学的知识去解决一些实际的问题。在设计中我深知自己掌握的知识还远远不够，掌握的一些理论知识应用到实践中去，总会出现这样或那样的问题，不是理论没有掌握好，而是光知道书本上的知识是远远不够的，一定