HEML5+CSC3网页设计与制作实践（项目式）全套PPT课件.pptx

;;制作电脑版商品简介网页0101.html，其浏览效果如图所示。;单击“开始”→“所有程序”→“Adobe Dreamweaver”命令即可启动Dreamweaver。Dreamweaver启动成功后，会出现Dreamweaver的工作界面。;Dreamweaver工作界面的布局与组成如图所示。;“文档”工具栏：包含用于切换文档窗口视图的“代码”“拆分”“设计”“实时视图”按钮和一些常用操作。 “标准”工具栏：包含网页文档的基本操作按钮，如“新建”“打开”“保存”“剪切”“复制”“粘贴”等按钮。 文档窗口：也称为文档编辑区，该窗口所显示的内容可以是代码、网页，或者两者的共同体。 “属性”面板：用于查看和更改所选取的对象或文本的各种属性，每个对象有不同的属性。;面板组：Dreamweaver包括多个面板，这些面板都有不同的功能，将它们叠加在一起便形成了面板组。;认识浏览器窗口的基本组成。 认识网页的基本组成元素。;浏览器窗口主要由网页标题、菜单栏、命令栏、地址栏和网页窗口等部分组成。Internet Explorer（简称IE）浏览器窗口如图1所示，Chrome浏览器窗口如图2所示。;网页标题：位于浏览器窗口顶部的标题栏中，用来显示当前浏览网页的标题，便于浏览者清楚地知道所浏览网页的主题。 菜单栏：包含浏览网页时常用的菜单命令。 命令栏：包含浏览网页时常用的按钮。 地址栏：可以在地址栏中查看当前浏览网页的地址，在地址栏中输入地址并按“Enter”键，可以浏览相应的网页。 网页窗口：用于显示所浏览的网页。;【任务1-1-2】认识浏览器窗口的基本组成和网页的基本组成元素;【任务1-1-2】认识浏览器窗口的基本组成和网页的基本组成元素;【任务1-1-2】认识浏览器窗口的基本组成和网页的基本组成元素;创建所需的文件夹。 创建站点“易购网”。;创建站点“易购网”;【任务1-1-3】创建站点“易购网”;利用“管理站点”对话框创建一个名称为“快乐购”的站点。 利用“管理站点”对话框实现站点的多项操作。;【任务1-1-4】管理本地站点;【任务1-1-4】管理本地站点;【任务1-1-4】管理本地站点;【任务1-1-5】管理网站中的文件夹和文件;【任务1-1-5】管理网站中的文件夹和文件;【任务1-1-5】管理网站中的文件夹和文件;【任务1-1-6】设置网页的首选项;【任务1-1-6】设置网页的首选项;【任务1-1-6】设置网页的首选项;【任务1-1-7】新建网页文档0101.html与设置页面属性 ;【任务1-1-7】新建网页文档0101.html与设置页面属性 ;【任务1-1-7】新建网页文档0101.html与设置页面属性 ;【任务1-1-7】新建网页文档0101.html与设置页面属性 ;【任务1-1-7】新建网页文档0101.html与设置页面属性 ;【任务1-1-7】新建网页文档0101.html与设置页面属性 ;【任务1-1-7】新建网页文档0101.html与设置页面属性 ;【任务1-1-8】在网页中输入与编辑文本 ;【任务1-1-8】在网页中输入与编辑文本 ;【任务1-1-8】在网页中输入与编辑文本 ;【任务1-1-8】在网页中输入与编辑文本 ;【任务1-1-8】在网页中输入与编辑文本 ;【任务1-1-9】网页文档的基本操作;【任务1-1-9】网页文档的基本操作;【任务1-1-9】网页文档的基本操作;【任务1-1-9】网页文档的基本操作;【任务1-1-10】在网页中插入与编辑图像;【任务1-1-10】在网页中插入与编辑图像;【任务1-1-10】在网页中插入与编辑图像;【任务1-1-11】使用“资源”面板管理网站中的资源;【任务1-1-11】使用“资源”面板管理网站中的资源;【任务1-1-11】使用“资源”面板管理网站中的资源;【任务1-1-11】使用“资源”面板管理网站中的资源;【任务1-1-12】设置网页0101.html的头部内容;【任务1-1-12】设置网页0101.html的头部内容;【任务1-1-13】添加CSS代码美化网页的文本与图片;【任务1-1-13】添加CSS代码美化网页的文本与图片;【任务1-1-13】添加CSS代码美化网页的文本与图片;创建样式文件main.css，在该样式文件中定义标签header、article和p的属性。 创建网页文档0102.html，且链接外部样式文件main.css。 在网页0102.html中添加必要的HTML标签和输入文字。 在网页0102.html中合适位置插入图片。 浏览网页0102.html的效果。;;;;;;;学 习 进 步！;;;设计与制作电脑版帮助信息网页0201.html，其浏览效果如图所示。;“易购网”的通用布局结构从上至下划分为7个板块，分别为顶部导航菜单、