HTMLCSS网站设计基础教程教学指导大纲修订版

H T M L C S S网站设计基础教程教学指导大纲集团标准化小组：[VVOPPT-JOPP28-JPPTL98-LOPPNN]

《H T M L5+C S S3网站设计基础教程》课程教学大纲

（课程英文名称）

课程编号：201601210011

学分：5学分

学时：76学时（其中：讲课学时：47学时上机学时：26学时）

先修课程：计算机基础、计算机网络、计算机应用

后续课程：UI设计、JavaScript网页特效

适用专业：信息技术及其计算机相关专业

开课部门：计算机系

一、课程的性质与目标

《HTML5+CSS3网站设计基础教程》是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML标记、CSS样式、网页布局、变形与动画等内容，通过本课程的学习，学生能够了解网页web发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果，学会制作各种企业、门户、电商类网站。

二、课程设计理念与思路

课程设计理念：高职教育的集中实践教学环节需明确必要的理论知识的生化与知识层面的拓展，不能局限于单纯的技能训练。单纯的技能训练不是提高高等职业教育的理想课程。以能力的培养为重点，以就业为导向，培养学生具备职业岗位所需的职业能力，职业生涯发展所需的能力和终身学习的能力，实现一站式教学理念。

课程设计思路：基于工作过程开发课程内容，以行动为导向进行教学内容设计，以学生为主体，以案例（项目）实训为手段，设计除理论学习与技能掌握相融合的课程内容体系。教学整体设计“以职业技能培养为目标，以案例（项目）任务实现为载体、理论学习与时间操作相结合”。

三、教学条件要求

开发工具：DreamweaverCS6

四、课程的主要内容及基本要求

第一章初识HTML5

第二章HTML5页面元素及属性

第三章CSS3入门

第四章CSS3选择器

第五章CSS盒子模型

第六章浮动与定位

第七章表单的应用

第八章多媒体技术

第九章CSS3高级应用

第十章实战开发—制作电商网站首页面

…………………………………………………………………

五、学时分配

六、考核模式与成绩评定办法

本课程为考试课程，期末考试采用百分制的闭卷考试模式。学生的考试成绩由平时成绩（30%）和期末考试（70%）组成，其中，平时成绩包括出勤（5%）、作业（5%）、上机成绩（20%）。

七、选用教材和主要参考书

本大纲是根据教材《HTML5+CSS3网站设计基础教程》所设计的。

参考书籍：

传智播客.《网页设计与制作（HTML+CSS）》中国铁道出版社.201408

传智播客.《HTML+CSS+JavaScript网页制作案例教程》人民邮电出版社.201508

八、大纲说明

本课程的授课模式为：课堂授课+上机，其中，课堂主要采用多媒体的方式进行授课，并且会通过测试题阶段测试学生的掌握程度；上机主要是编写程序，要求学生动手完成指定的程序设计或验证。

撰写人：审定人：

批准人：执行时间：

网页设计与制作实例教程

网页设计与制作实例教程 习题答案 第1章网页与网站基础 一、选择题 1．A 2．B 3．C 4．C 5．A 二、判断题 1．√2．×3．√4．×5．√ 三、问答题 略 第2章网页规划设计 一、选择题 1．D 2．A 3．C 4．A 5．C 二、判断题 1．×2．×3．×4．√5．√ 三、问答题 1．答：网站需求分析一般包括三个阶段的内容：网站背景分析、总体需求分析、具体需求分析。（每个阶段可再详细描述。） 2．答：可从以下几个方面来阐述网站设计的原则：①日期、时间和数字；②欢迎词； ③弹出窗口和引导页面；④新闻和公告信息；⑤网址；⑥控件；⑦链接；⑧主页内容 3．答：打开新浪网首页，分析其布局类型。（答案略） 4．答：网页色彩搭配方法可从以下两个方面去阐述：①根据页面风格以及产品本身的诉求确定主色；②根据主色确定配色。 网页色彩搭配技巧可从以下几个方面去阐述：①用一种色彩；②用两种色彩；③用一个色系；④用黑色和一种色彩以及色彩搭配忌讳的方面。 5．答：打开当当网，具体分析其规划过程。（答案略） 第3章初识网页制作软件 一、选择题 1．C 2．C 3．B

