为网页添加图像(模块三)

《为网页添加图像(模块三)》由会员分享，可在线阅读，更多相关《为网页添加图像(模块三)（67页珍藏版）》请在金锄头文库上搜索。

1、模块三 为网页添加图像,主讲老师：付建新,Dreamweaver CS3网页制作任务实训教程,学习目标,掌握图像的插入与各种设置方法 掌握导航条的插入方法 熟悉设置网页背景图像的操作 掌握制作鼠标经过图像的方法 属性并掌握创建和设置热点的操作,任务一 添加“公司介绍”网页的图像,任务目标 在“公司介绍”网页中插入多幅图像并进行适当编辑，然后在标题下方插入导航条，并设置网页背景图像，最后制作鼠标经过图像。完成后的最终效果如图所示。,为“公司介绍”网页添加各种图像后的效果,任务一 添加“公司介绍”网页的图像,操作思路 （1）在网页中插入两幅图像并调整大小。 （2）在标题下方插入导航条。 （3）设置

2、网页的背景图像。 （4）在前面插入的两幅图像后面制作鼠标经过图像。,制作“公司介绍”网页图像的操作思路,任务一 制作“公司介绍”网页的文本,操作思路 （1）输入网页中的所有文本。 （2）对文本进行分段和换行，并通过插入不换行空格调整文本。 （3）在文本中插入日期并在标题下插入水平线。 （4）通过输入代码的方式添加活动字幕。,制作“公司介绍”网页文本的操作思路,操作一 插入并编辑图像,（1）打开光盘中提供的“公司介绍.html”网页文档，在最后的文本处单击鼠标定位插入点，然后按“Enter”键分段，如图所示。,定位文本插入点,操作一 插入并编辑图像,（2）选择【插入记录】【图像】菜单命令，如图所

3、示。 （3）打开“选择图像源文件”对话框，在其中选择光盘中提供的“01.jpg”文件，单击“确定”按钮，如图所示。,选择命令,选择图像,操作一 插入并编辑图像,（4）打开“图像标签辅助功能属性”对话框，在“替换文本”下拉列表框中输入“厂房外景1”文本，单击“确定”按钮，如图所示。 （5）此时将在网页中当前文本插入点处插入所选择的图像。在图像上单击鼠标选择该图像，在属性检查器的“宽”和“高”文本框中分别输入“322”和“256”，适当调整图像大小，如图所示。,设置替换文本,修改图像的宽度和高,操作一 插入并编辑图像,（6）将文本插入点定位到所插入的图像右侧，按9次“Ctrl+Shift+空格”键

4、插入9个不换行空格，如图所示。 （7）再次选择【插入记录】【图像】菜单命令，打开“选择图像源文件”对话框，在其中选择光盘中提供的“02.jpg”文件，单击“确定”按钮，如图所示。,插入不换行空格,选择图像,操作一 插入并编辑图像,（8）打开“图像标签辅助功能属性”对话框，在“替换文本”下拉列表框中输入“厂房外景2”文本，单击“确定”按钮，如图所示。 （9）选择插入的图像，在属性检查器中将其宽度和高度同样设置为“322”和“256”，如图所示。,设置替换文本,调整图像大小,操作二 插入导航条,（1）将文本插入点定位到水平线左侧，按“Enter”键分段，如图所示。,定位文本插入点,操作二 插入导航

5、条,（2）选择【插入记录】【图像对象】【导航条】菜单命令，如图所示。 （3）打开“插入导航条”对话框，在“项目名称”文本框中输入“b1”，单击“状态图像”文本框右侧的“浏览”按钮，如图所示。,选择命令,设置项目名称,操作二 插入导航条,（4）打开“选择图像源文件”对话框，在其中选择光盘提供的“button01a.jpg”文件，单击“确定”按钮，如图所示。 （5）按照相同的方法分别利用“鼠标经过图像”和“按下鼠标”文本框右侧的“浏览”按钮设置如图所示的图像文件。,选择图像,设置不同状态下的图像文件,操作二 插入导航条,（6）在“替换文本”文本框中输入“公司介绍”，单击“按下时，前往的URL”文本

