搜索
学号201510159320武汉科技大学城市学院课程设计报告课程名称网页设计课程设计题目旧·时光——奥黛丽赫本主题网站设计学部信息工程学部专业软件工程班级15级软工(3)班姓名洪汉山指导教师彭璐2016年12月30日网页制作课程设计任务书设计题目:旧·时光——奥黛丽赫本主题网站设计设计主要内容:一、开发平台：DREAMWEAVER+FIREWORKS+FLASH二、设计要求：1、设计内容设计一个以奥黛丽赫本为主题的网站，以怀旧风格展示奥黛丽赫本昔日的才华横溢，通过作品和照片，使浏览者对奥黛丽赫本有基本的了解。2、网站主要功能模块（1）旧日时光：透过图片和音乐，回忆奥黛丽赫本的风采。（2）流芳岁月：描述奥黛丽赫本及其作品对世人的影响。（3）珍藏作品：作品欣赏。（4）粉丝感言：提供粉丝注册与交流的平台。（5）获奖记录：提供奥黛丽赫本所获的重要奖项。三、站点结构导航图四、课程设计报告主要内容：1网页设计工具介绍（介绍你所使用的网页设计工具及认识）2站点介绍与站点分析（声明网站各页面的结构和内容，绘出站点导航结构图，详细描述站点各页面设计所用到的技术与构思细节）3个人体会与感受（描绘整个网页设计过程中自己所学的知识、体会及有待提高的地方）4参考文献与附图（列出自己所阅读并参考的主要文献或网上资料，并给出站点首页的截图）编号020首页index获奖记录粉丝感言旧日时光流芳岁月留言参演电视\/\/______\/_电影作品早年演艺家庭珍藏作品武汉科技大学城市学院设计报告1目录1网页设计相关技术介绍.........................................21.1HTML....................................................21.2CSS.....................................................31.3JavaScript..............................................52奥黛丽赫本网站设计规划.......................................62.1网站介绍................................................62.2栏目设计................................................62.3站点分析及站点地图......................................72.4主页面布局..............................................73个人体会和感受...............................................84参考文献和网址...............................................95附图........................................................10武汉科技大学城市学院设计报告21网页设计相关技术介绍1.1HTML标记符html,说明该文件是用超文本标记语言（本标签的中文全称）来描述的,它是文件的开头;而/html,则表示该文件的结尾，它们是超文本标记语言文件的开始标记和结尾标记。超级文本标记语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件镶入，这也是万维网（）盛行的原因之一，其主要特点如下：简易性：超级文本标记语言版本升级采用超集方式，从而更加灵活方便。可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超级文本标记语言可以使用在广泛的平台上，这也是万维网（）盛行的另一个原因。通用性：另外，HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。本网站对该技术的使用如下：!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN==Content-Typecontent=text/html;charset=utf-8/title首页/titlelinkrel=stylesheettype=text/csshref=css.css//headbody....../body/html武汉科技大学城市学院设计报告31.2CSS层叠样式表(英文全称：CascadingStyleSheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。CSS具有以下特点：丰富的样式定义CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力；允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离；允许随意改变文本的大小写方式、修饰方式以及其他页面效果。易于使用和修改CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理。另外，可以将相同样式的元素进行归类，使用同一个样式进行定义，也可以将某个样式应用到所有同名的HTML标签中，也可以将一个CSS样式指定到某个页面元素中。如果要修改样式，我们只需要在样式列表中找到相应的样式声明进行修改。多页面应用CSS样式表可以单独存放在一个CSS文件中，这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件，在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。层叠简单的说，层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。例如对一个站点中的多个页面使用了同一套CSS样式表，而某些页面中的某些元素想使用其他样式，就可以针对这些样式单独定义一个样式表应用到页面中。这些后来定义的样式将对前面的样式设置进行重写，在浏览器中看到的将是最后面设置的样式效果。武汉科技大学城市学院设计报告4页面压缩在使用HTML定义页面效果的网站中，往往需要大量或重复的表格和font元素形成各种规格的文字样式，这样做的后果就是会产生大量的HTML标签，从而使页面文件的大小增加。而将样式的声明单独放到CSS样式表中，可以大大的减小页面的体积，这样在加载页面时使用的时间也会大大的减少。另外，CSS样式表的复用更大程序的缩减了页面的体积，减少下载的时间。工作原理编辑CSS是一种定义样式结构如字体、颜色、位置等的语言，被用于描述网页上的信息格式化和现实的方式。CSS样式可以直接存储于HTML网页或者单独的样式单文件。无论哪一种方式，样式单包含将样式应用到指定类型的元素的规则。外部使用时，样式单规则被放置在一个带有文件扩展css的外部样式单文档中。样式规则是可应用于网页中元素，如文本段落或链接的格式化指令。样式规则由一个或多个样式属性及其值组成。内部样式单直接放在网页中，外部样式单保存在独立的文档中，网页通过一个特殊标签链接外部样式单。名称CSS中的“层叠（cascading）”表示样式单规则应用于HTML文档元素的方式。具体地说，CSS样式单中的样式形成一个层次结构，更具体的样式覆盖通用样式。样式规则的优先级由CSS根据这个层次结构决定，从而实现级联效果。本网站对该技术的使用如下：@charsetutf-8;/*CSSDocument*/html,body{padding:0px;margin:0px;}.content{color:#000;width:1050px;margin:0pxauto;}.contentli{float:left;list-style:none;武汉科技大学城市学院设计报告5}.contentli{color:#000;}.contentlia{text-decoration:none;}.contentlia{display:inline-block;font-size:18px;height:50px;line-height:20px;padding:0px6px;text-decoration:none;color:#C06;background:url(images/li-seperator.gif)no-repeatrightcenter;}.contentlia:hover{color:#09F;}1.3JavaScript基本特点：JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。是一种解释性脚本语言（代码不进行预编译）。[4]1.主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。[4]2.可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。[4]3.跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）Javascript脚本语言同其他语言一样，有它自身的基本数据类型，表达式和算术运算符及程序的基本程序框架。Javascript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方，表达式则可以完成较复杂的信息处理。JavaScript脚本语言具有以下特点:武汉科技大学城市学院设计报告6(1)脚本语言。JavaScript是一种解释型的脚本语言,C、C++等语言先编译后执行,而JavaScript是在程序的运行过程中逐行进行解释。(2)基于对象。JavaScript是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象。(3)简单。JavaScript语言中采用的是弱类型的变量类型,对使用的数据类型未做出严格的要求,是基于Java基本语句和控制的脚本语言,其设计简单紧凑。(4)动态性。JavaScript是一种采用事件驱动的脚本语言,它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时,鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。(5)跨平台性。JavaScript脚本语言不依赖于操作系统,仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用,前提上机器上的浏览器支持JavaScript脚本语言,目前JavaScript已被大多数的浏览器所支持。[3]2奥黛丽赫本主题网站设计规划2.1网站介绍本网站的主题是旧·时光——奥黛丽赫本，其开发的目的是为了记录英国著名女演员奥黛丽赫本，并便于大家了解她的生平经历和演绎作品。网站开发是时代所需，是不可或缺的记录信息和获取信息手段。本网站用了十多个站点，较为详细的对奥黛丽赫本一生的重要经历进行了介绍。本网站的开发采用了AdobeDreamweaverCS5网站开发软件，并用了html,