项目八--设计与制作中小企业形象网站子页

1、项目八 设计与制作中小企业形象网站子页主要内容项目引导项目任务书项目任务实施1233项目任务分析4自学与拓展35项目引导网站子页面是整个网站的主要构成部分，也是网站内容的主要载体。通过前面项目的学习可以了解，网站首页确定后，整个网站的页面布局和风格也确定了，网站子页面的风格也是保持连贯的。网站子页面的页面布局一般采用和首页相同或者相近的布局。子页面的布局和风格确定后，就是根据首页导航栏和网站规划可以确定子页面的分类和内容，一般和首页导航栏各栏目相连的是二级子页面，再根据具体该栏目内容来确定是否需要三级甚至更多级的子页面。另外，由于子页面的数量较多，如何快速便捷的制作子页面，同时便于今后网站页面

2、的更新维护也是子页面制作时需要考虑的重点。本项目将通过对浙江内利信息技术有限公司的企业形象展示网站子页面的制作来使学生掌握子页面制作时需要考虑的重点。项目任务书能力目标学习完本项目后，学生应当能够依据网站的首页以及页面规划来制作网站的子页面，包括：通过布局表格通过网页模板的创建来批量生成并更新网站子页面通过创建CSS样式表来美化网站页面，风格统一项目任务引导任务一创建子页面模板本任务目标是根据浙江内利信息技术有限公司的企业形象展示网站首页来创建子页面的模板，完成后保存为模板页面“mo.dwt”项目任务实施任务一创建子页面模板1.启动Dreamweaver 新建网页 将任务所需素材放置入内利站点

3、内各对应文件夹中。通过Dreamweaver 新建空白网页，保存命名为“mo.html”。该页面将作为浙江内利信息技术有限公司的企业形象展示网站二级子页面基础模板。页面布局采用和首页保持一贯的左拐角布局。2.切换至表格布局模式 通过单击“查看”菜单的“表格模式”列表中的“布局模式”，进入布局模式项目任务实施任务一创建子页面模板3.绘制布局表格进入“布局模式”后，按如图8-3所示，单击“绘制布局表格”按钮。在运用表格布局模式创建页面布局时，可考虑运用“绘制布局表格”绘制页面外部表格布局，再切换至“标准”模式，用嵌套表格完善页面布局和插入网页元素从而最后完成页面的制作。本任务中子页面底部区域考虑采

4、用和首页一致，采用复制粘贴表格内容的方式完成，那么在运用“绘制布局表格”时，则只绘制子页面的首部和主体区域，底部区域在切换至“标准”模式中添加。项目任务实施任务一创建子页面模板在页面中，通过“绘制布局表格”绘制一个布局表格，如图所示设置布局表格属性，作为页面的布局表格。项目任务实施任务一创建子页面模板在通过“绘制布局表格”在整体布局表格中的左右两端分别绘制两列“50”像素的布局表格作为表格的左右边框。接着在顶端，绘制高度为“68”像素的布局表格用于放置logo，再绘制高度为“70”像素的布局表格用于放置导航条Flash，如图8-5所示，完成首部布局表格制作。项目任务实施任务一创建子页面模板在首

5、部下方的左侧，用“绘制布局表格”绘制一个“189”宽“642”高的布局表格，做为左拐角，剩下部分再通过绘制覆盖项目任务实施任务一创建子页面模板4.绘制布局单元格单击“绘制布局表格”右侧的“绘制布局单元格”按钮后，在顶端放置logo的布局表格中，绘制布局单元格，将原布局表格划分为三个布局单元格，对应顶部空白、左侧logo和右侧的“返回首页 | 加入收藏 | 联系我们”，按住“CTRL”点选布局单元格，属性面板显示布局单元格属性面板。项目任务实施任务一创建子页面模板在其他布局表格中，均用“绘制布局单元格”绘制单一的布局单元格覆盖该布局表格。因为这些布局表格中，主体部分需要插入的页面内容复杂，将切换

