web 课程设计 dai.docVIP

. 课 程 设 计 课程名称 网站管理与维护 题目名称 个人网站 专业班级 计算机信息管理班 学生姓名 代芳 学 号 61202130045 指导教师 王袆 二○一四年4月22日 目 录 设计任务分析 ………………………………………..1 1.1 网站规划 ………………………………………………..1 1.2 网站结构 ………………………………………………..2 模块设计 ……………………………………………...3 2.1模块设计 ………………………………………….……...3 流程图 ……………………………………………...10 3.1网页设计流程图 …………………….……………….10 源代码 ……………………………………….…….11 4.1 源代码 ………………………………………………....11 测试情况 ………………………………………..….35 5.1代码测试 ………………………………………………..35 5.2 网页测试 ……………………………………………....37 小结小结（包括感想、致谢、设计总结） 第一章设计任务分析 1.1网站规划 设计关于古风文化的个人网页，其中包括古风首页、古风诗词、古风乐器、古风百科、中医养生、江湖纪事等，内容的网页。其中主页比较简单，包括诗词、乐器、百科、养生、新闻纪事的链接。主要使用布局表格、层、DIV-CSS布局、行为、链接等常用网页设计方式进行设计。 1.2 网站结构 1.2.1网站的整体结构 主页中包含五个页面：古风诗词、古风乐器、古风百科、中医养生、江湖纪事等五部分，而每部分网页下都包含链接页面。 网页1-6的内容分别为： 主页 古风诗词 古风乐器 古风百科 中医养生 江湖纪事 结构图如下 第二章 模块设计 2.1模块设计 2.1.1班级简介网页设计 1．建立布局 2．1.1（1） 在Dreamweaver8“插入”工具栏中单击“布局”进入布局模式，再切到“绘制层”绘制大概的布局再结合布局表格，从而建立一个大概的布局。 2．使用背景颜色：选中该项，按浏览可以插入准备需要的背景颜色作为表格的背景颜色 2.1.1（2） 3．在网页中插入图像 利用Dreamweaver8可以方便地在网页中插入图像，还可以设置图像边框、大小、和位置，并且可以直接对图像进行编辑。在网页需要的地方把光标定位在此位置。 在“常用”栏中选择“图像”点击则打开“工具”菜单，选择“图片”菜单项，在子菜单中选择“来自文件”菜单项，或者单击工具栏中的图片工具图标，弹出一个“图片”对话框 在此对话框中单击“浏览”按钮，出现一个“选择文件”对话框。 在“选择文件”对话框的文件列表中选择某个图像文件，然后单击“确定”按钮，或直接双击该图像文件，该图像即被加入到网页中。在网页中插入图像后我们就可以对图像的各种属性进行设置，这选中所插入的图片，单击它，则可以在下面的“属性”面板中对图片的高、宽等进行需要的设置，从而来达到自己的需要的尺寸 2.1.1(4) 2.1.1（5） 4．滚动文字? 选择文字，点开“代码”视图 在以选中的文字或图片的地址开头前输入、、 marquee，再选中的在以选中的文字或图片的地址后输入/marquee，中间部分则需要输入相应的代码则可达到（七）设置滚动图片和文字 1.选择图片或文字，点开“代码”视图。 2.在以选中的文字或图片的地址开头前输入marquee，再选中的在以选中的文字或图片的地址后输入/marquee，中间部分则需要输入相应的代码则可达到效果 5．表单的制作 （1）制作文本域 1）.将“插”入栏切换到“表单”插入栏，单击“文本字段”， 2）.在光标所在的位置插入文本域，在“属性“面板中进行相应的需要设置，同时那里面包含三种类型的设置 “单行”、“多行”、“密码”设置。三种分别用于网页中。 2.1.1（6） 2.1.1（7） （2）制作单选按钮 1.）在“表单”插入栏中选择“单选按钮”按钮则它就在光标的位子显示出来。 2）. 在“属性”面板中对它进行相应的设置就完成。 （3）制作复选框 1）.在“表单”插入栏中选择“单选按钮”按钮则它就在光标的位 显示出来。 2）. 在“属性”面板中对它进行相应的设置就完成 （4）制作菜单 1）.在“表单”插