个人主页课程设计

1.课程设计的目的 (3)

2.网站的主题与意义 (3)

3.实验基本原理 (3)

4.运行环境 (4)

5.设计步骤 (4)

5.1 网页制作的前期策划和准备 (4)

5.2 设计方案 (5)

5.3 网页的制作 (7)

5.4 具体设置以及部分代码 (7)

6.调试过程分析 (12)

7.网页的测试与发布 (13)

7.1网页截图 (13)

7.2网页运行结果 (15)

8.小结 (15)

一．课程设计的目的

通过本课程的训练，使学生掌握HTML语言的语法结构，能够使用HTML语言编写静态网页，控制网页中的文字，图片，超级链接，表格，表单，框架等，能够使用HTML语言实现移动的文字，制作多媒体页面，能够读懂复杂网页的源代码。熟练使用网页设计工具Frontpage、Dreamweaver MX，能够使用Dreamweaver MX设计网页的框架，导航条，设置文字，图片，超级链接，滚动文字，弹出窗口的属性，能够使用Dreamweaver MX设计出比较复杂的网页，建立小型网站。熟悉Flash MX的绘图，帧，层，属性面板的使用，能够使用Flash MX制作简单的动画，设计网页的FLASH标题。掌握基于WEB的数据库应用，理解在B/S模式下网页如何同数据库之间建立联系，重点了解基于IDC和ASP两种方式以及各自的原理和运行环境，学会使用ASP的基本语法、内建对象、内建组件以及ASP

访问数据库的方法，能够读懂并修改大型动态网站（ASP网站）的代码。

二.网站的主题和意义

网站的主题：家乡介绍

网站的意义：

在这次课程设计中，我和我的搭档选择的是制作一个以介绍家乡为主的网站。由于以前学过有关网页的编程语言，所以这个主页设计相对来说并不是很难。通过查找有关家乡的资料，将自己所学的网页制作的相关知识运用到实际中，加深了对理论知识的理解。总之，这次个人网站的课程设计提高了我们的动手能力，对我们以后的学习和工作都有很大的帮助。

三.实验基本原理

通过上机操作使学生实际掌握HTML语言的使用方法，使用HTML设计网页。通过上机操作使学生熟悉Frontpage、Dreamweaver MX，Flash MX的使用方法，能够使用Dreamweaver MX设计比较复杂的网页，能够使用Flash MX设计简单的动画，能够使用ASP创建动态网站，巩固和加深对网站建设与网页制作知识的理解，增强计算机的使用和实际操作能力。

本课程以Windows XP和Dreamweaver MX，Flash MX作为系统环境，主要讲述HTML的基本语法和Frontpage、eamweaver MX、lash MX的基本操作以及ASP的应用。

四、运行坏境

本网页主要基于windows XP的操作系统，Macromedia Dreamweaver 、Macromedia Fireworks 的运行坏境及Photoshop CS4。

五.设计步骤

5.1 网页制作的前期策划和准备

在正式制作我们的网页之前，我们将主题确定在介绍家乡的风景名胜上，一共做了六个子页面，但是真正有内容的只有三个，其他三个由于时间关系就有待改进了，因此加上主页，有内容的网页一共是四个。然后我们确定了一下各网页的整体布局以及颜色的选取，由于是介绍家乡的风景名胜区，因此整体的颜色决定采用绿色，既符合风景区的自然之美也跟进了当今社会的趋势，而且绿色在浏览者看起来也比较舒服，会对我们所做的网站留下个好印象。确定了这些后，就是上网查找有关资料，比如家乡风景区的LOGO，一些图片等。为了让网页做得更能符合当今网页设计的潮流，在网上找了一着动态效果的代码，通过仔细阅读，修改成自己想要的样子。

5.2 设计方案

①主架构设计，结构图如图1所示。

图1

②家乡首页设计，结构图如图2所示。

图2

主页

家乡首页

景区简介

新闻中心

景区展示

