企业网站制作与维护授课笔记.docx

第一章 使用Dreamweaver制作简单网页一、 本章的知识点1、 熟悉网页的基本术语2、 认识、使用Dreamweaver 软件新建站点、添加页面元素二、 重点理论1、 网页：通过任何文本编辑器都可编辑；编写语言为Html；通过浏览器“翻译”成网页的形式打开（本身是一种文本文件，通过添加标记符，告诉浏览器如何显示）2、 网站：由一个个页面（网页）组成的结合体3、 主页：打开网站的第一个页面（首页）4、 域名：浏览网页时输入的地址（需要向国内或者国外的域名组织申请，域名全世界唯一）5、 HTTP：超文本传输协议，传输超文本标记语言6、 FTP：文件传输协议；负责上传和下载文件7、 URL：统一资源定位符；网络中所有的资源都使用统一格式来指定其所在的路径和服务器；网页的Internet位置的URL形式是：http:/8、 Html：超文本标记语言，用来编写网页9、 超链接：将网站中不同页面链接起来（实现一个页面可以跳转到另一个页面）10、发布：将做好的网页上传到网站服务器供用户访问。11、站点：存储所有网站文件的地方。三、实际操作1、新建网站的站点文件2、常用的快捷键：不换行的空格：Ctrl+Shift+空格换行：Sfift+Enter换段：Enter第二章 HTML基本标签（一）一、 本章知识点1、 认识HTML标签的基本结构2、 相关标签的作用及用法二、 重点理论1、 HTML的基本结构表示这个页面是由HTML标记语言编写HTML的头部（声明信息、样式位置等属性，不会显示在浏览器窗口中）HTML的主体部分（包含网页中显示的文本、图像、链接、视频、动画等）必须有HTML标签的结尾2、标签：网页的标题标签，放在之间3、标签：描述网页具体的摘要信息，包括文档内容、类型，字符编码信息等，也放在之间4、上标和下标上标： 用法：22=4 22=4 （把需要上标的具体值放在标签之间）下标： 用法：H2O H2O （把需要下标的具体值放在标签之间）5、转义码：注意：一定要以“；”结尾空格： ； 大于：>； 小于：<； 引号："； 版权号：©；6、行控制标签段落标签： 一个段落的内容 快捷键：Enter换行标签： 在需要换行的操作时直接插入该标签 快捷键：Shift+Enter7、水平线标签： 8、图像标签：用法：第三章 HTML基本标签（二）一、 本章知识点1、 会设置超链接的不同显示方案2、 使用列表的相关标签3、 认识W3C标准二、 重点理论1、 超链接标签的基本用法需要做超链接的对象目标窗口位置的选项：默认值“-self”代表在当前浏览器窗口中打开 “-blank”代表在一个未命名的新的浏览器窗口中打开2、 超链接的三种类型：页面间的链接、锚链接、功能性链接3、 实现本页面的锚链接a、在本页面中定义一个锚标记（咱们需要链接的目标位置命名一个具体的标记名）目标位置b、设置本页的链接到到咱们本页定义的标记位置 当前位置 （#代表链接到本页）4、 实现页面间的锚链接（不同页面）a、 定义目标网页中的一个具体位置的标记名（目标页面操作）具体位置b、 在本页面中设置链接到新网页的具体位置本页面的位置5、 三种列表的标签有序列表 格式： 列表项的内容无序列表 格式：列表的内容定义列表 格式：标题内容对标题内容的定义、描述6、 HTML注释在HTML代码页中添加注释信息，浏览器不会显示已经注释的内容（注释内容主要是给开发人员标记的一种方式）7、 W3C标准要求的WEB页面结构实现内容（结构）和表现（样式）分离HTML内容结构要求语义化8、 XHTML1.0的基本规范a、 标签名和属性名必须小写b、 HTML标签必须关闭c、 属性值必须用引号括起来d、 标签必须正确嵌套e、 必须添加文档类型声明（该声明位于HTML文档的第一行）声明类型有三种：Strict（严格类型） Transitional（过渡类型） Frameset（框架类型）第四章 表格的应用授课笔记一、本章知识点1、认识表格的基本标签2、实现表格的应用重点理论：表格标签的组成：标签，标签，标签。标签：定义的是表格，放在主体标签中标签：定义的是行，放在表格标签中标签：定义的是列，也可以看成是定义的一个单元格，放在行标签中Colspan的作用：实现跨列，用法。注意跨列后一定要删除本行中多余的单元格Rowspan的作用：实现跨行，用法。注意跨行后一定要删除所跨越的行中多余的单元格：表格的标题部分标签的作用：定义表格的表头，一般是表格的第一行数据，效果：以粗体、居中显示标签的作用：报表的页眉，即表格的表头部分标签的作用：报表的数据主体标签的作用：报表的页脚，即对各部分数据进行汇总的部分标签中常用的属性：border（表格边框的宽度）；width（设置表格单元格的宽度，width=“100%”，表示表格随浏览器窗口自动变化，100%代表宽度充满浏览器窗口）表格的嵌套标签的使用方法：直接在标签中间插入标签，表示在单元格中插入新的表格。表格的填充：文字与边框的距离；属性值cellpadding用法 表格的间距属性：单元格与单元格之间的距离，属性值cellspacing，用法 第五章 表单与内嵌框架一、本章知识点1、表单的用法2、内嵌框架的使用二、重点理论1、表单的概念：用来收集客户端相关信息，使网页具有交互功能表单的基本语法：表单的具体元素放在；的具体属性值表示：form action=“表单的提交地址” method=“提交方法”提交方法有两种：get（默认）post（更具安全性）表单元素的基本格式：通过input标签实现元素的类型有：text（文本框） password（密码框） radio（单选按钮）checkbox（复选框） submit提交按钮） reset（重置按钮）file（文件域）通过和标签实现列表框：具体语法： 多行文本框：通过标签实现。 参数：cols=“字符的宽度” rows=“文本域的行数”内嵌框架的使用：第6章 层叠样式表基础一、本章知识点1、CSS样式表的作用2、样式表的基本结构3、样式表的分类及创建二、重点理论1、CSS的概念：即层叠样式表，主要用于布局和美化网页2、CSS的基本结构： 选择器 对象的属性：属性值1；对象的属性2：属性值2； /style3、编写CSS代码：a、推荐全部小写；b、用“/*.*/”添加注释4、样式表的分类：内部样式表（主要适用于当前页，只对当前网页中的元素起作用） 外部样式表（控制网站的整体风格，便于页面之间的样式共享）5、内部样式表：行内样式（在html标签中，直接使用style标签进行设置）嵌入样式（包含在标签中用style标记CSS规则。6、选择器的对比：7、CSS样式表的优先级：（书P174）a）、ID选择器样式表类选择器样式表标签选择器样式表b）、选择器类型相同，按照代码应用顺序，后应用的样式覆盖先应用的样式c）、CSS行内样式在所有样式表中优先级最高8、伪类选择器的作用（书P179页注意啦）9、CSS样式表的八个分类的作用（书P180页）第七章 CSS设置文本、段落样式一、本章知识点1、用CSS设置网页的文本属性2、用CSS设置网页的段落属性二、重点理论1、文本的属性值属性值作用参数（单位）font-family设置文本的字体可以跟（宋体、隶书、楷体等字体属性，一般在最后指定一个“sans-serif”或“serif”，来保证客户端没有该字体集时，仍能访问该网页font-size设置文本字体的大小单位可是px；%（设置大小为所占父标签的百分比0；em9设置大小为父标签的倍数font-weight设置文本字体的粗细Normal ：默认值，标准粗细Bold ：粗体文本Lighter：定义更细的文本参数：100900；400为标准字体；700为粗体font-style设置文本字体的样式Normal：默认值Italic：斜体line-height设置文本的行高，即行间距Normal：合理的行高（默认）还可以用具体的像素设置text-transform设置英文文本大、小写显示Capitalize：每个单词大写字母开头Uppercase：全部大写显示Lowercase：全部小写显示None：标准显示text-decoration设置文本的装饰效果Overline：顶划线Line-through：删除线Underline：下划线None：默认值color设置文本字体的颜色2、文本属性的缩写： font：bold（粗细） 12PX/30px（字体大小/行高）宋体（字体样式）书写过程中用空格隔开具体的属性值3、 段落的属性值：属性值作用参数letter-spacing设置字符间距Word-spacing设置单词间距（对中文设置不生效）vertical-align设置垂直方向对齐方式Top：顶端对齐Bottom：底端对齐Middle：中间对齐text-align设置水平方向对齐方式Left：水平 左对齐Right：水平右对齐Center：水平居中对齐text-indent设置文本首行缩进text-indent：像素设置缩进的像素white-space设置文本是否自动折行Nowrap：在遇到标签前文本不会换行第八章 CSS设置图片、背景效果一、本章知识点1、设置图片边框属性2、设置图片的对齐方式3、设置背景属性二、本章重点理论1、设置边框属性的参数：border （属性值具体包括：样式、颜色、粗细）2、上下左右边框的具体表示：上（top） 下（bottom） 左（left） 右（right）3、属性值：样式（style） 颜色（color） 粗细（width）4、代码的简写：border：样式 颜色 粗细 （4条边框的样式、颜色、粗细完全相同）border-top：样式 颜色 粗细 (上边框的样式、颜色、粗细的简写)border-style：上、右、下、左四条边框的样式分别是什么border-color：border-width：5、设置图片的大小width：设置高度h