6、框右侧的“浏览”按钮，如图所示。 （7）打开“选择HTML文件”对话框，在其中选择“公司介绍.html”文件，单击“确定”按钮，如图所示。,设置替换文本,选择链接文件,操作二 插入导航条,（8）返回“插入导航条”对话框，默认导航条水平排列，单击上方的“添加”按钮 ，如图所示。 （9）按照设置项目“b1”的方法依次设置b2的项目名称、状态图像、鼠标经过图像和按下图像，如图所示。,添加导航条项目,设置项目名称和各种状态下的图像,操作二 插入导航条,（10）继续设置b2项目的替换文本和链接文件，完成后单击上方的“添加”按钮 ，如图所示。 （11）按相同方法创建导航条的第3个项目，完成后单击上方的“添

7、加”按钮 ，如图所示。,添加导航条项目,创建导航条第3个项目,操作二 插入导航条,（12）继续创建导航条的第4个项目，完成后单击上方的“添加”按钮 ，如图所示。 （13）继续创建导航条的第5个项目，完成后单击上方的“添加”按钮 ，如图所示。,创建导航条第4个项目,创建导航条第5个项目,操作二 插入导航条,（14）继续创建导航条的第6个项目，完成后单击“确定”按钮，如图所示。 （15）此时将在网页中当前文本插入点处创建效果如图所示的导航条对象，且处于选中状态。,创建导航条第6个项目,创建的导航条效果,操作二 插入导航条,（16）将鼠标指针移至导航条右侧上方的一个黑色控制点上，按住鼠标左键不放向右

8、侧拖动一定距离，从而增加导航条各项目之间的间距，如图所示。 （17）释放鼠标，调整后的效果如图所示。,调整导航条项目间的间距,完成导航条的创建与编辑,操作三 设置网页背景图像条,（1）选择【修改】【页面属性】菜单命令，如图所示。 （2）打开“页面属性”对话框，选择左侧“分类”列表框中的“外观”选项，单击“背景图像”文本框右侧的“浏览”按钮，如图所示。,选择命令,单击按钮,操作三 设置网页背景图像条,（3）打开“选择图像源文件”对话框，在其中选择光盘提供的“bg.jpg”文件，单击“确定”按钮，如图所示。 （4）返回“页面属性”对话框，在“重复”下拉列表框中选择“重复”选项，单击“确定”按钮，如

9、图所示。,选择图像,置图像排列方式,操作三 设置网页背景图像条,（5）关闭对话框后即可看到网页背景发生了变化，效果如图所示。,设置背景图像后的效果,操作四 制作鼠标经过图像,（1）将文本插入点定位到前面插入的两幅图像中的后一幅图像右侧，按9次“Ctrl+Shift+空格”键插入9个不换行空格，如图所示。 （2）选择【插入记录】【图像对象】【鼠标经过图像】菜单命令，如图所示。,插入不换行空格,选择命令,操作四 制作鼠标经过图像,（3）打开“插入鼠标经过图像”对话框，在“图像名称”文本框中输入“product”，单击“原始图像”文本框右侧的“浏览”按钮，如图所示。 （4）打开“原始图像”对话框，在

10、其中选择“03.jpg”文件，单击“确定”按钮，如图所示。,设置图像名称,选择图像,操作四 制作鼠标经过图像,（5）返回“插入鼠标经过图像”对话框，单击“鼠标经过图像”文本框右侧的“浏览”按钮，如图所示。 （6）打开“鼠标经过图像”对话框，在其中选择“04.jpg”文件，单击“确定”按钮，如图所示。,设置原始图像,选择图像,操作四 制作鼠标经过图像,（7）返回“插入鼠标经过图像”对话框，在“替换文本”文本框中输入“产品”，单击“按下时，前往的URL”文本框右侧的“浏览”按钮，如图所示。 （8）打开“按下时，前往的URL”对话框，在其中选择“产品展示.html”文件，单击“确定”按钮，如图所示。

11、,设置鼠标经过图像,选择文件,操作四 制作鼠标经过图像,（9）返回“插入鼠标经过图像”对话框，单击“确定”按钮，如图所示。 （10）此时制作的鼠标经过图像将插入到网页中，但仅显示设置的原始图像，如图所示。,确认设置,显示的原始图像,操作四 制作鼠标经过图像,（11）选择制作的鼠标经过图像，在属性检查器中将其宽度和高度分别设置为“322”和“256”，如图所示。,调整图像大小,操作四 制作鼠标经过图像,（12）保存制作的网页，按“F12”键进行预览，此时将鼠标指针移至导航条中的某个项目上时，该项目将发生变化，如图所示。 （13）单击该项目即可跳转到链接的网页中，如图所示。,鼠标指针指向导航条项目

