《《网页设计与制作实例教程》第4章（张青）ppt课件（全）.ppt》由会员分享，可在线阅读，更多相关《《网页设计与制作实例教程》第4章（张青）ppt课件（全）.ppt（22页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、清华大学出版社 网页设计与制作实例教程第4章高等学校计算机应用规划教材 2022-5-8主编 方其桂内容提要第2章 制作网页内容 文本、符号、图像、声音、动画及视频等文本、符号、图像、声音、动画及视频等是网页制作是网页制作中的重要元素，网页通过各种元素向浏览者展示信息，起到中的重要元素，网页通过各种元素向浏览者展示信息，起到宣传效果。在网页上插入各种类型的素材是制作网页的关键宣传效果。在网页上插入各种类型的素材是制作网页的关键，也是难点所在，根据网站主题、内容选择合适素材，进行，也是难点所在，根据网站主题、内容选择合适素材，进行适当的加工，制作网页，取得满意的表达效果。适当的加工，制作网页，取
2、得满意的表达效果。 本章包括两个部分，首先通过实例，介绍在网页中输本章包括两个部分，首先通过实例，介绍在网页中输入文本、符号，插入图像、声音、动画及视频等，掌握网页入文本、符号，插入图像、声音、动画及视频等，掌握网页制作的基本方法；第二部分通过模板的制作、使用与管理，制作的基本方法；第二部分通过模板的制作、使用与管理，掌握快速制作、更新统一风格网页的方法。掌握快速制作、更新统一风格网页的方法。 教学目录网页中输入文本符号网页中输入文本符号网页中插入图形图像网页中插入图形图像网页中插入多媒体素材网页中插入多媒体素材010203第4章 制作网页内容04使用模板快速制作网页使用模板快速制作网页4.1
3、 网页中输入文本符号 教学内容 第2章 制作网页内容 在Dreamweaver输入文字的方式与Word相同，可以直接输入，也可以使用复制、粘贴的方法，在其他应用程序中选择文字，复制到网页中。实例1 计算机的发展 计算机的发展经历了四个阶段，制作网页时，要求标题单独一行，其余每个阶段独立成段，效果如图所示。4.1 网页中输入文本符号 教学内容 第2章 制作网页内容 在网页中输入的文本，如果出现错误可以进行编辑，只需在Dreamweaver中打开网页，可以对网页上的文本进行删除、修改、插入等操作。 实例2 游子吟 在输入网页文本时，因为疏忽可能导致文本错误、或者少输入了文本，效果如图，网页在浏览器
4、中浏览时不能修改，必修使用网页编辑软件打开，方能修改。 修改效果 4.1 网页中输入文本符号 教学内容第2章 制作网页内容 文本是网页页面信息的主要载体，如何设计字体、字号，字体的颜色等，直接影响网页文字的呈现效果，在一定程度上能影响浏览者对于网页信息的关注和阅读兴趣。 实例3 朱自清春 设置网页文本的字体、字号及字的颜色等格式，可以使用属性面板，也可以通过HTML语言进行设置，设置效果如图所示。4.1 网页中输入文本符号 教学内容第2章 制作网页内容 网页中的文章、段落分明，有层次感，才能方便浏览者阅读。设置段落格式，可以使用菜单命令，也可以采用HTML语言进行设置。实例4 打印机的分类 在
5、Dreamweaver中段落对齐方式有“左对齐”、“右对齐”、“居中对齐”及“两段对齐”，如图所示，标题“打印机的分类”是设置的效果是居中对齐。 4.1 网页中输入文本符号 教学内容第2章 制作网页内容 列表是网页中的重要组成元素之一，分为有序列表与无序列表，无序列表如项目符号，有序列表如编号，在网页制作过程中，通过使用列表标记，可以得到段落清晰，层次清楚的网页。 实例5 校园新闻 当给定的内容，没有明显的顺序关系时，可以使用无序列表，如图所示，每项的前面是项目符号，这里使用的是圆点，也可以使用其他符号。 4.1 网页中输入文本符号 教学内容 第2章 制作网页内容 表格是网页中的重要组成元素，
6、在网页中发挥着重要作用。掌握与表格相关的操作，可以方便使用表格，简洁、清晰地显示各种数据信息。实例6 2015年部分国产上映电影 2015年国产上映影片很多，使用表格可方便阅读，如图所示的6部电影名称、评分、上映时间等一目了然。 4.2 网页中插入图片 教学内容 第2章 制作网页内容 插入图片，首先要将图片放入网页所在的文件，所有的图片文件最好单独存放于一个文件夹中，一般文件夹命名为images。 实例7 中国水墨动画 网页上的文字，配以合适的图片，可以起到烘托主题的作用，使表达意图更加明确，如图所示。 4.2 网页中插入图片 教学内容第2章 制作网页内容 网页中的图片，如同文本一样可以设置对
7、齐方式，而使用表格放置图片，可以多幅图像看起来更整齐。 实例8 历届奥运会会标欣赏 每届奥运会都有会标，将会标的图片设置为相同大小，使用表格存放，可以使图片更整齐、美观，效果如图所示。 4.2 网页中插入图片 教学内容第2章 制作网页内容 有时在网页中浏览图像时，当鼠标经过该图像时，该图像就变成了另一幅图像，表现为类拟于Flash动画的效果，借动感增加网页的吸引力 。 实例9 地震知识 在介绍地震知识时，配上图片，可使宣传效果更好，原先网页中是地震前的照片，鼠标移上去后即变成地震后的照片，效果如图所示。 4.2 网页中插入图片 教学内容第2章 制作网页内容 给网页添加背景可以用来烘托气氛，网页
8、的背景可以是单种颜色，也可以是图案或都是图片。 实例10 再别康桥 徐志摩先生的再别康桥，配上优美的风景图片，更加赏心阅目，如图所示，背景图片的选择要注意，不能影响文字的阅读。4.3 网页中插入多媒体 教学内容第2章 制作网页内容 在网页中插入的Flash动画，包括Flash影片、按钮、导航、以及透明的Flash动画等等。实例11 校园风景 使用Flash制作的电子相册，比图片更具感染力，如图所示，将学校的图片制作成连续播放的相册。 4.3 网页中插入多媒体 教学内容 第2章 制作网页内容 FLV是当前视频文件的主流格式，其文件扩展名是“.flv”，FLV视频极小，加载的速度非常快，目前网站提
9、供的视频文件大多使用了FLV格式，用户只要能在网页上看到Flash就能看到FLV视频，无需安装其他插件。 实例12 视频暂留现象 通过鸟笼实验，验证视觉暂留现象，在网页上配以实验器材与实验过程的视频，可使网页的宣传效果更好，如图所示。 4.3 网页中插入多媒体 教学内容第2章 制作网页内容 在浏览网页时，有时可以听到音乐，给人以美的享受，网上的音乐文件主要有以下几种格式有mid、wav、mp3等几种，其中MP3格式的声音文件格式的品质最好。实例13 醉花阴 李清照的“诗中有画，画中有诗”，往往一句诗就是一个镜头，就蕴含一片深情，只有反复听、联想、品味，才能领略此中画意诗情，感受其意境美，如图所
10、示 4.3 网页中插入多媒体 教学内容第2章 制作网页内容 在浏览网页时，有时可以听到音乐，给人以美的享受，网上的音乐文件主要有以下几种格式有mid、wav、mp3等几种，其中MP3格式的声音文件格式的品质最好。实例14 大自然的语言 大自然语言是初中的一篇说明文，打开网页，除阅读文章外，还配有原文朗读，可使效果更好，如图所示 。 4.4 使用模板快速制作网页 教学内容第2章 制作网页内容 创建模板文件，可以新建文件的方式，也可以对已有的文件修改另存为模板 。实例15 八（1）班任课教师 八（1）班的网站，如图所示，分成五个方面，可以使用模板统一格式。 4.4 使用模板快速制作网页 教学内容第
11、2章 制作网页内容 创建模板文件，可以新建文件的方式，也可以对已有的文件修改另存为模板 。实例16 青年志愿者信息卡 青年志愿者信息，如图所示为制作所有志愿者信息卡，可以使用模板统一格式。 4.4 使用模板快速制作网页 教学内容第2章 制作网页内容 可以使用模板建立网页，建立好的网页，可以选择仍与模板保持联系，或从模板中分离，如果分离，则网页成为普通网页，不能再通过模板文件更新 。实例17 班级介绍 使用模版文件，制作班级介绍网页，如图4-72所示，只需要标题处输入文本“班级介绍”，以及在正文处输入班级介绍的文字内容即可。 4.4 使用模板快速制作网页 教学内容第2章 制作网页内容 对建立好的模版文件，可以进行修改、删除等管理，如对模板进行修改后，可以将模板的修改应用于所有由模板生成的网页。实例18 修改任课教师模板 做完网站后，同学们发现所有任课教师网页上的班级口号不对，需要修改，将“十年树木，百年树人”换成“一班一班，非同一般，共同努力，勇往直前”，如图所示。 清华大学出版社 网页设计与制作实例教程高等学校计算机应用规划教材 谢谢使用！联系信箱：