商务网页实例项目04课件.pptx

1、 内容提要文本和图像是最基本的网页元素。它们不仅传递了产品和服务的信息，也决定了网页的风格和外观。为了使页面更加美观、整洁、有层次感，从而增加页面的可读性，需要对文本进行一定的设置和排版，以及对图像进行必要的处理和调整。有时还可以通过插入表格来控制页面的布局。本项目将介绍Dreamweaver中的文本编辑和图像处理，还将介绍表格的基本操作以及表格的属性设置。在学习时，尽量尝试，不要害怕出错。1新建网页完成站点的创建之后，就需要在站点中添加网页了，那么如何创建网页呢？方法1：在起始页面的“新建”中，单击“HTML”选项，如图4-1所示。活动活动1 1 新建网页文件与文件夹新建网页文件与文件夹 方

2、法2：选择“文件”“新建”命令，在打开的“新建文档”对话框中选择“空白页”，类型选择“HTML”，布局选择“无”，单击“创建”按钮。新建一空白页面，通过这种方法还可以创建带有CSS布局的页面，如图4-2、图4-3所示。方法3：在文件面板选择该网站的目录并单击鼠标右键，在弹出的下拉菜单中选择“新建文件”选项。此方法创建的网页默认名为“untitled.html”，需要重新命名，如图4-4所示。2打开网页选择“文件”“打开”命令，在打开的对话框中选取需要打开的网页文档。3保存网页选择“文件”“保存”命令，可以将正在编辑的文档保存。4新建文件夹在文件面板选择该网站的目录并单击鼠标右键，在弹出的下拉菜

3、单中选择“新建文件夹”选项，如图4-5所示。图4-5 新建文件夹 5页面属性新建页面后，可以在属性面板中单击“页面属性”打开页面属性对话框，对该页面属性的内容进行初始化设置，如图4-6所示。重要的网页属性项目包括：页面文字的设置、页面背景的设置、页面边距的设置、链接文字的设置以及标题编码的设置等，图4-7图4-11所示为页面属性对话框的几个选项卡。图4-6 页面属性 图4-7“外观（CSS）”选项卡“外观（CSS）”选项卡中各选项的作用如下。页面字体：设置页面字体格式。可以快速定义整张页面的字体。大小：文字的大小，默认单位为像素。文本颜色：文字的颜色。背景颜色：页面背景颜色。背景图像：背景图片

4、的链接位置。重复：背景图片的显示是否重复。左右上下边距：页面内容距离页面边界左右上下的距离。“外观（HTML）”选项卡中各选项的作用如下。背景图像：背景图片的链接位置。背景：页面背景颜色。文本：文本的颜色。已访问链接：已经访问过的文本链接的颜色。链接：文本链接的颜色。活动链接：文本活动链接的颜色。边距和边距高度：距离页面左、上的距离，高度单位默认为像素。图4-8“外观（HTML）”选项卡 “链接（CSS）”选项卡各选项的作用如下。链接字体：链接文字的字体格式和加粗倾斜属性。大小：字体的大小，默认单位为像素。链接颜色：文本链接的颜色。变换图像链接：变换图像链接时文本的颜色。已访问链接：已经访问过

5、的文本链接的颜色。活动链接：文本活动链接的颜色。下划线样式：链接时是否显示下划线。.在“标题（CSS）”选项卡中，设置标题1标题6的字体的格式、大小和颜色在字体属性面板中直接指定文字为某号标题后，该文字直接套用该标题的属性。.在“标题/编码”选项卡中，对于任何一张页面来说，标题都非常重要，它能在浏览者浏览该网页的时候了解该网页的内容，如果页面没有设置标题，则默认标题名为“无标题文档”，不能直接的表达出该页面的内容，因此我们建议每张页面都应该设置它的标题。活动2 给“贸贸女装”商品详情页“detail.html”设置页面属1给贸贸女装商品详情页“detail.html”设置页面属性（1）活动分析

6、网页是网站中的组成部分，每张网页都有最基本的属性，通过页面设置可以给每个网页设置标题、可以实现页面的整齐美观。（2）知识要点 网页的基本操作包括新建、打开、保存网页。掌握设置网页属性的方法，会设置网页的标题、背景颜色、标题文字。（3）动手操作步骤步骤1 前期前期准备准备将本书配套资源中的“网站素材”文件夹中的“项目4（上）素材”中的所有文件及文件夹复制到maomaonvzhuang站点内，如图4-12所示。步骤步骤2 打开打开detail.html页面页面1）打开Dreamweaver CS5软件。2）在文件面板中，双击打开detail.html，如图4-13所示。步骤步骤3 设置网页设置网页