二、填空题 1．代码、拆分、设计2．文件、资源、规则3．超级链接 三、操作题 略 第4章制作网页内容 一、选择题 1．D 2．B 3．A 4．D 5．ABD 6．D 7．B 8．D 9．A 10．A 二、判断题 1．√2．√3．×4．√5．√6．√7．√8．√9．×10．√三、操作题 略 第5章设置网页超级链接 一、选择题 1．D 2．D 3．A 4．D 5． C 二、判断题 1．×2．×3．×4．√5．× 第6章使用CSS样式美化网页 一、选择题 1．B 2．C 3．C 4．B 5．A 6．D 7．D 8．D 9．B 10．C 11．A 12．A 13．C 14．D 15．D 16．A 17．A 18．B 19．D 20．D 二、简答题 1．×2．×3．×4．×5．×6．×7．√8．×9．√10．√11．×12．×13．×14．√15．√16．√ 第7章规划布局网页 一、选择题 1．B 2．A 3．B 4．B 5．D 二、简答题

《HTML CSS JavaScript网页制作案例教程》_教学大纲讲解

《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文档基本格式

网页设计-教学大纲

《网页设计》课程教学大纲 一、课程说明： 课程类别：选修课 适用专业：工商管理、电子商务专业、信息管理与信息系统专业和计算机相关专业、艺术设计专业等。 计划学时：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、能力培养要求

网页制作css格式模板部分

一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; /*垂直向上对齐*/

网页设计教学大纲

网页设计课程教学大纲 课程代码： 课程类型：专业必修课 开课部门：传媒学院 学时：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%。成绩以百分制计算，本课程形成性考核由考

《HTML5+CSS3网站设计基础教程》_教学大纲

《HTML5+CSS3网站设计基础教程》课程教学大纲 （课程英文名称） 课程编号：201601210011 学分：5学分 学时：76学时（其中：讲课学时：47 一、课程的性质与目标 《HTML5+CSS3网站设计基础教程》是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML标记、CSS样式、网页布局、变形与动画等内容，通过本课程的学习，学生能够了解网页web发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果，学会制作各种企业、门户、电商类网站。

二、课程设计理念与思路 课程设计理念：高职教育的集中实践教学环节需明确必要的理论知识的生化与知识层面的拓展，不能局限 于单纯的技能训练。单纯的技能训练不是提高高等职业教育的理想课程。以能力的培养为重点，以就业为导向，培养学生具备职业岗位所需的职业能力，职业生涯发展所需的能力和终身学习的能力，实现一站式教学理念。 课程设计思路：基于工作过程开发课程内容，以行动为导向进行教学内容设计，以学生为主体，以案例 （项目）实训为手段，设计除理论学习与技能掌握相融合的课程内容体系。教学整体设计“以职业技能培养为 目标，以案例（项目）任务实现为载体、理论学习与时间操作相结合”。 开发工具：DreamweaverCS6 第一章初识HTML5

第二章HTML5页面元素及属性

第四章CSS3选择器

e g o o d f o 背景与图片不透明度的设置 √ 设置背景图像平铺√ 设置背景图像的位置√ 设置背景图像固定√设置背景图像的大小√设置背景的显示区域√设置背景图像的裁剪区域√设置多重背景图像√背景复合属性√线性渐变√径向渐变√重复渐变 √ 第七章表单的应用

CSS样式表在网页制作中的应用

