网页设计实验报告.doc

JIANGXIAGRICULTURALUNIVERSITY本科课程报告题目:网页制作实验报告学院:软件学院姓名:徐潇学号:20101506专业:软件工程班级:软件1002班指导教师:唐建军、胡昶二0一一年十二月实验一、认识HTML一、实验目的:了解HHTML中涉及的技术。HTML语言的组成及特点,学会利用HTML语言编辑网页。了解CSS。了解网站开发的流程。二、,利用记事本实现唐诗实例。(1):在“记事本”中输入虞美人的文本。(2):选择“文件”—>“保存”命令,将该文件保存为“”,此时该文档将显示IE图标。(3):打开图标。如图所示::(包括分行及分段效果)角标的实现:在拆分视图下的文本编辑区域输入X1,然后看其在代码编辑区的变化。想要实现上下角标要用到角标在字母的上方;角标在字母的下方。红色字体的实现:在文本编辑区域回车编写“这是红色的字”然后选中这行字在属性面板中选择颜色为红色。粗体字的实现:在文本编辑区域回车编写“这是粗体字”然后选中这行字在属性面板中点击粗体。斜体字的实现:在文本编辑区域回车编写“这是斜体字”::谷歌的目标是“万能搜索”此网站的导航利用超连接及表单等实现导航的 实验二、Dreamweavor应用一、实验目的:掌握如何在Dreamweaver中进行网页编辑;掌握Dreamweaver中站点的设置;掌握网站空间的申请及网页的上传。二、,利用DreamWeavor完成,并注意在拆分视图下,观察它是如何将格式操作变成HTML代码的。,制作唐诗宋词网站的首页。,并为唐诗宋词网站规划网站文件夹结构。,并将所制作的网页上传,并测试网是否能够正常访问。找好免费个人空间后就可以利用DreamWeaver进行网站上传,也可以用ftp软件上传。 实验三、文本修饰与超链接一、实验目的:掌握常用的文本与段落修饰标记;掌握超级链接标记及其设置;二、实验内容(参见P68),至少完成3个页面。第一个页面:第二个页面:超链接:Dreamwever中提供了“链接检查器”工具用于超链接的检查。在文件面板的任意文件上右击,在弹出的快捷菜单中选择“检查链接”“选择文件/文件夹”命令。可检查当前选中的文件或文件夹中的超链接的工作情况。结果会显示在“结果”面板“链接检查器”的选项卡中,可以检查显示出断链接的情况,在状态栏中会有该网页的链接情况的统计数据。如果我们选择“检查链接”“整个本地站点”命令,则可以对整个网站中的链接进行检查。实验四、CSS应用一、实验目的:掌握CSS四种选择器;掌握内部样式表与外部样式表的应用;掌握利用外联式样式表统一网站风格;掌握利用Dreamweaver建立与编辑CSS样式。二、。CSS样式表中属性选择器四种格式属性选择器(AttributeSelectors),或许你不应该对属性选择器感到生疏,从本质上说,id跟类选择器其实就是属性选择器,只不过是选择了id或者类的值(value)而已。CSS样式表中属性选择器的格式是元素后跟中括号,中括号内带属性,或者属性表达式(不知道描述是否正确,自创的词),比如h1[title],h1[title="Logo"]等,你可以从我下面的论述中看到4种具体形式。1、简易属性选择器只顾其名不顾其值,这是CSS样式表中简易属性选择器的特点。h1[class]{color:silver;}将会作用于任何带class的h1元素,不管class的值是什么。所以<h1class="hoopla">Hello</h1>、<h1class="severe">Serenity</h1>、<h1class="fancy">Fooling</h1>的h1都会受到这条规则的影响。当然,这个“属性”不仅仅是class或者id,可以是该元素所有合法属性,比如img的alt,这样img[alt]{cssdeclarationshere;}将会作用于任何带有alt属性的img元素。那么a[href][title]{font-weight:bold;}呢?聪明的你一定已经知道,这会作用于同时带href和title属性的a元素,比如<ahref="/"title="mb5uHome"></a>。2、精确属性值选择器id和类本质上就是CSS样式表中的精确属性值选择器,没错,h1#logo等于h1[id="logo"]。