7、标题标题在文档工具栏上的“标题”文本框中输入“贸贸女装 商品详情”，如图4-14所示。步骤步骤4 设置页面属性设置页面属性 1）单击属性检查器上的“页面属性”按钮，打开“页面属性”对话框，如图4-15所示。图4-15 单击“页面属性”按钮2）在“外观（CSS）”选项卡中，设置页面字体为“宋体”，大小为“12”，单位为“px”，颜色为“#333”的灰色，上边距为“0”，如图4-16所示。图4-16 外观（CSS）设置 3）在“标题（CSS）”选项卡中，设置标题字体为“宋体”，属性为“加粗”，设置“标题1”大小为18，单位为“px”，颜色为“#F00”的红色，如图4-17所示。步骤步骤5 保存文件

8、保存文件选择菜单“文件”“保存”命令，保存文件，按键在浏览器中预览。2预览“贸贸女装”商品详情页detail.htm按快捷键预览detail.htm。活动活动3 给网页添加文本给网页添加文本1文本的输入（1）普通文字文本是网页中最基本的，也是最无可替代的元素。在Dreamweaver CS5中插入文字的方法很简单，和在记事本、Word等文字软件中插入文字的方法相似。在出现光标的地方，选择合适的输入法，便可以直接输入相关文字。除此以外还可以通过复制粘贴的方式插入文字。（2）换行在输入文字时，按键，文字另起一段，此时与上一行文字之间空出一行的距离，表明重新开始一个段落。按组合键，文字另起一行此时与

9、上一行文字之间没有过多的距离，文字分行，不分段。（3）空格在输入的文字中，按空格键，只能增加一个空格，此时需要在“插入栏”的“文本”选项中单击“不换行空格”才能连续插入多个空格，如图4-18所示。2文本的编辑在Dreamweaver中文字的编辑和常规的文字编辑一样，需要选中该文字然后再编辑。选中文字的方法可以是鼠标选中，也可以通过标签选中。另外关于复制、粘贴和删除的方法和常规的文字编辑一样。图4-18 不换行空格 3文本的格式设置在Dreamweaver CS5中，文本属性面板与之前版本的区别在于将文字的属性分为“HTML”和“CSS”两个部分，分别在“HTML”和“CSS”属性面板中，如图4

10、-19和图4-23所示，在其中可对文字进行设置。HTML是对文字直接编辑，而CSS则是给该文字添加样式表，有关CSS的介绍在后面的章节中我们将详细讲解。（1）HTML文字设置1）格式：可以是所选文字，也可以是文字所在的整个段落，也可以直接设置成之前预先设置好的标题格式。可通过下拉菜单选中，如图4-20所示。2）类：可以套用已经定义好的类，可以在CSS选项卡中新建类，也可以重命名类，文字类可以通过类的名称呈现出设置的效果，更方便选择合适的类，如图4-21所示。3）链接：指定该文字链接的页面或其他网页元素，如图4-22所示，有关链接将在本书的项目5中重点讲解。4）加粗斜体：设置文字的粗体和斜体。5

11、）编号：设置段落的项目编号或列表编号。6）缩进凸出：设置文字或段落缩进或凸出。（2）CSS文字设置（见图4-23）图4-23 属性面板 CSS1）目标规则：在Dreamweaver CS5中，文字的格式设置一定要用CSS样式表，在目标规则中需要选择套用的样式表，如果没有已经存在的样式表，则需要选中“新CSS规则”后，创建新的CSS样式表，如果有已经存在的样式表，可以直接套用。如果没有存在的样式表，则需要选中“新CSS规则”创建新的CSS样式表。已经存在的样式表，也可以重新编辑规则，但编辑后，之前套用该样式表的字体，也将自动套用新的样式表格式。2）字体：Dreamweaver CS5默认的字体很

12、少，一般只有宋体这一种字体，如果在网页中需要用到其他字体，可以在字体列表的最后一行选择“编辑字体列表”，然后在“编辑字体列表”对话框中添加本机所安装的字体。但是在实际操作中，因为网页在互联网上可能会被不同配置的客户端浏览，而有的客户端没有安装非常见的字体，而影响该网页的效果，因此我们在字体的选择上，一般选择非常普遍的字体，例如宋体、黑体等，如果需要一些特殊的字体效果，则建议以图片的形式呈现，图4-24、图4-25显示如何添加字体。3）对齐方式：左对齐、居中对齐、右对齐、两端对齐，默认为两端对齐。如图4-26所示。4）加粗斜体：设置文字的粗体和斜体。5）大小：根据需要调整文字大小，默认的单位为像

