网页设计与美化实验指导书CWord格式.docx
- 文档编号:3299931
- 上传时间:2023-05-01
- 格式:DOCX
- 页数:36
- 大小:2.22MB
网页设计与美化实验指导书CWord格式.docx
《网页设计与美化实验指导书CWord格式.docx》由会员分享,可在线阅读,更多相关《网页设计与美化实验指导书CWord格式.docx(36页珍藏版)》请在冰点文库上搜索。
二.实验要求
1.熟悉Dreamweave和记事本的使用;
2.掌握HTML的基本语法结构。
3.能够给出程序的运行结果。
4.需要2课时完成。
三.实验原理
HTML(HyperTextMark-upLanguage)即超文本标记语言,是WWW的描述语言。
HTML一种为普通文件中某些字句加上标示的语言,其目的在于运用标记(tag)使文件达到预期的显示效果。
四.实验内容与步骤
启动Windows操作系统
打开“XX”首页。
打开“源文件”的结果如图1.1、图1.2所示。
查看其中的基本标记。
基本标记包括:
<
head>
、<
title>
base>
basefont>
isindex>
/isindex>
meta>
style>
link>
script>
。
在internet上搜索html基本标记的信息,了解这些标记的含义。
图1.1“XX”首页
图1.2“XX”首页的源代码
1.使用记事本中编写一个简单的html网页如图1.3所示。
图1.3编写一个简单的html网页
2.保存该网页。
3.在浏览器打开该页面,如图1.4所示。
图1.4第一个网页的效果图
4.用同样的方法练习编写其他网页内容的html网页。
五.实验报告要求
写出实验目的、实验内容、实验要求、实验环境和使用的工具、实验过程及思路,打印出实验结果,并上传所有代码。
实验2.使用文字格式化、图片和超链接创建网页
1.熟悉HTML标记的语法事项;
2.掌握HTML文档的结构及基本标记的使用;
3.掌握P、BR、HR、等标记符的基本用法。
4.掌握使用图像、超链接、锚站、水平线和背景。
1.使用记事本编写HTML程序;
2.理解内部链接和外部链接的区别。
3.掌握图片的基本格式,图片的超链接及其标记。
4.掌握锚链接,邮件链接,页面之间超链接的几种标记,图像映射的格式。
5.需要4课时完成。
文本链接<
ahref=“courses/course.htm”>
学习园地<
/a>
;
图片链接的HTML标记示例:
ahref="
courses/course.htm"
>
imgsrc="
xihu.jpg"
width="
200"
height="
113"
border="
0"
>
;
热点图链接的HTML标记示例:
mapname="
Map"
<
areashape="
rect"
coords="
73,43,120,61"
href="
URL"
/map>
E-mail链接的HTML标记示例:
mailto:
sj_lfg@"
给我写信<
命名锚链接的HTML标记示例:
命名锚:
aname="
study"
链接锚:
course.htm#study"
target="
_self"
等。
1.用记事本编写一个网页文件netpage1.html。
其中包括文本链接,图像链接,锚点链接等如图2.1。
3.使用浏览器打开此网页,如图2.2所示。
4.使用记事本再次制作一个新的网页,要求在标题下方加入水平线、加入背景,其他功能要求如1、2、3。
图2.1网页文件netpage1.html的源代码
图2.2网页文件netpage1.html的运行结果
5.使用记事本再次制作一个新的网页,要求在文档的<
body>
和<
/body>
之间,插入适当元素使最终网页中显示以下内容:
6.紧接着步骤5插入的元素插入适当元素,使得最终网页上可以显示字号为5、颜色为红色、字体为“华文彩云”的下列样式文字;
7.接着步骤6插入的元素插入适当元素,使得最终网页上显示下列样式的文字(隶书、4号、绿色);
如果以上的每条文本之间没有换行,则在它们之间分别播一个换行。
写出实验目的、实验内容、实验要求、实验环境和使用的工具、实验过程及思路,仿照给出的代码,编写实验报告(只许仿,不许抄),打印出实验结果,并上传所有代码。
实验3.网页中无序列表和有序列表的相关操作
1.掌握无序列表标签<
ul>
和符号类型;
2.掌握有序列表标签<
ol>
3.掌握无序列表标签和有序列表的嵌套。
2.理解无序列表标签<
和符号的意义;
3.理解有序列表标签<
4.掌握无序列表标签和有序列表的嵌套;
5.需要2课时完成。
1.无序列表<
无序列表的格式为:
ultype=”符号类型”>
li>
第一个列表项<
第二个列表项<
……
/ul>
type的属性指定每个表项左端的符号类型,可为disc(实心圆点)、circle(空心圆点)、square(方块)、也可自己设置图片。
2.有序列表<
oltype=”符号类型”>
/ol>
type的属性指定每个表项左端的符号样式,可为1(数字)、A(大写英文字母)、a(小写英文字母)、I(大写罗马字母)、i(小写罗马字母)。
3.列表嵌套
列表嵌套把主页分为多个层次,有序列表和无序列表不仅可以自身嵌套,而且可以进行彼此嵌套。
1.用记事本编写一个网页文件list1.html。
其中写出无序列表代码,如图3.1。
图3.1无序列表代码
3.使用浏览器打开此网页,如图3.2所示。
图3.2网页文件list1.html的运行结果
4.使用记事本再次制作一个新的list2.html网页,其中写出无序列表代码,如图3.3。
图3.3有序列表代码
5.使用浏览器打开此网页,如图3.4所示。
图3.4网页文件list1.html的运行结果
实验4.网页中表格标签的相关操作
1.掌握表格标签<
table>
及其属性;
2.掌握表格跨行跨列合并;
3.掌握使用表格实现页面局部布局。
2.理解表格标签<
及其属性的意义;
3.理解行标签<
tr>
的意义;
4.理解单元格标签<
td>
1.表格标签
表格主要通过3个标签来构成:
th>
表格的语法格式为:
tableborder="
n"
x|x%"
y|y%"
cellspacing="
i"
cellpadding="
j"
captionalign="
left|right|top|bottomvalign=top|bottom>
标题<
/caption>
表头1<
/th>
表头2<
…<
表头n<
/tr>
表项1<
/td>
表项2<
表项n<
…
/table>
2.表格的跨行跨列
跨行
跨行是指单元格在垂直方向上合并,语法如下:
tdrowspan="
所跨的行数"
单元格内容<
跨列
跨列是指单元格在水平方向上合并,语法如下:
tdcolspan="
1.用记事本编写一个网页文件table1.html。
其中写出某班级基本信息表格代码,如图4.1。
图4.1表格table1.html代码
3.使用浏览器打开此网页,如图4.2所示。
图4.2网页文件table1.html的运行结果
4.使用记事本再次制作一个新的table2.html网页,其中写出调整后的某班级基本信息表格代码,如图4.3。
图4.3有序列表代码
5.使用浏览器打开此网页,如图4.4所示。
图4.4网页文件table2.html的运行结果
图4.5网页表格中跨行单元格示例
图4.6个人简历表格示例
写出实验目的、实验内容、实验要求、实验环境和使用的工具、实验过程及思路,仿照给出的代码,编写个人简历实验报告,要求插入一幅个人照片,打印出实验结果,并上传所有代码。
实验5.网页表单的操作
1.掌握表单各元素的操作;
2.掌握表单标记的访问控制;
3.掌握表单处理方法和设计方法。
2.理解表单中数据传输的两种方式:
GET方式和POST方式意义;
3.理解表单标记中的控件(或者窗口部件)标记的意义——用来收集用户信息的域;
4.掌握表单中每一个控件的名称(name)和值(value)的意义。
当用户填写好表单并提交时,可用这些“名/值”对处理表单;
1.从<
form>
标记开始学习使用<
input>
标记的属性type,其值为text(文本域)、password(密码域)、radio(单选按钮)、checkbox(复选框)、select(下拉菜单)和textarea(多行文本框)等,使用方式如<
inputtype="
text"
name="
text-id"
value="
default-text"
size="
maxlength="
m"
2.文件上传,允许访问者从他们的硬盘中给服务器发送文件,语法如:
file"
field-id"
accept="
file-type"
size属性限定了输入框的实际大小。
accept属性用来限制上传文件的类型。
3.提交和重置按钮
在<
标记中设置type=为submit,则成为一个提交按钮,该按钮可以把表单中的信息提交到<
标记的action属性所指定的URL中。
而信息的提交是按照<
标记中method属性所指定的http查询类型的方式进行。
submit"
buttonlabeltext"
若type属性的值为reset,则把表单中的所有控件设置为初始状态,
reset"
buttonlabeltext“>
1.用记事本编写一个网页文件form1.html。
其中代码如图5.1,如图效果5.2。
图5.1网页文件form1.html代码
图5.2网页文件form1.html的效果
2.用记事本编写一个网页文件form2.html,个人信息填写表单。
其中效果如图5.3所示。
仿照form1.html的代码去编写form2.htm的各种控件,添加“提交”和“重置”按钮。
左右两部分可以借助表格的定位方法来实现,参见图5.3。
也可仿照图5.4的形式编写form2.htm的各种控件。
写出实验目的、实验内容、实验要求、实验环境和使用的工具、实验过程及思路,仿照给出的代码,编写个人信息填写表单实验报告,要求插入一幅个人照片,打印出实验结果,并上传所有代码。
图5.3网页文件form2.html效果
图5.4用表格定位表单控件的效果
实验6.网页框架布局的操作
1.掌握框架布局的操作;
2.掌握框架集嵌套的操作;
3.掌握框架目标的操作。
2.理解水平框架和垂直框架的意义;
3.理解框架集嵌套的意义;
4.理解框架目标的意义;
5.掌握使用水平框架和垂直框架创建基本框架,掌握使用框架集嵌套处理较复杂的框架,掌握使用框架目标让一个框架内的链接目标在另一个框架中显示的操作以及框架的格式化操作;
6.需要4课时完成操作。
1.使用框架结构可以把一个页面分割成较小的几个片断,并且在每个片断中分别放置不同的网页。
框架之间可以相互联系,触发一个框架中的事件可以改变另一个框架中的内容和行为。
2.使用框架布局的页面中,有3个基本的框架标记:
frameset>
frame>
noframes>
,<
标记出现在<
标记后面,用于定义怎样将一个窗口划分为多个框架,每一个<
标记可以定义一组行或者一组列,它用来控制浏览器窗口中框架的布局视图,每一组<
标记中,既包括<
标记指定框架,也包括<
noframe>
标记指出替换显示方案,一个HTML文件中可以包含任意多个<
标记,其语法为:
framesetcols="
宽度1,宽度2,…"
rows="
高度1,高度2,…"
若干个<
或者<
指定框架
指定替换显示方案
/frameset>
3.框架集嵌套
一个框架集文件可以包含多个嵌套的框架集。
大多数使用框架的Web页实际上都使用嵌套的框架。
如果在一组框架里,不同行或不同列中有不同数目的框架,则要求使用嵌套的框架集。
例如,最常见的框架布局在顶行有一个框架(框架中显示公司的徽标),并且在底行有两个框架(一个导航框架和一个内容框架)。
此布局要求嵌套的框架集:
一个两行的框架集,在第二行中嵌套了一个两列的框架集。
4.框架目标
使用框架时,可以使一个框架内的链接目标在另一个框架中显示。
当用户在一个框架文档中单击按钮或激活一个链接时,结果页面可以显示在另一个框架中。
设置链接目标需要做到如下两点:
●确保框架被命名。
命名的方法是使用<
标记的name属性,为框架设置一个独一无二的名字。
需要注意的是目标框架的名称不能与target的保留字_blank,_self,_parent和_top相同,否则会引起问题。
●设置锚站目标。
在需要链接的锚站标记<
a>
中使用target属性设置锚站目标。
例如,<
网页路径/网页名称"
target="
display"
这样的一个链接将在名为display的窗口中显示href属性指定的网页或网站。
如果不存在该框架,则会打开一个新窗口。
1.用记事本编写3-4个网页文件frame1.html、frame2.html、frame3.html……然后创建框架网页frameset1.html。
其中效果如图6.1,代码如图6.2。
图6.1网页文件frameset1.html效果
图6.2网页文件frameset1.html的代码
2.用记事本编写一个文件frameset2.html的具有框架目标的网页,其中效果如图6.3所示,代码如图6.4。
图6.3网页文件frameset2.html效果
图6.4网页文件frameset2.html代码
3.用记事本编写一个文件frameset3.html的具有浮动框架的网页。
其中效果如图6.5所示,代码如图6.6。
写出实验目的、实验内容、实验要求、实验环境和使用的工具、实验过程及思路,仿照给出的代码,编写带有框架目标的实验报告,打印出实验结果,并上传所有代码。
图6.5网页文件效果
图6.6网页文件frameset3.html的代码
实验7.样式表CSS的操作
1.掌握样式表创建规则,以及样式表的使用;
2.掌握层叠样式表的操作,以及样式表属性的设置;
3.掌握外部和内联样式表的操作。
1.使用记事本编写CSS样式表程序;
2.理解样式表创建规则;
3.理解内部(嵌入式)样式表的意义;
4.理解外部样式表(输入外部样式表、链接外部样式表)的意义;
5.掌握创建样式表中的id规则、class规则等的操作;
6.掌握样式表各种属性的设置,div的相对与绝对定位;
7.需要6课时完成操作。
1.内部样式表仅仅是一种HTML标记:
标记名称style="
样式属性:
属性值;
样式属性:
属性值……"
嵌入式样式表位于HTML的内部,一般在<
/head>
标记之间定义,或在<
标记之间。
2.外部样式表是建立一个独立的样式表文件,它包括所有样式定义,并且可以和页面相结合。
独立的样式表文件以“css”为扩展名。
3.id规则是一个标记区别于其他同类标记的方式之一。
使用id规则,除了可以作为链接的目标外,还可以用它来标识样式表中的某个样式规则。
在HTML页面中,id规则的属性值必须是全局唯一的,也就是页面只能有一个id号,不能同名。
4.class规则(类规则)也是HTML的样式规则之一。
class规则定义了标记所属的类名称和样式。
它的页面效果和id规则相似,最大的区别在于class规则的取值不要求唯一,同一类可以应用于不同的标记,或者一个标记可以定义不同的类。
5.样式表各种属性的设置:
●文本属性——用来控制网页中的文本显示,最常用的属性有text-indent,text-transform,text-align,text-decoration和letter-spacing;
●颜色和背景属性——color和background-color属性,background-image属性,background-repeat属性,background-attachment属性,background-position属性;
●字体属性——font-family属性,font-style属性,font-variant属性,font-weight属性,font-size属性;
●容器模型——CSS的一个重要属性,包括margin边距属性(margin-top、margin-right、margin-bottom、margin-left),padding填充属性(padding-top、padding-right、padding-bottom、padding-left),边框属性(border-top-width、border-right-width、border-bottom-width和border-left-width),边框颜色属性(border-top-color、border-right-color、border-bottom-color、border-left-color),边框样式属性(order-top-style、border-right-style、bordcr-bottom-style、bordcr-left-style)等。
1.用记事本编写网页文件“文本属性综合示例.html”,效果如图7.1,代码如图7.2。
图7.1网页文件“文本属性综合示例.html”的效果
2.用记事本编写网页文件“设置一个元素的垂直对齐.html”,效果如图7.3,代码如图7.4。
3.图7.5是一个容器的例子。
4.图7.6是一个图片廊的例子,代码如图7.7。
图7.2网页文件“文本属性综合示例.html”的代码
图7.3“设置一个元素的垂直对齐.html”的效果
图7.4“设置一个元素的垂直对齐.html”的代码
图7.5一个容器的例子
图7.6一个图片廊的例子
图7.7图片廊的代码
5.relative与absolute的结合使用——暨横向导航栏的示例,如图7.8,其代码见图7.9和7.10。
图7.8relative与absolute的结合使用——暨横向导航栏的示例
图7.9relative与absolute的结合使用——暨横向导航栏的代码1
图7.10relative与absolute的结合使用——暨横向导航栏的代码2
写出实验目的、实验内容、实验要求、实验环境和使用的工具、实验过程及思路,仿照给出的代码,编写具有一定实用性的实验报告(多于1张纸),并打印出实验结果(代码和效果图),并上传所有代码。
实验8.大型综合网站制作
1.掌握制作大型综合网站的操作;
2.掌握CSS技术应用于制作大型综合网站的操作;
1.使用记事本或Dreamweaver
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 设计 美化 实验 指导书
![提示](https://static.bingdoc.com/images/bang_tan.gif)