网页设计报告_5.docVIP

钦 州　学　院 网页设计课程设计报告 学院网站设计制作 院 系 物理与材料科学学院 专 业 自 动 化 班 级 2008级1班 姓 名 邹文轩、黄荣道、蒋涛、张方兵和黄明昌 学 号 指导教师单位 钦 州 学 院 指导教师姓名 曲 艺 指导教师职称 助 教 2011年11月 学院网站设计 自动化专业2008级 邹文轩 黄荣道 蒋涛 张方兵 黄明昌 指导教师 曲艺 摘要：近年来随着网络信息技术的广泛应用，互联网正逐步改变着人们的生活方式和工作方式。在这一热潮中，网页制作技术得到了很多人的青睐，而在目前流行的“所见即所得”的网页制作软件制作中，Dreamweaver无疑是使用最广泛、功能最优秀的一款。掌握网页设计基本概念，学习dreamweaver软件并利用制造商业网页设计，掌握具体的字体、图形、图象、标志等等，常常表现为点线面、色彩、主次等视觉因素。这些因素的不同使用都会影响读者的视觉习惯和心理变化。本文将分析我们做这商业网页设计的一些的设计操作，揭示网页设计的全过程与传达信息。 关键词：Dreamweaver，photoshop，超链接，物理与材料科学学院 TOC \o 1-2 \h \z \u 设计目的： 3 设计技术指标与要求： 3 1 Dreamweaver使用介绍 3 2 概述 3 2.1 网页名称与制作目的 3 2.2 网页设计的要素分析 4 2.3 网页布局与制作 5 3 设计工具 5 4 网页流程分析 5 5设计步骤及关键代码 6 5.1 学院图标和名称 6 5.2 导航条 6 5.3 模板制作 7 5.4 首页 7 5.5 学院概况介绍 8 5.6 专业设置介绍 8 5.7 师资力量 9 5.8 学习园地 9 5.9 学院动向 10 5.10 联系我们 10 6 存在的问题及不足 11 7 设计体会 11 参考文献 11 设计目的： （1）进一步掌握网页设计所学的理论知识。 （2）实现理论知识的实际应用，设计出学院网站。 设计技术指标与要求： （1）利用相关软件技术设计15个网页页面 （2）利用photoshop美化图片 （3）制作图片链接以及文字连接 （4）背景色的处理与搭配 （5）用PhotoShop设计制作页面头条banner 1 Dreamweaver使用介绍 超链接是整个网页制作中最活泼、最有吸引力的一种元素。表格在许多工作中有着广泛的应用，例如分割网页和制作层特效。框架网页是一种特殊的HTML网页，使用框架网页可以同时浏览几个不同的Web页面，使用Web页面显示一致的用户界面和灵活的页面内容。我们这次制作企业类的网站，有动态和静态的效果。制作网页的动态效果包括在网页中使用网页布局、插件，及创建、布置和管理站点等。我们制作的网页中包含了超链接、图片、框架网页等网页元素，其中图片、图像采用JPG格式。 通过这次课程设计实践，我们进一步了解了以上几种技术的使用，我们了解到仅仅使用到一种或者两种网页制作技术，是不可能创作一个优秀的Web页面的，一个美观而实用的Web页面往往需要综合利用各种技术。 2 概述 2.1 网页名称与制作目的 我们的网站名称为“物理与材料科学学院”，主要是通过自已的设计，理解、运用网页制作的基本知识，使之得以融会贯通，运用css统一网页的样式与div对网页进行布局。在制作物理与材料科学学院网站时我们上网收集了许多相关的资料主要是我们学院网站的代码，然后把它们加工处理成我们院的网页，同时也搜集了一些对制作网页有用的资料。本网站主要是让更多的人知道我们学院，了解我们学院多方面的信息，从而对我们学院有更深一层的了解，通过此次网站设计我们锻炼了自己的动手能力，团队合作能力等。现在的网络信息发展更新是如此的快，所以我们对信息的了解大部分都是通过方便的网络了解到的，因此，我们设计的网站也是通过网络宣传方式很好地展示给需要了解我们学院的人，以简便快捷的方式及时的传达我们学院的重要信息，以便师生们、网友们能更快地了解到他们所需的信息，从而宣传我们学院、增加我们学院在校内外的影响力。 2.2 网页设计的要素分析 在一个网站中，最重要的页面当属主页，所以在此以主页为例，说明在网页制作中版面设计的问题。从版面设计来讲,一个有特色的主页,必须包含有四个要素：文字，图片，排列方式和主色调，这四者相辅相成，缺一不可。 （1）文字 我们页面所取的文字都是根据我们眼睛的一个感官