网页设计实验报告Word文件下载.docx
《网页设计实验报告Word文件下载.docx》由会员分享，可在线阅读，更多相关《网页设计实验报告Word文件下载.docx（17页珍藏版）》请在冰豆网上搜索。
1）网页编辑器基本操作
（1）了解Dreamweaver8.0操作界面上各个部分的主要功能。
了解主菜单、插入面板，属性面板、文档工具条，页面编辑窗口、面板集合的各项功能和操作方法。
（2）了解各种常用快捷键的用法。
Ctrl＋S、Ctrl＋Q、Ctrl＋Z、Ctrl＋Y、Ctrl＋C、Ctrl＋X、Ctrl＋V、Ctrl＋A、F12
2）建立网站的基本操作
（1）打开站点管理器，在本地计算机的当前盘根文件夹中，建立名为mysite的本地站点的根文件夹。
操作步骤如下：
①启动Dreamweaver8.0，选择【站点】/【管理站点】/【新建站点】命令。
②在站点定义对话框中，选择【基本】选项卡，在[站点名称]文本框中输入“mysite”。
也可在【高级】选项卡中进行设置。
③单击[下一步]，本次试验学习的是静态站点的定义，选择第一项“否，我不想使用服务器技术”并确认。
单击[下一步]，本次试验中的站点文件是复制在本地计算机上的，选择第一项“编辑我的计算机上的本地副本，完成后再上传到服务器”，单击[下一步]，在选择远程服务器的连接方式，选择“无”，即不使用远程服务器连接。
单击[下一步]，直至完成。
（2）在文件夹mysite中新建名为source的子文件夹。
把准备好的网页素材文件复制到source文件夹中去。
3）制作简单网页
①在Dreamweaver8.0网页编辑器中新建一个页面。
选择【保存】，给这个页面取一个名字“index.htm”,保存在站点mysite下。
同理创建一个空页面Enter－2.htm。
②在index.htm页面编辑窗口，输入文字“欢迎光临我的网上书店”等等，选取文字，在属性面板上对文字的大小、字体、颜色等进行设置。
保存页面。
③将光标位于文字下方，在插入面板中找到按钮即可插入图片，也可以直接点击主菜单上的【插入】/【图像】实现插入图片的操作。
在文件选择窗口，选择你准备好的source文件夹下的图片。
点击图片，在属性面板中显示了图片的各种信息，可以根据需要，对图片的大小进行修改，也可以直接用鼠标通过拉伸改变图像的大小。
④插入图片以后，还可以为页面设置背景颜色或图片，点击属性面板上的【页面属性】，在对话框中可对背景颜色或背景图片进行设置。
⑤在页面的右下方输入文字“Enter”，选取文字，为它添加超级链接。
在属性面板的“链接”一栏中填写链接的地址，可以是其他某个网站的地址，或者是你网站内的某个文件上（可选取Enter－2.htm），如果希望该页面是在一个新窗口中打开，可以在“目标”中选择“－blank”,新页面在当前浏览器打开选择“－self”。
⑥这时，一个简单的页面完成了，保存后按F12进行预览。
4）制作表格
（1）表格的创建、插入、删除、复制和移动等操作
①创建一个名为exe1.htm的网页文件，单击【插入】面板的按钮，在【插入表格】对话框中页面上输入4行5列的表格，在表格中输入如图1—1所示的内容。
并在表格上方增加标题“信管专业各班平均成绩表”，标题格式设置为方正舒体、5号、粗体、＃003366。
科目
数据库原理
计算机组成实验
英语精读
电子商务
00级1班
73
85
77
79
01级1班
83
82
91
01级3班
90
80
92
图1—1各班平均成绩表
②在表格“01级3班”前插入一行，内容为“0l级2斑、85、82、88、82”。
在表格中“计算机组成实验”列前插人一列，内容为“计算机组成、69、73、75、80”。
③将00级1班这一行移到表格的最后一行；
删除“英语精读”这一行。
（2）单元格的拆分、合并和格式化操作
①使表格中的数据全部居中，使整个表格在页面上居中。
②将表格的“计算机组成”和“计算机组成实验”两个单元格合并成一个单元格，内容改为“计算机组成和实验”，设置为居中、黑体、5号。
③选择【命令】【格式化表格】命令，将表格套用系统预没的格式simple3。
（3）导入外部数据和表格排序
①在Excel中新建图1－1的表格,保存为value.xls文件。
②创建名为value.htm的网页文件。
选择【文件】【导人】【Excel文档】命令，就可导入指定的数据文件。
③选中表格的“电子商务”列，选择【命令】【排序表格】，在对话框中设置参数。
在【排序按】下拉列表框中选择按【列5】
（即第5列）排序，选择【按数字排序】和【降序】。
观察排序后的结果。
④表格套用格式是系统预设格式“AltRows:
green&
yellow”。
⑤表格设置：
【边框】为3，【边框颜色】为＃FF0000。
5）层的基本操作方法
①创建一个名为exe2.htm的网页文件。
可设置相关的背景图片。
②在网页合适的位置上，选择【插入】【布局对象】中，分别创建两个名为source和shadow的层，Z-index的尺寸分别为2和1。
③在层中输入文字“书－人生的伴侣，知识的源泉”，两个层中的文字的颜色分别为红色和黑色。
移动层，使两个层略微错开重叠，使文字带有阴影效果。
如图1－2所示。
④打开层的浮动面板，选中【防止重叠】复选项，然后移动名为source的层，试比较该复选项选与不选的区别。
6）使用框架布局页面的方法
①创建一个名为exe3.htm的网页文件。
选择【插入】【HTML】【框架】【左侧及上方嵌套】命令。
同理创建一个名为exe4.htm的网页文件，选择【上方及左侧嵌套】，比较两种框架的不同之处。
②删除exe4.htm的网页文件中创建的框架，然后创建【上方】框架，并把【上方】框架改为【上方及左侧嵌套】框架，调整框架的大小。
③分别用鼠标在【框架】面板中选中主框架（mainFrame）、左框架（1eftFrame）、顶框架（topFrame）和整个框架集（也称框架组），观察结果。
④在主框架（mainFrame）中插入底部框架（bottomFrame），选中左框架（1eftFrame）插入顶部框架，将左框架分割成上（topFrame）下（1eftFrame）两部分。
⑤分别在框架面板中选中topFrame、topFramel、mainFrame、1eftFrame、bottomFrame5个框架，并给这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主要代码截图
<
style>
*{margin:
0;
padding:
font-size:
14px;
}
ul{list-style:
none;
height:
50px;
border-bottom:
#F605pxsolid}
.navli{height:
30px;
line-height:
width:
100px;
background-color:
#ccc;
margin-bottom:
1px;
text-align:
center;
float:
left;
margin-top:
20px;
.navlia{text-decoration:
li:
hover{background-color:
#F60;
color:
#fff;
<
/style>
/head>
body>
ulclass="
nav"
>
li>
aclass="
on"
href="
#"
/>
首&
nbsp;
&
页<
/li>
ahref="
新闻快讯<
产品展示<
售后服务<
联系我们<
/ul>
/body>
/html>
2.1.2页面运行截图
2.2外部样式表
2.2.1主要代码截图
linkrel="
stylesheet"
type="
text/css"
style/reset.css"
style/indexb.css"
title>
无标题文档<
/title>
divclass="
headerBar"
topBar"
comWidth"
leftArea"
class="
collection"
收藏本站<
/a>
/div>
rightArea"
欢迎<
[登录]<
[注册]<
logoBar"
logofl"
imgsrc="
image/.jpg"
alt="
"
search-boxfl"
inputtype="
text"
search-text"
button"
search-btnfr"
value="
搜索"
shopCarfr"
spanclass="
shopTextfl"
购物车<
/span>
shopcfr"
0<
navBox"
shopClassfl"
span>
全部商品分类<
i>
/i>
/spans>
shopClass_box"
dlclass="
shopClass_item
升级会员 