模块1 网页设计基础 实训1 体验HTML文档 1.1 网页基础知识 1.2 网站配色方案 1.3 网站设计常用软件 模块1 网页设计基础 实训1 体验HTML文档 1.1 网页基础知识 1.2 网站配色方案 1.3 网站设计常用软件 1.4 HTML文档入门 思考与实训1
实训1 体验HTML文档 myweb1.html的程序代码： <html> <head> <title>滚动的字幕</title> </head> <body> <marquee direction="left"> 大家好！这是我用记事本编写的第一个网页。 </marquee> </body> </html>
实训1 体验HTML文档
实训1 体验HTML文档 myweb2.html代码
实训1 体验HTML文档 myweb3.html程序代码 <table width="490" border="1" align="center" cellpadding="0" cellspacing="0"> <tr> <td colspan="3"><img src="11.JPG" width="501" height="101"></td> </tr> <td width="168" ><a href="web1.html">我的地盘</a></td> <td width="168"> <a href="http://www.1ting.com/" target="_blank">一听音乐</a> </td> <td width="146" ><a href="mailto:liming@163.com">与我联系</a></td> <td height="149" colspan="3" align="center"> <form name="form1" method="post" action=""> 用户登录<br> 用户姓名<input name="textfield3" type="text" id="textfield3" /> <br> 登录密码 <input name="textfield3" type="password" id="textfield4" /> <br> <input type="submit" name="button2" id="button2" value="登录"> </form> </table>
实训1 体验HTML文档 myweb3.html浏览效果
1.1 网页基础知识 1．Internet概述
1.1 网页基础知识 2．WWW服务
1.1 网页基础知识 3．Web站点和网页
1.1 网页基础知识 4．HTTP和URL HTTP：超文本传输协议，是因特网上应用最为广泛的一种网络协议，它允许将HTML文档从Web服务器传送到WWW浏览器。 URL：Internet中的Web服务器数量众多，且每台服务器都包含有多个网页，用户要想在众多的网页中指明要获得的网页，就必须借助于URL进行资源定位。URL由三个部分组成：协议、主机名、路径及文件名。例如：某网页的URL为http://www.rsnyl.com/news /wj1.html，其中http:是采用的协议，www.rsnyl.com是主机名，news指网页的路径（存储网页的文件夹），wj1.html是要访问的网页文件名。用户只要在浏览器的地址栏中输入要浏览网页的URL，便可以浏览到该网页。
1.2 网站配色方案 色彩是人的视觉最敏感的东西。 网站主页的色彩处理得好，可以锦上添花，达到事半功倍的效果。 1.2 网站配色方案 色彩是人的视觉最敏感的东西。 网站主页的色彩处理得好，可以锦上添花，达到事半功倍的效果。 色彩总的应用原则是“总体协调，局部对比”，也就是说主页的整体色彩效果应该是和谐的，只有局部的、小范围的地方可以有一些强烈色彩的对比。 在色彩的运用上，可以根据主页内容的需要，分别采用不同的主色调。
1.2 网站配色方案 1．色彩的搭配原则 （1）色彩的鲜明性 如果一个网站的色彩鲜明，很容易引人注意，会给浏览者耳目一新的感觉。 1.2 网站配色方案 1．色彩的搭配原则 （1）色彩的鲜明性 如果一个网站的色彩鲜明，很容易引人注意，会给浏览者耳目一新的感觉。 （2）色彩的独特性 网页的用色必须要有自己独特的风格，这样才能给浏览者留下深刻的印象。 （3）色彩的艺术性 网站设计是一种艺术活动，因此必须遵循艺术规律。按照内容决定形式的原则，在考虑网站本身特点的同时，大胆进行艺术创新，设计出既符合网站要求，又具有一定艺术特色的网站。 （4）色彩搭配的合理性 色彩要根据主题来确定，不同的主题选用不同的色彩。例如，用蓝色体现科技型网站的专业，用粉红色体现女性的柔情等。
1.2 网站配色方案 2．色彩搭配方案 色环实质上就是在彩色光谱中所见的长条形的色彩序列，只是将首尾连接在一起，使红色连接到另一端的紫色。一个色环通常包括12种明显不同的颜色。 （1）单色方案 单色方案指在网站设计中始终使用一种基本颜色。为避免单调，可以通过调整这种基本颜色的灰度和亮度来得到更多的颜色，由于整个颜色方案中事实上只有一种基色，因此这种方案称为单色方案。
1.2 网站配色方案 （2）相似色配色方案 相似色配色方案指在色彩圆环上选择彼此相邻的几种颜色构成的配色方案。例如橙色、橙红色，以及橙黄色就可以组成一个相似色方案。由于相似色方案中包含了多种基色，如果再加上亮度和饱和度的变化，可以构成的颜色就非常多。
1.2 网站配色方案 （3）互补色配色方案 互补色配色方案指在色彩圆环上沿直径选择相对应的两种颜色构成配色方案。
1.2 网站配色方案 （4）三色配色方案 三色配色方案指在色彩圆环中选择一个等边三角形三个顶点上的颜色构成的配色方案。三色方案中使用了三种彼此之间差别明显，对比强烈的颜色，因此页面显得相当不稳定，给人带来另类的感觉，给予浏览者某种紧张感。
1.3 网站设计常用软件 1．网站设计开发软件 （1）文本编辑器 1.3 网站设计常用软件 1．网站设计开发软件 （1）文本编辑器 制作网页通常使用HTML语言，HTML文档可以使用多种文本编辑器进行编辑，如记事本、Word写字板、UltraEdit等。 （2）FrontPage FrontPage是微软公司出品的一款网页制作入门级软件。FrontPage使用方便简单，会用Word就能做网页，所见即所得是其特点。 （3）Dreamweaver Dreamweaver是由Adobe公司推出一款优秀的网站开发工具，是网页设计师在选择开发工具时一个不错的选择，能更有效地设计、开发和维护基于网站标准化的网站。
1.3 网站设计常用软件 2．网页美化工具软件 （1）Photoshop 1.3 网站设计常用软件 2．网页美化工具软件 （1）Photoshop Photoshop是由Adobe公司开发的一种的图形图像软件，是目前最好的平面设计软件之一。其功能完善、性能稳定、使用方便，是美化网页的常用工具。 （2）Fireworks Fireworks是一款专为网络图形设计的图形编辑软件，它大大简化了网络图形设计的工作难度，无论是专业设计家还是业余爱好者，使用Fireworks都不仅可以轻松地制作出十分动感的GIF动画，还可以轻易地完成大图切割、动态按钮、动态翻转图等。 （3）Flash Flash是专业的矢量图形编辑和动画创作软件，是一种交互式动画设计工具，用它可以将音乐、声效、动画，以及富有新意的界面融合在一起，以制作出高品质的网页动态效果。
1.4 HTML文档入门 1．HTML语言概述 HTML（Hypertext Marked Language，超文本标记语言）是用于创建Web文档的一种标记语言。在IE浏览器中任意打开一个网页，选择“查看→源文件”命令，系统会启动记事本程序，打开该网页的源程序代码。
1.4 HTML文档入门 2．HTML文档基本结构 一个HTML文档是由一系列的元素和标记组成的，HTML用标记来规定元素的属性和它在文件中的位置。
1.4 HTML文档入门 3．HTML文档常用标记 （1）标题标记 格式：<title>网页的标题</title> 说明：该标记在<head></head>标记中，所包含的文字将出现在浏览器的标题栏上。当用户将此页面添加到收藏夹时，也会默认以该标题为名称。 （2）主体标记 格式： <body bgcolor="页面背景颜色" background="背景图像" text="文本颜色"> 主体内容 </body> 说明：包括所有主体内容，可以设置页面的背景颜色、背景图像、文字颜色等属性。背景颜色和文本颜色可以使用颜色名（如蓝色：blue）或颜色代码值（如蓝色：#0000FF）来表示。 例如：将图像tx.jpg设置为网页背景图像，网页文字颜色为蓝色。 <body background="tx.jpg" text="#0000FF">
1.4 HTML文档入门 3．HTML文档常用标记 （3）文字标记 格式： <font size="文字大小" face="字体" color="文本颜色">文本内容</font> 说明：<font>标记用于设置网页中文字的字号、字体、颜色等属性。设置字号时，<font size=1>（最小）、<font size=7>（最大）、<font size=+1>（比预设字大一级）、<font size=-1>（比预设字小一级）。 例如：将文本“最新通知”设置为楷体_GB2312，大小为4。 <font size="4" face="楷体_GB2312">最新通知</font> （4）段落标记 <p align="对齐方式">段落文本</p> 说明：由<p>标记所标识的文字代表同一个段落的文字。其中align属性有left、center和right三个参数，这三个设置分别代表左对齐、居中对齐和右对齐。 例如：将标题“会议通知”居中显示。 <p align="center">会议通知</p>
1.4 HTML文档入门 3．HTML文档常用标记 （5）换行标记 格式： <br> 说明：<br>是个单标记，HTML文件中任何位置只要使用了<br>标记，当文件显示在浏览器中时，该位置之后的文字将显示于下一行。 （6）水平线标记 <hr align="对齐方式" color="颜色" width="宽度" size="高度" noshade> 说明：在网页中插入一条水平分隔线，将不同的内容信息分开，使文字看起来清晰、明确。noshade用于设置水平为实心线（默认情况下为阴影线）。 例如：插入一条宽度800像素的红色水平线，并居中显示。 <hr width="800" color="#ff0000" align="center" >
1.4 HTML文档入门 3．HTML文档常用标记 （7）图像标记 格式： <img src="图像地址" align="对齐方式" width="宽度" height="高度" alt="替换文字" boder="边框宽度"> 说明：在页面中插入一幅图像，图像地址可以在本地计算机，也可以是一个URL地址，但图像必须是GIF、JPG/JPEG或PNG格式的，其他格式的图像不能被插入到网页中。Alt参数用于设置图像的说明信息，当浏览器不能显示图像时，则用该参数指定的文本替换特定的图片。若图片正常显示，则当鼠标指向该图片时也会显示该文字。 例如：插入images文件夹中的图像tx.jpg，宽度和高度均为300像素，鼠标指向图像或图像不能正常浏览时提示“风景图片”。 <img src="images/tx.jpg" width="300" height="300" alt="风景图片" >
1.4 HTML文档入门 3．HTML文档常用标记 （8）超链接标记 格式： <a href="目标文件的URL" target="打开窗口的方式">文本或图像</a> 说明：为标记中的文本或图像添加超链接目标，浏览网页时单击可打开指定的目标文件。target用于指定打开目标窗口的方式，默认情况是在当前窗口中打开，如果要在新窗口中打开目标窗口，则可将target的属性值设为"_blank"。 根据链接目标的不同，可将超链接分为以下几项： ① 内部链接。链接到本地计算机上的文件，例如： <a href="1.html">单击查看1.html文件内容</a> ② 外部链接。链接到本地站点以外其他任何一个站点上的文件，例如： <a href="http://www.sina.com">单击打开新浪网</a> ③ E-mail链接。链接到一个电子邮件地址，单击将启动默认E-mail程序发送信件，例如： <a href="mailto:liming@163.com">请给我发信</a> ④ 锚记链接。在某个Web页面中创建一个被称为“锚点”的标记，让页面上的另外一个位置引用，相当于在某个文件中重要之处做上书签，需要该部分时直接查找书签就能找到此部分。
1.4 HTML文档入门 3．HTML文档常用标记 （9）表格标记 表格标记由表格标记、行标记和单元格标记3部分组成。 ① 表格标记 <table bgcolor="背景颜色" background="背景图像" width="宽度" height="高度" align="对齐方式" border="边框宽度" cellpadding="单元格边距" cellspacing ="单元格间距">……</table> ② 行标记 <tr bgcolor="背景颜色" height="高度" align="对齐方式" >……</tr> ③ 单元格标记 <td rowspan="跨越行数" colspan ="跨越列数" bgcolor="背景颜色" background="背景图像" width="宽度" height="高度" align="对齐方式" >……</td> 说明：单元格边距指单元格内容与单元边框之间的像素数，单元格间距指相邻单元格之间的距离。
1.4 HTML文档入门 3．HTML文档常用标记 （10）表单标记 格式： <form name="表单名称" method="提交方式" action="文件"> 说明：表单标记与动态网站制作是分不开的，form标记中，action="文件"指这个表单提交后，将传送给哪个文件处理；method="提交方式"指将表单信息提交服务器的方式，一般包括POST（以文件形式不限制长度提交）和GET（附加在URL地址后限制长度提交）两种。 使用<form>标记定义表单后，就要通过具体的表单对象添加信息，常见的表单对象有以下几种。 ① 文本域 ◇ 单行文本域，用户输入的信息原样显示。 ◇ 密码文本域：用户输入的信息以“●”形式显示。 ◇ 多行文本域：输入信息可以是多行，一般用于简介、留言等选项。 ◇ 单选按钮：只允许选取一项，一般用于性别等选项。 ◇ 复选框：可以多项选取，一般用于爱好、特长等选项。 ③ 菜单域 可提供让浏览者在给出的菜单中作一个选择，如选择籍贯、类别、日期、学历等。 ◇ 下拉菜单：◇ 滚动菜单： ④ 按钮域 ◇ 提交按钮：◇ 重置按钮：
1.4 HTML文档入门 3．HTML文档常用标记 （11）滚动标记 格式： <marquee behavior="方式" direction="方向" scrollamount="速度">滚动的文本</marquee> 说明：方向（direction）：left（左）、right（右）、up（上）、down（下）。 方式（behavior）：alternate（来回滚动）、slide（滚动一圈）、scroll（循环滚动）。 速度（scrollamount）：值越大速度越快。 例如：让“今天天气不错，心情很好！”从左向右循环滚动。 <marquee behavior="scroll" direction="right"> 今天天气不错，心情很好！ </marquee>