China Computer&Communication 随着Internet的不断普及和飞速发展，网络已经成为人们获取、 发布和传递信息的主要渠道之一，在人们的工作、生活、学习和娱乐中起着非常重要的作用。上网已经渐渐成为人们的一种习惯，网络上的信息主要是通过网站来发布实现的，而网站又是由不同的网页构成的。在制作网页的过程中，既需要设计合理的字体和布局，还需要考虑兼容不同浏览器。为了方便解决这些难题，在网页的构建过程中引入CSS样式表，是一个不错的选择。 一、CSS样式表概述 CSS是Cascading Style Sheet 的缩写，译作“层叠样式表单”。 它是一种在网页制作过程中经常用到的技术。CSS样式表其实是一组样式，它增加了更多的样式定义方法来辅助HTML。样式就是用一个指定的名字来标识和保存的一组有关字符和段落格式的选项集合。其实，我们很早就已经与“样式”打过交道了。在Word的“格式”菜单中的“样式项”里，提供了多种样式，如“标题1”、“标题2”、“正文”等。只要选定文字，然后选择不同的样式，所选定的文字就会自动改变字体、字号、对齐方式、字间距等。同样，我们可以通过CSS来规定网页元素的各种样式，如颜色、位置、大小等。 二、CSS样式表的优势 CSS样式表是用于（增强）控制网页样式并允许将样式信息与网 页内容分离的一种标记性语言。通过使用CSS样式表，不仅可以对文字格式进行设置，还可以更加精确地控制布局、字体、颜色、背景和其他图文效果，从而避免在标识字符和设置段落格式等操作时重复定义需要的样式，提高网页编辑的效率。 CSS是对以前的HTML（HTML3.2以前的版本）语法的一次重 大革新，是DHTML（动态网页）的一部分。建立CSS的意义在于把对象真正引入到HTML中，使其可以使用脚本程序（如JavaScript、VBscript）调用和改变对象属性，从而使网页中的对象产生动态的效果，这在以前的HTML中是无法实现的。CSS甚至超越了WEB页面本身的显示功能，把样式扩展到多种媒体上，显示了难以抗拒的魅力。 三、CSS样式表在HTML中的实现 在HTML网页中加入CSS并不是只有一种方法，在不同的情况 下，可以采用不同的方法，比较常用的有下面几中。 1．嵌入式样式表 嵌入式样式表的实现很简单，只需在每个要应用样式的HTML 标签后写上CSS属性即可。例如要设置指定表格中的文字的样式为红色，字号为10pt，可在当前表格的

标记内添加下面的代码：。 这种方式主要用于对具体的标签作具体的调整，其作用的范围只 限于本标签。嵌入式样式表不能充分体现出CSS样式表的优越性，所以应用场合并不多。 2．内联式样式表 若想只对当前页面应用样式，就要使用内联式样式表。所谓内联

静态网页设计-教学大纲

《静态网页设计》教学大纲 课程类别：专业基础课 课程属性：必修课 学分/学时： 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．使用Dreamweave网页工具制作一个个人网站； 2．包含至少四个网页: 包括首页、个人简介、个人相册等（可随意设计），网页之间用超链接相连。 3．网页中要有图片和文字内容，用表格进行页面布局； 4．添加至少两种行为，并为首页添加背景音乐。 5. 在网站中设计一个表单页面。 6. 首页必须包含页面标题，动态按钮导航栏。 首先新建一个文件夹，文件夹的名字不能为汉字，做网站所有的路径都必须用字母或者数字， 不能用汉字，我们就用名字吧，譬如说名字张三，那文件夹名字就是zs，如图 打开Dreamweaver软件，得到图 做网页要新建站点，关于站点配置服务器什么的，这里不讲了，只讲建立站点。 选择站点——新建站点。 我们建的文件夹就是站点根文件夹。

新建站点后得到这样一个界面 点选高级，得到界面 站点名称与我们建文件夹得名字相同，zs填进去就可以了本地根文件夹就是我们新建的那个文件夹zs， http地址为http://localhost/zs

接下来选择左侧栏里远程信息 点击无后面的那个三角，选择本地网络，远端文件夹同样选择我们新建的那个文件夹 接下来点选左面菜单里的测试服务器， 点选访问后面那个三角，选择本地网络，测试服务器文件夹也为我们建好的文件夹zs，在url前缀后面加上zs

然后点击确定就可以了得到这样一个界面。 下面看老师的第一条要求，是要至少四个网页，那我们就做四个 单击新建，然后单击 接下来，选择 然后单击创建，接下单击文件——保存，保存这个文件，保存在我们一开始建好的文件夹里面，保存名字不能是汉字，只能是字母或者数字，因为我们只坐四个网页，可以简单一点，把这四个网页命名为a、b、c、d，或者1、2、3、4，当然一个网站默认的索引首页名为index，这里也用index，

《网页设计与制作》教案-第10讲 布局技术之二—Div+CSS(二)

