CSS入门
在了解XHTML代码规范后，我们就要进行CSS布局。首先先介绍一些CSS的入门知识。如果你已经很熟悉了，可以跳过这一节
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。
1.基本语法规范
分析一个典型CSS的语句：
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
?其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式；
?样式声明写在一对大括号"{}"中；
?COLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"
分隔；
?"#FF0000"和"#FFFFFF"是属性的值(value)。
2.颜色值
颜色值可以用RGB值写，例如：color : rgb(255,0,0)，也可以用十六进制写，就象上面例子color:#FF0000。如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。
3.定义字体
web标准推荐如下字体定义方法：
b ody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
?字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，；
?Lucida Grande字体适合Mac OS X；
?Verdana字体适合所有的Windows系统；
?Lucida适合UNIX用户
?"宋体"适合中文简体用户;
?如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;
4.群选择器
当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，： p, td, li { font-size : 12px ; }
5.派生选择器
可以使用派生选择器给一个元素里的子元素定义样式，例如这样：
li strong { font-style : italic; font-weight : normal；}
就是给li下面的子元素strong定义一个斜体不加粗的样式。
6.id选择器
用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层
< div id="menubar">< /div>
然后在样式表里这样定义：
#menubar { MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
id选择器也同样支持派生，例如：
#menubar p { text-align : right; margin-top : 10px; }
这个方法主要用来定义层和那些比较复杂，有多个派生的元素。
6.类别选择器
在CSS里用一个点开头表示类别选择器定义，例如：
.14px {color : #f60 ;font-si ze:14px ;}
在页面中，用class="类别名"的方法调用：
< span class="14px">14px大小的字体
这个方法比较简单灵活，可以随时根据页面需要新建和删除。
7.定义链接的样式
CSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：
a:link {font-weight : bold ;text-decoration : none ;color : #c00 ;}
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;} a:active {font-weight : bold ;text-decoration : none ;col or : #F90 ;}
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。呵呵，看了这么多，有点头晕吧，实际上CSS的语法规范还有很多，这里列的只是一些常用的，毕竟我们是循序渐进，不可能一口吃成胖子:)
1．请列出三种TCP/IP网络中所使用的协议，并说明它们哪些类型的终端之间的，例如，网络管理站（SNMP）是用于中央网络管理站和网络之间的。 参考答案： （1）HTTP：超文本传输协议，用于WEB服务器和WEB客户机之间； （2）SMTP：简单邮件传送协议，用于邮件客户机和邮件服务器之间； （3）TELNET：远程登录协议，用于客户机与终端之间。 2．现给出一个网址如下：https://www.doczj.com/doc/2816349624.html,/planetwide/select/selector.html，请你根据所学的URL分析该网址各个部分的含义。 参考答案： //前的http表示访问信息采用的是超文本传输协议，并且文件在WWW服务器上； https://www.doczj.com/doc/2816349624.html,表明了WWW服务器的位置； planetwide/select/selector.html表明最终要访问的文件所在的位置。 3．访问类型即访问信息的链接方式，它决定了文件所在的位置，请问常用的链接方式有哪几种，并举出实例。（列出三种即可） 参考答案： （1）file：如file:\\D:\作业\作业\主页.htm（前面的file:\\一般可省略）就是打开本地D盘下的一个网页；（2）ftp：如ftp:\\https://www.doczj.com/doc/2816349624.html,（此处也可输入IP地址）； （3）http：如https://www.doczj.com/doc/2816349624.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/2816349624.html,，请你实际操作进入该网站，并列出三种以上进入该TELNET网站的方法。 参考答案： （1）在浏览器中登录：启动INTERNET EXPLORER，在URL地址栏中输入“telnet://https://www.doczj.com/doc/2816349624.html,”；（2）“开始”→“运行”→“输入telnet”→“确定”→在命令行输入“open https://www.doczj.com/doc/2816349624.html,”命令并回车； （3）“开始”→“运行”→“输入cmd”→“确定”→在命令行输入“telnet https://www.doczj.com/doc/2816349624.html,”命令并回车； （4）“开始”→“运行”→“输入c md”→“确定”→在命令行输入“telnet211.157.100.8”命令并回车。 5．如果远程登录失败，请问原因可能是什么？ 参考答案： （1）计算机地址拼写错误（主机名或IP地址错误）； （2）远程计算机暂时不能使用； （3）你所指定的计算机不在Internet上。 6．实践：启动INTERNET EXPLORER浏览器，修改其INTERNET选项，并观察其效果。 您的答案： 答：将https://www.doczj.com/doc/2816349624.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文档基本格式
《网页基础制作》课程标准 1.前言 1.1.课程的性质 本课程是中等职业学校计算机应用专业网页设计与制作门化放 向的一门专业基础核心课程。其功能在于培养学生具备从事网页设 计与制作的基本职业能力，使学生达到相应的网页设计制作人员能 力的基本要求。 1.2.设计思路 本课程标准的设计以计算机应用专业学生的就业为导向，邀请 行业专家对计算机应用专业所涵盖的职业群进行任务和职业能力分析，以此为依据确定本课程的工作模块和课程内容，本课程以任务 引领型为框架，把课程按递进方式设计成项目，并以项目为单元足 迹教学，使学生由浅入深，以点到面全面掌握网页设计与制作的职 业技能。 2.课程目标 通过任务引领型和项目活动形式，使学生熟练制作简单网页， 能熟练创建本地站点并能对网页进行各种找链接，能制作网页动画，掌握网页设计与制作技巧，具备网页设计与制作的基本职业能力， 能基本胜任网页制作工作，为学生发展专门化方向的职业能力奠定 基础。 职业能力目标：（1）能熟练制作简单网页 （2）能创建本地站点并能对网页进行各种超链接 (3) 能对网页进行创意的美化
(4) 能制作有创意的网页动画 (5) 能掌握网页设计与制作相关技巧 (6) 能跟踪和学习网页制作的新知识和新技术3.课程内容与要求
4.实施建议 4.1.教材编写 （1）教材要以岗位职业能力分析和职业技能考证为指导，以 《网页制作基础》课程标准为依据进行编写； （2）教材要以岗位任务引领，以工作项目为主线，强调理论与 实践相结合，按活动项目组织编写内容；教材内容从“任务”着手，设计完成“任务”的方法与步骤的空间；教材要体现以解决实际问 题来带动理论的学习和应用软件的操作，让学生在完成“任务”的 过程中掌握知识和技能，培养学生提出问题、分析问题、解决问题 的综合能力。任务的设置应该体现针对性、综合性和实践性。 （3）项目教学任务的设计，应该体现中等职业教育的特征和与 社会实际的联系。所设计的“任务”是学生毕业后就业上岗就能遇 到并解决的问题，而不是围绕着知识和技能的展开而设置的。
网页设计与制作_在线作业_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/2816349624.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 个像素，颜色为棕色；《新闻网页设计》课程标准 一、课程性质与任务 （一）课程性质 本课程是2016级艺术系新闻专业的一门专业课程。通过本课程的学习，要求学生掌握新闻网页设计的基本概念，学会使用常用的网页设计工具和常用脚本语言，能够设计制作常见的新闻页面，包括静态和动态网页，具备网站的建立和维护能力。同时通过本课程的学习，培养学生的综合职业能力、创新精神和良好的职业道德。 （二）课程主要任务 本课程的设计“以能力为本位、以职业实践为主线、以项目课程为主体”，整个《网页设计与制作》课程共分为五大模块，它们分别是：新闻网页基础知识、DreamWeaver的使用、HTML语言、JavaScript脚本语言。教学时各模块既有独立性，又有关联性。独立性是指各模块设计案例、组织教学、突出重点时应该相互独立，学生应该一个模块一个模块地掌握其知识点；关联性是指各模块间存在相互关系，在重难点设计上应该加以配合，如HTML语言模块着重基本代码的熟记和编写，对于较难编写代码的“框架”、“层”、“数据链接”等内容则放到DreamWeaver的使用模块中重点介绍。 （三）与相关课程的关系 《网页设计与制作》课程与计算机基础、Flash动画、PhotoShop图像处理、计算机网络技术、数据库等课程互相联系、互相补充。本课程作为新闻专业的一门技术专业课程，一般在3年级开设，此时学生已经具备一定的新闻基础知识和多媒体操作的动手能力，能较快地掌握网页设计的各种知识，并运用所学知识做出具有特色的网站，使学生能够得到全面的培养，成为社会所需专用人才。 二、课程目标 总目标：使学生掌握常用的网页设计工具，熟练运用多种网页设计技术，具备Web网页设计、制作及站点管理的基本知识和基本技能，学生能够独立制作中小型的网站。 （一）能力目标： 1. 会使用Dreamweaver网页设计工具制作网页； 2. 理解HTML语言中的标记设置颜色、文本格式和列表； 3. 熟练掌握颜色值的配置和背景图案的设置方法，熟练掌握字符、链接颜色的设置方 法； 4. 熟练掌握网页设计中字符格式的设置方法，段落分段与换行的方法； 5. 掌握HTML的语法结构，掌握HTML语言中标记的使用方法； 6. 掌握在网页中添加CSS的方法。掌握三种添加样式信息的方法，会使用CSS设置网 页格式和列表的格式； 7. 掌握在网页中嵌入图像的方法，掌握与嵌入图像相关标记的用法； 8. 掌握与图像布局和位置相关的标记的概念和用法； 9. 熟练掌握使用绝对和相对URL，创建超链接、图像链接；学会图像映射的建立方法； 10.熟练掌握表格的使用方法，会用表格布局并设计网页；
《HTML5+CSS3网站设计基础教程》课程教学大纲 （课程英文名称） 课程编号：201601210011 学分：5学分 学时：76学时（其中：讲课学时：47 一、课程的性质与目标 《HTML5+CSS3网站设计基础教程》是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML标记、CSS样式、网页布局、变形与动画等内容，通过本课程的学习，学生能够了解网页web发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果，学会制作各种企业、门户、电商类网站。
二、课程设计理念与思路 课程设计理念：高职教育的集中实践教学环节需明确必要的理论知识的生化与知识层面的拓展，不能局限 于单纯的技能训练。单纯的技能训练不是提高高等职业教育的理想课程。以能力的培养为重点，以就业为导向，培养学生具备职业岗位所需的职业能力，职业生涯发展所需的能力和终身学习的能力，实现一站式教学理念。 课程设计思路：基于工作过程开发课程内容，以行动为导向进行教学内容设计，以学生为主体，以案例 （项目）实训为手段，设计除理论学习与技能掌握相融合的课程内容体系。教学整体设计“以职业技能培养为 目标，以案例（项目）任务实现为载体、理论学习与时间操作相结合”。 开发工具：DreamweaverCS6 第一章初识HTML5
第二章HTML5页面元素及属性
第四章CSS3选择器
e g o o d f o 背景与图片不透明度的设置 √ 设置背景图像平铺√ 设置背景图像的位置√ 设置背景图像固定√设置背景图像的大小√设置背景的显示区域√设置背景图像的裁剪区域√设置多重背景图像√背景复合属性√线性渐变√径向渐变√重复渐变 √ 第七章表单的应用
《网页设计与制作》课程标准 前言： 《网页设计与制作》是理实一体化课程，是计算机专业（软件与信息服务、数字媒体、计算机应用专业）的一门重要的专业必修课。本课程定位于WEB技术开发工作岗位。它是WEB前端技术开发的必备课程，在整个课程体系中具有重要的作用， 一、课程的说明： 通过本课程的学习，使学生了解网页设计技术的起源和发展、常用的网页制作软件及HTML语言，掌握运用Dreamweaver（以下简称DW）网页制作软件制作网页的方法，通过运用Photoshop图像处理软件和Flash动画制作软件，三个软件互相配合，完成网页设计与制作任务的方法。为今后从事网页设计与制作、网站开发和管理奠定基础。在网页设计的实践中重点培养团队协作、沟通交流能力，培养自主学习能力和探索创新能力。 二、课程内容与基本要求： 该课程涉及的知识是网页设计人员必备的基本技能，职业活动与课程内容的对应关系如下：
三、教学目标 1、职业关键能力目标 (1) 掌握使用Photoshop进行图像处理的基本方法及操作技能 (2) 掌握DreamweaverCS5的基本知识及操作技能 (3) 掌握建立与管理站点的方法 (4) 掌握制作主要内容为文本的网页的方法 (5) 掌握在网页中插入与编辑图像的方法 (6) 掌握在网页中插入多媒体元素的方法 (7) 掌握表格处理与网页布局的方法 (8) 掌握创建超级链接的方法 (9) 掌握使用框架制作旅游网站的方法 (10) 掌握创建和使用模板的方法 (11) 掌握创建和使用库的方法 (12) 掌握在网页中添加AP Div的方法 (13) 掌握在网页中使用行为的方法 (14) 掌握HTML基础知识及通过代码修饰网页的方法 (15) 掌握使用CSS样式表修饰网页的方法 (16) 掌握动态网页的概念及简单动态网页的制作方法 2、职业专门能力目标 (1) 通过完成相关的项目，掌握网页设计的基本工作流程。 (2) 通过完成相关的项目，掌握网页设计常用工具的使用方法。 (3) 通过完成相关的项目，掌握网页布局及美化的基本方法。 (4) 通过完成相关的项目，掌握简单网页交互的制作方法。 3、方法能力目标 形成一定的学习能力、沟通与团队的协作能力，形成良好的思考问题、分析问题和解决问题的能力，养成良好的职业素养。遵守国家关于软件与信息技术的相关法律法规，形成关键性的软件开发与应用的能力。 四、教学内容 第一章网页制作基础知识（4学时） 教学目标： 网页与网站基本概念、网页基本组成元素、常用网页制作软件 主要教学内容：
广西玉林高级技工学校 《网页制作与设计》课程标准 一、课程基本信息 二、课程性质 本课程是中职计算机术专业的一门主干专业课程。通过本课程的学习，要求学生掌握网页设计的基本概念，学会使用常用的网页设计工具和常用脚本语言，能够设计制作常见的静态和动态网页，具备网站的建立和维护能力。同时通过本课程的学习，培养学生的综合职业能力、创新精神和良好的职业道德。 三、设计思路 本课程标准的总体设计思路：以计算机专业学生的就业为导向，根据行业专家对计算机网络技术专业所涵盖的岗位群进行的任务和职业能力分析，紧紧围绕完成工作任务的需要来选择课程内容，设定职业能力培养目标；以“工作项目”为主线，创设工作情景；以书本知识的传授变为动手能力的培养为重点，强化学生实践动手能力的培养，以实现职业能力的培养目标。 四、课程目标 1.职业知识目标 1．熟悉HTML 语言的作用和开发环境，能够编写HTML 代码； 2．掌握常用的HTML 标签，能够实现基本的图文信息显示； 3．理解HTML 页面框架的作用，能够针对需求进行框架的设计； 4．掌握各类HTML 表单元素标签，能够进行表单设计；
5．掌握各类HTML 多媒体元素标签，能够进行多媒体页面设计； 6．掌握CSS 样式的基本使用方法，能够应用CSS 样式表美化页面；7．掌握CSS 网页布局的方法，能够结合DIV 标签进行页面布局； 8．掌握JavaScript 的语法基础，能够编写简单的JavaScript 应用程序；9．掌握JavaScript 的函数、内置对象、事件等，能够实现表单的验证；10．掌握DOM 树形结构及其操作方法，能够控制DOM 对象。 2.职业技能目标 1．能独立进行资料收集与整理、具备用户需求的理解能力； 2．能根据项目需求，具备项目页面的设计与实现能力； 3．能根据静态页面设计原则与CSS 技术规范，实现页面美化与布局；4．具有使用JavaScript 技术进行页面事件处理与表单验证的能力； 5．能根据DOM 树形结构，进行页面DOM 的控制； 6．具有综合应用HTML 语言、CSS 样式、JavaScript 脚本进行页面的设计、编码、调试、维护能力。 3.职业素质目标 1．养成善于思考、深入研究的良好自主学习的习惯； 2．通过项目与案例教学，培养学习者的分析问题、解决问题的能力； 3．具有吃苦耐劳、团队协作精神，沟通交流和书面表达能力； 4．通过课外拓展训练，培养学习者的创新意识； 5．具有爱岗敬业、遵守职业道德规范、诚实、守信的高尚品质。 五、课程主要内容与要求
网页设计与制作_在线作业_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、设置文本“-百度快照-评价”为灰色、下划线的效果。
《网页设计与制作》课程标准 课程代码： 502043 参考学时： 90 学分： 4 课程类型：专业课 2015年 1 月编
一、适用专业 计算机应用技术（3年制中职，5年制高职） 二、开课时间 第4学期 三、课程定位 1、课程性质 本课程是计算机应用技术（3年制中职，5年制高职）的专业课程。 2、教学任务 本课程主要以Dreamweaver软件为操作平台，针对职业教育网络技术专业中理论结合实践的特点，以培养高技能应用型人才为目标，重点加强学生的理论基础和训练学生的实际操作能力。在教学知识模块上首先介绍网页的相关知识，学习HTML标记语言，在此基础上深入学习Dreamweaver软件的操作方法以及网页元素在网页中的使用技巧，锻炼学生网页的排版设计能力，最后通过样式表、客户端脚本、服务器行为的学习让学生熟悉并掌握开发简单动态网站的能力。在本课程的实践教学内容中，选取紧密联系实际的项目并进行详细分解，重点培养学生的静态、动态网页制作能力、具备网站的建立和维护能力、独立思考、解决问题以及自主创新的能力。 四、课程培养目标 1、方法能力目标 1)培养学生谦虚、好学的品质； 2)培养学生勤于思考、做事严谨的良好作风； 3)培养学生良好的职业道德； 4)培养学生事物美的观念； 2、社会能力目标 1)培养学生的团队协作精神； 2)培养学生分析问题、解决问题的能力； 3)培养学生勇于创新、敬业乐业的工作作风； 4)培养学生诚实、守信、坚忍不拔的性格。 3、专业能力目标 1)掌握网页设计相关知识、网页元素组成、网页结构、网站开发流程、网页设计与制作工 具； 2)掌握HTML标记语言并能够熟练使用标记元素来书写网页框架；
《网页设计与制作》课程简介 课程名称：网页设计与制作 课程代码：02038 适用专业：初等教育（计算机与信息技术方向） 课程性质：专业核心课程、必修课、专业技能课 学分：3 学分 计划学时：72学时（理论36学时，实训36学时） 一、前言 1. 课程性质 本课程是初等教育计算机与信息技术专业的一门专业技能课程，培养学生网页设计与制作能力，适应初等教育对信息技术教师的人才基本要求，同时满足社会对计算机专业人才的需求，适合从事网站建设相关的岗位。 本课程的先修课程是《计算机应用基础》，后续课程是《https://www.doczj.com/doc/2816349624.html,程序设计》。在完成《计算机应用基础》课程学习后，学生掌握了计算机基本知识和原理，学会了一些应用软件和工具软件的使用，进而学习《网页设计与制作》这门课程不会感到困难。在以后学生还将学习《https://www.doczj.com/doc/2816349624.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 等。 关键字认识网页
课程(项目)教学标准 【专业基础课、专业核心课、专业实践课均需编制课程标准。其他公共必修课、 公共选修课、专业选修课等可不编制课程标准。】 网页设计课程(项目)标准 一、课程性质与任务 《网页设计》是网页制作的一门实用课程，是网络类专业的一门实践性很强的专业基础课。本课程开设的主要目的，是为了适应web技术的飞速发展，让学生掌握网页制作的基本技术，为学生今后在学习、工作中建立网站及制作网页打下基础。通过本课程的学习，使学生了解网站设计制作的全过程，并且熟练掌握《网页设计》制作网页的基本方法和技巧，并能利用《网页设计》提供的强大功能制作出有专业水准的网站，达到知识和技能两方面共同提高。 二、课程教学目标 (一)总体目标 1. 知识目标 (1)Dreamweaver的人一机交互界面的组成与使用方法； (2)创建Web站点的基本方法与步骤； (3)熟悉站点管理器的用途，学会利用站点地图查看、管理各网页之间的超链 接关系； (4)掌握系统属性及网页属性的设置方法，及各设置参数的作用； (5)掌握制作超级链接、E-mail链接、书签等形式的超级链接； (6)掌握使用HTML样式和CSS羊式创建、编辑网页的方法； (7)掌握水平线、日期、图像对象的主要属性与设置方法；
（8）掌握表格的创建、结构调整与美化方法； （9）掌握在网页中创建、修改层和嵌套层的方法； （10）掌握时间线的创建与调整方法； （11）掌握框架结构网页的制作方法； （12）学会利用行为面板设置控制对象的行为； （13）学会通过模板和库元素创建网页的方法； （14）学会使用Dreamweaver中应用表单设计网页的方法； （15）掌握并了解可以在网页中插入Fireworks、HTML电影、Flash电影、ActiveX. 控件等多媒体对象的方法； （16）全面掌握交互式网站的制作方法。 2. 能力目标 （1）了解网页设计与制作内容的规划方法、设计网页布局、站点规化与设计流程，编辑站点、Logo Banner设计思路、动作脚本的用途等基本概念。 （2）掌握制作一个主页的基本流程，具体页面元素的设置方法、设置布局、单元格和表格格式的方法，调整图像的方法等。 （3）熟练掌握网站的链接和导航，创建站点常见元素、网页的发布和调试。 3. 素质目标 （1）有较好的沟通能力。 （2）能很好的理解客户的要求和表达的思想。 （3）能把客户的要求用Dreamweaver软件恰到好处的表现出来，并创建出优秀的网页。 （二）职业资格证书考核目标 职业资格证书：网页设计师。 网页设计师考核目标： 网页设计师是对网页设计制作人员、Web开发人员及网页设计爱好者综合应用网页制作开发工具进行专业、高效Web设计与制作能力的权威认定。 （三）课程学分 学时数：72 学时
《网页设计与制作》课程教学大纲 课程名称：网页设计与制作 学分及学时： 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、