《网页制作技术》综合设计实践报告

网站制作技术综合设计报告主 题湘菜之家 学生姓名学生学号专业班级学 院指导教师2015年 12 月 12 日1 网站设计需求1. 网站宣传主题本网站的主题为湘菜，名为“湘菜之家”，目的在于向读者简单介绍湘菜相关的常识以及简单而经典的几道湘菜菜式，也便于对中华饮食文化及湖湘文化感兴趣的读者更好地了解湘菜和湖湘文化，更好地从湘菜的热辣口感中感受到湖南人民由于长期以来生长在这片土地上产生的热情坚强、奔放“霸蛮”的可爱性格。同时，我本人作为作为土生土长的湖南人，对于家乡的湘菜文化一直很感兴趣，选择这个主题也是我表达对家乡的热爱的一种方式，希望能有更多的人了解湘菜，了解湖南。2.网站栏目及组成 湘菜之家 湘 湘 经 菜 菜 典 简 名 菜 介 师 肴 谭 欧 王 许 组 剁 永 金 鱼 百 子 毛 添 阳 墨 菊 庵 椒 州 鱼 香 鸟 龙 家 三 烂 泉 云 鱼 鱼 血 戏 豆 朝 脱 红 阳 翅 翅 鸭 莲 腐 凤 袍 烧 肉 图1.网站目录结构网站的目录结构如图1所示。本网站一共十六页，由“湘菜简介”、“湘菜名师”、“经典菜肴”三个主要栏目构成。“湘菜简介”栏目由“湘菜简介”这一个页面来展示；“经典菜肴”栏目由“湘菜名师”、“剁椒鱼头”、“子龙脱袍”、“毛家红烧肉”、“永州血鸭”、“百鸟朝凤”、“组庵鱼翅”、“金鱼戏莲”、“鱼香豆腐”等九个页面组成；“湘菜名师”栏目由“湘菜名师”“许菊云”、“王墨泉”、“欧阳烂阳”、“谭添三”等五个页面组成。“湘菜简介”栏目用一个页面简要介绍湘菜发展历史、菜系特点、地区特色、口味特色等方面；“湘菜名师”栏目简要介绍了许菊云等四位湘菜名师，以视频介绍的方式为主，对欧阳烂阳和王墨泉大师的介绍则采用视频和文字结合的方式；“经典菜肴”栏目简要介绍了组庵鱼翅等八道经典湘菜的来由故事、食材准备、制作方法等方面。三网站功能该网站将实现以下功能：1.首页展示：网站logo、导航条实现超链接、网站名称字幕滚动、相关图片的运动、插入音频文件辣妹子；2.“湘菜简介”页面展示：以简要文字介绍湘菜、锚记链接实现页面内容的快速跳转、以CSS样式来设置背景图案、插入音频文件乡里妹子进城来；3.“湘菜名师”页面展示：用超链接实现该界面与各子页间的链接，读者可根据自己的兴趣选择进入不同的子页了解对应的湘菜大师。以GIF动图的形式展示动画，以图层来实现页面布局；4.“湘菜名师”页面各子页：插入三段视频，以视频或者视频文字相结合的方式来介绍湖南有名的湘菜大师；5.“经典菜肴”页面展示：以超链接的方式实现该页与其各子页的联系，读者可根据自己的兴趣选择进入不同的子页了解相关菜式的信息；6.“经典菜肴”页面各子页：图片展示各色菜肴，文字介绍对应菜肴的来源故事背景、食材准备、制作方法、制作过程小贴士等内容。4 网站内容1. 版面布局 本网站几乎所有页面都采用了表格布局，并插入一些图层。部分页面（王墨泉.html、湘菜名师.html)采用图层布局。2. 网页素材获取方式本网站图片均来自网络资源，大部分图片是我用PS软件处理过的（其中“墨竹图”、“1”采用滤镜处理过，logo是自己用PS软件制作的，“湘菜名师背景”用PS添加了文字）。本网站中的视频文件及音频文件均来自网络资源，采用插入媒体的方式将它们插入到网页中。对于音频文件，我还使用背景颜色为白色的图层将页面显示出的插件覆盖。使界面看起来更加干净利落。3.导航方法本网站首页制作了一个导航条，通过文本链接实现首页与相对应子页的链接（如图2所示）。在“湘菜简介”页面中采用了锚记链接实现页面跳转，用户可以通过点击相应的文字将页面跳转到相应的区域，继而阅读相对应的内容。例如点击“发展历史”，页面就会自动跳转到对应的标题“发展历史”处，然后用户就能阅读湘菜发展历史相关的内容并通过点击这段文字末尾的“返回顶部”返回到顶部。（如图3所示）。其他页面均采取文本链接的方式与相关页面实现链接，如“经典菜肴”页面与其子页“组庵鱼翅”，点击“经典菜肴”页面中的“组庵鱼翅”，则对应的子页“组庵鱼翅被打开。点击“组庵鱼翅”页面底部的“返回经典菜肴”便可以返回“经典菜肴”页面。（如图4及图5所示）。 图2 网站首页中有导航条 图3 “湘菜简介”页面中的锚记链接 图4 “经典菜肴”界面 图5 “组庵鱼翅”界面底部插入了超链接4. 各网页内容具体内容见“网站功能”部分。5. 色彩选择及搭配 本网站以红色及白色作为主要色调，突出传统文化的特色。在图片搭配上基本上使用中国元素或者传统菜肴图片，并且多数界面配有火焰纹的图案（如图6所示），体现出了传统文化的庄重大方。除此之外，网站使用少量厨师的动图或者静态图片进行配图。 图6 火焰纹6. 各网页之间的链接关系 湘 菜 之 家 湘（ 湘 菜内 菜 经 简部 名 典 介锚 师 菜 记 肴 链接） 谭 王 欧 许 组 剁 毛 百 金 永 鱼 子 添 墨 阳 菊 庵 椒 家 鸟 鱼 州 香 龙 三 泉 烂 云 鱼 鱼 红 朝 戏 血 豆 脱 阳 翅 头 烧 凤 莲 鸭 腐 袍 肉 图7 各网页之间的链接关系 本站各网页之间的链接方式如图7所示，图中箭头均为双向箭头，而“湘菜简介”页面内部除了对首页“湘菜之家”的文字链接还采用锚记链接对“湘菜简介”页面自身进行跳转。7. 动态网页技术运用在这个网站中，我使用了4个JavaScript脚本。其中三个是用于实现图片的运动，剩下一个用于字幕滚动。这四个脚本都位于首页。实现图片运动的一段代码如下，其他两个与之类似：imgdisplay:block; var t=setInterval(myfunc,1000) var vd=document.getElementById(apDiv7) function myfunc() var obj=vd.firstChild vd.removeChild(obj) vd.appendChild(obj) vd.onmouseover=function()clearInterval(t) vd.onmouseout=function()t=setInterval(myfunc,1000) 当鼠标停留在图片上时，clearInterval函数清除时间间隔，图片不移动；鼠标移开时，setInterval函数重新设置时间间隔。实现字幕滚动的代码如下：湘菜之家以上代码控制“湘菜之家”四个字的水平运动，当鼠标停留在字幕上时停止，当鼠标移开时运行。如图8所示： 图8 字幕滚动 5 遇到的问题及解决办法在制作本网站的过程中我遇见一些问题，主要有3个。以下就是在制作过程中遇见的问题及解决的方法：1. 如何去除超链接的下划线及改变其蓝色字体的问题 在制作过程中我发现我插入了超链接之后相应的字体就会变成蓝色，下方也会出现一条下划线，当时没有办法去除，但是又觉得影响页面美观。后来经过认真学习，我使用CSS样式来解决这个问题。如图9所示，这个CSS样式的运用使得原本蓝色的“返回首页”字样变为了红色，下划线也被去除： 图9 设置超链接的CSS样式2. 如何使得背景图像可以移动的问题 对于如何使背景图像可以移动的问题我一样采用CSS样式来解决。例如，图10中的祥云图案可以随着浏览器滚动条的滚动而滚动，位置被固定，不会因为浏览器滚动条拖动而变化。 图10 背景图案样式设置及设置效果3. 如何改变页面中部分文字的颜色及字体、大小的问题 一开始制作这个网站的时候我发现，如果我使用我想改变一些字样的颜色、字体、大小的属性，那么整个页面中的字都会发生同样的变化。后来，学习了一点HTML语言之后，我使用HTML语言对代码进行修改，达到了理想的效果。比如说，我想将一个界面中的一段文字设置为4号字体、楷体的形式，我就在这段文字前后加入如下代码：这样就完成了文字的修改。六总结 本次网页设计是我第一次制作网页，也是第一次使用Dreamweave CS5制作网页，这个网站一共16页。在这个过程中，我收获了很多，学习了一些有关于这款软件的使用方法以及网页制作的技术，例如用表格和层布局、使用CSS样式、使用超链接、使用锚记链接、插入音频视频等。同时，我也初步接触到了HTML语言和JavaScript脚本语言，感受到了编程语言的强大功能以及编程能力的重要性。我也用PS软件处理了少量图片，提高了使用PS软件的水平。在制作的时候遇见很多的问题，但是通过老师同学的帮助以及自己翻阅书籍查询网络资料大部分都得到了解决。当然，这个网站是一个静态网站，还很不完善，界面也不是十分美观，在使用上也还有很多不变。但是我相信只要通过不断地努力学习，在不久的将来我一定可以制作