第10讲布局技术之二—Div+CSS（二） 1.1教学目标： ◆知识目标 1.理解CSS盒子模式。 2.掌握CSS规则设置方法。 ◆技能目标 能够理解Div+CSS所体现的表现和内容相分离特性。 ◆品质目标 培养学生认真细致、踏实进取的精神 1.2教学重点： 1.掌握CSS规则设置方法 1.3 教学难点 理解CSS规则的作用。 1.4教学方法：讲练结合，任务驱动、分子任务操练 1.5课时安排：2课时 1.6教学对象分析： 这个班学生具有基本专业技能，不仅仅是要教会他们方法，最重要的是教会他们的规范的动手能力与各种事件多方法的灵活处理能力，在保证全班同学教学进度一致的情况上，培养学生较好的专业基础与创新创作意识。 1.7教学过程： 一、CSS样式基本操作 1．样式表的操作途径 我们可以通过三种途径来创建、编辑CSS样式。 从主菜单选择“窗口/CSS样式”即可打开样式面板，如图3-35所示。 图3-35 CSS样式面板 在CSS样式面板的右下角有四个功能按钮，分别为： ●附加样式表：用于打开“链接外部样式表”对话框，选择要链接到或导入到当前文档中的外部样式表。 ●新建CSS样式：打开“新建CSS 样式”对话框，创建新样式。 ●编辑样式表：打开“CSS 样式定义”对话框。编辑当前文档或外部样式表中的任何样式。

删除CSS样式：删除“CSS 样式”面板中的所选样式，并从应用该样式的所有元素中删除格式。 单击CSS样式面板右上角的菜单按钮，可以显示如图3-36所示的面板菜单。通过该菜单，可以完成对CSS样式面板的大部分控制。在CSS样式面板的列表区域中单击鼠标右键，也可以打开同样的菜单。 图3-36 面板菜单 从主菜单选择“文本/CSS样式”命令，选择“新建”也可启动“新建样式表”对话框，如图3-37所示。 在页面空白处单击鼠标右键，在弹出的菜单中一样可以启动“新建样式表”对话框，如图3-38所示。 不管如何启动上述几个样式菜单或面板，他们都包含相同的几个命令：新建样式表、编辑样式表、链接样式表和导出样式表。

网页设计基础教学大纲

《网页设计基础》课程教学大纲 一课程说明 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的使用界面中各组成元素的名称与功能；掌握打开与关闭工具窗口的方法；理解站点、网站、网页及网页属性的概念；了解

怎样制作自己的网页

和怎样制作自己的网页 时间:2009-09-22 19:35来源:未知作者:大宝库点击:9865次 阅读工具：字体：大中小 一 首先，可以告诉想学网页制作的朋友。学习制作网页和学习其它知识一样，是要有基础的。在基础之上学习起来会比较轻松和快捷的。其次，要清楚学习它是用来做什么。 建议你要具备的条件：对电脑熟练操作，使用电脑最好在一年以上，对网页设计感兴趣，有较充足的学习时间，熟悉office办公软件。当然，这些不是一定必须的。 第一阶段：开始时最好是学些网页编辑软件，如：FrontPage、Dreamweaver.这样可以使您更了解网页制作与运营的原理。最好使拿本教程来学学，结合教程边学习边制作。 第二阶段：会用网页制作软件后，已会制作一个较完整的网站了。但为了能使自己设计制作的网页尽善尽美，还是学习网页的核心技术吧！网页编辑语言（包括:html、css、javascript、asp、xml等）。你可以选择地学习。 第三阶段:结合你自己已掌握地知识来开发网站，可以开发出别人给你定义的目标网站。到了这个时候，你就成为真正的网站开发者了。 怎样制作网页，不是说一两篇文章能够说清楚的。以上介绍的是制作网页的主要纲要，希望能够给想要学习制作网页的朋友一个参考。 二 一、工具 1、空间 网页做好了肯定是要发表上网的，所以必须先申请一个空间；免费的空间不是很稳定，容量又小，也不好申请，建议到大的网站如新浪、网易去先买一个个人空间，大概有个20M以上的就可以了。 2、软件 推荐使用Dreamweaver6.0中文版，这个软件最大的特点就是“所见即所得”，也即是制作过程中看到的，便是到时发布到网络上的。 二、教程

