- Dreamweaver 8中文版商业案例精粹
- 览众编著
- 5050字
- 2020-08-28 09:06:28
1.4 举一反三——实用类个性展示网站
制作个性展示网站
STEP01 执行“文件→新建”命令，弹出“新建文档”对话框，新建一个HTML页面，执行“文件→保存”命令，保存页面为“CD\源文件\第1章\1.4.html”。
STEP02 单击“属性”面板上的“页面属性”按钮，弹出“页面属性”对话框，设置“左边距”、“右边距”、“上边距”、“下边距”均为“0”，单击“确定”按钮，完成“页面属性”对话框设置。
STEP03 单击“插入”工具栏的“表格”按钮
，在页面中插入一个1行3列，“表格宽度”为100%，“边框粗细”、“单元格边距”、“单元格间距”均为“0”的表格，如图1-84所示。
图1-84 插入表格
STEP04 将光标移至第1列的单元格中，在“属性”面板上设置“宽”为“150”，“垂直”属性为“顶端”，单击“插入”工具栏的“表格”按钮，在该单元格中插入一个4行1列，“表格宽度”为150像素，“边框粗细”、“单元格边距”、“单元格间距”均为“0”的表格，如图1-85所示。
图1-85 插入表格
STEP05 将光标移至刚插入表格的第1行单元格中，单击“插入”工具栏的“图像”按钮
，在该单元格中插入图像“CD\源文件\第1章\images\240.gif”，如图1-86所示。
图1-86 插入图像
STEP06 采用相同的方法，将光标移至第2行的单元格中，在该单元格中插入图像“CD\源文件\第1章\images\241.gif”；将光标移至第3行的单元格中，在该单元格中插入图像“CD\源文件\第1章\images\242.gif”；将光标移至第4行的单元格中，在该单元格中插入图像“CD\源文件\第1章\images\243.gif”，如图1-87所示。
图1-87 页面效果
STEP07 将光标移至上一级表格第2列的单元格中，在“属性”面板上设置“宽”为“150”，“垂直”属性为“顶端”，单击“插入”工具栏的“表格”按钮，在该单元格中插入一个3行1列，“表格宽度”为“150”像素，“边框粗细”、“单元格边距”、“单元格间距”均为“0”的表格，如图1-88所示。
图1-88 插入表格
STEP08 将光标移至刚插入表格第1行的单元格中，单击“插入”工具栏的“图像”按钮，在该单元格中插入图像“CD\源文件\第1章\images\244.gif”；将光标移至第3行的单元格中，在该单元格中插入图像“CD\源文件\第1章\images\245.gif”，页面如图1-89所示。
图1-89 插入图像
STEP09 将光标移至第2行的单元格中，在“属性”面板上设置“高”为“470”，“背景”为“CD\源文件\第1章\images\246.gif”，页面如图1-90所示。
图1-90 设置背景
STEP10 将光标移至第2行的单元格中，在“属性”面板上设置“水平”属性为“居中对齐”，“垂直”属性为“顶端”，按键盘上的快捷键【Shift+Enter】，插入一个换行符。
Tips
在Dreamweaver中的“文档”编辑窗口中，按键盘上的快捷键【Shift+Enter】可以插入一个换行符标签<br>。在默认状态下，换行符标签<br>在页面设计视图中是不可见的，如果想要看到在页面中插入的换行符标签<br>，可以执行“编辑→首选参数”命令，弹出“首选参数”对话框，在“分类”列表中单击“不可见元素”选项，单击选中“换行符”复选框，如图1-91所示，单击“确定”按钮，返回设计视图，就可以看见在页面中插入的换行符标签，如图1-92所示。
图1-91 “首选参数”对话框
图1-92 页面中的换行符
STEP11 将光标移至刚刚插入的换行符标签后，单击“插入”工具栏的“表格”按钮，在该单元格中插入一个7行1列，“表格宽度”为100像素，“边框粗细”、“单元格边距”、“单元格间距”均为“0”的表格，如图1-93所示。
图1-93 插入表格
STEP12 将光标移至第1行的单元格中，拖动光标，同时选中该表格中的所有单元格，如图1-94所示。
图1-94 选中单元格
小技巧
将光标移至要选中的单元列上方，当光标变为如图1-95所示，单击即可同时选中单元列中的所有单元格。将光标移至要选中的单元行左侧，当光标变为如图1-96所示，单击即可同时选中单元格行中的所有单元格。
图1-95 选中单元列
图1-96 选中单元行
STEP13 在“属性”面板上设置“高”为“30”，将光标移至第1行的单元格中，在该单元格中输入文字，选中输入的文字，在“属性”面板上设置“大小”为“12”，“颜色”为#9C3E0B，页面如图1-97所示。
图1-97 输入文字
STEP14 采用相同的制作方法，在其他单元格中输入相应的文字，并在“属性”面板上设置字体的大小和颜色，如图1-98所示。
图1-98 页面效果
STEP15 将光标移至外部大表格第3列的单元格中，在“属性”面板上设置“垂直”属性为“顶端”，单击“插入”工具栏的“表格”按钮，在该单元格中插入一个1行5列，“表格宽度”为100%，“边框粗细”、“单元格边距”、“单元格间距”均为“0”的表格，如图1-99所示。
图1-99 插入表格
STEP16 将光标移至刚插入表格的第1列的单元格中，在“属性”面板上设置“宽”为“12”，在该单元格中插入图像“CD\源文件\第1章\images\253.gif”；将光标移至刚插入表格的第2列的单元格中，在“属性”面板上设置“宽”为“408”，在该单元格中插入图像“CD\源文件\第1章\images\247.gif”；将光标移至第2列的单元格中，在“属性”面板上设置“宽”为“57”，在该单元格中插入图像“CD\源文件\第1章\images\248.gif”；将光标移至第3列的单元格中，在“属性”面板上设置“宽”为“63”，在该单元格中插入图像“CD\源文件\第1章\images\249.gif”；将光标移至第4列的单元格中，在“属性”面板上设置“背景”为“CD\源文件\第1章\images\250.gif”。页面效果如图1-100所示。
图1-100 页面效果
STEP17 选中刚刚插入的表格，按键盘上的右方向键，将光标置于表格后，单击“插入”工具栏的“表格”按钮，在该单元格中插入一个2行2列，“表格宽度”为100%，“边框粗细”、“单元格边距”、“单元格间距”均为“0”的表格，如图1-101所示。
图1-101 插入表格
STEP18 将光标移至第1行第1列的单元格中，在“属性”面板上设置“宽”为“12”，“高”为“470”，“背景”为“CD\源文件\第1章\images\251.gif”，将光标移至第2行第1列的单元格中，在该单元格中插入图像“CD\源文件\第1章\images\252.gif”，如图1-102所示。
图1-102 页面效果
STEP19 光标移至第1行第2列的单元格中，在“属性”面板上设置“背景”为“CD\源文件\ 第1章\images\254.gif”，页面如图1-103所示。
图1-103 设置背景
STEP20 将光标移至第1行第2列的单元格中，在“属性”面板上设置“水平”属性为“居中对齐”，单击“插入”工具栏的“表格”按钮，在该单元格中插入一个3行1列，“表格宽度”为“503”，“边框粗细”、“单元格边距”、“单元格间距”均为“0”的表格，如图1-104所示。
图1-104 插入表格
STEP21 将光标移至刚刚插入的表格第1行单元格中，单击“插入”工具栏的“图像”按钮，在该单元格中插入图像“CD\源文件\第1章\images\255.gif”；将光标移至第3行的单元格中，单击“插入”工具栏的“图像”按钮，在该单元格中插入图像“CD\源文件\第1章\images\256.gif”，如图1-105所示。
图1-105 插入表格
STEP22 光标移至第2行的单元格中，单击“插入”工具栏的“表格”按钮，在该单元格中插入一个1行3列，“表格宽度”为“503”，“边框粗细”、“单元格边距”、“单元格间距”均为“0”的表格，如图1-106所示。
图1-106 插入表格
STEP23 将光标移至刚刚插入的表格第1列单元格中，在“属性”面板上设置“宽”为“51”，并在该单元格中插入图像“CD\源文件\第1章\images\257.gif”，将光标移至第3列的单元格中，在“属性”面板上设置“宽”为“58”，并在该单元格中插入图像“CD\源文件\第1章\images\258.gif”；如图1-107所示。
图1-107 插入图像
STEP24 将光标移至刚插入表格第2列的单元格中，在“属性”面板上设置“背景颜色”为#FFFFFF，并在该单元格中输入相应的文字，如图1-108所示。
图1-108 输入文字
STEP25 拖动鼠标选中刚刚输入的文字，在“属性”面板上的“样式”下拉列表中选择样式表font01应用，页面如图1-109所示。
图1-109 页面效果
STEP26 将光标移至上一级表格第2行第2列的单元格中，单击“插入”工具栏的“表格”按钮，在该单元格中插入一个1行2列，“表格宽度”为100%，“边框粗细”、“单元格边距”、“单元格间距”均为“0”的表格，如图1-110所示。
图1-110 插入表格
STEP27 将光标移至刚插入表格的第1列单元格中，在“属性”面板上设置“宽”为“551”，并在该单元格中插入图像“CD\源文件\第1章\images\259.gif”，将光标移至第2列的单元格中，在“属性”面板上设置“背景”为“CD\源文件\第1章\images\260.gif”，页面如图1-111所示。
图1-111 页面效果
STEP28 光标置于页面中任意一个表格单元格中，在“状态”工具栏的“标签选择器”中单击<body>标签后的第一个<table>标签，如图1-112所示，以选中页面中最外层的大表格。
图1-112 标签选择器
STEP29 选中最外层的大表格，按键盘上的右方向键，将光标置于整个页面表格后，单击“插入”工具栏的“表格”按钮，插入一个2行1列，“表格宽度”为100%，“边框粗细”、“单元格边距”、“单元格间距”均为0的表格，如图1-113所示。
图1-113 插入表格
STEP30 将光标移至第1行的单元格中，在“属性”面板上设置“高”为“28”，“背景颜色”为#F1ECC6，将光标移至第2行的单元格中，在“属性”面板上设置“高”为“18”，“背景颜色”为#FDFBE4，页面如图1-114所示。
图1-114 页面效果
STEP31 完成整个页面的制作，执行“文件→保存”命令，保存页面，单击“文档”工具栏的“在浏览器中预览”按钮
，在浏览器中预览整个页面，如图1-115所示。
图1-115 页面预览效果
设计师秘笈——
如何创建好的个性展示网站
近些年来，随着网络宽带技术的发展，很多人都建立了自己的个性展示网站，通过网站展示自己的个性魅力。个性展示类网站与前期的个人网站相比，更加美观，并可以通过声音、视频、动画的加入，使网站更加生动而富有个性。因此现在越来越多的人都希望拥有自己的个性网站，把自己展现给大家。
网页设计中最重要的就是创意，一个网页不需要有多么高深的技术水平，重要的是设计的网页够新颖、够有创意，这样才能给浏览者留下深刻的印象。对于个性类网站的设计制作，创意更是重中之重，因为个性类网站通常页面内容较少，不利于页面内容的组织，这就需要求设计制作者精心构思，使页面看起来饱满，又能够突出主题内容，页面有一定的层次感，又不显得凌乱。常常使用的方法是以下几种。
1. 通过卡通形象搭配，突出个性
通常在个性展示类网站中，都会用到卡通形象。这个卡通形象往往是设计者虑拟的一个自己的形象，通过对卡通形象的设计，表现出与众不同的个性。
2. 尽量使用简单明快的设计风格展示网站的个性
对于一个富有想象力的设计者来说，不需要页面中有太多的元素，也能够设计出很好的作品，比如制作个性展示类网站，只需要一个背景，在背景合适的位置搭配文本，就能够给浏览者深刻的印象。
3. 色彩搭配的方法
在设计个性展示类网站时，并没有明确的适用颜色，可以根据个人的喜欢应用颜色，但是必须注意配色的原则和技巧，通常在一个页面中不要用过多的色调，一般以一两种色调为主，要能够主次分别，突出的显示页面主题。
4. 突破传统的设计思维，制作看似特别简单的个性网页
在网页设计中，大胆突破传统设计思维的束缚，制作特别简单明快的网页，也能给人特别的感觉，这通常用于首页面的设计制作。
5. 其他
要想自己的网站页面与众不同，就必须有与众不同的构思。可以充分发挥自己的想象，只要想得到，就一定能够做的到。时代在变，创意的思维也应当改变，多留意身边的事物，不要受到页面格局的固定，打破页面整体格局，设计制作出不一样的个性网站。
个性网站的创意方法
1. 想象法
设计者充分展现自己的想象能力，把自己的想象在网页中体现出来。
标新立异。想象的内容通常是出乎人们意料的，能够给浏览者一种全新的感觉。
和谐统一。在将想象的事物在页面中体现出来时，还需要多多考虑页面的和谐统一原则。
2. 比较法
通常，页面中主要内容与次要内容的对比可以突出页面中的主体内容。
比较法中最基本的是直接类比。通常网页中都会用这种形式来突出页面主题，使页面中主要内容突出，又可以丰富页面。但是需要在页面中使用得当，如果使用不当，不但起不到比较的作用，反而会使页面没有整体性，比较乱。
个性展示网站制作技巧
1. 让文字改变颜色
在有些个性网页中可以看到一些文字，当鼠标指针移上去是一种颜色，移开就是另外一种颜色，这种效果的实现，只需要在<Head>标签内预先定义两个类，分别定义两种颜色，然后在后面的HTML源文件中用到这个颜色的定义：
＜style＞
.normal {color:red;}
.start {color:blue;}
＜/style＞
在需要鼠标经过时改变颜色的文字前后加上下面的代码：
＜SPAN onmouseover = "this.className = 'normal'"
onmouseout = "this.className='start'" class=start＞鼠标经过改变颜色＜/SPAN＞
代码中的class=start是将这行文字的默认值设为start {color:blue;}；如果不加上这句，这行字的颜色就会变成HTML预先设置的颜色。
把鼠标指针移动到“鼠标经过改变颜色”文字上的时候，颜色变为normal定义的颜色，而当鼠标指针移开“鼠标经过改变颜色”文字时，文字的颜色变为start定义的颜色。这种改变文字颜色的效果，只有在浏览器中预览页面时，才可以看到，在网页编辑状态下是看不到的。
2. 给网页加上背景图像
在网页中设置的背景图像一般是采用一幅很小的图片，然后铺展开，形成很漂亮的背景。对背景图的要求当然是越漂亮越好，文件越小越好。在前面的实例制作过程中，已经介绍了如何在“页面属性”对话框中设置网页的背景图像，还有一种方法，可以设置背景图像：
打开源文件，在<body>标签中加入如下代码：＜BODY BACKGROUND="images/background.gif"＞
代码中的images/ background.gif就是BACKGROUND的值，其图像文件名为一个URL。