网页设计课程设计.docx

《网页设计课程设计.docx》由会员分享，可在线阅读，更多相关《网页设计课程设计.docx（15页珍藏版）》请在冰豆网上搜索。

网页设计课程设计

课程设计任务书

题目：

中南大学

学号2

姓名

专业

课程网

指导教师

完成时间：

2015年5月----2015年6月

课程设计任务书及成绩评定

题目

中南大学

课程设计的任务及要求

根据主题组织网站结构，网站结构应层次分明，内容重点突出。

要求网站具有实用的功能，注重网站实用性。

网站页面设计庄重大方，形式新颖，创意独特，颜色协调；合理运用多种形式表现主题，体现网站风格。

页面规划合理、美观、易扩充。

内容图文并茂，视觉效果好。

课程设计所需的软件、硬件等

软件:

AdobeDreamweaverCS4

硬件:

CPU>=1GHz

内存>=256M

硬盘>=20G

课程设计进度计划

2015年进行可行性研究，完成选题.

2015年6月上旬，根据选题查阅资料、进行概要设计，确定设计方案.

2015年6月下旬,详细设计，实施设计方案，编写网页。

2015年6月30日，完成课程设计（任务书）的撰写。

任课教师评语

成绩：

教师签名：

日期:

摘要

本系统采用AdobeDreamweaverCS4作为网页设计环境,采用一系列所学内容设计一个网页。

DreamweaverCS4即为Dreamweaver的CS4版本，Dreamweaver是美国MACROMEDIA公司开发（后被Adobe公司收购）的集网页制作和管理网站于一身的所见即所得网页编辑器。

AdobeDreamweaverCS4新版增加了以下特性：

实时视图新增功能

借助DreamweaverCS4中新增的实时视图在真实的浏览器环境中设计网页,同时仍可以直接访问代码。

呈现的屏幕内容会立即反映出对代码所做的更改。

编辑本段代码提示新增功能，借助改进的JavaScript核心对象和基本数据类型支持,更快速、准确地编写JavaScript。

通过集成包括jQuery、Prototype和Spry在内的流行JavaScript框架,充分利用DreamweaverCS4的扩展编码功能。

编辑本段相关文件新增功能

在DreamweaverCS4中使用“相关文件”功能更有效地管理构成目前网页的各种文件。

单击任何相关文件即可在“代码”视图中查看其源代码,在“设计”视图中查看父页面。

编辑本段集成编码增强功能

领略内建代码提示的强大功能,令HTML、JavaScript、Spry和jQuery等Ajax框架、原型和几种服务器语言中的编码更快、更清晰。

编辑本段代码导航器新增功能

新增的“代码导航器”功能可显示影响当前选定内容的所有代码源,如CSS规则、服务器端包括、外部JavaScript功能、Dreamweaver模板、iframe源文件等。

它是著名网站开发工具。

它使用所见即所得的接口，亦有HTML编辑的功能。

就是你一边做着就可以看到做出来的效果是什么样子的，一般网站页面都可以用它来制作，只能做静态页面，用它不能做互动的页面。

。

。

。

网络公司或是网络工程师必会软件

目录

摘要2

目录..3

正文3

一、基本设计任务及要求、所用仪器设备...........................................................................3

二、总体设计方案及主要设计原理4

三、设计思路4

4、实现技术及源程序代码............................................5

五、结束语（心得体会、改进方向）.........................................12

参考文献...........................................................13

一、基本设计任务及要求、所用仪器设备：

1）利用AdobeDreamweaverCS4来实现网页的设计；

2）着重利用AdobeDreamweaverCS4来实现网页设计效果；

要求：

1.主要要求

1）.功能完善

根据主题组织网站结构，网站结构应层次分明，内容重点突出。

要求网站具有实用的功能，注重网站实用性。

2）.页面美观

网站页面设计庄重大方，形式新颖，创意独特，颜色协调；合理运用多种形式表现主题，体现网站风格。

页面规划合理、美观、易扩充。

内容图文并茂，视觉效果好。

3）.制作规范

网页制作规范，栏目分类清晰，信息归类科学，内容丰富详实，网站导航明确，链接无误，便于使用。

4）.技巧运用

能够运用一定的网页设计技巧，恰到好处地烘托整体页面效果

5）.创意

页面设计具有一定的创意。

6）.文责清楚

网站设计过程中加强版权意识，如使用可能产生版权纠纷的文字、图形、设计风格等，责任自负。

7）内容实用

主题自选，网站主题明确，网站名称规范，具有网站logo和Banner，内容最好体现大学生活。

由于现在的网页浏览已成为人们生活中最经常的事情，所以设计网页来满足人们的需求。

2、总体设计

整个网页包括网页链接，主页，主题简介等。

3、详细设计

网页设计采用Div标签，表格设计，按钮等操作来完成整体布局。

插入图片，文字介绍来完成各个页面的设置，采用超链接链接到各个网页，从而丰富网页内容。

二、总体设计方案及主要设计原理

1、总体设计方案

整个网站包括7个网页所构成：

首页，学校文化，通知公告，校园校报，求职就业，寝室文化，资源共享。

7个网页详细的介绍了中南大学丰富多彩的生活。

2、主要设计原理

网页设计采用表格设计，按钮等操作来完成整体布局。

插入图片，文字以及各种超链接，幻灯片和flash等工具介绍来完成各个页面的设置，超链接链接到各个网页，从而丰富网页内容；动画的添加使得网页更富有动感，鲜明性增加。

3．设计思路

通过对中南大学学校文化，通知公告，校园校报，寝室文化等的介绍，是大家更好地了解自己所喜爱的大学，将它介绍给更多的人。

四．设计主题及代码

1.主页及部分代码

DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">

functionclearText（field）

{

if（field.defaultValue==field.value）field.value='';

elseif（field.value==''）field.value=field.defaultValue;

}

$（function（）{

$（"div.templatemo_galleryimg"）.fullsize（）;

}）;