13、素。6）颜色：选中文字后，有几种方式设置其颜色。单击“颜色框”，直接选中颜色。在颜色框后面的文本框中输入颜色的编号。4文本的其他操作（1）拼写检查拼写检查功能可以使我们方便而快速地对网页中的文字进行检查，选择“文本”“拼写检查”命令，在执行该命令后，Dreamweaver发现错误后，会弹出“拼写检查”对话框，提示存在的错误，我们可以在“建议”选项中选择正确的文字，单击“改正”按钮即可完成错误文字的修改工作。（2）查找与替换和Word的查找与替换功能类似，但Dreamweaver的对象除了文字外，还可以是代码，目标除了该网页外，还可以是本地站点的所有网页。选择“编辑”“查找与替换”命令，打开“查

14、找与替换”对话框，在“查找”文本框中输入需要查找的内容，选择查找的范围，单击“全部替换”按钮可以在指定的查找范围内替换查找的内容。（3）撤销与重做撤销与重做是网页中常常使用的命令，通过选择“编辑”“撤销”和“编辑”“重做”命令很容易完成上一步命令的撤销和重做。5列表列表是使文字一目了然的表现方法。列表分为项目列表和编号列表。在项目列表中，该列表是并列的，不存在先后顺序，默认的形式为圆点。在编号列表中，该列表内容有一定的先后顺序，默认的形式为数字。（1）设置项目列表方法1：已输入了各项内容，且各项之间是以段落来划分的，在选择各项内容后，单击属性面板中的“项目列表”按钮。方法2：在需要输入列表的位

15、置单击属性面板中的“项目列表”按钮，如图4-27所示，在出现项目列表后，输入内容，按回车键，进入第二列列表，继续输入内容。（2）设置编号列表方法1：已输入了各项内容，且各项之间是以段落来划分的，在选择各项内容后，单击属性面板中的“编号列表”按钮。方法2：在需要输入列表的位置单击属性面板中的“编号列表”按钮，如图4-28所示。在出现编号列表后，输入内容，按回车键，进入第二列列表，继续输入内容。（3）编辑列表在属性面板中的“列表项目”里可以修改列表的类型和样式，如图4-29所示。弹出“列表属性”对话框，如图4-30所示。6添加特殊符号、日期和水平线（1）特殊符号在需要添加特殊符号的位置，单击“插入

16、栏”中“文本”选项卡最后一项的“字符”下拉按钮，在弹出的菜单中选择需要输入字符的按钮即可，如需更多特殊符号，则选择最后一项“其他字符”。如图4-31、4-32所示。（2）日期选择“插入”“常用”“日期”选项，如图4-33所示，在弹出的对话框中选择插入日期的格式即可完成，如图4-34所示。（3）水平线水平线可以分割网页中的内容，选择“插入”“HTML”“水平线”选项，即可在需要的位置插入水平线，如图4-35所示。活动活动4“贸贸女装贸贸女装”商品详情页商品详情页“detail.html”文字部分的文字部分的制作制作（1）活动分析文字是网页中最基本最重要的元素，是网页中必不可少的部分。掌握对文字的

17、输入和编辑方法是网页最基本的操作，熟练掌握网页文字编辑将对日后的网页制作有非常大的帮助。（2）知识要点 掌握文字的输入、编辑和格式设置的方法。掌握特殊符号、列表和水平线的插入和设置方法。（3）动手操作步骤步骤1 前期前期准备准备完成活动2后，打开detail.html，在光标停留的位置，开始输入文字，如图4-36所示。步骤步骤2 输入标题文字输入标题文字1）在光标停留的位置输入标题“新款时尚休闲圆领长袖针织套衫”。2）按回车键，输入副标题“价格：50.00快递：8.00”，按回车键，如图4-37所示。步骤步骤3 标题文字格式化标题文字格式化1）拖动鼠标选中标题“新款时尚休闲圆领长袖针织套衫”，

