网页设计实验报告..docx

《网页设计实验报告..docx》由会员分享，可在线阅读，更多相关《网页设计实验报告..docx（13页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、网页设计实验报告. 网站规划与设计 实验报告 院(系)名称：经济与管理学院学生姓名：杨坤 学号：02135046 专业名称：信息管理与信息系统班级：信管1302班 实验1 Dreamweaver 8.0基本操作及简单网页制作实验 1实验目的与要求 (1)掌握Dreamweaver 8.0基本操作。 (2)掌握本地站点的设置方法。 (3)熟悉制作一个简单网页的过程。 (4)掌握表格的使用方法。 (5)掌握层的基本操作方法。 (6)掌握使用框架布局页面的方法。 2. 试验内容和步骤 1)网页编辑器基本操作 (1)了解Dreamweaver 8.0操作界面上各个部分的主要功能。 了解主菜单、插入面板

2、，属性面板、文档工具条，页面编辑窗口、面板集合的各项功能和操作方法。 (2)了解各种常用快捷键的用法。CtrlS、CtrlQ、CtrlZ、CtrlY、Ctrl C、CtrlX、CtrlV、CtrlA、F12 2)建立网站的基本操作 (1)打开站点管理器，在本地计算机的当前盘根文件夹中，建立名为mysite的本地站点的根文件夹。 操作步骤如下： 启动Dreamweaver 8.0，选择/命令。 在站点定义对话框中，选择选项卡，在站点名称文本框中输入“mysite”。也可在选项卡中进行设置。 单击下一步，本次试验学习的是静态站点的定义，选择第一项“否，我不想使用服务器技术”并确认。单击下一步，本次

3、试验中的站点文件是复制在本地计算机上的，选择第一项“编辑我的计算机上的本地副本，完成后再上传到服务器”，单击下一步，在选择远程服务器的连接方式，选择“无”，即不使用远程服务器连接。单击下一步，直至完成。 (2) 在文件夹mysite中新建名为source的子文件夹。把准备好的网页素材文件复制到source文件夹中去。 3)制作简单网页 在Dreamweaver 8.0网页编辑器中新建一个页面。选择，给这个页面取一个名字“index.htm”,保存在站点mysite下。同理创建一个空页面Enter 2.htm。 在index.htm页面编辑窗口，输入文字“欢迎光临我的网上书店”等等， 选取文字，

4、在属性面板上对文字的大小、字体、颜色等进行设置。保存页面。 将光标位于文字下方，在插入面板中找到按钮即可插入图片，也可以直接点击主菜单上的/实现插入图片的操作。在文件选择窗口，选择你准备好的source文件夹下的图片。点击图片，在属性面板中显示了图片的各种信息，可以根据需要，对图片的大小进行修改，也可以直接用鼠标通过拉伸改变图像的大小。 插入图片以后，还可以为页面设置背景颜色或图片，点击属性面板上的，在对话框中可对背景颜色或背景图片进行设置。 在页面的右下方输入文字“Enter”，选取文字，为它添加超级链接。在属性面板的“链接”一栏中填写链接的地址，可以是其他某个网站的地址，或者是你网站内的某

5、个文件上（可选取Enter2.htm），如果希望该页面是在一个新窗口中打开，可以在“目标”中选择“blank”,新页面在当前浏览器打开选择“self”。 这时，一个简单的页面完成了，保存后按F12进行预览。 4)制作表格 (1) 表格的创建、插入、删除、复制和移动等操作 操作步骤如下： 创建一个名为exe1.htm 的网页文件，单击面板的按钮，在对话框中页面上输入4行5列的表格，在表格中输入如图11所示的内容。并在表格上方增加标题“信管专业各班平均成绩表”，标题格式设置为方正舒体、5号、粗体、003366。 图11 各班平均成绩表 在表格“01级3班”前插入一行，内容为“0l级2斑、85、82

6、、88、82”。在表格中“计算机组成实验”列前插人一列，内容为“计算机组成、69、73、75、80”。 将00级1班这一行移到表格的最后一行；删除“英语精读”这一行。 (2)单元格的拆分、合并和格式化操作 使表格中的数据全部居中，使整个表格在页面上居中。 将表格的“计算机组成”和“计算机组成实验”两个单元格合并成一个单 元格，内容改为“计算机组成和实验”，设置为居中、黑体、5号。 选择命令，将表格套用系统预没的格式simple3。 (3)导入外部数据和表格排序 在Excel中新建图11的表格,保存为value.xls文件。 创建名为value.htm的网页文件。选择命令，就可导入指定的数据文件

7、。 选中表格的“电子商务”列，选择，在对话框中设置参数。在下拉列表框中选择按(即第5列)排序，选择和。观察排序后的结果。 表格套用格式是系统预设格式“AltRows:green&yellow”。 表格设置：为3，为FF0000。 5)层的基本操作方法 创建一个名为exe2.htm的网页文件。可设置相关的背景图片。 在网页合适的位置上，选择中，分别创建两个名为source 和shadow的层，Z-index的尺寸分别为2和1。 在层中输入文字“书人生的伴侣，知识的源泉”，两个层中的文字的颜色分别为红色和黑色。移动层，使两个层略微错开重叠，使文字带有阴影效果。如图12所示。 打开层的浮动面板，选中

8、复选项，然后移动名为source的层，试比较该复选项选与不选的区别。 6)使用框架布局页面的方法 创建一个名为exe3.htm的网页文件。选择命令。同理创建一个名为exe4.htm的网页文件，选择，比较两种框架的不同之处。 删除exe4.htm的网页文件中创建的框架，然后创建框架，并把框架改为框架，调整框架的大小。 分别用鼠标在面板中选中主框架(mainFrame)、左框架(1eftFrame)、顶框架(topFrame)和整个框架集(也称框架组)，观察结果。 在主框架(mainFrame)中插入底部框架(bottomFrame)，选中左框架(1eftFrame)插入顶部框架，将左框架分割成上

9、（topFrame）下(1eftFrame)两部分。 分别在框架面板中选中topFrame、topFramel、mainFrame、1eftFrame、bottomFrame 5个框架，并给这5个框架设置背景颜色共#AAFFFF、#CCFFFF、#CCFFCC、#CCFFCC、#CCFFFF。 保存框架文件。 设置exe4.htm框架文件的框架集的属性。各项参数分别是：为“是”，为00CCFF，为2像素，左边为100像素。分别设置的单位，在下拉菜单中分别选择、命令，观察不同的结果。 在topFrame、topFramel、mainFrame、1eftFrame、bottomFrame框架中，可

10、插入层、表格、图片、动画、文字等。 保存网页文件，进行预览。 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-c

11、olor:#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*/

12、 .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; backgr

13、ound-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/35p

14、x 微软雅黑,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

15、: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”。在指定位置输入以下代码可以实现一个动态的时钟。