第5.1网页版面的布局技术12ppt课件.ppt

《第5.1网页版面的布局技术12ppt课件.ppt》由会员分享，可在线阅读，更多相关《第5.1网页版面的布局技术12ppt课件.ppt（49页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、在此输入您的封面副标题第5.1网页版面的布局技术12中国铁道出版社中国铁道出版社 2016.122016.12李红李红 岳云康岳云康 樊东燕樊东燕 编著编著 编著：编著：李红李红 岳云康岳云康 樊东燕樊东燕中国铁道出版社2016.9中国铁道出版社中国铁道出版社 2016.122016.12李红李红 岳云康岳云康 樊东燕樊东燕 编著编著 主讲：主讲： 李红李红第第5 5章章 几种典型的网页布局技术几种典型的网页布局技术 中国铁道出版社中国铁道出版社 2016.122016.12李红李红 岳云康岳云康 樊东燕樊东燕 编著编著 知识目标：知识目标：掌握表格、框架、浮动框架、掌握表格、框架、浮动框架、

2、AP AP DivDiv等布局网页元素的基本等布局网页元素的基本htmlhtml标记；掌握标记；掌握DreamweaverDreamweaver的网页布局元素的基本设置和基的网页布局元素的基本设置和基本操作本操作技能目标技能目标：通过表格、框架、浮动框通过表格、框架、浮动框架、架、AP DivAP Div等布局方法设计网页等布局方法设计网页能力目标：能力目标：在实践的过程中，总结各种网页在实践的过程中，总结各种网页布局技术的优劣，选择合适的布局模式和方布局技术的优劣，选择合适的布局模式和方法应用于自己的作品，展示自身的创新能力法应用于自己的作品，展示自身的创新能力 本章教本章教学目标学目标中国

3、铁道出版社电子商务网页设计（第2版）课件 2016.12 B HTML文档类型声明文档类型声明2.3.2 HTML文档的头部标签文档的头部标签2.3.4 HTML文件命名规则文件命名规则2.3.3 HTML文档标签的使用规范文档标签的使用规范本章主要内容：中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 本节主要内容网页版面布局的几个概念网页版面布局的几个概念网页布局的基本要素网页布局的基本要素5.1.4 典型网页版面的布局结构典型网页版面的布局结构网页布局设计的一般步骤网页布局设计的一般步骤中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 页面尺寸页面尺寸由于

4、页面尺寸和显示器大小及分辨率有关系，网页布局的局限性就在由于页面尺寸和显示器大小及分辨率有关系，网页布局的局限性就在于无法突破显示器的范围，而且因为浏览器也将占去不少空间，留下于无法突破显示器的范围，而且因为浏览器也将占去不少空间，留下给网页的页面范围变得更小。一般分辨率在给网页的页面范围变得更小。一般分辨率在1024768的情况下，页的情况下，页面的显示尺寸为面的显示尺寸为1007600像素；分辨率在像素；分辨率在800 x600的情况下，页面的情况下，页面的显示尺寸为的显示尺寸为780428像素；而分辨率在像素；而分辨率在640 x480的情况下，页面的的情况下，页面的显示尺寸为显示尺寸为

5、620311像素。所以建议在设计页面时尽量不要超过显像素。所以建议在设计页面时尽量不要超过显示的尺寸，以方便浏览者有较好的浏览效果。示的尺寸，以方便浏览者有较好的浏览效果。2.关于第一屏关于第一屏 所谓第一屏，是指我们到达一个网站在不滚动鼠标滑轮时能够看到的所谓第一屏，是指我们到达一个网站在不滚动鼠标滑轮时能够看到的部分。那么第一屏有多部分。那么第一屏有多“大大”呢？一般来讲，在呢？一般来讲，在1024*768的屏幕显的屏幕显示模式下，示模式下，IE默认的状态下窗口内能看到的部分为默认的状态下窗口内能看到的部分为1003px*615px，一般来讲，我们以这个大小为标准就行了。一般来讲，我们以这