18、在属性面板“HTML”选项卡格式下拉列表中，选中“标题1”，如图4-38所示。2）拖动鼠标选中副标题“价格：50.00快递：8.00”，在属性面板“HTML”选项卡中，选中“加粗”和“斜体”，如图4-39所示。3）将光标移至副标题“50:00”之前，单击“插入栏”中“文本”选项卡最后一项的“字符”下拉按钮，选择最后一项“其他字符”，在弹出的对话框中，选中人民币货币符号，单击“确定”按钮，如图4-40所示。4）同理，在副标题“8:00”前也用同样的方式插入货币符号。5）按键预览，如图4-41所示。步骤步骤4 插入段落插入段落1）打开本书配套资源“网站素材”文件夹中的“项目4（上）素材”文件夹中的

19、“商品详情.txt”文件，将里面的段落“衣衣是淘宝连衣裙活动特价款”至“温婉可人的小模样最讨人喜爱”这段文字通过复制粘贴的方式复制到副标题下方。2）然后将段落下方的“货号：A001”至“价格：3170元”几行文字通过复制粘贴的方式复制到段落下方。步骤步骤5 设置设置列表列表1）选中“货号：A001”至“价格：3170元”几行文字，在属性面板的“HTML”选项卡中，单击“项目列表”按钮。2）设置项目列表后，单击“缩进”按钮，如图4-42所示。步骤步骤6 插入水平线插入水平线1）在项目列表后，按回车键，出现新的一行项目列表，此时单击两次属性面板“HTML”选项卡的“凸出”，释放列表项，此时光标停留

20、在新的一行。2）选择菜单“插入”“HTML”“水平线”。步骤步骤7 保存文件保存文件选择菜单“文件”“保存”命令，保存文件，按键在浏览器中预览，如图4-43所示。活动活动5 学习网页图像的知识学习网页图像的知识1图像在网页中的应用图像具有更直观的特点，是网页中最重要的视觉要素，它可以美化网页，使页面更加充实，它比文字更直观、真实、生动，并能表述文字无法说明的内容。图像在网页中的应用非常广泛，几乎每个网站都离不开图像。图像在网页中通常以以下几种形式出现。1）LOGO。网站的LOGO主要是网站的图形标志，代表一个网站或网站的一个板块，具有网站的识别和推广的作用。LOGO通常都是以图像的形式出现。2

21、）广告图像。广告图像是以造型的形式，直观地表现广告创意的工具。广告图像通过线条、色彩、布局等视觉语言，创造出具体直观的广告形象，形象化地表现广告主题。3）按钮图像。网页中的按钮起到实现提交功能的作用，需要具备易识别、操作反馈好和美观的特点，因此图像按钮有着广泛的应用。4）图标图像。图标是具有明确指代含义的计算机图像，是功能标识。5）背景图像。网页的背景图像是网页美化和区块划分的主要表现方式之一。6）商品图像。在需要商品展示时，需要的商品图像应具备高品质的特点。2常用网页图像格式网页中的图像不是越多越好，也不是越大越好，而是根据不同的需要选择不同的图像格式。1）JPG文件。JPG图像是一种有损压

22、缩的图像格式，可以根据压缩质量调节文件大小。支持真彩色但不具有透明效果。在网页中常用于照片、风景等。2）GIF文件。GIF格式表现的颜色要比JPG少得多，但是支持背景透明，还能支持动画。在网页中常用于具有透明背景的图像，常用于网页中的图形、符号、标题等。3）PNG文件。结合了GIF和JPEG的优点，可制作矢量图像。但文件较大，对浏览器有一定的要求。3插入图像在Dreamweaver CS5中，用户可以在任意位置插入JPG、GIF、PNG格式的图像。插入的方法有很多种。方法1：使用菜单命令。将光标定位在需要插入图像的位置处，执行“插入”“图像”命令，如图4-44所示。在弹出的“选择图像源文件”对

23、话框中选择需要插入的图像即可，如图4-45所示。方法2：使用面板插入。将光标定位在需要插入图像的位置处，选择“插入”工具栏上的“常用”选项，单击“图像”按钮，在弹出的对话框中选择需要插入的图像即可，如图4-46所示。方法3：使用资源面板插入。执行“窗口”“资源”命令打开资源管理器面板，在图像面板中选中需要插入的图像直接拖动到文档内需要插入图像的位置处，如图4-47所示。方法4：使用快捷键，弹出“选择图像源文件”的对话框，直接选取图像插入即可。活动活动6 为为“贸贸女装贸贸女装”商品详情页商品详情页“detail.html”添加图像添加图像为贸贸女装商品详情页“detail.html”添加图像（

