网页图片处理
网页图片处理
教学目的：
一.掌握网页中的图文布局；
二.掌握网页中图片定位和图层；
三.掌握网页中图片的透明处理和使用图片自动缩略。
重点难点：
图文布局、图片定位
教学方法：
讲解和演示相结合
教学课程:
导入
在网页设计中，大多追求图文并茂的效果，但有时因为图片的大小与文字不一致，使网页看起来不协调，此时可以改变图文的位置关系，使网页看起来更美观。
演示
一、 一、图文的布局
将指针指向图片并右击，单击快捷菜单中的“图片属性”命令，弹出“图片属性”对话框，单击“外观”标签，即可改变图片和文字的布局，如图5-12所示。
图5-12
在“对齐方式”列表框中，列出了十种图文对齐方式，可以根据需要，选择其中的一种。
    [例cx368航班5-3-1] 在“huanbao”网站中，建立一个新网页，导入现成的文本文件，在其中插入两幅图片，设置图文并列的方式，其中图片questions.gif采用左对齐方式，与各小标题并列起来；图片water.gif采用右对齐方式，放置在“水污染”标题下，如图5-13所示，将网页保存为questions.htm。
ps怎么合成图片图5-13
操作步骤：
① 启动FrontPage2000，打开“huanbao”的站点。
② 单击常用工具栏“新建”按钮，打开一个新的页面。
③ 单击“插入（I）”菜单中的“文件（F）”命令，弹出“选择文件”对话框，从中选择所需的文件，单击“确定”按钮，在弹出的“转换文本”对话框中，选择“以HTML方式处理”，再单击“确定”按钮。
④ 依次单击“插入（I）” 菜单中的“图片（P）”“来自文件（F）”命令，插入图片questions.gif和water.gif。
⑤ 右击图片questions.gif，单击快捷菜单中的“图片属性”命令，打开“图片属性”对话框，单击“外观”标签，单击“对齐方式”右边的向下箭头，选择“左对齐”。
⑥ 评估报告怎么写用同样的方法将图片water.gif定义为右对齐的方式，适当调整两幅图片的位置。
二、 二、 图片的定位与图层的形成
在FrontPage 2000中，对图片与文字同等处理，所以图片只能放置在文字之间，且只能在文字和图片之间进行移动。如果页面上没有任何文字，那么图片只能放置在第一行首位，使用直接拖动图片的方法，无法移动图片的位置。
如果要将图片放置在页面中的任意位置，可以采用绝对定位的方法。首先打开“图片”工具栏，方法是：依次单击“查看（V）”菜单中的“工具栏（T）”“图片（P）”命令，即可打开图片工具栏，如图5-14所示。
图5-14
选定图片后，单击图片工具栏中“绝对定位”按钮，然后拖动图片至目标位置。
在网页中可以插入若干图片，并且这些图片可以重叠起来，形成特殊效果。在系统默认的
情况下，后插入的图片将重叠在已有图片之上（即“顶层”），这样就形成了图层。根据需要，可以通过图片工具栏“上移一层”“下移一层”按钮来改变图片的叠放顺序。
三、图片的透明处理
当网页设置了背景后，为了使网页更加美观，所插入的图片背景最好设置为透明，使网页背景能够透过来。如果要将图片的背景变为透明，只要单击图片工具栏中“设置透明颜”按钮，然后将指针指向图片中需要变成透明的颜并单击，此时图片中所有该种颜全部变为透明。注意，只有GIF格式的图片才能设置透明背景。
[例5-3-2] 将questions.gif图片背景中的白变为透明。
操作步骤：
单击图片工具栏的“设置透明颜”按钮，将指针指向该图片中白背景处单击，即可产生背景透明的效果。
四、图片的自动缩略
设计网页时，为了加快网页的下载速度，可以使用自动缩略图功能，它的作用是将图片缩小，当访问者浏览网页时，看到的是小图，如果要进一步细看此图片，单击一下小图，就可以看到原图大小的图片了。
自动缩略图的制作方法是：先选定图片，然后单击图片工具栏“自动缩略图”按钮即可。当然，还可以进一步定义缩略图的外观，方法是：单击“工具（T）” 菜单中的“网页选项（A）”命令，打开如图5-15所示的“网页选项”对话框，单击“自动缩略图”标签，修改其中的参数，即可改变图片的外观。
图5-15
[例5-3-3]  将questions.htm网页中water.gif图片制作成自动缩略图。
操作步骤：
① 单击water.gif图片，单击图片工具栏“自动缩略图”按钮。
② 单击 “工具（斗罗大陆魂师对决阵容推荐T）” 菜单中的“网页选项（A）”命令，打开“网页选项”对话框，单击“自动缩略图”标签，再选中“边缘凹凸效果（V）”命令，单击“确定”按钮即可。效果如图5-16所示。
图5-16
总结
信息卡：套用主题
制作一个具有专业水平的网站，不仅要有充实的内容，还应该有精美的外观和统一的风格，这样才能吸引访问者，但要达到以上要求并不容易。FrontPage 的“主题”功能简化了网页制作人员的工作，一旦在网站套用了主题，包括背景图案、项目符号、网页横幅、导航按钮等涉及网站外观的元素，全部按照统一的格调搭配起来，让大家轻松拥有一个舒心的网站。
实践与探索：将本网页套用一个你喜欢的主题，观察标题、导航条、水平线的变化。
思考
赞美祖国的歌曲1． 1．  水浒传的主要内容图片可以放置在网页中的任意位置吗？应如何操作？
2． 2．  使用“自动缩略图”有什么好处？

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。