1.3 女性类网站制作实例

案例分析

女性类个性展示网站，通常以可爱的形象特征体现整个页面，其主要针对年轻女性，通过网站展示自己个性的一面，也在网站上发布自己的日记和照片等。运用卡通形象，使页面更加生动、活泼。

颜色应用

在页面中应用黄色主色调为底色，再点缀一些心星图标，烘托出温暖、甜蜜、可爱的个性特征。页面的主体内容运用绿色，使页面具有很强的视觉冲击力，可以给人留下深刻的印象，突出展示个人的个性特点。

页面设计

在本例的女性类个性展示网站中，采用了上下结构形式，在页面主体部分以黑板的形式体现出主体内容，主题突出，使页面内容一目了然。页面两边搭配各种卡通造型的图案，突出页面的个性和层次感，如图1-38所示。

图1-38 页面效果

技术点睛：

（1）页面背景设置—— 如果页面的背景图像是规则图形，可以在“页面属性”对话框中设置页面背景，如图1-39所示。

图1-39 设置页面背景

（2）单元格背景设置—— 在页面中某一部分内容的背景图像是规则图形，可以在“属性”面板上设置该单元格或表格的背景图像，如图1-40所示。

图1-40 设置单元格或表格背景

（3）鼠标经过图像的设置—— 可以通过设置鼠标经过图像，使图像产生简单的图像翻转动态效果。鼠标经过图像是由两张图像组成，当鼠标移至或经过图像上时，图像换为另一幅图像，如图1-41所示。

图1-41 设置鼠标经过图像

（4）换行符—— 在页面中可以按键盘上的快捷键【Shift+Enter】插入换行符，使页面内容换行。

（5）背景颜色—— 可以选中表格或单元格，在“属性”面板上的“颜色”文本框中输入颜色值，设置表格或单元格背景颜色。

（6）文本或图像与边框距离的设置——转换到代码视图，在代码中加入空格代码&nbsp；即可，如图1-42所示。

图1-42 加入空格代码

1.3.1 制作步骤

STEP01 执行“文件→新建”命令，弹出“新建文档”对话框，新建一个HTML页面，执行“文件→保存”命令，保存页面为“CD\源文件\第1章\1.3.html”。

STEP02 单击“属性”面板上的“页面属性”按钮，弹出“页面属性”对话框，设置“背景”为“CD\源文件\第1章\images\201.gif”，并设置“左边距”、“右边距”、“上边距”、“下边距”均为“0”，如图1-43所示。

图1-43 “页面属性”对话框

STEP03 单击“确定”按钮，完成“页面属性”对话框的设置，页面如图1-44所示。

图1-44 页面效果

STEP04 单击“插入”工具栏的“表格”按钮，在页面中插入一个1行1列，“表格宽度”为100%，“边框粗细”、“单元格边距”、“单元格间距”均为“0”的表格，如图1-45所示。

图1-45 插入表格

STEP05 将光标移至表格单元格中，在“属性”面板上设置“高”为“79”，“背景”为“CD\源文件\第1章\images\202.gif”，如图1-46所示，页面如图1-47所示。

图1-46 “属性”面板

图1-47 页面效果

STEP06 将光标移至表格单元格中，在“属性”面板上设置“水平”属性为“居中对齐”，“垂直”属性为“底部”，单击“插入”工具栏的“表格”按钮，插入一个1行10列，“表格宽度”为841像素，“边框粗细”、“单元格边距”、“单元格间距”均为“0”的表格，如图1-48所示。

图1-48 插入表格

STEP07 将光标移至第1列的单元格中，拖动鼠标选中表格中的所有单元格，在“属性”面板上设置“垂直”属性为“底部”。

STEP08 将光标移至第1列的单元格中，在“插入”工具栏的“插入图像”下拉菜单中选择“鼠标经过图像”选项，如图1-49所示。

图1-49 选择插入“鼠标经过图像”按钮

STEP09 弹出“插入鼠标经过图像”对话框，如图1-50所示。

图1-50 “插入鼠标经过图像”对话框

Tips

选用一对或多对图像用于鼠标经过图像。将使用两个图像文件创建鼠标经过图像：原始图像（当首次加载页面而显示的图像）和鼠标经过图像（鼠标指针移动到主图像而显示的图像）。鼠标经过图像中的两个图像必须大小相等，如图这两个图像的大小不同， Dreamweaver 8将自动调整第二个图像的大小以匹配第一个图像。

STEP10 单击“原始图像”文本框后的“浏览”按钮，插入图像“CD\源文件\第1章\images\203. gif”，单击“鼠标经过图像”文本框后的“浏览”按钮，插入图像“CD\源文件\第1章\images\204.gif”，单击“确定”按钮完成“鼠标经过图像”的插入，如图1-51所示。

图1-51 插入鼠标经过图像

Tips

在“插入鼠标经过图像”对话框中，“替换文本”和插入图像时的“替换文件”功能一样。“按下时，前往的URL”文本框中需要填写的是超链接地址，也可以单击鼠标经过图像，在“属性”面板设置超链接地址。

