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

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在编辑网页的时候经常会用到，段落标签会在段落前后加上额外的空行。段落标签的格式为：palign=left|center|right文字/p2.1案例：网络花店服务向导页面2.1.3换行标签br/换行标签的格式为：文字br/浏览器解释时，从该处换行。换行标签单独使用，可使页面清晰、整齐。2.1.4水平线标签hr/水平线可以作为段落与段落之间的分隔线，使得文档结构清晰，层次分明。当浏览器解释到HTML文档中的hr/标签时，会在此处换行，并加入一条水平线段。水平线标签的格式为：hralign=left|center|rightsize=横线粗细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．创建锚点创建锚点的语法格式如下：ahref=urltitle=指向链接显示的文字target=窗口名称热点文本/a其中，锚点的名称可以是数字或英文字母，或者两者混合。在同一页面中可以有多个锚点，但名称不能相同。建立链接时，href属性定义了这个链接所指的目标地址，也就是路径。如果要创建一个不链接到其他位置的空超链接，可用“#”代替URL。2.2案例：网络花店购物指南页面——超链接2.2.2超链接的应用2．在不同页面中使用锚点①链接到同一目录内的网页文件，格式为：ahref=目标文件名.htm热点文本/a②链接到下一级目录中的网页文件，格式为：ahref=子目录名/目标文件名.htm热点文本/a③链接到上一级目录中的网页文件，格式为：ahref=../目标文件名.htm热点文本/a④链接到同级目录中的网页文件，格式为：ahref=../子目录名/目标文件名.htm热点文本/a3．指向书签的链接aname=记号名目标文本附近的字符串/a（1）指向页面内书签的链接ahref=#记号名热点文本/a（2）指向其他页面书签的链接ahref=目标文件名.html#记号名热点文本/a即单击“热点文本”，将跳转到目标页面“记号名”开始的网页元素。2.2案例：网络花店购物指南页面——超链接2.2.2超链接的应用4．指向下载文件的链接如果链接到的文件不是HTML文件，则该文件将作为下载文件。指向下载文件的链接格式为：ahref=下载文件名热点文本/a5．指向电子邮件的链接单击指向电子邮件的链接，将打开默认的电子邮件程序，如FoxMail、OutlookExpress等，并自动填写邮件地址。指向电子邮件链接的格式为：ahref=mailto:E-mail地址热点文本/a2.2案例：网络花店购物指南页面——超链接【案例展示】使用图像的基本操作制作网络花店商品明细页面，本例文件2-3.html在浏览器中的显示效果如图2-4所示。2.3案例：网络花店商品明细页面——图像2.3.1网页图像的格式及使用原则1．网页图像的格式网页图像有3种常用格式：GIF、JPEG和PNG。2．网页图像的使用原则（1）高质量的图像因其图像体积过大，不太适合网络传输。一般在网页设计中选择的图像不要超过8KB，如必须选用较大图像时，可先将其分成若干小图像，显示时再通过表格将这些小图像拼合起来。（2）如果在同一文件中多次使用相同的图像时，最好使用相对路径查找该图像。2.3案例：网络花店商品明细页面——图像2.3.2图像标签img图像标签的格式为：imgsrc=图像文件名alt=替代文字title=鼠标悬停提示文字width=图像宽度height=图像高度border=边框宽度hspace=水平方向空白vspace=垂直方向空白align=环绕方式|对齐方式/1．指定图像的替换文本说明有时，由于网络过忙或者用户在图片还没有下载完全就点击了浏览器的停止键，用户不能在浏览器中看到图片，这时替换文本说明就十分有必要了。2.3案例：网络花店商品明细页面——图像2.3.2图像标签img2．调整图像大小在HTML中，通过img标签的属性width和height来调整图像大小，其目的是通过指定图像的高度和宽度加快图像的下载速度。默认情况下，页面中显示的是图像的原始大小。例如，设置玫瑰花图片的宽度和高度。代码如下：imgsrc=images/flower.jpgwidth=124height=1753．指定图像的边框在网页中显示的图像如果没有边框，会显得有些单调，可以通过img标签的border属性为图像添加边框，添加边框后的图像显得更醒目、美观。2.3案例：网络花店商品明细页面——图像2.3.2图像标签img4．图像作为超链接热点图像也可作为超链接热点，单击图像则跳转到被链接的文本或其他文件。格式为：ahref=URLimgsrc=图像文件名//a5．设置网页背景图像背景属性将背景设置为图像。属性值为图片的URL。如果图像尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制。格式为：bodybackground=背景图像路径2.3案例：网络花店商品明细页面——图像2.3.2图像标签img6．指定图像的对齐方式在进行网页制作的时候往往要在网页中的某个位置插入一个小的图片，使文本环绕在图像片的周围。img标签的align属性用来指定图像与周围元素的对齐方式，实现图文混排效果。2.3案例：网络花店商品明细页面——图像【案例展示】使用多种列表技术制作网络花店客服中心页面，本例文件2-4.html在浏览器中的显示效果如图2-9所示。2.4案例：网络花店客服中心页面——列表2.4.1无序列表所谓无序列表就是列表中列表项的前导符号没有一定的次序，而是用黑点、圆圈、方框等一些特殊符号标识。当创建一个无序列表时，主要使用用HTML的ul标签和li标签来标记。其中ul标签标识一个无序列表的开始；li标签标识一个无序列表项。格式为：ultype=符号类型litype=符号类型1第一个列表项litype=符号类型2第二个列表项…/ul2.4案例：网络花店客服中心页面——列表2.4.2有序列表有序列表是一个有特定顺序的列表项的集合。在有序列表中，各个列表项有先后顺序之分，它们之间以编号来标记。使用ol标签可以建立有序列表，表项的标签仍为li。格式为：oltype=符号类型litype=符号类型1表项1litype=符号类型2表项2…/ol2.4案例：网络花店客服中心页面——列表2.4.3定义列表定义列表又称为释义列表或字典列表，定义列表不是带有前导字符的列项目，而是一列实物以及与其相关的解释。当创建一个定义列表时，主要用到3个HTML标签：dl标签、dt和dd标签。格式为：dldt…第一个标题项…/dtdd…对第一个标题项的解释文字…/dddt…第二个标题项…/dt…dd…对第二个标题项的解释文字…/dd/dl2.4案例：网络花店客服中心页面——列表2.4.4嵌套列表嵌套列表可以把页面分为多个层次，给人以很强的层次感。有序列表和无序列表不仅可以自身嵌套，而且彼此可互相嵌套。嵌套方式可分为：无序列表中嵌套无序列表、有序列表中嵌套有序列表、无序列表中嵌套无序列表、在有序列表中嵌套有序列表等方式，读者需要灵活掌握。2.4案例：网络花店客服中心页面——列表【实训展示】使用网页文档的基本排版知识，制作鲜花名片页面，本例文件2-5.html在浏览器中的显示效果如图2-13所示。2.5实训：制作鲜花名片页面1．使用文字与段落的基本排版技术制作如图2-14所示的页面。2．使用图文混排技术制作如图2-15所示的网络花店网银支付简介页面。3．使用锚点链接和电子邮件链接制作如图2-16所示的网页。4．使用嵌套的列表制作如图2-17所示的鲜花分类列表。习题2人有了知识，就会具备各种分析能力，明辨是非的能力。所以我们要勤恳读书，广泛阅读，古人说“书中自有黄金屋。”通过阅读科技书籍，我们能丰富知识，培养逻辑思维能力；通过阅读文学作品，我们能提高文学鉴赏水平，培养文学情趣；通过阅读报刊，我们能增长见识，扩大自己的知识面。有许多书籍还能培养我们的道德情操，给我们巨大的精神力量，鼓舞我们前进。