1.2 卡通类网站制作实例_Dreamweaver 8中文版商业案例精粹-QQ阅读男生轻小说网

上QQ阅读APP看本书，新人免费读10天

设备和账号都新为新人

1.2 卡通类网站制作实例

案例分析

卡通个性展示网站制作，页面中要着重通过卡通形象或卡通场景，展现出自己很具有个性的一面。通常这一类型的网站制作比较简单，重点在页面设计上，页面的构成主要是以图片为主。

颜色应用

通常在个性展示类网站设计中，并没有特定的颜色，在本例中页面采用纯白色的底色，使页面非常干净清晰。

页面设计

在页面设计上，本案例采用左右两栏的页面构成，导航菜单在左侧，页面主体内容在右侧。在左侧的导航菜单上应用卡通不规则的图形，打破页面左右的平衡，使页面更具有个性，如图1-4所示。

图1-4 页面效果

技术点睛：

（1）创建站点——在Dreamweaver中制作网站，第一步就是需要在Dreamweaver中建立网站站点，制作的网站页面都需要放置在站点当中，以便于网站中文件的管理，如图1-5所示。

图1-5 创建站点

（2）新建文档——在Dreamweaver中提供了多种文档类型，可以根据需要在“新建文档”对话框中选择某种类型的文档，以方便用户的工作，如图1-6所示。

图1-6 新建文档

（3）设置页面边距——新建了一个文档之后，开始制作页面，在制作页面之前，需要考虑页面与浏览器边框的距离，通常情况下，页面都是与浏览器边框靠在一起的，这就需要在“页面属性”对话框中将页面边距都设置为0，如图1-7所示。

图1-7 设置页面边距

（4）设置页面标题——在制作页面前，还需要设置页面标题，即给页面取个名字，如图1-8所示。

图1-8 设置页面标题

（5）在页面中插入图像，使用图像占位符，以及在页面中对图像进行一些简单的编辑。

1.2.1 网站制作

制作步骤

STEP01 打开Dreamweaver，执行“站点→新建站点”命令，弹出“新建站点”对话框，有“基本”和“高级”两个选项卡，选择“基本”选项卡。

STEP02 在设置站点名称的文本框中输入“Dreamweaver 8商业应用精粹”，设置站点的HTTP地址的文本框为空不填，如果有也可以填上，如图1-9所示。

图1-9 设置新建站点的名称

STEP03 单击“下一步”按钮，切换到新建站点第二步。选中“否，我不想使用服务器技术”选项，如图1-10所示。

图1-10 设置是否使用服务器技术

STEP04 单击“下一步”按钮，切换到新建站点第三步，选择在本地计算机进行编辑，并浏览本地文件存储的位置，如图1-11所示。

图1-11 选择在何处使用文件

STEP05 单击“下一步”按钮，切换到新建站点第四步，在“您如何连接到远程服务器”下拉列表中选择“无”选项，因为在这里建立的是一个本地的站点，如图1-12所示。

图1-12 选择是否连接到远程服务器

STEP06 单击“下一步”按钮，切换到站点定义完成对话框，从中可以看到站点定义的基本信息，包括本地信息、远程信息和测试服务器，如图1-13所示。

图1-13 设置完成

STEP07 单击“完成”按钮，完成新建站点对话框的设置，在“文件”面板就可以看到新建立的本地站点，如图1-14所示。

图1-14 “文件”面板

Tips

若要快速开始，可以从设置Dreamweaver 8站点的第一步开始，设置本地文件夹。然后，可以以后再添加远程和测试信息。开始使用Dreamweaver 8前至少应设置一个本地文件夹。

STEP08 执行“文件→新建”命令，弹出“新建文档”对话框，在“常规”选项卡“类别”列表中选中“基本页”选项，在“基本页”列表中选中HTML选项，如图1-15所示。

图1-15 “新建文档”对话框

Tips

Dreamweaver 8为Web设计提供了方便的编辑环境，可以编辑HTML、CFML、ASP、JavaScript和CSS等文档，如Visual Basic、.NET、C#和Java等语言。在“新建文档”对话框中，从“类别”列表中选择“基本页”、“动态页”、“模板页”、“其他”或“框架集”选项，然后从右侧的列表中选择要创建的文档类型。

STEP09 单击“创建”按钮，新建一个HTML页面，执行“文件→保存”命令，保存页面为“CD\源文件\第1章\1.1.html”。

STEP10 单击“属性”面板上的“页面属性”按钮，弹出“页面属性”对话框，设置如图1-16所示。

图1-16 设置“页面属性”对话框

STEP11 单击“确定”按钮，完成“页面属性”对话框设置，在“文档”工具栏上的“标题”文本框中输入页面的标题“个性网页”，如图1-17所示。

图1-17 设置网页标题

