搜索
JIANGXIAGRICULTURALUNIVERSITY本科课程报告题目：网页制作实验报告学院：软件学院姓名：徐潇学号：20101506专业：软件工程班级：软件1002班指导教师：唐建军、胡昶二0一一年十二月实验一、认识HTML一、实验目的：了解HHTML中涉及的技术。HTML语言的组成及特点，学会利用HTML语言编辑网页。了解CSS。了解网站开发的流程。二、实验内容1.参考书1.2.1节，利用记事本实现唐诗实例。(1):在“记事本”中输入虞美人的文本。(2):选择“文件”—“保存”命令，将该文件保存为“虞美人.html”，此时该文档将显示IE图标。(3):打开图标。如图所示：2.在Dreamweaver中输入如下代码：3.请写出以下效果的HTML代码（包括分行及分段效果）角标的实现：在拆分视图下的文本编辑区域输入X1，然后看其在代码编辑区的变化。想要实现上下角标要用到sup/sup角标在字母的上方;sub/sub角标在字母的下方。红色字体的实现：在文本编辑区域回车编写“这是红色的字”然后选中这行字在属性面板中选择颜色为红色。粗体字的实现：在文本编辑区域回车编写“这是粗体字”然后选中这行字在属性面板中点击粗体。斜体字的实现：在文本编辑区域回车编写“这是斜体字”然后选中这行字在属性面板中点击斜体4.我上网浏览了谷歌他的URL：http：//目标：谷歌的目标是“万能搜索”此网站的导航利用超连接及表单等实现导航的实验二、Dreamweavor应用一、实验目的：掌握如何在Dreamweaver中进行网页编辑；掌握Dreamweaver中站点的设置；掌握网站空间的申请及网页的上传。二、实验内容1.将实验1中的内容，利用DreamWeavor完成，并注意在拆分视图下，观察它是如何将格式操作变成HTML代码的。2.按书中要求，制作唐诗宋词网站的首页。3.在Dreamweaver中设置站点，并为唐诗宋词网站规划网站文件夹结构。4.上网搜索免费个人网站空间，并将所制作的网页上传，并测试网是否能够正常访问。找好免费个人空间后就可以利用DreamWeaver进行网站上传,也可以用ftp软件上传。实验三、文本修饰与超链接一、实验目的：掌握常用的文本与段落修饰标记;掌握超级链接标记及其设置；二、实验内容（参见P68）1.制作完成唐诗宋词精选网站，至少完成3个页面。第一个页面：第二个页面：第三个：超链接：Dreamwever中提供了“链接检查器”工具用于超链接的检查。在文件面板的任意文件上右击，在弹出的快捷菜单中选择“检查链接”“选择文件/文件夹”命令。可检查当前选中的文件或文件夹中的超链接的工作情况。结果会显示在“结果”面板“链接检查器”的选项卡中，可以检查显示出断链接的情况，在状态栏中会有该网页的链接情况的统计数据。如果我们选择“检查链接”“整个本地站点”命令，则可以对整个网站中的链接进行检查。实验四、CSS应用一、实验目的：掌握CSS四种选择器；掌握内部样式表与外部样式表的应用；掌握利用外联式样式表统一网站风格；掌握利用Dreamweaver建立与编辑CSS样式。二、实验内容1.4种样式选择器如何分别应用到网页中。CSS样式表中属性选择器四种格式属性选择器（AttributeSelectors），或许你不应该对属性选择器感到生疏，从本质上说，id跟类选择器其实就是属性选择器，只不过是选择了id或者类的值（value）而已。CSS样式表中属性选择器的格式是元素后跟中括号，中括号内带属性，或者属性表达式（不知道描述是否正确，自创的词），比如h1[title],h1[title=Logo]等，你可以从我下面的论述中看到4种具体形式。1、简易属性选择器只顾其名不顾其值，这是CSS样式表中简易属性选择器的特点。h1[class]{color:silver;}将会作用于任何带class的h1元素，不管class的值是什么。所以h1class=hooplaHello/h1、h1class=severeSerenity/h1、h1class=fancyFooling/h1的h1都会受到这条规则的影响。当然，这个“属性”不仅仅是class或者id，可以是该元素所有合法属性，比如img的alt，这样img[alt]{cssdeclarationshere;}将会作用于任何带有alt属性的img元素。那么a[href][title]{font-weight:bold;}呢？聪明的你一定已经知道，这会作用于同时带href和title属性的a元素，比如ahref==mb5uHome/a。2、精确属性值选择器id和类本质上就是CSS样式表中的精确属性值选择器，没错，h1#logo等于h1[id=logo]。如前所述，我们不要局限于id或者class，我们可以使用任何属性！例如a[href=][title=W3CHome]{font-size:200%;}将会作用于ahref==mb5uHome/a。3、部分属性值选择器CSS样式表中部分属性值选择器如其名，只要属性值部分匹配（这里的部分，实际上要匹配整个单词）就会作用于该元素。让我们来看个例子：1.pclasspclass=urgentwarningWhenhandlingplutonium,2.caremustbetakentoavoidtheformationofacriticalmass./p3.p[class~=warning]{font-weight:bold;}4.和1.p[class~=urgent]{font-weight:bold;}2.中任何一条都可以让这个p的字体变粗。该选择器十分有用，比如你要样式化插图，其title中都含字符串”Figure”，如title=Figure5：xxx说明，则你可以使用img[title~=Figure]。需要注重的是，如我第一句就强调的，你需要匹配的是整个单词，img[title~=Figure]不会匹配title=Figure5：xxx说明。另外，我做了个小小的测试，你把例子中的“Figure”改成“插图”，把img[title~=Figure]改成img[title~=插图]，在Firefox中依然可以匹配，不管编码（encoding）是GB2312还是UTF-8。看来CSS对中文的支持还不赖。4、非凡属性选择器CSS样式表中这个选择器有点怪，它是这样工作的，举个例子比描述更轻易。*[lang|=en]{color:white;}，这条规则（rule）将会选择属性lang的值en或者en-打头的元素。就是说，它可以匹配h1lang=enHello!/h1、plang=en-usGreetings!/p和divlang=en-auG'day!/div而不匹配plang=frBonjour!/p和h3lang=cy-enJrooana!/h3。实验五、在网页中使用图像一、实验目的：掌握网页制作中常的三种图像格式；掌握图像的格式设置；掌握利用图像处理软件（FireWorks）进行图像的基本处理。二、实验内容1.上一些常网站，了解网站上使用了哪些格式的图像文件，并比较它们的特点。2.完善“唐诗宋词网精选”网站，要求必须使用鼠标经过图像，网站相册，图像映射等效果。3.使用FireWorks对图像进行一些常用的操作，这些操作必须包括：改变图像的大小，像图裁剪，以不同格式将图像优化并导出，羽化，按路径排列文本，GIF动画。三、实验步骤1.我经常上vancel，他们的图片有jpg，png等等（1）GIF（GraphicsInterchangeFormat）GIF是Web上最常用的图像格式，它可以用来存储各种图像文件。特别适用于存储线条、图标和电脑生成的图像、卡通和其它有大色块的图像。GIF文件非常小，它形成的是一种压缩的8位图像文件，所以最多只支持256种不同的颜色。Gif支持动态图、透明图和交织图。（2）JPEG（JointPhotographicExpertsGroup）JPEG是Web上仅次于GIF的常用图像格式。JPEG是一种压缩得非常紧凑的格式，专门用于不含大色块的图像。JPEG的图像有一定的失真度，但是在正常的损失下肉眼分辨不出JPEG和GIF图像的差别。，而JPEG文件只有GIF文件的1/4大小。JPEG对图标之类的含大色块的图像不很有效，不支持透明图和动态图。（3）PNG（PortableNetworkGraphic）PNG格式是WEB图像中最通用的格式。它是一种无损压缩格式，但是如果没有插件支持，有的浏览器可能不支持这种格式。PNG格式最多可以支持32位颜色，但是不支持动画图。2..建立鼠标经过图片创建网站相册3.实用Fierwork优化图片实验六、在网页中使用多媒体一、实验目的：掌握网页制作中常见的多媒体类型及特点；掌握插入媒体的标签及相应属性设置；掌握能够利用网上的软件进行媒体格式的转换。二、实验内容1.上一些常网站，了解网站上使用了哪些格式的多媒文件，并比较它们的特点。使用了MP3avi，mp4，Flash等格式2.完善“唐诗宋词网精选”网站，要求有声音、视频。三.实验步骤：1.插入音乐，用bgsound函数选中音乐，在确定如果是插入背景音乐：（二）使用embed标签：一打开页面就会自动播放音乐插入Flash动画:将插入工具栏切换到“常用”模式，单击“媒体：Flash”按钮,插入Flash按钮:将插入工具栏切换到“常用”模式，单击“媒体：Flash”按钮旁边的三角形，在菜单中选择“媒体：Flash按钮”按钮.插入Flash文本:将插入工具栏切换到“常用”模式，单击“媒体：Flash”按钮旁边的三角形，在菜单中选择“媒体：Flash文本”按钮在设置属性；插入插件:将插入工具栏切换到“常用”模式，单击“媒体：Flash”按钮旁边的三角形，在菜单中选择“媒体：Flash文本”按钮,选择一个要插入网页的电影格式的文件,在编辑窗口中看到插入了一个灰色矩形插件标志，调整其大小可调整网页中的播放窗口的大小单击属性面板上的“参数”按钮，可设置各种播放参数。3、插件法有些人始终没有舍弃FrontPage也许就因为在一些元素的插入中，Dreamweaver没有提供功能，或者不方便。但我们知道，Dreamweaver支持插件，声音插入插件为我们提供了方便。插件名称：sound.mxp下载后双击文件，就可以直接安装了，安装完成你可以在“对象”面板的“Common”栏看到一个喇叭图标。直接点击此按钮，就弹出如下图所示的插入窗口：Forever：设置无限循环播放Never：不循环播放，即只播放一次NOoftimes：设置播放的次数点击“Browser”按钮选择好声音文件之后，按确定完成制作。三．实验结论：优缺点：bgsound是用来插入背景音乐，但只适用于ie，其参数设定不多。embed：是用来插入各种多媒体，格式可以是midi、wav、aiff、au等等，netscape及新版的ie都支持。其参数设定较多。设定歌曲开始播放的时间。设定音量的大小，数值是0到100之间。内定则为使用系统本身的设定。设定控制面板和旁边文字的对齐方式，其值可以是top、bottom、center、baseline、left、right、texttop、middle、absmiddle、absbottom设定控制面板的外观。预设值是console。实验七、页面布局一、实验目的：掌握网页制作中页面的而已技术：表格布局，CSS布局，框架布局。二、实验内容1.参考P152内容，分别利用表格及CSS技术完成书上的的布局方式。通过管理或新建样式使用面板组执行窗口——CSS样式使用窗口——标签检查器——CSS属性面板CSS