当前位置:首页 >> 互联网 >>

网页设计说明书



网页设计说明书

楚雄师范学院

网 页 设 计 说 明 书

学校:楚雄师范学院 班级:12 级电信一班 科目:网页设计说明书 姓名:刘保婕 学号:20120922120

1

1

网页设计说明书

楚雄师范学院

情人节网页制作说明书 目录
引言 第一章 网页概述 第二章 网页设计思路 2.1 网站开发的意义 2.2 网页设计背景 2.3 开发环境以及开发工具 2.4 素材收集 2.5 网页设计内容构想 第三章 网页内容简介 3.1 网页功能简介 3.2 网页主要功能描述 3.3 网页的浏览 第四章 网页设计 4.1 网页结构总图 4.2 各网页模块的组成 4.3 网页制作环境 4.4 网页设计思路 第五章 网页制作 5.1 素材的加工制作
2 1

网页设计说明书

楚雄师范学院

5.2 网站的建立 5.3 网页设计 5.3.1 主页设计 5.3.2 节日起源 5.3.3 我们的故事 5.3.4 情人节的祝福 5.3.5 爱的告白墙 设计体会 致谢

摘要 随着社会的不断进步与发展,互联网得到广泛运用成为一个 交流信息的平台。现在很多企业,学校,以及个人都有自己的网站。 随着网络和经济的不断发展,现在很多东西都已经接入互联网,来对 自己行推广。在这个高度信息化的社会里,建立属于自己的网站是最 直接的宣传手段,情人节网站是给我们提供一个展示节日起源,我们 的故事,情人节的祝福,爱的表白墙的专题交互的平台。本文展示了 《情人节》开发的基本过程,该系统的主要功能主要包括节日起源, 我们的故事,情人节的祝福,爱的表白墙的专题交互的平台。这些功 能都是通过 Dreamweaver 得以实现, 网站中还使用了 flash cs4 对图片

3

1

网页设计说明书

楚雄师范学院

进行简单的动画处理。本文从该网站的要求和思想讲起;然后介绍开 发工具及运行环境;接下来就开始对网站总体框架进行分析和设计; 最后对网站的详细设计与功能模块的最终实现。 关键词:Dreamweaver;情人节的网站;flash cs4

第一章

网页概述

网页,是构成网站的基本元素,是承载各种网站应用的平台。通 俗的说,网站就是由网页组成的。网页说具体了是一个 html 文件, 浏览器是是用来解读这份文件的。 本次网页设计,主要用 HTML

语言编写,利用 Dreamweaver6.0 作为开发工具,中间插入了一些 Javascript 语言用以编制一些特效,如左右移动图片广告、显示当前 时间等, 主要介绍了情人节的概括, 以图片和文字介绍相结合的方式, 穿插一些视频媒体, 以网站浏览的方式综合展示了将情人节展现给大 家。

第二章 网页设计思路
2.1 网站开发的意义 情人节又叫圣瓦伦丁节或圣华伦泰节,即每年的 2 月 14 日,是 西方的传统节日之一。这是一个关于爱、浪漫以及花、巧克力、贺卡 的节日 男女在这一天互送礼物用以表达爱意或友好。现已成为欧美 各国青年人喜爱的节日,其他国家也已开始流行。而在中国,传统节 日之一的七夕节也是姑娘们重视的日子,因此而被称为中国的情人 节。由于能表达共同的人类情怀,各国各地纷纷发掘了自身的“情人
4 1

网页设计说明书

楚雄师范学院