24、1）活动分析很多时候网页需要文字和图像相结合的形式来表达一个页面，在掌握了文字的输入和编辑方法后，我们需要掌握图像的插入和编辑方法，同时也需要设置文字和图像的合理搭配，还需要在Dreamweaver中对图像进行简单的编辑，以达到最好的效果。（2）知识要点 掌握在网页中添加图像的方法。掌握设置图像属性的方法及各个属性的意义。（3）动手操作步骤步骤1 前期前期准备准备将本书配套资源“网站素材”文件夹中的“项目4（中）素材”中的所有文件及文件夹复制到maomaonvzhuang站点内，如图4-48所示。步骤步骤2 打开打开detail.html页面页面1）打开Dreamweaver CS5软件。2）

25、在文件面板中，双击打开detail.html，将光标停留在标题文字后，如图4-49所示。步骤步骤3 插入商品图像插入商品图像1）选择“插入”工具栏上的“常用”选项，单击“图像”按钮，如图4-50所示。2）在弹出的“选择图像源文件”对话框中选择需要插入的图像“detailsp.jpg”，如图4-51所示。3）在“图像标签辅助功能属性”对话框内，单击“取消”按钮，此时未添加替换文本，如图4-52所示，图片插入完成。4）单击图像，选择该图像后在图像属性面板中，设置图像的对齐方式为“右对齐”，如图4-53所示。5）图像插入完成，按键在浏览器中预览。步骤步骤4 插入按钮图像插入按钮图像 1）选中文字下方

26、的水平线，按小键盘上的键，再输入回车键，在水平线上方插入一行，如图4-54所示。2）在如图4-54所示的光标停留处，插入图像“gouwuche.jpg”。3）单击图像，选择该图像后在图像属性面板中，设置图像的水平边距为“50”，如图4-55所示。4）重复上述步骤，在“加入购物车”按钮图像后插入按钮图像“goumai.jpg”，同样设置水平边距为50。5）完成后，选择菜单“文件”“保存”命令，保存文件，按键在浏览器中预览，如图4-56所示。活动活动7 学习网页图像的编辑方法学习网页图像的编辑方法 1图像的编辑（1）设置图像属性在Dreamweaver CS5中，通过“属性”面板可以对图像进行相关

27、操作，选中需要操作的图像，即可在“属性”面板设置其属性，如图4-57所示。图像：预览、大小和ID名称。宽和高：设置图像的显示大小，单位为像素。当图像的宽度和高度有所变化时，可单击数值右侧的恢复按钮恢复图像的原始尺寸。源文件：图像的存放路径。链接：图像的超级链接。替换：出现在图像位置上的文字，当图片因为其他原因无法显示时，可用文字给予提醒。类：可选择该图像套用的类。编辑：对图片进行基本的编辑。热点工具组：用于创建不同形状的图像映射。垂直边距和水平边距：图像四周与其他元素之间的距离。边框：设置图像边框的宽度，单位为像素。对齐：设置图像的对齐方式。（2）给图像添加文字当网页中的图像因为一些原因无法显

28、示时，给该图像添加文字就能提示出该图像的存在意义。给图像添加文字的方法很简单，选中该图像，在属性面板的“替换”列表中输入该图像的提示文字即可。（3）给图像创建热点区域一般情况，一张图片只能添加一个链接目标，但是有时候，需要一张图片添加几个不同的链接目标，比如说一张地图根据不同的地理位置链接到不同的网页，此时可以通过创建热点区域来实现一张图片添加几个不同的链接目标。属性面板中的热点工具组就可以创建不同的热点，可以是一个矩形、一个圆形也可以是用多边形勾勒出不规则的图形。2图像占位符图像占位符是指在图像尚未编辑完成前，在网页中保留该图像的文字，方便以后直接更新。比如我们在制作商品列表页面时，当所有的

29、商品图片还没有完成时，我们可以在每个需要添加该商品图片处依次添加图像占位符，当以后商品图片完成后，可以直接替换。（1）插入图像占位符的方法方法1：使用菜单命令。将光标定位在需要插入图像的位置处，执行“插入”“图像对象”“图像占位符”命令，在弹出的对话框中设置相应属性，单击“确定”按钮即可。方法2：使用面板插入。将光标定位在需要插入图像的位置处，选择“插入”工具栏上的“常用”选项，单击“图像”按钮旁边的下拉箭头，在下拉列表中选择“图像占位符”即可。（2）替换图像占位符的方法方法1：双击图像占位符。方法2：在弹出的“选择源图像”对话框中，选择需要替换的图像，单击“确定”按钮即可。3鼠标经过图像鼠标

