《网页设计技术与应用：第3章 网页的基本编辑与HTML语言简介》由会员分享，可在线阅读，更多相关《网页设计技术与应用：第3章 网页的基本编辑与HTML语言简介（20页珍藏版）》请在金锄头文库上搜索。
1、第第3章网页的基本编辑章网页的基本编辑与与HTML语言简介语言简介3.1 3.1 图文混排示例图文混排示例3.2 HTML3.2 HTML网页文件结构简介网页文件结构简介3.3 3.3 文本的输入和属性设置文本的输入和属性设置3.4 3.4 图片的插入和属性设置图片的插入和属性设置3.5 3.5 设置网页头部信息设置网页头部信息3.1图文混排示例图文混排示例1实例综述实例综述在制作网页时，在制作网页时，需要以下几下步骤：需要以下几下步骤： 新建或打开网页新建或打开网页 设置页面属性设置页面属性 设置头部信息设置头部信息 规划页面布局规划页面布局 添加页面元素添加页面元素 ( (文字和图像文字和
2、图像) ) 制作超链接制作超链接 保存网页保存网页“我与足球网我与足球网”页面页面3.1图文混排示例图文混排示例1 1）新建或打开网页）新建或打开网页2 2）设置页面属性）设置页面属性3 3）设置头部信息）设置头部信息插入作者信息插入作者信息插入插入“关键字关键字”插入插入“说明说明”插入插入“刷新刷新”4 4）规划页面布局）规划页面布局5 5）添加页面元素）添加页面元素n插入文本插入文本n插入图像插入图像n图像文字的混排图像文字的混排 n图像的编辑图像的编辑 6 6）设置超链接）设置超链接7 7）保存网页）保存网页2实现步骤实现步骤1空白网页的空白网页的HTML（Hyper Text Mar
3、kup Language）代码代码3.2HTML网页文件结构简介网页文件结构简介 2网页文件结构网页文件结构属性=“属性值”标题标题第一段内容第一段内容文件头文件体元素用元素用标签标签(Tag)标记标记3.2HTML网页文件结构简介网页文件结构简介插入、修改元素、插入、修改元素、标签标签方式方式在在设计设计视图可视化操作视图可视化操作在在代码代码视图直接输入视图直接输入学习参考资料学习参考资料：http:/完整版完整版W3CSchool线下教程线下教程.chm1插入文本插入文本文件文件导入导入复制复制粘贴或选择性粘贴粘贴或选择性粘贴直接输入直接输入3.3文本的输入和属性设置文本的输入和属性设置
4、文本的几种预定义格式：文本的几种预定义格式：中南大学中南大学中南大学中南大学中南大学中南大学段落标签段落标签定义一个段落定义一个段落。属性：属性：align用来设定段落的对齐方式用来设定段落的对齐方式，其值有，其值有left、right、center标题格式标签标题格式标签指明指明n级标题格式，其中级标题格式，其中n=16，其中，其中最大的标题最大的标题；最小的标题最小的标题。属性：属性：align用来设定段落的对齐方式。其值有用来设定段落的对齐方式。其值有left、right、center3.3文本的输入和属性设置文本的输入和属性设置2 插入特殊符号插入特殊符号3.3文本的输入和属性设置文本
5、的输入和属性设置1) 换行换行Enter分段（隔一行）分段（隔一行）Shift+Enter换行（不分段）换行（不分段） 具体操作，具体操作， 2) 空格空格n汉字全角符号输入状态下输入汉字全角符号输入状态下输入nShift+Ctrl+空格空格n编辑编辑首选参数首选参数常规常规允许多个连续的空格允许多个连续的空格 3）其它特殊符号）其它特殊符号 l选择菜单栏选择菜单栏【插入插入】|【HTML】|【特殊字符特殊字符】，从，从子菜单中选择要插入的特殊字符名称。子菜单中选择要插入的特殊字符名称。l在在“插入插入”工具栏的工具栏的“文本文本”类别中，单击类别中，单击“字符字符”按按钮，从弹出的子
6、菜单中选择一种字符。钮，从弹出的子菜单中选择一种字符。l如果在子菜单中没有找到需要插入的特殊字符，可以单如果在子菜单中没有找到需要插入的特殊字符，可以单击击“其他字符其他字符”图标，打开图标，打开“插入其他字符插入其他字符”对话框，对话框，这里提供了更多的可选择的特殊字符。这里提供了更多的可选择的特殊字符。3.3文本的输入和属性设置文本的输入和属性设置4设置文本格式设置文本格式3.3文本的输入和属性设置文本的输入和属性设置 用右键用右键/快捷菜单快捷菜单 用用CSS规则（后面讲）规则（后面讲）5插入其它文本类对象插入其它文本类对象3.3文本的输入和属性设置文本的输入和属性设置注释标签注释标签说
7、明：说明：在在HTML文件中加入注释可以使程序清晰，容易理解。文件中加入注释可以使程序清晰，容易理解。该标签中的内容在浏览器解释时会被忽略，也不会被显示。该标签中的内容在浏览器解释时会被忽略，也不会被显示。水平线标签水平线标签说明：说明：该标签可以用来在页面上插入一条水平标尺线。该标签可以用来在页面上插入一条水平标尺线。属性：属性：align用来设定横线对齐方式。取值：用来设定横线对齐方式。取值：left、right和和center。Size用来设定线条粗细，取值为用来设定线条粗细，取值为n个像素，默认为个像素，默认为2。Width用来设定线段长度，取值可为绝对值（用来设定线段长度，取值可为绝
8、对值（n个像素）或个像素）或相对值（相对于当前窗口的百分比），默认值为相对值（相对于当前窗口的百分比），默认值为100%。3.4图片的插入与属性设置图片的插入与属性设置1 图像格式图像格式 支持的图像格式有支持的图像格式有3 3种：种： GIF GIF对色彩要求不高的地方可使用（可透明）对色彩要求不高的地方可使用（可透明） JPEG JPEG用于色彩丰富的图片用于色彩丰富的图片 PNG PNG保留所有原始层、矢量、颜色和效果信息（可透明）保留所有原始层、矢量、颜色和效果信息（可透明）2插入图像插入图像n插入插入图像图像n插入面板插入面板常用常用图像图像n直接将图像文件拖入编辑区直接将图像文件拖
9、入编辑区注意：注意：n在插入图像前应先将网页文件已保存，从而使所插图像引用在插入图像前应先将网页文件已保存，从而使所插图像引用正确。正确。n图像插入网页后，应确定图像文件已存入站点，否则在下次图像插入网页后，应确定图像文件已存入站点，否则在下次打开网页时，会出现看不到图像的情况。打开网页时，会出现看不到图像的情况。3.4图片的插入与属性设置图片的插入与属性设置3设置图像的属性设置图像的属性n图像图像设置的名称n宽、高宽、高可缩小和放大图片的显示尺寸。n源文件源文件图片的路径和名称。n链接链接图像超链接的URL地址。n替代替代图像的说明文字n对齐对齐在一行中图形和文本的对齐方式（图文混排技巧）n
10、地图地图创建热区的工具3.4图片的插入与属性设置图片的插入与属性设置4 图像标签图像标签格式： 属性: src：图片文件所在的位置，URL。绝对路径绝对路径 ：带域名的完整路径带域名的完整路径 例例 srcsrc=“http=“http:/www.w3cn.org/news/:/www.w3cn.org/news/p p. .jpg”jpg” srcsrc=“=“e e:web_design12image:web_design12imageq q.jpg.jpg”相对路径相对路径: : 相对于网页文件（位于相对于网页文件（位于当前目录当前目录）的）的位置位置 当前目录的文件引用方式当前目录的文
11、件引用方式：srcsrc=“*.*” =“*.*” 的下级目录的下级目录：srcsrc=“=“下级目录名下级目录名/*.*” /*.*” 的上一级目录的上一级目录：srcsrc=“=“./ /当前文件夹名当前文件夹名/*.*” /*.*” 基于站点根目录的路径基于站点根目录的路径：以站点的根目录为参考点，用一个斜线：以站点的根目录为参考点，用一个斜线“/ /”表示根目录。表示根目录。( (在在webweb服务器上运行时才能生效服务器上运行时才能生效) ) 根目录的文件引用方式：根目录的文件引用方式： srcsrc =“=“/ /* *.*” .*” 的下级目录：的下级目录： srcsrc=“=
12、“/ /下级目录名下级目录名/ /*.*” *.*” altalt：图片的文字说明，当鼠标指针指向该图图片的文字说明，当鼠标指针指向该图片时，则弹出说明文字。片时，则弹出说明文字。heightheight、widthwidth：设置图片的高度和宽度。设置图片的高度和宽度。alignalign：设置图片的对齐方式。设置图片的对齐方式。3.4图片的插入与属性设置图片的插入与属性设置5 图像占位符图像占位符6 网页背景图片网页背景图片3.4图片的插入与属性设置图片的插入与属性设置7 鼠标经过图像鼠标经过图像观察自动生成的代码！观察自动生成的代码！3.4图片的插入与属性设置图片的插入与属性设置3.5设置网页头部信息设置网页头部信息网页标题建图文混排网页建图文混排网页1效果效果2制作要求制作要求1) 1) 创建本地站点及相关文件及文件夹。创建本地站点及相关文件及文件夹。2) 2) 利用利用photoShopphotoShop图像编辑软件，完成对图片的艺术处理。图像编辑软件，完成对图片的艺术处理。3) 3) 右边的图片具有鼠标经过后翻转成另外一幅图像的效果。右边的图片具有鼠标经过后翻转成另外一幅图像的效果。实实验验1.1.文本、图像的插入及属性设置、文本、图像的插入及属性设置、2.2.图文混排图文混排3.3.HTMLHTML结构、标签结构、标签总总结结