6、个大小为标准就行了。 中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 导航栏能让我们在浏览时容易的到达不同的页面，所以导航栏的位置导航栏能让我们在浏览时容易的到达不同的页面，所以导航栏的位置也是网页设计时必须考虑的问题之一。一般来讲，导航栏要在也是网页设计时必须考虑的问题之一。一般来讲，导航栏要在“第一第一屏屏”能显示出来，导航栏一定要醒目。但是有时第一屏的高度可能会能显示出来，导航栏一定要醒目。但是有时第一屏的高度可能会小于上面所说的小于上面所说的615px，基于这点考虑，那种横向放置的导航栏要优，基于这点考虑，那种横向放置的导航栏要优于纵向的导航栏考虑。原因很简单：如果浏

7、览者的第一屏很矮，横向于纵向的导航栏考虑。原因很简单：如果浏览者的第一屏很矮，横向的仍能全部看到，而纵向的就很难说了。的仍能全部看到，而纵向的就很难说了。4.网页的整体造型网页的整体造型一张网页就是一个整体，在显示器端呈现的页面中的文本、图形（或一张网页就是一个整体，在显示器端呈现的页面中的文本、图形（或视频）的布局应该是排列有序的。虽然显示器和浏览设备器一般是矩视频）的布局应该是排列有序的。虽然显示器和浏览设备器一般是矩形，但对于页面的造型，可以充分运用自然界中的其他形状以及它们形，但对于页面的造型，可以充分运用自然界中的其他形状以及它们的组合来设计，比如矩形、圆形、三角形、菱形等。不同的形

8、状所代的组合来设计，比如矩形、圆形、三角形、菱形等。不同的形状所代表的意义是不同的。例如，矩形代表着正式、规则；圆形则代表着柔表的意义是不同的。例如，矩形代表着正式、规则；圆形则代表着柔和、团结、温暖等；三角形代表着力量、权威、牢固、侵略等；菱形和、团结、温暖等；三角形代表着力量、权威、牢固、侵略等；菱形代表着平衡、协调和公平。代表着平衡、协调和公平。中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 2016.12 B 1.页眉页眉 网页的上端部分即是这个页面的页眉。页眉通常放置站点网页的上端部分即是这个页面的页眉。页眉通常放置站点的名称、的名称、LOGO图片、导航内容以及旗帜

9、广告等，其作用图片、导航内容以及旗帜广告等，其作用是定义页面的主题，这样访问者很快能知道这个站点是讲是定义页面的主题，这样访问者很快能知道这个站点是讲什么内容的。网页头部是整个页面设计的关键，它将牵涉什么内容的。网页头部是整个页面设计的关键，它将牵涉到版面其他部分的设计和整个页面的协调性。到版面其他部分的设计和整个页面的协调性。 2.页脚页脚 网页的最底端部分被称为页脚。页脚部分通常被用来介绍网页的最底端部分被称为页脚。页脚部分通常被用来介绍网站所有者的具体信息和联络方式，如名称、地址、联系网站所有者的具体信息和联络方式，如名称、地址、联系方式、版权信息等。其中一些内容被做成标题式的超链接方式

10、、版权信息等。其中一些内容被做成标题式的超链接，引导浏览者进一步了解详细的内容。页脚设计应和网页，引导浏览者进一步了解详细的内容。页脚设计应和网页头部相呼应。头部相呼应。中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 空白空白当浏览一个没有空白的页面时，用户会感到页面很拥挤，而造成心理当浏览一个没有空白的页面时，用户会感到页面很拥挤，而造成心理的紧张，对阅读这样的页面有一种厌烦的抵触感觉。初学网页设计的的紧张，对阅读这样的页面有一种厌烦的抵触感觉。初学网页设计的人往往会忽视人往往会忽视“空白空白”元素，元素，“空白空白”元素实际上与其他页面布局元元素实际上与其他页面布局元素有

11、紧密关联，甚至是其他元素的一部分，如行间距等。空白在网页素有紧密关联，甚至是其他元素的一部分，如行间距等。空白在网页设计中非常重要，它能够使网页看起来简洁、明快，阅读舒畅，是网设计中非常重要，它能够使网页看起来简洁、明快，阅读舒畅，是网页设计中必不可缺少的元素。可以使用表和透明页设计中必不可缺少的元素。可以使用表和透明GIF图像来给页面添图像来给页面添加空白。加空白。中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 2016.12 B 初步布局初步布局在草案的基础上，将确定需要放置的功能模块安排到页面上。通常首在草案的基础上，将确定需要放置的功能模块安排到页面上。通常首页设计的