30、经过图像由两个部分组成，即主图像和次图像。页面载入时，首先显示主图像，当鼠标经过主图像时，图像自动切换成次图像，当鼠标离开图像时，图像恢复原样。插入鼠标经过的步骤如下。步骤1：首先制作好两个尺寸相同的图像。步骤2：将光标放置在需要插入鼠标经过图像的位置，在插入栏上，选择“常用”类别中的“图像”中的“鼠标经过图像”，如图4-58所示。打开“插入鼠标经过图像”对话框。步骤3：在“图像名称”文本框中输入图像名称用于说明。在“原始图像”和“鼠标经过图像”文本框中依次输入图像的路径或者单击“浏览”按钮选择图像，如图4-59所示。步骤4：在替换文本中输入图像的替换文本，在“按下时，前往的URL”文本框中选

31、择链接目标，单击“确定”按钮。4使用内置工具编辑图像网页中的大多数图像都是通过图像处理软件比如Photoshop、Fireworks等处理过的，所以图片都是无可挑剔的，其实在Dreamweaver中也可以对图像进行一些简单的编辑，当需要编辑的图像能用Dreamweaver完成时，我们可以直接在Dreamweaver中用内置工具编辑，从而省去了图像重新在Photoshop、Fireworks等软件中编辑的时间。内置工具对图像的编辑可以做到以下几点：1）剪裁。可以对图像的尺寸进行修改。2）亮度、对比度。可以调节图像的亮度、对比度，使得图像更好地显示出来。3）锐化。可以增强图像边缘的像素对比度，从而

32、增加图像的清晰度。5图像的使用原则图像的使用原则是需要兼顾设计者和浏览者双方的考虑，设计者总希望通过图片使页面漂亮，却导致浏览者在浏览时需要长时间等待去下载图片，因此面对这些矛盾，需要遵循一些原则尽量避免矛盾突出。1）仔细挑选图片，尽量做到简而精。2）图像尽量做得小，方便浏览者很快地下载。3）尽量多使用重复图像，这样可以有效地缩减网站的大小。活动活动8 为为“贸贸女装贸贸女装”商品详情页商品详情页“detail.html”添加图像占位符添加图像占位符1）活动分析在实际应用中，常常遇到需要插入图像，但是图像还没有完成的情况，此时添加图像占位符以及日后的替换图像占位符起了非常重要的作用。同时，合理

33、使用Dreamweaver中内置的编辑工具编辑图像也是专业网页制作人员必须掌握的技能。（2）知识要点 掌握在网页中添加图像占位符以及替换图像占位符的方法。通过内置的编辑工具对图像对象进行基本的编辑。（3）动手操作步骤步骤1 前期前期准备准备打开本项目活动2中已完成并保存的detail.html文件，在水平线下方输入回车键，创建新的一行，输入文字“更多推荐”，再次输入回车键换行，如图4-60所示。步骤2 插入图像占位符1）在光标停留处，选择菜单“插入”“图像对象”“图像占位符”命令，如图4-61所示。弹出“图像占位符”对话框。图4-61 选择“图像占位符”2）在“图像占位符”对话框中填写需要占位

34、的图像的相关信息，如图4-62所示。3）单击“确定”按钮，插入图像占位符，如图4-63所示。4）在图像占位符sp1之后，继续添加两个图像占位符，名称分别为“sp2”和“sp3”，大小均为150150，完成如图4-64所示。步骤步骤3 替换图像占位符替换图像占位符 1）双击第一个图像占位符，在弹出的“选择图像源文件”对话框中选择“sp1.jpg”，同样的方法依次替换第二个和第三个占位符，选择的图像源文件为“sp2.jpg”和“sp3.jpg”。2）设置这三种图像的垂直边距为10，水平边距为10，边框为5，如图4-65所示。步骤步骤4 编辑编辑图像图像1）选择第二张图像“sp2.jpg”，选择属性

35、面板上的“裁剪”，在图像上出现黑色选择框，根据需要调整黑框到合适的大小，输入回车键，如图4-66所示。2）选择第三张图像“sp3.jpg”，选择属性面板上的“亮度和对比度”，在弹出的对话框中调整亮度为50，对比度为50，单击“确定”按钮，如图4-67所示。3）完成后，选择菜单“文件”“保存”命令，保存文件，按键在浏览器中预览，如图4-68所示。图4-68 完成预览 活动活动9 学习表格的使用学习表格的使用 1创建表格（1）表格的用途表格是一种常用的组织和处理数据的形式，用表格来组织网页内容，用行和列来显示信息，可以设计出布局合理、结构协调、美观匀称、简单明了的页面。利用表格布局是网页布局的方法

