Download presentation
Presentation is loading. Please wait.
1
网页 设计与制作
2
项目二探讨研究 HTML语言 制作网页时，大多数设计者会使用HTML语言，它是制作网页必须掌握的最基础的语言。在本项目中，通过4个工作任务生动地向读者展示HTML语言的基本结构、建立链接、定义表格等知识。
3
目录 任务一 任务二 任务二 任务二 使用HTML语言在网页中输入信息 使用文字属性设置网页文章字体大小 使用多种方法链接唐诗欣赏页面
使用表格属性设置人事资源表
4
使用HTML语言在网页中输入信息 准备知识 使用HTML语言在网页中输入信息 HTML编辑和运行环境 HTML基本结构
5
任务一：使用HTML语言在网页中输入信息
任务实施 使用HTML语言在网页中输入信息 金明是某网络公司新员工，公司为其配发的计算机中已经安装了Dreamweaver软件。她在软件中编写一段代码，在程序运行界面中显示“这是一个页面” ，用来测试Dreamweaver运行环境以及网络速度。
6
任务一：使用HTML语言在网页中输入信息
任务分析： 理解牢记！ 由于HTML是最常用的网络编程语言，同时它也具有广泛性、简易性、通用性等特点。因此，金明决定使用HTML语言来完成此任务。
7
任务 实施 使用HTML语言在网页中输入信息
8
李琳使用HTML语言，打开记事本，在文档中输入以下代码。
<head> <title>页面</title> </head> <body> <p>这是一个页面。</p> </body> </html>
9
输入完成后将文件保存为扩展名为.html的文件，双击打开该文件，如下图所示。
10
拓展提高： 从上述代码中可以看出HTML文件的基本结构，如下图所示。
11
知识点链接 <head>与</head>之间的部分是HTML文件的文件头部分，用于说明文件的标题和整个文件的一些公共属性。<body>与</body>之间的部分是HTML文件的主体部分。
12
使用文字属性设置网页文章字体大小 准备知识 使用文字属性设置网页文章字体大小 页面布局 字体属性
13
任务二：使用文字属性设置网页文章字体大小
任务实施 使用文字属性设置网页文章字体大小 张明在了个人网站中新建了阅读网页，需要在网页中输入文字。同时，要求能够方便、快捷地对网页中的内容进行字体、字号等简单设置，使网页更美观。
14
任务二：使用文字属性设置网页文章字体大小
任务分析： 理解牢记！ 由于HTML语言中的文字属性主要控制文本大小，并且，使用它们非常方便。因此，小张明定使用字体属性来完成此项工作任务。
15
任务 实施 使用文字属性设置网页文章字体大小
16
<html> <head> <title>控制文字的格式</title> </head> <body> <center> <font face=黑体 size=6 color="green" >我与父亲不相见已二年余了，我最不能忘记的是他的背影。</font> <p> <font face=宋体 size=+3 color="red"> 那年冬天，祖母死了，父亲的差使也交卸了，正是祸不单行的日子。<p> 我从北京到徐州，打算跟着父亲奔丧回家。</font><p>
17
<font face=宋体 size=4 color="#ff00ff">
到徐州见着父亲，看见满院狼籍的东西，又想起祖母，不禁簌簌地流下眼泪。<p> </font> </center> </body> </html>
18
运行效果如下图所示。
19
使用不同方法链接唐诗欣赏页面 使用不同方法链接唐诗欣赏页面 超链接的建立 在同一个文件中建立链接 3. 建立不同文件的链接 4. 根路径
准备知识 使用不同方法链接唐诗欣赏页面 超链接的建立 在同一个文件中建立链接 3. 建立不同文件的链接 4. 根路径
20
任务三：使用不同方法链接唐诗欣赏页面 使用不同方法链接唐诗欣赏页面
任务实施 使用不同方法链接唐诗欣赏页面 刘源负责某文学网站的建设和维护，需要在网页中放入古诗等内容。同时，要求能够方便、快捷地实现网页链接。
21
任务三：使用不同方法链接唐诗欣赏页面 理解牢记！ 任务分析：
由于超链接是实现网页跳转的一种方法，可以让用户随意查看想要的网页。同时用户还可以建立不同方式的超链接。因此，刘源决定采用不同的超链接来完成此任务。
22
任务 实施 使用不同方法链接唐诗欣赏页面
23
刘源在同一个文件中建立链接。 <HTML> <HEAD> <TITLE>唐诗欣赏</TITLE> </HEAD> <BODY><a name="top"><H2>唐诗欣赏</H2></a> <a name="lb"><H2>王昌龄</H2></a> <A href="#T.2" >出塞</A><br> <A href="#T.1">闺怨</A><br> <A href="#T.3">长信怨</A> <HR> <BR> <H3><A NAME="T.2">出塞</A> </H3> <pre>
24
秦时明月汉时关， 万里长征人未还。 但使龙城飞将在， 不教胡马度阴山。 </PRE> <A href="#top">唐诗欣赏</a> <H3><A NAME="T.1">闺怨</A> </H3> <PRE> 闺中少妇不知愁， 春日凝妆上翠楼。 忽见陌头杨柳色， 悔教夫婿觅封侯。
25
</PRE> <A href="#top">唐诗欣赏</a> <BR> <H3><A NAME="T.3">长信怨</A> </H3> <PRE> 奉帚平明金殿开， 暂将团扇共徘徊。 玉颜不及寒鸦色， 犹带昭阳日影来。 </BODY> </HTML>
26
运行结果如下左图和下右图所示。
27
使用表格属性设置表格边框 准备知识 使 用 表 格 属 性 设 置 边 框 定义表格的基本语法 表格标签的属性
28
任务四：使用表格属性设置表格边框 使 用 表 格 属
任务实施 使 用 表 格 属 性 设 置 边 框 江涛是某网络公司的新职员，主管要求他使用Web语言编写程序，统计2014年公司新招员工基本情况。
29
任务四：使用表格属性设置表格边框 理解牢记！ 任务分析：
由于表格在网站应用中非常广泛，可以方便灵活地排版，很多大型动态网站也都是借助表格排版，表格可以把相互关联的信息元素集中定位，使浏览页面的人一目了然。因此，江涛决定使用表格来解决此任务。
30
任务 实施 使用表格属性设置表格边框
31
江涛使用HTML语言编写如下所示程序，创建表格以及设置属性。
<HEAD> <TITLE>表格边框的显示状态</TITLE> </HEAD> <BODY > <TABLE border=6 bgcolor="#FFFFCC" frame="hsides" bordercolor= "#9900FF" width="400" height="160">
32
<TR> <TH>姓名</TH> <TH>性别</TH> <TH>年龄</TH> <TH>专业</TH> </TR> <TD>刘强</TD> <TD>男</TD> <TD>20</TD> <TD>计算机专业</TD> </TABLE> </BODY> </HTML>
33
最终网络运行如下图所示。
34
项目二探讨研究 HTML语言 重点难点 重点 掌握HTML基本结构 难点 掌握表格标签的属性 重 点 难
Similar presentations
