网页设计实验报告

武汉科技大学城市学院

课程设计报告

课程名称网页设计课程设计

题目旧·时光——奥黛丽赫本主题网站设计

学部信息工程学部

专业软件工程

班级15级软工(3)班

姓名洪汉山

指导教师彭璐

2016 年12 月30 日

网页制作课程设计任务书

设计题目:

旧·时光——奥黛丽赫本主题网站设计

设计主要内容:

一、开发平台：DREAMWEA VER+FIREWORKS+FLASH

二、设计要求：

1、设计内容

设计一个以奥黛丽赫本为主题的网站，以怀旧风格展示奥黛丽赫本昔日的才华横溢，通过作品和照片，使浏览者对奥黛丽赫本有基本的了解。

2、网站主要功能模块

（1）旧日时光：透过图片和音乐，回忆奥黛丽赫本的风采。

（2）流芳岁月：描述奥黛丽赫本及其作品对世人的影响。

（3）珍藏作品：作品欣赏。

（4）粉丝感言：提供粉丝注册与交流的平台。

（5）获奖记录：提供奥黛丽赫本所获的重要奖项。

四、课程设计报告主要内容：

1 网页设计工具介绍（介绍你所使用的网页设计工具及认识）

2 站点介绍与站点分析（声明网站各页面的结构和内容，绘出站点导航结构图，详细描述站点各页面设计所用到的技术与构思细节）

3 个人体会与感受（描绘整个网页设计过程中自己所学的知识、体会及有待提高的地方）

4 参考文献与附图（列出自己所阅读并参考的主要文献或网上资料，并给出站点首页的截图）

目录

1 网页设计相关技术介绍 (2)

1.1 HTML (2)

1.2 CSS (3)

1.3 JavaScript (5)

2 奥黛丽赫本网站设计规划 (6)

2.1 网站介绍 (6)

2.2 栏目设计 (6)

2.3 站点分析及站点地图 (7)

2.4 主页面布局 (7)

3 个人体会和感受 (8)

4 参考文献和网址 (9)

5附图 (10)

1 网页设计相关技术介绍

1.1 HTML

标记符,说明该文件是用超文本标记语言（本标签的中文全称）来描述的,

它是文件的开头;而,则表示该文件的结尾，它们是超文本标记语言文件的开始标记和结尾标记。

超级文本标记语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件镶入，这也是万维网（WWW）盛行的原因之一，其主要特点如下：

简易性：超级文本标记语言版本升级采用超集方式，从而更加灵活方便。

可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。

平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超级文本标记语言可以使用在广泛的平台上，这也是万维网（WWW）盛行的另一个原因。

通用性：另外，HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。

本网站对该技术的使用如下：

"/TR/xhtml1/DTD/xhtml1-transitional.dtd">

......

1.2 CSS

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

CSS具有以下特点：

丰富的样式定义

CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力；允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离；允许随意改变文本的大小写方式、修饰方式以及其他页面效果。

易于使用和修改

CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header 部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。总之，CSS 样式表可以将所有的样式声明统一存放，进行统一管理。

另外，可以将相同样式的元素进行归类，使用同一个样式进行定义，也可以将某个样式应用到所有同名的HTML标签中，也可以将一个CSS样式指定到某个页面元素中。如果要修改样式，我们只需要在样式列表中找到相应的样式声明进行修改。

多页面应用

CSS样式表可以单独存放在一个CSS文件中，这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件，在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。

层叠

简单的说，层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。例如对一个站点中的多个页面使用了同一套CSS样式表，而某些页面中的某些元素想使用其他样式，就可以针对这些样式单独定义一个样式表应用到页面中。这些后来定义的样式将对前面的样式设置进行重写，在浏览器中看到的将是最后面设置的样式效果。