6、至“标准模式”后，继续用创建表格的方式来完成。而其余布局表格，需要插入的页面内容单一，只需划分一个布局单元格就能满足。这时，也可以在布局单元格中直接插入网页元素，但为了更方便编辑表，一般将表格模式切换回“标准模式”。5.切换“标准模式”点击顶端文字“布局表格”右侧的“退出”选择，将表格模式切换至“标准模式”。将页面属性与首页设置一致。按上一项目中对普通表格的操作的方式，完成网页首部内容的插入项目任务实施任务一创建子页面模板其中左右两侧边栏表格中，分别将图像“zuo.jpg”和“you.jpg”设为背景，再分别插入图像“zuo.jpg”和“you.jpg”。这样通过左右两侧表格中插入的图像和中间

7、部分的Flash，保持住整个外部表格宽“960”。项目任务实施任务一创建子页面模板6.页面主体区域的制作将主体部分两个单元格背景设为白色，光标移至左侧单元格。在单元格中插入一个2行1列宽为“100%”其余设置为“0”的嵌套表格。在第1行中再插入一个3行1列宽为“100%”其余设置为“0”的嵌套表格。在第1行中再插入一个1行3列宽为“100%”其余设置为“0”的嵌套表格。在该嵌套表格的第1列插入图像“picture_1.jpg”，第2列图像“picture_2.jpg”作为背景，第3列插入图像“picture_3.jpg”，最后调整各列宽度，使该行构成圆角矩形的上半部分。在第2行中再插入一个1行

8、3列宽为“100%”其余设置为“0”的嵌套表格。在该嵌套表格的第1列“宽”为“10”，图像“picture_4.jpg”作为背景，在第2列图像“picture_6.jpg”作为背景，在第3列“宽”为“10”，图像“picture_5.jpg”作为背景。在第3行中图像“picture_7.jpg”作为背景，“高”为“102”。项目任务实施任务一创建子页面模板将光标移至左侧最外面嵌套的2行1列表格的第2行中，插入一个4行1列宽为“100%”其余设置为“0”的嵌套表格。在第1行中再插入一个2行1列宽为“100%”其余设置为“0”的嵌套表格。在该嵌套表格的第2行插入图像“picture_21.jpg”

9、。在回到4行1列表格的第2行中，如图所示插入一个表单。项目任务实施任务一创建子页面模板在表单中插入一个1行2列宽为“100%”其余设置为“0”的嵌套表格。在该嵌套表格第1列中，插入一个“文本字段”，对应属性面板的“字符宽度”为“14”。第2列中，插入一个图像“picture_23.jpg”。若左侧表格的宽“189”被撑大，则切换至“扩展表格模式”进行拖拉边线，设置宽值的方式进行调整恢复到“189”。在4行1列表格的第3行中插入图像“picture_16.jpg”。在第4行中插入图像“picture_19.jpg”。完成的左侧表格效果如图项目任务实施任务一创建子页面模板将光标移至主体区域右侧表格

10、，插入一个1行2列宽为“100%”其余设置为“0”的嵌套表格。第1列设“宽”为“2%”。第2列中一个3行1列宽为“100%”其余设置为“0”的嵌套表格。在该嵌套表格的第1行中再插入一个1行3列宽为“100%”其余设置为“0”的嵌套表格。第1列“宽”设为“20”，插入图像“picture_8.jpg”，第2列图像“picture_9.jpg”设为“背景”，第3列设为“20”，插入图像“picture_10.jpg”。将光标移至3行1列表格的第2行，再插入一个1行3列宽为“100%”其余设置为“0”的嵌套表格。第1列“宽”设为“20”，图像“picture_11.jpg”设为“背景”，第3列“宽”

11、设为“20”，图像“picture_12.jpg”设为“背景”。将光标移至3行1列表格的第3行，再插入一个1行3列宽为“100%”其余设置为“0”的嵌套表格。第1列“宽”设为“20”，插入图像“picture_13.jpg”，第2列中，图像“picture_14.jpg”设为“背景”，第3列“宽”设为“20”，插入图像“picture_15.jpg”。项目任务实施任务一创建子页面模板将7.页面底部区域的制作将表格模式切换至“扩展表格模式”，将整个布局表格选中，“对齐”设为“居中对齐”。再将光标移至整个布局表格尾部，同时在Dreamweaver中打开主页“index.html”，通过复制粘贴该页

