下载文档原格式
静态网页设计教学大纲课程概述1.课程性质《静态网页设计》课程是高职计算机应用技术、计算机网络、软件技术等相关计算机专业的一门专业必修课程。
2.课程设计理念本课程的设计体现“以能力为本位、以职业实践为主线、以项目课程为主体”，打破了传统的学科体系的模式，通过各项目的练习操作，熟练地掌握岗位所需知识和技能，并不断强化。
项目特别强调对学生操作能力和解决问题能力的培养，充分体现了职业教育“以就业为导向，以能力为本位”的职业教育理念。
3.课程开发思路本课程主要以当下典型的项目案例为主题，教材为参考，同时借鉴了一些企业网站，有利于学生的理解与学习。
颠覆传统讲授风格，主要通过项目实例让学生以师傅带徒弟的形式一步一步学习项目开发流程。
带着对一个项目雏形的不断完善，功能需求及其他功能的完善，进阶，使学生掌握一个网站项目的设计与制作相关经验。
经验从实践中来，因此学生实验课时约占到了总课时的三分之二。
让学生在职业实践活动的基础上掌握知识，增强课程内容与职业能力要求的相关性，提高学生的就业能力。
授课目标通过本课程的学习使学生具备网页制作、网站规划与网站维护的专业能力，培养学生的团队协作、沟通表达、工作责任心、职业规范和职业道德等综合素质和能力。
作为计算机相关专业的核心主干课程，使学生掌握商业网站的开发流程，并能独立进行操作。
学生毕业后可胜任网站管理员、网页设计师等工作岗位。
课程大纲第一章网页设计基础知识1.1：网站剖析1.2：网站开发流程1.3：Dreamweaver CS6的安装第二章生活网网站的创建2.1 初识Dreamweaver CS62.2 新建和管理站点2.3 为网页设置头信息和页面属性——页面总体设置前两章测验第三章生活网网站页面的布局3.1 使用表格布局页面3.2 使用AP Div布局页面3.3 使用框架布局网页第三章测验第四章输入和编辑网页元素4.1 添加文本类网页元素4.2 在网页中添加图像4.3 在网页中添加多媒体元素第四章单元测验第五章网站内容的链接与特效网页的制作——应用链接与行为5.1 设置网站中的超级链接5.2 利用行为制作网站中的特效网页5.3 制作页面中的弹出式菜单5.4 利用CSS美化页面第五章测验第六章利用模板和库创建页面6.1 利用模板创建页面6.2 利用库项目创建页面第六章测验第七章利用表单创建交互式页面7.1 利用表单创建酒店预订客户页面（一）7.2 利用表单创建酒店预订客户页面（二）7.3 利用表单创建酒店预订客户页面（三）第七章测验第八章项目综合实训分析项目实训概述8.1 个人网页设计分析8.2 文化类网页的设计分析8.3 旅游休闲类网页的设计分析第九章HTML5+CSS39.1 初始HTML9.2 HTML代码编辑工具9.3 网页基本信息9.4 基本HTML5标签第九章测验第十章HTML5高级标签10.1 列表10.2 表格10.3 表单第十章测验第十一章CSS3入门11.1 CSS3简介11.2 CSS3核心基础11.3 文本样式属性11.4 CSS3选择器11.5 CSS3盒子模型预备知识1、计算机应用基础（1）计算机的基本概念知识；（2）计算机基本操作能力；（3）Internet基础知识；2、PhotoShop基础应用（1）版面设计知识（2）配色相关知识（3）平面图像处理基本技能参考资料1、Dreamweaver CS6实例教程魏三强李静杨子燕主编人民邮电出版社出版2、网页设计与制作任务驱动式教程陈承欢主编高等教育出版社出版3、HTML5+CSS3网站设计基础教程传智播客高教产品研发部编著人民邮电出版社4、HTML5+CSS3前端技术北京课工场教育科技有限公司编著中国水利邮电出版社。
综合实例——“宝贝爱网站”制做指南2.1 创建站点在编辑网页之前，首先要定义一个站点，以下是高级模式的定义过程：[1] 启动Dreamweaver CS3软件，执行【站点】→【新建站点】菜单命令。
[2] 在【站点定义为】的对话框中选择“高级”选项卡，点击新建两个文件夹baby （根文件夹）和images（图像文件夹），如下图所示，设置“本地信息”的各个参数。
本例的主目录为baby，在信息服务默认站点EC中，“HTTP地址”为http://localhost/，其他默认，完成后点“确定”。
因为是静态网页，可以不设测试服务器。
[3] 将素材文件复制到baby文件夹下（含images文件夹和news.html文件）。
2.2 制作网页模板为便于理解，我们将网页模板的制作分为4小节，下面来看具体操作。
1．新建模板文档(1)选择【文件】→【新建】菜单，打开【新建文档】对话框。
单击“空模板”，在“模板类型”列表中选择“HTML模板”，默认“布局”为 <无>，最后单击“创建”按钮，如图2-1所示。
图2-1(2)按【Ctrl+S】组合键保存文档，弹出图2-2所示提示框，勾选“不再警告我”复选框，之后单击“确定”按钮。
图2-2(3)在打开的【另存模板】对话框中，从“站点”下拉列表中选择“宝贝爱”，在“另存为”文本框中输入模板文件名“ml”，最后单击“保存”按钮，如图2-3所示。
图2-3(4)按【Ctrl+J】组合键，打开【页面属性】对话框。
单击左侧“分类”列表中的“标题／编码”，设置标题为“宝贝爱网站”，其余默认，如图2-4所示。
图2-4(5)再次按【Ctrl+S】组合键保存文件（*养成习惯）。
2．设置模板内容(1) 单击【插入】面板【常用】栏中的“表格”按钮，在页面中插入一个1行2列，宽1000像素，边框粗细、单元格边距和间距均为0的表格，如图2-5所示。
图2-5在该表格【属性】面板中，设置“表格ID”为“1”（定义为表格1，参见图2-6底部提示标签<table#1>），“对齐”方式为“居中对齐”，如下图所示：(2)在表格1（table#1）的左右两个单元格中（用Ctrl+鼠标来选择定位，此方式以后会常用到）分别插入图片“in01.gif”和“index_02.gif”，如图2-6所示。
第一部分课程定位《静态网页设计》是计算机应用技术专业的职业拓展课程之一，对培养学生的网站建设岗位的职业能力起到支撑作用。
课程学习过程中培养学生的网站设计、开发能力，能将客户需求归纳整理成文档的能力，能使用平面设计、动画设计、网站编辑等软件工具的能力。
通过具体内容的学习，最终能按照正规的设计流程制作出客户满意的页面，为其职业发展提供坚实的技术基础。
第二部分课程设计理念本课程遵照教高[2006]14号、教高[2006]16号、教高厅函[2007]47号等文件精神，依据本专业的人才培养方案，确定本课程的目标和教学内容，具体遵循以下原则：1.在课程设计上，坚持以能力为本位，以学生为主体，教师角色转换为倡导者。
2.在课程内容选取上，以过程性知识为主、陈述性知识为辅，即以实际应用的经验和策略的习得为主、以适度够用的概念和原理的理解为辅。
3.在课程内容排列上，以工作过程为参照系整合陈述性知识与过程性知识。
4.在课程内容结构上，突出模块化设置，以便新技术新产品进入教学内容。
5.在课程职业技能培养上，把职业资格证书（职业标准）的考核项目与要求纳入到专业课程标准之中，为学生就业服务。
6.在课程教学组织设计上，以真实工作任务和社会产品为载体组织教学，积极推广探索教学做一体化、情境式教学、互动式教学。
7. 以“REACT”设计情境教学，以“3P”和“ARCS”模式设计互动式教学活动。
8.在教学资源建设上，突出学习包教学标准建设和借助教学平台开发网络教学资源。
9.在培养过程中，注重全人发展、服务学习、学长计划、过程资历认可（RPL）的实施。
（1）全人发展（Whole Person）：待人接物、如何看待钱、价值观、怎么安排自己。
（2）服务学习（Service Learning）：到非盈利机构作义工，提高学习动力，培养为他人服务精神，并把这些活动作为成绩之一。
（3）学长计划：学生辅导员。
（4）过程资历认可（RPL）：如学徒10年，要认可他。
页⾯布局的⼏种⽅式（静态化布局，流式布局，⾃适应布局，响应式布局，弹性布局）⼀、静态布局（static layout） 即传统Web设计，⽹页上的所有元素的尺⼨⼀律使⽤px作为单位。
1、布局特点 不管浏览器尺⼨具体是多少，⽹页布局始终按照最初写代码时的布局来显⽰。
常规的pc的⽹站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果⼩于这个宽度就会出现滚动条，如果⼤于这个宽度则内容居中外加背景，这种设计常见于pc端。
2、设计⽅法 PC：居中布局，所有样式使⽤绝对宽度/⾼度(px)，设计⼀个Layout，在屏幕宽⾼有调整时，使⽤横向和竖向的滚动条来查阅被遮掩部分； 移动设备：另外建⽴移动⽹站，单独设计⼀个布局，使⽤不同的域名如wap.或m.根据浏览器⽤户代理，识别移动端，并重定向。
pc端⾃适应设计详情参考优点：这种布局⽅式对设计师和CSS编写者来说都是最简单的，亦没有兼容性问题。
缺点：显⽽易见，即不能根据⽤户的屏幕尺⼨做出不同的表现。
当前，⼤部分门户⽹站、⼤部分企业的PC宣传站点都采⽤了这种布局⽅式。
固定像素尺⼨的⽹页是匹配固定像素尺⼨显⽰器的最简单办法。
但这种⽅法不是⼀种完全兼容未来⽹页的制作⽅法，我们需要⼀些适应未知设备的⽅法。
⼆、流式布局（Liquid Layout） 流式布局（Liquid）的特点（也叫"Fluid") 是页⾯元素的宽度按照屏幕分辨率进⾏适配调整，但整体布局不变。
代表作栅栏系统（⽹格系统）。
⽹页中主要的划分区域的尺⼨使⽤百分数（搭配min-*、max-*属性使⽤），例如，设置⽹页主体的宽度为80%，min-width为960px。
图⽚也作类似处理（width:100%, max-width⼀般设定为图⽚本⾝的尺⼨，防⽌被拉伸⽽失真）。
1. 布局特点 屏幕分辨率变化时，页⾯⾥元素的⼤⼩会变化⽽但布局不变。
【这就导致如果屏幕太⼤或者太⼩都会导致元素⽆法正常显⽰。
