网页设计（2) 第2讲 HTML标记、样式、页面布局 2019/4/5 制作人：马秀麟
一、HTML标记 1.HTML文件的基本结构 <HTML 属性=值> </HTML> <HEAD> <META CharSet=> <TITLE> </TITLE> </HEAD> <Body 属性=属性值> <Table 属性> <Tr><Td></Td><Td> </Td> <Td></Td> </Tr> </Table> </Body> </HTML>
一、HTML标记 2.HTML标记 <HTML></Html> <Head></Head> <Title>标题</Title> <Body onLoad=“” > <P>内容</P>——段落行 <br>——换行符 <Div></Div>——层 <Table>——表格
一、HTML标记 2.HTML标记 <Tr> <Td></Td>——单元格 <Img src=“” >——图像 <a href=“” Target= >——超级链接 <Form></Form>——表单 <Input type=Text value= <Input type=button value= <Style> </Style> <marquee>——滚动字幕 width= height= bgcolor= background= >
二、样式问题 1.什么是样式？ 必要性 在网页设计中，通常不直接设计每段字符的格式（字型、字号和字体）。因为一个网站中涉及到的页面很多，而且每个页面内都包含着大量的信息。如果逐段进行字体、字型和字号的设置，其工作量很大。 在网站信息量很大的情况下，这种逐段进行文本格式设置的方式容易导致各个页面的文本格式不一致，影响网站的整体风格。 如果需要同时改变网站中所有页面的文字风格，其工作量是相当巨大的。 2019/4/5 制作人：马秀麟
二、样式问题 样式的定义 在网页设计中，为提高开发效率，人们通常把若干个格式符组织在一起作为整体使用，这个整体通常被赋予一个独立的名称，这就是样式。 所谓样式，就是组织在一起的一组格式，这组格式可以通过样式名称直接作用于文字、表格等页面对象，从而快速地设置它们的显示格式。 2019/4/5 制作人：马秀麟
二、样式问题 样式的存在方式 内联式 级联式 <P style=“样式格式符”> 内嵌式——放在网页内部的<Head>区 <style> </style>标记 样式规则 链接式——以独立的CSS文件方式存在 公共样式文档 共享、统一管理 2019/4/5 制作人：马秀麟
二、样式问题 2.样式的类型 标记选择符样式 类选择符样式 伪类样式 ID样式——针对特定对象定义样式 Body{ font-family:宋体;font-size:30px;} 类选择符样式 p.one{ font-family:黑体;font-size:20px;} .BT{ font-family:黑体;font-size:20px;} 伪类样式 a:link{} a:visited{} a:hover{} a:active{} ID样式——针对特定对象定义样式 2019/4/5 制作人：马秀麟
二、样式问题 常见的样式规则语句 Font-familily:字体 Font-size:字号 Line-height:行高 Text-Indent:首行缩进 Color：颜色 Height:高度 Width:宽度 Position：位置； Margin:外边距 Padding:内边距 2019/4/5 制作人：马秀麟
二、样式问题 3.样式的设计 直接创建内嵌式样式 创建层叠式样式表——CSS文件 直接对页面对象添加格式符，DW会直接创建内嵌式样式； 新建——空白页 新建——示例中的页 窗口——CSS样式，打开样式面板 选择某一样式，右单击，选择【编辑】，可以编辑当前的样式。 文字类型、区块类型等等 2019/4/5 制作人：马秀麟
二、样式问题 创建CSS文件的常见方法 利用普通页面的“页面属性”获得样式码 利用PS的层布局（或普通层布局）获得样式码 新建普通网页 设置页面属性 外观CSS “链接”的外观 “标题”的外观 利用PS的层布局（或普通层布局）获得样式码 新建CSS文件并保存 把普通页面的样式码粘贴过来 把DIV的样式码粘贴过来 新建必要的类样式 2019/4/5 制作人：马秀麟
二、样式问题 4.样式文件示例 观看几种样式文件； “页面属性”中的样式 CSS+DIV布局的思想 Body的样式 超级链接的样式 各级标题的样式 CSS+DIV布局的思想 2019/4/5 制作人：马秀麟
二、样式问题 5.使用CSS样式文件 附加样式表 使用已经定义的样式 【格式】→【CSS样式】→【附加样式表】 利用【属性】面板的【类】来【附加样式表】。 使用已经定义的样式 选中对象 选择一种样式即可 2019/4/5 制作人：马秀麟
三、页面布局综述 1、页面布局技术简介 技术 常见的工具 表格布局 层布局（DIV+CSS布局） 框架布局 Dreamweaver的层布局 注意：浏览器的适用性 框架布局 常见的工具 Dreamweaver的层布局 局限性 以图像处理工具布局——PS布局 优势 2019/4/5 制作人：马秀麟
三、页面布局综述 2、以DW直接布局页面 表格布局的实现 思想 方法 把整个网页看成一张大表格，在单元格中插入内容 插入——表格 利用“设计”视图中的<Table>选定表格 利用“表格”属性设置表格宽度、高度 拆分或者合并单元格 添加表格行 设置单元格的背景 2019/4/5 制作人：马秀麟
三、页面布局综述 以层实现布局 层布局的思想 从层的组织模式来看 分散式布局 各个层不重叠，独立地分散布局 嵌套式布局 建立总层，代表整个页面 各个子层都放在总层内部 从层在网页上的定位看 绝对式 以绝对坐标确定各个层的位置 相对式 利用相对坐标确定各个层的位置 推荐：嵌套+相对式 2019/4/5 制作人：马秀麟
三、页面布局综述 层布局方法之一： 新建HTML文档，立即把网页文件保存到站点中。 利用【窗口】-[AP元素]，打开其层布局面板 利用【插入】-【布局对象】-【AP DIV】，把“层”插入到页面中，然后适当调整其位置、大小。 选中某个层对象，利用属性面板修改“背景”、边框等等。 2019/4/5 制作人：马秀麟
三、页面布局综述 层布局方法之二： 层布局局限性 利用【窗口】-【插入】打开插入面板，然后把【插入】面板修改为【布局】面板，然后选择绘制[AP元素]。 如果使用嵌套式+相对式，最大层设置为相对位置、左右Margin都为0。 层布局局限性 难以构造和谐、过渡协调的页面 受浏览器类型、版本的影响 2019/4/5 制作人：马秀麟
三、页面布局综述 层布局中的几个关键技术 层的几个关键属性 Position——位置 Margin——外边距 Pading——内边距 Background-image:url()——背景图片 (left,top)——左上角坐标 2019/4/5 制作人：马秀麟
三、页面布局综述 层的居中方式 在网页开头，声明网页兼容XHTML1.0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Position=relative Margin-left和Margin-right=auto 单行文本在层内的居中 文本的height与层的height相等。 2019/4/5 制作人：马秀麟