12、内容主要包含网站标志、主菜单、新闻、搜索、友情链接、页设计的内容主要包含网站标志、主菜单、新闻、搜索、友情链接、广告条、邮件列表、计数器、版权信息等。在初步布局时，必须遵循广告条、邮件列表、计数器、版权信息等。在初步布局时，必须遵循突出重点、平衡协调的原则，将网站标志、主菜单等最重要的模块放突出重点、平衡协调的原则，将网站标志、主菜单等最重要的模块放在最显眼，最突出的位置，然后再考虑次要模块的排放。在最显眼，最突出的位置，然后再考虑次要模块的排放。中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 3.定稿定稿 在初步布局的基础上，具体化、精细化的过程。第在初步布局的基础上，具体

13、化、精细化的过程。第1章的章的图图1-5是一个简单网页的布局草图定稿实例。该网页的页是一个简单网页的布局草图定稿实例。该网页的页面大致分成了面大致分成了3个区域：页面顶部、页面中部和页面底部个区域：页面顶部、页面中部和页面底部。页面顶部的左侧（也就是页面的左上角）放置的是站点。页面顶部的左侧（也就是页面的左上角）放置的是站点的徽标，页面顶部通常还包括反映页面主题的图片或的徽标，页面顶部通常还包括反映页面主题的图片或Flash动画等，以吸引浏览者的注意。在页面顶部的下方动画等，以吸引浏览者的注意。在页面顶部的下方一般放置站点导航栏。页面中部是整个内容的主体，由反一般放置站点导航栏。页面中部是整个

14、内容的主体，由反映页面主题的图片、动画、文字、表格等组成。当页面内映页面主题的图片、动画、文字、表格等组成。当页面内容较多时，在页面的中部可以使用颜色、线条等对页面内容较多时，在页面的中部可以使用颜色、线条等对页面内容进行进一步划分归类。页面底部一般放置站点的版权信容进行进一步划分归类。页面底部一般放置站点的版权信息及联系信息等内容。息及联系信息等内容。中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 典型网页版面的布局结构典型网页版面的布局结构1.“国国”字型字型 “国国”型布局又称为型布局又称为“同同”型布局，是型布局，是一些大型网站喜欢使用的布局类型。页一些大型网站喜欢使

15、用的布局类型。页面顶部是一横条，横条左部设置网站标面顶部是一横条，横条左部设置网站标志，右部是横条广告；横条下部是水平志，右部是横条广告；横条下部是水平放置的主导航栏。导航栏下方分为左中放置的主导航栏。导航栏下方分为左中右三栏，左边一般放置内容导航、二级右三栏，左边一般放置内容导航、二级栏目、注册登录、搜索引擎等；右边一栏目、注册登录、搜索引擎等；右边一般放置动态新闻、热点内容、友情链接般放置动态新闻、热点内容、友情链接等；中间显示网页的主体内容。在页面等；中间显示网页的主体内容。在页面的最下方是一横条状菜单或广告，也可的最下方是一横条状菜单或广告，也可以是网站的一些基本信息、联系方式、以是网

16、站的一些基本信息、联系方式、版权声明等。这种布局通常用于主页设版权声明等。这种布局通常用于主页设计，主要优点是页面容纳的内容多，信计，主要优点是页面容纳的内容多，信息量大，如息量大，如w3cshool就采用了就采用了“国国”型布局。型布局。中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 2016.12 B 3.“三三”字型布局字型布局 这种布局的特点是在页面上由横向两条色块将网页整体分这种布局的特点是在页面上由横向两条色块将网页整体分割为三部分，色块中大多放置广告条与更新和版权提示。割为三部分，色块中大多放置广告条与更新和版权提示。如图如图5-4所示即是一种三字形布局的网页，

