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

项目十二

时尚资讯网站设计综合实例任务1

网站概述任务2制作模板任务3制作库文件任务4制作网站主页任务5制作其他页面任务1网站概述任务引入领导交给小明一个任务，要求为某公司设计时尚资讯网站，在制作网站之前，通过与客户沟通，小明也对网站的要求有了一个大致都的了解，那么该网站主要包括哪些信息，需要准备哪些素材呢？知识准备一、网站介绍时尚资讯网站综合实例是介绍一些时尚信息的网站，例如美容、服饰、搭配、美食等，整张页面主要使用表格进行布局。由于是信息发布类的网站，因此本例有多个页面，但本例内容主要集中在介绍模板制作方面，然后在模板的基础上制作主页及“施华洛世奇新品流行速递”页面。实例最终效果如图所示。实例主页实例效果

实例效果二、准备工作在开始制作本例之前，先介绍一下制作本网站所需的准备工作。（1）在硬盘上新建一个fashion文件夹，在fashion目录下创建一个images子目录。（2）在图片编辑软件（如Fireworks）中制作所需的图片，如图所示。（3）启动Dreamweaver2021，执行“站点”/“新建站点”菜单命令，新建一个静态的本地站点fashion，指向fashion目录。logo栏目标题

页面底部背景和导航图像任务2制作模板任务引入前期的准备工作已经做好，接下来小明开始准备设计网站，该网站包括网页，这些网页用到了一些相同的页面元素和排版方式，为了避免繁琐的重复工作，提高工作效率，小明需要首先制作一个模板，那么制作这个模板要怎样设计基本布局，按怎样的顺序去进行设计呢？知识准备由于本网站中的页面要用到相同的页面元素和排版方式，因此可以使用模板以避免重复地在每个页面输入或修改相同的部分。在网站改版的时候，只要改变模板，就能自动更改所有基于这个模板的网页。一、设计基本布局（1）新建一个HTML文件，在属性面板上的“文档标题”文本框中输入“时尚资讯”。（2）创建样式表。“创建新的CSS文件”对话框（3）创建基本布局。（4）制作顶栏。二、制作导航菜单本节使用jQueryAccordion构件制作导航菜单面板，单击面板名称，可以上下自由滑开选择的内容，而整个窗口不会发生变化。操作步骤如下：（1）拆分单元格。（2）插入折叠构件。表格效果页面效果插入logo插入图片的效果页面效果

插入的jQueryAccording构件“复制相关文件”对话框（3）设置折叠式构件的属性。（4）修改面板名称。（5）修改标题文本的颜色。（6）修改标题文本的呈现方式。（7）设置面板的背景颜色。（8）设置面板内容的填充边距。（9）添加菜单项。（10）设置项目列表的样式。jQuery折叠式的属性面板jQueryAccording效果修改规则定义在“CSS设计器”面板中查看规则（11）设置鼠标划过时链接文本的颜色。（12）使用同样的方法，在其他四个面板中插入文本，并制作成项目列表。（13）设置单元格属性。（14）插入图像链接。

页面效果设置面板内容背景的效果修改内容左、右填充之后的效果项目列表定义列表效果设置链接样式三、插入模板元素（1）设置页脚的背景图像。（2）插入可编辑区域。（3）保存文件。设置页脚背景插入的可编辑区域四、制作嵌套模板（1）插入布局表格。（2）设置表格的背景图像。（3）设置标题文本的样式。（4）插入分隔线。（5）插入翻页导航文本。（6）执行“文件”/“另存为模板”命令，将模板另存为名为article.dwt的模板。设置表格背景的效果页面效果页面效果任务3制作库文件任务引入制作好了模板文件，然后版权声明部分也是每个网页需要用到的内容，为此小明需要将版权声明部分保存为库项目，那么要如何制作版权声明文件，如何将库项目插入到不同的网页呢？知识准备在Dreamweaver中，库项目是可以重复使用的项目之一，库的用途与模板类似，都可将同一内容重复用于不同的网页。本例的库文件具体制作步骤如下。（1）新建文件。（2）保存库文件。（3）插入布局表格。（4）插入页脚内容（5）添加邮件链接。（6）插入库项目。任务引入制作好了模板文件，然后版权声明部分也是每个网页需要用到的内容，为此小明需要将版权声明部分保存为库项目，那么要如何制作版权声明文件，如何将库项目插入到不同的网页呢？知识准备在Dreamweaver中，库项目是可以重复使用的项目之一，库的用途与模板类似，都可将同一内容重复用于不同的网页。本例的库文件具体制作步骤如下。（1）新建文件。（2）保存库文件。（3）插入布局表格。（4）插入页脚内容（5）添加邮件链接。

库项目内容

在页面中插入库项目任务4制作网站主页任务引入制作好模板文件和库项目之后，接下来小明开始在制作网站主页部分，那么主页要如何进行布局，如何插入栏目图像和文字，如何添加热点区域呢？知识准备制作好页面布局的模板之后，接下来就可以基于模板layout.dwt轻松制作网站主页了。本网站实例的制作步骤如下：（1）新建文件。（2）插入布局表格。（3）插入栏目图像。基于模板生成的文件插入栏目标题图片（4）拆分内容布局表格。（5）插入图文。（6）添加热点区域。拆分后的单元格插入图片效果插入文本添加热点区域

完成的页面效果。任务5制作其他页面任务引入制作好了网站主页之后，客户在访问网站时，只需要点击主页上的图形或文字，就能马上跳转到自己想了解的产品页面，为此小明还需要制作其他的页面，其他页面的制作过程与主页基本相似，小明要如何制作呢？知识准备本网站实例中将出现大量显示文章详细内容的页面，这些页面风格类似。下面使用嵌套模板article.dwt制作这些页面。步骤如下：（1）新建文件。（2）插入图文。预览页面效果（3）执行“文件”/“保存”命令，将当前页面保存为swarovski-1.html。（4）按照上面的步骤制作另一个页面，例如swarovski-2.html。（5）添加导航链接。选中当前文章第一页中的“下一页”文本，（6）按照以上步骤制作其他文章的页面。（7）保存文档，按F12键在浏览器中预览页面效果项目总结项目实战实战一制作旅游网站首页旅游网站综合实例是介绍全国各地著名旅游景点的网站。主要集中在介绍模板制作方面，然后在模板的基础上制作首页，鼠标停留在导航栏上时弹出下拉菜单；将鼠标指针移动子菜单上时，对应菜单项高亮显示。（1）新建一个HTML模板文件，并保存模板文件为lvyou.dwt。（2）制作模板，依次制作导航条、左侧边栏、正文和右侧边栏以及库项目保存模板文件，如图所示。（3）选择创建好的模板文件，制作首页，如图所示。模板文件

网站首页实战二制作儿童教育网站本例的最终效果如图所示，将鼠标指针移到导航菜单上时，菜单项显示为桔红色，且弹出下拉菜单。移到链接文本上，则文本颜色变为桔红色，且显示下划线。页面底部的图片向右滚动，将鼠标指针移到图片上时，图片停止滚动；