节” 。 2.2 网站设计背景 由于因特网的开放结构,对多数用户来说,已不满足于浏览别 人制作的网页,而要自己制作网页发布到因特网上,所以网页制作不 仅是专业人员的工作,已成为普通人的生活和工作需求。 2.3 制作工具选择 Macromedia Dreamweaver 是一款集网页制作和管理网站于一身 的所见即所得网页编辑器,是一套视觉化网页开发工具,利用它可以 轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网 页。概括起来,Dreamweaver 具有以下优点: 一 是 最 佳 的 制 作 效 率 。 Dreamweaver 可 以 用 最 快 速 的 方 式 将 Fireworks,FreeHand,或 Photoshop 等档案移至网页上。对于选单, 快捷键与格式控制,都只要一个简单步骤便可完成。 二是方便的网 站管理功能。使用网站地图可以快速制作网站雏形、设计、更新和重 组网页。 改变网页位置或档案名称, Dreamweaver 会自动更新所有链 接。 三是无可比拟的控制能力。Dreamweaver 是提供 HTML、视觉 化编辑与原始码编辑同步的设计工具。帧(frames)和表格的制作速度 快。 Dreamweaver 支援精准定位, 利用可轻易转换成表格的图层以拖 拉置放的方式进行版面配置。当使用 Dreamweaver 在设计动态网页 时,所见即所得的功能,让您不需要透过浏览器就能预览网页。全方 位的呈现利用 Dreamweaver 设计的网页, 可以全方位的呈现在任何平 台的热门浏览器上。
5 1

网页设计说明书

楚雄师范学院

2.4 素材收集 文字与图片是构成一个网页的两个最基本的元素。可以简略的 理解为:文字,就是网页的内部实质意义;图片,就是网页的美容护 肤品。除此以外,网页的元素还包括动画、音乐等等。 1、图形 主 要通过网络媒体获得图片资料。如情人节的祝福方面,主要浏览百度 网站以及所属相关部门专业网站并搜集资料;通过搜索引擎、一些情 人节网站获得,还有一部分是同事、朋友情人节的时候拍摄的照片。 将这些资料库中的照片、书画作品、图片资料 , 根据具体需要,用 ACDSee、 Photoshop 软件适当处理, 变成素材添加到网页的某个地方, 充分提高网页的观赏性。 2、文字 由设计思路展开,搜集所需要的文字资料。对素材分析

选取,进行相应的文字编辑和加工。 3.图表 4.视频 网络为我们提供了丰富的视频资源。为展示情人节文化精

粹,特选取下载了两个“花儿”视频。 5.动画 在指导教师的指导下, 利用 Flash 8.0 动画制作软件创作了网 页中的主要动画,同时利用网上的动画资源,收集了一些小的动画素 材,大部分作为网页顶部标题图片的点缀。 2.4 网页设计内容构想 就具体设计环节而言,概括为两个方面:一方面是纯网站本身 的设计比如文字排版,图片制作,平面设计,三维立体设计,静态无 声图文,动态有声影像等;另一方面是网站的延伸设计,包括网站的
6 1

网页设计说明书

楚雄师范学院

主题定位和浏览群的定位,制作策划,形象,宣传等等。 网站设计 优化的具体表现是:以用户需求为导向,设计方便的网站导航,网页 下载速度尽可能快,网页布局合理并且适合保存、打印、转发,网站 信息丰富、 有效, 有助于用户产生亲切感、 信任感。 通过对网站功能、 结构、布局、内容等关键要素的合理设计,使得网站的功能和表现形 式达到最优效果。 构思阶段需要考虑以下内容: 1.页面主题 此网页的中心思想是通过网页浏览欣赏,利用文字介

绍、图片展示,其中辅以动画、音乐、视频,以图文并茂、视听兼有 的形式来全面反映宁夏整体面貌,渲染“心相系 爱相随” 。 有主

题就要进行宣传,设计网站的宣传标语。也可以说是网站的精神,网 站的目标。用一句话甚至一个词来高度概括,类似实际生活中的广告 金句。本网站的主题宣传是: “心相系 爱相随” 。 2.页面内容 内容要为网页主题服务。 用文字介绍情人节的起源; 用 Flash 特效播放情人节的爱的短片;用 Javascript 语言编制多图片 左移特效及多图片自动翻页特效,展示情人节的美好 3.结构布局 版面指的是浏览器看到的完整的一个页面,就象传统

