Web前端设计与开发技术教学课件完整版电子教案.ppt

;Web前端设计与开发技术（HTML+CSS+JavaScript）;学生作品展示;/ 站酷;/ 蓝色理想;/ 天极网设计在线;/ 网页设计手册;/ 三联教程;推荐参考书;第1章 网站规划 ;;1.1网站和网页的基础知识;静态网页与动态网页;;;;网站的类型;;;;;网页元素;1.2 网页设计的思考;选定网站主题和名称;;设计网站CI形象;;;;网页设计的一般流程;认识Dreamweaver CC 2018;Dreamweaver CC 2018工作界面;其他网页制作工具;HTML的概念;1.5 上机练习;Web前端设计与开发技术（HTML+CSS+JavaScript）;第2章规划网站结构创建站点;;2.1 规划网站结构;设计目录结构;;规划链接结构;;2.2 创建本地站点;2.3 创建站点文件;2.4上机练习;Web前端设计与开发技术（HTML+CSS+JavaScript）;第3章首页设计与网页布局;;3.1首页布局;版面布局;首页布局简要步骤;设计视图选项;;;;3.3使用表格;插入表格;;编辑表格;HTML head元素;设置单元格、行或列属性;调整表格、列和行的大小;;插入及删除行或列;;;表格的其他操作;;HTML 表格;3.4 上机练习;Web前端设计与开发技术（HTML+CSS+JavaScript）;第4章 ;文本和图像时网页最基本的元素，文本是传递和展示信息的主要手段，图像不仅可以美化网页，还可以展现生动的视觉效果。 本章主要介绍Dreamweaver CC 2018如何在网页中插入文本和图像，并对文本和图像进行编辑操作，制作基本网页，实现图文并茂。 学习目标 在网页中插入文本 编辑文本 在网页中插入图像 编辑图像;4.1 文本的使用;版面布局;;;;4.2 编辑文本;;;设置列表;;;4.3 图像的使用;插入图像;【例4.2】新建一个网页文档，设置页面背景图片，并在网页中插入一个透明的PNG图像文件。 新建网页文档，在“属性”面板单击“页面属性”按钮。 默认打开的是“外观”分类选项，单击右侧“背景图像”文本框右侧的“浏览”按钮，弹出“选择图像源文件”对话框。 选择要设置为网页背景图像的文件，单击“确定”按钮，返回“页面属性”对话框。 如果要设置背景图片重复的效果，在“页面属性”对话框的“重复”下拉列表框选择不同的选项。 默认“重复”选项是“repeat” 选择“插入”\“image”??令，在网页中插入一个PNG;;4.4 编辑图像;;;;HTML 中的文本与图像;HTML中的段落 HTML 可以将文档分割为若干段落。段落是通过p标签定义的。浏览器会自动地在段落的前后添加空行。但不要依赖这种做法。忘记使用结束标签会产生意想不到的结果和错误。如果您希望在不产生一个新段落的情况下进行换行（新行），请使用?br?标签。 HTML 格式化标签 HTML 使用标签b(bold) 与i(italic) 对输出的文本进行格式, 如：粗体?或?斜体。这些HTML标签被称为格式化标签 HTML中的图像 在 HTML 中，图像由img标签定义。img是空标签，它只包含属性，并且没有闭合标签。要在页面上显示图像，需要使用源属性（src）。src 指 source。源属性的值是图像的 URL 地址。 ;;4.6 上机练习;Web前端设计与开发技术（HTML+CSS+JavaScript）;第5章 精美内容网页的制作;;5.1网页复用;5.2自制导航条;;;5.2 插入Flash动画;;;;5.3插入 HTML5 Video和HTML5 Audio;;;5.4 插入插件;插入音频;1．AVI格式 2．MOV格式（QuickTime） 3．MPEG/MPG/DAT格式 4．RM(Real Media)格式 5．ASF(Advanced Streaming Format)格式 ;插入视频;5.5 背景音乐;5.6滚动条;5.7上机练习;Web前端设计与开发技术（HTML+CSS+JavaScript）;第6章让网站活起来;;6.1 超链接的基础知识;超链接的概念;超链接的类型;超链接的路径;;6.2 创建超链接;;;创建各类超链接;;;创建图像地图;创建音频和视频链接;在软件和源代码下载网站中，下载链接是必不可少的，该链接可以帮助访问者下载相关的资料。创建下载链接的方法很简单。和音频、视频链接一样，目标文件指向要下载的某个软件或者压缩文件即可。 可以做为目标文件的文件类型有很多，例如word文档、excel文档、powerpoint文档、zip文档、rar文档等，只要浏览器不能直接打开的文件类型，就可以以文件下载的方式创建链接。 在不同浏览器中，单击创建了文件下载链接的文本或者图像，会采用不同的方式提示是否打开或保存该文件