网页设计素材图片资料-《网页设计与制作》全套教案.docx

201学年学期案例（首页） 教学时间 课程名称 课程代码 网页设计与制作 0000 授课教师 总学分：60周 学分：6 理论学分：30 实践学分：30 课程性质 必修课（） 选修课考核方式考核（课程类型 理论课 实践课 理论+实践教学专业 计算机信息管理、计算机网络技术、电子商务教学课 201 元素和属性设置，学习Html语言的基本结构和语法以及CSS样式表、表格和框架布局、模板、库以及图层、行为、插件的使用；掌握动态网页设计的基础知识和应用。掌握多种网页设计技术，具备网页设计、制作和网站管理的基本知识和技能，能够独立制作小型网站，适应网页管理员、网页设计师等岗位。 为后续课程打下基础。 课程重点和难点：掌握html和CSS，使用DW布局网页，使用图层、行为、模板和库，开发动态网页。 难点：正确使用表格和框架进行布局、HTML标签和CSS样式代码视图编辑，以及应用插件、行为、模板和库技术完成网站建设，以及应用动态网页的能力交互功能开发技术。 教学方法和手段 教学方法：本课程是一门理论与实践相结合的专业，课程主要采用任务驱动、项目化、案例分析、实际操作等教学方法。

教学方式：多媒体在线教学或投影演示、师生互动。 教材和参考资料 所选教材和主要教学参考资料的优缺点。 使用教材：《网页设计与制作项目教程》2017.12。 本书是职业教育“十二五”国家规划教材。 以项目任务单元的形式编写，有利于提高学生的学习兴趣和实践能力。 不足之处是由于体裁和篇幅的限制吉祥物，知识点和案例稍有欠缺。 如果结合参考资料辅助教学，更有利于知识的深入理解。 参考资料：《HTML+CSS+JavaScript网页设计从入门到精通》，胡晓霞，清华大学出版社，2017.10《DreamweaverCS6+ASP动态网站开发完全学习手册》，刘贵国，清华大学出版社，2014.7互联网WEB开发者资源，包括更全面的教程、完整的参考手册和庞大的代码库教材支持网站，提供教学文件和教材的下载、案例演示，并为教师和学生提供免费的网络空间来了解教学主题，开发工具、制作基础网页（1/2）教学方法理论课（）； 实践课（）； 实习（课时） 教学目的 教学要求：了解网页制作和发布的流程，了解使用Dreamweaver制作网页的基本方法。讲授网页制作和发布的要点和难点。流程：制作的基本方法使用Dreamweaver制作网页 教学方法 教学方法 教学方法：本课程是一门理论与实践相结合的专业课程，主要采用任务驱动、项目任务为主、案例分析、实际操作等教学方法。

教学方式：多媒体在线教学或投影演示、师生互动。 教学内容、时间分配、教学过程 1、新课程介绍： （1）课程概述。 （2）连接互联网，启动浏览器，输入URL：“”吉祥物设计，网页显示“Hello World！”的图文信息。 2. 教授新课程：任务负责人“Hello World！” 上传网站并浏览相关知识 1、网站项目开发流程 建设网站就像盖大楼一样。 它是一个系统工程，有自己特定的工作流程。 只有遵循以下八步流程，才有可能设计出一个满意的网站。 (1)确定网站主题。 网站主题是要包含的主要内容。 一个网站必须有一个鲜明的主题。 尤其是个人网站，10到60分钟的能力、精力、财力都不够。 因此，不能选择像“网易”、“搜狐”、“新浪”那样建设内容庞大、内容全面的综合性网站。 应该找到自己最感兴趣的方向，做深做透，发展自己的特色。 只有这样，才能给用户留下深刻的印象，才有存在的价值。 (2)收集材料明确网站主题后，需要围绕主题收集相关材料，包括图片、文字、声音、图像等。材料可以从书籍、报纸、光盘、多媒体中获取，也可以收集来自网络。 然后将收集到的素材丢弃，剔除精华，保留真假，作为制作自己网页的元素。 (3)网站策划 一个网站设计的成功与否，很大程度上取决于设计者的策划水平。 规划网站就像设计师设计建筑物一样。 只有设计好图纸，才能建造出美丽的建筑。

网站策划的内容主要包括文字和图片的使用（4）根据前期的策划制作网页。 这一步将把想法一步步变成现实。 这是一个复杂而详细的过程。 先大后小，先简单。 然后让网页变得更复杂。 所谓“先大后小”，就是在制作网页时，先设计大结构，然后逐步完善小结构设计。 先简单后复杂，就是先设计简单的内容，再设计复杂的内容，以便出现问题时可以方便修改。 在制作网页时，更加灵活地运用模板技术可以大大提高制作效率。 在Dreamweaver中，制作网页的第一步是创建一个站点，然后将每个网页和其他相关材料添加到该站点中。 (5)上传测试本机上制作出网页后，必须将其上传到互联网的网络空间，以便全世界的人都可以在线观看。 Web空间是建立在Web服务器之上的存储区域，而Web服务器是一台24小时与互联网相连的高性能计算机。 具有固定的IP地址，性能稳定，并有专人维护其正常运行。 网站空间性能方面，从高到低有“主机托管”、“VPS（虚拟专用服务器）”、“虚拟主机”三种选择。 一般来说，初学者可以选择价格便宜的“虚拟主机”。 价格每年千元以内。 如果仅用于学习，可以免费共同使用本书提供的多个网络空间。 读者可以通过本书的支持网站teachroot了解到：上例中为上传设置的服务器是一个网络空间，已经提前打开并准备好了。