STEP12 单击“插入”工具栏上的“表格”按钮，在页面中插入一个1行2列，“表格宽度”为1 000像素，“表格边框”、“单元格间距”、“单元格边距”均为“0”的表格，如图1-18所示。

图1-18 插入表格

Tips

表格在“属性”面板的“边框”属性是指表格边框的粗细数值，“填充”属性是指表格中内容与表格边框的间距，“间距”属性是指表格边框与边框之间的间距。

STEP13 将光标移至第1列的单元格中，在“属性”面板上设置单元格“宽”为“250”，“垂直”属性为“顶端”。

STEP14 将光标移至第1列的单元格中，单击“插入”工具栏上的“表格”按钮，插入一个10行1列，“表格宽度”为250像素，“表格边框”、“单元格间距”、“单元格边距”均为“0”的表格，如图1-19所示。

图1-19 插入表格

STEP15 将光标移至刚插入表格第1行的单元格中，单击“插入”工具栏的“常用”选项卡中“图像”按钮旁边的下拉按钮，在下拉菜单中选择“图像占位符”选项，如图1-20所示。

图1-20 选择“图像占位符”选项

STEP16 弹出“图像占位符”对话框，在该对话框中可以设置占位符的大小和颜色，并为占位符提供文本标签，设置如图1-21所示。

图1-21 设置“图像占位符”对话框

Tips

图像占位符不是在浏览器中显示的图形图像。在发布站点之前，应该用适用于Web的图形（例如GIF或JPEG）替换所有页面上添加的图像占位符。

STEP17 单击“确定”按钮，在该单元格中插入图像占位符，如图1-22所示。

图1-22 插入图像占位符

STEP18 使用相同的制作方法，可以在其他单元格插入符合各自图像大小的占位符，如图1-23所示。

图1-23 插入占位符

STEP19 执行“文件→保存”命令，保存页面，单击“文档”工具栏的“在浏览器中预览”按钮，预览页面效果如图1-24所示。

图1-24 页面预览效果

STEP20 删除前面所制作的图像占位符，将光标移至第1行的单元格中，单击“插入”工具栏的“图像”按钮，弹出“图像标签铺助功能属性”对话框，如图1-25所示。

图1-25 “图像标签铺助功能属性”对话框

STEP21 单击“确定”按钮，在该单元格中插入图像“CD\源文件\第1章\images\menu01.gif”，如图1-26所示。

图1-26 插入图像

小技巧

如果用户只是把图像占位符替换成一张不会变化的普通图像，只需要选中图像占位符，在“属性”面板上的“源文件”处设置它的源文件即可，这样图像占位符就会被替换成想要的图片，如图1-27所示。

图1-27 设置“属性”面板的“源文件”

Tips

在“图像标签辅助功能属性”对话框中，可以根据需要在“替换文本”下拉列表框或“详细说明”文本框中输入信息。如果不想在这里设置“图像标签辅助功能属性”，可以单击“取消”按钮，该图像出现在文档中，但Dreamweaver不会将它与辅助功能标签或属性相关联。

STEP22 采用相同的制作方法，可以在第2行至第10行的单元格中，分别插入相应的图像，如图1-28所示。

图1-28 页面效果

STEP23 将光标移至上一级表格第2列的单元格中，在“属性”面板上设置“垂直”属性为“顶端”，单击“插入”工具栏的“表格”按钮，插入一个2行1列，“表格宽度”为100%，“表格边框”、“单元格间距”、“单元格边距”均为0的表格，如图1-29所示。

图1-29 插入表格

STEP24 将光标移至第1行的单元格中，在该单元格中插入图像“CD\源文件\第1章\images\aboutme_top.gif”；将光标移至第2行的单元格中，在该单元格中插入图像“CD\源文件\第1章\images\about_img.gif”，页面效果如图1-30所示。

图1-30 页面效果

Tips

在将图像插入Dreamweaver 8文档时，Dreamweaver 8自动在HTML源代码中生成对该图像文件的引用。为了确保此引用的正确性，该图像文件必须位于当前站点中。如果图像文件不在当前站点中，Dreamweaver 8会询问是否要将此文件复制到当前站点中。

小技巧

在“图像标签辅助功能属性”对话框中，“替换文本”的作用是当鼠标指针移动到这些图片上时，如果给图像加上了“替换文本”，浏览器可以在鼠标指针右下方弹出一个黄底的说明框，为浏览者提供提示。当浏览器禁止显示图片时，如果给图像加上了“替换文本”，可以在图片的位置显示出这些文本。“详细说明”的作用是当在“详细说明”文本框中输入用户单击图像时显示的文件位置，该文本框提供指向与图像相关的文件的链接。如果用户在插入图片时不想出现“图像标签辅助功能属性”对话框，可以在“首选参数”对话框中进行设置，如图1-31所示。