36、之一，通过设置表格的高度、宽度和比例等对页面元素进行控制，从而精确网页上的布局，在本书的项目6中会具体讲解。下面介绍两种方法插入表格。方法方法1：使用菜单命令。将光标放在需要插入的表格位置，执行“插入”“表格”命令，如图4-69所示，在弹出的对话框中设置需要创建的表格属性即可。方法方法2：使用面板插入。将光标定位在需要插入表格的位置处，选择“插入”工具栏上的“常用”选项，单击“表格”按钮，如图4-70所示，在弹出的对话框中设置需要创建的表格属性即可，如图4-71所示。（3）表格的基本属性 行数：表格具有行的数目。列数：表格具有列的数目。表格宽度：表格的宽度，单位有“像素”和“百分比”。边框粗细

37、：表格边框的宽度，单位为像素。单元格边距：单元格边框和单元格内容之间的距离，单位为像素。单元格间距：相邻的单元格之间的距离，单位为像素。默认的单元格边距和间距如图4-72所示。当设置单元格边距和间距为0时，表格如图4-73所示，可见默认的单元格边距和间距不为0，因此创建表格时需要格外注意。2选取单元格、行与列、表格（1）选择单元格方法1：单击单元格内部，在标签选择器中选择标签，如图4-74所示。方法2：按住键同时选中单元格，如图4-75所示。图4-74 通过标签选择器选中单元格 图4-75 通过快捷键选中单元格（2）选择行或列方法1：拖放鼠标，选择一行的所有单元格或一列的所有单元格。方法2：当

38、鼠标在行的左边缘或者列的上边缘变成箭头时，单击鼠标选择行或者列，如图4-76、图4-77所示。（3）选择表格方法1：拖放鼠标，选择全部单元格。方法2：单击表格的左上角，选中整个表格，如图4-78所示。方法3：单击某个单元格，在标签选择器中选择标签，如图4-79所示。（4）选中对象当选中单元格、行与列或者表格后，该单元格、行与列或者表格将被粗线围绕，所以在对表格做任何操作之前，先观察该表格是否被选中，如图4-80所示。3设置表格和单元格属性（1）设置表格属性选中要设置的表格，属性面板中将显示该表格的属性，如图4-81所示。行和列：行的数目和列的数目。宽和高：宽度和高度，单位默认为像素，也可设置为

39、百分比。填充：内容与边框之间的距离，单位为像素。间距：相邻的单元格之间的距离，单位为像素。对齐：对齐方式。边框：表格边框的宽度，单位为像素。类：选择套用的类。（2）设置单元格属性选中要设置的单元格，属性面板中将显示该单元格的属性，如图4-82所示。水平：单元格内容的水平对齐方式。垂直：单元格内容的垂直对齐方式。宽和高：宽度和高度，单位默认为像素，也可设置为百分比。不换行：设置单元格的内容全部都在一行内。标题：默认表格标题单元格格式粗体并居中。背景颜色：通过颜色设置单元格背景的颜色。合并单元格：将所选择的两个或多个单元格合并。拆分单元格：将所选择的单元格拆分为两个或多个单元格。4表格嵌套（1）嵌

40、套表格表格嵌套就是在一个单元格中再插入一个表格。（2）插入嵌套表格的方法方法1：选中需要被嵌套的单元格，单击“插入”“表格”，打开“插入表格”对话框。方法2：和插入表格一样的操作，在弹出的对话框中设置需要创建的表格属性即可，如图4-83所示。5表格行、列的增加与删除最初计划的表格行和列的数目不一定准确，因此可以在后期增加或减少表格行和列的数目，表格行和列的增加和删除可以通过修改表格行和列的数目来操作，也可以执行“修改”“表格”“插入行”或“插入列”命令，如图4-84所示，在弹出的对话框中设置相关参数，如图4-85所示。6单元格的拆分与合并（1）单元格的拆分选中所需要拆分的单元格，在属性面板中单

