复旦大学：《计算机网络与网页制作》课程PPT教学课件（讲稿）09 添加文本和图像

计算机网络与网页制作 Chapter09:添加文本和图像 复旦大学计算机学院 肖川 xiao@fudan edu cn 1

计算机网络与网页制作 Chapter 09：添加文本和图像 复旦大学计算机学院 肖川 cxiao@fudan.edu.cn 1

目标 *预览页面 *添加文本 *理解样式 *创建超链接 *创建列表 *插入及编辑图像

目标  预览页面  添加文本  理解样式  创建超链接  创建列表  插入及编辑图像 2

效果 日工 在工1 新火胜商城促销活动 的下 今年春天在新大陆坡有特大新闻!我们的品在不断地更新,您可以看到它们是 春季活动 多么地棒,我们会华办恨多活动,在这盐活动中,专业的技术人员会为您提供一 免费样品,并为您标答有关商品和根务的任例问题,每个星期六的 入节 我们都会举办打折促销活动,就氧,它将让您的末墙添不少的乐 美注女性的三八妇女节 春季活动 为忽的曹诺活风至 委人节 活动说明 如某你或为共们购的一名员,么在活动中您将旱形到多的优 活动说明 话活所程供的样品觉费的 如果你成为我们雄的一名会员,那么在活功中您将享受到更多的优 活动所提供的样品是免费的 交后M工高几 → 后工 新大陆商城的商品 新大陆商城的商品 数码相积 数码相机 3

效果 3

1.添加文本 *选中文本,单击“属性”面板的“HTML 按钮或“CSS”按钮 代码分计时代码时视图松直C题大刚 春季活动 浪漫情人节 >M格式吧)(段薯 链接 目标) 页面属性,,[列表项目 活动所握供的样品是免费的 属性圆 目标规则(新Css规则 认字体 编辑规则一cs画板)大小()无 ta(TTe 页面属性灬 4

1. 添加文本  选中文本，单击“属性”面板的“HTML” 按钮或“CSS”按钮 4

设置文本为特定的页面元素—标题 events. html x 代码拆分设计实时代码实时视图检查.、C标题:新大陆商城 chtmlxmins=http://www.w3.org/1999/xhtml"> 年春天在新大陆商城有特大新闻!我们的商品在不断地更 新,您可以看到它们是多么地棒。我们会举力很多活动,在这 4 解笞有夭商品和服务的任何问题。每个星期六的下午630 新大陆商城 8:30,我们都会举办打折促销活动,欢迎惠颐,它将让您的周 6 末增添不少的乐趣 年春天在新大陆商城有特大新闻!我们的商品在不断地 春季活动 更新,您可以看到它们是多么地棒。我们会举办很多活动, 分>mM格式)标题1 品Cs 茧 链接) events. html. 代码拆分设计刻时代码同实时视图检直..c标题:新大陆商城 新大陆商城 生变化 解答有关商品和服务的任何问题。每个星期六的下午630 8:30,我们都会举办打折促销活动,欢迎患颐,它将让您的周 未增添不少的乐趣 新大陆商城促销活动 10今年春天在新大陆商城有持大新闻!我们的商品在不断地 更新,您可以看到它们是多么地棒●我们会举办很多活动, 春季活动

设置文本为特定的页面元素——标题 5 文本所处的 HTML标签发 生变化

设置标题的样式 *在标题文本内单击,再单击“CSS”标签, 从“字体”下拉列表中选择“华文新魏” 默认字体 a. Geneva. sans-serif 字体列表 回定 消 Arial Black, Gadget. sans-serif Palatino Linotype, Book Anti qua, Palatino, serif 选择的字体: T Sum-EztB e, Monaco, monospace 助① 编病辑字体列夫 <>HTML 目标则<颊李体0认导得 编辑规则Cs面板)大小()无 页面属性 6

设置标题的样式  在标题文本内单击，再单击“CSS”标签， 从“字体”下拉列表中选择“华文新魏” 6

新建CSS规则 选择器类型 确定 新建CSS规贝 为Cs规则达择上下文i 标签(重新定义H元素) 选择或输入选择器名称 规则应用于 *光标位于标题内 规则定义 「代码括分设计刻代码民‖时视图检标逝浙大陆城 【仅跟该文挡 帮助一 I DOCTYPE htal PUBLIC -//A Trans1t1。na1//E 叫新建CSS规 新大陆商城促铕话动 3如m则所自动添 年春天在新大陆商城有特大新闻!我们的商品在不断地更 tahttp-equiva"content- 加的内容 您可以看到它们是多么地棒。我们会举办很多活动,在这 免费样品,并为您 解答有关商品和服务的任何问题。每个星期六的下午630 8:30,我们都会举办打折促销活动,欢迎惠颐,它将让您的周 ont-fem1y:·华文新源”; 末增添不少的乐趣 春季活动 关注女性的三八妇女节 为您的春游添风采 并为您解答有关商品和服务的 让您计来常不少的乐趣 欢山枣额,它将 春季活动周未定期折扣促诮 *活动所提供的样品是免费的

新建CSS规则  光标位于标题内 7 新建CSS规 则所自动添 加的内容

修改CSS规则 *光标位于标题内 属性 >mm目标规(M) 字体@)华文新魏 BI==EE 编辑现则[cs画板)大小()无 #9f0 □页面属性 events html* 代码拆分设计实时代码实时视图检查..C标题新大陆高城 今年春天在新大陆商城有特大新闻!我们的商品在不断地更 head> metahttp-equiv=content-type"content="text/hTml: 新,您可以看到它们是多么地棒。我们会举办很多活动,在这 charset=UF-8”/> 些活动中 的技术人员会为您提供一些免费样品,并为您 ie>新大陆商城 830,我们都会举办打折促销活动,欢迎惠顾,它将让您的周 font-am1y:“华文新魏” 春季活动 修改CSS规则自动 到12 关注女性的三八妇女节 16如今年春天在新大陆商城有持大新闻!我们的商品在不断地 更新,您可以看到它们是多么地棒。我们会举办很多活动, 为您的春游添风采

修改CSS规则  光标位于标题内 8 修改CSS规则自动 引发的代码变化

2样式简介 *HTML用标签定义页面元素 *标题1:/h1> *段落:. *列表:和 ■■■■■■ *每种元素有默认格式 CSS为HTML页面元素创建规则或样式命令 *重设页面元素的格式 9

2. 样式简介  HTML用标签定义页面元素  标题1：…  段落：…  列表：和  … …  每种元素有默认格式  CSS为HTML页面元素创建规则或样式命令  重设页面元素的格式 9

新建针对页面元素(段落)的CSs规则 *在段落内单击,再单击“属性”面板的 “Css”按钮,选择字体的“大小” events. htmI* x 新建CSs规则 代码拆分设计实时代码实时视图检查6..C 选择器类型 选择器名称 http-equivacontent-typecontent-"text/htrl 选择或输入择器名称 tite>新大陆商城 择器名称将规则应用于 nt-fami1y:“华文新 不太具体[更具体 新建CSS规则引 选择定义规贝的位置 起的代码变化 (跟该文档) edium 帮助 ar ar ge m目标规新s规则》)·字体0) B 编辑规则s面板)大小()无 页面属性

新建针对页面元素(段落)的CSS规则  在段落内单击，再单击“属性”面板的 “CSS”按钮，选择字体的“大小” 10 新建CSS规则引 起的代码变化