HTML5,CSS3,javasript,网页制作,网页设计第2章网页文档编辑.pptVIP

HTML+CSS+JavaScript网页制作 机械工业出版社同名教材 配套电子教案 * * 2.1 案例：网络花店服务向导页面 2.2 案例：网络花店购物指南页面——超链接 2.3 案例：网络花店商品明细页面——图像 2.4 案例：网络花店客服中心页面——列表 2.5 实训：制作鲜花名片页面 第2章 网页文档编辑 【案例展示】页面中使用不同的标题等级显示服务向导、问题和解决方案；使用段落和换行显示问题解答；使用特殊符号实现段落首行缩进；使用水平线实现文本分隔。本例文件2-1.html在浏览器中的显示效果如图2-1所示。 2.1 案例：网络花店服务向导页面 2.1.1 注释标签!--…-- 可以在HTML文档中添加注释，增加代码的可读性，便于以后维护和修改。用户在浏览器中看不见这些注释，只有在用文本编辑器打开文档源代码时才可见。注释标签的格式为： !-- 注释内容 -- 2.1.2 段落标签p…/p 浏览器忽略用户在HTML编辑器中键入的回车符，所以段落标签p…/p在编辑网页的时候经常会用到，段落标签会在段落前后加上额外的空行。段落标签的格式为： p align=left|center|right 文字 /p 2.1 案例：网络花店服务向导页面 2.1.3 换行标签br/ 换行标签的格式为： 文字 br / 浏览器解释时，从该处换行。换行标签单独使用，可使页面清晰、整齐。 2.1.4 水平线标签hr/ 水平线可以作为段落与段落之间的分隔线，使得文档结构清晰，层次分明。当浏览器解释到HTML文档中的hr/标签时，会在此处换行，并加入一条水平线段。 水平线标签的格式为： hr align=left|center|right size=横线粗细 width=横线长度 color=横线色彩 noshade= noshade / 2.1 案例：网络花店服务向导页面 2.1.5 标题标签h#…/h# 在页面中，标题是一段文字内容的核心，所以总是用加强的效果来表示。标题使用h1至h6标签进行定义。h1定义最大的标题，h6定义最小的标题，HTML会自动在标题前后添加一个额外的换行。标题文字标签的格式为： h# align=left|center|right 标题文字 /h# 2.1.6 特殊符号 由于大于号“”和小于号“”等已作为HTML的语法符号，因此，如果要在页面中显示这些特殊符号，就必须使用相应的HTML代码表示，这些特殊符号对应的HTML代码被称为字符实体。 2.1 案例：网络花店服务向导页面 【案例展示】使用页面之间的链接、页内书签链接、下载文件链接和电子邮件链接制作网络花店购物指南页面，本例文件2-2.html在浏览器中的显示效果如图2-2、图2-3所示。 2.2 案例：网络花店购物指南页面——超链接 2.1.1 超链接简介 1．超链接的定义 超链接（hyperlink）是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。 2．超链接的分类 根据超链接目标文件的不同，超链接可分为页面超链接、锚点超链接、电子邮件超接链等；根据超链接单击对象的不同，超链接可分为文字超链接、图像超链接、图像映射等。 2.2 案例：网络花店购物指南页面——超链接 2.1.1 超链接简介 3．路径 （1）绝对路径 绝对路径是包括通信协议名、服务器名、路径及文件名的完全路径。 （2）根目录相对路径 根目录相对路径的根是指本地站点文件夹（根目录），以“/”开头，路径是从当前站点的根目录开始计算。 （3）文档目录相对路径 文档目录相对路径是指包含当前文档所在的文件夹，也就是以当前文档所在的文件夹为基础开始计算路径。 2.2 案例：网络花店购物指南页面——超链接 2.2.2 超链接的应用 1．创建锚点 创建锚点的语法格式如下： a href=url title=指向链接显示的文字 target=窗口名称 热点文本 /a 其中，锚点的名称可以是数字或英文字母，或者两者混合。在同一页面中可以有多个锚点，但名称不能相同。 建立链接时，href属性定义了这个链接所指的目标地址，也就是路径。如果要创建一个不链接到其他位置的空超链接，可用“#”代替URL。 2.2 案例：网络花店购物指南页面——超链接 2.2.2 超链接的应用 2．在不同页面中使用锚点 ① 链接到同一目录内的网页文件，格式为： a href=目标文件名.htm 热点文本 /a ② 链接到下一级目录中的网页文件，格式为： a