《网页设计与制作》课程设计.docx

《网页设计与制作》

课

程

设

计

姓名：佟东明

学号：y1406291304

班级：14级计算机系网络技术班

时间：2015/12/16

经过了2个学期的学习，使我对“网页设计与制作”有了较为全面的认识与了解。下面，是本次课程设计（网页设计制作）的流程：

网页主页与子页的设计制作：

整个主题为《环保》。首先我为整个网站选定了fav图标，现在主流新版浏览器在浏览或者收藏网页时会在标签页网站名称的左边显示favicon，HTML语言为：

linkrel=shortcuticonhref=XXXX.ico/

我这里命名为favicon.ico，路径位于网站目录/images/

主页调用了事先编译好的setHomeSetFav.js的JavaScript文件

为网页添加了“设为主页”、“加入收藏”、“联系我们”等功能，用JS语句直接调用里面一个类，JS文件放在网站目录的JS目录，例如：

scripttype=text/javascriptsrc=js/setHomeSetFav.js/script

divclass=top

divclass=top_contentul

liaonclick=AddFavorite(window.location,document.title)href=javascript:void(0)加入收藏/a/li

左上角的Logo是用PhotoShop绘图软件进行“图层合并”合成的，加上了我的班级姓名。分辨率经调整，以适用于CSS框架。

右上角添加了我的联系方式（手机号）

导航栏放了几个超链接，大部分是外链，比如“中国环保部”，在连接到Internet的情况下，点击这些按钮可以访问相应网站。

6、导航栏下面是一个JavaScript编写的插件，具有很美观的动态3D切换效果，

按插件下方Next或者相应数字，即可切换图片，而且图片也做了外链，点击图片即可打开新的选项卡\标签页、新的网站，这里设置为导航栏里相同的外链地址。

为了插件运行正常，请使用新版主流浏览器。

7、中间部分如图所示，也是一些指向环保网站的链接，插入了一些图片、有关于环保的新闻。

8、中间“环保中心”的下方使用了HTML5语言安插了一条滚动信息，内容为：我的班级、姓名、年月日（时间）。鼠标放在上面可以停止文字滚动。

marqueealign=middlebehavior=scrolldirection=leftscrollamount=5scrolldelay=6onmouseover=this.stop()onmouseout=this.start()

strongfontcolor=red14级计算机系网络技术佟东明2015年12月16号星期三/font/strong/marquee

9、右边靠下的位置是调用了系统的Flash插件，我把一个流媒体视频放在了网站文件夹/点击开始按钮即可观看内链本地视频。

10、为使页面美观，最下方按照主流网站设置了相应的导航区域，最右下方是我的易信账号，我生成二维码后，把图片插入在这里，手机用易信扫一扫，即可添加我为好友。

11、因时间缘故，子页设计较为简单，如图，背景改为墨绿色，主要介绍了著名动漫制作人“宫崎骏”，然后下面调用了JS插件，里面是宫崎骏大师的知名动漫作品的截图。采用3D滚动效果。

12、最后是创建网站运行环境，在Windows环境中，打开控制面板---程序---

启用或关闭windows功能。选中IIS相关的组件，点击确定。把做好的网站文件夹，放进网站根目录。启用IIS服务后，即可发布网站，根据获得的IP地址，使用浏览器进行访问。（此操作步骤适用于Windows7/8/8.1/10）

14级计算机系网络技术班

佟东明

y1406291304