的报刊杂志编辑一样,我们将网页看作一张报纸,一本杂志来进行排 版布局。虽然动态网页技术的发展使得我们开始趋向于学习场景编 剧,但是固定的网页版面设计基础依然是必须的。它们的基本原理是 共通的。 本网站的主页和绝大部分页面采用“三”字型结构布局, 其中顶部、底部链接样式,以便统一协调。部分子页面采用“T”字 型、 “Ⅱ”型、标题正文型、封面型布局,以配合特效页面设计。 布
7 1

网页设计说明书

楚雄师范学院

局,就是以最适合浏览的方式将图片和文字排放在页面的不同位置。 本次设计,利用表格布局页面。由于表格定位方便,在页面的布局中 有很大的用处,浏览器在下载表格时,将表格中的所有内容(包括图 像)都下载完毕后才显示。如果一个页面有很好的上下结构,就分成 几个上下并列的表格, 而不把整个页面中的所有内容都放在一个表格 中,这样可以加快浏览速度,减少等待时间,如我们的故事介。 4.色彩搭配 网站给人的第一印象来自视觉冲击,确定网站的标准 色彩是相当重要的一步。不同的色彩搭配产生不同的效果,并可能影 响到访问者的情绪。 “标准色彩”是指能体现网站型象和延伸内涵 的色彩。以黑色为主导,辅以 Flash 动画点缀,作为页面顶部主题。 在二级、三级引用。

第三章
3.1 网页功能简介

网页内容简介

本网页使用超链接,即把一个网页与一个网页连接起来,能够实 现在“IE”浏览器中快速、全面地展示情人节的概括 3.2 网页主要 功能描述 本网站分成多层链接关系,主要实现如下功能: 1、简介情人节的起源的基本情况, 2、展示我们的故事爱的告白。 3、介绍情人节的祝福 4、介绍爱的告白墙 3.3 网页的浏览
8 1

网页设计说明书

楚雄师范学院

本网页在任何 Windows 环境下均可以打开浏览,只要双击“6”文件 夹下的主页 idex.html,便可打开主页“情人节” ,点击其中的任意一 个超级链接,便可随心所欲地观赏我们的故事,爱的告白,情人节的 祝福,节日起源

第四章
4.1 网页结构总图

网页设计

网站的链接结构是指页面之间相互链接的拓

扑结构。它建立在目录结构基础之上,但可以跨越目录。形象的说: 每个页面都是一个固定点,链接则是在两个固定点之间的连线。一个 点可以和一个点连接,也可以和多个点连接。更重要的是,这些点并 不是分布在一个平面上,而是存在于一个立体的空间中。网站的链接 结构的目的在于:用最少的链接,使得浏览最有效率。通过对网站功 能、结构、布局、内容等关键要素的合理设计,使得网站的功能和表 现形式达到最优效果。 根据网页功能的要求,本网站分为五个主页 面,其中,我们的故事等主页面下又有二级、三级子页面。结构如下 图所示。

情人节

首页

我们的故事

情人节的祝福

爱的告白墙

红雪 传说——瓦伦丁之瓦伦丁 那些年,我们是没人追的女孩

那一日,我遇到了你

9

1

网页设计说明书

楚雄师范学院