12、时的效果,跳转的目标网,操作四 制作鼠标经过图像,（14）将鼠标指针移至制作的鼠标经过图像上时，图像将发生变化，如图所示。 （15）单击该图像即可跳转到链接的网页中，如图所示。,鼠标制作指向鼠标经过图像上时的效果,跳转的目标网页,任务二 制作“红玫瑰化妆品”网页,任务目标 在新建的网页中输入并设置文本，然后插入图像并进行各种属性设置，最后为图像创建和设置热点区域，完成后的最终效果如图所示。,制作“红玫瑰化妆品”网页效果,任务二 制作“红玫瑰化妆品”网页,操作思路 （1）新建网页，在其中输入需要的文本并设置格式。 （2）插入多幅图像并调整大小和对齐方式。 （3）为插入的图像设置边距和边框。 （4

13、）插入一幅图像，并对其进行裁剪和各种调整操作。 （5）为插入的图像创建热点。,制作“红玫瑰化妆品”网页的操作思路,操作一 制作与编辑网页文本,（1）新建空白的网页文件，在其中输入如图所示的文本内容。 （2）将标题“红玫瑰化妆品”文本的格式设置为“字体-方正新舒体简体、大小-60、颜色-#CC0033、居中对齐”，如图所示。,输入文本,设置标题文本格式,操作一 制作与编辑网页文本,（3）在标题文本下方插入水平线，如图所示。 （4）选择【修改】【页面属性】菜单命令，打开“页面属性”对话框，将“外观”选项的背景颜色设置为“#000000”，单击“确定”按钮，如图所示。,插入水平线,设置页面背景颜色,

14、操作一 制作与编辑网页文本,（5）将除标题以外的所有文本格式设置为“字体-方正粗倩简体、颜色-#FFFFFF”，并在文本开始处插入8个不换行空格，如图所示。 （6）在文本最后利用“Enter”分段，并输入如图所示的类别文本。,设置文本格式,输入文本,操作一 制作与编辑网页文本,（7）将类别文本格式设置为“字体-方正粗倩简体、颜色-#CC0033”，如图所示。,设置文本格式,操作二 设置图像大小和对齐方式,（1）将文本插入点定位到如图所示的位置，然后在“插入”栏的“常用”选项卡中单击“图像”按钮 。 （2）打开“选择图像源文件”对话框，选择光盘提供的“L01.jpg”文件，单击“确定”按钮，如图

15、所示。,单击按钮,选择图像,操作二 设置图像大小和对齐方式,（3）打开“图像标签辅助功能属性”对话框，在“替换文本”下拉列表框中输入“粉底霜”，单击“确定”按钮，如图所示。 （4）选择插入的图像，在属性检查器中将其宽度和高度均设置为“200”，如图3所示。,设置替换文本,设置图像大小,操作二 设置图像大小和对齐方式,（5）保持图像的选中状态，单击属性检查器右侧的“左对齐”按钮 ，设置图像的对齐方式，如图所示。 （6）将文本插入点定位在插入图像的右侧，利用插入栏中的“图像”按钮 插入“L02.jpg”图像，并按前一幅图像的设置方法设置其大小和对齐方式，如图所示。,设置图像对齐方式,插入图像并设置

16、大小和对齐方,操作二 设置图像大小和对齐方式,（7）用相同方法插入“L03.jpg”图像，并设置相同的大小和对齐方式，如图所示。 （8）在“唇妆类产品”文本下方依次插入“C01.jpg”、“C02.jpg”和“C03.jpg”图像，按照相同方法设置图像大小和对齐方式，如图所示。,设置图像对齐方式,插入图像并设置大小和对齐方式,操作三 设置图像边距和边框,（1）选择脸妆类产品下的第1幅图像，在属性检查器的“垂直边距”和“水平边距”文本框中分别输入“10”和“40”，设置该图像与其周围其他元素之间的间隔距离，如图所示。 （2）保持该图像的选中状态，在属性检查器的“边框”文本 框中输入“5”，为该图像添加粗细为5像素的边框，如图所示。,设置图像边距,设置图像边框,操作三 设置图像边距和边框,（3）选择脸妆类产品下的第2幅图像，按照相同的方法对其边距和边框进行设置，如图所示。 （4）按照相同的方法继续设置网页中其他图像的边距与边框，如图所示。,设置图像