(完整版)《网页设计与制作》课程教学大纲.docx

《网页设计与制作》课程教学大纲 课程名称：网页设计与制作 学分及学时： 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 页面开发的发 展方向，兼顾各行各业的需求变化，力争面向社会，服务于企业“互联网+”战略。

《网页设计》教学大纲

网页设计教学大纲 教材：《网页设计》 总学时：134学时 开课学期：第1—2学期 课程类别：必修 课程性质：专业基础课 适用专业：设计类 第一部分大纲说明 一、课程的性质和任务 在中等职业技术学校设计类专业所设置的课程中，网页设计是一门进阶性的设计课程，可以在平面学习的基础之上，不仅了解印刷产品谁，同时也能掌握电子产品内设计。网页设计行业也是从事专业技术工作人员必须掌握的一项职业技能。 对中职学校的设计类专业来说，本课程的任务是培养学生具有一定的网页设计基础，同时也能够了解网页的结构以及简单的设计技巧，进一步提高学生全面素质，形成综合职业能力。 二、课程教学目的 通过本课程教学，使学生了解网页设计常用软件工具、功能的使用；理解WEB界面设计的流程及规范；同时了解WEB界面设计中各行业的设计风格；理解企业客户对设计的需求和期望值；掌握网站及软件界面设计的技能和技巧。 第二部分大纲内容 第一章WEB界面设计规范及流程 1、WEB界面结构与作用 2、WEB界面设计规范及流程 3、网页中的字体设计 4、网页中的图标设计 5、Banner设计 第二章企业网站WEB界面设计 1、了解企业网站结构、制作流程及设计规范 2、企业网站根据模块划分进行设计

3、企业网站色彩搭配 4、企业网站WEB界面赏析 第三章网站专题页WEB界面设计 1、了解专题页网站结构、制作流程及设计规范 2、专题页网站根据模块划分进行设计 3、专题页网站色彩搭配 4、专题页网站WEB界面赏析 第四章电子商务网站WEB界面设计 1、电子商务网站结构、制作流程及设计规范 2、电子商务网站根据模块划分进行设计 3、电子商务网站色彩搭配 4、电子商务网站WEB界面赏析 第五章 PC客户端软件界面设计 1、赏析PC客户端软件界面的类型 2、企业OA办公软件、触摸屏管理展示系统界面的分析与设计 3、PC端界面设计注意事项 第六章 WEB界面版式设计 1、运用所掌握的美学知识，进行版面的“点、线、面分割”，颜色搭配进行设计 2、设计出美观实用的WEB版面。 3、赏析优秀版式界面 第七章 WEB标准化布局基础 1、标签的使用 2、（X）HTML/HTML5语言 3、CSS/CSS3层叠样式表 4、导航排版布局 5、内容排版布局 第八章 WEB综合项目实战 1、企业网站项目实战 2、电商网站项目实战 3、专题网站项目实战

个人网页制作简明教程

个人网页制作简明教程 （孙晓鹏 整理） 资料来源：https://www.sodocs.net/doc/439730341.html,/ 目 录 1. 认识网页 2. 制作主页前的准备 3. 如何选择网页制作工具 4. 如何把握网页布局 5. 安装Dreamweaver8 6. 规划站点 7. 制作模板 8. 制作首页 9. 套用模板和修改模板 10.网页的发布 1. 认识网页 1.1. 什么是网页 网页的学名称作HTML文件，是一种可以在www网上传输，并被浏览器认识和翻译成页面显示出来的文件。 WWW是“World Wide Web"的缩写；HTML的意思则是“Hypertext Markup Language”,中文翻译为“超文本标记语言”。“超文本”就是指页面内可以包含图片、链接、甚至音乐，程序等非文字的元素。 网页就是由HTML语言编写出来的。HTML语言是一种排版语言，语法就类似于这样：“页高8宽5，(1,2)处插入高1宽1的图片A...” 如果您是使用WPS或则Word的高手，那么恭喜您，网页制作的学习您已经走了一半路了！ 1.2. HTML 全称HyperText Markup Language，正式名称是超文本标记语言，HTML语言发展很快，已历经HTML1.0、HTML2.0和HTML3.0、HTML4.0多个版本，现在HTML5.0正在测试，同时DHTML (动态)、VHTML(虚拟)、SHTML等也飞速发展起来。我们现在一般只要掌握HTML4.0就可以了。 html利用标记（tag）用来描述网页的字体、大小、颜色及页面布局的语言，使用任何的文本编辑器都可以对它进行编辑，与VB、C++等编程语言有着本质上的区别。

