1、第七章设计与制作中小企业形象网站子页网站子页面是整个网站的主要构成部分网站子页面是整个网站的主要构成部分,也是网也是网站内容的主要载体。通过对前面章节的学习可以了站内容的主要载体。通过对前面章节的学习可以了解解,网站首页确定后网站首页确定后,整个网站的页面布局和风格也整个网站的页面布局和风格也确定了。网站子页面的风格与网站首页保持一致确定了。网站子页面的风格与网站首页保持一致,页页面布局也一般采用和首页相同或者相近的布局。面布局也一般采用和首页相同或者相近的布局。知识目标(1)掌握掌握Dreamweaver绘制布局表格和绘制布局单元格的方法。绘制布局表格和绘制布局单元格的方法。(2)掌握掌握D
2、reamweaver中创建不同的超级链接的方法。中创建不同的超级链接的方法。(3)了解了解Dreamweaver中模板的创建和设置。中模板的创建和设置。(4)了解了解Dreamweaver浮动框架的运用。浮动框架的运用。(5)了解了解Dreamweaver框架布局。框架布局。(6)掌握掌握CSS样式语法的构成。样式语法的构成。(7)掌握在网页中插入掌握在网页中插入CSS的方法。的方法。(8)了解常见了解常见CSS样式规则。样式规则。学习完本章后,学生应当能够依据网站的首页以及页面规划来制作网站的子页面,包括:(1)能够绘制布局表格。(2)能够通过网页模板的创建来批量生成并更新网站子页面。(3)
3、能够通过创建CSS样式表来美化网站页面,风格统一。第一节创建子页面模板 将所需素材放入内利站点内各对应文件夹中。一、启动Dreamweaver新建网页 通过执行“查看”“表格模式”“布局模式”命令,进入布局模式,进入“布局模式”后,单击“绘制布局表格”按钮。二、切换至表格布局模式 进入“布局模式”后,单击“绘制布局表格”按钮。三、绘制布局表格四、绘制布局单元格 单击“绘制布局表格”右侧的“绘制布局单元格”按钮后,在顶端放置LOGO的布局表格中,绘制布局单元格。五、切换标准模式五、切换标准模式单击顶端文字“布局表格”右侧的“退出”选项,将表格模式切换至标准模式。将页面属性与首页设置一致,按上一章
4、中对普通表格的操作方式,完成网页首部内容的插入其中在左右两侧边栏表格中,分别将图像“zuo.jpg”和“you.jpg”设为背景,再分别插入图像“zuo.jpg”和“you.jpg”。这样通过左右两侧表格中插入的图像和中间部分的Flash,保持住整个外部表格宽为“960”。将主体部分两个单元格背景设为白色,光标移至左侧单元格。在单元格中插入一个2行1列,宽为“100%”,其余设置为“0”的嵌套表格。在第1行中再插入一个3行1列,宽为“100%”,其余设置为“0”的嵌套表格。六、页面主体区域的制作六、页面主体区域的制作七、页面底部区域的制作将表格模式切换至扩展表格模式,将整个布局表格选中,“对齐
5、”设为“居中对齐”。再将光标移至整个布局表格尾部,同时在Dreamweaver中打开主页“index.html”,通过复制粘贴该页面底部区域单元格的方式,创建子页面底部区域。八、添加超级链接 将光标移回页面首部,通过拖选文字“回到首页”后,在如图7-15所示的面板中对属性进行设置,为该文字添加超级链接。九、另存为模板通过执行“文件”“另存为模板”命令,打开如图7-7所示的“另存模板”对话框,在对话框中可以将模板保存到对应的站点中,并进行命名。十、绘制布局表格和绘制布局单元格十、绘制布局表格和绘制布局单元格 “布局模式”是使用HTML表格对元素进行定位,该模式是为了简化使用表格进行页面布局的过程
6、而提供的。在“布局模式”中,可以通过绘制布局表格和绘制布局单元格来对页面进行布局。十一、使用间隔图像间隔图像是一种透明的图像,用来控制自动伸展表格中的间距。间隔图像由“11”像素的透明GIF图像组成,这样可以延展到任意所需的像素值。间隔图像的作用是可以维持所创建页面上表格和单元格所设置的宽度,也就是撑住表格。例如在常见的左拐角型页面布局中,左侧导航栏目内往往排版成若干行,每行对应导航内容,右侧放置详细的页面信息。但当右侧信息较多,把整个版面撑高时,左侧的导航栏排版也被撑高变乱,各行间距变大。十二、链接十二、链接Dreamweaver提供多种创建链接的方法,可创建到文档、图像、多媒体文件或可下载
7、软件的链接,也可以建立到文档内任意位置的任何文本或图像的链接。链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是一个图片、一个电子邮件地址、一个文件,甚至是一个应用程序等。而在一个网页中用来超链接的对象,可以是一段文本或者是一个图片等。链接目标将显示在浏览器上,并且根据目标的类型来打开或运行。十三、创建模板页面对于要制作多个风格布局大致相同的子网页,为了提高效率,通常情况下都是用模板来保存网页之间的相同部分,然后通过模板页面来快速生成其他页面。当需要更新时,只要修改模板文件的内容,所有基于模板创建的网页都可以随之更新。十四、实例操作1.创
8、建到命名锚记的链接 通过创建命名锚记,可使用“属性”面板链接到页面文档中命名锚记插入的部分。2.检查断开的、外部的和孤立的链接 对于一个站点,往往需要进行链接检查和测试,找出断开的、外部的和孤立的链接。第二节通过子页面模板创建子页面一、打开模板页面一、打开模板页面,创建创建“可编辑区域可编辑区域”二、通过模板创建新页面二、通过模板创建新页面三、编辑三、编辑“可编辑区域可编辑区域”将光标移至可编辑区域“EditRegion3”中,首先将可编辑区域中的“EditRegion3”文字删除,然后插入图像“picture_25.jpg”,即“关于内利”。四、插入浮动框架四、插入浮动框架 将光标移至该1行
9、1列的单元格中,将单元格“水平”设为“居中对齐”,“垂直”设为“顶端”。切换至“显示代码视图和设计视图”,去掉该单元格中的占位符“ ”,输入浮动框架标签“”,设置浮动框架的属性。五、新建插入浮动框架的页面新建文件“jj.html”,设置页面属性,如图7-30所示,保存在“about”文件夹中。在页面插入一个5行1列,“表格宽度”设为“605”,其余为“0”的表格。在第1行中输入“位置关于内利公司简介”;第3行中插入图像“picture_20.jpg”,“宽”改为“605”;第5中再插入一个1行1列的嵌套表格,“表格宽度”为“95%”,“对齐”为“居中对齐”。六、新建六、新建“公司文化
10、公司文化”页面页面七、新建七、新建“联系我们联系我们”页面页面八、创建链接到浮动框架 返回到“aboutus.html”页面,将页面的“标题”设为“关于内利|浙江内利信息技术有限公司”,然后保存页面,再通过浏览器预览,完成二级子页面“关于内利”的制作。九、保存并预览页面 重复前面的步骤,创建导航栏所示的“内利新闻”栏目,包含“媒体报道”“内部动态”子页面,如图7-37所示。十、重复通过模板创建其余二级栏目 模板的另一个作用就是修改模板页面时的便捷。十一、修改模板页面十二、实例操作1.重复区域在模板中的作用2.嵌套模板3.框架布局第三节第三节美化页面美化页面本节的目标是利用CSS对完成的浙江内利
11、信息技术有限公司的企业形象展示网页进行美化,通过高效、精确地控制页面的布局、字体、颜色、超链接样式等网页效果,以达到修饰网页的效果。通过CSS样式设置,使页面效果和整个网站风格更为统一与美观、交互性更强,完成后的效果如图7-44所示。通过Dreamweaver打开二级栏目“关于内利”中具体内容简介的页面“jj.html”。一、启动Dreamweaver打开页面 在“CSS样式”面板中单击“新建CSS规则”按钮,在弹出的“新建CSS规则”对话框中,进行如图7-45所示的设置。二、创建CSS样式文件 在保存好CSS样式文件后,弹出“.font的CSS规则定义”对话框。三、设置CSS样式文件四、套用
12、CSS样式用鼠标选中具体内容简介的页面“jj.html”中需要套用“.font的CSS规则”的文字内容,在文字所对应的“属性”面板中的“样式”下拉列表中,进行如图7-47所示的设置,完成套用CSS样式。完成样式套用后,再对文字的实际对齐效果进行修改。该方法同样运用于“关于内利”中的其余页面,同样也运用于其他二级栏目页面。五、创建超链接样式打开模板“mo.dwt”页面,在“CSS样式”面板中单击“新建CSS规则”按钮,在“新建CSS规则”对话框中把“选择器类型”设置为“高级(ID、伪类选择器等)”,“选择器”通过下拉式菜单选择“a:link”,如图7-50所示。1.运用布局表格的固定列、自由扩展列和间隔图像,创建左拐角型布局的“企业新闻报道”页面。2.实现图文混排效果,通过图7-4所示窗口对图片设置CSS样式,要求图片环绕在文字的左边,图片大小设为200200像素,图片的右边框离文字间距为10像素,图片本身离图片默认的边框上下左右距离都为5像素。