41、击“拆分”按钮，弹出“拆分单元格”对话框，在对话框中输入所需要拆分的行或列的数量，单击“确定”按钮即可，如图4-86所示。（2）单元格的合并选中所需要合并的若干单元格，在属性面板中单击“合并”按钮，可以合并成一个单元格。活动活动10 运用表格制作运用表格制作“贸贸女装贸贸女装”商品列表页商品列表页“list.html”（1）活动分析在页面中显示表格数据是表格的主要应用之一，尤其在商务网站发展的今天，通过表格制作商品列表更是非常普遍的方法，因此创建、编辑表格是必须熟练掌握的。（2）知识要点 熟练掌握创建表格的方法。熟练掌握表格的编辑方法。（3）动手操作步骤步骤1 前期前期准备准备将本书配套资源“

42、网站素材”文件夹中的“项目4（下）素材”中的所有文件及文件夹复制到maomaonvzhuang站点内，如图4-87所示。步骤步骤2 打开打开list.html页面页面1）打开Dreamweaver CS5软件。2）在文件面板中，双击打开list.html，将光标停留在单元格空白处，如图4-88所示。步骤步骤3 插入插入表格表格1）在单元格属性面板中，设置该单元格内容的水平对齐方式为“居中对齐”。2）在“插入栏”中选择“常用”类别，单击“表格”按钮，如图4-89所示。3）打开插入表格的对话框，插入4行4列的表格，表格宽度为“788像素”，边框粗细、单元格边距、单元格间距均为“0”，如图4-90所

43、示。4）完成后的效果如图4-91所示。步骤步骤4 插入嵌套的插入嵌套的表格表格1）选中该表格第一行第一列的单元格，在属性面板中设置该单元格的宽为“197”，高为“300”，水平对齐方式为“居中对齐”，如图4-92所示。2）单击该单元格，将光标停留在单元格内，单击“插入栏”的“表格”按钮，插入一个两行一列的表格，表格宽度为100%，边框粗细、单元格边距、单元格间距均为“0”。3）选中该嵌套表格第一行的单元格，在属性面板中设置该单元格的高为“200”，水平对齐方式为“居中对齐”，如图4-93所示。4）单击常用工具栏插入商品图像“1.gif”。5）选中该嵌套表格第二行的单元格，在属性面板中设置该单元

44、格的高为“100”，水平对齐方式为“居中对齐”，如图4-94所示。6）打开本书配套资源“网站素材”文件夹中的“项目4（下）素材”文件夹中的“商品列表清单.txt”文件，将商品1的文字介绍部分复制到该单元格内，完成如图4-95所示。步骤步骤5 插入余下插入余下商品商品1）选中该表格第一行第二列的单元格，重复步骤4，插入的商品图像为“2.gif”，文字素材在“商品列表清单.txt”文件中。2）选中该表格第一行第三列的单元格，重复步骤4，插入的商品图像为“3.gif”，文字素材在“商品列表清单.txt”文件中。3）选中该表格第一行第四列的单元格，重复步骤4，插入的商品图像为“4.gif”，文字素材在

45、“商品列表清单.txt”文件中。4）重复步骤4，在该表格的第二行的第三列，第三行的第三列中依次添加商品及商品文字说明，文字素材均在“商品列表清单.txt”文件中。步骤步骤6 合并合并单元格单元格1）拖动鼠标同时选中该表格第四行的所有单元格，在属性面板中，单击单元格的合并按钮，合并第四行的所有单元格，如图4-96所示。2）选中刚刚合并的第四行的单元格，在属性面板中设置该单元格的高为“25”，水平对齐方式为“右对齐”，如图4-97所示。3）在该单元格内，依次插入图片“shangyiye.png”和“xiayiye.png”，如图4-98所示。步骤7 完成预览完成后，选择菜单“文件”“保存”命令，保

46、存文件，按键在浏览器中预览，如图4-99所示。项项 目目 小小 结结在本项目中，我们主要了解了如何创建网页、图像以及表格的制作方法。1）了解了如何新建网页、网页文件夹和设置页面属性，这些操作是每个页面都会用到的。练习了网页中文字的输入和编辑，包括列表、特殊符号、日期和水平线等。文字是网页中最基本、最重要、最必不可少的元素，因此熟练地编辑文字对网页制作是非常重要的。2）了解了常用的图片格式，学习了在网页中添加图片并修改图片属性的方法。此外，还学习了添加图像占位符以及替换图像占位符的操作以及鼠标经过图像的制作。将来在制作网页中，对于图像的处理会非常多并且繁琐，因此可以根据不同的情况采取不同的操作。3）了解了如何创建表格，设置表格属性以及变更表格。这些技术在实际应用中需要灵活运用。