网站设计与网页制作立体化项目教程（第4版） 课件 1-1 课件：网页体验-城市电子名片页面制作

1-1任务1：网页体验-城市电子名片页面制作第一篇：基本技能篇1-1任务1：网页体验-城市电子名片页面制作（1）能识别网页和网站。（2）掌握网页制作的相关技术。（3）掌握网页制作工具的基本功能。（4）熟悉网站建设的基本流程。能力要求学习导览内容丰富、视觉效果好的网页如何设计制作？引入1-1任务1：网页体验-城市电子名片页面制作任务概述制作国家历史文化名城“苏州”的城市电子名片页面，体验网页制作的流程、工具和技术，包括名片内容的制作，样式的设计以及简单时间特效的添加。1-1任务1：网页体验-城市电子名片页面制作任务思考1-1任务1：网页体验-城市电子名片页面制作（1）HTML、CSS、JavaScript在网页开发中的作用是什么？

（2）网页开发的工具软件有哪些？列举两个。

（3）开发一个网站的流程是怎样的？

讨论你喜欢哪个设计呢，为什么？A设计B设计1-1任务1：网页体验-城市电子名片页面制作讨论区任务一：选择你喜欢的设计，说说理由！（网络平台讨论区跟帖回复）1-1任务1：网页体验-城市电子名片页面制作什么是网页网站建设基础知识概念浏览器窗口中显示的一个页面被称为一个网页，网页实际上就是一个文件，这个文件存放在世界上某个地方的某一台计算机中，而且这台计算机必须要与互联网相连接。元素一般网页上都会有文字和图片等信息，而复杂一些的网页中还包括动画、表单、视频和音频等内容。什么是网站概念网站是众多网页的集合。不同的网页通过有组织的链接整合到一起，为浏览者提供更丰富的信息。网站同时也是信息服务类企业的代名词。网页小型网站大型网站1-1任务1：网页体验-城市电子名片页面制作讨论区任务二：静态网页及动态网页的概念与区别（网络平台讨论区跟帖回复）静态网页VS动态网页1-1任务1：网页体验-城市电子名片页面制作讨论区静态网页VS动态网页

静态网页动态网页内容网页内容固定网页内容动态生成后缀.htm；.html等.asp；.shtm；.php；.cgi等优点无需系统实时生成网页风格灵活多样日常维护简单更改结构方便交互性能强缺点交互性能差日常维护繁琐需要大量的系统资源合成网页数据库不支持支持1-1任务1：网页体验-城市电子名片页面制作网页制作技术1-1任务1：网页体验-城市电子名片页面制作讨论区任务三：HTML、CSS、JavaScript这三门技术在Web前端开发中的作用？（网络平台讨论区跟帖回复）1-1任务1：网页体验-城市电子名片页面制作常用开发工具下载地址：https://www.dcloud.io/hbuilderx.html1-1任务1：网页体验-城市电子名片页面制作网站建设流程定位网站的主题网站项目总结设计规划网站结构设计网页布局实现网页结构测试与发布网站CSS样式美化页面裁切网站设计稿收集整理资料设计网站形象规划建立站点JS脚本应用更新与维护网站1-1任务1：网页体验-城市电子名片页面制作实操任务四：在电脑上安装HBuilderX，熟悉软件的基本操作（看视频）。1-1任务1：网页体验-城市电子名片页面制作任务实施链接CSS样式表02.添加JavaScript特效03.01.新建网页文件，添加内容1-1任务1：网页体验-城市电子名片页面制作具体要求见任务书讨论区为您的家乡制作一个电子名片，让大家进一步了解她，发布在讨论区。1-1任务1：网页体验-城市电子名片页面制作在自己电脑上安装网页制作相关工具，PhotoShop2021、HBuilderX（必装），熟悉各个工具的基本界面和