基于CSS DIV方式的网页设计的心得体会

基于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网页设计并不能保证网页对搜索引擎的优化，甚至不能

网页设计教学大纲

网页设计教学大纲 一、课程性质与任务 1、课程性质 《网页设计与制作》是中计算机专业开设的一门专业必修课，是计算机类专业的一门实践环节课程，也可以作为其他相关专业的实践课程或选修课，它是一门操作性和实践性很强的职业技术课程。本课程的主要内容为系统介绍网页编辑与制作软件Dreamweaver cs3，通过这种有代表性的网页制作软件的使用，掌握网站设计的全过程，并能熟练地制作出有专业水准的网站。 2 、课程任务 本门课程在专业教学计划中起着十分重要的作用，通过这门课程，学生可以掌握以下技能和知识： * 掌握网站的开发流程，如建站规划、效果图制作、建立站点等相关知识。 * 掌握各种网页元素在Dreamweaver cs3中的使用。例如表格、文本、图像、超级链接、层和表单等。 * 熟悉一些网页设计辅助软件的功能和使用方法。例如Flash、Fireworks、Photoshop等。 * 掌握测试和发布网站的方法。包括网站测试的内容和方法。 * 能够解决一些网页设计中的常见问题。 * 了解ASP开发平台的搭建，Dreamweaver cs3在动态网页制作方面的应用。 二、课程教学目标与要求 1、本课程的基本目标 （1）使学生通过本课程的学习，掌握Dreamweaver cs3的使用方法，学会使用Dreamweaver cs3制作Web网页的技术。 （2）本课程学习结束后，学生应能自行设计各种网页、开发一定规模的网站，使学生通过本课程的学习，熟练掌握其基本制作方法和技巧，并最终设计一个综合性的网站并且编制简单的脚本上传到互联网上。 2、课程在知识、素质方面的基本要求 （1）知识要求 深入了解Internet，理解WWW、HTTP、HTML等概念及作用；掌握网站设计和发布的

电子商务网站建设的教学大纲

《电子商务网站建设》教学大纲 一、课程基本信息 1、课程名称（中/英文）：电子商务网站建设/Construction of E-Business website 2、总学时/学分：总学时72，其中实验学时36/学分3 3、开课单位：经济与贸易分院 4、面向对象：电子商务专业 5、先修课程：大学计算机基础、程序设计基础、电子商务概论、计算机网络应用、数据库原理与应用 6、课程类型：TE-B 二、课程简介 本课程为电子商务专业的专业必修课，也是该专业的主要课程和特色课程，它将多门电子商务技术课程的内容贯穿起来实现综合应用，主要学习如何设计和开发电子商务网站，包括静态网页的设计、动态效果的制作、网络数据库的开发应用、整个网站的系统规划和建设以及网站管理和安全策略等。 三、课程的教学目的和基本要求 本课程通过介绍电子商务网站概论、网页设计和网络应用程序开发等电子商务网站建设的知识，要求学生掌握网站建设的理论、设计的方法和设计过程，能使用网络编程语言和数据库技术进行简单的电子商务网站设计。通过实践加深学生对网站建设的理论和相关程序设计等内容的理解，提高学生的设计能力和使用计算机解决实际问题的能力。 四、课程教学方法 本课程采用理论与实践相结合的授课模式，主要采用项目教学法与小组教学法等多种教学方法进行授课。 五、课程内容及教学安排 本课程主要介绍电子商务网站概论、网页设计和网络应用程序开发等电子商务网站建设的知识，要求学生了解和掌握电子商务网站创建所涉及的背景和基础知识，掌握电子商务网站核心部分的工作原理和方法，了解网络数据库的基本原理和技术，了解当前常用的数据库软件、典型的客户端开发工具，通过实践了解多种程序设计语言和开发电子商务网站的过程。 理论教学内容及具体的课时安排： 第1章电子商务网站概述（3学时） 本章主要介绍电子商务与商务网站、商务网站的各种形式、商务网站的结构模式、商务网站推广与管理、商务网站的主机方案、商务网站的安全等问题。 第2章 Web编程基础（2学时）