申请网络空间后，您可以上传网络文件。 上传文件需要使用支持FTP协议的工具软件。 本书使用的软件Dreamweaver还集成了FTP功能，这就是之前《任务引导》中使用的功能。 此外，还有一些专门的FTP工具，如FileZilla、FlashFXP等，功能更强大。 网站上传后，您可以使用浏览器输入申请网络空间时获得的域名来浏览您的网站。 申请网站空间时获得的域名一般是免费的三级域名，是属于所申请的公司域名的下一级的子域名。 正规网站往往专门有teachroot、baidu，并绑定了网络空间，可以通过浏览访问。 它们显得更正式，使用起来也更方便。 一级域名的费用一般在100元/年以内。 （6）推广宣传网页完成后，要不断进行推广，让更多的人知道，提高您网站的访问率和知名度。 推广的方式有很多，比如在搜索引擎上注册、与其他网站交换链接、在各大博客或论坛上发布广告链接等。如果访问量比较大，比如每个网站都有几千人以上访问这一天，你可以考虑在网站上投放一些广告来赚钱。 （7）网站维护和更新时，注意经常维护和更新内容，保持内容新鲜。 只有不断地添加新的内容，才能吸引游客。 同时，发现错误必须及时纠正。

3.巩固练习：自由制作网页并发布 4.总结：了解制作和发布网页的流程。 使用 Dreamweaver 创建网页。 20分钟。 10分钟。 使用参考资料《HTML+CSS+JavaScript网页设计从入门到精通》，胡晓霞，清华大学出版社，2017.10 《DreamweaverCS6+ASP动态网站开发完全学习手册》，刘贵国，清华大学出版社，2014.7 互联网WEB开发者资源，包括更全面的教程、完整的参考手册和庞大的代码库教材支持网站网页设计素材图片资料，为教师和学生提供教学文件和资料的下载、案例演示以及免费的网络空间作业。 课后总结、教研室主任意见及签字： 教学结束后网页设计素材图片资料，将教案报教研室存档。 任课老师签名： 教学主题：了解开发工具、创建基本网页（2/2） 教学方法：理论课（ ）； 实践课（ ）； 实习（学分） 教学目的 教学要求 了解Dreamweaver的工作界面和操作流程 教学要点 教学难点 Dreamweaver的工作界面和操作流程 教学方法 教学方法 教学方法：本课程是一门理论与实践相结合的专业课程，主要内容采用任务驱动、项目任务、案例分析、实践等教学方法。

教学方式：多媒体在线教学或投影演示、师生互动。 教学内容、时间分配、教学流程 1、新课程介绍：Dreamweaver是一款非常优秀的可视化网页设计工具，Adobe公司的产品。 它与Flash、Fireworks并称为网页制作三剑客。 这三个软件相辅相成，是网页制作的绝佳组合。 在众多网页设计工具软件中，Dreamweaver因其兼具网页设计功能和网页编程功能而受到业内人士的青睐。 Dreamweaver 是一款适用于许多领域的工具，从个人主页设计到企业网站开发。 也是国内外常用的专用网页设计工具。 您可以登录Adobe官网下载最新版本的Dreamweaver并安装。 启动Dreamweaver的操作非常简单。 只需单击“开始”菜单按钮并选择“程序”“Adobe Dreamweaver CS6”即可启动该软件。 2、教新课： 2、工欲善其事，必先利其器。 在 Dreamweaver 中创建网站的方法有多种。 下面是常见的一种。 步骤为： 分钟 65 分钟 (1) 规划并设置场地。 确定文件的发布位置，检查站点要求、访问者资料和站点目标。

组织好信息并决定结构后创建您的网站。 （2）组织和管理站点文件 在“文件”面板中，您可以轻松地添加、删除和重命名文件和文件夹，以根据需要更改组织结构。 文件面板中还有许多工具可用于管理站点以及将文件上传或下载到远程服务器。 使用“资源”面板轻松组织站点中的资源； 然后，您可以将大多数资源直接从“资源”面板拖动到 Dreamweaver (3) 设计网页布局。 选择要使用的布局方法，或使用 Dreamweaver 布局选项的组合来创建站点。 外貌。 可以使用 Dreamweaver AP 元素、CSS 定位样式或预先设计的 CSS 布局来创建布局。 您还可以使用表格工具通过绘制和重新排列页面结构来快速设计页面。 如果您想同时在浏览器中显示多个元素，您还可以使用框架来布局文档。 最后，您可以根据模板创建新页面，然后在模板更改时自动更新这些页面的布局。 (4) 通过添加资源和设计元素来向页面添加内容，例如文本、图像、鼠标悬停图像、图像映射、颜色、视频、声音、HTML链接、跳转菜单等。Dreamweaver还提供了响应的行为具体事件。