17、这种布局一般所示即是一种三字形布局的网页，这种布局一般采用简单的图片和线条代替拥挤的文字，给浏览者以强烈采用简单的图片和线条代替拥挤的文字，给浏览者以强烈的视觉冲击。的视觉冲击。中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 5. 标题正文型布局标题正文型布局 这种类型的布局结构由上边栏和内容栏组成，上边栏用来这种类型的布局结构由上边栏和内容栏组成，上边栏用来放置网站放置网站Logo、链接等信息，下边栏放置网页的主要内、链接等信息，下边栏放置网页的主要内容，布局结构如图容，布局结构如图5-5所示，通常文章页面或注册页面采所示，通常文章页面或注册页面采用此种布局，其特点是简洁明

18、快，干扰信息少，较为正规用此种布局，其特点是简洁明快，干扰信息少，较为正规。比如一些文章页面或注册页面等就是这种类。比如一些文章页面或注册页面等就是这种类。中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 4.“川川”字形布局字形布局 整个页面在垂直方向分为三列，网站的内容按栏目分布在整个页面在垂直方向分为三列，网站的内容按栏目分布在这三列中，最大限度地突出主页的索引功能，一般适用在这三列中，最大限度地突出主页的索引功能，一般适用在栏目较多的网站里。栏目较多的网站里。中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 网页版面布局设计的一般原则网页版面布局设计的一

19、般原则 第一，注重主要内容的展示，提高网页的可读性。第一，注重主要内容的展示，提高网页的可读性。 第二，网页布局要图文并茂，注重用户的视觉感受。第二，网页布局要图文并茂，注重用户的视觉感受。 第三，充分利用网页的层次性和空间性展示内容。第三，充分利用网页的层次性和空间性展示内容。 第四，合理利用第四，合理利用“空白空白”。 中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 本节主要内容：创建表格创建表格表格设置表格设置5.2.4 HTML表格布局技术表格布局技术使用表格布局页面使用表格布局页面中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 标签是网页中一个重要

20、的块元素，是定位文字与标签是网页中一个重要的块元素，是定位文字与图像的强大工具。表格是由行和列组成的，最小的单位是图像的强大工具。表格是由行和列组成的，最小的单位是单元格，表格中包括单元格，单元格边距，单元格间距等单元格，表格中包括单元格，单元格边距，单元格间距等概念。概念。 在在DW中创建表格可以选择中创建表格可以选择“插入插入”“表格表格”或单击插入或单击插入工具栏上工具栏上“常用常用”选项卡的按钮，都将打开如图选项卡的按钮，都将打开如图5-6所示所示的的“表格表格”对话框。对话框。中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 2016.12 B 制作步骤如下：制作步骤

21、如下：启动启动Dreamweaver，“文件面板文件面板”默认站点为上次定义的站点。默认站点为上次定义的站点。如果没有站点，须按照如果没有站点，须按照【案例案例3-1】的操作步骤新建站点。的操作步骤新建站点。在文件面板中，单击右键，新建一个空白文档，重命名为在文件面板中，单击右键，新建一个空白文档，重命名为“biaoge.html”。双击。双击biaoge.html文档进入编辑环境。文档进入编辑环境。在菜单栏单击在菜单栏单击“插入插入”“表格表格”或单击插入工具栏上或单击插入工具栏上“常用常用”选选项卡的按钮，打开如图项卡的按钮，打开如图5-6所示的所示的“表格表格”对话框。设置表格的行数对话

22、框。设置表格的行数为为3，列数为，列数为3的表格，设置宽度为的表格，设置宽度为500像素，边框为像素，边框为0，单元格边距，单元格边距为为20像素，间距为像素，间距为40像素。像素。单击单击“确定确定”按钮，出现如图按钮，出现如图5-7所示的表格。从图中可以直观的所示的表格。从图中可以直观的理解单元格边距和单元格间距的概念。理解单元格边距和单元格间距的概念。在表格相关单元格中，键入相关文字，如在表格相关单元格中，键入相关文字，如“特产名称特产名称”、“特产价特产价格格”“”“产地产地”等。等。中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 特产名称特产名称 特产价格特产价格

23、产地产地 核桃核桃 100 汾阳汾阳 老陈醋老陈醋30 柳林柳林 中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 。步骤如下：步骤如下： 启动启动Dreamweaver，“文件面板文件面板”默认站点为上次定义的站点。默认站点为上次定义的站点。如果没有站点，须按照如果没有站点，须按照【案例案例3-1】的操作步骤新建站点。的操作步骤新建站点。在文件面板中，单击右键，新建一个空白文档，重命名为在文件面板中，单击右键，新建一个空白文档，重命名为“biaoge2.html”。双击。双击biaoge2.html文档进入文档进入Dreamweaver的编的编辑环境。辑环境。在菜单栏单击在菜

