《网页设计与制作—第二章》:Dreamweaver(免费下载)
- 格式:ppt
- 大小:545.50 KB
- 文档页数:27
课程教案项目效果【任务一】为首页和子页设置链接——应用超链接超链接包括很多种,最常用的是常规超链接,另外还有图片链接、下载链接、电子邮件链接等。
(一)设置常规超链接常规超链接包括内部超链接和外部超链接。
内部超链接是指目标文件位于站点内部的链接;外部超链接可实现网站与网站之间的跳转,也就是从本网站跳转到其他网站。
1. 内部超链接内部超链接的设置非常灵活,在选中要设置超链接的文本或图像后,可以在“属性”面板上的“链接”编辑框中直接输入要链接到的网址或网页名称;也可以通过单击“属性”面板上“链接”编辑框后的“浏览文件”按钮,在弹出的“选择文件”对话框中选择要链接到的文件。
还有一种方法是单击并拖动“属性”面板上“链接”编辑框后的“指向文件”按钮到“文件”面板中的文件上,前提是此时的“文件”面板中显示的是该网页所在的网站。
“属性”面板上“链接”编辑框下方的“目标”下拉列表框表示打开链接文档的方式,默认为在当前窗口中打开链接网页,其中各选项意义如下: _blank:表示在保留当前网页窗口的状态下,在新窗口中显示被打开的链接网页。
●_parent:表示在当前窗口显示被打开的链接网页;如果是框架网页,则在父框架中显示被打开的链接网页。
●_self:表示在当前窗口显示被打开的链接网页;如果是框架网页,则在当前框架中显示被打开的链接网页。
●_top:表示在当前窗口显示被打开的链接网页,如果是框架网页,则删除所有框架,显示当前网页。
2. 外部超链接外部超链接只能采用一种方法设置,就是在选中对象后,在“属性”面板上的“链接”编辑框中输入要链接到的网址。
如图所示,为网页中的文本“中国雅虎”设置到雅虎网站的外部超链接。
(二)设置图片链接和下载链接所谓图片链接,就是在单击网页中的某小图片时,在新窗口中打开一幅大图片;下载链接是指单击某个超链接时会打开一个“文件下载”对话框(或自动启动下载工具),通过在该对话框中单击“打开”或“保存”按钮,打开或下载文件。
课程教案“database”。
【活动一】定义站点步骤 1 在电脑的磁盘上创建一个要作为站点的根文件夹。
步骤 2 启动 Dreamweaver CS3 后,选择“站点”→“新建站点”菜单,打开“未命名地点1的站点定义为”对话框。
单击“基本”选项卡,在上面的编辑框中输入站点名(此处为“fuligong”),然后单击“下一步”按钮。
步骤 3 由于创建的是静态站点,因此,在接着弹出的对话框中选择“否,我不想使用服务器技术”单选钮,然后单击“下一步”按钮。
步骤 4 在接下来弹出的对话框中选择“编辑我的计算机…”单选钮,单击“您将把…”编辑框后的文件夹图标,在打开的“选择站点fuligong的本地根文件夹:”对话框中选择本地硬盘上的站点根文件夹,然后单击“选择”按钮。
步骤 5 回到“fuligong的站点定义为”对话框,单击“下一步”按钮。
由于现在只是在本地编写和调试网页,故不需要连接到远程服务器,在“您如何…”下拉列表中选择“无”。
步骤 6 单击“下一步”按钮,系统显示所设参数总结,单击“完成”按钮,此时便完成了站点的创建。
【活动二】新建文档Dreamweaver中的文档也就是网页,创建新网页的方法有多种。
下面使用“文件”菜单创建网页。
步骤 1 选择“文件”→“新建”菜单,打开“新建文档”对话框。
在左侧的“文档类型”列表中选择创建方式,这里选择“空白页”,在“页面类型”列表中选择网页类型,这里选择“HTML”,在“布局”列表中选择布局类型,这里选择“无”。
步骤 2 设置完后单击“创建”按钮,就创建了一个默认名为“Untitled-1”的新文档。
如图所示:【活动三】保存和关闭文档新建或编辑网页文档后,需要保存文档才能使所做的设置生效。
步骤 1 如要保存文档,可选择“文件”→“保存”菜单,或按【Ctrl+S】组合键,弹出“另存为”对话框,在该对话框的“保存在”下拉列表中选择保存文档的文件夹,在“文件名”编辑框中输入文档名。
《网页设计与制作》课程标准适用专业:计算机专业学时: 72课时1、课程定位和课程设计《网页设计与制作》课程是中职计算机相关专业的一门专业必修课程。
本课程以图形图像处理为前导课程,本课程将从职业技术教育的特点出发,以培养学生实际动手能力为目标,使学生具备网页制作、网站规划与网站维护的专业能力和方法能力,以及培养学生的团队协作、沟通表达、工作责任心、职业规范和职业道德等综合素质和能力。
作为专业的核心主干课程,使学生掌握商业网站的开发和流程,并能独立进行操作,在就业时能够成为一个合格的人才。
学生毕业后可胜任网站管理员、网页设计员、网页美工员等工作岗位。
2、课程目标本课程以学生能够网页网站开发与维护的实际工作能力为学习目标,使学生具备计算机及其它相关专业课学习和应用中所必需的网页制作与网站设计的基本知识和基本技能,形成解决实际应用问题的方法能力,为以后的学习动态网页设计课程打下基础。
1、素质目标(1) 培养具有较强的网页设计创意思维、艺术设计素质;(2) 培养学生在学习过程中解决困难的能力;(3) 培养学生在学习过程中培养兴趣的能力,提高工作、学习的主动性;(4) 培养学生理论联系实际的工作和学生方法;(5) 培养具有高度责任心和良好的团队合作精神;(6) 具有社会责任感。
2、知识目标(1) 了解WEB站点的工作原理;(2) 理解Internet、WWW、HTTP、HTML的定义,计算机网络概念和作用;(3) 了解服务器、客户端、浏览器的概念和作用;(4) 掌握常规网站的规划及流程;(5) 熟练掌握HTML语言中各种标记符的运用能力;(6) 熟练掌握Dreamweaver应用软件的使用;(7) 理解网页中脚本语言的使用方法;(8) 熟练开发常规静态网站。
3、能力目标(1) 熟练掌握Dreamweaver应用软件制作网站及网页;(2) 熟练掌握使用绝对和相对URL,创建超链接,图像链接;(3) 掌握在网页中添加CSS的方法;(4) 培养学生设计、制作和维护动态网站。
《网页设计与制作》教学大纲英文名称:Web Design and Production课程代码:221001005课程类别:专业基础课课程性质:必修开课学期:大一第2学期总学时:36(讲课:36)总学分:2考核方式:平时考勤、作业、课堂表现、期末大作业先修课程:计算机基础适用专业:网络与新媒体专业一、课程简介课程是网络与新媒体专业专业基础课,授课学期为大一第二学期,先修课程为《计算机基础》、《计算机网络技术》,后续课程有《动态网页设计》、《新媒体产品设计与管理》、《搜索引擎优化》等。
本课程依据网页设计员、网页制作员、网站管理员所应具备的职业能力,参照计算机高新技术网页制作员4级标准,以互联网上具体企业网站为工作任务,重点培养学生解决实际问题的能力,充分体现“职业性”的特点。
每个模块包含“知识拓展”和“能力拓展”部分,给学生留出足够的拓展空间,引导学生提出自己独特的设计思路,符合高职课程“开放性”的要求。
本课程以学生实践操作为主,要求课程全部在实训室完成,体现高职教育的“实践性”特点。
本课程主要通过理论授课的方式完成教学,授课课时为36学时,考核方式由平时考勤、作业、课堂表现和期末大作业构成。
二、课程目标及其对毕业要求的支撑本课程依据网页设计员、网页制作员、网站管理员所应具备的职业能力,以及计算机高新技术网页制作员(DreamWeaver平台)4级标准,培养学生网页设计与制作的职业能力、认真负责的工作态度、创新进取的学习态度、团结合作的团队精神,培养学生胜任工作岗位的基本技能和综合素质。
三、课程教学要求第一章HTML基础教学内容:第一节 Web技术简介第二节 HTML是什么第三节 HTML入门简介第四节本章总结学生学习预期成果:了解HTML基本概念、web前端技术。
教学重点:无教学难点:无第二章前端开发工具教学内容:第一节前端开发工具第二节新建HTML页面学生学习预期成果:了解前端开发工具,会搭建一个简单的HTML页面。
《网页设计与制作》教案第一章:网页设计基础1.1 网页设计概述介绍网页设计的概念、目的和重要性讨论网页设计的标准和原则1.2 网页设计流程讲解网页设计的基本流程,包括需求分析、设计稿、切片、编码和测试等步骤1.3 网页设计工具介绍常用的网页设计工具,如Photoshop、Dreamweaver、Fireworks等第二章:HTML与CSS基础2.1 HTML概述介绍HTML的概念、作用和基本结构2.2 HTML标签讲解常用的HTML标签,如、段落、图像、、列表等2.3 CSS概述介绍CSS的概念、作用和基本语法2.4 CSS选择器讲解常用的CSS选择器,如类选择器、ID选择器、属性选择器等第三章:网页布局与排版3.1 网页布局概述介绍网页布局的概念和重要性3.2 常用的网页布局方法讲解常用的网页布局方法,如固定布局、百分比布局、弹性布局等3.3 排版与字体介绍排版和字体的概念、作用和常用属性3.4 响应式网页设计讲解响应式网页设计的概念、方法和实现方式第四章:网页特效与交互4.1 网页特效概述介绍网页特效的概念和作用4.2 JavaScript基础讲解JavaScript的概念、作用和基本语法4.3 常用的网页特效与实例讲解常用的网页特效,如鼠标悬停效果、下拉菜单、滚动动画等,并提供实例进行演示4.4 交互式网页设计讲解交互式网页设计的概念、方法和实现方式第五章:网页设计与制作实践5.1 实践项目概述介绍实践项目的需求和目标5.2 网页设计稿制作根据实践项目需求,使用设计工具制作网页设计稿5.3 网页编码与测试使用HTML和CSS编写网页代码,并进行测试和调试讲解网页发布的步骤和注意事项,以及常用的网页推广方法第六章:网页图像与多媒体6.1 图像格式与优化介绍常见的网页图像格式,如JPG、PNG、GIF等,以及图像优化方法6.2 音频与视频讲解如何在网页中嵌入音频和视频,以及常用的媒体格式6.3 Flash动画介绍Flash动画的概念、制作方法和在网页中的应用6.4 动态效果与动画讲解如何在网页中实现动态效果和动画,包括使用CSS动画和JavaScript实现第七章:网页服务器与数据库7.1 服务器概述介绍网页服务器的概念、作用和常用服务器软件7.2 数据库概述介绍数据库的概念、作用和常用数据库管理系统7.3 动态网页制作基础讲解动态网页制作的基本原理,如服务器端编程和数据库连接7.4 实践项目:搭建简易的个人博客系统讲解如何使用服务器和数据库搭建一个简易的个人博客系统,包括前端设计和后端编程第八章:网页安全与SEO介绍网页安全的概念和重要性,以及常见的网络安全威胁8.2 网页安全措施讲解如何防范网络攻击和提高网页安全性,如使用SSL证书、X-Frame-Options 等8.3 SEO概述介绍搜索引擎优化(SEO)的概念、作用和方法8.4 SEO实践技巧讲解如何优化网页内容、结构和,以提高搜索引擎排名第九章:网页设计与制作的进阶技巧9.1 响应式网页设计深入讲解响应式网页设计的原理和实践方法,包括媒体查询和弹性布局9.2 前端框架与库介绍常用的前端框架和库,如Bootstrap、jQuery、React等,以及如何使用它们提高网页制作效率9.3 网页性能优化讲解如何提高网页加载速度和性能,包括图片优化、代码压缩和缓存策略9.4 实践项目:制作一个响应式商务网站讲解如何使用响应式设计和前端框架制作一个商务网站,包括布局、样式和交互设计第十章:网页设计与制作的拓展与趋势10.1 网页设计与制作的未来趋势探讨网页设计与制作的发展方向,如虚拟现实(VR)、增强现实(AR)等技术的应用10.2 网页设计规范与最佳实践介绍网页设计规范和最佳实践,以提高网页质量和用户体验10.3 跨平台网页设计与制作讲解如何使用跨平台技术,如PWA(Progressive Web Apps)、Node.js等,实现网页在不同平台和设备的兼容性和性能10.4 实践项目:制作一个跨平台的网页应用重点和难点解析重点环节1:网页设计基础和流程网页设计的标准和原则是设计的基石,需要重点掌握。