STEP11 执行“文件→保存”命令，保存页面，单击“文档”工具栏的“在浏览器中预览”按钮，在浏览器中预览页面，当鼠标移至鼠标经过图像上时，可以看到图像翻转效果，如图1-52所示。

图1-52 在浏览器中预览页面

STEP12 将光标移至第2列位置，在“插入”工具栏的“插入图像”下拉菜单中选择“鼠标经过图像”选项。在弹出的对话框中，单击“原始图像”文本框后的“浏览”按钮，插入图像“CD\源文件\第1章\images\205.gif”；单击“鼠标经过图像”文本框后的“浏览”按钮，插入图像“CD\源文件\第1章\images\206.gif”，如图1-53所示。单击“确定”按钮完成插入，页面如图1-54所示。

图1-53 “插入鼠标经过图像”对话框

图1-54 页面效果

STEP13 采用相同的制作方法，在其他单元格插入鼠标经过图像，页面如图1-55所示。

图1-55 页面效果

STEP14 执行“文件→保存”命令，保存页面，单击“文档”工具栏的“在浏览器中预览”按钮，在浏览器中预览页面，当鼠标移至鼠标经过图像上时，可以看到图像翻转效果，如图1-56所示。

图1-56 页面预览效果

STEP15 将光标移至上一级表格尾部，单击“插入”工具栏的“表格”按钮，插入一个1行1列，“表格宽度”为100%，“边框粗细”、“单元格边距”、“单元格间距”均为“0”的表格，如图1-57所示。

图1-57 插入表格

STEP16 将光标移至该表格单元格中，单击“插入”工具栏的“表格”按钮，插入一个1行3列，“表格宽度”为955像素，“边框粗细”、“单元格边距”、“单元格间距”均为“0”的表格，如图1-58所示。

图1-58 插入表格

STEP17 将光标移至刚插入表格的第1列的单元格中，在“属性”面板上设置“宽”为“224”，“垂直”属性为“顶端”。单击“插入”工具栏的“表格”按钮，插入一个4行1列，“表格宽度”为224像素，“边框粗细”、“单元格边距”、“单元格间距”均为“0”的表格，如图1-59所示。

图1-59 插入表格

STEP18 将光标移至刚插入表格第1行单元格中，单击“插入”工具栏的“图像”按钮，在该单元格中插入图像“CD\源文件\第1章\images\223.gif”，如图1-60所示。

图1-60 插入图像

STEP19 将光标移至第2行的单元格中，用相同的方法，在该单元格中插入图像“CD\源文件\第1章\images\224.gif”；将光标移至第3行的单元格中，在该单元格中插入图像“CD\源文件\第1章\images\225.gif”；将光标移至第4行的单元格中，在该单元格中插入图像“CD\源文件\第1章\images\226.gif”，如图1-61所示。

图1-61 页面效果

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

图1-62 插入表格

STEP21 将光标移至刚插入表格第1行的单元格中，单击“插入”工具栏的“图像”按钮，在该单元格中插入图像“CD\源文件\第1章\images\227.gif”，将光标移至第2行的单元格中，在“属性”面板上设置“背景”为“CD\源文件\第1章\images\228.gif”，页面效果如图1-63所示。

图1-63 页面效果

STEP22 将光标移至第2行的单元格中，在“属性”面板上设置“水平”属性为“居中对齐”，单击“插入”工具栏的“表格”按钮，插入一个1行2列，“表格宽度”为447像素，“边框粗细”、“单元格边距”、“单元格间距”均为“0”的表格，如图1-64所示。

图1-64 插入表格

STEP23 将光标移至刚插入表格第1列的单元格中，在“属性”面板上设置该单元格“宽”为141，单击“插入”工具栏的“图像”按钮，在该单元格中插入图像“C D\源文件\第1章\images\229.gif”，如图1-65所示。

图1-65 插入图像

STEP24 将光标移至第2列的单元格中，在该单元格中输入相应的文字内容，如图1-66所示。

图1-66 输入文字

STEP25 将光标移至第一行文字后，按键盘上的快捷键【Shift+Enter】，可以插入一个换行符，添加行与行之间的间隔，拖动光标选中文字，在“属性”面板“大小”下拉列表中选择“12”，在“颜色”文本框中设置颜色值为#FFFFFF，选中最后一行的文字，在“属性”面板上的“颜色”文本框中设置颜色值为#FFFF82，页面如图1-67所示。

图1-67 页面效果

Tips

文本的换行可用“<br>”标签；字体、大小和颜色可在“属性”面板里可以设置；行距直接在“代码”视图里加入Html标签，也可以直接定义CSS样式表，用样式美化文字。

STEP26 光标置于该表格后，单击“插入”工具栏的“表格”按钮，插入一个5行2列，“表格宽度”为447像素，“边框粗细”、“单元格边距”、“单元格间距”均为“0”的表格，如图1-68所示。

图1-68 插入表格

