LOGO网页设计与制作设计说明书网页设计与制作设计说明书姓姓姓姓 名：名：名：名：蒋怀钰蒋怀钰蒋怀钰蒋怀钰学号：学号：学号：学号：20109213201092132010921320109213指导教师：赵艳指导教师：赵艳指导教师：赵艳指导教师：赵艳完成日期：完成日期：完成日期：完成日期：2012.12.102012.12.102012.12.102012.12.10目录目录二、设计理念主题释义四、风格 、色调一、 选题与要求三、 LOGO 五、布局 六、软件工具目录目录七、设计流程八、网站结构 十、总结 、感悟九、详细设计与问题解决十一、参考文献一、选题与要求选题与要求选题选题 “中国西北游，出发在兰州中国西北游，出发在兰州”宣传网站的制作宣传网站的制作（难易程度 ： ）要求要求一、 内容翔实，脉络清晰。网站一旦建立就要能付诸使用。且每个网站至少包含15个静态页面。二、 要有网站规划设计说明书，包括网站主题、定位、风格及网站的页面框架结构（一式两份，电子一份，文本一份）。三、 首页基本形态设计，包括色彩、框架、风格等（一式两份，电子一份，文本一份）。四、 网站要求定位准确，风格清新自然，色彩搭配合理，动画色彩亮丽，动感符合网站整体风格。五、 网站的设计要以新颖、别致、美观为主。色彩鲜艳且和谐，网站动态效果明显且有创意。六、 网站内容要实事求是。文字翔实清楚，图片雅致清晰。绝不允许使用不文明或不雅观的文字和图片，如有违反，考试成绩以不及格论处。七、 网站所有素材均为组员自己采集搜素，可以使用多种手段或工具。如数码照片、扫描照片及自己在图像编辑软件上编辑产生。八、 网站文件和文件夹的命名及目录结构必须符合理论讲授的规定，否则成绩按不及格处理。九、 网站选题完成后，如有不解和疑问可咨询代课教师，但必须要符合选题要求。可以在互联网上参考同主题或同类型的网站进行制作。十、 网站制作由小组完成，每组一人。十一、 在十六周上交设计规划书及网站首页，如不符合要求，重新设计。十二、 每个题目有不同的难度值，在打分时，难度值高的题目要有难度加分项,每个难度值平均2分。十三、 网站完成，所用到的所有文件必须全部上交。二、设计理念主题释义 随着人类生活的发展，提倡绿色生活，低碳经济。我们越发感到环境给我们带来的压力和责任。为了更好的加入到环保的的大军，环境时空网基于网页制作软件，给大家 做出简单明了的环保网页，介绍环保的历史发展，生活中环保的小知识，以及和我们息息相关的生活-衣食住行中的环保知识，环保的法律政策。希望通过本网站的宣传， 提升我们每个人的环保理念，环保的法律政策。希望通过本网站的宣传，提升我们每个人的环保理念，做一个环保的好公民。同时，在第十一章的内容中，简单的介绍软件 Dreamweaver CS3 的操作和代码含义， 软件 Photoshop 的简单操作和 CSS 的应用，目的在于了解简单静态网页的制作和排版。最后总结出此次制作网页全过程的心得体会，为以后的网页制作积累经验。三、LOGO LOGO是一个网站的标志，也是网站形象的重要体现。看到一个logo就会想到一个网站的品牌，例如百度和google，他们网站的logo就是自己品牌的体现，一个好的logo，我们可以从中了解这个网站的类型，或者内容，例如土豆网的笑脸标志，就会知道是个视频网站，尤其是在布满各种logo的页面链接中，这种作用会更明显，所以网站logo的设计是重要的，而运用logo去推广自己的网站或者做品牌建设也是推广过程中必不可少的，本网站的logo是一副图片，简单大方，其中包含网站的名字，电话号码等重要信息。如下图： 四、风格 、色调 网站的主色调为绿色配以不同深浅、亮度的白色及蓝色做辅助。绿色是植物的颜色在中国文化中有生命的含义，绿色亦象征和平、友善。以绿色作为旅游主题网站的主色调是比较合适的。五、布局主页： 宽945px 高2961px宽度945刚好能在方屏上显示，不会产生水平滚动条，方便浏览。由于我做的是正版官方网站，网页内容多，高度就大一些。设计以盒模型为主，表格为辅，采用 css 的链接式和嵌入式配合二级页面：内容页介绍。为保持和主页风格的一致，仍采用合模型为主，表格为辅的布局方式。六、软件工具Dreamweaver 8.0flashAdobe Photoshop CS3使用Photoshop处理图片 使用Flash制作动画效果 资料的整合七、设计流程 12345FW中制作模板 、切片、切片导出、调试首页制作内容页制作添加链接 、检查调试总结提交确定主题、找相关资料、资料归类整理6登录栏、搜索栏LOGO导航栏站内搜索在线服务推荐图片相关企业品牌展示城市环保门票图片八、总体设计模式图动画热点新闻酒店图片酒店科技温泉图片景点网站信息主页交通机票九、详细设计与问题解决具体共制作20张网页，以首页 index 为例子，截取主页登录栏代码如下： 欣欣首页 旅游路线 机票 酒店 旅行服务 登录 免费注册 我的欣欣 表单的使用表单的使用表单是一个包含表单元素的区域。 表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。 表单使用表单标 签（）定义。表单的使用使网页更有 互动性，功能更加强大。为图片添加指定颜色的边框对于没有边框的图片而言，直接插入到网页中，在显示效果上是相当差的。因为这里有一个“Border”属性，可以让你直接设置边框的宽度。颜色呢？面板上并没有提供颜色的选择呀！呵呵，其实这里有一个技巧问题，用鼠标选择图片对象，注意不是点击选中，而是拖动选择。象设定文字颜色一样进行就可以了。添加图片及链接文字的提示信息添加图片及链接文字的提示信息在我们浏览网页时，当鼠标停留在图片对象或链接上时，在鼠标的右下有时会出现一个提示信息框。对目标进行一定的注释说明。在一些场合，它的作用是很重要的。下面先看看图片提示信息的添加，选中图片对象，在属性面板里你会发现有个“Alt”输入框。默认情况下，该输入框是空白的。在这里录入需要的提示内容就可以了。那么链接提示的制作就没这么简单了。因为DW中没有直接提供该功能，因此我们需要通过添加HTML代码来实现。在a href=“” 中添加“title”属性。title=提示内容即可。网页载入时，象许多商业网站那样，弹出一个广告窗口这在不少大型商业网站中，是时常见到的。在DW中可以轻松通过Behavior行为实现。既然是载入时，我们可以把整个网页内容视为事件对象。在DW编辑窗口中鼠标点击左下角的“body”标签，这时你能注意到全部网页内容已经选中了。单击“快速启动板”中的“Behavior”按钮，进入行为面板，选择“Open Browse Window”项，这时你还可以对窗口样式进行自定义，比如大小，工具按钮的保留等等。另外还有一点就是别忘了对应的事件是“Onload”.网页自动刷新网页自动刷新插入 / html / 文件头标签 / 刷新，来进行插入。同时还可以插入作者，网页说明等等。定义网页的关键字（定义网页的关键字（KeynameKeyname）当用户使用搜索引擎search合适内容的网页时，关键字起着一个不容忽视的作用。大多的搜索服务器会每隔一段时间自动探测网络中是否有新网页产生，并把他们按关键字进行记录，以方便用户查询。你当然想让你的网页出现在搜索引擎的查询返回列表中了，这时关键字的定义就尤为重要了。同样在“Head”面板部分，单击“Keywords”按钮，录入需要逐个定义的关键字即可，注意每个关键字以“；”号隔开，数目没有限制。水平线设置颜色水平线设置颜色在DW中，当通过菜单“Insert”-“Horizonal Rule”插入水平线时，在属性面板中你会发现并没有提供关于水平线颜色的设置，因为最早NC中不支持标签hr（水平线的HTML代码）的COLOR属性，所以DW也没有关于它的设置。看来需要的话，我们只能直接进入源文件更改了。hr color=对应颜色的代码更改浏览器中鼠标的更改浏览器中鼠标的“形状形状”一般情况下，鼠标在浏览器中以“箭头”的样式出现，改变鼠标形状在DW中是通过“CSS样式表”来实现的。网页中的链接网页中的链接1.1.定制可自由在页面内跳转的链接定制可自由在页面内跳转的链接，这可以通过插入命名标记来实现。通过一个类似目录的列表，可方便的跳转到页面内的任何部分，它的使用是专门为“超长内容”网页设计的。先确定链接指向的位置，即屏幕跳转后停留的位置。2.2.电子邮件链接电子邮件链接，所谓的“电子邮件链接”即是当我们点击它时，浏览器会自动调用默认使用的邮件客户端，输入“有问题MAIL ME”字样，鼠标拖拉选中，切换到属性面板，在LINK输入框中键入如下命令：Mailto：XXX163.com？Subject=网友来信&bc=其他电子邮件地址&bcc=其他电子邮件地址。其中Mailto为邮件链接的协议，Subject 为邮件的标题，bc是同时抄送的邮件地址，bcc代表的也就是暗送了。 3. 3.图片链接图片链接 整张图片的链接，可以选中图片后，通过属性面板来链接，图片部分地方的链接，即图片“热点”，选中图片，这时在属性面板左下的位置，有一个“Map” 工具栏，其右边是三个用来圈定不同区域的按钮，以其中的矩形工具为例，选中后，鼠标停留在图片上会以一种“+”的形状显示出来，代表可以左右拖拉，完成后依次你可以完成多个热点区域的链接制作。注意各区域不可重叠。4.4.细线表格的制作细线表格的制作 建立一个1行1列的表格，然后将它的“Border”值设为1不就可以了。实际上，用这种方法制作的表格根本不是所说的边框为1的方格，而是要“粗”的多！同样先插入一个1行1列的表格，将表格的 “border”、“cellpadding”设置为“0”，“cellspacing”设置为“1”。设定表格的“bgcolor”为红色（即为边框的颜色），同时设定单元格的“bgcolor”为白色（即同背景色）同样，制作一条宽度为1的细线，并不是直接插入，主要是插入后过粗，没有需要的细腻感！应该在插入后设定“Height” 高度为1，就会产生宽度为1的细线。C Cssss样式的使用样式的使用Css样式的使用，使表现和内容相分离。将设计部分剥离出来放在一个独立样式文件中，你可以减少未来网页无效的可能。而且使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。可以将许多网页的风格格式同时更新，不用再一页一页地更新了。你可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的行，那么整个站点的所有页面都会随之发生变动。强大的字体控制和排版能力。CSS控制字体的能力比糟糕的FONT标签好多了，有了CSS，我们不再需要用FONT标签或者透明的1 px GIF图片来控制标题，改变字体颜色，字体样式等等。库和模板的使用库和模板的使用模板是一种特殊类型的文档，用于设计固定的页面布局。使用模板可以一次更新多个页面，当需要制作大量布局基本一致的网页时，使用模板可以大大提高网页的制作效率。 设计模板时，可以指定在基于模板的文档中哪些内容是用户“可编辑的”；使用模板时，可以控制哪些页面元素可以由模板用户进行编辑，也可以在文档中设计包括多种类型的模板区域。 本地站点用到的所有模板都保存在网站根目录下的Templates文件夹中，其扩展名为.dwt。Css层叠样式，分为内部样式，和外部样式，内部样式的导出和外部样式的链接导入可以减轻工作量，提高效率，是一种很有效地方式。内部样式块对象 ，可以通过增加css样式，仅对该文档来实现，可以导出为外部样式，链入外部样式表链入外部样式表 (Linking to a Style Sheet) 先建立外部样式表文件（.css），然后使用 HTML的 link 对象。本网页用到了十几种内部css样式，三种外部样式。本网站主页面index.html和模板ziyemoban.dwt为例进行说明。 该模板页面上部是导航栏，单击各个栏目的名称可以进入相应的二级页面，并且二级页面都与此页面布局相同。该网站由不同的表格嵌套组成，上部是网站的Logo和搜索栏，导航栏，各个子页面都和主页面的布局相同。 Dreamweaver的模板可以将网页的布局与内容分开，一个页面被存储为模板之后，具有相同布局的页面就可以通过模板创建了。这样不仅提高了网页的制作效率，还可以保证网页的一致和连贯。 创建模板，可以从现有文档中创建模板，或者从新建的空白文档中创建模板，另外，还可以利用【资源】面板创建模板。 库是一种特殊的 Dreamweaver 文件，其中包含了已经创建以便放在 Web 页上的单独的资源或资源副本的集合。 7.3.1 库项目概述 库里的所有资源称为库项目。如果只是想让页面具有相同的标题和脚注，但具有不同的页面布局，请使用库项目存储标题和脚注。库项目是可以在多个页面中重复使用的存储页面元素；每当更改某个库项目的内容时，您都可以更新所有使用该项目的页面。库中存储的页面元素包括图像、表格、声音和 Flash 文件等等。 Dreamweaver 将每个库项目作为一个单独的文件（文件扩展名为 .lbi）保存在站点本地根文件夹下的 Library 文件夹中。每个站点都有自己的库。 使用库项目时，Dreamweaver 不是在 Web 页中插入库项目，而是插入一个指向库项目的链接。即Dreamweaver 向文档中插入该项目的 HTML 源代码副本，并添加一个包含对原始外部项目的引用的 HTML 注释。 同样库的使用大大增加了网页制作的效率。十、总结 了解制作的背景知识，确定制作的主题和目的对于能否成功的做出一张好的网 页是非常重要的。制作好的网页，一定要用好 photoshop,flash 辅助软件。做网页，就是一个搜集素材，组织整理的过程。是先分后总的过程，不是先总后 分的过程。开始的时候没有弄明白，以“先总后分”的思路指导自己去制作，走了很多的弯路，浪费了许多的时间和精力。后来自己明白了一个真理：没有素材，拿什么去组 织网页？制作网页/网站，是一个熟能生巧，巧能生精的过程。不要套用模板。套用别的网站上的模板，对很多东西都说不清楚，动手制作能力为零。现在很多网站上也有类似的 ps 模板可以下载，也有很多 ps 制作的漂亮按钮，但对实际工作来讲意义不是很大，掌握 ps 基本的创作方法才是正道。很多细节性的东西 理解了，掌握了，重新更换的时候，心理也比较有底气，才能做到游刃有余。十一、参考文献参考文献-超梦幻劲爆网页（中国青年出版社）LOGO谢谢观看！谢谢观看！