12、面底部区域单元格的方式，创建子页面底部区域。在复制粘贴的过程中，若单元格中有图像插入，可通过如图所示，为粘贴过来的图像设置“图像描述”，本任务中无需设置，则点击“取消”。项目任务实施任务一创建子页面模板完成页面底部区域的制作项目任务实施任务一创建子页面模板8.添加超级链接将光标移回页面首部，通过拖选文字“回到首页”后，如图对属性面板进行设置，给该文字添加超级链接。拖选文字“加入收藏”，切换至“显示代码视图”，添加相应脚本代码拖选文字“联系我们”，在属性面板的链接文本框内输入“mailto:webmaster”，完成对应电子邮箱的超链接。项目任务实施任务一创建子页面模板8.另存为模板通过单击“文

13、件”菜单的“另存为模板”，打开如图所示的“另存”模板对话框在对话框中可以将模板保存到对应的站点中，并进行命名。点击“保存”，在弹出框内选择“更新链接”。完成后，保存文件，当弹出如图8-18所示提示框时，点“确定”。在下一任务中，将通过创建模板上的“可编辑区域”，最后完成使用模板制作浙江内利信息技术有限公司的企业形象展示网站的二级子页面。项目任务分析任务一创建子页面模板1.绘制布局表格和绘制布局单元格2.使用间隔图像3.链接4.创建模板页面自学与拓展任务一创建子页面模板1.创建到命名锚记的链接通过首先创建命名锚记，可使用属性面板链接到页面文档中命名锚记插入的部分。通过命名锚记，如图所示可以在文档

14、中设置标记。锚记的命名大小写不敏感，页面中命名不能重复。插入后若看不到锚记，则可通过“首选参数”中的“不可见元素”修改。自学与拓展任务一创建子页面模板2.检查断开的、外部的和孤立的链接对于一个站点，往往需要进行链接检查和测试，找出断开的、外部的和孤立的链接。利用如图8-23所示的“链接检查器”可以对站点中页面的链接进行检查。其中孤立文件，是指文件仍然位于站点中，但该文件不与站点内任何其它文件相链接。检查的范围可以是当前页面、本地站点中所选文件或者整个本地站点。项目任务引导任务二通过子页面模板创建子页面本任务目标通过模板页面来创建内利企业形象网站中的子页面，通过浮动框架来完子页面栏目内容的设置。

15、其中二级页面“关于内利”的效果如图所示。通过本次任务将完成该网站的各栏目子页面。项目任务实施任务二通过子页面模板创建子页面1.打开模板页面，创建“可编辑区域”打开本任务站点中的模板页面“mo.dwt”，将光标分别移至三个单元格中插入“可编辑区域”在弹出的“新建可编辑区域”对话框中可以对新建的可编辑区域进行命名，本任务中均采用默认命名。创建完成后，保存模板文件后关闭。项目任务实施任务二通过子页面模板创建子页面项目任务实施任务二通过子页面模板创建子页面2.通过模板创建新页面执行“文件新建”命令，弹出“新建文档”对话框，选择当前站点中的模板创建新页面。通过该页面右上角的标识“mo”，可知该页面是通过

16、该站点中的“mo”模板所创建的。将该页面保存至“about”文件夹，命名为“aboutus.html”，作为二级子页面“关于内利”。项目任务实施任务二通过子页面模板创建子页面3.编辑“可编辑区域” 将光标移至可编辑区域“EditRegion3”中，首先将可编辑区域中的“EditRegion3”文字删除，然后插入图像“picture_25.jpg”，即“关于内利”。将光标移至可编辑区域“EditRegion4”中，首先将可编辑区域中的“EditRegion4”文字删除，再插入一个3行1列的表格，“表格宽度”设为“100%”，其余为零。然后将图像“picture_24.jpg”设为各行的单元格“背

