还剩8页未读,继续阅读
本资源只提供10页预览,全部文档请下载后查看!喜欢就下载吧,查找使用更方便
文本内容:
JIANGXI AGRICULTURALUNIVERSITY本科课程报告题目网页制作实验报告____________学院软件学院_____________姓名徐潇_______________学号20231506_____________专业软件工程_____________班级软件1002班____________指导教师唐建军、胡昶二0一一年十二月实验
一、认识HTML
一、实验目的了解HHTML中涉及的技术HTML语言的组成及特点,学会利用HTML语言编辑网页了解CSS了解网站开发的流程
二、实验内容
1.参考书节,利用记事本实现唐诗实例1:在“记事本”中输入虞美人的文本⑵选择“文件”一>“保存”命令,将该文件保存为“虞美人.html,此时该文档将显示IE图标3:打开图标如图所示:Insert Sound
2.
2.0Forever设置无限循环播放Never不循环播放,即只播放一次NO oftimes设置播放的次数点击“Browser”按钮选择好声音文件之后,按确定完成制作三.实验结论优缺点<bgsound>是用来插入背景音乐,但只适用于ie,其参数设定不多<embed>是用来插入各种多媒体,格式可以是midi、wav、aiff、au等等,netscape及新版的ie都支持其参数设定较多设定歌曲开始播放的时间设定音量的大小,数值是0至U100之间内定则为使用系统本身的设定设定控制面板和旁边文字的对齐方式,其值可以是top、bottom、center、baseline、left、right、texttop>middle、absmiddle、absbottoni设定控制面板的外观预设值是consoleo实验
七、页面布局
一、实验目的掌握网页制作中页面的而已技术表格布局,CSS布局,框架布局
二、实验内容
1.参考P152内容,分别利用表格及CSS技术完成书上的的布局方式通过管理或新建样式使用面板组执行窗口—CSS样式使用窗口一一标签检查器一一CSS属性面板CSS属性面板可以设置样式面板中的8类属性字体font-family大小font-size、.粗细font-weight、样式font-style、.变量、行高line-height>大小写text-transform颜色color、修饰text-decoration在“插入”工具栏单击“布局”按钮,进入布局模式文件OF编辑3查看V插入卬修改加文本W命令⑹站点6窗口邻帮助00布局▼「I标准[扩展布局Q§|「回▼圈
2.在百度中搜索网页模板,查看已经做好了的经典模板,并进行评价这是我百度到的网页模板很漂亮!!!思考题网页制作中常用的布局方式有哪些,请比较它们的异同实验
八、表单的应用
一、实验目的掌握网页制作中页最常用的交互工具表单元素的使用
二、实验内容
1.输入文本水平线表单
2.插入表格
3.插入文本框复选框提交框,按钮最后的表单就是下面图:
2.在Dreamweaver中输入如下代码:实验
二、Dreamweavor应用
一、实验目的掌握如何在Dreamweaver中进行网页编辑;掌握Dreamweaver中站点的设置;掌握网站空间的申请及网页的上传
二、实验内容
1.将实验1中的内容,利用DreamWeavor完成,并注意在拆分视图下,观察它是如何将格式操作变成HTML代码的
2.按书中要求,制作唐诗宋词网站的首页
3.在Dreamweaver中设置站点,并为唐诗宋词网站规划网站文件夹结构
4.上网搜索免费个人网站空间,并将所制作的网页上传,并测试网是否能够正常访问找好免费个人空间后就可以利用DreamWeaver进行网站上传,也可以用即软件上传实验
三、文本修饰与超链接
一、实验目的掌握常用的文本与段落修饰标记;掌握超级链接标记及其设置;
二、实验内容(参见P68)
1.制作完成唐诗宋词精选网站,至少完成3个页面第一个页面第二个页面第三个超链接Dreamwever中提供了“链接检查落”工具用于超链接的检查在文件面板的任意文件上右击,在弹出的快捷菜单中选择“检查链接”“选择文件/文件夹”命令可检查当前选中的文件或文件夹中的超链接的工作情况结果会显示在“结果”面板“链接检查器”的选项卡中,可以检查显示出断链接的情况,在状态栏中会有该网页的链接情况的统计数据如果我们选择“检查链接”一“整个本地站点”命令,则可以对整个网站中的链接进行检查实验
四、css应用
一、实验目的掌握css四种选择器;掌握内部样式表与外部样式表的应用;掌握利用外联式样式表统一网站风格;掌握利用Dreamweaver建立与编辑CSS样式
二、实验内容
1.4种样式选择器如何分别应用到网页中CSS样式表中属性选择器四种格式属性选择器Attributeselectors,或许你不应该对属性选择器感到生疏,从本质上说,id跟类选择器其实就是属性选择器,只不过是选择了id或者类的值value而已CSS样式表中属性选择器的格式是元素后跟中括号,中括号内带属性,或者属性表达式不知道描述是否正确,自创的词,比如hl[title],hl[title—Logo”]等,你可以从我下面的论述中看到4种具体形式
1、简易属性选择器只顾其名不顾其值,这是CSS样式表中简易属性选择器的特点hl[class]{color:silver;}将会作用于任何带class的hl元素,不管class的值是什么所以〈hlclass二〃hoopla〃Hello〈/hl、hlclass=,/severe,/Serenity/hl〈hlclass二〃fancy〃Fooling/hl的hl都会受到这条规则的影响当然,这个“属性”不仅仅是class或者id,可以是该元素所有合法属性,比如img的alt,这样img[alt]{cssdeclarationshere;}将会作用于任何带有alt属性的img元素a[href][title]{font-weight:bold;}0E4聪明的你一定已经知道,这会作用于同时带href和title属性的@元素,比如〈ahrcf=://mb5u/〃t i11e=/,mb5ullome,,X/a
2、精确属性值选择器id和类本质上就是CSS样式表中的精确属性值选择器,没错,hl#logo等于hl[id=logo”]如前所述,我们不要局限于id或者class,我们可以使用任何属性!例如a[hrcf=://mb5u/][title=W3CHome〃]{font-size:200%;}将会作用于〈ahref=://mb5u/t i11e=mb5uHome/a
3、部分属性值选择器CSS样式表中部分属性值选择器如其名,只要属性值部分匹配这里的部分,实际上要匹配整个单词就会作用于该元素让我们来看个例子
1.pclasspclass=,,urgentwarning,Whenhandlingplutonium
92.caremustbetakentoavoidtheformationofacriticalmass./P
3..p[class-=n warning]{font-weight:bold;}和
1.p[class-=,,urgent n]{font-weight:bold;}中任何一条都可以让这个p的字体变粗该选择器十分有用,比如你要样式化插图,其title中都含字符串Figure”,如title=Figure5xxx说明”,则你可以使用img[title~=Figure”]需要注重的是,如我第一句就强调的,你需要匹配的是整个单词,img[title~=〃Figure〃]不会匹配title=z,Figure5xxx说明〃另外,我做了个小小的测试,你把例子中的“Figure”改成“插图”,把img[title~=〃Figure”]改成img[title~=插图〃],在Firefox中依然可以匹配,不管编码encoding是GB2312还是UTF-8看来CSS对中文的支持还不赖
4、非凡属性选择器CSS样式表中这个选择器有点怪,它是这样工作的,举个例子比描述更轻易*[lang|=/,en z,]{color:white;},这条规则rule将会选择属性lang的值en或者en-打头的元素就是说,它可以匹配hllang=enH以lo!/hl、plang=,/en-us,z Greetings!/p和〈divlang=en-au〃G day!/div而不匹配plang=〃fr〃〉Bonjour!/pMlKh31ang=〃cy-en〃Jrooana!/h3实验
五、在网页中使用图像
一、实验目的掌握网页制作中常的三种图像格式;掌握图像的格式设置;掌握利用图像处理软件FireWorks进行图像的基本处理
二、实验内容
1.上一些常网站,了解网站上使用了哪些格式的图像文件,并比较它们的特点
2.完善“唐诗宋词网精选”网站,要求必须使用鼠标经过图像,网站相册,图像映射等效果
3.使用FireWorks对图像进行一些常用的操作,这些操作必须包括改变图像的大小像图裁剪,以不同格式将图像优化并导出,羽化,按路径排列文本,GIF动画
三、实验步骤
1.我经常上vancel,他们的图片有jpg,png等等1GIF GraphicsInterchange FormatGIF是Web上最常用的图像格式,它可以用来存储各种图像文件特别适用于存储线条、图标和电脑生成的图像、卡通和其它有大色块的图像GIF文件非常小,它形成的是一种压缩的8位图像文件,所以最多只支持256种不同的颜色Gif支持动态图、透明图和交织图2JPEG JointPhotographic ExpertsGroup JPEG是Web上仅次于GIF的常用图像格式JPEG是一种压缩得非常紧凑的格式,专门用于不含大色块的图像JPEG的图像有一定的失真度,但是在正常的损失下肉眼分辨不出JPEG和GIF图像的差别,而JPEG文件只有GIF文件的1/4大小JPEG对图标之类的含大色块的图像不很有效,不支持透明图和动态图3PNG PortableNetwork GraphicPNG格式是WEB图像中最通用的格式它是一种无损压缩格式,但是如果没有插件支持,有的浏览器可能不支持这种格式PNG格式最多可以支持32位颜色,但是不支持动画图
2.
1.立鼠标经过图片创建网站相册
1.实用Fierwork优化图片实验
六、在网页中使用多媒体
一、实验目的掌握网页制作中常见的多媒体类型及特点;掌握插入媒体的标签及相应属性设置;掌握能够利用网上的软件进行媒体格式的转换
二、实验内容
1.上一些常网站,了解网站上使用了哪些格式的多媒文件,并比较它们的特点使用了MP3avi,mp4,Flash等格式
2.完善“唐诗宋词网精选”网站,要求有声音、视频三.实验步骤
1.插入音乐,用bgsound函数选中音乐,在确定如果是插入背景音乐二使用<embed>标签一打开页面就会自动播放音乐d标签选择器标记语言标签blockquote bodybr◎:HTML标签button卧回.贡赤内战caption citecode回■:页元素col回■;格式设置和布局colgroup回回■;列表时表单■:表格■:脚本编制S CFML标签E ASP.NET标签S JSP标签S embedJKun自定义库S标签s s峪标签口标签ID标筌信息]卷》帮助插入Flash动画:将插入工具栏切换到“常用”模式,单击“媒体Flash”按钮,插入Flash按钮将插入工具栏切换到“常用”模式,单击“媒体Flash”按钮旁边的三角形,在菜单中选择“媒体Flash按钮”按钮.插入Flash文本:将插入工具栏切换到“常用”模式,单击“媒体Flash”按钮旁边的三角形,在菜单中选择“媒体Flash文本”按钮■■■在设置属性;插入插件:将插入工具栏切换到“常用”模式,单击“媒体Flash”按钮旁边的三角形,在菜单中选择“媒体Flash文本”按钮,选择一个要插入网页的电影格式的文件,在编辑窗口中看到插入了一个灰色矩形插件标志,调整其大小可调整网页中的播放窗口的大小单击属性面板上的“参数”按钮,可设置各种播放参数▼属性宽32源文件唐诗宋词网/lock对齐式U值v类C无高32|播件URL hUJ.心A播放垂直边距边框水平边距[参数...]
3、插件法有些人始终没有舍弃FrontPagc也许就因为在一些元素的插入中,Dreamweaver没有提供功能,或者不方便但我们知道,Dreamweaver支持插件,声音插入插件为我们提供了方便插件名称sound.mxp下载后双击文件,就可以直接安装了,安装完成你可以在“对象”面板的Common”栏看到一个喇叭图标直接点击此按钮,就弹出如下图所示的插入窗口:£lf ofof r£rh lh2P PLPH Ftf M0000000。