网页排版CSS教学（一）
第一章ＣＳＳ的基本认识
ＣＳＳ是『Cascading Style Sheets』的简称，中文翻为「串接样式表」，也有人只翻为「样式表」。
ＣＳＳ用以作为网页的排版与风格设计，在所谓的「新式网页」里，ＣＳＳ不容置疑是相当重要的一环。
ＣＳＳ是以既有的基础，用以弥补既存ＨＴＭＬ规格里的不足，也让网页的设计更为灵活。
这份教学文件就要来为您介绍ＣＳＳ的应用罗！在这边并不介绍ＣＳＳ的所有规格，仅就您在网页写作上较常用到，较可能用到的语法部份及应用的方法来为您作介绍。也由於现在两浏览器的相容是渐行渐
远，将贴心地为您注明支援该语法的浏览器。而ＩＥ从3.0开始便支援部份语法了，这点也会为为您注明
的。
各章节的概略介绍
为了您参考与学习上的方便，在这里先为您大略地说明一下这份教学文件各章节所包含的内容吧！让您在参考时有个方向与概念。基本上，前两章著重於概念与基本认知的建立，也就是一些为您做一些札根
的工作；第三章则为您补充在应用与设定上的一些其它方式或特性的说明与介绍。而第四章到第六章则著
重於语法、参数与性质的介绍，也就是真正建立在样式表里面的东东。
第一章ＣＳＳ的基本认识：
就是本章啦！就介绍您一些ＣＳＳ基本概念与认识。
第二章ＣＳＳ的应用方式：
为您介绍ＣＳＳ的基本宣告、应用方法与特性介绍。
第三章ＣＳＳ的应用补充：
为您介绍ＣＳＳ的其它宣告方式、应用与特性介绍。
第四章页面性质的ＣＳＳ：
为您介绍页面性质的ＣＳＳ相关语法、参数与性质。
第五章文字性质的ＣＳＳ：
为您介绍文字性质的ＣＳＳ相关语法、参数与性质。
第六章区块性质的ＣＳＳ：
为您介绍区块性质的ＣＳＳ相关语法、参数与性质。
应用上的基本认识
应用ＣＳＳ并不困难，但是请您先参考这里的基本认识，对一些用语有了一点基本概念後，对於您在看後面的教学会有助益，看起来也才不会太吃力！
一、基本用语的认识：
元件(element)：亦即HTML基本语法中的标签(tag)。
属性(attribute)：用以描述标签特性的属性。
例如：
性质(property)：用以描述元件的特性。相当於HTML基本语法中的属性。
样式(style)：拥有一组或数组的性质，用以描述元件特性。
挑选者(selector)：套用样式的元件。
例如：
H3{ COLOR : BLUE }中，H3为挑选者，COLOR为性质，BLUE为COLOR性质的值。二、基本单位的认识：
有相对单位与绝对单位两种单位表达方式。
相对单位：
『em』：相对於字母高度的比例因子。
『en』：相对於字型大小的比例因子。
『%』：相对於长度单位（通常是目前字型的大小）的百分比例。
绝对单位：
『in』：英寸。
『cm』：公分。
『mm』：公厘。
『px』：像素（系统预设单位）。
『pc』：pica，印刷活字单位。
『pt』：像点。
相对关系：1in= 6pc= 72pt= 2.54cm= 25.4mm
三、颜色使用的认识：
颜色的表示共有五种方式。
『#RRGGBB』：
以三个00到FF的十六进位值分别表示0到255十进位值的红、绿、蓝三原色数值。
『#RGB』：
简略表示法，只用三个0到F的十六进位值分别表示红、绿、蓝三原色数值。而事实上，浏览器会自动扩展为六个十六进位的值，如『#ABC』将变为『#AABBCC』。但是，显见这样的表示法并不精确。
『rgb(R,G,B)』：
以0到255十进位值的红、绿、蓝三原色数值来表示颜色。
『rgb(R%,G%,B%)』：
以红、绿、蓝彼此相对的数值比例来表示颜色，如『rgb(60%,100%,75%)』。
『Color_Name』：
直接以颜色名称来表示颜色，共有141种标准的颜色名称。
四、ＵＲＬ表示法的认识：
ＣＳＳ的ＵＲＬ表示共有五种方式，且都为合法宣告，您可以自行选用。
URL(http://yourweb/path/file_name)
URL('http://yourweb/path/file_name')
URL("")
URL( ')
URL( "" )
有了这些基本认识与概念後，接下来就要来Ｑ0为您介绍ＣＳＳ的应用方法罗！
1．请列出三种TCP/IP网络中所使用的协议，并说明它们哪些类型的终端之间的，例如，网络管理站（SNMP）是用于中央网络管理站和网络之间的。 参考答案： （1）HTTP：超文本传输协议，用于WEB服务器和WEB客户机之间； （2）SMTP：简单邮件传送协议，用于邮件客户机和邮件服务器之间； （3）TELNET：远程登录协议，用于客户机与终端之间。 2．现给出一个网址如下：https://www.doczj.com/doc/b019028679.html,/planetwide/select/selector.html，请你根据所学的URL分析该网址各个部分的含义。 参考答案： //前的http表示访问信息采用的是超文本传输协议，并且文件在WWW服务器上； https://www.doczj.com/doc/b019028679.html,表明了WWW服务器的位置； planetwide/select/selector.html表明最终要访问的文件所在的位置。 3．访问类型即访问信息的链接方式，它决定了文件所在的位置，请问常用的链接方式有哪几种，并举出实例。（列出三种即可） 参考答案： （1）file：如file:\\D:\作业\作业\主页.htm（前面的file:\\一般可省略）就是打开本地D盘下的一个网页；（2）ftp：如ftp:\\https://www.doczj.com/doc/b019028679.html,（此处也可输入IP地址）； （3）http：如https://www.doczj.com/doc/b019028679.html,/； （4）News：news:\\192.168.1.7可以查看IP地址192.168.1.7的可用新闻组； （5）telnet：telnet:\\192.168.1.7就可以运行远程登录IP地址192.168.1.7； 4．我们要进入紫霞的公众网，网址如下：telnet://https://www.doczj.com/doc/b019028679.html,，请你实际操作进入该网站，并列出三种以上进入该TELNET网站的方法。 参考答案： （1）在浏览器中登录：启动INTERNET EXPLORER，在URL地址栏中输入“telnet://https://www.doczj.com/doc/b019028679.html,”；（2）“开始”→“运行”→“输入telnet”→“确定”→在命令行输入“open https://www.doczj.com/doc/b019028679.html,”命令并回车； （3）“开始”→“运行”→“输入cmd”→“确定”→在命令行输入“telnet https://www.doczj.com/doc/b019028679.html,”命令并回车； （4）“开始”→“运行”→“输入c md”→“确定”→在命令行输入“telnet211.157.100.8”命令并回车。 5．如果远程登录失败，请问原因可能是什么？ 参考答案： （1）计算机地址拼写错误（主机名或IP地址错误）； （2）远程计算机暂时不能使用； （3）你所指定的计算机不在Internet上。 6．实践：启动INTERNET EXPLORER浏览器，修改其INTERNET选项，并观察其效果。 您的答案： 答：将https://www.doczj.com/doc/b019028679.html, 设置为INTERNET选项的首页后，只要打开INTERNET EXPLORER 便直接登录到该网站的主页 1．个人网站有哪三种基本风格？ 参考答案： （1）主题图形式； （2）信息发布式； （3）介于两者之间的风格。
《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文档基本格式
网页设计与制作_在线作业_C 最终成绩：90.0 一判断题 1. (5.0 分) FALSE TRUE 知识点： 11.2 编辑矢量对象 用户解答： FALSE 2. (5.0 分) FALSE TRUE 知识点： 12.1 创建和编辑标准文本 用户解答： FALSE 3. 在Fireworks中，图中(b)是对(a) 实施外斜角滤镜的结果。（） (5.0 分) TRUE FALSE 知识点： 13.1 滤镜 用户解答： FALSE 4. 在Fireworks中，“自由变形工具”能够直接对矢量对象执行变形操作，也能对路径上的各个定位点进行操作。（） 在Fireworks中，文字不能设置笔触和填充。（）
(5.0 分) FALSE TRUE 知识点： 13.2 资源——样式、元件、URL 、形状 用户解答： TRUE 5. (5.0 分) FALSE TRUE 知识点： 13.4 优化与导出 用户解答： FALSE 6. (5.0 分) FALSE TRUE 知识点： 15.2.3 绘图工具箱 用户解答： TRUE 7. (5.0 分) FALSE TRUE 在Fireworks 中，元件是用户自己建立的可以重复使用的图形，动画或按钮对象。（ ） 在Fireworks 中，可以同时显示6幅不同优化效果的图像。（ ） Flash 中“墨水瓶工具”（Ink Bottle Tool ）是为矢量色块进行填充的工具。（ ） Flash 中文本必须图形化才能使用滤镜。（ ）
知识点： 16.1.1 文本工具 用户解答： TRUE 8. (5.0 分) TRUE FALSE 知识点： 16.1.2 文本变形及图形化 用户解答： TRUE 二单项选择题 1. (5.0 分) 知识点： 9.5 调整画布或图像 用户解答： 2. (5.0 分) “修改”|“组合路径”|“拆分” “修改”|“组合路径”|“封口” “修改”|“组合路径”|“联合” “修改”|“组合路径”|“接合” 知识点： 11.2 编辑矢量对象 用户解答：“修改”|“组合路径”|“接合” 3. Flash中为了避免丢失字体，应将文字图形化。（） 若需要向下方向扩大Fireworks画布，应在修改Fireworks画布的窗口内，点击（）锚定按钮。在Fireworks中，用“刀子”工具切割路径后，应执行（）命令，将路径封口。
网页设计与制作教程 第一章基础篇 1.INTERNET和WWW INTERNET的功能和应用 1．信息的获取与发布 2．电子邮件 3．网上交际 4．电子商务 5．网络电话 6．网上事务处理 7．远程登陆 8．文件传输 9．电子公告版 10．全球信息网 11．INTERNET的其他应用 WWW简介 1．网页，网页文件和网站 2．HTTP和FTP协议 3．超文本和超链接 4．INTERNET地址 5．域名 6．统一资源定位器（URL） 7．HTML 常见网络浏览器----IE 第二章网站建设概论 （1）信息类网站 （2）交易类网站 （3）有偿信息类网站：101网校、 （4）功能型网站 （5）综合类网站 2.根据网站的性质分类： （1）政府网站 （2）企业网站 （3）商业网站 （4）教育科研机构网站 （5）个人网站 （6）非赢利机构网站 （7）其他类型的网站 3.根据在大型搜索引擎上的设置分类 4.娱乐和休闲类网站；商业与经济类，艺术，人文，健康，医药，政府，政治类，电脑与 网络类，社会和文化，科学与教育类，参考资料类 2.1.2网站建设的步骤 1．制作环境的准备：1）设备：扫描仪，数码相机，打印机2）完善系统环境3）备齐网页开发工具软件，网页制作工具，服务器端程序开发工具及一些实用的辅助工具。。。4。
备齐素材制作和加工软件，包括对图形，动画，刘媒体和声音进行处理的素材制作和加工软件 5）备齐常用的网站发布工具，如FTP文件传输软件 2.网站目标的确定：对象：访问者的类型；主题明确，数据充分。保持目标的简洁 3.网站主题，风格和创痍点的确定 1）主题选材要小而精 2）擅长或感兴趣的内容 ）选题不要太滥：因特网上只有第一，人们记不住第二第三名 2）网站的风格：CI（标志，色彩，字体，标语），版面布局，浏览方式，交互性，文字，语气，内容价值，存在意义，站点荣誉等诸多因素 1）确信风格是建立在有价值的内容上的 2）需要彻底弄清楚站点给人的印象是什么 3）在明确网站印象后，开始努力建立和加强这种印象：1）标志（LOGO）2）色彩3）标准字体4）醒目标准口语5）统一图片处理效果7）使用网站特有的图标；使用自己设计的花边，线条和点；；9）展示网站的荣誉和成功作品10）告诉网友关于个人真实的故事和想法3）网站的创意（准备期，孵化期，启事期，验证期，形成期） 4.网站结构的确立：1）网站结构的确立2）网站目录的设置3）网站链接结构的设置：树状连接结构；星状链接结构3）两种结构的综合 5.网站素材的准备 6.网站制作工具的选择和确定：DREAMWEA VER和FRONTPAGE，PHOTOSHOP，FIREWORKS，动画制作工具：FLASH，COOL 3D；网页特效工具，网页特效精灵，有声有色 7.网站的建设 1）申请E---MAIL帐号 2）申请网页空间：1。打开虎翼网空间申请主页 3）域名注册：对于个人网站，在申请免费网页空间的同时也完成了域名的注册 4）网页制作：先简单后复杂，布局先大后小，制作网页时要多灵活运用软件配备的设计模板，这样可以大大提高制作效率 8。网站的测试（看看有没有问题）和上传（将网站发布到WEB服务器，网页制作工具本身具有FTP功能） 9。网站的宣传和推广（搜索引擎上注册，与别的网站交换链接，运用网络广告） 10.网站的更新和维护：必须不断给它补充新的内容，才能够长期吸引住浏览者 2.1.3 网站设计的原则 1）网站主题不要多于三个：小而精，定位小 2）网站的标准色彩不要超过三种 3）重视网站目录结构的创建（创建目录的原则百度上找出来）：不要将所有文件都存在根目录下，目录层次不超过三层，不要使用过长的目录名，尽量不要使用中文目录名 4）链接层次不要超出三层（便于维护） 5）网页长度应限定在三个整屏以内 6）表格的嵌套层次要控制在三层左右（表格插入表格里） 7）网站导航要清晰 2.优秀网站的五大要素 1）网站内容丰富 2）页面下载速度快（网页简单，不要大量图片）
实验一网页的认识 实验目的 1、掌握利用Internet进行信息游览、搜索，下载网页、图片、文字和文件； 2、利用记事本来编辑HTML文档并浏览； 3、熟悉HTML基本标记的使用。 实验环境 WindowsXP操作系统，内部组成局域网，外连Internet互联网。 实验重点及难点 ◆熟悉HTML的结构、语法。 ◆熟悉HTML基本标记的使用。 实验内容 1、从网上（如网页制作大宝库https://www.doczj.com/doc/b019028679.html,等）下载网页制作时需要的小图片、 动画及flash等网页制作素材。 2、收集你认为比较好的网页并从网页主题、网页内容、结构布局、色彩搭配等方面来分析 网页。 3、通过浏览新浪网站主页分析其网页基本元素，查看其源代码，收藏到收藏夹中，将其设 为主页。 4、制作一个简单的网页sy1-1.html，用记事本编辑，网页标题为“熟悉HTML文档的结构”， 内容为司空曙的《江村即事》，如下图所示。 5、通过附录1的练习熟悉HTML基本标记的使用。（可参考第二章内容）
实验二 Dreamweaver基本操作（一） 实验目的 1、熟悉Dreamweaver的工作环境并了解本地站点的建设和管理； 2、熟悉网页文件的基本操作； 3、熟练掌握在网页文件中文本、图像、超链接的添加和设置。 实验环境 WindowsXP操作系统，Dreamweaver CS3软件，内部组成局域网，外连Internet互联网。实验重点及难点 ◆文字的插入及设置。 ◆图像的插入及设置。 ◆各种超链接的创建。 实验内容 1、使用Dreamweaver建立一个本地站点并命名为“Dreamweaver基本操作”，包含以下几 个文件和文件夹：图片文件夹（images）；音乐文件夹（sound）等。 2、在站点“Dreamweaver基本操作”中新建一个名为sy2-1.html的网页文件，从提供的网 页原始素材中把相关文字复制到该网页文件中，并进行适当的文字设置，结果如下图所示。 3、在站点“Dreamweaver基本操作”中对网页sy2-1.html按如下要求进行编辑并另存为 sy2-2.html，效果如图所示。 ●标题文字大小用
标记； ●作者信息文字大小为24像素，字体为幼圆，颜色为红色； ●古诗文字大小为24像素，字体为隶书，颜色为蓝色； ●在作者信息后加一条水平线，居中，水平线宽度为浏览器的30%，水平线的粗细为20 个像素，颜色为棕色；《HTML5+CSS3网站设计基础教程》课程教学大纲 （课程英文名称） 课程编号：201601210011 学分：5学分 学时：76学时（其中：讲课学时：47 一、课程的性质与目标 《HTML5+CSS3网站设计基础教程》是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML标记、CSS样式、网页布局、变形与动画等内容，通过本课程的学习，学生能够了解网页web发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果，学会制作各种企业、门户、电商类网站。
二、课程设计理念与思路 课程设计理念：高职教育的集中实践教学环节需明确必要的理论知识的生化与知识层面的拓展，不能局限 于单纯的技能训练。单纯的技能训练不是提高高等职业教育的理想课程。以能力的培养为重点，以就业为导向，培养学生具备职业岗位所需的职业能力，职业生涯发展所需的能力和终身学习的能力，实现一站式教学理念。 课程设计思路：基于工作过程开发课程内容，以行动为导向进行教学内容设计，以学生为主体，以案例 （项目）实训为手段，设计除理论学习与技能掌握相融合的课程内容体系。教学整体设计“以职业技能培养为 目标，以案例（项目）任务实现为载体、理论学习与时间操作相结合”。 开发工具：DreamweaverCS6 第一章初识HTML5
第二章HTML5页面元素及属性
第四章CSS3选择器
e g o o d f o 背景与图片不透明度的设置 √ 设置背景图像平铺√ 设置背景图像的位置√ 设置背景图像固定√设置背景图像的大小√设置背景的显示区域√设置背景图像的裁剪区域√设置多重背景图像√背景复合属性√线性渐变√径向渐变√重复渐变 √ 第七章表单的应用
第一章测试 1 【单选题】(2分) ID1的代表性模式是（）。 A. 狄克·凯瑞模式 B. 加涅模式 C. 肯普模式 D. 斯金纳模式 2 【多选题】(2分) 根据现代学校教学活动领域所涉及的主要问题，教学设计可以归纳哪三个层面（）。 A. 单元教学设计 B. 活动教学设计 C. 课堂教学设计 D. 学科课程教学设计
3 【多选题】(2分) 梅瑞尔的成分显示理论认为可以将知识分为行为水平和内容类型两个维度,其中行为维度包括(）。 A. 运用 B. 记忆 C. 发现 D. 知识 4 【单选题】(2分) 1900年（）提出发展一门连接学习理论和教育实践的桥梁，这便是教学系统设计的萌芽。 A. 奥苏贝尔 B. 布鲁纳 C. 杜威 D. 加涅
5 【判断题】(1分) 行为主义学习理论的主要代表人物有：桑代克、华生、斯金纳、加涅。 A. 对 B. 错 6 【判断题】(1分) 古代教育思想家认为学习过程是要强调学习者的主体地位。是“知”、“智”、“能”等因素彼此依赖、相互促进、共同促使学习进步发展的过程；是德业并行，德、才、学、识全面发展的过程。 A. 对 B. 错 第二章测试 1 【单选题】(2分) 在马杰的ABCD表述法中，教学目标最基本的部分是（）。
A. 标准 B. 对象 C. 行为 D. 条件 2 【多选题】(2分) 以下学习结果属于智力技能的是（）。 A. 实验规则 B. 圆的面积计算 C. 化学元素名称 D. 欧姆定律 3 【单选题】(2分) 将教学目标要求的心理操作过程揭示出来的一种内容分析方法称为()。 A.
层级分析法 B. 信息加工分析法 C. 归类分析法 D. 解释模型分析法 4 【多选题】(2分) 在以外部表述法编写教学目标时，应注意的是（）。 A. 教学目标的表述要用教学的结果来表述 B. 教学目标的行为词必须是具体的 C. 教学目标的主体是教师 D. 教学目标的表述可以是内外结合的 5 【多选题】(2分) 在确定教学目标时必须考虑到如下几个方面的因素（）。 A. 学习者的特征
网页设计与制作_在线作业_1 一、单选题 1. 在Fireworks中，修改用钢笔绘制的自由路径的弧度，需使用（）。 ? A. 部分选定工具 ? B. 钢笔 ? C. 重绘路径工具 ? D. 指针工具 2. 在Fireworks中，用“刀子”工具切割路径后，应执行（）命令，将路径封口。? A. “修改”|“组合路径”|“联合” ? B. “修改”|“组合路径”|“拆分” ? C. “修改”|“组合路径”|“封口” ? D. “修改”|“组合路径”|“接合” 3. 若将页面分为3个框架，应保存（）个网页html文件。 ? A. 1 ? B. 2
? C. 3 ? D. 4 4. 在Fireworks中，“自由变形工具”的光标有两种形状，（）。 ? A. 当光标为时，对路径执行“扭曲”操作，当光标为时，对路径执行“拉伸”操作 ? B. 当光标为时，对路径执行“推动”操作，当光标为时，对路径执行“拉伸”操作 ? C. 当光标为时，对路径执行“推动”操作，当光标为时，对路径执行“扭曲”操作 ? D. 当光标为时，对路径执行“推动”操作，当光标为时，对路径执行“拉伸”操作 5. .blue {color: #0000ff}是（）。 ? A. 标签选择符和选择符组 ? B. 包含选择符 ? C. ID选择符 ? D. 类选择符 6. 书写CSS样式时，要把相同属性和值的标签组合起来书写，应使用（）。
? A. ID选择符 ? B. 类选择符 ? C. 标签选择符和选择符组 ? D. 包含选择符 二、多选题 1. Flash的“选择工具”用于选取图形、移动图形和编辑图形。其光标可以是（）。? A. ? B. ? C. ? D. 2. 使用Flash “选择工具”同时选中，则（）。 ? A. 作图或拖动舞台对象时，可以准确地吸附到其他线条上的点。 ? B. 鼠标指针指向对象的中心点，鼠标指针上出现一个小三角 ? C. 作图或拖动舞台对象时，可以准确地吸附到其他图形的中心点。 ? D. 影响绘制形状或位置的微调。 3.
实验一HTML、CSS网页制作实验 一、做出网页1.html，效果如下图所示： 要求如下： 1、诗的题目格式为红色、加粗、居中显示。 2、作者格式为红色、斜体、居右显示。 3、诗的内容字体格式从上到下分别是
四、请做出网页4.html，效果如下图所示。 五、请做出以下网页，效果如下图所示，保存为5.html： 六、请做出网页6.html，效果如下图所示： 要求如下：
1、使用内嵌式引入CSS样式表。 2、使用类选择器定义元素。 （1）通过控制不同的类，分别为第一个字母“G”设置为蓝色、加粗、60px 字体； 第二个字母“o”设置为红色、加粗、60px字体； 第三个字母“o”设置为黄色、加粗、60px字体； 第四个字母“g”设置为蓝色、加粗、60px字体。 （2）剩余字母“le”按默认样式输出。 七、请做出网页7.html，效果如下图所示。 要求如下： 1、设置所有文本为宋体、12像素、绿色字体，“春季”字体颜色设为红色。 2、设置标题“春天”为16像素、红色、加粗、居中、上划线的效果。 3、设置文本首行缩进2个字符。 八、请做出网页8.html，效果如下图所示： 要求如下： 1、设置所有文本为微软雅黑、14像素、黑色字体。 2、新浪”、“新浪网”为红色字体，“博客首页”为蓝色字体，网址及日期为绿色字体。 3、设置标题为16像素、左对齐、下划线的效果。 4、设置文本“-百度快照-评价”为灰色、下划线的效果。
网上教学系统设计与实现 信息技术、网络技术的迅猛发展冲击着现代教育。而校园网络的使用改变着我们的传统 教育理念、教学思想，更为现实的是改变着我们的课堂教学模式。网上教学系统具有平等交互式的学习环境、丰富的信息容量和丰富的表现形式等特点，在线学习方式已经在远程开放教育领域大显身手。基于Web 的远程自主学习模式的教学系统，它包括教师、学生、系统管理员等功能模块，实现了通过Internet 完成教与学的教学模式。学生不仅可以通过教材浏览、习题演练、考试测试和答疑等多种形式完成学习任务，教师也可在相应情况下完成教材内容的组织等教学任务。 为了充分体现交互性，本设计采用了SQL SEVER 数据库和ASP 技术相结合，基于B/S 模式构造该系统。Microsoft ASP(Active Sever Pages)技术是服务器脚本编写环境，使用它可以创建和运行交互的Web 服务器应用程序。使用ASP 组合HTML 页、脚本命令和ActiveX 组件创建交互功能强大的应用程序，具有容易开发和修改，方便远程维护和管理的优点。本文将阐述采用ASP 技术，使用Microsoft 公司的SQL Sever 2000 作为服务器来建立Internet 网上教学系统的设计和实现过程。 一、技术环境 本系统采用B／S(Browser/Server)三层体系结构作为系统的总体结构，由浏览器、Web 服务器和数据库服务器组成，并综合运用HTML 语言、ASP、ActiveX 和数据库等技术，由web Server 统一进行管理和发送，用户通过Web 浏览器以HTML 协议向服务器发出请求，并接受和显示服务器提供的Web 信息。 ASP 技术可以通过ADO(ActiveX Data Object)的Connection、Command 及Recordset 等 对象来读取或修改数据库中的内容。一个典型的ADO 应用使用Connection 对象建立与数据源的连接,然后用一个Command 对象给出对数据库操作的命令,比如查询或者更新数据等,而Recordset 用于对结果集数据进行维护或者浏览等操作。 二、系统分析和设计 网上教学系统的用户主要是学生和教师，以及其他教务管理人员和系统管理员，本系 统不仅针对在校学生的日常学习，而且考虑到远程教育。同时方便系统管理员进行远程系统维护和数据更新，还能满足教学管理人员信息共享的需求。 根据用户和系统功能的区分，本系统的系统结构如下： 按页面子系统功能分类 1）首页：包括系统简介，最新发布教程，系统公告，用户登录。 2）自学教程专区：包括教程浏览，教程分类列表，教程排序，教程检索。在主页的“最新发布教程”中显示的是最新的专题教程，当用户选定教程后即可浏览学习。在教程专区里，用户可以通过检索寻找某一个知识点，列出该知识点相关的页面，从中选择学习的页面。教程专区中学习的教程是公开的，不受用户的合法性限制。 3）学生专区：学生专区提供通过学生注册的学生操作功能，学生专区中包含有：选课，网上考试，网上作业，查询考试成绩，查询作业成绩，发表讨论，自我测试，个人设置这 些栏目。 4）教师专区：教师专区提供通过教师注册的教师操作功能，教师专区中包含有：学生选课验证，课程管理，发布网上自学教程，发布考试试卷，发布作业，查询考试成绩及打印 成绩表，查询作业成绩、答题情况及打印成绩表，发布班级通知，回答学生提问，个人
《网页设计与制作》课程简介 课程名称：网页设计与制作 课程代码：02038 适用专业：初等教育（计算机与信息技术方向） 课程性质：专业核心课程、必修课、专业技能课 学分：3 学分 计划学时：72学时（理论36学时，实训36学时） 一、前言 1. 课程性质 本课程是初等教育计算机与信息技术专业的一门专业技能课程，培养学生网页设计与制作能力，适应初等教育对信息技术教师的人才基本要求，同时满足社会对计算机专业人才的需求，适合从事网站建设相关的岗位。 本课程的先修课程是《计算机应用基础》，后续课程是《https://www.doczj.com/doc/b019028679.html,程序设计》。在完成《计算机应用基础》课程学习后，学生掌握了计算机基本知识和原理，学会了一些应用软件和工具软件的使用，进而学习《网页设计与制作》这门课程不会感到困难。在以后学生还将学习《https://www.doczj.com/doc/b019028679.html,程序设计》课程，能设计和制作动态网页。 2. 课程基本理念 初等教育计算机与信息技术专业培养的对象主要是小学信息技术教师，今后从事小学信息技术教学和学校信息化教育教学的管理者及维护者，建设网站和网页是信息技术教师应掌握的基本技能。课程要理论与实践相结合，培养学生动手能力，能胜任今后小学信息技术教师的工作任务。同时满足社会对计算机专业人才的需求，适合从事网站建设相关的岗位群。 3. 课程设计思路 根据初等教育计算机与信息技术专业人才培养方案，《网页设计与制作》是重要的专业技能课程，是作为小学信息技术教师基本技能训练与考核的项目之一。课程以工作任务来组织内容，以案例驱动贯穿教学过程。由浅入深，最后完成主题网站的开发项目。课程教学中以Dreamweaver的使用为主线，要重视HTML
一、填空题（ 2‘ *5 ） 1、 题干网站由网页构成，并且根据功能的不同，网页又有____和动态网页之分。 知识点编号 题目类型填空题 难度等级简单 权重分值 2 分 答案静态网页 网站由网页构成，网页有静态和动态之分。所谓静态网页是指用户无论何时何地访 答案说明问，网页都会显示固定的信息，除非网页源代码被重新修改上传。静态网页更新不方便，但是访问速度快。而动态网页显示的内容则会随着用户操作和时间的不同而变化，这是因为动态网页可以和服务器数据库进行实时的数据交换。 关键字认识网页 2、 题干Web标准是一系列标准的集合，主要包括结构、_____和____。知识点编号 题目类型填空题 难度等级简单 权重分值 2 分 答案表现和行为 答案说明 Web标准并不是某一个标准，而是一系列标准的集合，主要包括结构（Structure）、表现（ Presentation ）和行为（ Behavior ）三个方面。 关键字Web标准3、 题干HTML中文译为 ________________ ，主要是通过HTML标记对网页中的文本、图片、声音等内容进行描述。 知识点编号 题目类型填空题 难度等级简单 权重分值 2 分 答案超文本标记语言 答案说明 HTML（英文 Hyper Text Markup Language的缩写）中文译为“超文本标记语言”，主要是通过 HTML标记对网页中的文本、图片、声音等内容进行描述。 关键字HTML语言简介 4、 题干HTML语言主要是通过_______________ 对网页中的文本、图片、声音等内容进行描述。知识点编号
题目类型填空题 难度等级简单 权重分值 2 分 答案HTML标记 答案说明HTML中文译为“超文本标记语言”，主要是通过 HTML标记对网页中的文本、图片、声音等内容进行描述。 关键字HTML语言简介 5、 题干在网站建设中， HTML用于搭建页面结构，CSS用于设置页面样式， __________用于为页面添加动态效果。 知识点编号 题目类型填空题 难度等级简单 权重分值 2 分 答案JavaScript 答案说明考察对 JavaScript 的理解 关键字JavaScript 语言简介 二、判断题（ 2‘ *10 ） 1、 题干因为静态网页的访问速度快，所以现在互联网上的大部分网站都是由静态网页组成的。知识点编号 题目类型判断题 难度等级简单 权重分值 2 分 答案错 答案说明 现在互联网上的大部分网站都是由静态网页和动态网页混合组成的，两者各有千秋，用户在开发网站时可根据需求酌情采用。 关键字认识网页 2、 题干网页主要由文字、图像和超链接等元素构成，但是也可以包含音频、视频以及 Flash等。知识点编号 题目类型判断题 难度等级简单 权重分值 2 分 答案对 答案说明 网页主要由文字、图像和超链接等元素构成。当然，除了这些元素，网页中还可以包含音频、视频以及Flash 等。 关键字认识网页
《网页设计与制作》课程教学大纲 课程名称：网页设计与制作 学分及学时： 4 学分总学时72学时，理论36 学时 适用专业：网络工程 开课学期：第四学期 开课部门：计算机与互联网学院 先修课程：计算机文化基础计算机网络 考核要求：考试 使用教材及主要参考书： 向知礼主编：《网页设计与制作》航空工业出版社2017 年 杨松主编：《网页设计案例教程》航空工业出版社2015 年 一·课程性质和任务： 本课程全面地介绍网页制作技术的基本理论和实际应用。全书共 10 章，分为 3 大部分。前 5 章为第 1 部分，主要介绍网页制作的基本理论——HTML，同时穿插介绍Fireworks，Flash， Anfy 等软件在网页制作过程中的应用；第 6 章～第 8 章为第 2 部分，主要介绍网页 制作技术，包括CSS技术、客户端脚本技术(DHTML)以及 XML 技术；第9 章～第 10 章为第3 部分，主要介绍当前最流行的网页制作工具——Dreamweaver ，通过应用实践能够从实际 应用的角度进一步巩固所学知识。 课程内容不但包括各种网页制作技术的基础理论，而且强调网页制作的具体应用，使读者既能打下坚实的理论基础，又能掌握实际的操作技能。 二·课程教学目的与要求 以Dreamweaver 的使用为主线，介绍网页制作的相关技术。使学生理解网页制作的基本 概念和理论 ,掌握站点的建立和网页的设计 ,能用 HTML 语言修改网页 ;掌握网页制作和站点的基本 知识 ;掌握站点的创建和网页的编辑 ;掌握超链接、图像、 CSS样式的使用 ;掌握表格、框 架、表单、多媒体对象的使用 ; 理解行为、模板、库、 CSS布局的概念和使用 ;理解 HTML 语言、 网站的测试与的发布； 要求：教学过程中，须注重学生实践操作能力的培养，采取“面向实践、能力为先”的 教学思路，教学内容应结合当前WEB 技术的发展趋势，把握未来企业级WEB 页面开发的发 展方向，兼顾各行各业的需求变化，力争面向社会，服务于企业“互联网+”战略。
1、单选题 （1）要使单选框或复选框默认为已选定，要在input标签中加（）属性 A、selected B、disabled C、type D、checked （2）要使表单元素（如文本框）在预览时处于不可编辑状态，显灰色，要在input中加（）属性 A、selected B、disabled C、type D、checked （3）下列哪一项表示的不是按钮。（） A．type="submit" B．type="reset" C ．type="image" D．type="button" （4）下面哪一个属性不是文本的标签属性（） A．nbsp;B．align C．color D．face （5）下面哪一项的电子邮件链接是正确的（） A． B．xxx@ C．xxx@com（6）当链接指向下列哪一种文件时，不打开该文件，而是提供给浏览器下载。（） A．ASP B．HTML C．ZIP D．CGI （7）下面说法错误的是( ) A、CSS样式表可以将格式和结构分离 B、CSS样式表可以控制页面的布局 C、CSS样式表可以使许多网页同时更新 D、CSS样式表不能制作体积更小下载更 快的网页 （8）CSS样式表不可能实现( )功能。 A、将格式和结构分离 B、一个CSS文件控制多个网页 C、控制图片的精确位置 D、兼容所有的浏览器 （9）若要在网页中插入样式表,以下用法中，正确的是（）。 A、 B、 C、 D、
网页设计-页面布局篇(Css+Div) >>目录<< 第一步：规划网站，本教程将以图示为例构建网站； 第二步：创建html模板及文件目录等； 第三步：将网站分为五个div，网页基本布局的基础； 第四步：网页布局与div浮动等； 第五步：网页主要框架之外的附加结构的布局与表现； 第六步：页面内的基本文本的样式(css)设置； 第七步：网站头部图标与logo部分的设计； 第八步：页脚信息(版权等)的表现设置； 第九步：导航条的制作(较难)； 第十步：解决各种浏览器之间的兼容性(暂不讨论)
第一步：规划网站，本教程将以图示为例构建网站1.规划网站，本教程将以下图为例构建网站。
其基本布局见下图： 主要由五个部分构成： 1.Main Navigation导航条，具有按钮特效。Width: 760px Height: 50px 2.Header网站头部图标，包含网站的logo和站名。 Width: 760px Height: 150px 3.Content网站的主要内容。Width: 480px Height: Changes depending on content 4.Sidebar边框，一些附加信息。Width: 280px Height: Changes depending on 5.Footer网站底栏，包含版权信息等。Width: 760px Height: 66px 第二步：创建html模板及文件目录等 1.创建html模板。代码如下：
[章节名称]：网页设计入门基础 [课堂类型]：理论■实训□练习■测试□ [学时安排]：2课时 [目的要求] 1.了解网络的基本知识，网页设计的基础知识，网页的分类，动态网页的原理及 技术 2.了解网页的基本构成及最简单的html代码 3.了解网页设计的流程 [重点] 了解网页设计的流程，掌握最基本的网页的构成及最简单的网页html代码 [难点] ； 掌握最基本的网页的构成及最简单的网页html代码 [教法学法] 1.采用教授法进行教学讲解，结合疑难点师生互动交流方式进行。 2. 练习采用学生自主安排，教师给与个别辅导的方式进行。 [参考资料] 《Dreamweaver CS5网页设计与制作——DIV+CSS版》吴丰,丁欣主编 清华大学出版社 《动态网页制作教程》（第二版）刘梅彦徐英慧编著清华大学出版社 [教学过程] 环节一：结合PPT课件的内容，讲解网络和网页的基本知识。了解网页的分类，网页运行的原理，介绍网页设计的工具，动态网页的技术。 ^ 环节二：介绍网页的构成，并对一个网站进行实例分析说明。编写最简单的html 代码。 环节三：了解网页设计的流程 主要有以下几个步骤：
一. 网站规划 二. 素材资源收集 三. 选择开发工具 四. 站点建立与规划 五. 分模块进行网页设计 六. 网页源代码测试与特效添加 七. 申请域名与空间 . 八. 网页源代码上传 九. 定期的维护 环节四：对本节课的内容进行复习，让学生练习html的代码。并进行疑难解答" …
[章节名称]：html基础与应用1 [课堂类型]：理论■实训□练习■测试□ [学时安排]：2课时 [目的要求] 了解html语言的基础知识，结构，掌握html语言设置网页的背景音乐，背景图片，字体的方法。 \ [重点] Html语言设置网页的背景音乐，图片，字体 [难点] Html语言设置网页的方法 [教法学法] 1.采用教授法进行教学讲解，结合疑难点师生互动交流方式进行。 2. 练习采用学生自主安排，教师给与个别辅导的方式进行。 [参考资料] 《Dreamweaver CS5网页设计与制作——DIV+CSS版》吴丰,丁欣主编 清华大学出版社 ： 《动态网页制作教程》（第二版）刘梅彦徐英慧编著清华大学出版社 [教学过程] 环节一：复习网页设计的基础知识，介绍如何利用Dreamweaver开发工具，记事本编辑网页的源程序，介绍网页站点的创建及注意事项。 环节二：讲解html语言的结构，特点，设置网页页面的背景音乐，图片，字体
第九章网络课程与网络教学 一、教学目的 1、使学生理解网络课程和网络教学两个概念； 2、使学生明确开发网络课程的目的意义，懂得网络课程的理论基础、网络课程的构成和网络课程的设计原则； 3、使学生了解网络教学的特点和主要形式； 4、使学生初步具有运用网络课程和网络学习优化教学的意识和能力。 二、教学重点与难点 1、教学重点：网络课程与网络教学的概念、特点与意义 2、教学难点：网络课程开发与网络教学的形式 三、教学的三维目标 1、知识目标：理解网络课程与网络教学的概念、性质 2、意向目标：利用、开发、设计网络课程与网络教学的自觉性、主动性和责任感 3、技能目标：开发网络课程与网络教学的技能 四、教学内容 一、网络课程概述 网络课程是通过网络表现的某门学科的教学内容及实施的教学活动的总和，它包括两个组成部分：按一定的教学目标、教学策略组织起来的教学内容和网络教学支撑环境。 （一）开发网络课程的目的意义 当前，大力开发网络课程具有如下三方面的目的意义。 1、教育信息化建设的需要 发展现代远程教育，构建终身学习体系是教育信息化的一项重要任务。现代远程教育是随着现代信息技术的发展而产生的一种新型教育方式。教育部在“面向21世纪教育振兴行动计划”中决定，实施“现代远程教育工程”。通过该工程的实施，可以有效地发挥现有各种教育资源的优势，符合世界教育发展的潮流。而实施现代远程教育工程，需要开发大量的网络课程。 2、课程教学模式改革的需要 当今世界，科学技术突飞猛进。面对新的形势，我们的教育观念、教育体制、教育结构、教学内容和教学方法相对滞后，因此，必须改革传统的课程教学模式和教学方法，借助多媒体技术和网络通讯技术等，探索新型的课程教学模式和教学方法。 3、创新人才培养的需要 创新人才的培养是实施素质教育的重点，创新人才的特征主要体现在如下几方面：（1）具有创新意识，创新意识即引起某种创造动机所表现的创造意向和愿望。 （2）具有创造性思维，它具有如下的特征：思维方式的求异性；思维状态的主动性；思维结构的灵活性；思维运行的综合性；思维进程的突发性；思维表达的新颖性。 （3）具有创造能力，学生的创造能力需要具有如下基础：良好的思想素质；扎实的文化知识；一定水平的信息能力。 创新人才的培养，必须依靠现代技术手段的应用，而网上教学具有学习资源丰富、学生
信息工程学院 毕业论文（设计） 网络课程学习网站系统的设计与实现 专业： 班级： 姓名： 学号： 指导教师： 2017 年 3 月 23 日
网络课程学习网站系统的设计与实现 网络课程学习网站系统的设计与实现 信息工程学院信息与计算科学专业 2012032636 张XXX 指导教师：XX 【摘要】目前各个高校中，计算机专业课程具有知识体系更新较快，目的性强的特点。随着时代的进步与发展，高校逐渐将提升学生动手能力及创新能力等综合素质作为首要任务。当前时代的进步导致各行各业都积极利用计算机、网络等技术提升自身竞争力，同样高校教学也不例外，当今已是数字信息时代，所以利用计算机多媒体进行教学势在必行。但是当前的实际情况确实，虽然各个高校积极利用电脑多媒体，但教学的内容却不落俗套，只是简单的教材搬家而已，老师只是将课本内容转移到电脑上，利用幻灯片的方式进行教学，这种方式与传统的书本教学实质确实一样的，并没有进行实质的创新。此种简单的搬家式教学并没有实现以学生为中心，还是从教师的角度进行教学，忽视了以学生为主体，忽视了培养学生的动手能力和创新意识等综合素质。根据当前这种情况，结合当前高校这样嫁接式教学的弊端，制定出一种集成网络课程教学网站系统与教学管理等系统的高校教学信息化整体解决方案。利用教学信息化的理念，结合实际的技术理论，提出了一整套创新型的信息化教学方案，系统采用PHP技术实现，并利用轻型快速的MYSQL数据库为数据源，采用开源的apache为服务器进行系统的实现。 【关键词】毕业论文；毕业设计；教学；高校；信息化
Computer courses teaching support website—Student subsystem design and implementation Information Engineering School of information and Computing Science 2012032636 XXX Instructor: XX 【Abstract】At present, the curriculum of computer science has the characteristics of quick updating of knowledge system and strong purpose. With the progress and development of the times, colleges and universities gradually improve the overall quality of students' practical ability and innovation ability as the primary task. The current era of progress in all walks of life are actively using computer and network technology to enhance the competitiveness of their own, the same teaching is no exception, now is the era of digital information, so the use of computer multimedia teaching is imperative. But the current situation, although various colleges and universities actively using computer multimedia teaching, but the content is simply moving materials conform to no conventional pattern, only, the teacher just transferred to the computer on the contents of the textbooks, teaching the use of slide ways, this book teaching essence and the traditional did the same, and no substantive innovation. This simple move teaching did not realize the student-centered teaching, or from the perspective of teachers, ignore the student-centered, ignore the cultivation of students' practical ability and innovative consciousness and comprehensive quality. According to the current situation, combined with the disadvantages of the current college teaching of grafting, we have developed an integrated solution for the integration of network teaching website system and teaching management system. The use of information technology teaching concept, combining theory with practice, put forward a set of innovative teaching scheme, system uses PHP technology, and the use of light and fast MYSQL database as the data source, using open-source Apache server system. 【Key Words】Graduation design; Graduation thesis; teaching; colleges and universities; informatization