重、难点指导 一、本章节重难点 重点：超链接、DIV+CSS布局排版。 难点：DIV+CSS布局排版。 二、重难点指导 (一)超链接 1.超链接到底是什么？ 我们先来看一个网页： hdol23 999 D器有 两自所商时说线教州后是 Ba公nw ●五r-下5十-Hw 国同世大全 电税国 口教 □都绿的格门姓。小4龙可日的巴折于题小任盘 可的章 白系双引分车观 童项·用是度至 专两队·空明 级可两 是神艺为活 口转魂园体艺商国 日4日州期日至到 公人人两 图添线 s·人风 巴头导军事日候平 口京车量 区江求视服失道 绿单3南 靠车室 层数实十 心厚万球0买两西 洗房两 盘用网 关丽帆 玉理儿·2% 正的物价Q童神天气 型兴克 处能调 中拉线 单1为：通量十车 行 同量 业加州同 当5月 太平年人车 速情同 色体料 大全 满 代有酒 1用店 正题 育博两 规特 图1Hao123导航页面 在这个网页中，我们可以看到有很多类似我用“红色椭圆”圈出 的文字、图片，这些文字、图片用鼠标点击后会打开一个新的其他页 面。我们就把这种能链接到其他页面的行为叫做超级链接。再比如在 网上看新闻时，我们会点击相应的标题来查看更详细的内容，如图2 所示：
重、难点指导 一、本章节重难点 重点：超链接、DIV+CSS 布局排版。 难点：DIV+CSS 布局排版。 二、重难点指导 （一）超链接 1. 超链接到底是什么？ 我们先来看一个网页： 图 1 Hao123 导航页面 在这个网页中，我们可以看到有很多类似我用“红色椭圆”圈出 的文字、图片，这些文字、图片用鼠标点击后会打开一个新的其他页 面。我们就把这种能链接到其他页面的行为叫做超级链接。再比如在 网上看新闻时，我们会点击相应的标题来查看更详细的内容，如图 2 所示：
凰凰团 a口口 ◆C位nwm4an141gI43%0 大也人周大 中D料海 参克编：用好斯“金明此”打造拉济升级饭 习话平：中调卫星导韩系病合作己启动 :例：害 门件3南 七指吉=日 :i 标料：平：学州有“金陆”铜丹程s 县明程5老店率面直围光变器过出相连 有1个5网，属三学同有土年 重：认有网5里m国 州单t工：5从周年1为原 时干过序，中克选草理以为车两象法学有路九上T的面 图2新闻标题超链接示意图 2.超链接如何应用？ 超级链接的语法规则： 显示给浏览者点击的文字 示例： 四川信息职业技术学院 这样我们点击“四川信息职业技术学院”时，浏览器就会打开 www.scitc.com.cn这个网址。 (二)DIV+CSS布局排叛 1.怎么理解DV? DIV就是HTML中将文档内容分割成块的标签元素，如图所示： 四用修息职址技术季院 为物十他法年文节建工温过成种传年二单江年道 营非有道中金营程满香接 考紫康卡参 室图台4玉通有有之生卡出香线9年4 图3DIV应用示例图
图 2 新闻标题超链接示意图 2. 超链接如何应用？ 超级链接的语法规则： 显示给浏览者点击的文字 示例： 四川信息职业技术学院 这样我们点击“四川信息职业技术学院”时，浏览器就会打开 www.scitc.com.cn 这个网址。 （二）DIV+CSS 布局排版 1. 怎么理解 DIV？ DIV 就是 HTML 中将文档内容分割成块的标签元素，如图所示： 图 3 DIV 应用示例图
也可以把DV理解为框容器，犹如我们上课的教室，几千人不 可能都在操场上上课，正确的做法是把学校划分成若干区域，在相应 区域修筑几栋楼，再把每一栋楼拆分成若干层，每一层又拆分成若干 房间，最后把学生编排到各个房间去上课，这样互不干扰，又整齐美 观。 按照这种思路，我们把网页要显示的内容进行分类和区域划分， 用DIV把他们分割开来，再结合CSS技术将其定位到对应位置。 2.怎么理解CSS CSS就是用来修饰、装粉网页元素的代码， 省界出装 四川信息职业技术学院 首页「关于川情「专维报置智生维业「人才改进 人文川值 服系我们 手站 在校学生 学殊首西 在学生 教积层工 不同样式的文字 出友 学生买前法星 学业信息 使历台界通据数利系提鞋学毛隆种学筑料桂君留登健健种可 不同的显示效果 我位学习需斯学分药青实得甲白 图4CSS应用示例 在网页设计时我们可以编写一个CSS文件，让这个网站的所有 页面都调用它，这样我们就可以用最少的代码让整个网站达到一致的 外观样式，不但风格统一，维护起来也更加方便快捷，网站越庞大， 效果感明显
也可以把 DIV 理解为框容器，犹如我们上课的教室，几千人不 可能都在操场上上课，正确的做法是把学校划分成若干区域，在相应 区域修筑几栋楼，再把每一栋楼拆分成若干层，每一层又拆分成若干 房间，最后把学生编排到各个房间去上课，这样互不干扰，又整齐美 观。 按照这种思路，我们把网页要显示的内容进行分类和区域划分， 用 DIV 把他们分割开来，再结合 CSS 技术将其定位到对应位置。 2．怎么理解 CSS CSS 就是用来修饰、装扮网页元素的代码。 图 4 CSS 应用示例 在网页设计时我们可以编写一个 CSS 文件，让这个网站的所有 页面都调用它，这样我们就可以用最少的代码让整个网站达到一致的 外观样式，不但风格统一，维护起来也更加方便快捷，网站越庞大， 效果越明显
CSS的语法规则： 选择器{样式属性1：值1上；样式属性2：值2} CSS有两个重要的组成部分：选择器和属性设置列表 示例： 如果有多个属性 属性 值 用；分隔 h1 color:#ff0000;font-size:14px; 选择器 属性和属性值 属性设置列表 之间用：分隔 用}包围 图5CSS语法规则 应用示例： #my color:#ff0000;font-size:16px; #p1 font-size:13px; #p2{font-size:12px;text-indent:2em; .td1 padding:5px;color:#666666; .td2 padding:5px;color:#ff0000; vid=“my>关于静态网页设计考试的通知 id="p1">各位同学： d=“p2">静态网页设计期末老试安排表如下： 时间： 2011-11-109:30 CSS选择器又包括ml标签选择器、id选择器和cas5s(类)选 择器
CSS 的语法规则： 选择器 { 样式属性 1：值 1; 样式属性 2：值 2….. } CSS 有两个重要的组成部分：选择器和属性设置列表 示例： 图 5 CSS 语法规则 应用示例： CSS 选择器又包括 html 标签选择器、id 选择器和 class（类）选 择器
CSS分类 香是 ◆基于HTML标签的选择器 h2 color:#ft0000;font-size:16px: p text-indent:2em:font-size:12px: 用C1os 进行调用 ◆基于类的选择器 myTitle color:#ff0000;font-size:16px: mySpan text-indent:2em;font-size:12px: ◆基于标签D的选择器 #myTitle color:#ff0000:font-size:16px: #mySpan text-indent:2em:font-size:12px: 其中d选择器和cass选择器是最常用的选择器。想要做好网页 结构，id与clss都是必须熟练掌据的。id选择器就象狙击枪一样， 可以帮助我们精准地定位要想要加载样式的元素：而ss则是侠客 的佩剑，信手拈来更加轻盈灵便，两者的结合能够实现结构良好且表 现丰富的页面
其中 id 选择器和 class 选择器是最常用的选择器。想要做好网页 结构，id 与 class 都是必须熟练掌握的。id 选择器就象狙击枪一样， 可以帮助我们精准地定位要想要加载样式的元素；而 class 则是侠客 的佩剑，信手拈来更加轻盈灵便，两者的结合能够实现结构良好且表 现丰富的页面