网站实验报告

《网页设计与制作》实验报告班级：学号：姓名：2011年4月18日目录实验一――――――Dreamweaver入门及基本操作实验二――――――网页编辑和超链接实验三――――――网页定位技术实验四――――――行为与时间轴实验五――――――CSS和模板实验六――――――数据库配置实验七――――――配置IIS实验一Dreamweaver入门及基本操作1、创建网站。(1)在计算机硬盘上建立一个名为Mysite的根文件夹，并将制作网页的有关素材复制到此文件夹。(2)启动Dreamweaver8,在【起始页】中选择创建新的【HTML】项目，此时就创建了一个空白网页。(3)选择【站点】〡【新建站点】命令。单击【高级】标签，在这个标签选项卡中设置【本地信息】。(4)在【站点名称】文本框中输入“Mysite”，单击【本地根文件夹】文本框右边的图标，选择当前硬盘根文件夹下的Mysite文件夹，将其设置为本地战点的根文件夹。(5)单击【默认图像文件夹】文本框右边的图标，选择文件夹Mysite下的img为默认的图像文件夹。在【链接相对于】选项中，选择【文档】。其他参数默认，并单击【确认】按钮完成新站点的创建。2、制作简单的网页：(1)启动Dreamweaver8,在【起始页】中选择创建新的【HTML】项目,创建一个空白网页。(2)在网页编辑窗口为新网页设置页面属性，选择【修改】〡【页面属性】，在【页面属性】对话框中做各项参数的设置。(3)在【分类】列表中选择【外观】选项，设置【页面字体】为：仿宋，在【大小】下拉列表中选择文字的大小为：20像素，设置【文本颜色】为黑色。(4)单击【背景图像】右边的【浏览】按钮，选择本地站点的文件夹img中的文件bg0067.gif,在【重复】下拉列表中选择【重复】选项。（5）在【分类】列表中选择【标题/编码】选项，在【标题】文本框中输入：我的网站，其他参数默认。如下图所示：(6)选择【文件】〡【另存为】命令，将网页以AAA.htm保存在本地站点Mysite中。(7)选择【插入】〡【图像】，选择img下色111.gif图像（此图像先前已在PS软件中制作好的），点击确定完成，然后调整图像位置，直到恰当。(8)选择【插入】〡【布局对象】〡【层】，在网页文档窗口合适的位置上插入文字定位的层Layer1和Layer2，并在层中输入文字“欢迎访问电子商务网站”。(9)在【属性】面板中设置文字的属性，字体为“宋体——加粗——斜体”。(10)按F12预览网页，选择【文件】〡【保存】命令，将网页以AAA.htm为名保存在本地站点Mysite中。制作实例见下：实验二网页编辑和超链接一、实验内容1、网页文档的编辑。2、各种网页元素的使用3、创建超链接。二、实验步骤(1)将本实验所需素材复制到文件夹Mysite中，并将其设为本地站点。(2)新建一个页面，选择【修改】〡【页面属性】，在【页面属性】对话框中设置背景图像为bj0040.gif，将【左边距】【右边距】【上边距】【下边距】分别设置为0。(3)在【分类】列表中选择【标题/编码】选项，在【标题】文本框中输入：实验二，其他参数默认，然后单击【确认】按钮确认，并将网页sy2.htm本地站点Mysite中。(4)选择【插入】〡【布局对象】〡【层】，分别插入Layer1,Layer2,……………,一直到Layer11，共11个层.分别布局、调整好这些层的位置大小。(5)在Layer1中输入入标题文字“人生的伴侣，知识的源泉”，并选中这些文字。在属性面板中设置字体大小为36，格式为“标题一”，作用于文字。(6)在Layer2中选择【插入】〡【HTML】〡【水平线】，插入水平线。(7)在Layer3中选择【插入】〡【日期】，插入日期。(8)在Layer4中选【插入】〡【图像对象】〡【导航条】命令，出现导航条对话框。(9)在【项目名称】文本框中设置第一个按钮的名称为：a；单击【浏览】按钮，在4个按钮状态的文本框中分别输入img文件夹中的a1.gif,a2.gif,a3.gif,a4.gif4个文件的路径和名称；在【按下时，前往的URL】,文本框中输入该链接对象的名称和路径，选择【插入】下拉列表中的“水平”放置导航条。如下(10)重复步骤(9)，设置好其他5个按钮。(11)在Layer5中选择【插入】〡【表单】〡【跳转菜单】命令，在弹出的【插入跳转菜单】对话框中创建一个菜单选项，可在【文本】框中输入菜单选项的文字“卓越亚马逊”，在【选择时，前往的URL】文本框中，输入选择该菜单选项所链接的网站域名单击加号继续添加其他的链接菜单，最后点击【确认】完成。如下(12)在Layer6到Layer8中选择【插入】〡【图像对象】〡【鼠标经过图像】命令，分别插入原始图像文件tu1_2.gif,tu2_2.gif,tu3_2.gif,鼠标经过图像文件为tu1_1.gif，tu2_1.gif，tu3_1.gif。(13)在Layer9中插入img文件夹中的图像文件close1.png，选中该图像，在【属性】面板中的【链接】文本框中，输入mailto:[e-mail],建立E-mail链接(14)在Layer10中选择【插入】〡【媒体】〡【Flash】命令，插入img文件夹中的动画文件shu2.swf.(15)在Layer11中，插入文字“藏书不难，能看为难；看书不难，能读为难；读书不难，能用为难；能用不难，能记为难。”“凡事不宜刻，若读书则不可不刻；凡事不宜贪，若读书则不可不贪；凡事不宜痴，若读书则不可不痴。”摘自清朝张潮先生《幽梦影》，并选中这段文字进行编辑。(16)适当调整各层的位置大小，对整个网页布局进行调整，直到达到满意效果。最后将网页以sy2.htm为名保存在本地站点Mysite中。结果如下：实验三网页定位技术一、实验内容1、表格的创建和应用2、层与表格的综合3、框架的创建和应用二、实验步骤1、表格的创建和应用(1)将本例所需素材复制到文件夹Mysite中，并将其设为本地站点。(2)在网页文档窗口，选择【修改】〡【页面属性】命令，在【页面属性】对话框中做各项参数的设置。单击【背景图像】右边的【浏览】按钮，选择本地站点的文件夹img中的文件bg0005.gif,在【重复】下拉列表中选择【重复】选项。(3)选择【文件】〡【保存】命令，将网页以sy3.htm为名保存在本地站点Mysite中。(4)选择【插入】〡【表格】命令，在【表格】对话框中设置表格参数。a.设置【行数】为3，【列数】为8，【宽度】为640像素。b.设置表格的【边框粗细】为0，【单元格边距】和【单元格间距】为0.其他参数默认。(5)在表格的【属性】面板中，选择表格的【对齐】方式为“居中对齐”。分别选中第一行和第二行的单元格，分别将表格个合并为一个单元格。(6)选择【插入】〡【图像】命令，在第一行单元格中插入img中的文件bj0012.jpg,选中该图像，在【属性】面板中，将设置为【宽】640像素.(7)在第二行单元格中插入文件welcom,jpj，在【属性】面板中单击【居中】按钮，使图像居中。(8)选中第三行的全部单元格，在【属性】面板中，设置单元格的【宽】为80像素，【高】为300像素。(9)在表格中输入相关文字，最后将将网页以sy2.htm为名保存在本地站点Mysite中。结果如下：2.层与表格的综合(1)将本例所需素材复制到文件夹Mysite中，并将其设为本地站点。(2)在网页文档窗口，选择【修改】〡【页面属性】命令，在【页面属性】对话框中做各项参数的设置。单击【背景图像】右边的【浏览】按钮，选择本地站点的文件夹img中的文件bg0086.gif.(3)选择【文件】〡【保存】命令，将网页以sy3-1.htm为名保存在本地站点Mysite中。(4)选择【插入】〡【表格】命令，插入一个1行4列的表格，在表格内输入内容为现代文学、生活艺术、文化教育、科学技术的文字。(5)在表格【属性】面板设置表格的【边框】为2，【边框颜色】为＃333333.(6)【插入】〡【布局对象】〡【层】命令，分别插入4个层：Layer1，Layer2，Layer3，Layer4,在每个层中插入一个4行1列的表格,在每个表格的【属性】面板设置表格的【边框】为1，【边框颜色】为＃00FFFF.(7)调整好各个层和表格的位置大小，完成如下图示结果：(8)按F12预览网页，选择【文件】〡【保存】命令,将网页以sy3-2.htm为名保存在本地站点Mysite中。3、框架的创建和应用(1)将本例所需素材复制到文件夹Mysite中，并将其设为本地站点。(2)选择【插入】〡【HTML】〡【框架】命令，先插入顶部和嵌套的左侧框架，在主框架（mainframe）中插入底部框架，左框架（leftframe）中插入顶部框架，调整左框架与底部框架高度相同。(3)先插入顶部和嵌套的左侧框架，在主框架（mainframe）中插入底部框架，左框架（leftframe）中插入顶部框架，调整左框架与底部框架高度相同。(4)在左框架的顶部框架（topframe1）中插入一个4行1列的表格，插入图片完成与文档的链接。现代文学，链接literature.htm；生活艺术，链接art.htm；文化教育，链接edu.htm；科学技术，链接scie.htm。(5)按F12预览网页，选择【文件】〡【保存】命令,将网页以sy3-3.htm为名保存在本地站点Mysite中。如下所示：实验四行为与时间轴1、实验内容：行为的应用。（1）完成鼠标拖曳层以及在层上单击时播放音乐的功能，（2）装载页面时设置状态栏文字为：“欢迎访问！”，并弹出提示信息：“可用鼠标拖曳图片！”。（3）创建4幅鼠标经过图像，实现如下功能：当鼠标指向某幅图时，在中间显示其对应文字说明的图片。（4）制作下拉菜单：以实验3的2题为基础，完成如下功能：当鼠标指向第一行的列时，显示其其下面的列，鼠标移走时隐藏。然后完成单击某项时的链接跳转。（5）制作控制flash播放、停止的页面。2、实验步骤：(1)将本例所需素材复制到文件夹Mysite中，并将其设为本地站点。(2)新建一个页面，选择【修改】〡【页面属性】命令，在【页面属性】对话框中做各项参数的设置。单击【背景图像】右边的【浏览】按钮，选择本地站点的文件夹img中的文件bg0006.gif.将【左边距】【右边距】【上边距】【下边距】分别设置为0。(3)选择【文件】〡【保存】命令,将网页以sy4.htm为名保存在本地站点Mysite中。(4)在网页合适的位置上插入2个层，在Layer1中插入图像文件Camp1.jpg,在Layer2插入图像文件m1.jpg。(5)按快捷键Shift+F4打开【行为】面板。无须选中层，单击行为添加按钮，在动作菜菜中选择【拖动层】命令，弹出一个【拖动层】的对话框并进行设置，点确认。在事件菜单中选择【onMouseMove】命令。使得在浏览该页面时，能随意拖动插入图像Camp1.jpg的层Layer1。(6)选中层Layer1，并单击行为添加按钮，选择【播放声音】动作，在弹出的【播放声音】对话框中输入文件夹Music中的声音文件李圣杰——关于你的歌.mp3,并单击【确认】按钮确认，如下图(7)选中该行为，并单击事件列表中下三角形按钮，在菜单中选择事件【onClick】。其意思为单击层Layer1，播放声音文件李圣杰——关于你的歌.mp3。(8)选中层Layer1，并单击行为添加按钮，在动作菜单中选择【设置文本】〡【设置状态栏文本】命令，在【设置状态栏文本】对话框中输入“欢迎访问！”，并单击【确认】按钮确认，如下图(9)选中该行为，在菜单中选择事件【onLoad】,其意为装载页面时，在状态栏中显示文字“欢迎访问！”。(10)选中层Layer1，并单击行为添加按钮，在动作菜单中选择【弹出信息】，并且在【弹出信息】对话框中输入“可用鼠标拖曳图片！”，并单击【确认】按钮确认，如下图(11)选中该行为，在菜单中选择事件【onLoad】