网页前端设计css样式大全(整理版)

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;(居中)

(完整版)网页设计与制作教学大纲

《网页设计与制作》课程教学大纲 课程编号: 课程名称：网页设计与制作 课程类型:专业基础课 总学时：64 讲课学时：32 实验学时：32 适用班级: 一、课程性质、目的和任务：（加粗，以下同） 1、目的 本课程要求学生掌握基本的HTML语言。学会使用Dreamweaver开发工具进行网页设计。这是一门重在实践的科目，因此需要学生多上机、多进行实际操作，把老师所教授的各种网页制作、版面设计以及程序熟练制作或调试出来，并且能够在此基础上有所创造、有更进一步的发挥。 2、任务 本课程的主要任务是介绍利用Dreamweaver开发工具进行网页设计，包括新建、编辑和设置一个Web站点；如何对页面属性进行基本的设置，如何设置、编辑CSS层叠式样式表；如何排版文字、表格和层；如何进行基本的图像处理；建立框架；模板和库的使用和编辑；网站的发布与维护等基本知识与应用。目的是通过本课程的学习，培养学生的实际动手能力和计算机的操作能力，能够运用所学的知识进行网页设计。 二、教学基本要求：（分三级：掌握、理解、了解） 1．掌握： 要求学生能够全面掌握所学内容，并能够用其分析、应用与Dreamweaver网页设计相关的问题，能够举一反三。 2．理解： 要求学生能够较好地理解与Dreamweaver网页设计相关的问题，并且能够进行简单分析和判断。 3．了解：

要求学生能够一般地了解的所学内容。 三、教学内容及要求： 第1章Dreamweaver基础 教学内容： Dreamweaver 的历史和简介 Dreamweaver 的安装过程 Dreamweaver 的全新界面 改进的设计与开发环境 主菜单介绍 对象控制面板介绍 教学要求： 掌握：Dreamweaver的基本特点、新增功能及界面组成。基本操作，如安装、新建、打开、导入、保存、关闭等。 理解：新增功能、界面组成的优点。 了解：Dreamweaver可以为我们做些什么。 第2章网页设计语言基础 教学内容： HTML及XHTML语言介绍 常用的网页语法标记 教学要求： 理解：HTML及XHTML语言介绍，常用的网页语法标记 第3章文本和图像处理 教学内容： 文本属性面板 编辑文本和插入对象 设置文本的格式

HTML网页制作教程

1、HTML基本概念 什么是HTML文件？ ?HTML的英文全称是Hyper Text MarkUp Language，中文叫做“超文本标记语言”。 ?和一般文本的不同的是，一个HTML文件不仅包含文本内容，还包含一些Tag，中文称“标记”。 ?一个HTML文件的后缀名是.htm或者是.html。 ?用文本编辑器就可以编写HTML文件。 这就试写一个HTML文件吧！ 打开你的Notepad，新建一个文件，然后拷贝以下代码到这个新文件，然后将这个文件存成first.html。 This is my first homepage. This text is bold 要浏览这个first.html文件，双击它。或者打开浏览器，在File菜单选择Open，然后选择这个文件就行了。 示例解释 这个文件的第一个Tag是，这个Tag告诉你的浏览器这是HTML文件的头。文件的最后一个Tag是，表示HTML文件到此结束。 在和之间的内容，是Head信息。Head信息是不显示出来的，你在浏览器里看不到。但是这并不表示这些信息没有用处。比如你可以在Head信息里加上一些关键词，有助于搜索引擎能够搜索到你的网页。 在之间的内容，是这个文件的标题。你可以在浏览器最顶端的标题栏看到这个标题。 在和之间的信息，是正文。 在和之间的文字，用粗体表示。顾名思义，就是bold的意思。 HTML文件看上去和一般文本类似，但是它比一般文本多了Tag，比如，等，通过这些Tag，可以告诉浏览器如何显示这个文件。 HTML元素(HTML Elements) ?HTML元素(HTML Element)用来标记文本，表示文本的内容。比如body, p, title就是HTML元素。