网页设计基础教学大纲
《网页设计基础》课程教学大纲
一课程说明
1.课程基本情况
课程名称：网页设计基础
英文名称：Fundamentals of Designing Web Pages
课程编号：2413267
开课专业：计算机科学与技术
开课学期：第3学期
学分/周学时：2/2
课程类型：专业方向选修课
2．课程性质（本课程在该专业的地位作用）
本课程是计算机科学与技术专业的专业基础课。学习网页的布局与美化、及流行的前端技术，为下一步开发企业级的B/S架构的应用打下基础。
3．本课程的教学目的和任务
在掌握计算机网络的基本知识和基本理论的基础上，使学生通过本课程的学习，掌握DreamweaverMX的使用方法，学会使用DreamweaverMX制作Web网页的技术。通过本课程的学习，掌握DreamweaverMX软件的使用方法,能够创建一个企业的电子商务站点，高效的管理Web内容和站点结构；培养具备较强的逻辑思维能力和独立思考能力。
4．本课程与相关课程的关系、教材体系特点及具体要求
这门课程的先修课程为《计算机应用基础》。
5．教学时数及课时分配
二教材及主要参考书
1. 文丰科技,《中文Dreamweaver8网页制作教程与上机实训》, 机械工业, 2008
2. 览众,《Dreamweaver8商业案例精粹》, 电子工业出版社, 2007
3. 黄竣,《Dreamweaver MX精彩效果百例》, 中国水利水电出版社, 2004
三教学方法和教学手段说明
主要使用多媒体教室进行理论讲解和演示制作步骤，布置课后练习让学生提交电子档进行检查。
四成绩考核办法
考试分为平时作业（含课程设计）、半期考试和期末考试三部分组成，比例为20%、20%、60%。评定学期成绩时结合平时出勤情况得出该门课成绩。
五教学内容
第一篇快速入门（理论6学时，实验6学时）
一、教学目的
掌握DreamweaverMX的使用界面中各组成元素的名称与功能；掌握打开与关闭工具窗口的方法；理解站点、网站、网页及网页属性的概念；了解
DreamweaverMX的汉化方法。
掌握创建Web站点的基本方法与步骤；熟悉网页制作过程中所涉及的一些基本概念与常识。了解通过站点管理器规划、创建站点的方法与站点设置参数的意义和设置方法；熟悉站点管理器的用途，学会利用站点地图查看、管理各网页之间的超链接关系；
掌握通过站点管理器发布站点的方法与上传、下载与同步更新站点内容的方法。了解网格、捕捉与辅助设计图片的功能以及打开、关闭与设置其特性的方法；掌握系统属性及网页属性的设置方法，及各设置参数的作用。
了解建立超级链接各目标参数的意义，掌握设置超级链接的方法；掌握制作超级链接、E-mail链接、书签等形式的超级链接；掌握导航条与跳转菜单的特点与用法。
掌握时间线的创建与调整方法；学会通过如何为时间线增加行为等方式来控制时间线的播放效果；掌握利用时间线制作网页动画的方法。
二、教学重点
DreamweaverMX的人—机交互界面的组成与使用方法。
通过一个网页制作示例，比较全面的介绍了Web站点的创建过程，概括的介绍了使用DreamweaverMX制作网页的主要方法。
重点介绍了站点的创建、站点地图的使用以及文件的下载、上传与同步更新。
主要介绍制作网页的一些基本常识，例如：文档的创建、打开与保存，标尺与网格的使用，捕捉与辅助设计图片的应用等。
全面介绍了网页设计中使用的几种超级链接设置的方法与步骤，包括：E-mail,书签，脚本，跳转菜单和导航条的设置方法。
详细介绍了时间线的创建、编辑、行为设置等内容。
三、教学难点
理解站点、网站、网页及网页属性的概念。
站点管理器的使用。
理解属性面板的概念。
理解导航条与跳转菜单
时间线和动态网页的概念。
四、讲授要求
讲解清楚DreamweaverMX的使用界面中各组成元素的名称与功能；掌握打开与关闭工具窗口的方法；使理解站点、网站、网页及网页属性的概念。讲解清楚本片涉及的以下基本概念：站点管理器、理解属性面板、导航条与跳转菜单、时间线和动态网页。
五、讲授要点
1、DreamweaverMX的使用界面中各组成元素的名称与功能；
2、打开与关闭工具窗口的方法；
3、站点、网站、网页及网页属性的概念；
4、DreamweaverMX的汉化方法；
5、页面的基本设置；
6、超链接与导航。
六、实验及实践要求
实验一：快速入门
1、实验项目名称：快速入门
2、实验类型：设计
3、学时分配：6学时
4、每组人数：1人
实验内容及要求：（1）使用DreamweaverMX制作一个简单的主页，（2）要求具备以下网页元素：页面的基本对齐设置、超链接与导航，色彩协调。
第二篇网页布局（理论6学时，实验6学时）
一、教学目的
掌握表格的创建、结构调整与美化方法；熟悉表格与单元格的主要属性及其设置方法；掌握通过表格来进行网页页面的布局方法。
掌握在网页中创建、修改层和嵌套层的方法；掌握层的属性和编辑层属性的方法；掌握移动、删除层的方法。
了解框架网页与普通网页之间的区别与联系；掌握框架网页在创建、选择、设置、存储与应用方面的特点；掌握框架结构网页的制作方法。
二、教学重点
在DreamweaverMX中表格的创建、调整、单元格的编辑与属性设置等操作的方法。层的概念以及层的创建与修改方法。框架网页的特点、框架网页的创建、编辑、保存与应用方法。
三、教学难点
图层的概念与运用。制作动态网页。
四、讲授要求
讲解清楚表格、层和框架三种页面布局方式的应用及它们之间的优缺点比较。
五、讲授要点
1、DreamweaverMX中表格的创建、调整、单元格的编辑与属性设置等操作
2、层的创建与修改方法；
3、框架网页的特点、框架网页的创建、编辑、保存与应用。
六、实验及实践要求
实验二：网页布局
1、实验项目名称：网页布局
2、实验类型：设计
3、学时分配：6学时
4、每组人数：1人
实验内容及要求：（1）使用DreamweaverMX模仿制作一个指定的著名网站的布局方式，（2）要求综合应用层和框架技术，表格方式供选用。
第三篇CSS设计（理论2学时，实验2学时）
一、教学目的
要求重点了解制作网页时的断行方法；掌握使用HTML样式和CSS样式创建、编辑网页的方法。
二、教学重点
本章主要介绍手工设置文本格式的方法，文本的断行与缩进，以及如何利用HTML样式和CSS样式格式化文本的方法。
三、教学难点
使用HTML样式和CSS样式格式化文本。
四、讲授要求
讲解清楚制作网页时的断行方法；掌握使用HTML样式和CSS样式创建、编辑网页的方法。
五、讲授要点
1、制作网页时的断行方法；
2、使用HTML样式和CSS样式创建、编辑网页的方法。
六、实验及实践要求
实验三：使用CSS设计网页
1、实验项目名称：使用CSS设计网页
2、实验类型：设计
3、学时分配：2学时
4、每组人数：1人
实验内容及要求：（1）使用DreamweaverMX修饰和增强Web站点，（2）要求综合使用HTML样式和CSS样式，调整浏览器的文字大小设置不能影响页面的字号。
第四篇行为及组件的应用（理论4学时，实验4学时）
一、教学目的
掌握水平线、日期、图像对象的主要属性与设置方法；掌握图像映像、反转图片对象等的特点、用途及设置方法。
学会使用Dreamweaver 中应用表单设计网页的方法，全面掌握表单的创建、编辑、处理方法，以及各表单对象的功能、特点和用途（包括：复选框、下拉列表、按钮）的特点与使用方法。
二、教学重点
在网页中插入水平线、日期、图片、反转图片的方法，以及如何制作图片映像和设置图形行为。表单的创造、编码、处理方法，以及各种表单对象的特点与
使用方法。
三、教学难点
图片的运用，理解表单、表单域的概念。
四、讲授要求
讲解清楚在网页中插入水平线、日期、图片、反转图片的方法，以及如何制作图片映像和设置图形行为。表单的创造、编码、处理方法，以及各种表单对象的特点与使用方法。
五、讲授要点
1、插入水平线、日期、图片、反转图片的方法；
2、表单的创造、编码、处理方法；
3、各种表单对象的特点与使用方法。
六、实验及实践要求
实验四：行为及组件的应用
1、实验项目名称：行为及组件的应用
2、实验类型：设计
3、学时分配：4学时
4、每组人数：1人
实验内容及要求：（1）使用DreamweaverMX在 Web站点插入水平线、日期、图片、反转图片；（2）使用复选框、下拉列表、按钮。
网页设计实验报告
实验报告 课程名称网络技术基础实验项目TCP/IP协议配置实验仪器计算机 系别 专业 班级/学号 学生姓名 实验日期 成绩 指导教师
实验一 TCP/IP协议配置 一、实验目的（标题黑体小四） 1.熟练掌握模板的用法。 2.掌握CSS的用法。 3.掌握网站发布的方法。 二、实验内容 1. 创建和使用模板。 2. css的创建和使用。 3. 发布网站。 三、实验课时 4课时 四、实验步骤 创建网站 1、创建一个站点，并创建 images 文件夹存放图片。将示例图片拷贝至images 目录下 2、创建 CSS 文件，名称为 style.css，将其保存至 style文件夹。 3、创建模板文件 tpl.dwt，并保存。结果如下： (1) 给 tpl.dwt 附加样式表 style.css。 在 tpl.dwt 的空白处点击鼠标右键，选择“附加样式表”： 选择 style.css 文件： 完成后，在 tpl.dwt 的 head标签里有如下的代码： (2) 设置模板的背景颜色。打开 CSS 面板，为 style.css 新建一条 css 规则。过程如 下：
将背景颜色设为#ff1e70： 在 style.css 生成如下的代码： body { background-color: #ff1e70? } 3) 制作布局。插入一 2 行 2 列的表格。表格的宽度=316+634=950，其他的设置：让表格居中对齐。 (4) 消除表格两边的空隙。展开 CSS 样式表，双击 body： 双击 body后，打开“body的 CSS 规则定义”对话框，按照下面的方式设置：Style.css 的代码变为： body { background-color: #ff1e70? margin: 0px? }
《网页制作教学设计》教案
《网页制作》教学设计 法、说学法、说教学过程、说板书设计。 一、说教材： (一)教材分析：本节内容是省编《信息技术》全一册第六章 网络与INTERNET基础知识第五节的内容(2000年版为第八章第四节内容，2001、2002版教材第六章第五节内容)。虽然在这一节内容在新版教材变更为拓展模块，但针对现在网络快速发展，广大的学生接触，使用INTERNET的机会也大大增加，学生在使用网络获取信息时，更多的是通过浏览网页这一方式，我认为上好这节课是非常必要的，这对学生进一步认识、使用INTERNET更有益处，同时通过网页制作这一过程也利于学生对计算机常用素材的类型有更深入的了解，在一定程度上也起着培养学生运用综合知识能力作用，所以我认为这节课是非常值得我们去研究上好的，考虑这节课的内容及教法、学法的需要，我把这节分为两课时，第一时：学生自学，自练Word制作网页的基本方法；第二课：让学生自己构思创意一个内容丰富，页面美观的网页。 (二)教学目标：根据对教材的分析及学生实际情况，制定如 下的教学目标： (1)知识目标：1、有关网页文件的说明 2、熟悉用Word制作网页的基本方法 3、超级链接是网页实现互相链接的基本方法 (2)能力目标：1、培养学生的自学能力 2、创意构思能力 3、能制作出具有多重链接、多种素材、内容 丰富的网页。 (3)情感目标：1、教育学生正确认识和理解信息技术相关文 化，伦理和社会问题，负责地使用信息技术。 (三)教学的重、难点：根据对教材的分析及网页制作过程中的 实际情况，我认为要出制作内容丰富的网页，关键是要知 道网页间互相链接的方法，所以我把超级链接做为本节的
网页设计-教学大纲
《网页设计》课程教学大纲 一、课程说明： 课程类别：选修课 适用专业：工商管理、电子商务专业、信息管理与信息系统专业和计算机相关专业、艺术设计专业等。 计划学时：60学时（讲课24学时，上机实验36学时） 学分：4 先修课程：计算机基础 执笔： 审阅： 二、课程的教学目的 以培养应用型人才为目标，充分考虑远程教育学生的学习基础和学习特点。简单介绍HTML语言、CSS样式、javascript语言，全面介绍与网页设计制作有关的知识，通过对Web页制作技术和制作工具的学习，使学生对于网页设计中所涉及的相关知识有一个全面的了解。并使学生具有解决一般网页制作问题的能力。掌握运用Dreamweaver CS6网页制作软件制作网页的方法，掌握运用Fireworks CS6、photoshop cs6图像处理软件进行网页中图形制作版式设计及切片的应用。掌握运用flash CS6动画制作软件设计网页中动画的方法，进而掌握将这四个软件互相配合，完成网页设计与制作任务的方法。为今后从事网页设计与制作工作打下基础。 三、课程教学基本要求： 1、课程重点 掌握网页制作三剑客Dreamweaver、Fireworks、flash及photoshop在网页设计过程中的应用，使学生具备网站策划、网页设计与制作、效果图设计与制作等方面的技能，提高学生分析解决问题能力和项目实施能力，注重学生在学习和实践过程中职业素质的养成。通过学习，使学生熟练掌握运用Dreamweaver网页制作软件制作网页，掌握运用Fireworks、Photoshop图形图像处理软件进行网页中图形图像的设计与制作，掌握运用flash动画制作软件设计网页中动画的方法。 2、课程难点 （1）理解HTML语言各种文本格式、字符格式、段落设置、列表、标记的作用； （2）理解CSS样式表中属性单位的作用和意义； （3）理解javascript语言脚本程序的工作方式； （4）深入理解超级链接、图形图像各种功能和应用； （5）深入理解表格、AP Div、框架、表单的作用； （6）深入理解模板、库、行为和脚本的高级应用； （7）理解网站测试的目的和测试方法； （8）深入理解“切片”和“热点”的涵义和应用； （9）深入理解动画的组成“时间轴”、“场景”、“帧”的涵义及各种动画的制作； （10）理解使用图像设计软件进行版式设计的方法。 3、能力培养要求
Web网页设计实验报告
WEB系统开发 综合实验报告 题目红尘客栈网上订房页面 专业计算机科学与技术（信息技术及应用） 班级计信2班 学生蒋波涛 重庆交通大学 2013年
目录 一、设计目的 (3) 二、设计题目 (3) 三、结构设计 (3) 四、技术分析 (4) 五、设计过程 (7) 六、实验心得 (10) 七、实验总结 (11)
一、设计目的 在Internet飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。因此网站建设在Internet 应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。我们当代大学生更是离不开网络给我们带来的好处与便利.但是,我们成天浏览的网站网页到底是如何制作的呢?我想这一点很多同学都没有去深究过.所以,这学期我选择了”web网页设计”这门课, 本课程的设计目的是通过实践使同学们经历网页制作的全过程. 通过设计达到掌握网页设计、制作的技巧。 了解和熟悉网页设计的基础知识和实现技巧。根据题目的要求，给出网页设计方案，可以按要求，利用合适图文素材设计制作符合要求的网页设计作品。 熟练掌握Photoshop cs3、Dreamweaver cs等软件的的操作和应用。增强动手实践能力，进一步加强自身综合素质。学会和团队配合，逐渐培养做一个完整项目的能力。 二、设计题目 《红尘客栈》 三、结构设计 选定主题，确定题目之后，在做整个网站之前对网站进行需求分析。首先，做好需求调研。调研方式主要是上网查阅资料，在图书馆里翻阅相关书籍。 然后，调研结束之后对整个网站进行功能描述，并对网站进行总体规划，接着逐步细化。 我们选做的主题是个人主页，并且选定题目为“红尘客栈”，其目的是做一个简单的网站，介绍酒店概况，提供一定的资讯信息。 四、技术分析 (一)建立布局 在这次的网页设计中用到大量的布局，所以怎么样建立布局是关键。Dreamweaver cs3是大多数人设计网页的称手兵器，也是众多入门者的捷径。特别是其在布局方面的出色表现，更受青睐。大家都知道，没有表格的帮助，很难组织出一个协调合理的页面。 1.点击“ALT+F6”键，进入布局模式，插入布局表格。建立一个大概的布局。 2.使用背景图片：选中该项，按浏览可以插入一幅准备好的图片作为表格的背景，因为图片是以平铺的形式作为表格背景，所以表格大小和图片尺寸都要控制好。 （二）网页中的图像
网页设计——网页设计概述教案
第一讲网页设计概述 使学生对网站及网页有一定的认识，激发学生学习网页设计的兴趣。 【教学内容】 讲解网页设计的相关术语及网站制作的基本流程。 【教学重点】 网页设计中的若干术语。 【教学难点】 理解网页设计中的若干术语。 【教学方式】 讲授式、讨论式、案例分析式。 【教学参考】 1、《网页设计与制作》杨尚森曲宏山贾文峰等著电子工业出版社。 2、《Internet 网页工场》Wittime工作室重庆出版社。 3、《WEB网站设计》Joel Sklar著高等教育出版社。 4、《HTML网页制作教程》材义语编著铁道出版社。 【新课内容】 1.1 WWW和URL 1.1.1 Web的起源 Web是World Wide Web的简称，一般也称之为WWW或3W 1.1.2 Web的特点和结构 Web最大的特点是使用了超文本（Hypertext） WWW采用C/S（客户机/服务器）工作模式 在浏览器和服务器之间应用HTTP（Hyper Text Transfer Protocol，超文本传输协议）作为网络应用层通信协议 1.1.3 URL URL的完整格式 协议://主机名或IP地址：端口号/路径名/文件名
1.2 IE5的使用 Web浏览器是浏览Internet资源的客户端软件 在Windows环境下使用的浏览器主要有Internet Explorer、Netscape Navigator、Mosaic等 1.2.1 IE5的界面 1.2.2 IE5的使用 1.3 网页中所使用的技术 1.3.1 HTML语言和XML语言 1、HTML语言 ?HTML只使用SGML中很小一部分标记 ?HTML语言（Hyper Text Markup Language 超文本标记语言） ?HTML是纯文本的语言，其源代码可以用各种文本编辑工具进行编辑，常用的网页制作软件如FrontPage、Dreamweaver等实际上是自动生成HTML源代码的工具 2、XML语言 XML（eXtensible Markup Language） 1.3.2 动态网页 1.3.3 多媒体技术的应用 1.3.4 Web服务器端程序 1.4 制作网页的基本方法 1.4.1 制作网页的基本步骤 1、确定网页的内容 2、设计网页的组织结构 3、资料的收集与整理 4、选择网页的设计方法 1.4.2 制作网页时要注意的问题 1、网页的标题要简洁，明确。 2、在文本中要使用水平线，以分割不同部分。 3、对重点段落要强调显示。 4、网页中插入的图片要尽量的小。
网页设计教学大纲
网页设计课程教学大纲 课程代码： 课程类型：专业必修课 开课部门：传媒学院 学时：64 / 32 其中实训学时：32 / 15 学分：4 / 2 授课对象：数字媒体、网络技术、播音专业 一、课程的性质和任务 课程性质： 网页设计课程是一门应用性和理论性都很强的课程，是软件技术专业的一门专业课程。随着网络广泛应用，网页设计技术在广大大中专院校得到了普及和推广。网页设计者主要讲叙的是静态网页的制作，它是该专业后继课程动态网页设计的基础课程。 课程任务： 本课程针对网页设计人员的要求，结合高职高专人才培养的特点，精心安排和组织了以实践岗位为中心的内容，通过对本课程的学习，学生能够掌握有关网页设计的技术及其综合应用：如网站规划、页面组织、素材准备等，通过实践训练，能够举一反三，能够将所学知识点与工作技巧融合，为本专业学生将来成为“职场精英”打下坚实的基础，本课程侧重于实际的软件开发，加强实践环节，提高网页设计能力，使学生适应当前的计算机网络流行趋势。 二、相关课程的衔接 前导课程：计算机应用基础、计算机网络技术、图像处理等。 后续课程：网页动画、网站建设。 三、教学基本要求 1．熟练掌握网页设计软件Dream weaver 的基本操作和使用技能 2．掌握HTML基本代码 3．熟练掌握在网页中运用各种媒体元素 4．熟练掌握网页页面布局的各种方法 5．熟练掌握DIV+CSS盒子模型的含义以及应用 7．掌握如何利用CSS对文本、列表、表单进行控制的方法 8．掌握网页特效的制作方法
9．掌握网站测试与发布的方法 四、教学方法与重点、难点 教学方法：讲授法、演示法、案例分析法、分组讨论法 重点：HTML语言基础、css样式、DIV+CSS盒子模型、网页元素的应用。 难点：HTML语言基础、css样式、DIV+CSS对文本、图片、列表和表单的控制。五、教学时数分配（共计64学时，32学时只上选上部分） 注：32课时不上选上 六、课程考核 本课程经申请改革课程考核方式，目前已经获批准。考核过程由形成性考核和终结性考核相结合完成。 即期末最终成绩=形成性成绩（30%）+期末作品（70%） （一）形成性考核 形成性考核成绩占学期总成绩的30%。成绩以百分制计算，本课程形成性考核由考
简单网页制作实验总结报告
《大学计算机基础》 实验报告 专业名称: 电子商务2班 学号: xxxxxxxxxxx 姓名: x x 指导教师: x x 2011年12月24日
目录 第一章网站主题设计说明 (1) 1.1 主题内容 (1) 1.2 设计思路 (1) 第二章网站内容设计 (2) 1.1 链接1标题 (2) 1.2 链接2标题 (2) 1.3 flash制作说明 (2) 第三章网站技术难点 (3) 第四章心得体会..................................... ..... ......................... (4)
第一章网站主题设计说明 1.1 主题内容 (1) 网站主题为“四季の花”，包括春夏秋冬四个季节的比较典型的花朵及有关花的诗句，色彩缤纷，十分艳丽夺目。 1.2 设计思路 (2) 大多网站都设计的关于音乐，影视，购物等非常热门的东西，本站设计的主题是花，能让人们在闲下来的时候看看花，品品诗歌，所以做有关花的网页是个不错的选择。同时，让人们分清楚春夏秋冬都各有什么典型的花。
第二章网站内容设计 1.1链接1标题：春の花 春天是生命的季节，在这个季节里，万物复苏。所以就找了虞美人，桃花，牡丹，以及海棠花来作为春天的代表。同时配有与这些花有关的诗句。 1.2 链接2标题：夏の花 夏天充满了激情与阳光，我找了兰花，荷花，百合花等来代表这个季节，色彩艳丽，十分醒目夺人。 1.3 链接3标题：秋の花 大丽花，菊花，月季和牡丹花都竞相出现在本网页，色彩缤纷，赏心悦目。 1.4 链接4标题：冬の花 蝴蝶兰，水仙，迎春花，梅花是冬季的代表，他们刻画了一副傲立冬天的坚强的姿态。
《HTML5+CSS3网站设计基础教程》_教学大纲
《HTML5+CSS3网站设计基础教程》课程教学大纲 （课程英文名称） 课程编号：201601210011 学分：5学分 学时：76学时（其中：讲课学时：47 一、课程的性质与目标 《HTML5+CSS3网站设计基础教程》是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML标记、CSS样式、网页布局、变形与动画等内容，通过本课程的学习，学生能够了解网页web发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果，学会制作各种企业、门户、电商类网站。
二、课程设计理念与思路 课程设计理念：高职教育的集中实践教学环节需明确必要的理论知识的生化与知识层面的拓展，不能局限 于单纯的技能训练。单纯的技能训练不是提高高等职业教育的理想课程。以能力的培养为重点，以就业为导向，培养学生具备职业岗位所需的职业能力，职业生涯发展所需的能力和终身学习的能力，实现一站式教学理念。 课程设计思路：基于工作过程开发课程内容，以行动为导向进行教学内容设计，以学生为主体，以案例 （项目）实训为手段，设计除理论学习与技能掌握相融合的课程内容体系。教学整体设计“以职业技能培养为 目标，以案例（项目）任务实现为载体、理论学习与时间操作相结合”。 开发工具：DreamweaverCS6 第一章初识HTML5
第二章HTML5页面元素及属性
第四章CSS3选择器
e g o o d f o 背景与图片不透明度的设置 √ 设置背景图像平铺√ 设置背景图像的位置√ 设置背景图像固定√设置背景图像的大小√设置背景的显示区域√设置背景图像的裁剪区域√设置多重背景图像√背景复合属性√线性渐变√径向渐变√重复渐变 √ 第七章表单的应用
网页设计与布局教案.docx
《HTML+CSS 网页设计与布局》课程教案 授课教师：授课班级：地点：周课时： 5 课时网页设计基础知识 章节内容 教学目标重点难点教学Dreamweaver软件介绍及其基础操作 HTML 基础知识及常用标记 1)使学生了解网页设计的相关基础知识； 2)使学生熟悉 Dreamweaver 软件界面的基本操作方法。 1)了解网页设计相关概念和网页的类型； 2)熟练掌握 Dreamweaver 软件创建和管理站点的方法。课堂讲授、案例讲解与指导 方法 教学 计算机机房 环境 时间 教学过程及内容提要备注分配 一、引入 约 15 分钟 教 1 、相互认识，提出与本学科相关的知识，介绍本门课程情况、教学内 学 容及总学时数进度安排，宣讲本课程教学纪律，鼓励学生营造一种 过 学习氛围，尊重同学，互帮互学，真正达到学以致用； 程 2 、提出问题：上过网吧有谁自学过网页设计听说过HTML或者CSS 设 这两个概念吗 计 约 35 分钟学生理解3、
二、告知学生课堂任务 本次课所学习的主要内容是HTML相关基础知识和 Dreamweaver软件基础操作； 三、逐步演示讲解分析教学内容 1、网站和网页的区别： 2、（ 1 ）网页是Internet基本元素； 3、（ 2 ）网站由网页组成； 4、静态网页和动态网页： 5、静态网页：纯粹HTML语言格式的网页通常被称为静态网页，静 态网页的后缀名通常为.htm 、.html 、 .shtml 、 .xml 。 6、动态网页：许多人认为网页会动就是动态网页，这是个错误的观点， 在静态的网页中也可以含有动态的图片，这仅仅是视觉上的动态罢 了。真正的动态网页是指实际上并不是独立存在于服务器上的网页 文件，只有当用户请求时服务器才返回一个完整的网页。也就是说， 它是返回到了客户端上的网页。例如网页文件是以ASP 、PHP 、JSP、 ASPX 为结尾就是动态的网页了。 约 20 分钟学生熟记 7、静态网页的特点： 8、（ 1 ）内容相对稳定，容易被搜索引擎检索到； 9、（ 2 ）没有数据库支持，在网站制作和维护方面工作量大； 10 、（3）交互性差，在功能方面有很大的限制。 11 、动态网页的特点： 12 、（1）以数据库技术为基础，可大大降低网站维护的工作量；
网页设计基础_实训
第2章网页设计基础 2.1 实训页面布局综合练习 2.1.1 实训目的 进一步理解在V isual Studio环境中创建、编辑和引用CSS样式表文件的基本步骤。理解层元素在页面布局中的重要作用及使用方法。综合运用CSS+DIV布局技术设计出实用的网站主页。 2.1.2 实训要求 新建一个https://www.360docs.net/doc/268315394.html,网站，在Default.aspx中使用CSS+DIV技术设计出图2-1所示的网站主页效果。要求页面中导航栏、销售排行榜中内容使用https://www.360docs.net/doc/268315394.html,标准控件HyperLink，商品名称、商品种类、用户名、密码栏使用https://www.360docs.net/doc/268315394.html,标准控件TextBox，所有按钮使用https://www.360docs.net/doc/268315394.html, 标准控件Button，商品种类栏使用https://www.360docs.net/doc/268315394.html,标准控件DropDownList。 图2-1 网站主页设计效果图2-2 页面设计中需要的图片文件 2.1.3 实训步骤 1. 准备需要的图片文件 任何一个网页的页面设计都会用到一些图片文件，一般情况下这些图片文件可根据设计需要，事先使用Photoshop等图片编辑软件制作出来。也可以通过搜索引擎（如https://www.360docs.net/doc/268315394.html,、
https://www.360docs.net/doc/268315394.html,等）从Internet中下载。本实训页面设计中需要的图片文件如图2-2所示。 新建一个https://www.360docs.net/doc/268315394.html,网站，在站点文件夹中创建一个名为“images”的子文件夹，将本实训中需要的所有图片文件复制到该文件夹中。如果在解决方案资源管理器中不能看到新建的文件夹，可右键单击网站名称在弹出的快捷菜单中执行“刷新文件夹”命令使其显示出来。 2. 设计页面布局 如图2-3所示，根据设计效果需要可将页面划分在若干个层中，商品描述信息分别放置在两个表中。 图2-3 页面布局规划 各元素说明如下： div：整个页面所在区域。 div (#logo)：页面Logo栏（网站标题栏）区域。 div (#navigation)：导航栏区域。 div (#left_top)：“商城通行证”区域。 div (#left_bottom)：“销售排行榜”区域。 div (#right_content)：页面右侧信息显示区域。 div (#search)：搜索栏区域，包含在div (#right_content)区域中。 div (#tab)：商品信息显示区域，包含在div (#right_content)区域中。 table：商品信息显示区域，两条信息使用两个表格。包含在div (#tab)区域中。 div (#bottom_line)：页面底部分隔线区域。 div (#footer)：页面底部版权栏区域。 3. 分区域页面设计 (1) 页面整体样式控制 向页面中添加一个CSS样式表文件，从解决方案资源管理器中将CSS样式表文件拖动到页面的设计视图，创建页面与CSS样式表的关联。 在样式表代码窗口向body样式规则中添加如下样式控制代码，用于定义整个网页中默认的字体及对齐方式。
网页设计与制作试题(HTML基础)有答案
1.HTML 文件必须使用htm 或者（B）作为文件扩展名。 A.doc B. html C. jsp D. aspx 2.HTMl是指（A）。 A.超文本标签语言 B. 汇编语言 C. 服务端端语言 D.脚本语言 3.WWW是（B）的意思。 A．网页B．万维网C．浏览器D．超文本传输协议 4.在网页中显示特殊字符，如果要输入“<”，应使用（D）。 A．lt; B．≪ C．< D．< 5.以下说法中，错误的是：（D）。 A．获取WWW服务时，需要使用浏览器作为客户端程序。 B．WWW服务和电子邮件服务是Internet提供的最常用的两种服务。 C．网站就是一系列逻辑上可以视为一个整体的页面的集合。 D．所有网页的扩展名都是.htm。 6.以下说法中，错误的是：（B）。 A．网页的本质就是HTML源代码。 B．网页就是主页。 C．使用“记事本”编辑网页时，通常应将其保存为.htm 或.html 后缀。 D．本地网站通常就是一个完整的文件夹。 7.浏览网页时，通常使用以下协议：（C）。 A．mailto B．FTP C．HTTP D．TCP/IP 8.在网页中显示特殊字符，如果要输入空格，应使用（D）。 A．nbsp; B．&Nbsp; C． D． 9.以下软件中，不能直接用来编辑HTML 文件的是：（C）。 A．记事本B．FrontPage C．Flash D．Dreamweaver 10.以下有关HTML 标记符的属性的说法中，错误的是：（C）。 A．在HTML中，所有的属性都放置在开始标记符的尖括号里。 B．属性与HTML标记符的名称之间用空格分隔。 C．属性的值放在相应属性之后，用等号分隔；而不同的属性之间用分号分隔。 D．HTML 属性通常也不区分大小写。 二、填空题 1.如果要为网页指定黑色的背景颜色，应使用以下html语句：
。 2.上网浏览网页时，应使用_____浏览器____作为客户端程序。 3.TITLE 标记符应位于___head______标记符之间。 4.要设置网页在黑色背景下显示白色文字，应使用__语句。 5.要设置整个网页的背景颜色，应在body标记符中设置____bgcolor_____属性。 三、判断题 1.用H1标记符修饰的文字通常比用H6标记符修饰的要小。╳ 2.B标记符表示用粗体显示所包括的文字。√ 3.指定滚动字幕时，不允许其中嵌入图象。╳ 4.指定水平线粗细的属性是size。√ 5.指定水平线粗细的属性是width。╳实验一 网页设计基础实验
实验一网页设计基础实验 一、实验目的 1．掌握网站设计的基本原则、网站及网页的基本风格与基本构图特点； 2．了解网页布局的形式。 二、实验内容 1．根据网站制作的需要，从网上下载网页制作时需要的文字、小图片、动画及flash。 2.上网访问实际若干网站，了解各网站的风格（主题图形形象、导航是否清晰，整体色调的搭配是否协调，主题是否突出等）。 3．在网上找出下列版面布局的结构形式： ⑴．“T”结构布局 "T"结构布局。所谓"T"结构。就是指页面顶部为横条网站标志+广告条，下方左面为主菜单，右面显示内容的布局，因为菜单条背景教深，整体效果类似英文字母"T",所以我们称之为"T"形布局。这是网页设计中用的最广返的一种布局方式。这种布局的优点是页面结构清晰，主次分明。是初学者最容易上手的布局方法。缺点是规矩呆板，如果细节色彩上不注意，很容易让人"看之无味"。 "口"型布局。这是一个象形的说法，就是页面一般上下各有一个广告条，左面是主菜单，右面放友情连接等，中间是主要内容。这种布局的优点是充分利用版面，信息量大(我的主页首页即属于这种布局)。缺点是页面拥挤，不够灵活。也有将四边空出，只用中间的窗口型设计，例如网易壁纸站。 "三"型布局。这种布局多用于国外站点，国内用的不多。特点是页面上横向两条色块，将页面整体分割为四部分，色块中大多放广告条。 对称对比布局。顾名思义，采取左右或者上下对称的布局，一半深色，一半浅色，一般用于设计型站点。优点是视觉冲击力强，缺点是将两部分有机的结合比较困难。 POP布局。POP引自广告术语，就是指页面布局象一张宣传海报，以一张精美图片作为页面的设计中心。常用于时尚类站点，比如https://www.360docs.net/doc/268315394.html,。优点显而易见：漂亮吸引人 进入internet找到以上各种布局 4.利用搜索引擎，浏览因特网上较为著名的5个网站，记录这些网站的名称、网站地址和以及相应的网页文件格式（扩展名）；
网页制作HTML基础知识
网页制作之HTML基础知识2009-04-15 11:03很多被淘汰了的标签，不过了解下也好。 总类（所有HTML文件都有的） 文件类型 （放在档案的开头与结尾） 文件主题
《网页设计基础》教案
《网页设计基础》教案 总学时：32 教师：贺苗苗
第一章第一节网站界面设计的认识 一、网站的主题定位 1、网站的主题选择 企业的性质决定网站的风格，企业的内容决定网站的主题。 2、网站题材选择的原则 ①主题要小而精②题材最好是自己擅长或者喜爱的内容 ③题材不要太滥或者目标太高 3、题材类别 二、页面的功能模块设计 1、网站名称（Logo） 2、广告条（banner） 3、主菜单（menu） 4、新闻（news） 5、搜索（search） 6、友情链接（links） 7、邮件和地址（mailand address） 8、版权（copyright）
首页的设计步骤：①确定首页的风格和功能模块 ②设计首页的版面布局 ③处理技术上的细节 三、网页界面设计（web interface design）------美观、用户便利、网站流程顺畅! 界面：字典上解释为两者间的界限、接点、共有连接的领域。例子：人与车直接接触的空间，方向盘（即界面）；再如：人和门，门把手（即界面）。过大过小都不好。 界面设计最重要的两点：①使用的便利性②美学的层面 四、界面设计相关用语 1、UI ( User Interface, 用户界面 ) 即使用者界面的意思。实现互动是用户界面最主要的目的。 2、HCI ( Human-computer Interaction,人与计算机的交互作用 ) 即，以人怎样做能更容易的掌握计算机的使用技术为目标，结果可以使界面技术得到飞跃和发展。 3、GUI ( Graphical User Interface,图形用户界面 ) 图形用户界面是相对于纯文本而言，通过图形构成用户与系统间的界面来实现的。 例如：在windows之前的DOS必须输入纯文本，而现在则不用。
静态网页设计-教学大纲
《静态网页设计》教学大纲 课程类别：专业基础课 课程属性：必修课 学分/学时： 4学分/64学时 制订人：课题组 适用专业：信息技术相关专业 一、课程的性质 “静态网页设计”是信息技术类专业学生的专业基础课之一。属于必修课范畴。同时它是一门针对性、实践性较强的课程。主要是培养学生静态网页设计的基本知识和静态网页设计制作的基本技能。 二、与其它课程的关系
三、教学目标 1.知识目标 (1)网站、网页、网页设计等的基本概念； (2)理解HTML语言中的各种文本格式、段落设置、列表等标记知识； (3)理解和掌握基本的DIV＋CSS技术知识； (4)理解和掌握表格的基本知识； (5)理解和掌握数据表单的基本知识； (6)理解和掌握基本的框架网页知识； (7)理解和掌握网页图像、动画等多媒体应用知识； (8)理解和掌握网页超级链接知识； (9)掌握基本的动画制作知识； (10)了解网页美工相关知识； (11)了解网站的测试、发布与维护的基本知识； (12)掌握网站制作流程 2.能力目标 (1)能运用HTML语言设置和编辑网页元素； (2)会使用Dreamweaver等网页设计工具制作网页； (3)能使运用基本的CSS技术设置网页风格； (4)能在网页中嵌入图像、动画、视频等多媒体元素； (5)能运用表格布局并设计网页； (6)能正确运用文字超链接、图像超链接技术设计网页； (7)掌握框架制作网页的方法，会使用框架设计网页； (8)掌握制作表单的方法，会利用表单建立交互式页面； (9)能看懂基本的HTML网页源代码。
(10)会设计网页线框图，并能运用PS进行网页效果图设计 (11)掌握切片的基本原则和基本方法，综合运用网页排版技术进行切片素材排版 (12)熟悉网站项目工作流程，能独立进行中小型网站设计。 3.素质目标 (1)具有信息资料收集与整理能力； (2)具备简单的需求市场分析能力； (3)具有一定的语言表达、沟通和协调能力； (4)具有良好的心理素质和责任意识，能及时完成任务的能力； (5)具有踏实肯干的工作作风； (6)具有一定的创新意识和艺术设计素质 四、内容结构与目标任务
网页设计基础课程实验报告
实验一 1.实验体会 学会了使用关键字搜索相关内容和了解了WEB2.0的相关技术和服务概念，如AJAX、RSS、Tag、Wiki、Blog、SNS，学会如何从其他网站上下载JS、CSS、IMAGE等相关文件。发现.CSS所在的行都存在字符串“
简单的文字处理 代码： 这是一段文本
这是一段文本
©Microsoft® Windows 2007
A=a1+a2+a3
这是一段文本
这是一段文本
这是一段文本
这是一段文本 HTML中的超级链接代码： 简单文字处理
HTML中的超级链接 锚链接代码： A B C D E F G H I J K L M N
html5页面设计
html5页面设计 北京千锋互联科技有限公司是中国最早从事移动互联网研发和培训的机构之一,千锋集团旗下现有千锋教育、移动产业、项目研发、创业孵化业务，是国内最大的移动互联网人才培训和人才提供商。公司总部位于北京，目前已在深圳、上海、郑州、广州、大连、武汉、成都、西安成立了分公司。 千锋集团旗下的千锋教育一直秉承“用良心做教育，做真实的自己”的理念，是中国移动互联网研发培训领导品牌，全力打造移动互联网高端研发人才服务平台。千锋教育每年培训和输送近万名移动互联网研发人员，是唯一真正获得企业一致好评的移动互联网培训机构，从千锋走出的学员在业界得到了广泛认可。2014年，千锋教育集团成为教育部教育管理信息中心“移动互联网应用开发指定实训基地”。截止目前，千锋教育已与500多家高等院校建立深度合作关系，并携手教育部教育管理信息中心举办《高等院校骨干教师iOS/Android暑期培训班》，千锋讲师团队技术水平得到业界一致认可，好评如潮。千锋教育组织的技术研讨会名企云集，是千锋和企业之间紧密合作的桥梁。千锋讲师发布的免费培训视频、学习资料、源码下载等浏览量近千万，每年约有数百万研发人才从中获益。 一、千锋教育八大优势 1、中国移动互联网研发培训领导品牌，专注iOS、Android 、HTML5、UI等技术研发培训，坚持“用 良心做教育，做真实自己”的理念； 2、业内唯一一家敢推出“两周免费试听，不满意不缴费”的政策，让学员更真实的了解千锋、了解自 己是否适合做开发； 3、零学费入学，工作后分期还款，业内学员毕业薪水最高，培训就业协议明确写出薪水保障，平均薪 水专科5000、本科6000、硕士7000； 4、权威资深师资阵容，业内最具责任心、最懂教学、拥有最强技术、有大型项目经验实战派讲师授课， 由业内知名专家及企业技术骨干组成； 5、自主研发QFTS 教学保障系统，拥有自主知识产权的开发培训课程体系，讲练学相结合，课程内 容紧贴当前前沿实用技术和企业实际需求； 6、企业级项目实战训练，从千锋科技及合作企业项目中研发出几十个企业级教学项目，让学员参与真 实的企业级项目研发，最后让学员能够独立设计开发自己的上线项目； 7、最严格、最科学、最负责的教学就业管理制度，班主任、职业规划师全程跟班，把握每个学员的学 习状态，并有专业的职业素养课和就业指导课，保证教学及就业质量； 8、免费加入千锋开发者联盟，为会员提供免费技术支持及终身就业服务，免费参加千锋举办的各类技
网页设计基础教学大纲
《网页设计基础》课程教学大纲 一课程说明 1.课程基本情况 课程名称：网页设计基础 英文名称：Fundamentals of Designing Web Pages 课程编号：2413267 开课专业：计算机科学与技术 开课学期：第3学期 学分/周学时：2/2 课程类型：专业方向选修课 2．课程性质（本课程在该专业的地位作用） 本课程是计算机科学与技术专业的专业基础课。学习网页的布局与美化、及流行的前端技术，为下一步开发企业级的B/S架构的应用打下基础。 3．本课程的教学目的和任务 在掌握计算机网络的基本知识和基本理论的基础上，使学生通过本课程的学习，掌握DreamweaverMX的使用方法，学会使用DreamweaverMX制作Web网页的技术。通过本课程的学习，掌握DreamweaverMX软件的使用方法,能够创建一个企业的电子商务站点，高效的管理Web内容和站点结构；培养具备较强的逻辑思维能力和独立思考能力。 4．本课程与相关课程的关系、教材体系特点及具体要求 这门课程的先修课程为《计算机应用基础》。 5．教学时数及课时分配
二教材及主要参考书 1. 文丰科技,《中文Dreamweaver8网页制作教程与上机实训》, 机械工业, 2008 2. 览众,《Dreamweaver8商业案例精粹》, 电子工业出版社, 2007 3. 黄竣,《Dreamweaver MX精彩效果百例》, 中国水利水电出版社, 2004 三教学方法和教学手段说明 主要使用多媒体教室进行理论讲解和演示制作步骤，布置课后练习让学生提交电子档进行检查。 四成绩考核办法 考试分为平时作业（含课程设计）、半期考试和期末考试三部分组成，比例为20%、20%、60%。评定学期成绩时结合平时出勤情况得出该门课成绩。 五教学内容 第一篇快速入门（理论6学时，实验6学时） 一、教学目的 掌握DreamweaverMX的使用界面中各组成元素的名称与功能；掌握打开与关闭工具窗口的方法；理解站点、网站、网页及网页属性的概念；了解
网页制作实验报告6个实验
目录 实验一网页设计基础实验 (2) 实验二HTML语言应用 (4) 实验三CSS样式表的应用---CSS的引用 (10) 实验四Dreamweaver的使用、个人网站的制作 (13) 实验五用框架、模板设计网页 (15) 实验六表单制作 (19)
实验一网页设计基础实验 一、实验目的 1．掌握网站设计的基本原则、网站及网页的基本风格与基本构图特点； 2．了解网页布局的形式。 3.用记事本编写一个简单的网页。 二、实验内容 1．上网访问实际若干电子商务网站，了解各网站的风格（主题图形形象、导航是否清晰，整体色调的搭配是否协调，主题是否突出等）。 2．在网上找出下列版面布局的结构形式： ⑴．“T”结构布局 1."T"结构布局。所谓"T"结构。就是指页面顶部为横条网站标志+广告条，下方左面为主菜单，右面显示内容的布局，因为菜单条背景教深，整体效果类似英文字母"T",所以我们称之为"T"形布局。这是网页设计中用的最广返的一种布局方式。这种布局的优点是页面结构清晰，主次分明。是初学者最容易上手的布局方法。缺点是规矩呆板，如果细节色彩上不注意，很容易让人"看之无味"。 2."口"型布局。这是一个象形的说法，就是页面一般上下各有一个广告条，左面是主菜单，右面放友情连接等，中间是主要内容。这种布局的优点是充分利用版面，信息量大(我的主页首页即属于这种布局)。缺点是页面拥挤，不够灵活。也有将四边空出，只用中间的窗口型设计，例如网易壁纸站。 3."三"型布局。这种布局多用于国外站点，国内用的不多。特点是页面上横向两条色块，将页面整体分割为四部分，色块中大多放广告条。 4.对称对比布局。顾名思义，采取左右或者上下对称的布局，一半深色，一半浅色，一般用于设计型站点。优点是视觉冲击力强，缺点是将两部分有机的结合比较困难。 5.POP布局。POP引自广告术语，就是指页面布局象一张宣传海报，以一张精美图片作为页面的设计中心。常用于时尚类站点，比如https://www.360docs.net/doc/268315394.html,。优点显而易见：漂亮吸引人 进入internet找到以上各种布局，并写出各种版面布局网站的域名和所采用的版面布局形式 找出使用大色块和抽象线条构图风格的网站（至少各2个）；例：大色块主页 找出10个国内外著名企业或商务网站主页上的宣传标语或体现企业精神的代表性词句。 三、实验步骤与要求 1）新建一个记事本文件本在其中输入如下代码：