17、景”，“高”分别均为“28”。然后在各行分别输入二级子页面“关于内利”的栏目“公司简介”、“公司文化”、“联系我们”，各行文字之前使用不换行空格，调整文字的位置项目任务实施任务二通过子页面模板创建子页面将光标移至可编辑区域“EditRegion5”中，首先将可编辑区域中的“EditRegion5”文字删除，再插入一个1行1列的表格，“表格宽度”设为“100%”，其余为零。4.插入浮动框架 将光标移至该1行1列的单元格中，将单元格“水平”设为“居中对齐”，“垂直”设为“顶端”。切换至“显示代码视图和设计视图”，去掉该单元格中的占位符“”，输入浮动框架标签“”，设置浮动框架的属性项目任务实施任务二

18、通过子页面模板创建子页面5.新建插入浮动框架的页面新建文件“jj.html”，将页面属性如图所示，保存在“about”文件夹中。项目任务实施任务二通过子页面模板创建子页面在页面插入一个5行1列，“表格宽度”设为“605”，其余为“0”的表格。在第1行中输入“位置关于内利公司简介”，第3行中插入图像“picture_20.jpg”，“宽”改为“605”，在第5中再插入一个1行1列的嵌套表格，“表格宽度”为“95%”，“对齐”为“居中对齐”。在嵌套表格内输入文字项目任务实施任务二通过子页面模板创建子页面6.新建“公司文化”页面按步骤4的同样设置，创建“公司文化”页面“wh.html”项目任务实施任

19、务二通过子页面模板创建子页面7.新建“联系我们”页面按步骤4的同样设置，创建“联系我们”页面“lx.html”项目任务实施任务二通过子页面模板创建子页面8.创建链接到浮动框架将光标移回至页面左侧的可编辑区域“EditRegion4”中，选中文字“公司简介”。项目任务实施任务二通过子页面模板创建子页面按同样方式给“公司文化”添加超级链接项目任务实施任务二通过子页面模板创建子页面按同样方式给“联系我们”添加超级链接9.保存并预览页面返回到“aboutus.html”页面，将页面的“标题”设为“关于内利 | 浙江内利信息技术有限公司”，然后保存页面，在通过浏览器预览，完成二级子页面“关于内利”的制作

20、。项目任务实施任务二通过子页面模板创建子页面10.重复通过模板创建其余二级栏目重复前面的步骤，创建导航栏所示的“内利新闻”栏目，包含“媒体报道”、“内部动态”子页面项目任务实施任务二通过子页面模板创建子页面再用同样的方式，完成二级栏目“招贤纳士”、“加盟内利”、“内利卡”和“内利商城”。11.修改模板页面模板的另一个作用，就是在上一任务分析中提到的修改模板页面的便捷。一旦修改模板页面的内容，所有基于模板创建的网页也都可以随之更改。在本任务中更改模板页面“mo.dwt”的内容，使页面名称后面出现“*”，通过保存来更新时，如图8-38所示，弹出“更新模板文件”对话框，可以选择所有基于模板创建的网页

21、是否随之更新。项目任务实施任务二通过子页面模板创建子页面需要说明的，选择更新后，当在Dreamweaver编辑窗口，有被更新的页面也打开时，如图所示，在这些页面名称后面也出现“*”，需要保存更新。可通过对各页面分别保存也可以在“文件”菜单中选择“保存全部”来完成 保存更新，“*”消失。项目任务实施任务二通过子页面模板创建子页面12.最后浏览检查整个网站页面。1.可编辑区域模板可编辑区域作用在于确定模板页面中用户可以编辑哪些区域。在插入可编辑区域之前，将要插入该区域的文档另存为模板。可编辑区域一般插入到表格及单元格中，一个模板中可以有多个不同的可编辑区域。不同的单元格及内容不可以设置为同一个可编

22、辑区域。2.将页面与模板分离 若要更改基于模板所创建的页面锁定区域，即公共部分，须将该页面从模板分离。通过“修改”菜单列表中的“模板”选项中的“从模板中分离”，可将当前页面从模板中分离，整个页面也都将变为可编辑的。项目任务分析任务二通过子页面模板创建子页面3.浮动框架使用可以将一个文档嵌入在另一个文档中显示，不同于的最大特色就是可以把布置在网页中的任何位置，不再拘泥于网页的布局限制。在很多电子商务网站网络广告中，使用频繁，对网站的导航进行控制也更容易，将嵌入的文档与整个页面的内容相互融合，形成了一个整体。 在插入浮动框架时，只需将光标定位在需要插入浮动框架的位置，然后切换到“显示代码视图”，输

