《网页文本和图像.ppt》由会员分享,可在线阅读,更多相关《网页文本和图像.ppt(17页珍藏版)》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、网页设计与制作网页设计与制作网页设计与制作网页设计与制作第四章网页文本和图像第四章网页文本和图像 网页设计与制作网页设计与制作第四章网页文本和图像第四章网页文本和图像 本章学习要点:添加普通文本、特殊文本的方法文本格式的设置插入图像的方法图像的属性设置及优化图文混排的设置方 网页设计与制作网页设计与制作4.1 案例1 制作文本网页学习目标利用Dreamweaver CS3,创建并保存一个简单的文本网页文件。知识要点在网页中添加文本的三种方法;对网页文本的一般编辑操作。效果如图所示:网页设计与制作网页设计与制作操作步骤:操作步骤:在新建文档中直接输入文本复制添加其它文档中的文本导入其它文档中的文
2、本设置文本属性网页设计与制作网页设计与制作4.2 案例2 修饰文本网页学习目标掌握在Dreamweaver CS3中打开网页文档的方法,掌握在网页中使用列表和插入其他文本对象的方法。知识要点设置列表;添加特殊符号;添加水平线;添加日期等。案例效果所示。网页设计与制作网页设计与制作操作步骤:操作步骤:打开文档设置项目符号或编号插入特殊符号、水平线和日期网页设计与制作网页设计与制作4.3 学习任务:文本标签要对选定的文本进行格式化,不仅可以利用“属性”面板进行设置,在“代码”视图下利用HTML标签也可以方便地对其进行设置。网页设计与制作网页设计与制作文本标签及源代码分析标签标签类属类属作用作用分段
3、标签分段标签将标识的内容设为一个段落将标识的内容设为一个段落换行标签换行标签强制换行,但不换段落强制换行,但不换段落预格式化标签预格式化标签保留文本的原始排版格式保留文本的原始排版格式水平线标签水平线标签水平线水平线标题标签标题标签将标识的文本设为标题,共分六级,文本逐级变小将标识的文本设为标题,共分六级,文本逐级变小文字格式控制标签文字格式控制标签设置标识的文本的字体、大小、颜色等设置标识的文本的字体、大小、颜色等特定文字样式标签特定文字样式标签定义黑体文字定义黑体文字用于特别强调的文本,显示为粗体字用于特别强调的文本,显示为粗体字定义斜体文字定义斜体文字用于强调的文本,一般显示为斜体字用于
4、强调的文本,一般显示为斜体字定义文字下划线定义文字下划线定义大号文字定义大号文字定义小号文字定义小号文字定义上标文字定义上标文字定义下标文字定义下标文字列表标签列表标签无序列表,每个列表项前有前导符号,如圆形无序列表,每个列表项前有前导符号,如圆形有序列表,每个列表项前有序号,如阿拉伯数字有序列表,每个列表项前有序号,如阿拉伯数字将标识的文本设为一个列表项将标识的文本设为一个列表项文文文文本本本本标标标标签签签签名名名名称称称称及及及及功功功功能能能能 网页设计与制作网页设计与制作设置标签的相关属性参数,除了可以在“代码”窗口中直接键入以外,还可以通过“标签检查器”面板设置。4.3.2 在标签
5、选择器中设置文本标签的属性选择选择选择选择“窗口窗口窗口窗口标签检查器标签检查器标签检查器标签检查器”命令,打开命令,打开命令,打开命令,打开“标签标签标签标签”面面面面板,并且切换到板,并且切换到板,并且切换到板,并且切换到“属性属性属性属性”选项卡中,列出了选定列选项卡中,列出了选定列选项卡中,列出了选定列选项卡中,列出了选定列表项可以设置的所有属性,表项可以设置的所有属性,表项可以设置的所有属性,表项可以设置的所有属性,用户根据情况设置或修改用户根据情况设置或修改用户根据情况设置或修改用户根据情况设置或修改相应的标签属性。相应的标签属性。相应的标签属性。相应的标签属性。网页设计与制作网页
6、设计与制作4.4 学习任务:网页图像与网页图像处理工具在网页中使用图像可以使网页生动、美观、更具视觉冲击力。了解图像的格式及相应的设计工具有助于在网页中恰到好处的使用图像。网页设计与制作网页设计与制作4.4.1 网页中常见的图像格式GIF(图形交换格式):GIF文件最多使用256种颜色,最适合显示色调不连续或具有大面积单一颜色的图像。JPEG(联合图像专家组):JPEG文件格式是用于摄影或连续色调图像的较好格式。PNG(可移植网络图形):PNG文件格式是一种替代GIF格式的无专利权限制的格式,它包括对索引色、灰度、真彩色图像以及alpha通道透明度的支持。网页设计与制作网页设计与制作4.4.2
7、 常用网页图像制作软件1Photoshop支持大量图像格式处理图像尺寸和分辨率图层功能绘画功能选取功能色调和色彩功能旋转和变形支持多种颜色模式开放式结构网页设计与制作网页设计与制作4.4.2 常用网页图像制作软件2Fireworks同时编辑位图和矢量图形的功能大图切割功能制作具有动态效果的切图功能制作动画功能文字工具及文字特效功能网页设计与制作网页设计与制作4.5 案例3 制作图像网页学习目标掌握在网页中插入图像、设置图像属性及编辑图像等方法。知识要点在网页中插入图像;图像的属性设置;图像的编辑;图像占位符的使用;插入鼠标经过图像等。插入图像的网页效果如图所示。网页设计与制作网页设计与制作操作
8、步骤:操作步骤:插入图像设置图像属性 编辑图像裁剪图像重新取样图像调整图像亮度和对比度锐化图像优化图像插入图像占位符插入鼠标经过图像网页设计与制作网页设计与制作4.6 案例4 制作图文混排网页学习目标掌握制作图文混排网页的方法和技能。知识要点调整图像和文本的相当位置。效果如图所示。当网页中既包含文本,又包当网页中既包含文本,又包当网页中既包含文本,又包当网页中既包含文本,又包含图像时,设置好文本和图含图像时,设置好文本和图含图像时,设置好文本和图含图像时,设置好文本和图像的排版格式对网页的整体像的排版格式对网页的整体像的排版格式对网页的整体像的排版格式对网页的整体效果至关重要效果至关重要效果至关重要效果至关重要 网页设计与制作网页设计与制作谢 谢!