《HTML5+CSS3网站设计基础教程》课程教学大纲 （课程英文名称） 课程编号：201601210011 学分：5学分 学时：76学时（其中：讲课学时：47 一、课程的性质与目标 《HTML5+CSS3网站设计基础教程》是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML标记、CSS样式、网页布局、变形与动画等内容，通过本课程的学习，学生能够了解网页web发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果，学会制作各种企业、门户、电商类网站。
二、课程设计理念与思路 课程设计理念：高职教育的集中实践教学环节需明确必要的理论知识的生化与知识层面的拓展，不能局限 于单纯的技能训练。单纯的技能训练不是提高高等职业教育的理想课程。以能力的培养为重点，以就业为导向，培养学生具备职业岗位所需的职业能力，职业生涯发展所需的能力和终身学习的能力，实现一站式教学理念。 课程设计思路：基于工作过程开发课程内容，以行动为导向进行教学内容设计，以学生为主体，以案例 （项目）实训为手段，设计除理论学习与技能掌握相融合的课程内容体系。教学整体设计“以职业技能培养为 目标，以案例（项目）任务实现为载体、理论学习与时间操作相结合”。 开发工具：DreamweaverCS6 第一章初识HTML5
第二章HTML5页面元素及属性
第四章CSS3选择器
e g o o d f o 背景与图片不透明度的设置 √ 设置背景图像平铺√ 设置背景图像的位置√ 设置背景图像固定√设置背景图像的大小√设置背景的显示区域√设置背景图像的裁剪区域√设置多重背景图像√背景复合属性√线性渐变√径向渐变√重复渐变 √ 第七章表单的应用
《HTML+CSS+JavaScript网页制作案例教程》课程教学大纲 （课程英文名称） 课程编号：201509210011 学分：5学分 学时：64学时（其中：讲课学时：45 上机学时： 19 ） 先修课程：计算机基础、计算机网络、计算机应用 后续课程：UI设计、 JavaScript网页特效 适用专业：信息及其计算机相关专业 开课部门：计算机系 一、课程的性质与目标 《HTML+CSS+JavaScript网页制作案例教程)》是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML标记、CSS样式、网页布局、JavaScript 编程基础与事件处理等内容。通过本课程的学习，学生能够了解HTML、CSS及JavaScript语言的发展历史及未来方向，熟悉网页制作流程、掌握常见的网页布局效果、学会制作各种企业、门户、电商类网站。 二、课程的主要内容及基本要求 第一章网页那点事（2学时） [知识点] 认识网页 常见的互联网专业术语 Web标准 HTML简介 CSS简介 JavaScript简介 常用浏览器介绍 Dreamweaver 工具的使用
使用Dreamweaver创建第一个页面 [重点] Web标准 Dreamweaver工具的使用 [难点] Web标准 Dreamweaver工具创建第一个页面 [基本要求] 了解Web标准，明确HTML、CSS及JavaScript在其中的作用。 熟悉Dreamweaver工具的基本操作，能使用Dreamweaver创建简单的网页。第二章从零开始构建HTML页面（4学时） [相关案例] 【案例1】简单的网页： 【案例2】新闻页面： 【案例3】图文混排： [知识点] HTML文档基本格式
常用CSS样式属性|CSS 样式表 【长度单位】 【颜色表示】 CSS可用颜色表示方式 表示方式表示方式说明范例 #rrggbb 可以用Windows色彩选择工具找到color:#feefc7 rgb( #,#,#) 用数字来表示红色蓝色以及绿色的混合色 彩选择工具找...也可以用Windows color:rgb(135,255,1 24) rgb(%,%,%) 用百分比来代表红色蓝色以及绿色的强度来混合颜色color:rgb(70%,35%,4 1%) 颜色名称用颜色的名称来指定颜色color:brown
【属性可用值】 CSS 可用属性值 名称 说明 可能值 范例 visibility 显示或是隐藏 inherit （ 父组件决定） hidden （隐藏） visible （ 显示） visibili ty:hidde n width 宽度 auto （自动决定） 数字 width:13 5 height 高度 auto （自动决定） 数字 height:1 00 z-index Z 轴高度（立体，是否在 另一个组件之上） auto （自动决定） 数字 z-index: 135 position 定位方式 absolute （绝对寻址-依窗口坐标，原点为父窗口左上角 ） relative （相对定位-以一般网页排列［后再根据坐标定位， 原点为定位后的位置） static （静态定位-以一般网页排列） position :absolut e top （对象的position 属 性须为absolute 或 relative ） 对象的Y 坐标（原点根 据postion 属性有所不 同） 数字 left （对象的 position 属性须为absolute 或 relative ） 对象的X 坐标（原点根 据postion 属性有所不 同） 数字
css样式大全(整理版） 字体属性：(font) 大小{font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD 样式{font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常) 行高{line-height: normal;}(正常) 单位：PX、PD、EM 粗细{font-weight: bold;}(粗体) lighter;(细体) normal;(正常) 变体{font-variant: small-caps;}(小型大写字母) normal;(正常) 大小写{text-transform: capitalize;}(首字母大写) uppercase;(大写) lowercase;(小写) none;(无) 修饰{text-decoration: underline;}(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁) 常用字体：(font-family) "Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana 背景属性：(background) 色彩{background-color: #FFFFFF;} 图片{background-image: url();} 重复{background-repeat: no-repeat;} 滚动{background-attachment: fixed;}(固定) scroll;(滚动) 位置{background-position: left;}(水平) top(垂直); 简写方法{background:#000 url(..) repeat fixed left top;} /*简写·这个在阅读代码中经常出现，要认真的研究*/ 区块属性：(Block) /*这个属性第一次认识，要多多研究*/ 字间距{letter-spacing: normal;} 数值/*这个属性似乎有用，多实践下*/ 对齐{text-align: justify;}(两端对齐) left;(左对齐) right;(右对齐) center;(居中) 缩进{text-indent: 数值px;} 垂直对齐{vertical-align: baseline;}(基线) sub;(下标) super;(下标) top; text-top; middle; bottom; text-bottom; 词间距word-spacing: normal; 数值
一CSS文字属性： color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-size : 9pt; /*文字大小*/ font-style:itelic; /*文字斜体*/ font-variant:small-caps; /*小字体*/ letter-spacing : 1pt; /*字间距离*/ line-height : 200%; /*设置行高*/ font-weight:bold; /*文字粗体*/ vertical-align:sub; /*下标字*/ vertical-align:super; /*上标字*/ text-decoration:line-through; /*加删除线*/ text-decoration: overline; /*加顶线*/ text-decoration:underline; /*加下划线*/ text-decoration:none; /*删除链接下划线*/ text-transform : capitalize; /*首字大写*/ text-transform : uppercase; /*英文大写*/ text-transform : lowercase; /*英文小写*/ text-align:right; /*文字右对齐*/ text-align:left; /*文字左对齐*/ text-align:center; /*文字居中对齐*/ text-align:justify; /*文字分散对齐*/ vertical-align属性 vertical-align:top; /*垂直向上对齐*/
层叠样式表（CSS） “层叠样式表”（Cascading Style Sheets,缩写为CSS）是由W3C协会所制定，主要的用途是定义网页数据的编排、显示、格式化及特殊效果，因为HTML提供的、、、 、、等控制标记虽然可以将数据格式化，但能做到的格式化有限，而CSS正好弥补了这个不足。 CSS属于较新技术，故IE3.0版本以上支持，Netscapt Navigator 4.0版以上支持。此外，不同浏览器显示的结果可能有不同。 一、如何链接HTML文件与层叠样式表 它有4种方法： ●在HTML文件的区块嵌入层叠样式表的定义。 ●将层叠样式表定义在单独的文本文件，然后将之导入或链接至 HTML文件。 ●在HTML文件的标签属性style中加入样式定义 ●在HTML文件中套用样式类别。 1．在HTML文件的区块嵌入层叠样式表的定义 伺服網路科技股份有限公司 (02)2711-7555 自定义页面样式 CSS 网页样式大全 字体属性：(font) 大小font-size: x-large;(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD 样式font-style: oblique;(偏斜体) italic;(斜体) normal;(正常) 行高line-height: normal;(正常) 单位：PX、PD、EM 粗细font-weight: bold;(粗体) lighter;(细体) normal;(正常) 变体font-variant: small-caps;(小型大写字母) normal;(正常) 大小写text-transform: capitalize;(首字母大写) uppercase;(大写) lowercase;(小写) none;(无) 修饰text-decoration: underline;(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁) 常用字体：(font-family) "Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana 背景属性：(background) 色彩background-color: #FFFFFF; 图片background-image: url(); 重复background-repeat: no-repeat; 滚动background-attachment: fixed;(固定) scroll;(滚动) 位置background-position: left(水平) top(垂直); 简写方法background:#000 url(..) repeat fixed left top; 区块属性：(Block) 字间距letter-spacing: normal; 数值 对齐text-align: justify;(两端对齐) left;(左对齐) right;(右对齐) center;(居中) 缩进text-indent: 数值px; 垂直对齐vertical-align: baseline;(基线) sub;(下标) super;(下标) top; text-top; middle; bottom; text-bottom; 词间距word-spacing: normal; 数值 空格white-space: pre;(保留) nowrap;(不换行) 显示display:block;(块) inline;(内嵌) list-item;(列表项) run-in;(追加部分) compact;(紧凑) marker;(标记) table; inline-table; table-raw-group; table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格标题) 方框属性：(Box) width:; height:; float:; clear:both; margin:; padding:; 顺序：上右下左 边框属性：(Border) border-style: dotted;(点线) dashed;(虚线) solid; double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷) outset; border-width:; 边框宽度 border-color:#; 简写方法border：width style color; 列表属性：(List-style) 类型list-style-type: disc;(圆点) circle;(圆圈) square;(方块) decimal;(数字) lower-roman;(小罗码数字) upper-roman; lower-alpha; upper-alpha; CSS 背景属性 属性 描述 值 IE F N W3C background 简写属性，作用是将背景属性设置在一个声 明中。 background-color background-image background-repeat background-attach ment background-positi on 4 1 6 1 background-attachment 背景图像是否固定或 者随着页面的其余部 分滚动。 scroll fixed 4 1 6 1 background-color 设置元素的背景颜色。 color-rgb color-hex color-name transparent 4 1 4 1 background-image 把图像设置为背景。 url none 4 1 4 1 background-position 设置背景图像的起始 位置。 top left top center top right center left center center center right bottom left bottom center bottom right x-% y-% x-pos y-pos 4 1 6 1 background-repeat 设置背景图像是否及 如何重复。 repeat repeat-x repeat-y no-repeat 4 1 4 1 CSS 边框属性 (border) border-bottom 简写属性。作用是在一个声明中用来设置下边框 的所有属性。 ? border-bottom-w idth border-style border-color 4 1 6 1 border-bottom-color 设置下边框的颜色。 border-color 4 1 6 2 border-bottom-style 设置下边框的样式。 border-style 4 1 6 2 border-bottom-width 设置下边框的宽度。 thin medium thick length 4 1 4 1 border-color 设置四个边框的颜色，可以设置一到四个颜色。 color 4 1 6 1 border-left 简写属性。用于在一个声明中设置左边框的所有 属性。 border-left-wid th border-style border-color 4 1 6 1 border-left-color 设置左边框的颜色。 border-color 4 1 6 2 border-left-style 设置左边框的样式。 border-style 4 1 6 2 border-left-width 设置左边框的宽度。 thin medium thick length 4 1 4 1 border-right 简写属性。将所有用于右边框的属性设置于一个 声明中。 ? border-right-wi dth border-style border-color 4 1 6 1 border-right-color 设置右边框的颜色 border-color 4 1 6 2 border-right-style 设置右边框的样式 border-style 4 1 6 2 border-right-width 设置右边框的宽度。 thin medium thick length 4 1 4 1 border-style 设置四个边框的样式，可以设置一到四个样式。 none hidden dotted dashed solid 4 1 6 1 CSS的class、id、css文件名的常用 命名 常用的CSS命名规则 头：header 内容：content/container 尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体布局宽度：wrapper 左右中：left right center 登录条：loginbar 标志：logo 广告：banner 页面主体：main 热点：hot 新闻：news 下载：download 子导航：subnav 菜单：menu 子菜单：submenu 搜索：search 友情链接：friendlink 页脚：footer 版权：copyright 滚动：scroll 内容：content 标签页：tab 文章列表：list 提示信息：msg 小技巧：tips 栏目标题：title 加入：joinus 指南：guild 服务：service 注册：regsiter 状态：status 投票：vote 合作伙伴：partner (二)注释的写法: /* Footer */ 内容区 /* End Footer */ (三)id的命名: (1)页面结构 容器: container 页头：header 内容：content/container 页面主体：main 页尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体布局宽度： wrapper 左右中：left right center (2)导航 导航：nav 主导航：mainbav 子导航：subnav 顶导航：topnav 边导航：sidebar 左导航：leftsidebar 右导航：rightsidebar 菜单：menu 子菜单：submenu 标题: title 摘要: summary (3)功能 标志：logo 广告：banner 登陆：login 登录条：loginbar 注册：regsiter 搜索：search 功能区：shop 标题：title 加入：joinus 状态：status 按钮：btn 滚动：scroll 标签页：tab 字体属性：(font) 大小font-size: x-large;(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD 样式font-style: oblique;(偏斜体) italic;(斜体) normal;(正常) 行高line-height: normal;(正常) 单位：PX、PD、EM 粗细font-weight: bold;(粗体) lighter;(细体) normal;(正常) 变体font-variant: small-caps;(小型大写字母) normal;(正常) 大小写text-transform: capitalize;(首字母大写) uppercase;(大写) lowercase;(小写) none;(无) 修饰text-decoration: underline;(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁) 常用字体：(font-family) "Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana 背景属性：(background) 色彩background-color: #FFFFFF; 图片background-image: url(); 重复background-repeat: no-repeat; 滚动background-attachment: fixed;(固定) scroll;(滚动) 位置background-position: left(水平) top(垂直); 简写方法background:#000 url(..) repeat fixed left top; 区块属性：(Block) 字间距letter-spacing: normal; 数值 对刘text-align: justify;(两端对齐) left;(左对齐) right;(右对齐) center;(居中) 缩进text-indent: 数值px; 垂直对齐vertical-align: baseline;(基线) sub;(下标) super;(下标) top; text-top; middle; bottom; text-bottom; 词间距word-spacing: normal; 数值 空格white-space: pre;(保留) nowrap;(不换行) 显示display:block;(块) inline;(内嵌) list-item;(列表项) run-in;(追加部分) compact;(紧凑) marker;(标记) table; inline-table; table-raw-group; table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格标题) 方框属性：(Box) width:; height:; float:; clear:both; margin:; padding:; 顺序：上右下左 边框属性：(Border) border-style: dotted;(点线) dashed;(虚线) solid; double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷) outset; border-width:; 边框宽度 border-color:#; 简写方法border：width style color; 列表属性：(List-style) 类型list-style-type: disc;(圆点) circle;(圆圈) square;(方块) decimal;(数字) lower-roman;(小罗码数字) upper-roman; lower-alpha; upper-alpha; 基于CSS+DIV方式的网页设计的心得体会 现在，计算机和网络已经深入到了我们生活中的方方面面，也已经成了生活中不可缺少的一部分，网络成了我们获取知识和信息的一种便捷工具，现在的网民也在不断的增多，所以，了解和学习网络知识是我们作为一名大学生迫切所需的。我利用这一学期的时间，对网页设计进行了初步的认识和了解。综合网站技术和设计人员的体会，CSS+DIV网站建设具有以下优势和不足，其中CSS网页布局的优点体现在如下方面： 一、使页面载入得更快 由于将大部分页面代码写在了CSS当中，使得页面体积容量变得更小。相对于表格嵌套的方式，DIV+CSS将页面独立成更多的区域，在打开页面的时候，逐层加载。而不像表格嵌套那样将整个页面圈在一个大表格里，使得加载速度很慢。 二、降低流量费用 页面体积变小，浏览速度变快，这就使得对于某些控制主机流量的网站来说是最大的优势了。 三、修改设计时更有效率 由于使用了DIV+CSS制作方法，在修改页面的时候更加容易省时。根据区域内容标记，到CSS里找到相应的ID，使得修改页面的时候更加方便，也不会破坏页面其他部分的布局样式。 四、保持视觉的一致性 DIV+CSS最重要的优势之一：保持视觉的一致性；以往表格嵌套的制作方法，会使得页面与页面，或者区域与区域之间的显示效果会有偏差。而使用DIV+CSS 的制作方法，将所有页面，或所有区域统一用CSS文件控制，就避免了不同区域或不同页面体现出的效果偏差。 五、更好地被搜索引擎收录 由于将大部分的HTML代码和内容样式写入了CSS文件中，这就使得网页中正文部分更为突出明显，便于被搜索引擎采集收录。 六、对浏览者和浏览器更具亲和力 我们都知道网站做出来是给浏览者使用的，对浏览者和浏览器更具亲和力，DIV+CSS在这方面更具优势。由于CSS富含丰富的样式，使页面更加灵活性，它可以根据不同的浏览器，而达到显示效果的统一和不变形。 说了这么多CSS网页布局的优点，同时也不能轻视CSS网页布局的副作用： 一、DIV+CSS尽管不是高不可及，但至少要比表格定位复杂的多，即使对于网站设计高手也很容易出现问题，更不要说初学者了。 二、CSS网站制作的设计元素通常放在1个外部文件中，或几个文件，有可能相当复杂，甚至比较庞大，如果CSS文件调用出现异常，那么整个网站将变得惨不忍睹。 三、虽然说DIV+CSS解决了大部分浏览器兼容问题，但是也有在部分浏览器中使用出现异常，比如火狐浏览器，在IE中显示正常的页面，到了火狐浏览器中可能会面目全非。当然这应该是浏览器的问题，但是可以说在目前来看，DIV+CSS还没有实现所有浏览器的统一兼容。 四、DIV+CSS对搜索引擎优化与否,取决于网页设计的专业水平,而不是DIV+CSS本身。DIV+CSS网页设计并不能保证网页对搜索引擎的优化，甚至不能、
CSS样式表-手实用手册与讲解
建立日期：2006/10 修改日期：2006/10 版 本：1.0
自定义页面样式 1 使用说明： 1 页面结构 2 头部说明 4 主体定制 8 主体背景（跨三栏）设置 左边栏背景设置 8 中间栏背景设置 8 右边栏背景设置 9 底部定制 10 底部背景修改 10 底部文字修改 10 模块定制 11 模块标题修改 11 模块边框修改 12 模块背景修改 12 普通文字修改 12 链接文字修改 13 学校名称修改 13 模块标题文字修改 13 明细页标题文字修改 14 信息陈列标题文字修改 14 简单说明文字修改 分类列表文字修改 页首连接文字修改 小技巧 17 CSS 标签定义对照表 样式结构图 21 Pictures 图文件范例说明 小图示 24 论坛图档 25 完成制作 26 14 15 16 18 24
8
使用说明：
本软件的页面样式设计采用了大量的ＣＳＳ定义， 因此， 本手册仅限于熟悉ＣＳＳ编写规则的专业 网页设计制作人员使用。 当从往站后台下载自定义页面样式文件后，解压缩您可以看到如下所示一些档案：
?
如图所示，在 Example 目录下，有两个文件夹（catalog、style）和一个档案（index.html） 。 catalog 文件夹内存放网页范例内容，供您预览使用，请不要随意更改； style 文件夹包含两个档案（style.css、font.css）以及两个文件夹（images、pictures） ， 更改这些档案将从新设定当前页面样式的显示效果：
o o o
style.css font.css images
主样式表单，包含绝大部分的样式定义； 字型样式表单，简要定义了一些字型与字号大小； 存放样式表单中引用到的图档的文件夹，在样式表单里引用到的所有背景
图都存放在此；
o ?
pictures
是存放样式表单中没有引用、但在页面中引用的图档。
双击"index.html"，开启网页制作范本页面、预览当前所有页面的显示效果； 同样，您对 css 样式的任意修改都可以通过刷新该范例页面来预览。
1CSS 网页样式大全
网页设计中的CSS样式代码详解
css常用class名
css属性大全
基于CSS DIV方式的网页设计的心得体会
相关主题
文本预览