网页设计与制作 Dreamweaver CS6 标准教程

Presentation on theme: "网页设计与制作 Dreamweaver CS6 标准教程"— Presentation transcript:

1 网页设计与制作 Dreamweaver CS6 标准教程
第15章 综合实训 网页设计与制作 Dreamweaver CS6 标准教程

2 本章学习的主要内容： 1. 网站规划 2. 网站设计 3. 页面制作 4. 页面超链接设置

3 15.1 网站规划 本网站是一个宠物信息专业网站，旨在为广大 的宠物爱好者提供一个交流、展示的平台。
设计上采用较简洁的风格，配色采用两种主色 调：绿色（#6FB366）和紫色（#94688C）。 网站开发的流程主要为确定风格和配色、绘制 网站标志logo、设计网站banner、设计主页面、 设计子页面、制作主页网页和制作子页网页等。

4 15.2 网站设计 网站设计一般指网站的标志logo设计、banner 设计和网站主页及子页面设计。
通常在开发网站时，首先要用图像处理软件把 这些内容绘制出来，然后使用Dreamweaver软 件制作出相应的网页。

5 15.2 网站设计 网站标志logo设计 banner设计 页面设计

6 网站标志logo设计 本网站配色采用绿色和紫色两种色调，标志的设 计采用图形和中英文字体的结合。绘制标志采用 Photoshop软件完成，最终的效果如图15-1所示。

7 banner设计 Banner一般指网站中的横幅广告条，它是网 页中不可或缺的一部分，不仅可以增强网页视 觉效果，也能作为宣传网站的广告区域。 一般来说，网站中主页和二级页面都有不同的 banner，本网站针对三个页面设计了三个 banner。 主页banner（900300）、家园简介页面 banner（900250）和宠物风采页面 banner（900250）分别如图15-2、图 15-3、图15-4所示。

8 页面设计 1．主页设计 2．子页面设计

9 15.3 主页制作 网页效果图是一张完整的图片，需要转为网页页 面，但不能把整张图片放在网页中，这样不利于 网页中文字的修改和交互，也会降低网页打开的 速度，也不利于搜索引擎对网页的检索。

10 15.3 主页制作 15.3.1 主页面切图 15.3.2 创建站点 15.3.3 header区域制作 15.3.4 导航栏区域制作
banner区域制作 内容区域制作 footer区域制作

11 15.3.1主页面切图 一般来说，效果图中的文字内容在页面制作时， 需要输入或从数据库中读出，而把需要直接用图 片表现的部分从效果图中切出来，从网页效果图 中切出所需图片的过程就是切图。 切图原则是全面分析效果图的色彩、图像元素和 构图分布，尽量做到切出的图片量最少或页面布 局方案最佳，对于效果图中大片纯色背景不用切 图，可以直接在Dreamweaver中设置。 切图导出的图片会存放在自动生成的images文件 夹内。

12 15.3.1主页面切图 切图把网页效果图分成五个区域，分别为header 区域、导航栏区域、banner区域、内容区域和 footer区域，并计算出各区域的尺寸，如图15- 10所示。 其中，header区域和导航栏区域之间距离2个像 素，banner区域和内容区域之间距离12个像素， 内容区域和footer区域之间距离13个像素。

13 15.3.1主页面切图

14 15.3.2 创建站点 由于banner等素材图片已经先期单独制作，所 以也需要将这些素材图片移动到images文件夹 中。
启动Dreamweaver，选择菜单【站点】|【新 建站点】，在【站点设置对象】对话框的【站 点名称】文本框中输入“宠物家园”，在【本 地站点文件夹】选项中通过单击【浏览文件夹】 按钮 定位到PetHome文件夹，如图15-15所示。 单击【保存】按钮。

15 header区域制作 Header区域包含左侧网站logo标志和右侧的顶 部菜单两部分，分别对应的<div>标签为#logo 和#topmenu，各部分的尺寸如图15-17所示。

16 导航栏区域制作 导航栏区域左侧为导航菜单，对应的<div>标签 为#nav，右侧为搜索框，对应的<div>标签为 #search，各部分的尺寸如图15-31所示。

17 内容区域制作 内容区域对应的<div>标签为#content，它包含 左、中、右三部分，其中左边和中间部分对应的 <div>标签都为类样式.leftbox，而右边部分对 应的<div>标签为类样式.rightbox，各部分的 尺寸如图15-38所示。

18 内容区域制作 1．左侧内容部分 2．中间内容部分 3．右侧内容部分

19 15.4 子页面制作 家园简介子页面切图 新建子页面模板 新建家园简介子页面

20 15.5 其他子页面制作 其他子页面和家园简介页面布局类似，也可 以通过模板来制作。

21 15.6页面超链接设置 主页和子页面制作好之后，可以设置主页面 导航条的链接，以及通过模板页面导航条链 接的设置，实现子页面链接的设置。