STEP27 将光标移至第1行第1列的单元格中，在“属性”面板上设置“高”为“45”，“宽”为“141”，拖动光标同时选中第1行第1列和第1行第2列的两个单元格，在“属性”面板上设置“背景颜色”值为#FFFFFF，页面如图1-69所示。

图1-69 设置表格

Tips

当设置列的属性时， Dreamweaver 8更改对应于该列中每个单元格“td”标签的属性。但是，当设置行的某些属性时， Dreamweaver 8将更改“tr”标签的属性而不是行中每个 “td”标签的属性。在将同一种格式应用于行中的所有单元格时，将格式应用于“tr”标签会生成更简明易懂的Html代码。

STEP28 将光标移至第1行第1列的单元格中，在“属性”面板上设置“水平”属性为“右对齐”，单击“插入”工具栏的“图像”按钮，在该单元格中插入图像“CD\源文件\第1章\images\230.gif”，如图1-70所示。

图1-70 插入图像

STEP29 单击选中刚刚插入的图像，单击“文档”工具栏上的“代码”按钮，转换到代码视图中，在刚刚插入的图像标签后加入空格代码&nbsp;，使刚刚插入的图像与表格右边界有一定的间隙，如图1-71所示。

图1-71 加入空格代码

Tips

在HTML代码中，一个&nbsp；代码是一个半角的空格，在Dreamweaver的“文档”编辑窗口中，按键盘上的空格键，最多只可以插入一个半角空格，如果需要插入多个半角空格，就必须在HTML代码中加入空格代码。

STEP30 单击“文档”工具栏上的“设计”按钮，返回设计视图。将光标移至第1行第2列的单元格中，在该单元格中输入文字，如图1-72所示。

图1-72 输入文字

STEP31 拖动光标选中刚刚输入的文字，在“属性”面板上设置“大小”为12，设置颜色为#679A00，分别选中“日记”和“照片”文字，单击“属性”面板上的“加粗”按钮，加粗显示文字，如图1-73所示。

图1-73 页面效果

STEP32 将光标移至第2行第1列的单元格中，拖动光标选中第2行第1列和第2行第2列的两个单元格，在“属性”面板上设置“高”为“45”，“背景颜色”为#66CC00，如图1-74所示。

图1-74 设置单元格属性

STEP33 将光标移至第2行第1列的单元格中，设置“水平”属性为“右对齐”，单击“插入”工具栏上的“图像”按钮，在该单元格中插入图像“CD\源文件\第1章\images\230.gif”，并转换到代码视图，加入空格代码。

STEP34 将光标移至第2行第2列的单元格中，在该单元格中输入文字，选中文字，在“属性”面板上设置“大小”为“12”，“颜色”为#FFFFFF，如图1-75所示。

图1-75 页面效果

STEP35 相同的制作方法，可以完成这一部分页面内容的制作，如图1-76所示。

图1-76 页面效果

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

图1-77 插入表格

STEP37 将光标移至第1行的单元格中，单击“插入”工具栏的“图像”按钮，在该单元格中插入图像“CD\源文件\第1章\images\231.gif”，如图1-78所示。

图1-78 插入图像

STEP38 采用相同的方法，在第2行的单元格中插入图像“CD\源文件\第1章\images\232.gif”，在第3行的单元格中插入图像“CD\源文件\第1章\images\233.gif”，在第4行的单元格中插入图像“CD\源文件\第1章\images/234.gif”，在第5行的单元格中插入图像“CD\源文件\第1章\images\235.gif”，如图1-79所示。

图1-79 页面效果

STEP39 将光标移至上一级表格后，单击“插入”工具栏的“表格”按钮，插入一个1行4列，“表格宽度”为100%，“边框粗细”、“单元格边距”、“单元格间距”均为“0”的表格，如图1-80所示。

图1-80 插入表格

STEP40 将光标移至第1列的单元格中，在“属性”面板上设置“宽”为“224”，并在该单元格中插入图像“CD\源文件\第1章\images\236.gif”；将光标移至第2列的单元格中，在“属性”面板上设置“宽”为“470”，并在该单元格中插入图像“CD\源文件\第1章\ images\237. gif”；将光标移至第3列的单元格中，在“属性”面板上设置“宽”为“251”，并在该单元格中插入图像“CD\源文件\第1章\images\238.gif”，页面如图1-81所示。

图1-81 页面效果

STEP41 将光标移至第4列的单元格中，在“属性”面板上设置“背景”为“CD\源文件\第1章\images\239.gif”，页面如图1-82所示。

图1-82 页面效果

STEP42 完成整个页面的制作，执行“文件→保存”命令，保存页面，单击“文档”工具栏上的“在浏览器中预览”按钮，在浏览器中预览整个页面，如图1-83所示。

图1-83 页面预览效果

1.3.2 案例小结

女性类个性展示网站在设计制作上需把握以下重点：

● 页面以明快、鲜明的颜色突出个性很强的视觉感。

● 页面以各种卡通图案的形式展现出设计者可爱、甜美的个性特征。

● 注意页面的整体性及页面中内容的体现方式，如本例中主体内容的体现方式。

● 鼠标经过图像的使用方法。

上一章目录下一章