网页设计技术

网页设计技术PAGE1PAGE2《网页设计技术》实验报告姓名：学号班级：学院：专业：教师：网页设计技术全文共5页，当前为第1页。网页设计技术全文共5页，当前为第1页。实验任务:(1)实验目的：1、本实验为设计与创新型实验，要求学生在掌握网页制作软件Dreamweaver的基本功能基础上，掌握网页设计制作软件的方法和技术，执行创作完成个人网页、班级或寝室网页。2、利用Dreameaver制作一个简单的个人、班级或寝室网页。(2)实验内容：1、掌握网页的制作基本流程，配色技巧。2、掌握Dreameaver的工作界面的工具栏的基本功能。3、利用Dreameaver制作一个简单的个人网站。(3)实验要求：1、页面量达到15页以上2、有清晰的导航结构(如采用导航条技术等)3、含有文本、图片、音乐、视频多媒体元素4、含有自制的FLASH动画、GIF动画、按钮5、网页的布局合理,利用表格或层技术进行表格的布局6、网站整体风格一致、色彩协调、主题鲜明。（4）实验环境：安装有Dreameaver软件的能上网的计算机网站功能：网页设计技术全文共5页，当前为第2页。说明网站的整体功能,按下表所示结构给出每个页面的功能说明。网页设计技术全文共5页，当前为第2页。页面名称功能\文件路径\页面1.htm网站首页\文件路径\页面2.htm个人信息\文件路径\页面3.htm作品介绍\文件路径\页面4.htm一些相关链接\文件路径\页面5.htm其他内容\文件路径\页面6.htm浏览专区\文件路径\页面7.htm下载专区\文件路径\页面8.htm办公资源\文件路径\页面9.htm教务管理\文件路径\页面10.htm电子邮件\文件路径\页面11.htmFTP服务\文件路径\页面12.htm教学资源\文件路径\页面13.htm综合资源\文件路径\页面14.htm音乐\文件路径\页面15.htm图片网站结构：说明网站的基本结构,按下图所示给出网站的超链接结构说明。主页.htm主页.htmP5P4P3P2P1P5P4P3P2P1P7P8P7P8P9……制作流程：分析网站结构，下载所需要的素材。实验操作过程1.站点的创建启动dreamweaver8界面，单击【创建新项目】列表栏中的【HTML】超链接。选择【站点】—【管理站点】—【新建】命令，打开【站点】对话框，在【基本】选项卡中的站点名称文本框中输入站点名称“walhj”。单击【高级】标签，在【高级】选项卡中设置本地站点参数。在【本地跟文件夹】文本框中输入本地站点所对应的本地根文件夹。“E:网页制作”。单击【下一步】按扭。选中【否】单选按钮，表示该站点是一个静态站点，没有动态页。单击【下一步】选择“在本地进行编辑，然后上传到远程测试服务器”；单击【下一步】从弹出的菜单中选择【无】选项。单击【下一步】，单击完成。随即出现【管理站点】对话框，显示新站点。单击【完成】。2.建立本地站点之后，在文件面板中管理网站文件。在【文件】面板中单击鼠标右键，在快捷菜单中选择【新建文件】，名称为“Untitled.html”.3.网页布局（1）在表格中插入表格：切换到【标准模式】，选择【插入】—【表格】命令，此时弹出【表格】对话框，在【行数】和【列数】中填1和3，边框粗细填0，表格宽度填1000像素。单击确定。（2）创建嵌套表格，选中一个表格单元格，右击选择【表格】—【拆分单元格】在弹出的对话框中填需拆分为行还是列。选中拆分为行，2行。（3）在表格中出入层：选中一个表格单元，选择【插入】—【布局对象】—【层】（4）在层中插入图像：选择【插入】—【图像】在弹出的对话框中【文件名】中选择要插入图像的名称。（图像，音乐，视频与网页保存在同一个文件夹中）单击确定，在弹出的对话框中【替换文本】处填写图片的说明名称。（5）设置图片属性：图像的属性可以通过【属性】面板中各个选项来完成。（6）创建网页名称：选择【查看】—【代码】编写HTML语言。网页设计技术全文共5页，当前为第3页。（7）设置文本的大小及颜色：选中要编辑的文本，选择【文本】—【颜色】/【大小】设置文本的颜色和大小。网页设计技术全文共5页，当前为第3页。（8）设置页面背景颜色：选择【窗口】—【属性】—【页面属性】在弹出的对话框中【背景颜色】处选择想要设置的颜色。（9）在页面的左上角处选择【插入】—【表格】在弹出的对话框中，【行】【列】分别填1，4，【表格宽度】填300像素。在已经创建的表格单元格中分别填“主页”“我的简介”“时事新闻”“经典阅读”。实验结果分析：网页设计技术全文共5页，当前为第4页。网页设计技术全文共5页，当前为第4页。实验总结：通过多次上机实验，对网页制