240 网站规划与设计大作业1

1、网站规划与设计期末论文校外学习中心:内蒙古成培职业培训学校 学号:201812725310029 姓名:霍雄风 成绩 目 录一、运行坏境3二、设计的目的和意义32.1课题的目的：32.2课题的意义：3三、设计步骤：43.1 准备工作：43.2 Flash设计步骤：43.3 HTML的编写步骤：63.4 Dreamweaver的设计步骤：6四、程序源代码10五、调试过程分析18六、网页的测试与发布18七、小结19一、运行坏境 本网页主要基于windows XP /2000 或其他系列操作系统，安装有Flash播放器、网页三剑客：Macromedia Dreamweaver 、Macromedia Fireworks 、Macromedia Flash 的运行坏境。二、设计的目的和意义2.1课题的目的 由于本人比较喜欢火影，所以本次课程设计中主要是以火影为主要的素材。本次课程设计的主题是个人网页制作，我主要做了7个网页。网页主要是以flash为主，子网页主要是以介绍为主，其中包含了人物的特点、擅长的技能、图片，能够帮助火影爱好者更清晰的了解剧情里面的人物关系和自身的特点！还有各种关于火影相

2、关的连接，能够比较系统的找到火影的相关信息，希望对广大感兴趣的人爱好者会有所帮助！ 个人网页设计是采用HTML、Dreamweaver、Photoshop等结合开发的，要进行网页的开发，必须对要Dreamweaver、flash、Photoshop等设计软件有所了解。而且还要熟悉利用HTML语法来编写网页代码。当然，还要有一定美术功底。2.2课题的意义：理论意义随着Internet在中国的迅速发展,人们日常生活中越来越多地使用这项新的技术来为自己的工作和学习服务.由于WEB页面能把文本、图像、声音、动画、视像等多种媒体信息集于一体，不但使信息的显示更加生动，而且使信息的浏览更为方便,同时WEB页能实现网上交易平台、客户信息反馈方便了企业与客户之间信息交流，因此许多企业纷纷建设具有自己独特风格的网站以增强企业知名度.现实意义我们本次通过设计个人网页主要是学习掌握HTML语言的用法，以及Dreamweaver的一些具体操作，还有学会运用一些Photoshop的知识。希望通过本次设计能够熟悉以上知识，并能够设计出好的网页。三、设计步骤：3.1准备工作：本站素材来源：火影中文网、百度、Goog

3、le等，并结合Photoshop、123Flash等辅助软件制作网页背景、图标等素材。素材主要包括网站所需要的图片、火影忍者相关的文字说明如作者岸本齐史简介、火影忍者人物性格分析火影人忍者简介及剧情介绍等。前期构思，主要完成网站主题框架设计如首页与分页面的逻辑结构、各分页面框架布局、首页框架布局、导航栏链接、完成基本的图像文字排版及部分较为简单的页面构思。在头脑里完成网站“火影之家”规划报告（草案）。3.2 Flash设计步骤：. 进入Flash软件的运行环境设置背景颜色为黑色。如图3-1所示： 图3-1将下面的线条重复的放在黑色的背景上面，会出现有种渐变色的感觉。如下图3-2所示：图3-2 还有图片的相应的切换，每张图片都是由模糊到清楚慢慢的变化。（需要编写程序实现这些功能）.在编程区域编写程序，源代码见程序源代码中（style.css）：.效果图如下： 图3-1 图3-2 图3-3 图3-4 图3-5 图3-63.3 HTML的编写步骤： .新建一个记事本文件。 .在文本文档中编辑自己的HTML代码。 .将文本文档的后缀名.txt改成.htm(或者 .html)。 .如果完成后的.

4、htm文档需要修改可以：1.用文本文档的方式打开修改 2.选择IE浏览器查看-源文件修改网页中设计到的主要代码：获取图片代码:背景颜色设置： 文字链接设置：This text图片链接设置：3.4 Dreamweaver的设计步骤： .打开Dreamweaver主界面，单击菜单栏文件打开已经编写好index.Html等网页文件。.然后对index.Html文件的排版进行设置，经过一段时间的调整，主界面基本形成。效果图如下所示： 图3-7 欢迎页面（1） 图3-7 欢迎页面（2）图3-7 欢迎页面（3）.子界面设置效果如下图所示： 图3-8 火影简介截图（1） 图3-8 火影简介截图（2）图3-8 火影简介截图（3） 图3-9人物简介页面截图（1） 图3-9人物简介页面截图（3）单击logo 链接到海贼网的官方网界面，界面截图下： 图3-10 链接界面截图四、程序源代码. style.css中的源代码如下：charset utf-8;/* CSS Document */body font-size: 12px;margin: 0px;padding: 0px;background-colo

5、r: #000;background-image: url(./images/bg.jpg);background-repeat: repeat-x;a color: #362a00;text-decoration: none;a:hover color: #ea0000;text-decoration: underline;#indexmargin:0 auto;text-align:center;color:#ccff66;#index embedwidth:800px;height:600px;#index h1font-size:36px;#index h2 acolor:#02e3e3;font-size:24px;text-decoration:none;#index h2 a:hovercolor:#ccff66;#header height: 223px;width: auto;background-image: url(./images/header_bg.jpg);background-repeat: no-repeat;background-position: c

6、enter;#nav height: 107px;background-image: url(./images/nav_bg.jpg);background-repeat: no-repeat;background-position: center;#nav .nav_main height: 107px;width: 931px;margin: auto;color: #FFC;#nav .nav_main ul margin: 0px;padding: 0px;#nav .nav_main ul li margin-left:45px;line-height:80px;display: inline;#nav .nav_main ul.u1 width: auto;font-size: 20px;font-weight: bold;text-align: center;padding-top: 25px;padding-bottom: 5px;color: #FC0;#nav .nav_main .u1 li a color: #FC0;text-decoration: none;

7、padding-right: 5px;padding-left: 5px;#nav .nav_main .u1 li a:hover text-decoration: underline;color: #FC0;#nav .nav_main .u1 li .red color: #F00;#nav .nav_main .u1 li .red:hover color: #F00;#nav .nav_main ul.u2 text-indent: 25px;padding-top: 2px;padding-bottom: 2px;#nav .nav_main .u2 li a color: #FFC;text-decoration: none;padding-right: 5px;padding-left: 5px;#nav .nav_main .u2 li a:hover color: #FFC;text-decoration: underline;#main height:1200px;width: auto;background-image: url(./images/main_bg.jpg);background-position: center;background-repeat: repeat-y;#main_up background-image: url(./images/up_bg.jpg);background-repeat: no-repeat;background-position: center top;width: auto;#main_up_body width: 931px;margin: auto;height: 1200px;#news height: 1200px;width: 930px;#news .news_main background:#d5ad4b;height: 1200px;text-align:center;

《240 网站规划与设计大作业1》由会员安静分享，可在线阅读，更多相关《240 网站规划与设计大作业1》请在金锄头文库上搜索。