餐饮美食

酒店住宿

家乡首页

图片

导航

LOGO

滚动图片

信息栏

友情链接

③景区简介设计，结构图如图3所示。

图3

④景点展示设计，结构图如图4所示。

图4

景区简介

图片

导航

简介信息

友情链接

景点展示

图片

导航

图片特效

友情链接

5.3 网页的制作

在网页的制作上，我们使用了DreamWeaver软件，我们一致认为所有网页的总体布局是一样的，因此先总体的做了个网页的模板，在此模板的基础上，再去设计各个子页面。此模板由导航区，内容区以及友情链接区组成。而每一个模块都是用表格布局的。

导航区内的导航条是用借助PhotoShop软件制作的一张图片，再经切片工具将之切成几个部分，这样就实现了导航条的链接功能。

内容区中除了包含李白描写南岳衡山的诗那张图片外，其他的地方均空出来，方便后面的页面加内容。而这张图片，也是在PhotoShop软件中制作的，至于诗所用的字体是在网上找的“叶根友疾风草书”。

友情链接区只是形式的和百度、谷歌、必应、新浪、网易网站进行了链接。

在logo.html页面中，我们制作了一张整体的家乡风景的代表图，点击“进入主页”便能进入各子页中。

在所有的页面中，背景图片以及导航区的图片都是我们自己动手PS的，只在有关于景区简介以及景点展示中的家乡风景图片是从网上搜集的。下面请看具体设置。

5.4 具体设置以及部分代码

景区首页页面中图片滚动的动态效果，代码如下：

秋<日出> 夏<云海 > 春<花海 > 冬<冰雪 > 南岳牌坊

友情链接区的代码如下：

cellspacing=0 background="pic/index2_07.jpg">

友情链接

class="new">百度

class="new">谷歌

class="new">必应

class="new">新浪

class="new">网易

景区简介页面中家乡简介代码如下：

	南岳衡山简介 衡山，又名南岳，是我国五岳之一，位于湖南省衡阳市南岳区，海拔1300.2米。由于气候条件较其他四岳为好，处处是茂林修竹，终年翠绿；奇花异草，四时飘香，自然景色十分秀丽，因而又有“南岳独秀”的美称。清人魏源《衡岳吟》中说：“恒山如行，岱山如坐，华山如立，嵩山如卧，惟有南岳独如飞。”这是对衡山的赞美。衡山又名南岳衡山、寿岳、南山，为我国五岳名山之一，主峰坐落在湖南省第二大城市——衡阳市南岳区，七十二群峰，层峦迭嶂，气势磅礴。素以「五岳独秀」、「宗教圣地」、「文明奥区」、「中华寿岳」著称于世。中华祝颂词“福如东海，寿比南山”的“南山”即南岳衡山。南岳衡山现为国家级重点风景名胜区、国家级自然保护区、全国文明风景旅游区示范点和国家5A级旅游景区。

景点展示页面中的图片用了特效，在之间还需要导入两个有关这个特效的文件，代码如下：

图片特效代码如下：

由于这个特效的算法文件FancyZoom.js和FancyZoomHTML.js中的代码过长，这里就不列出来了。

六、调试过程分析

在对网页进行调试的时候，发现了一个严重的问题！由于网页是用表格进行布局的，我们在自己的电脑上运行后的样子和在机房运行后的样子出现了差别。经过仔细研究，发现是分辨率的不同引起的！我们自己的电脑上的分辨率比机房里的电脑设置的分辨率要高，所以在机房里打开网页后就感觉有点不正常！后来，我们把机房电脑的分辨率设置与自己电脑一样的分辨率，就达到了同样的效果。但是这是个治标不治本的办法，我们觉得要彻底解决这个问题，应该要用到DIV＋CSS的网页布局，由于我们尚未得掌握此项技术，所以这个问题也只能暂时治标了。

七．网页的测试与发布

7.1网页截图：

主页截图

景区首页截图

景点展示截图