4.2 各网页模块的组成 一般的,建立网站的链接结构有两种基本方 式: 1.树状链接结构(一对一) 。类似 DOS 的目录结构,首页链接指向 一级页面, 一级页面链接指向二级页面。 立体结构看起来就象蒲公英。 这样的链接结构浏览时, 一级级进入, 一级级退出。 优点是条理清晰, 访问者明确知道自己在什么位置,不会"迷"路。缺点是浏览效率低, 一个栏目下的子页面到另一个栏目下的子页面,必须绕经首页。 2.星状链接结构(一对多) 。类似网络服务器的链接,每个页面相 互之间都建立有链接。立体结构象东方明珠电视塔上的钢球。这种链 接结构的优点是浏览方便,随时可以到达自己喜欢的页面。缺点是链 接太多, 容易使浏览者迷路, 搞不清自己在什么位置, 看了多少内容。 这两种基本结构都只是理想方式,在实际的网站设计中,总是将这两 种结构混合起来使用。 我希望浏览者既可以方便快速的达到自己需要 的页面, 又可以清晰的知道自己的位置。 所以, 本网站采用的办法是: 首页和一级页面之间用星状链接结构, 一级和二级页面之间用树状链 接结构。 1.首页 首页

爱情还未毕业

情人节絮语

情人节谎言

那一日我遇到了你

2.节日起源
10 1

网页设计说明书

楚雄师范学院

3.我们的故事

我们的故事

红雪 传说——瓦伦丁之瓦伦丁 那些年,我们是没人追的女孩

那一日,我遇到了你

4.情人节的祝福 5.爱的告白墙 4.3 网页制作环境 1、此网页运行环境为 Windows7\xp 2、此网页主要利用 Dreamweaver6.0 作为开发工具,Dreamweaver 是 一款集网页制作和管理网站于一身的所见即所得网页编辑器, 它是一 套针对专业网页设计师特别发展的视觉化网页开发工具, 利用它可以 轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网 页。它的主要优点是制作效率高 ,网站管理非常灵活方便,视觉化编 辑与原始码编辑同步的设计。使用 HTML 语言和 JAVASCRIPT 语言 编写,系统采用了 HTML 语言编写程序,HTML 语言是超文本标记 语言(HyperTextMarkupLanguage) ,HTML 语言使用一些约定的符号 对各种文件进行标记,利用特定的标记产生各种特定的效果,比如控 制超文本显示的字体、字号、颜色、位置,加入表格,插入图像、声 音、超链接等。这些标记的文件存放在 WEB 服务器上,通过国际互 联网供读者阅读。 4.4 网页设计思路 网站设计优化的具体表现是:既要网页本身具有丰富的内容,且符
11 1

网页设计说明书

楚雄师范学院

合美学原理,还要以用户需求为导向,设计方便的网站导航,网页下 载速度尽可能快,网页布局合理并且适合保存、打印、转发,网站信 息丰富、有效,有助于用户产生亲切感、信任感。同时,网站还要有 自己的“风格” 。 风格是抽象的。是指站点的整体形象给浏览者的

综合感受。这个“整体形象”包括站点的 CI(标志,色彩,字体, 标语) ,版面布局,浏览方式,交互性,文字,语气,内容价值观, 意义内涵,站点荣誉等等诸多因素。 风格是独特的,是站点不同与 其他网站的地方。或者色彩,或者技术,或者是交互方式,能让浏览 者明确分辨出这是你的网站独有的。 本次设计,绝大多数网页采用 链接样式,达到和主页页面统一的风格来制作样式统一的网站,部分 子页面采用其它如“T”字型、 “Ⅱ”型、标题正文型、封面型布局, 以配合特效页面设计,即追求“创意” 。 创意是将现有的要素重新

组合。创意是传达信息的一种特别方式。 设计主要依靠 Dreamweaver6.0 进行可视化编程,达到快速高效完成设计的目的。

第五章
5.1 素材的加工制作

网页制作

网页制作之前要收集好相关的素材,对收集的素材进行分类管理, 如可分为:文字素材、图像素材、视频素材、动画素材等。并且对素 材进行加工处理,以适合网站主题。如果没有合适的素材,还要自己 用相关软件进行网页素材制作。 一个好的网页除了需要有好的内容外 还要有好的美工, 网页元素的制作是美工工作的重点。 在设计初期, 从一些相关书籍、网络媒体、同事朋友处获得了足够多的素材,有文
12 1

