静态网页设计制作 教案 第12章 时尚资讯网站设计综合实例

AutoCAD2022中文版项目实训教程STYLEREFbt1a项目十二STYLEREFbt1b时尚资讯网站设计综合实例项目十二时尚资讯网站设计综合实例思政目标培养读者的审美情趣、乐观的生活态度，树立文化自觉和文化自信。具有感受美、表现美、鉴赏美及创造美的能力技能目标学会综合运用网页制作的大部分技能学会制作模板和库文件学会制作网站主页和其他页面项目导读本章将详细介绍在Dreamweaver2021中制作“时尚资讯网站”的具体方法。本章运用到了网页制作的大部分技术，包括模板技术、库项目、运用表格技术进行页面排版，以及利用jQueryUI窗口部件jQueryAccordion制作可以上下自由滑动的菜单面板。任务1网站概述任务引入领导交给小明一个任务，要求为某公司设计时尚资讯网站，在制作网站之前，通过与客户沟通，小明也对网站的要求有了一个大致都的了解，那么该网站主要包括哪些信息，需要准备哪些素材呢？知识准备一、网站介绍时尚资讯网站综合实例是介绍一些时尚信息的网站，例如美容、服饰、搭配、美食等，整张页面主要使用表格进行布局。由于是信息发布类的网站，因此本例有多个页面，但本例内容主要集中在介绍模板制作方面，然后在模板的基础上制作主页及“施华洛世奇新品流行速递”页面。实例最终效果如图12-1所示。图12-1实例主页鼠标停留在左侧的滑动面板上时，面板名称显示为桔黄色；单击面板，即可上下自由滑开面板，显示所选面板的内容；将鼠标移到链接文本上，文本放大，并显示为桔红色，如图12-2所示。单击菜单面板“流行速递”中的“施华洛世奇新品”，可以跳转到相应的页面，如图12-3左图所示。单击页面底部的“下一页”文本按钮，可以切换到当前文章内容的下一页，如图12-3右图所示。单击页面底部左侧的图片，可以返回到页面顶部。图12-2实例效果图12-3实例效果二、准备工作在开始制作本例之前，先介绍一下制作本网站所需的准备工作。（1）在硬盘上新建一个fashion文件夹，在fashion目录下创建一个images子目录。（2）在图片编辑软件（如Fireworks）中制作所需的图片，如图12-4至12-6所示。把这些图片保存到fashion/images目录下，其他需要用到的图片也拷贝到本目录。图12-4logo图12-5栏目标题图12-6页面底部背景和导航图像（3）启动Dreamweaver2021，执行“站点”/“新建站点”菜单命令，新建一个静态的本地站点fashion，指向fashion目录。至此，准备工作完毕，可以开始制作网站页面了。任务2制作模板任务引入前期的准备工作已经做好，接下来小明开始准备设计网站，该网站包括网页，这些网页用到了一些相同的页面元素和排版方式，为了避免繁琐的重复工作，提高工作效率，小明需要首先制作一个模板，那么制作这个模板要怎样设计基本布局，按怎样的顺序去进行设计呢？知识准备由于本网站中的页面要用到相同的页面元素和排版方式，因此可以使用模板以避免重复地在每个页面输入或修改相同的部分。在网站改版的时候，只要改变模板，就能自动更改所有基于这个模板的网页。一、设计基本布局（1）新建一个HTML文件，在属性面板上的“文档标题”文本框中输入“时尚资讯”。（2）创建样式表。1）打开“CSS设计器”面板，单击“添加CSS源”按钮，在弹出的下拉列表中选择“创建新的CSS文件”命令，弹出的“创建新的CSS文件”对话框，如图12-7所示，单击"浏览"按钮,在弹出的对话框中选择文件夹,输入文件名称style.css，保存在站点根目录下。图12-7“创建新的CSS文件”对话框2）打开style.css，输入如下代码：body,td,th{ font-size:12px; color:#666;}a:link{ color:#666; text-decoration:none;}a:visited{ text-decoration:none; color:#600;}a:hover,a:active{ text-decoration:none; color:#F30;}也可以使用Dreamweaver以可视化方式生成以上代码，然后剪切到style.css中（不要<styletype="text/css">和</style>）：执行“文件”/“页面属性”命令，在弹出的“页面属性”对话框中设置页面字体的大小为12像素，文本颜色为#666；切换到“链接”分类，设置“链接颜色”为#666，“已访问链接”颜色为#600，“变换图像链接”和“活动链接”均为#F30，“下划线样式”为“始终无下划线”。然后依次单击“应用”按钮和“确定”按钮。（3）创建基本布局。1）将光标置于文档中，单击“HTML”插入面板上的“表格”按钮，在弹出的“表格”对话框中设置行数为3，列数为1，表格宽度为750像素，边框粗细为0，间距和边距均为0。单击“确定”按钮关闭对话框。然后在属性面板上的“对齐”下拉列表中选择“居中对齐”。2）将光标定位在第一行的单元格中，单击属性面板上的“拆分单元格”按钮，将单元格拆分为3列。3）选中第一行第二列的单元格，单击属性面板上的“拆分单元格”按钮，将单元格拆分为两行。此时的页面效果如图12-8所示。图12-8表格效果（4）制作顶栏。1）选中第一行第一列的单元格，在属性面板上设置单元格内容的水平对齐方式为“居中对齐”，垂直对齐方式为“顶端”。然后单击“HTML”插入面板上的“图像”图标按钮，在打开的“选择文件”对话框中选择图像page_r1_c1.gif。2）选中第一行第二列拆分后的第一行单元格，在属性面板上的“水平”下拉列表中选择“居中对齐”，在“垂直”下拉列表中选择“居中”，宽为281，高为93。接下来的步骤设置单元格的背景图像。3）在“CSS设计器”面板的“源”窗格中选择style.css，然后单击“添加选择器”按钮，输入选择器名称.top_bg1。在“背景”属性列表中单击“背景图像”右侧的“浏览”按钮，在弹出的对话框中选择背景图像page_r1_c3.gif，背景位置为left、bottom，不平铺。将光标定位在单元格中，在CSS属性面板上的“目标规则”下拉列表中选择.top_bg1。4）选中第一行第二列拆分后的第二行单元格，将单元格内容的水平对齐方式设置为“居中对齐”，垂直对齐方式为“居中”，高91。按照步骤（3）的方法设置背景图像page_r2_c3.gif，背景位置为left、top，不平铺。然后在属性面板上的“目标规则”下拉列表中选择.top_bg2。5）按照步骤3）同样的方法设置第一行第三列单元格的背景图像page_r1_c4.gif，背景位置为left、top，不平铺。单元格内容的水平、垂直对齐方式均为“居中”。此时的页面效果如图12-9所示。图12-9页面效果6）将光标定位在第一行第二列拆分后的第一行单元格中，单击“HTML”插入面板上的“图像”图标按钮，在弹出的“选择文件”对话框中选择图像fashion2.gif。同样的方法，在第二行的单元格中插入图像fashion.gif。此时的页面效果如图12-10所示。图12-10插入logo7）将光标定位在第一行第三列的单元格中，单击“HTML”插入面板上的“图像”图标按钮，插入一幅鞋的图像shoes.gif。此时的页面效果如图12-11所示。图12-11插入图片的效果8）将光标放置在第二行单元格中，设置单元格内容水平对齐方式为“居中对齐”，垂直对齐方式为“顶端”。单击“HTML”插入面板上的“表格”图标按钮，插入一个2行2列的表格，表格宽度为100%，无边框。9）在属性面板上将表格第一列的宽度设置为160像素，然后在第一行的第一列单元格中插入图像page_r3_c1.gif。10）选中嵌套表格第一行第二列的单元格，在“水平”下拉列表中选择“右对齐”选项，并创建CSS规则.top_bg4，定义背景图像为page_r3_c2.gif，不平铺。然后单击“HTML”插入面板上的“图像”图标按钮，插入一幅图像。此时的页面效果如图12-12所示。图12-12页面效果二、制作导航菜单本节使用jQueryAccordion构件制作导航菜单面板，单击面板名称，可以上下自由滑开选择的内容，而整个窗口不会发生变化。操作步骤如下：（1）拆分单元格。选中嵌套表格的第二行第一列单元格，单击鼠标右键，从弹出的快捷菜单中选择“折分单元格”命令，将单元格拆分为两行。在属性面板上设置单元格内容的水平对齐方式为“左对齐”，垂直对齐方式为“顶端”。（2）插入折叠构件。1）保存文档为index.html，将光标定位在拆分后的第一行单元格中，单击“插入”面板右上角的选项按钮，在弹出的下拉菜单中选择“jQueryUI”，切换到“jQueryUI”插入面板。然后单击该面板上的“折叠式”图标按钮，插入一个jQuery折叠式构件。如图12-13所示。图12-13插入的jQueryAccording构件此时，在文档窗口顶部可以看到自动添加的相关文件，如图12-13所示。2）保存文档，弹出如图12-14所示的“复制相关文件”对话框。该对话框中列示了该页面正常工作所需要的支持文件，单击“确定”按钮，将这些支持文件复制到本地站点根目录下。打开站点根目录，可以看到一个名为jQueryAssets的文件夹。图12-14“复制相关文件”对话框（3）设置折叠式构件的属性。单击折叠式构件顶部的蓝色标签，在属性面板上的“面板”列表中选择“部分3”，单击“添加面板”按钮两次，添加两个面板。然后设置触发事件为mouseover，动画效果为linear，持续时间为200毫秒，面板标题的图标为ui-icon-circle-arrow-e，活动面板的标题图标为ui-icon-circle-arrow-s，如图12-15所示。图12-15jQuery折叠式的属性面板（4）修改面板名称。在“设计”视图中，将面板“部分1”的页签修改为“流行速递”。按照同样的方法，将其他4个面板的页签分别修改为“时尚饰品”“霓彩服饰”“靓颜美食”和“彩妆课堂”。此时的页面效果如图12-16所示。图12-16jQueryAccording效果（5）修改标题文本的颜色。在文档窗口顶部单击打开CSS文件jquery.ui.theme.min.css，找到类.ui-state-default，将文本颜色修改为#666，以与页面文本颜色统一，如图12-17所示。图12-17修改规则定义在jquery.ui.theme.min.css文件中，可以根据需要修改According构件的初始外观，如背景、文本颜色等。如果觉得这里的规则代码不便于查看，可以打开“CSS设计器”面板，在“源”窗格中选择类所在的CSS文件，然后在“选择器”窗格中选择需要的选择器，即可以可视化方式查看规则，如图12-18所示。图12-18在“CSS设计器”面板中查看规则（6）修改标题文本的呈现方式。按上一步同样的方法修改组合选择器.ui-state-activea,.ui-state-activea:link,.ui-state-activea:visited，修改后的代码如下：.ui-state-activea,.ui-state-activea:link,.ui-state-activea:visited{ color:#F60; text-decoration:none; font-weight:bold;}此时的页面效果如图12-19所示。图12-19页面效果（7）设置面板的背景颜色。按上一步同样的方法修改选择器.ui-widget-content，指定面板内容的背景颜色，相关代码如下：.ui-widget-content{border:1pxsolid#aaa;background:#ccf;color:#222;}此时的页面预览效果如图12-20所示。图12-20设置面板内容背景的效果（8）设置面板内容的填充边距。在jquery.ui.accordion.min.css文件中修改选择器.ui-accordion-content的规则定义，指定内容的填充边距，修改后的类定义如下：.ui-accordion-content{padding:1em30px;border-top:0;overflow:auto;zoom:1;}修改后的页面效果如图12-21所示。图12-21修改内容左、右填充之后的效果（9）添加菜单项。单击选中jQuery折叠式构件顶部的蓝色标签，在属性面板的“面板”区域选中“流行速递”，并在“设计”视图中删除该面板中的占位文本“内容1”，然后创建文本项目列表。此时的页面效果如图12-22所示。图12-22项目列表（10）设置项目列表的样式。打开样式表文件style.css，添加如下规则：body,td,th,ul,li{ font-size:12px; color:#666; margin:0; padding:0; border:0;}li{ line-height:30px; list-style-type:none; border-bottom:1pxdashed#666;}此时的页面效果如图12-23所示。图12-23定义列表效果（11）设置鼠标划过时链接文本的颜色。打开样式表文件jquery.ui.accordion.min.css，添加如下规则：.ui-accordion-contenta:hover{color:#F30;}此时，页面在浏览器中的预览效果如图12-24所示。图12-24设置链接样式（12）使用同样的方法，在其他四个面板中插入文本，并制作成项目列表。（13）设置单元格属性。将光标定位在jQuery折叠式构件下方的单元格中，在属性面板上的“水平”下拉列表中选择“居中对齐”，在“垂直”下拉列表中选择“底部”。（14）插入图像链接。单击“HTML”插入面板上的“图像”图标按钮，在弹出的“选择文件”对话框中选中图像pic1.gif。然后在“链接”文本框中输入#，即单击该图片时返回页面顶端。三、插入模板元素（1）设置页脚的背景图像。1）选中最后一行单元格，在属性面板上的“水平”下拉列表中选择“居中对齐”，设置高度为100。2）创建CSS规则.footbg为单元格设置背景图像page_r5_c1.gif，不平铺；图像位置水平居中，垂直居中；高100px，文本居中，行距120%。然后在属性面板上的“目标规则”下拉列表中选择.footbg，此时的页面效果如图12-25所示。（2）插入可编辑区域。1）选中jQuery折叠式构件右侧的单元格，在属性面板上设置单元格内容的水平对齐方式为“左对齐”，垂直对齐方式为“顶端”。2）执行“插入”/“模板”/“可编辑区域”菜单命令，此时Dreamweaver将弹出一个对话框，提示该操作将把页面转换为模板。单击“确定”按钮关闭对话框。图12-25设置页脚背景3）在弹出的“新建可编辑区域”对话框中键入可编辑区域的名称content，并单击“确定”按钮关闭对话框。即可将选中的单元格转换为可编辑区域，如图12-26所示。图12-26插入的可编辑区域（3）保存文件。执行“文件”/“另存为模板”命令，弹出“另存模板”对话框。在“描述”文本框中输入“页面的基本布局”；在“另存为”文本框中键入模板的名称layout，然后单击“保存”按钮关闭对话框。至此，页面的基本布局模板制作完成。接下来制作文章详细内容页面的模板。四、制作嵌套模板（1）插入布局表格。将光标定位在可编辑区域中，删除可编辑区域中的占位文本，然后单击“HTML”插入面板上的“表格”图标按钮，在弹出的“表格”对话框中设置表格行数为3，列数为1，表格宽度为590像素，无边框。单击“确定”按钮关闭对话框。（2）设置表格的背景图像。选中表格，在属性面板中设置“边距”为10，“间距”为0；新建CSS规则.content_bg为表格设置背景图像，背景平铺。然后选中表格，在属性面板上的“类”下拉列表中选择.content_bg，此时的页面效果如图12-27所示。图12-27设置表格背景的效果（3）设置标题文本的样式。将光标定位在第一行的单元格中，在属性面板上的“水平”下拉列表中选择“居中对齐”，输入文章的标题。在style.css中定义CSS规则h2，“字体大小”为“x-large”，加粗。然后选中文本，在属性面板上的“格式”下拉列表中选择“标题2”。（4）插入分隔线。将光标定位在标题的右侧，按Shift+Enter键插入一个换行符。然后单击“HTML”插入面板上的“图像”图标按钮，插入一条水平分割线。效果如图12-28所示。图12-28页面效果（5）插入翻页导航文本。将光标定位在第三行单元格中，在属性面板上的“水平”下拉列表中选择“居中对齐”，然后输入“上一页”；插入多个空格之后，输入“下一页”。此时的页面效果如图12-29所示。图12-29页面效果（6）执行“文件”/“另存为模板”命令，将模板另存为名为article.dwt的模板。。任务3制作库文件任务引入制作好了模板文件，然后版权声明部分也是每个网页需要用到的内容，为此小明需要将版权声明部分保存为库项目，那么要如何制作版权声明文件，如何将库项目插入到不同的网页呢？知识准备在Dreamweaver中，库项目是可以重复使用的项目之一，库的用途与模板类似，都可将同一内容重复用于不同的网页。本例的库文件具体制作步骤如下。（1）新建文件。执行“文件”/“新建”命令，新建一个空白的HTML网页。切换到“代码”视图，删除<metacharset="utf-8">以外的所有代码。（2）保存库文件。执行“文件”/“保存”菜单命令，弹出“另存为”对话框。在“文件名”文本框中输入文件名copyright.lbi，在“保存类型”下拉列表中选择“LibraryFiles（*.lbi）。然后单击“保存”按钮关闭对话框。（3）插入布局表格。切换到“设计”视图，执行“插入”/“表格”命令，插入一个一行一列的表格，宽度为750像素，边框为0。选中表格，在属性面板上设置对齐方式为“居中对齐”。（4）插入页脚内容。1）将光标置于单元格中，设置水平和垂直对齐方式均为“居中”，输入文本Copyright和一个空格，然后将光标定位在空格右侧，切换到“HTML”面板。2）单击“HTML”插入面板上的“其他字符”图标按钮，在弹出的下拉菜单中选择“版权”符号©。3）输入文本“2012-2017vivi版权所有”之后，按Shift+Enter键插入一个换行符，然后输入其他文本和邮箱地址。（5）添加邮件链接。选中邮箱地址，在属性面板的“链接”文本框中输入mailto:vivi@123.com，此时的页面效果如图12-30所示。图12-30库项目内容（6）插入库项目。1）执行“窗口”/“资源”菜单命令打开“资源”面板。单击“资源”面板左侧的“库”图标按钮切换到库管理面板。2）分别打开前两节制作的模板layout.dwt和article.dwt，将光标定位在最后一行单元格中，在属性面板上设置单元格内容的水平对齐方式为“居中对齐”，垂直对齐方式也为“居中”对齐。3）在“库”面板中选中库文件copyright.lbi，然后单击“库”面板底部的“插入”按钮；或直接将库项目拖动到单元格中，即可将库项目插入到页面中。此时的页面效果如图12-31所示。图12-31在页面中插入库项目任务4制作网站主页任务引入制作好模板文件和库项目之后，接下来小明开始在制作网站主页部分，那么主页要如何进行布局，如何插入栏目图像和文字，如何添加热点区域呢？知识准备制作好页面布局的模板之后，接下来就可以基于模板layout.dwt轻松制作网站主页了。本网站实例的制作步骤如下：（1）新建文件。1）执行“窗口”/“资源”菜单命令，调出“资源”面板。单击“资源”面板左侧的“模板”图标按钮切换到“模板”面板。2）在模板列表中右击layout.dwt，在弹出的快捷菜单中选择“从模板新建”命令，生成一个普通的HTML文件，如图12-32所示。图12-32基于模板生成的文件如果在“模板”列表中看不到已创建的模板，可以单击“模板”面板底部的“刷新站点列表”按钮。（2）插入布局表格。将光标定位在可编辑区域content内，删除可编辑区域内的占位文本，然后单击“HTML”插入面板上的“表格”图标按钮，插入一个4行2列、宽度为590像素、无边框的表格。（3）插入栏目图像。1）选中第一行和第三行的单元格，在属性面板上的“水平”下拉列表中选择“居中对齐”，在“垂直”下拉列表中选择“顶端”。2）将光标置于第一行第一列的单元格中，单击“HTML”插入面板上的“图像”图标按钮，然后在弹出的“选择文件”对话框中选择已制作的栏目图片。3）按照上一步同样的方法，在第一行第二列的单元格和第三行的单元格中分别插入栏目图片。此时的页面效果如图12-33所示。图12-33插入栏目标题图片（4）拆分内容布局表格。1）选中第二行第一列的单元格，然后单击属性面板上的“拆分单元格”按钮，将单元格拆分为2列。2）选中拆分后的右侧单元格，然后单击属性面板上的“拆分单元格”按钮，将单元格拆分为8行。3）按照前两步的方法，将第二行第二列的单元格和第四行的单元格进行拆分。拆分后的单元格效果如图12-34所示。图12-34拆分后的单元格（5）插入图文。1）将光标定位在第二行第一列的单元格中，在属性面板上设置单元格内容的水平对齐方式为“居中对齐”，垂直对齐方式也为“居中”对齐。2）单击“HTML”插入面板上的“图像”按钮，在弹出的“选择文件”对话框中选中相应的图像。然后按照同样的方法，在其他单元格中插入图像，页面效果如图12-35所示。图12-35插入图片效果3）选中图片右侧的8行单元格，在属性面板上的“水平”下拉列表中选择“左对齐”选项，单元格高度为20。然后在单元格中输入文本，并为文本添加超级链接。由于已在“页面属性”对话框中设置了普通文本和链接文本的颜色、大小，因此输入文本后的页面如图12-36所示。图12-36插入文本（6）添加热点区域。1）选中栏目标题图片，单击属性面板上的“矩形热点工具”按钮，然后在图像的“>>more”文本上按下鼠标左键拖出一个矩形框，将文本包围。2）在属性面板上的“链接”文本框中输入#，在“替换”文本框中输入“时尚饰品”。该步骤的作用是单击“>>more”热点区域后返回页面顶端。如果网站的文章比较多，可以依照该页面制作一个文章列表，然后将热点区域的链接目标指向文章列表所在的页。3）按照上面两步的方法，为其他栏目图片添加热点区域，并指定链接目标和替换文本。完成后的页面效果如图12-37所示。图12-37添加热点区域至此，网站主页制作完毕，整个页面的效果如图12-38所示。图12-38完成的页面效果。任务5制作其他页面任务引入制作好了网站主页之后，客户在访问网站时，只需要点击主页上的图形或文字，就能马上跳转到自己想了解的产品页面，为此小明还需要制作其他的页面，其他页面的制作过程与主页基本相似，小明要如何制作呢？知识准备本网站实例中将出现大量显示文章详细内容的页面，这些页面风格类似。下面使用嵌套模板article.dwt制作这些页面。步骤如下：（1）新建文件。在模板列表中右击模板article.dw