7.2网页运行结果：

在Internet Explorer8.0中进行这次个人主页设计的最后测试，打开主页，依次对各个链接进行测试，以及观察整体的布局和色彩搭配，最终的样式达到了预期想要的效果，用到的各个网页特效也能正常的运行。

八、小结

在进行个人主页课程设计的这几天里，我利用了学习之余的一切可利用的剩余时间，全心全意投入到网页世界，去不断的学习，去不断的探索；同时去不断的充实，去不断的完善自我，在网络的天空下逐渐的美化自己的人生！本次期的网业设计课程，开展了动态思维训练教学活动，对于我们学生来说，可以激发学习兴趣，调动学习的自觉性，自己动脑、动手，动口，运用网络资源，结合教材及老师的指导，通过自身的实践，创作出积聚个人风格、个性的个人网页。总体来说，这次的实验过程，我学会了很多知识，虽然过程比较艰辛，但在INTENET 领域中，有了一个展示自我的空间，我觉得很开心、很有成就感。

一.充分发挥动手能力

作为网页设计的初学者，我对网页设计非常感兴趣，一心想设计出一个美观、实用、内容丰富的个人网页。通过自己动手、动脑，通过网络资源，老师的指导，在不断发现问题和解决问题的过程中学到了很多知识，也增强了我的创作能力和动手能力，在网页设计过程中，从构思到设计、完善、维护，整个过程我都全身心投入，使我真正学到了网页设计的知识。此次网页内容比较少，但是我花了很多时间来完成它，所以它对我以后做网页有很大的帮助。在这次做网页的过程中也让我学到了很多东西，所以从我内心来说我是很满意我的这次经历。

二.在设计过程中不断提高网页设计水平

在本次网页设计中，我不仅学到了很多关于网页设计方面的知识，也从中学会了关于网络、编程等方面的知识。我从最初开始运用FrontPage设计网页，到

后来运用Dreamweaver、PhotoShop等网软件设计网页，完善网页。在这个过程中，我通过自学教材、上网查询，学习了Dreamweaver、PhotoShop等网页软件的应用，学会了管理、维护自己的站点，以及一些简单动画、控件的制作等等。在设计过程中也出现了很多的问题，但通过看书，上网查询，请教老师等方式，不断的学习、解决、提高，设计出的网页不论是外观还是内容，都在不断的进步、改善。可以说在自己动手，不断实践的过程中，网页设计水平得到了很大的提高。此次网页设计涉及到html,javascript,css等编程语言技术方面的知识，我们意识到只有综合运用多种知识，才能设计出动感十足，富于个性的web页面，才能全面展现互联网这一新型媒体的独特魅力和超强功能。

我们这次网页的主题是介绍家乡，主要是以家乡的风景。在布局和CSS样式方面还是比较好做的。只是在图片的处理方面，本为是打算上网找图片，结果利用了多个搜索引擎，发现并不能找到我们认为满意的图片，于是我们只能自己动手利用PhotoShop制作图片了。由于我们对这个软件还是处于入门状态，所以图片处理方面使用起来还有点吃力。不过，我们没有气馁，而有加足干劲，慢慢地细致地把图片都制作出来了。

三.不足之处

对于网页设计软件的强大功能运用得还不够。在网页制作过程中，想提高设计水平，想有个理想的网页，必须学会代码的运用，我将在以后的学习过程中不断加强这方面的学习总体来说，通过今次的对网页设计的学习，有收获也有遗憾、不足的地方，但我想，我已经迈入了网页设计的大门，只要我再认真努力的去学习，去提高，凭借我对网页设计的热情和执着，我将来设计出的网页会更加专业，更完善。也希望老师在今后的日子里多指导。

总之，这次课程设计又使我接触到了一门新的知识，学会了网页设计的基本思想，加深了我对网页编程语言的了解，以及加强了我动手做网页的实际能力。对我以后的学习和工作打下了基础，使我受益匪浅。