网页设计说明书

楚雄师范学院

字、图片、flash 动画、视频、音频等,并对这些素材进行精心的挑 选,使用相应的软件进行加工制作,以适应具体网页制作的要求。 1.文字 利用最常用的文字编辑处理软件 Word 2003, 对文字资料进 行重整、 修改或添加, 清除格式以便在 Dreamweaver 的设计视图中输 入。 2.图片 根据设计构思,图片分类,用 photoshop CS 分别进行调整 大小,使同一使用区域的图片尽量大小一致;再用 Potoshop 图像处 理软件分别调整其色相、饱和度等参数以满足色彩需要。用 Potoshop 图像处理软件对一些图片进行“减淡” ,作为部分页面的背景图像。 3. 制作网页顶部图形 15 5.2 网站的建立 搭建站点 利用 Dreamweaver6.0 的站点建立向导建立名为“6”的站 点,并对站点进行初步设置。 5.3 网页设计 当确定了栏目和版块、确定网站的目录结构和链接结构、确定网站的 整体风格创意设计、获得并制作了足够丰富的素材,就可以着手进行 页面设计了。 根据本次设计选题的背景、主题思想,将本次设计的 重点内容确定为:首页,节日起源,我们的故事,爱的告白墙 -

13

1


赞助商链接
相关文章:
网页设计说明书(模板)
网页设计说明书 网页名称: 博客 专业名称: 软件技术 班级名称: 软件一班 姓学名: 张辉德 号:20135533116 完成时间: 一月 3 号 “XXXX(网站标题) ”网页设计...
网页设计说明书
网页设计说明书 班级 学生姓名 学号 文管 1003 班 解秋玉 100102524 2011 年 12 月 选题分析 我们学习就是为了获得知识,此次运用 Dreameaver 做有关于伦敦奥运...
网页设计--说明文档
网页设计--说明文档_计算机软件及应用_IT/计算机_专业资料 暂无评价|0人阅读|0次下载|举报文档 网页设计--说明文档_计算机软件及应用_IT/计算机_专业资料。武威...
网页设计说明书
网页制作工具》 网页制作工具》设计说明书 题姓学班 目:美蝶饰品店网站的设计与制作 美蝶饰品店网站的设计与制作 名: 号: 级: 于洋 20101070141 10 信高 ...
网页设计说明书
网页制作工具》 网页制作工具》设计说明书 题姓学班 水果商店网站的设计与制作 目: 水果商店网站的设计与制作 名: 号: 级: 李梦雪 20101080116 10 微高 孙俊...
网页设计课程设计说明书参考
网页设计课程设计说明书参考_工学_高等教育_教育专区。网页设计课程设计说明书参考福建林业职业技术学院《网站建设与网页制作》设计说明书 课程名称 设计题目 专业班级...
网页设计说明书范例--走进宁夏
网页设计说明书范例--走进宁夏_高等教育_教育专区。这篇文章是一份电大计算机网络技术(网页设计)专业的毕业设计——网页设计说明书。设计思路是以网站浏览的方式综合...
个人网页设计说明书_图文
个人网页设计说明书_学习总结_总结/汇报_实用文档。个人毕业作品 请多指教 个人网页设计说明书 目录一、网页设计目的 1.1 1.2 1.3 1.4 网页设计需求浅谈???...
网页设计说明书
网页设计说明书_互联网_IT/计算机_专业资料。交通运输系 计算机程序设计综合实践教学系 统开发说明书 学号: 姓名: 班级: 题目: 20107745 20107746 黄蕴莹 贺海燕 ...
网页设计说明书
设计说明书 需求分析目标定位 a、 制作这个网站的目的是为了方便我们学院的新生与老生能快速浏览的我们学校的基本 情况,了解我们学校所有好玩,有趣的事情。 b、 ...
更多相关标签: