网页设计实验报告..docx
网页设计实验报告. 网站规划与设计 实验报告 院(系)名称：经济与管理学院学生姓名：杨坤 学号：02135046 专业名称：信息管理与信息系统班级：信管1302班 实验1 Dreamweaver 8.0基本操作及简单网页制作实验 1实验目的与要求 (1)掌握Dreamweaver 8.0基本操作。 (2)掌握本地站点的设置方法。 (3)熟悉制作一个简单网页的过程。 (4)掌握表格的使用方法。 (5)掌握层的基本操作方法。 (6)掌握使用框架布局页面的方法。 2. 试验内容和步骤 1)网页编辑器基本操作 (1)了解Dreamweaver 8.0操作界面上各个部分的主要功能。 了解主菜单、插入面板，属性面板、文档工具条，页面编辑窗口、面板集合的各项功能和操作方法。 (2)了解各种常用快捷键的用法。CtrlS、CtrlQ、CtrlZ、CtrlY、Ctrl C、CtrlX、CtrlV、CtrlA、F12 2)建立网站的基本操作 (1)打开站点管理器，在本地计算机的当前盘根文件夹中，建立名为mysite的本地站点的根文件夹。 操作步骤如下： 启动Dreamweaver 8.0，选择/命令。 在站点定义对话框中，选择选项卡，在站点名称文本框中输入“mysite”。也可在选项卡中进行设置。 单击下一步，本次试验学习的是静态站点的定义，选择第一项“否，我不想使用服务器技术”并确认。单击下一步，本次试验中的站点文件是复制在本地计算机上的，选择第一项“编辑我的计算机上的本地副本，完成后再上传到服务器”，单击下一步，在选择远程服务器的连接方式，选择“无”，即不使用远程服务器连接。单击下一步，直至完成。 (2) 在文件夹mysite中新建名为source的子文件夹。把准备好的网页素材文件复制到source文件夹中去。 3)制作简单网页 在Dreamweaver 8.0网页编辑器中新建一个页面。选择，给这个页面取一个名字“index.htm”,保存在站点mysite下。同理创建一个空页面Enter 2.htm。 在index.htm页面编辑窗口，输入文字“欢迎光临我的网上书店”等等， 选取文字，在属性面板上对文字的大小、字体、颜色等进行设置。保存页面。 将光标位于文字下方，在插入面板中找到按钮即可插入图片，也可以直接点击主菜单上的/实现插入图片的操作。在文件选择窗口，选择你准备好的source文件夹下的图片。点击图片，在属性面板中显示了图片的各种信息，可以根据需要，对图片的大小进行修改，也可以直接用鼠标通过拉伸改变图像的大小。 插入图片以后，还可以为页面设置背景颜色或图片，点击属性面板上的，在对话框中可对背景颜色或背景图片进行设置。 在页面的右下方输入文字“Enter”，选取文字，为它添加超级链接。在属性面板的“链接”一栏中填写链接的地址，可以是其他某个网站的地址，或者是你网站内的某个文件上（可选取Enter2.htm），如果希望该页面是在一个新窗口中打开，可以在“目标”中选择“blank”,新页面在当前浏览器打开选择“self”。 这时，一个简单的页面完成了，保存后按F12进行预览。 4)制作表格 (1) 表格的创建、插入、删除、复制和移动等操作 操作步骤如下： 创建一个名为exe1.htm 的网页文件，单击面板的按钮，在对话框中页面上输入4行5列的表格，在表格中输入如图11所示的内容。并在表格上方增加标题“信管专业各班平均成绩表”，标题格式设置为方正舒体、5号、粗体、003366。 图11 各班平均成绩表 在表格“01级3班”前插入一行，内容为“0l级2斑、85、82、88、82”。在表格中“计算机组成实验”列前插人一列，内容为“计算机组成、69、73、75、80”。 将00级1班这一行移到表格的最后一行；删除“英语精读”这一行。 (2)单元格的拆分、合并和格式化操作 使表格中的数据全部居中，使整个表格在页面上居中。 将表格的“计算机组成”和“计算机组成实验”两个单元格合并成一个单 元格，内容改为“计算机组成和实验”，设置为居中、黑体、5号。 选择命令，将表格套用系统预没的格式simple3。 (3)导入外部数据和表格排序 在Excel中新建图11的表格,保存为value.xls文件。 创建名为value.htm的网页文件。选择命令，就可导入指定的数据文件。 选中表格的“电子商务”列，选择，在对话框中设置参数。在下拉列表框中选择按(即第5列)排序，选择和。观察排序后的结果。 表格套用格式是系统预设格式“AltRows:green&yellow”。 表格设置：为3，为FF0000。 5)层的基本操作方法 创建一个名为exe2.htm的网页文件。可设置相关的背景图片。 在网页合适的位置上，选择中，分别创建两个名为source 和shadow的层，Z-index的尺寸分别为2和1。 在层中输入文字“书人生的伴侣，知识的源泉”，两个层中的文字的颜色分别为红色和黑色。移动层，使两个层略微错开重叠，使文字带有阴影效果。如图12所示。 打开层的浮动面板，选中复选项，然后移动名为source的层，试比较该复选项选与不选的区别。 6)使用框架布局页面的方法 创建一个名为exe3.htm的网页文件。选择命令。同理创建一个名为exe4.htm的网页文件，选择，比较两种框架的不同之处。 删除exe4.htm的网页文件中创建的框架，然后创建框架，并把框架改为框架，调整框架的大小。 分别用鼠标在面板中选中主框架(mainFrame)、左框架(1eftFrame)、顶框架(topFrame)和整个框架集(也称框架组)，观察结果。 在主框架(mainFrame)中插入底部框架(bottomFrame)，选中左框架(1eftFrame)插入顶部框架，将左框架分割成上（topFrame）下(1eftFrame)两部分。 分别在框架面板中选中topFrame、topFramel、mainFrame、1eftFrame、bottomFrame 5个框架，并给这5个框架设置背景颜色共#AAFFFF、#CCFFFF、#CCFFCC、#CCFFCC、#CCFFFF。 保存框架文件。 设置exe4.htm框架文件的框架集的属性。各项参数分别是：为“是”，为00CCFF，为2像素，左边为100像素。分别设置的单位，在下拉菜单中分别选择、命令，观察不同的结果。 在topFrame、topFramel、mainFrame、1eftFrame、bottomFrame框架中，可插入层、表格、图片、动画、文字等。 保存网页文件，进行预览。 3. 代码及其结果： 实验2 网页制作综合实验 1.实验的目的与要求： （1）使用框架构建完整页面。 （2）制作一个完整的页面。 （3）掌握创建和应用CSS样式表的方法。 2作业 2.1内部样式表的应用 2.1.1主要代码截图 *margin:0;padding:0;font-size:14px; ullist-style:none;height:50px;border-bottom:#F60 5px solid .nav liheight:30px;line-height:30px;width:100px;background-color:#ccc;margin-bottom:1 px;text-align:center;float:left;margin-top:20px; .nav li atext-decoration:none; li:hoverbackground-color:#F60;color:#fff; 首页 新闻快讯 产品展示 售后服务 联系我们 2.1.2页面运行截图 2.2外部样式表 2.2.1主要代码截图 无标题文档 收藏本站 欢迎登录注册 购物车 0 全部商品分类 手机 数码 合约机 华为荣耀 单反 智能设备 数码城 吃货俱乐部 团购 发现 二手特卖 名品汇 Css代码截图： /*logo*/ .logoBarbackground:#1d7ad9;height:85px; .logopadding-left:41px;padding-top:13px; .search-boxwidth:430px;height:35px; margin-left:185px;margin-top:23px;font:14px/35px "微软雅黑","Microsoft YaHei" .search-textwidth:350px;height:25px;backgrond-color:#fff;padding:5px; .search-btnwidth:70px;height:35px; background-color:#F60; /*购物车*/ .shopCarwidth:145px;height:35px;font-size:14px;font-family:"微软雅黑","Microsoft YaHei" ;background-color:#ff8c00;margin:23px 50px 0 0; .shopTextheight:100%;width:87px;border-right:#e27a00 solid 1px;background:url(./image/gou.jpg) 10px center no-repeat;text-indent:40px;font:14px/35px "微软雅黑","Microsoft YaHei" .shopcwidth:56px; height:100%;background:url(./image/jianshu.jpg)33px center no-repeat ;text-align:left;font:14px/35px "微软雅黑","Microsoft YaHei" text-indent:10px; /*导航*/ .navBoxheight:35px;background-color:#1369c0;color:#FFF;clear:both .shopClasswidth:190px;text-align:center;font:14px/35px "微软雅黑","Microsoft YaHei" .navheight:35px; .nav lifloat:left;padding:0 35px; .nav aheight:35px;display:inline-block;color:#FFF .nav a:hovercolor:#90C; /*小列表*/ .shopClass_boxbackground-color:#06F; .shopClass_itempadding:10px 14px; 2.2.2页面运行截图 实验四网页程序设计 一、实验目的 通过几个实例练习，了解JavaScript、VBScript在网页中的应用。 二、实验内容和操作步骤 1显示一个动态的时钟 操作步骤：进入DW->新建一个页面->点击“HTML”。在指定位置输入以下代码可以实现一个动态的时钟。