24、单栏单击“插入插入”“表格表格”或单击插入工具栏上或单击插入工具栏上“常用常用”选选项卡的按钮，打开如图项卡的按钮，打开如图5-6所示的所示的“表格表格”对话框。设置表格的行数对话框。设置表格的行数为为4，列数为，列数为3的表格，设置宽度为的表格，设置宽度为500像素，边框为像素，边框为0，单元格边距，单元格边距为默认值，间距为为默认值，间距为1px，属性面板如图，属性面板如图5-11。注意：间距。注意：间距(cellspacing)为为1；边框；边框(Border)为为0是设计细线表格的核心。是设计细线表格的核心。中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B ，选择，选择

25、“在页面中定义在页面中定义”，“源源”选项卡部分出现选项卡部分出现；接着在；接着在“选择器选择器”选项卡中单击，添加选项卡中单击，添加“table”标签选择器，标签选择器，并选中并选中“table” 标签选择器；此时下面的标签选择器；此时下面的“属属性性”选项卡中就可以设置选项卡中就可以设置“table”样式的相关样式的相关属性。这里我们选择其背景色为红色（属性。这里我们选择其背景色为红色（background-color: #FF0000；）。；）。同步骤，在页面中定义继续添加同步骤，在页面中定义继续添加“td”标签标签选择器，设置选择器，设置“td”的样式背景颜色属性值为白的样式背景颜色属

26、性值为白色（色（background-color:#FFFFFF）。）。保存网页，按保存网页，按F12预览。效果如图预览。效果如图5-12。中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 本例运用表格技术布局网页框架，来介绍网页的基本布局本例运用表格技术布局网页框架，来介绍网页的基本布局思路和表格布局技术。思路和表格布局技术。 步骤如下：步骤如下： 设计网页前先进行网页的布局规划，设计草图如图设计网页前先进行网页的布局规划，设计草图如图5-13，下面按布局图进行设计。，下面按布局图进行设计。 在在DW的文件面板中，打开站点，新建网页文件如的文件面板中，打开站点，新建网页文件如

27、biaoge4.html，双击进行编辑。，双击进行编辑。 在打开的网页编辑器里，单击在打开的网页编辑器里，单击“插入插入”面板的表格按钮面板的表格按钮，打开图，打开图5-6的表格对话框，设置表格的行数为的表格对话框，设置表格的行数为4，列为，列为1，设置表格的边框为，设置表格的边框为0，间距为，间距为1，宽度，宽度770px。插入一个。插入一个4*1的表格。的表格。【例【例5-3】表格技术布局网页】表格技术布局网页 中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 表格。表格。 把光标放在第一个单元格里，在单元格属性面板里设置把光标放在第一个单元格里，在单元格属性面板里设置单元

28、格高度为单元格高度为70像素，同理依次将第二、第三、第四单元像素，同理依次将第二、第三、第四单元格的高度分别设置为格的高度分别设置为20、580、80像素。像素。 将第三行拆分为将第三行拆分为2列，并设第一列的宽度为列，并设第一列的宽度为170像素，像素，高度为高度为580像素。此时代码为：像素。此时代码为：       中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 设置表格的样式设置表格的样式。打开。打开CSS设计器，设计器，如图如图3-31，在，在“源源”选项卡右侧部分单选项卡右侧部分单击击 ，选择，选择“在页面中定义在页面中定义”，“源源

29、”选选项卡部分出现项卡部分出现；接着在；接着在“选择选择器器”选项卡中单击，添加选项卡中单击，添加“.bg”类选择类选择器，并选中器，并选中“.bg”类选择器；此时下面类选择器；此时下面的的“属性属性”选项卡中就可以设置选项卡中就可以设置“.bg”样式的相关属性。这里我们选择其背景样式的相关属性。这里我们选择其背景色为红色（色为红色（background-color: #FF0000;），居中（），居中（margin:0 auto;），如图，如图5-14。中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 设置单元格的样式设置单元格的样式。 同步的设置方法，在页面中定义继续添加同