23、入标签即可，再设置浮动框架的相关属性。如果链接文件要在创建的浮动框架中打开，只要在链接的目标框中输入浮动框架的名称，即name值。项目任务分析任务二通过子页面模板创建子页面1.重复区域在模板中的作用 2.嵌套模板3.框架布局自学与拓展任务二通过子页面模板创建子页面项目任务引导任务三美化页面本任务目标利用CSS对前续任务中完成的浙江内利信息技术有限公司的企业形象展示网进行美化，通过高效精确的控制页面的布局、字体、颜色、超链接样式等网页效果，以达到修饰网页的效果。通过CSS样式设置，使页面效果和整个网站风格更为统一与美观、交互性更强1.启动Dreamweaver打开页面通过Dreamweaver打

24、开二级栏目“关于内利”中具体内容简介的页面“jj.html”。2.创建CSS样式文件通过“窗口”菜单在“CSS样式”面板中单击“新建CSS规则”按钮，在弹出的“新建CSS规则”对话框中项目任务实践任务三美化页面 在单击“确定”按钮后，将新建样式文件的命名为“abc”并保存到站点的“css”文件夹下。项目任务实践任务三美化页面3.设置CSS样式文件在保存好CSS样式文件后，弹出“.font的CSS规则定义”对话框。在对话框“分类”选项对应的“类型”和“区块”规则定义中，作如图的设置项目任务实践任务三美化页面4.套用CSS样式用鼠标选中具体内容简介的页面“jj.html”中需要套用“.font的C

25、SS规则”的文字内容，在文字所对应的“属性”面板中“样式”下拉列表中，选择如图所示，完成套用CSS样式。项目任务实践任务三美化页面完成样式套用后，再对文字实际对齐效果进行修改。该方法同样运用于“关于内利”中其余页面，同样也运用于其它二级栏目页面。例如，打开“lx.html”页面，在“CSS样式”面板中点选“附加样式表”，如图所示，将外部样式表“abc.css”导入到该页面，成为该页面样式表的一部分。项目任务实践任务三美化页面用鼠标选中要套用的文字内容，然后右键单击被附加到该页面的样式表“abc.css”中的修饰文字的类“.font”，点击“套用”，完成另一种套用样式的方式。项目任务实践任务三美

26、化页面5.创建超链接样式打开模板“mo.dwt”页面，通过“窗口”菜单在“CSS样式”面板中点选“新建CSS规则”按钮，在“新建CSS规则”对话框中把“选择器类型”设置为“高级（ID、伪类选择器等）”，“选择器”通过下拉式菜单选择“a:link”，如图完成“新建CSS规则”。项目任务实践任务三美化页面设置“a:link的CSS规则定义”项目任务实践任务三美化页面同样“新建CSS规则”，再把“选择器类型”设置为“高级（ID、伪类选择器等）”，“选择器”通过下拉式菜单分别选择“a:visited”，“a:hover”和“a:active”，来创建对应的CSS规则定义。设置完成后，在该页面的“显示代

27、码视图”中的与之间看到相应的CSS规则定义项目任务实践任务三美化页面完成模板页面超链接样式的规则定义后，会弹出“更新模板文件”对话框，要求对根据该模板创建的页面选择是否更新。选择“更新”后，保存模板页面，退出。项目任务实践任务三美化页面6.创建超链接多样性通过Dreamweaver打开二级栏目“关于内利”的页面“aboutus.html”。在“CSS样式”面板中单击“附加样式表”，由于基于模板页面，无法导入到模板锁定代码，则将外部样式表“abc.css”链接到该页面项目任务实践任务三美化页面单击“新建CSS规则”按钮，在“新建CSS规则”对话框中把“选择器类型”设置为“高级（ID、伪类选择器等）”，“选择器”输入设置为“a.mylink:link