1、1)网页编辑器基本操作(1)了解Dreamweaver 8.0操作界面上各个部分的主要功能。了解主菜单、插入面板,属性面板、文档工具条,页面编辑窗口、面板集合的各项功能和操作方法。(2)了解各种常用快捷键的用法。CtrlS、 CtrlQ、 CtrlZ、 CtrlY、 CtrlC、CtrlX、CtrlV、CtrlA、F122)建立网站的基本操作(1)打开站点管理器,在本地计算机的当前盘根文件夹中,建立名为mysite的本地站点的根文件夹。操作步骤如下:启动Dreamweaver 8.0,选择【站点】/【管理站点】/【新建站点】命令。 在站点定义对话框中,选择【基本】选项卡,在站点名称文本框中输入
2、“mysite”。也可在【高级】选项卡中进行设置。 单击下一步,本次试验学习的是静态站点的定义,选择第一项“否,我不想使用服务器技术”并确认。单击下一步,本次试验中的站点文件是复制在本地计算机上的,选择第一项“编辑我的计算机上的本地副本,完成后再上传到服务器”,单击下一步,在选择远程服务器的连接方式,选择“无”,即不使用远程服务器连接。单击下一步,直至完成。(2) 在文件夹mysite中新建名为source的子文件夹。把准备好的网页素材文件复制到source文件夹中去。3)制作简单网页在Dreamweaver 8.0网页编辑器中新建一个页面。选择【保存】,给这个页面取一个名字“index.ht
3、m”,保存在站点mysite下。同理创建一个空页面Enter2.htm。在index.htm页面编辑窗口,输入文字“欢迎光临我的网上书店”等等,选取文字,在属性面板上对文字的大小、字体、颜色等进行设置。保存页面。将光标位于文字下方,在插入面板中找到按钮即可插入图片,也可以直接点击主菜单上的【插入】/【图像】实现插入图片的操作。在文件选择窗口,选择你准备好的source文件夹下的图片。点击图片,在属性面板中显示了图片的各种信息,可以根据需要,对图片的大小进行修改,也可以直接用鼠标通过拉伸改变图像的大小。插入图片以后,还可以为页面设置背景颜色或图片,点击属性面板上的【页面属性】,在对话框中可对背景
4、颜色或背景图片进行设置。在页面的右下方输入文字“Enter”,选取文字,为它添加超级链接。在属性面板的“链接”一栏中填写链接的地址,可以是其他某个网站的地址,或者是你网站内的某个文件上(可选取Enter2.htm),如果希望该页面是在一个新窗口中打开,可以在“目标”中选择“blank”,新页面在当前浏览器打开选择“self”。这时,一个简单的页面完成了,保存后按F12进行预览。4)制作表格(1) 表格的创建、插入、删除、复制和移动等操作创建一个名为exe1.htm的网页文件,单击【插入】面板的按钮,在【插入表格】对话框中页面上输入4行5列的表格,在表格中输入如图11所示的内容。并在表格上方增加
5、标题“信管专业各班平均成绩表”,标题格式设置为方正舒体、5号、粗体、003366。科目 数据库原理计算机组成实验英语精读电子商务00级1班7385777901级1班83829101级3班908092 图11 各班平均成绩表在表格“01级3班”前插入一行,内容为“0l级2斑、85、82、88、82”。在表格中“计算机组成实验”列前插人一列,内容为“计算机组成、69、73、75、80”。将00级1班这一行移到表格的最后一行;删除“英语精读”这一行。(2)单元格的拆分、合并和格式化操作使表格中的数据全部居中,使整个表格在页面上居中。将表格的“计算机组成”和“计算机组成实验”两个单元格合并成一个单元格
6、,内容改为“计算机组成和实验”,设置为居中、黑体、5号。选择【命令】【格式化表格】命令,将表格套用系统预没的格式simple3。(3)导入外部数据和表格排序在Excel中新建图11的表格,保存为value.xls文件。创建名为value.htm的网页文件。选择【文件】【导人】【Excel文档】命令,就可导入指定的数据文件。选中表格的“电子商务”列,选择【命令】【排序表格】,在对话框中设置参数。在【排序按】下拉列表框中选择按【列5】(即第5列)排序,选择【按数字排序】和【降序】。观察排序后的结果。表格套用格式是系统预设格式“AltRows:green&yellow”。表格设置:【边框】为3,【边
7、框颜色】为FF0000。5)层的基本操作方法创建一个名为exe2.htm的网页文件。可设置相关的背景图片。在网页合适的位置上,选择【插入】【布局对象】中,分别创建两个名为source 和shadow的层,Z-index的尺寸分别为2和1。在层中输入文字“书人生的伴侣,知识的源泉”,两个层中的文字的颜色分别为红色和黑色。移动层,使两个层略微错开重叠,使文字带有阴影效果。如图12所示。打开层的浮动面板,选中【防止重叠】复选项,然后移动名为source的层,试比较该复选项选与不选的区别。6)使用框架布局页面的方法创建一个名为exe3.htm的网页文件。选择【插入】【HTML】【框架】【左侧及上方嵌套
8、】命令。同理创建一个名为exe4.htm的网页文件,选择【上方及左侧嵌套】,比较两种框架的不同之处。删除exe4.htm的网页文件中创建的框架,然后创建【上方】框架,并把【上方】框架改为【上方及左侧嵌套】框架,调整框架的大小。分别用鼠标在【框架】面板中选中主框架(mainFrame)、左框架(1eftFrame)、顶框架(topFrame)和整个框架集(也称框架组),观察结果。在主框架(mainFrame)中插入底部框架(bottomFrame),选中左框架(1eftFrame)插入顶部框架,将左框架分割成上(topFrame)下(1eftFrame)两部分。分别在框架面板中选中topFram
9、e、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:font-size:14px;ullist-style:none;height:50px;border-bottom:#F60 5px solid.nav liheight:30px;line-height:width:100px;background-color:#ccc;margin-bottom:1
11、px;text-align:center;float:left;margin-top:20px;.nav li atext-decoration:li:hoverbackground-color:#F60;color:#fff;/headbodyul class=navlia class=on href=#/首 &页a href=新闻快讯产品展示售后服务联系我们/body/html2.1.2页面运行截图2.2外部样式表 2.2.1主要代码截图link rel=stylesheet type=text/cssstyle/reset.cssstyle/indexb.csstitle无标题文档div class=headerBartopBarcomWidthleftArea class=collection收藏本站/divrightArea 欢迎登录注册logoBarlogo flimg src=image/.jpg alt=search-box flinput type=textsearch-textbuttonsearch-btn fr value=搜索shopCar frspan class=shopText fl购物车shopc fr0全部商品分类/i/spansshopClass_boxdl class=shopClass_item
copyright@ 2008-2022 冰豆网网站版权所有
经营许可证编号:鄂ICP备2022015515号-1