30、步的设置方法，在页面中定义继续添加“.dyg”类选类选择器，设置择器，设置“.dyg”的样式背景颜色属性值为白色（的样式背景颜色属性值为白色（background-color:#FFFFFF）。）。 CSS样式设置完成后，代码视图增加了以下代码：样式设置完成后，代码视图增加了以下代码： .bg background-color: #FF0000; margin-left: auto; margin-right: auto; .dyg background-color: #FFFFFF; 中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 设置文档中表格标签的设置文档中表格标签的C

31、SS应用。在文档编辑区的状态应用。在文档编辑区的状态栏单击栏单击标签选中表格，再在表格属性面板的标签选中表格，再在表格属性面板的“类类”中的下拉列表中，选择中的下拉列表中，选择bg，表格即应用了，表格即应用了bg的的CSS样样式；其实质是在表格标签中添加了代码式；其实质是在表格标签中添加了代码“class=bg”。 设置文档中单元格标签的设置文档中单元格标签的CSS应用。依次把鼠标放置应用。依次把鼠标放置在相应单元格中，在单元格属性面板的在相应单元格中，在单元格属性面板的“类类”中的下拉列中的下拉列表中，选择表中，选择dyg，单元格即应用了，单元格即应用了dyg的的CSS样式；其实样式；其实质

32、是在单元格标签中添加了代码质是在单元格标签中添加了代码“class=dyg”。 插入相应的图片，输入相应文字。插入相应的图片，输入相应文字。 单击单击“文件文件”“保存保存”，按下【，按下【F12】，浏览器中，】，浏览器中，最终效果如图最终效果如图5-15。中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 2016.12 B 本节主要内容：模板概述模板概述创建模板创建模板基于模板制作网页基于模板制作网页中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 网页模板就像工业生产中的一个模具，批量设计网页也有网页模板就像工业生产中的一个模具，批量设计网页也有网页模板，网

33、页模板中一般包含网页页面中结构相同的部网页模板，网页模板中一般包含网页页面中结构相同的部分，比如分，比如logo、banner、导航条、菜单等内容，不同的、导航条、菜单等内容，不同的部分一般空出来等到设计的时候再添加。利用模板制作网部分一般空出来等到设计的时候再添加。利用模板制作网页，大大减少了工作量，提高了工作效率。页，大大减少了工作量，提高了工作效率。 Dreamweaver的网页模板是一种扩展名为的网页模板是一种扩展名为.dwt的特殊文的特殊文档，但其制作方法与制作普通页面基本相同。不同点仅在档，但其制作方法与制作普通页面基本相同。不同点仅在于模板把页面中相同内容的部分设置为不可编辑区域

34、，其于模板把页面中相同内容的部分设置为不可编辑区域，其实就是把它锁定了，不允许再修改；内容不同的区域也就实就是把它锁定了，不允许再修改；内容不同的区域也就是空出来的部分就设置为可编辑区域，将来在页面制作过是空出来的部分就设置为可编辑区域，将来在页面制作过程中再去完成。程中再去完成。中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 2将普通网页另存为模板将普通网页另存为模板 我们自己编辑好的网页，也可保存为模版，设置步骤为：我们自己编辑好的网页，也可保存为模版，设置步骤为： 打开一个已经制作好的，选择打开一个已经制作好的，选择“文件文件”“另存为模板另存为模板”，会打开如图，会打

35、开如图5-24所示的对话框，输入文件名称，保存所示的对话框，输入文件名称，保存。如果已经有图像等内容，会提示更新链接提示框，如图。如果已经有图像等内容，会提示更新链接提示框，如图5-26，单击，单击“是是”。此时原网页文档自动保存为后缀名为。此时原网页文档自动保存为后缀名为.dwt的模板文档，并且添加在的模板文档，并且添加在“Templates”文件夹中。文件夹中。中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 在模板中插入可编辑区域，插入的方法为：在模板中插入可编辑区域，插入的方法为：“插入插入”“模板模板”“可编辑区域可编辑区域”。 注意：网页模板文档中必须有注意：网页模

