个人主页课程设计
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
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 具体设置以及部分代码
景区首页页面中图片滚动的动态效果，代码如下：