《网页设计与制作》全套教案 (1).docx
- 文档编号:142966
- 上传时间:2023-04-28
- 格式:DOCX
- 页数:131
- 大小:738.04KB
《网页设计与制作》全套教案 (1).docx
《《网页设计与制作》全套教案 (1).docx》由会员分享,可在线阅读,更多相关《《网页设计与制作》全套教案 (1).docx(131页珍藏版)》请在冰点文库上搜索。
教案
201~201学年学期
教学系部
教研室
课程名称网页设计与制作
授课班级
授课教师
XXXX职业技术学院
XXXX职业技术学院
教案(首页)
授课时间月日~月日教案编写时间月日
课程名称
课程代码
网页设计与制作
0000
授课教师
总学时:
60
周学时:
6
理论学时:
30
实践学时:
30
课程性质
必修课(√)选修课()
考核方式
考试(√)
考查()
课程类型
理论课实践课理论+实践√
授课专业
计算机信息管理、计算机网络技术、电子商务
授课班级
201X级XXXX班
课程任务及目标
本课程采用案例教学方法,主要任务是学习使用Dreamweaver创建、发布站点,为网页添加基本元素并进行属性设置,学习Html语言和CSS样式表的基本结构与语法,表格与框架布局、模板、库以及层、行为、插件的使用;掌握动态网页的设计基本知识与应用。
通过对本课程的学习,使学生掌握常用网页设计工具,熟练运用多种网页设计技术,具备Web网页设计、制作及站点管理的基本知识和技能,能够独立制作小型网站,适应网站管理员、网页设计师岗位。
为后续课程奠定基础。
课程重点及难点
重点:
掌握html和CSS,利用DW来布局网页,层、行为、模板、库的使用,开发动态网页。
难点:
正确使用表格和框架进行布局,HTML标签和CSS样式的代码视图编辑,以及应用插件、行为、模板、库技术来完成网站建设,能够应用动态网页技术进行交互式功能开发的能力。
教学方法与手段
教学方法:
本课程属于理论与实践结合的专业课程,主要采用任务驱动式、项目任务式、案例分析式、实操等教学方法。
教学手段:
多媒体网络教学或投影演示,师生互动。
教材及
参考资料
所选用教材的优势与不足,教学主要参考资料。
使用教材:
《网页设计与制作项目教程》,冯涛,大连理工大学出版社,2017.12。
本教材为“十二五”职业教育国家规划教材,采用项目任务单元的编写方式,有利于提高学生学习兴趣和实践动手能力。
不足之处,因体裁和篇幅所限,知识点和案例略欠丰富,若结合参考资料辅助教学更有利于知识的深入了解。
参考资料:
1.《HTML+CSS+JavaScript网页设计从入门到精通》,胡晓霞,清华大学出版社,2017.10
2.《DreamweaverCS6+ASP动态网站开发完全学习手册》,刘贵国,清华大学出版社,2014.7
3.因特网WEB开发者资源,包括较全面的教程、完善的参考手册以及庞大的代码库
4.http:
/教材支持网站,提供教学文件及素材下载、案例演示,同时为师生提供免费网页空间
XXXX职业技术学院
教案
第1周第1次课
授课时间
授课题目
了解开发工具,制作基本网页(1/2)
授课方式
理论课(√);实践课( );实习( )
教学时数
2学时
教学目的
教学要求
理解制作与发布网页的流程,了解使用Dreamweaver制作网页基本方法
教学重点
教学难点
制作与发布网页的流程
Dreamweaver制作网页基本方法
教学方法
教学手段
教学方法:
本课程属于理论与实践结合的专业课程,主要采用任务驱动式、项目任务式、案例分析式、实操等教学方法。
教学手段:
多媒体网络教学或投影演示,师生互动。
教学内容
时间分配
教学进程
1.导入新课:
(1)课程概述。
(2)连接互联网,启动浏览器,输入网址:
“”,网页显示“世界你好!
”的图文信息
2.讲授新课:
任务引领“世界你好!
”
1.创建站点
2.在站点中创建网页
3.上传网站并浏览
相关知识
1.网站项目开发流程
建立一个网站就像盖一幢大楼一样,它是一个系统工程,有着自己特定的工作流程,只有遵循以下八步流程,才能有可能设计出一个令人满意的网站。
(1)确定网站主题
网站主题就是所要包含的主要内容,一个网站必须要有一个鲜明主题。
特别是对于个人网站,能力、精力、财力都不足,因此就不能选择制作像“网易”、“搜狐”、“新浪”等那样包罗万象,内容大而全的综合网站。
应该找准一个自己最感兴趣的方向,做深、做透,办出自己的特色,这样才能给用户留下深刻的印象,才能有存在的价值。
(2)搜集材料
明确网站的主题以后,就要围绕主题搜集相关材料了,形式包括图片、文字、声音、影像等。
材料既可以从图书、报纸、光盘、多媒体上得来,也可以从互联网上搜集,然后把搜集的材料去粗取精,去伪存真,作为自己制作网页的素材。
(3)规划网站
一个网站设计得成功与否,很大程度上决定于设计者的规划水平,规划网站就像设计师设计大楼一样,图纸设计好了,才能建成一座漂亮的楼房。
网站规划的内容主要包含以下6个方面:
l网站的结构
l栏目的设置
l网站的风格
l颜色搭配
l版面布局
l文字图片的运用
(4)制作网页
依照前面规划,本步骤将一步步地把想法变成现实,这是一个复杂而细致的过程,需要按照先大后小、先简单后复杂来进行网页的制作。
所谓先大后小,就是说在制作网页时,先把大的结构设计好,然后再逐步完善小的结构设计。
先简单后复杂,就是先设计出简单的内容,然后再设计复杂的内容,以便出现问题时好修改。
在制作网页时要多灵活运用模板技术,可以大大提高制作效率。
在Dreamweaver中,制作网页的第一步是先创建一个站点,然后再在站点内添加各网页及其他相关素材。
(5)上传测试
在本机将网页制作完毕后,最后还要上传到互联网的网页空间上,才能够让全世界的人上网观看,
网页空间是建立在Web服务器上的一块存储区域,而Web服务器是每天都24小时接入互联网的高性能的计算机,有固定的IP地址,稳定的性能,并有专人维护其正常运转。
网页空间从性能上,由高到低排列有“主机托管”、“VPS(虚拟专用服务器)”、“虚拟主机”三种方式可选,一般初学者选择比较便宜的“虚拟主机”即可,价格在每年千元以内。
若仅作为学习使用,可共同使用由本书免费提供的若干个网页空间。
读者可通过本书的支持网站获取;
注:
前例中设置用于上传的服务器即是一个网页空间,事先已开通准备好了。
网页空间申请好了,就可以上传网页文件了,上传文件需使用支持FTP协议的工具软件,作为本书使用的Dreamweaver软件,本身也集成了FTP功能,前面的“任务引领”中使用的即是。
除此之外,还有一些专门的FTP工具,如FileZilla,FlashFXP等,功能更强大。
网站上传以后,即可以使用浏览器输入申请网页空间时获得的域名来浏览自己的网站了。
申请网页空间时获得的域名一般是免费的三级域名,是隶属于申请公司域名下一级的子域名。
正式的网站往往都专门申请一个标准的一级域名,如、、,绑定到网页空间上,浏览都访问起来,显得更正规,使用也更方便。
一级域名一般每年百元以内。
(6)推广宣传
网页做好之后,还要不断地进行宣传,这样才能让更多的人认识它,提高自己网站的访问率和知名度。
推广的方法有很多,例如到搜索引擎上注册,与别的网站交换链接,到各大博客或论坛发广告链接等。
如果访问量比较大,如每日有几千人以上访问,就可以考虑在网站上挂一些广告进行赢利了。
(7)维护更新
网站要注意经常维护更新内容,保持内容的新鲜,只有不断地给它补充新的内容,才能够吸引住浏览者。
同时,要对发现的错误问题及时进行修正。
3.巩固练习:
自由制作一个网页并发布
4.归纳小结:
理解制作与发布网页的流程
使用Dreamweaver制作网页基本方法
10分钟
60分钟
20分钟
10分钟
使用的
参考资料
1.《HTML+CSS+JavaScript网页设计从入门到精通》,胡晓霞,清华大学出版社,2017.10
2.《DreamweaverCS6+ASP动态网站开发完全学习手册》,刘贵国,清华大学出版社,2014.7
3.因特网WEB开发者资源,包括较全面的教程、完善的参考手册以及庞大的代码库
4.http:
/教材支持网站,提供教学文件及素材下载、案例演示,同时为师生提供免费网页空间
作业
课后小结
教研室
主任意见
签字:
年月日
在授课结束后将教案交到教研室存档任课教师签字:
XXXX职业技术学院
教案
第1周第2次课
授课时间
授课题目
了解开发工具,制作基本网页(2/2)
授课方式
理论课(√);实践课( );实习( )
教学时数
2学时
教学目的
教学要求
了解Dreamweaver的工作界面和操作流程
教学重点
教学难点
Dreamweaver的工作界面和操作流程
教学方法
教学手段
教学方法:
本课程属于理论与实践结合的专业课程,主要采用任务驱动式、项目任务式、案例分析式、实操等教学方法。
教学手段:
多媒体网络教学或投影演示,师生互动。
教学内容
时间分配
教学进程
1.导入新课:
Dreamweaver是一款非常优秀的可视化网页设计工具,为Adobe公司旗下产品。
它与Flash、Fireworks合称为网页制作三剑客,这三个软件相辅相承,是制作网页的极佳组合。
在众多网页设计工具软件中,Dreamweaver之所以受到业内人士的青睐,是因为它同时具备网页设计功能和网页编程功能。
Dreamweaver是适用于从个人主页设计到企业站点开发等众多领域的工具,也是在国内外普遍应用的专用网页设计工具。
可以登录Adobe官方网站
启动Dreamweaver的操作很简单,只需单击“开始”菜单按钮,选择“程序”→“AdobeDreamweaverCS6”,即可启动该软件
2.讲授新课:
2.工欲善其事,必先利其器
在Dreamweaver中可以使用多种方法来创建Web站点,下面介绍的是其中常见的一种,其步骤依次为:
(1)规划和设置站点
确定将在哪里发布文件,检查站点要求、访问者情况以及站点目标。
在组织好信息并确定结构后创建站点。
(2)组织和管理站点文件
在“文件”面板中,可以方便地添加、删除和重命名文件及文件夹,以便根据需要更改组织结构。
在“文件”面板中还有许多工具,可使用它们管理站点,向远程服务器上传或下载文件。
使用“资源”面板可方便地组织站点中的资源;然后可以将大多数资源直接从“资源”面板拖到Dreamweaver文档中。
(3)设计网页布局
选择要使用的布局方法,或综合使用Dreamweaver布局选项创建站点的外观。
可以使用DreamweaverAP元素、CSS定位样式或预先设计的CSS布局来创建布局。
也可以使用表格工具,通过绘制并重新安排页面结构来快速地设计页面。
如果希望同时在浏览器中显示多个元素,还可以使用框架来设计文档的布局。
最后,可以基于模板创建新的页面,然后在模板更改时自动更新这些页面的布局。
(4)向页面添加内容
添加资源和设计元素,如文本、图像、鼠标经过图像、图像地图、颜色、影片、声音、HTML链接、跳转菜单等。
Dreamweaver还提供相应的行为以便为响应特定的事件而执行任务,例如在访问者单击“提交”按钮时验证表单,或者在主页加载完毕时打开另一个浏览器窗口。
最后,Dreamweaver还提供了工具来最大限度地提高站点的性能,并测试页面以确保能够兼容不同的Web浏览器。
(5)通过手动编码创建页面
手动编写代码是创建页面的另一种方法。
Dreamweaver除提供了易于使用的可视化编辑工具,同时也提供了这种手动的、更为自由的编码环境;编写页面时随时可以采用其中任一种方法或同时采用这两种方法来创建和编辑页面。
(6)针对动态内容设置动态网页技术程序
许多网站都包含了动态网页技术,动态网页技术可以使访问者能够在网页上查看存储在数据库中的信息,或者向数据库中添加、编辑信息。
若要创建动态网页,必须先设置Web服务器和应用程序服务器,创建或修改Dreamweaver站点,然后连接到数据库。
可以定义动态内容的多种来源,如从数据库提取的记录集或表单参数等。
如果要在页面上添加动态内容,只需将该内容拖动到页面上即可。
可以通过设置页面来同时显示一条记录或多条记录,显示多页记录,添加用于在记录页之间来回移动的特殊链接,以及创建记录计数器来帮助用户跟踪记录。
如果需要更多的灵活性,则可以创建自定义服务器行为和交互式表单。
3.DreamweaverCS6的操作界面
Dreamweaver整个工作界面如图1-19所示,其工作区非常灵活,用户可以根据自己的习惯定制工作区以查看文档和对象属性。
(1)查看操作界面
菜单栏:
同Windows应用程序一样,菜单栏中汇集了Dreamweaver中各种命令功能
文档工具栏:
以图标形式汇集了常用工具
文档窗口:
文档窗口编辑的内容与浏览器中最终显示的画面内容相同,该窗口是实际制作页面时最常用的窗口
面板组:
包含了“插入”、“CSS样式”、“文件”等常用面板。
双击可以展开或关闭某个面板,用户也可以根据自己的习惯通过“菜单”→“窗口”重新指定其他面板
状态栏:
提供与正创建的文档有关的其它信息,包括选取工具、“文档”窗口的大小预定义,以及文档字节容量、下载时间和文本编码
属性面板:
每个对象或文本都具有不同的属性,属性面板用于查看和更改所选对象或文本的各种属性
标签选择器:
显示环绕当前选定内容的标签的层次结构。
单击该层次结构中的任何标签可以选择该标签及其包含的全部内容
工作区切换器:
通过将面板的当前大小和位置存储为自定义的工作区,即使移动或关闭了面板,也可以恢复该工作区。
系统同时也内置了各类开发模式下的工作区
(2)属性面板
属性面板可以检查和编辑当前选定页面元素(如文本和插入的对象)的最常用属性。
属性面板的内容根据选定的元素会有所不同。
例如,选择一段文本时,属性面板显示字体、字号、加粗等属性,而如果选择页面上的一个图像,则属性面板将改为显示该图像的一些属性,如图像的文件路径、图像的宽度和高度等。
(3)灵活运用设计视图和代码视图
Dreamweaver的特征之一就是采用了“所见即所得”方式来编辑网页,并适当的汲取了HTML编辑器的优点。
在“所见即所得”方式下,即使用户不了解HTML标记也可以编辑网页。
但是,要想制作出完善、多样化的效果,还是需要学会HTML的使用方法。
在Dreamweaver中可以分别显示“所见即所得”方式的“设计视图”和以HTML标记显示的“代码视图”,也可以将两种视图通过两个窗口同时显示出来以做对比。
两种视图按钮均位于文档工具栏,下面首先了解一下文档工具栏的组成。
可对设计视图和代码视图进行切换。
Dreamweaver的默认显示的窗口是设计视图。
若想将屏幕一分为二,同时显示设计视图和代码视图,则单击文档工具栏中的“拆分”按钮。
此时,在设计视图的左侧出现代码视图。
如果选择右侧视图中对象,左侧则自动选择对应的HTML代码,反之亦然。
如果想完全在代码视图中进行操作,就单击“代码”按钮。
此时,整个操作画面将转换为HTML代码视图。
如图1-24所示。
在该视图,可以自由地对HTML等代码直接进行编写。
4.可自由摆放的面板组
常用的面板可以一直打开,不常用的面板则可隐藏起来,以便扩大操作区域。
利用“窗口”菜单可以打开或关闭新窗口或面板组。
前面带勾选标志的是当前已打开的面板。
下面先简单确认一下都有哪些面板,至于其中一些面板的使用方法将在后续模块中结合实例进行说明。
Dreamweaver中有很多面板,每个设计者常用的功能都互不相同,且执行不同操作时,各个功能项的重要度也会随之发生变化。
如果将个人常用的且重要的面板放置于醒目的位置,设计者使用起来将会非常方便。
除通过“窗口”菜单对面板进行选择打开或关闭外,对已打开的面板,还可以双击面板的标题栏对其展开和收缩,或是拖拽面板的标题栏使其移动到新位置,拖动面板的边框还可以调整该面板的宽度或高度。
项目渐近网站项目“我心飞扬”之第一阶段“温馨提示”
具体完成过程
1.创建站点
启动Dreamweaver,在“文件”面板内,单击“管理站点”链接。
在弹出的“管理站点”对话框,单击“新建站点”链接。
填写“站点名称”为“我心飞扬”,“本地站点文件夹”内选择放置本站点的位置。
单击“保存”按钮直至完成站点的创建。
2.在站点中创建网页
(1)右击“文件”面板内的主目录“站点-我心飞扬”,选择“新建文件夹”,重命名为“images”,再次右击主目录“站点-我心飞扬”,选择“新建文件”,命名为“index.html”。
(2)双击打开“index.html”文件,选择菜单“插入”→“表格”,弹出“表格”对话框,设置“行数”为2,“列”为2,表格宽度值为100,单位选“百分比”。
如图1-29所示。
单击“确定”后,即在当前网页内插入一个2行2列的表格。
(3)通过鼠标拖拽选中表格中第1行的两个单元格,在选中的单元格上右击弹出快捷菜单,选择“表格”→“合并单元格”。
(4)在合并后的第1行单元格内,以及第2行第2列单元格内添加相关文字。
(5)单击表格第2行左单元格,使光标进入该区域内,选择“插入”→“图像”,弹出“选择图像源文件”对话框。
选择素材图片后单击确定,要确保其保存在站点的images子文件夹内。
(6)调整表格中间竖线左右宽度,使其位于合适的位置。
3.巩固练习:
自由制作一个网页并发布
4.归纳小结:
网站项目开发流程
Dreamweaver常用功能的使用
各面板与窗口的名称及作用,Dreamweaver创建站点步骤
5分钟
65分钟
20分钟
10分钟
使用的
参考资料
1.《HTML+CSS+JavaScript网页设计从入门到精通》,胡晓霞,清华大学出版社,2017.10
2.《DreamweaverCS6+ASP动态网站开发完全学习手册》,刘贵国,清华大学出版社,2014.7
3.因特网WEB开发者资源,包括较全面的教程、完善的参考手册以及庞大的代码库
4.http:
/教材支持网站,提供教学文件及素材下载、案例演示,同时为师生提供免费网页空间
作业
课后小结
教研室
主任意见
签字:
年月日
在授课结束后将教案交到教研室存档任课教师签字:
XXXX职业技术学院
教案
第1周第3次课
授课时间
授课题目
构建网页的图文信息(1/3)
授课方式
理论课(√);实践课( );实习( )
教学时数
2学时
教学目的
教学要求
通过“古诗鉴赏”页面制作的学习,了解站点的相关知识,掌握本地站点的建立、网页中的文字和图像排版等相关知识。
教学重点
教学难点
1.创建网站制作空间
2.设置网页文档属性
3.修改文字属性
4.利用项目列表整理散乱的内容
5.在网页文档中插入水平线
6.插入各种符号
教学方法
教学手段
教学方法:
本课程属于理论与实践结合的专业课程,主要采用任务驱动式、项目任务式、案例分析式、实操等教学方法。
教学手段:
多媒体网络教学或投影演示,师生互动。
教学内容
时间分配
教学进程
1.导入新课:
任务引领一“古诗鉴赏”
任务说明:
网页打开后,将显示“古诗鉴赏”界面,运行效果演示。
2.讲授新课:
完成过程
首先建立一个本地站点,然后对页面进行布局,最后使用文字和图片丰富整个网页。
具体步骤如下:
(1)新建一个本地站点
(2)选择“修改”→“页面属性”菜单,选择背景图像
(3)为便于后面的处理,可单击“工作区切换器”(设计器)切换到“Dreamweaver”的“经典”视图,在“常用”快捷栏中单击表格图标(),插入3行1列的表格,设置宽度为500像素,边框粗细为0像素,单元格边距和单元格间距均为0,然后使其居中
(4)将光标放在表格中的第一行,插入图片logog.jpg和menug.jpg,在表格的第二行输入文字“首页—>古诗大全—>宿建德江”,在表格的第三行插入相关文字
相关知识
文字是网页中最基础的信息,浏览者主要通过文字来了解网页的内容,如果掌握了文字的相关设置,就可以创建出一个基本的网页了。
1.创建网站制作空间
(1)网站与网页的区别
网站是一个整体,网页是一个个体,一个网站是由很多网页构建而成。
网站和网页的关系就像家庭和家人一样。
简单的来说网页与网站的区别如下:
网站是由网页集合而
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页设计与制作 网页设计与制作全套教案 1 网页 设计 制作 全套 教案
![提示](https://static.bingdoc.com/images/bang_tan.gif)