计算机网络与网页制作 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标题:新大陆商城 <I DOCTYPE html PUBLIC -//W3C//DID XHIML 1.0 Transiti。nal//E" 新大陆商城促销活动 http://www.w3.org/ir/xhtml1/dtd/xhtmll-traNaiTional dtd"> chtmlxmins=http://www.w3.org/1999/xhtml"> 年春天在新大陆商城有特大新闻!我们的商品在不断地更 <head> 新,您可以看到它们是多么地棒。我们会举力很多活动,在这 4<metahttp-equiv="content-type"content="text/htMl; 些活动中,专业的技术人员会为您提供一些免费样品,并为您 charsetaUTF-8"/> 解笞有夭商品和服务的任何问题。每个星期六的下午630 <tite>新大陆商城</ title> 8:30,我们都会举办打折促销活动,欢迎惠颐,它将让您的周 6</head> 末增添不少的乐趣 年春天在新大陆商城有特大新闻!我们的商品在不断地 春季活动 更新,您可以看到它们是多么地棒。我们会举办很多活动, 分>mM格式)标题1 品Cs 茧 链接) events. html. 代码拆分设计刻时代码同实时视图检直..c标题:新大陆商城 <I DOCTYPE html PUBLIC "-//W3C//DID XHIML 1.0 http://www.w3.org/tr/xhtmll/dtd/XhtMll-transitional 断大陆商城促销活动 chtmlxmlns="http://www.w3.01 文本所处的 今年春天在新大陆商城有特大新闻!我们的商品在不断地更 cmetahttp-equivacontent-t 新,您可以看到它们是多么地棒。我们会举办很多活动,在这 HTML标签发 业的技术 您提供一些免费样品,并为您 <tit1e>新大陆商城</ title> 生变化 解答有关商品和服务的任何问题。每个星期六的下午630 8:30,我们都会举办打折促销活动,欢迎患颐,它将让您的周 未增添不少的乐趣 <body. 9日<h1>新大陆商城促销活动</h1> 10<g>今年春天在新大陆商城有持大新闻!我们的商品在不断地 更新,您可以看到它们是多么地棒●我们会举办很多活动, 春季活动
设置文本为特定的页面元素——标题 5 文本所处的 HTML标签发 生变化