36、板文档中必须有“可编辑区域可编辑区域”，如果没有，如果没有可编辑区域就保存，就会弹出如图可编辑区域就保存，就会弹出如图5-25所示的提示框，点所示的提示框，点击击“确定确定”后可继续保存，但随后必须再插入后可继续保存，但随后必须再插入“可编辑区可编辑区域域”。如果要删除可编辑区域，方法是：。如果要删除可编辑区域，方法是：“修改修改”“模模板板”“删除模板标记删除模板标记”。 上述步骤完成后，单击保存，然后关闭模板文档。上述步骤完成后，单击保存，然后关闭模板文档。中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 2016.12 B 3更新网页更新网页 当使用模板创建网页或者将模板

37、应用于现有网页之后，模当使用模板创建网页或者将模板应用于现有网页之后，模板和网页之间就会建立起一种联系。当模板被修改之后，板和网页之间就会建立起一种联系。当模板被修改之后，就会弹出如图就会弹出如图5-30所示的对话框，其中列出了所有和该模所示的对话框，其中列出了所有和该模板有关联的网页名称，点击板有关联的网页名称，点击“更新更新”，这些页面就会随之，这些页面就会随之进行更新。进行更新。中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 4将文档从网页中分离出来将文档从网页中分离出来 如果要修改网页，可以通过修改模板来更新网页，还有一如果要修改网页，可以通过修改模板来更新网页，还有

38、一个方法就是取消网页和模板之间的关系，网页就不需要受个方法就是取消网页和模板之间的关系，网页就不需要受到模板的约束而可以自由修改了。方法是：到模板的约束而可以自由修改了。方法是：“修改修改”“模板模板”“从模板中分离从模板中分离”。中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 2016.12 B 单击单击“文件文件”“保存保存”后，关闭后，关闭“cpmoban.dwt”模模板文档窗口。板文档窗口。中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 第第2部分，使用模板制作网页部分，使用模板制作网页。步骤如下：。步骤如下： 选择选择“文件文件”“新建新建”“网站

39、模板网站模板”站点站点“ncpshop”站点中的模板站点中的模板“cpmoban”，然后点击，然后点击“创建。创建。 此时光标定位于此时光标定位于“EditRegion1”的前面，删除相关文字；然的前面，删除相关文字；然后进行网页的编辑。如录入标题；正文录入相关文字，按后进行网页的编辑。如录入标题；正文录入相关文字，按【Enter】键进行分段，插入图片，应用样式等，如图键进行分段，插入图片，应用样式等，如图5-32。中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 2016.12 B 编辑完成后，选择编辑完成后，选择“文件文件”“保存保存”，弹出，弹出“另存为另存为”对话框，如

40、图对话框，如图5-33，在，在“文件名文件名”后给文件设置文件名后给文件设置文件名如如hetao.html，并选择文件存放的位置，如，并选择文件存放的位置，如pruduct文件文件夹里。夹里。中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B Dreamweaver的表格工具；的表格工具； 表格布局网页的方法。表格布局网页的方法。 网页模板技术。网页模板技术。中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 实验实验9：运用表格布局网页：运用表格布局网页 实验目的：实验目的： 1.了解表格的基本属性。了解表格的基本属性。 2.掌握运用细线表格标签布局网页。掌握运用

41、细线表格标签布局网页。 实验内容：实验内容： 1. DW环境下表格的插入和属性的编辑。环境下表格的插入和属性的编辑。 2. 单元格的属性设置。单元格的属性设置。 3.细线表格的制作。细线表格的制作。 4.运用表格进行网页的布局，并在表格中使用内联框架。运用表格进行网页的布局，并在表格中使用内联框架。中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 实验实验10：运用模板进行网页设计：运用模板进行网页设计 实验目的：实验目的： 1.掌握掌握DW的网页模板技术。的网页模板技术。 实验内容：实验内容： 1.创建网页模板；创建网页模板； 2.应用模板制作网页；应用模板制作网页； 3. 修改模板实现对网页布局的修改。修改模板实现对网页布局的修改。 4.完成运用模板创建网站某一（如产品）模块的网页的制完成运用模板创建网站某一（如产品）模块的网页的制作。作。中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B http:/