网页设计实验报告.doc

学 号201510159320武 汉 科 技 大 学 城 市 学 院课 程 设 计 报 告 课程名称 网页设计课程设计 题 目 旧时光奥黛丽赫本主题网站设计 学 部 信息工程学部 专 业 软件工程 班 级 15级软工(3)班 姓 名 洪汉山 指导教师 彭璐 2016年12月30日编号 020网页制作课程设计任务书设计题目:旧时光奥黛丽赫本主题网站设计设计主要内容:一、开发平台：DREAMWEAVER+FIREWORKS+FLASH二、设计要求：1、设计内容设计一个以奥黛丽赫本为主题的网站，以怀旧风格展示奥黛丽赫本昔日的才华横溢，通过作品和照片，使浏览者对奥黛丽赫本有基本的了解。2、网站主要功能模块（1）旧日时光：透过图片和音乐，回忆奥黛丽赫本的风采。（2）流芳岁月：描述奥黛丽赫本及其作品对世人的影响。（3）珍藏作品：作品欣赏。（4）粉丝感言：提供粉丝注册与交流的平台。（5）获奖记录：提供奥黛丽赫本所获的重要奖项。首页index获奖记录粉丝感言旧日时光流芳岁月留言参演电视 / / _/_ _ | _ | | -| | | | ()| |-| | | o o | ()| |-| | | | | | |-| | | - - | _ | |- | | | |_| |_| | | | |_| | | | |_| |_| 电影作品早年演艺家庭珍藏作品三、站点结构导航图 四、课程设计报告主要内容： 1 网页设计工具介绍（介绍你所使用的网页设计工具及认识） 2 站点介绍与站点分析（声明网站各页面的结构和内容，绘出站点导航结构图，详细描述站点各页面设计所用到的技术与构思细节） 3 个人体会与感受（描绘整个网页设计过程中自己所学的知识、体会及有待提高的地方） 4 参考文献与附图（列出自己所阅读并参考的主要文献或网上资料，并给出站点首页的截图）武汉科技大学城市学院设计报告目 录1 网页设计相关技术介绍21.1 HTML21.2 CSS31.3 JavaScript52 奥黛丽赫本网站设计规划62.1 网站介绍62.2 栏目设计62.3 站点分析及站点地图72.4 主页面布局73 个人体会和感受84 参考文献和网址95附图100武汉科技大学城市学院设计报告1 网页设计相关技术介绍1.1 HTML标记符,说明该文件是用超文本标记语言（本标签的中文全称）来描述的,它是文件的开头;而,则表示该文件的结尾，它们是超文本标记语言文件的开始标记和结尾标记。超级文本标记语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件镶入，这也是万维网（WWW）盛行的原因之一，其主要特点如下：简易性：超级文本标记语言版本升级采用超集方式，从而更加灵活方便。可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超级文本标记语言可以使用在广泛的平台上，这也是万维网（WWW）盛行的另一个原因。通用性：另外，HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。本网站对该技术的使用如下：首页.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样式表，而某些页面中的某些元素想使用其他样式，就可以针对这些样式单独定义一个样式表应用到页 面中。这些后来定义的样式将对前面的样式设置进行重写，在浏览器中看到的将是最后面设置的样式效果。页面压缩在使用HTML定义页面效果的网站中，往往需要大量或重复的表格和 font元素形成各种规格的文字样式，这样做的后果就是会产生大量的HTML标签，从而使页面文件的大小增加。而将样式的声明单独放到CSS样式表中，可 以大大的减小页面的体积，这样在加载页面时使用的时间也会大大的减少。另外，CSS样式表的复用更大程序的缩减了页面的体积，减少下载的时间。 工作原理编辑 CSS是一种定义样式结构如字体、颜色、位置等的语言，被用于描述网页上 的信息格式化和现实的方式。CSS样式可以直接存储于HTML网页或者单独的样式单文件。无论哪一种方式，样式单包含将样式应用到指定类型的元素的规则。 外部使用时，样式单规则被放置在一个带有文件扩展css的外部样式单文档中。样式规则是可应用于网页中元素，如文本段落或链接的格式化指令。样式规则由一个或多个样式属性及其值组成。内部样式单直接放在网页中，外部样式单保存在独立的文档中，网页通过一个特殊标签链接外部样式单。名称CSS中的“层叠（cascading）”表示样式单规则应用于HTML文档元素的方式。具体地说，CSS样式单中的样式形成一个层次结构，更具体的样式覆盖通用样式。样式规则的优先级由CSS根据这个层次结构决定，从而实现级联效果。本网站对该技术的使用如下：charset utf-8;/* CSS Document */html,bodypadding:0px;margin:0px;.contentcolor:#000;width:1050px;margin:0px auto;.content li float:left;list-style:none;.content li color:#000;.content li atext-decoration:none;.content li a display:inline-block;font-size:18px;height:50px;line-height:20px;padding:0px 6px;text-decoration:none;color:#C06;background:url(images/li-seperator.gif) no-repeat right center;.content li a:hovercolor:#09F;1.3 JavaScript基本特点：JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。是一种解释性脚本语言（代码不进行预编译）。4 1.主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。4 2.可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。4 3.跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）Javascript脚本语言同其他语言一样，有它自身的基本数据类型，表达式和算术运算符及程序的基本程序框架。Javascript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方，表达式则可以完成较复杂的信息处理。JavaScript脚本语言具有以下特点:(1)脚本语言。JavaScript是一种解释型的脚本语言,C、C+等语言先编译后执行,而JavaScript是在程序的运行过程中逐行进行解释。(2)基于对象。JavaScript是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象。(3)简单。JavaScript语言中采用的是弱类型的变量类型,对使用的数据类型未做出严格的要求,是基于Java基本语句和控制的脚本语言,其设计简单紧凑。(4)动态性。JavaScript是一种采用事件驱动的脚本语言,它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时,鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。(5)跨平台性。JavaScript脚本语言不依赖于操作系统,仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用,前提上机器上的浏览器支 持JavaScript脚本语言,目前JavaScript已被大多数的浏览器所支持。32 奥黛丽赫本主题网站设计规划2.1 网站介绍 本网站的主题是旧时光奥黛丽赫本，其开发的目的是为了记录英国著名女演员奥黛丽赫本，并便于大家了解她的生平经历和演绎作品。网站开发是时代所需，是不可或缺的记录信息和获取信息手段。本网站用了十多个站点，较为详细的对奥黛丽赫本一生的重要经历进行了介绍。本网站的开发采用了Adobe DreamweaverCS5网站开发软件，并用了html,css,javascript等技术结合而成。2.2 栏目设计一级栏目二级栏目首页旧日时光早年经历，演艺经历，家庭经历流芳岁月情感经历珍藏作品电影作品，参演电视粉丝感言粉丝留言获奖记录获奖记录图 站点分析及站点地图 2.3.1站点分析： 本网站有十二个站点，分别是首页，基本信息，早年经历，演艺经历，家庭生活，感情经历，电影作品，参演电视，社会活动，获奖记录，人物评价，粉丝留言。本网站从首页进入，依次可以进入后面的页面。此网站设计中运用了css将各页面联系起来，并呈现在页面上方，使得一目了然。中间为页面的主体信息，最下方有设计人信息。基本信息 2.3.2站点地图：粉丝感言早年经历人物评价演艺经历获奖记录家庭生活首页感情经历社会活动参演电 视电影作品图2.3.1 站点地图2.4 主页面布局 2.4.1 主页面中布局： 主页面中含有如下信息，首页，基本信息，早年经历，演艺经历，家庭生活，感情经历，电影作品，参演电视，社会活动，获奖记录，人物评价，粉丝留言。主页面上方为网页内容，点击之后进入分页首页中。每个页面总体布局为上方是标题栏，下方显示图文信息,最下方为设计人信息。 2.4.2 主页面布局图：导航栏图文信息版权信息区域图2.4.13 个人体会和感受历时一个多星期的网站课程设计终于完成了，在这次的实践中我学到了不少东西，让我体会到了制作网站的乐趣。通过这次网页课程设计进一步激发了学习兴趣，调动了学习的自觉性，自己动脑，和同学老师一起探讨，运用网络资源，结合教材和老师的指导，成功的创作出了名人网站。在这近一个星期的课程时间里，我充分利用了这次学习机会，全身心投入到网页设计的海洋中，不断地学习和探索网页设计的奥秘，不断地完善自我，提高设计水准。在这个过程中，我也深深体会到，想把网页做好做精不少一件容易的事情，它包括网站主题的选择，内容的采集，图片的处理，页面的排版等难点。这次课程设计还有许多不足的地方还需要我不断学习，综合运用各种知识，设计出更好的Web界面。本次成功设计出网站让我对网页设计课程有了更加浓厚兴趣，以后会再接再厉，不断创新，挑战自我，飞得更高。衷心感谢老师，同学在这次课程设计中队我的帮助和指导。谢谢！4 参考文献和网址参考书籍：1胡崧. HTML 从入门到精通M.北京：中国青年出版社，2007.2赵祖荫，王云翔，胡耀芳.网页设计与制作教程M.北京：清华大学出版社，2008.3刘智勇. JavaScript 开发技术大全M.北京：清华大学出版社，2009.4赵祖荫，王云翔，胡耀芳.网页设计与制作教程M.北京：清华大学出版社，2008.5刘智勇. JavaScript 开发技术大全M.北京：清华大学出版社，2009.参考网站：1/baidu?tn=monline_3_dg&ie=utf-8&wd=%E5%A5%A5%E9%BB%9B%E4%B8%BD%E8%B5%AB%E6%9C%AC2 Http:/ 北大天网5附图图5-1站点首页截图图5-2站点首页截图11课程设计评分表评分标准：1. 学生是否严格遵守课程设计纪律，按照规定时间完成设计任务(占30%)2. 课程设计网站效果：(占50%)(1)是否独立完成课程设计。 (2)课程设计是否完成课程设计任务书指定的全部要求。(3)网站设计切合主题，所做内容与主题相符。 (4)网站设计界面美观，超链接正确，能