第5章家电家居网站ppt课件
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
本实例的网站导航条宽度将设置为100%，也就是说宽度会随 着浏览器的宽度而变化，这样做能使页面看上去更大气、安 全。下面介绍导航条的具体操作步骤。
接着上一小节的步骤，插入1行1列，宽为100%、高为34像素 的表格，并在【属性】面板上设置其背景图像为“menu-bg。 jpg”。
设置单元格的【垂直】对齐格式为“底部对齐”，并在该单元 格内插入一个宽为778像素的表格，设置其居中显示，此表 格的作用是为了更好地控制菜单栏的显示位置。
首先使网页居中显示，然后再规划出头部区域Banner区域、内 容区域和尾部区域的大致位置。
设计主导航栏。使用【矩形选框工具】 按照参考线的位置框 选范围。
单击[渐变工具]，并在【渐变编辑器】对话框中设置渐变色。
按住【Shift】键不放，在选框范围内由上至下填充线性渐变。
在渐变色上方输入导航文字（字体：黑体，字号：11点）和分隔 符（颜色：#A4A99A）。然后再插入网站logo、搜索框和文字 等内容。
5.5.1认识模板
在浏览一个网站时，发现同一网站上很多网页的基本样式都是 相同的。比如页面背景、文字样式、导航条、版权信息等。 既然这样，那么就可以将这些不变的元素都做成一个文件， 这个文件就是“模板”。然后再通过模板来创建子页。
该网站中的头部区域、尾部区域、背景样式都是相同的。所以 可以把这些相同部分的内容做成一个模板，再利用模板来创 建子页。这样不但可以节省大量网页制作时间，也便于网站 的管理。
与页面头部区域的风格相呼应，绘制矩形选框后填充线性渐变 色。
在渐变色上方插入版权等相关信息。至此，首页的版面已设计 完毕。
5.3.3切割网页图像
设计完网页版面后，即可进行切割的工作，以便将图像切割成 不同大小的切片。经过这样的处理可以让图像在网络传输中 有更快的速度，以减少浏览者等待的时间。本例对网页模板 的切割效果。关于图像切割的方法，请参考前面章节的介绍 ，在此就不再赘述了。
打开Dreamweaver软件，执行【站点】|【新建站点】命令， 建立一个名为“home”的站点，然后将之前制作好的文件拷 贝到该站点下。
新建一个HTML文档后，按【Ctrl+J】打开【页面属性】面板， 设置页面的【外观】属性和【标题/编码】属性。
插入一个1行2列，宽为758、高为38像素的表格，并在【属性 】面板上设置其相关属性。
选中“产品与服务”图片，在【属性】面板上为其设置空链接“#” 。这样是为了当鼠标指针移到菜单上时可以显示手型。
使用快捷键【Shift+F4】打开【行为】面板，单击按钮选择【 显示弹出式菜单】命令。
单击【内容】选项，在【文本】文本框中输入菜单名称（家电
产品、影音产品、数码项目），然后单击按钮进行添加。如
在上一步制作的表格内插入一个2行1列，宽为758像素的表格 ，设置第一个单元格的高为“8”像素，使接下来要插入的 Banner图片与导航条有一段分隔距离。
在第二个单元格内插入图片“Banner.jpg”。
插入一个1行3列，宽为758、高为113像素到的表格，并设置 其【对齐】方式为“居中对齐”，【背景图像】为“menubg1.jpg”。然后在3个单元格内分别插入图片“product.jpg” 、“he.jpg”、“about.jpg”。
再插入一个1行2列，宽为758像素的表格，设置其背景颜色为 白色，然后分别在两个单元格插入图“link5.jpg”、 和 “link4.jpg”。
至此，主要内容区域已制作完毕，按【F12】键在浏览器中预 览其效果。
5.4.5制作尾部区域
最后将制作尾部区域的内容，该实例的尾部区域放置的是版权 信息、联系我们、法律声明的链接图片和友情链接的内容， 风格上也与头部区域首尾呼应，具体制作方法如下。
在【属性】面板上设置第一个单元格【宽】为“241”像素，并插 入logo图片“logo。jpg”。
在第二个单元格内插入一个1行5列的表格，并设置 其属性， 然后在各个单元格内插入相应的内容。
5.4.2制作导航条
导航条的作用是让用户能够很轻松地找到自己所需的信息，设 置的各个栏目是将整个网站的内容进行明确的分类，给用户 一种指引性。
5.2.2 布局分析
依据导航的排列位置，该网站属于顶部导航的页面分割的复合 结构页面布局，复合结构的优点在于使内容信息量大、菜单 结构复杂的网站结构变得更加合理，这也是常用的页面布局 类型。因为该网站设置有主栏目下拉菜单以及Banner条下方 的“产品与服务”“商务合作”“关于常盛”的二级导航。另外，如 前面章节中介绍到的，位于顶部导航对下方内容区域造成的 影响是最小的，便于调整网站导航和内容区域的比重。该网 站的顶部导航宽度设置的是100%，与浏览器的宽度相同， 设计得非常简洁，下方的内容区域显得更加丰富、精彩
模板实质上就是创建其他文档的基础文档。在创建模板时，可 以设置固定不变的网页元素应该长期保留、不可编辑，需要 更新的元素可以编辑修改。以本章实例而言，创建模板时就 可以把头部区域。尾部区域、背景设置为锁定区（不可编辑 区），把Banner区域和内容区域设置为可编辑区。
在内容区域的结构上可以很明显地看出“色彩块”：Banner区域 、“产品与服务”等导航区域、企业动态区域、尾部区域，各 个区域的风格设计都成矩形，结构层次非常清晰明了。尾部 区域的色彩与顶部的背景相呼应，使页面具有整体性。
5.3使用Photoshop软件设计版 面效果
该网站的版面给人一种大气、自由奔放、色彩绚丽的感觉，在 设计上并无特别复杂的技巧，而是保持简单的信念，大胆而 自由地运用色彩、造型，按照策划思路精心编排即可设计出 不错的效果。
插入一个1行3列的表格，设置其背景颜色为白色。 在第一个单元格内插入一个4行1列，宽为80%的表格，设置其
居中显示；然后再设置各个单元格的高为“24”像素、背景图 像为“LINE.jpg”。 在4个单元格内分别插入相应的图片，以同样的方式继续制作 第2、第3个单元格的内容。 插入一个2行1列的表格，设置第一个单元格的高度为“8”像素 作为分隔间隔；将第二个单元格拆分为3列，并设置一、二 两个单元格的【垂直】对齐方式为“顶端”。
与上一步骤制作的白框相隔4像素，再绘制一个白框到参考线位置 ，并插入“长盛企业动态”和“最新媒体报道”的相关文字和专题图 片。
5.3.2设计尾部区域
尾部区域放置版权、友情链接等信息，风格与头部区域一致， 起到前后呼应的效果。制作方法也比较简单，绘制矩形选框 填充渐变色，然后再插入相关信息即可，具体操作步骤如下。
单击【位置】选项卡，设置菜单显示Fra bibliotek触发图片的下方。
设置完毕后，单击【确定】按钮，【行为】面板的显示状态。在 【文档】窗口中并没有看到刚刚设置好的菜单格式，需要在浏 览器中才能看到效果。按【F12】键预览。使用同样的方法， 可以为其他栏目设置下拉菜单，这里就不再赘述了。
5.4.4编排其他内容
导航条及下拉菜单制作完毕后，接下来介绍其他部分的制作方 法。依然是使用表格布局，并插入相应的图片、文字等内容 ，具体操作步骤如下。
在上一步插入的表格中再插入一个1行10列的表格，并在各个 单元格中插入相应的图片。
5.4.3制作下拉菜单
随着企业规模的扩大，产品的不断增加，网站的内容也变得非 常之多。笼统单一的菜单栏目设置已经无法满足网站的需求 ，所以需要以增设下拉菜单的形式来细分大栏目的内容。下 面介绍使用【行为】面板制作下拉菜单的具体操作步骤。
在第一个单元格内插入3行1列，宽为90%的表格，设置其居中 显示；然后在各个单元格内插入相应的图片和文字，以同样 的方法，在第二个单元格内插入内容。
在第3个单元格内插入一个5行1列，宽为216像素的表格，设置 其居中显示，并分别在第1、第3、第5个单元格内插入专题 图片“link1.jpg”、 “link2.jpg”、 “link3.jpg”。
插入一个1行1列，宽为100%的表格，并在【属性】面板上设 置其相关属性。为制作方便，这里表格高度可以先随意设定 ，因为最终的表格高度会自动适应表格内容的高度。然后在 【代码】视窗内的该表格<table>标签内输入背景图片横向 重复的代码：style=”BACKGROUND-REPEAT:repeat-x;”
第5章家电家居网站ppt课件
5.1 背景概念
家电家居类网站主要是介绍和展示家电、家居等人们比较关注 的信息和事物的网络平台，因此在设计风格上一般要求贴近 生活，以更好地体现产品的价值。家电家居类网站除了发布 家电家居行业的动态、供求等信息，还发布自己企业的产品， 包括推广和展销产品的功能、亮点等，让用户可以方便、及 时地了解产品动态。
切割网页图像后，即可执行【文件】|【存储为Web所用格式】 命令，将版面存储成HTML页面文件。同样，为了让图像在 保存成网页时能够保持最佳的显示效果，在保存网页前需要 对切片进行优化处理。
优化切片后，就可以讲网页版面存储成网页文件。在保存时必 须将保存类型设置为“HTML和图像”才可以将图像和HTML页 面一并保存下来。
果有制作好的二级页面，可以在【链接】
文本框中
设置链接地址。
单击【外观】选项卡，在下拉列表框中选择【垂直菜单】，选择 图标设置文本框居中显示，设置当鼠标指针移到菜单上时的单 元格颜色为“#A5A99A”。
单击【高级】选项卡，设置单元格的宽度为“100”像素，选中【显 示边框】复选框并设置【边框颜色】为“#777777”。
将光标置入第二个单元格中，在【表格】工具栏中选择【跳 转菜单】图标插入跳转菜单。
弹出【插入跳转菜单】对话框，在【文本】文本框中输入菜 单名称，在【选择时，转到URL】文本框中输入要转到的 页面地址，然后单击按钮进行添加，然后单击【确定】按 钮。
选择跳转菜单，在【初始化时选定】文本框选择“请选择…”选 项为初始化。若要编辑跳转菜单的内容，可单击列表值按 钮进行编辑。
至此，整个首页已制作完毕，按【F12】键预览最终效果。
5.5利用模板制作网页
在Dreamweaver中，模板是一个非常有用的工具，它可以帮助 用户快速制作出效果类似的网页，而且也利于以后的编辑修 改。
模板实际上也是文档，它的扩展名为.dwt，并存放在根目录的 模板文件夹Templates中。模板文件夹并不是从来就有的， 它只是在创建模板的时候才自动生成的。
5.4将效果图制作成HTML页面
完成版面以及其他相关素材的处理后，接下来就可以使用 Dreamweaver软件编辑网页了。网页布局可以对照 Photoshop软件中切割后存储的Web页面进行编排制作， 然后再利【行为】面板制作下拉菜单等效果。
5.4.1定义站点与表格布局
在制作网站过程为了能够顺利地插入、编排、调试等操作，首 先需要为网站建立本地站点，给网站制作过程提供一个良好 的制作环境，然后再进行页面属性设置、利用表格排版等操 作，具体操作步骤如下。
按照参考线设置的位置绘制选框，填充线性渐变色。
将背景色填充为灰色（颜色值#EBEBEB）。
按照参考线设置的位置，插入758*178像素的Banner图片。
设计特别导航栏。在Banner图下方绘制矩形选框，并填充渐变色 ；然后在图形上方再插入相关图标和文字。
在各个标题下方插入子链接内容。绘制矩形选框填充白色，然后 再插入文字和虚线。
插入一个1行1列，宽为758像素的表格，设置单元格的高度为 “5”像素，作为与上部分的分隔间隙。
插入一个1行2列，宽为758、高为55像素的表格，设置第一个 单元格的宽度为“550”像素，设置第二个单元格的宽度为 “207”像素，【垂直】对齐方式为“底部”。
在第一个单元格内插入一个2行1列，宽为526像素的表格，设 置其居中显示，并在各个单元格内插入相应的图 片和文字内 容。
网站的主体内容采用了一种鲜明的色彩设计，并配合简洁的布 局规划，突出了信息的集中性。下面将介绍在Photoshop软 件中设计首页版面效果的步骤。
5.3.1设计主内容区域
任何一项设计都需要事先进行规划、取材、构思等步骤，然后 在将这些资源进行加工、整合，创造出符合实际需求的效果 。同样，网页设计也不例外，在进行具体设计之前需要收集 相关的素材，然后再进行版面规划、元素设计等操作。下面 介绍设计“长盛”网站的具体操作步骤。
接着上一小节的步骤，插入1行1列，宽为100%、高为34像素 的表格，并在【属性】面板上设置其背景图像为“menu-bg。 jpg”。
设置单元格的【垂直】对齐格式为“底部对齐”，并在该单元 格内插入一个宽为778像素的表格，设置其居中显示，此表 格的作用是为了更好地控制菜单栏的显示位置。
首先使网页居中显示，然后再规划出头部区域Banner区域、内 容区域和尾部区域的大致位置。
设计主导航栏。使用【矩形选框工具】 按照参考线的位置框 选范围。
单击[渐变工具]，并在【渐变编辑器】对话框中设置渐变色。
按住【Shift】键不放，在选框范围内由上至下填充线性渐变。
在渐变色上方输入导航文字（字体：黑体，字号：11点）和分隔 符（颜色：#A4A99A）。然后再插入网站logo、搜索框和文字 等内容。
5.5.1认识模板
在浏览一个网站时，发现同一网站上很多网页的基本样式都是 相同的。比如页面背景、文字样式、导航条、版权信息等。 既然这样，那么就可以将这些不变的元素都做成一个文件， 这个文件就是“模板”。然后再通过模板来创建子页。
该网站中的头部区域、尾部区域、背景样式都是相同的。所以 可以把这些相同部分的内容做成一个模板，再利用模板来创 建子页。这样不但可以节省大量网页制作时间，也便于网站 的管理。
与页面头部区域的风格相呼应，绘制矩形选框后填充线性渐变 色。
在渐变色上方插入版权等相关信息。至此，首页的版面已设计 完毕。
5.3.3切割网页图像
设计完网页版面后，即可进行切割的工作，以便将图像切割成 不同大小的切片。经过这样的处理可以让图像在网络传输中 有更快的速度，以减少浏览者等待的时间。本例对网页模板 的切割效果。关于图像切割的方法，请参考前面章节的介绍 ，在此就不再赘述了。
打开Dreamweaver软件，执行【站点】|【新建站点】命令， 建立一个名为“home”的站点，然后将之前制作好的文件拷 贝到该站点下。
新建一个HTML文档后，按【Ctrl+J】打开【页面属性】面板， 设置页面的【外观】属性和【标题/编码】属性。
插入一个1行2列，宽为758、高为38像素的表格，并在【属性 】面板上设置其相关属性。
选中“产品与服务”图片，在【属性】面板上为其设置空链接“#” 。这样是为了当鼠标指针移到菜单上时可以显示手型。
使用快捷键【Shift+F4】打开【行为】面板，单击按钮选择【 显示弹出式菜单】命令。
单击【内容】选项，在【文本】文本框中输入菜单名称（家电
产品、影音产品、数码项目），然后单击按钮进行添加。如
在上一步制作的表格内插入一个2行1列，宽为758像素的表格 ，设置第一个单元格的高为“8”像素，使接下来要插入的 Banner图片与导航条有一段分隔距离。
在第二个单元格内插入图片“Banner.jpg”。
插入一个1行3列，宽为758、高为113像素到的表格，并设置 其【对齐】方式为“居中对齐”，【背景图像】为“menubg1.jpg”。然后在3个单元格内分别插入图片“product.jpg” 、“he.jpg”、“about.jpg”。
再插入一个1行2列，宽为758像素的表格，设置其背景颜色为 白色，然后分别在两个单元格插入图“link5.jpg”、 和 “link4.jpg”。
至此，主要内容区域已制作完毕，按【F12】键在浏览器中预 览其效果。
5.4.5制作尾部区域
最后将制作尾部区域的内容，该实例的尾部区域放置的是版权 信息、联系我们、法律声明的链接图片和友情链接的内容， 风格上也与头部区域首尾呼应，具体制作方法如下。
在【属性】面板上设置第一个单元格【宽】为“241”像素，并插 入logo图片“logo。jpg”。
在第二个单元格内插入一个1行5列的表格，并设置 其属性， 然后在各个单元格内插入相应的内容。
5.4.2制作导航条
导航条的作用是让用户能够很轻松地找到自己所需的信息，设 置的各个栏目是将整个网站的内容进行明确的分类，给用户 一种指引性。
5.2.2 布局分析
依据导航的排列位置，该网站属于顶部导航的页面分割的复合 结构页面布局，复合结构的优点在于使内容信息量大、菜单 结构复杂的网站结构变得更加合理，这也是常用的页面布局 类型。因为该网站设置有主栏目下拉菜单以及Banner条下方 的“产品与服务”“商务合作”“关于常盛”的二级导航。另外，如 前面章节中介绍到的，位于顶部导航对下方内容区域造成的 影响是最小的，便于调整网站导航和内容区域的比重。该网 站的顶部导航宽度设置的是100%，与浏览器的宽度相同， 设计得非常简洁，下方的内容区域显得更加丰富、精彩
模板实质上就是创建其他文档的基础文档。在创建模板时，可 以设置固定不变的网页元素应该长期保留、不可编辑，需要 更新的元素可以编辑修改。以本章实例而言，创建模板时就 可以把头部区域。尾部区域、背景设置为锁定区（不可编辑 区），把Banner区域和内容区域设置为可编辑区。
在内容区域的结构上可以很明显地看出“色彩块”：Banner区域 、“产品与服务”等导航区域、企业动态区域、尾部区域，各 个区域的风格设计都成矩形，结构层次非常清晰明了。尾部 区域的色彩与顶部的背景相呼应，使页面具有整体性。
5.3使用Photoshop软件设计版 面效果
该网站的版面给人一种大气、自由奔放、色彩绚丽的感觉，在 设计上并无特别复杂的技巧，而是保持简单的信念，大胆而 自由地运用色彩、造型，按照策划思路精心编排即可设计出 不错的效果。
插入一个1行3列的表格，设置其背景颜色为白色。 在第一个单元格内插入一个4行1列，宽为80%的表格，设置其
居中显示；然后再设置各个单元格的高为“24”像素、背景图 像为“LINE.jpg”。 在4个单元格内分别插入相应的图片，以同样的方式继续制作 第2、第3个单元格的内容。 插入一个2行1列的表格，设置第一个单元格的高度为“8”像素 作为分隔间隔；将第二个单元格拆分为3列，并设置一、二 两个单元格的【垂直】对齐方式为“顶端”。
与上一步骤制作的白框相隔4像素，再绘制一个白框到参考线位置 ，并插入“长盛企业动态”和“最新媒体报道”的相关文字和专题图 片。
5.3.2设计尾部区域
尾部区域放置版权、友情链接等信息，风格与头部区域一致， 起到前后呼应的效果。制作方法也比较简单，绘制矩形选框 填充渐变色，然后再插入相关信息即可，具体操作步骤如下。
单击【位置】选项卡，设置菜单显示Fra bibliotek触发图片的下方。
设置完毕后，单击【确定】按钮，【行为】面板的显示状态。在 【文档】窗口中并没有看到刚刚设置好的菜单格式，需要在浏 览器中才能看到效果。按【F12】键预览。使用同样的方法， 可以为其他栏目设置下拉菜单，这里就不再赘述了。
5.4.4编排其他内容
导航条及下拉菜单制作完毕后，接下来介绍其他部分的制作方 法。依然是使用表格布局，并插入相应的图片、文字等内容 ，具体操作步骤如下。
在上一步插入的表格中再插入一个1行10列的表格，并在各个 单元格中插入相应的图片。
5.4.3制作下拉菜单
随着企业规模的扩大，产品的不断增加，网站的内容也变得非 常之多。笼统单一的菜单栏目设置已经无法满足网站的需求 ，所以需要以增设下拉菜单的形式来细分大栏目的内容。下 面介绍使用【行为】面板制作下拉菜单的具体操作步骤。
在第一个单元格内插入3行1列，宽为90%的表格，设置其居中 显示；然后在各个单元格内插入相应的图片和文字，以同样 的方法，在第二个单元格内插入内容。
在第3个单元格内插入一个5行1列，宽为216像素的表格，设置 其居中显示，并分别在第1、第3、第5个单元格内插入专题 图片“link1.jpg”、 “link2.jpg”、 “link3.jpg”。
插入一个1行1列，宽为100%的表格，并在【属性】面板上设 置其相关属性。为制作方便，这里表格高度可以先随意设定 ，因为最终的表格高度会自动适应表格内容的高度。然后在 【代码】视窗内的该表格<table>标签内输入背景图片横向 重复的代码：style=”BACKGROUND-REPEAT:repeat-x;”
第5章家电家居网站ppt课件
5.1 背景概念
家电家居类网站主要是介绍和展示家电、家居等人们比较关注 的信息和事物的网络平台，因此在设计风格上一般要求贴近 生活，以更好地体现产品的价值。家电家居类网站除了发布 家电家居行业的动态、供求等信息，还发布自己企业的产品， 包括推广和展销产品的功能、亮点等，让用户可以方便、及 时地了解产品动态。
切割网页图像后，即可执行【文件】|【存储为Web所用格式】 命令，将版面存储成HTML页面文件。同样，为了让图像在 保存成网页时能够保持最佳的显示效果，在保存网页前需要 对切片进行优化处理。
优化切片后，就可以讲网页版面存储成网页文件。在保存时必 须将保存类型设置为“HTML和图像”才可以将图像和HTML页 面一并保存下来。
果有制作好的二级页面，可以在【链接】
文本框中
设置链接地址。
单击【外观】选项卡，在下拉列表框中选择【垂直菜单】，选择 图标设置文本框居中显示，设置当鼠标指针移到菜单上时的单 元格颜色为“#A5A99A”。
单击【高级】选项卡，设置单元格的宽度为“100”像素，选中【显 示边框】复选框并设置【边框颜色】为“#777777”。
将光标置入第二个单元格中，在【表格】工具栏中选择【跳 转菜单】图标插入跳转菜单。
弹出【插入跳转菜单】对话框，在【文本】文本框中输入菜 单名称，在【选择时，转到URL】文本框中输入要转到的 页面地址，然后单击按钮进行添加，然后单击【确定】按 钮。
选择跳转菜单，在【初始化时选定】文本框选择“请选择…”选 项为初始化。若要编辑跳转菜单的内容，可单击列表值按 钮进行编辑。
至此，整个首页已制作完毕，按【F12】键预览最终效果。
5.5利用模板制作网页
在Dreamweaver中，模板是一个非常有用的工具，它可以帮助 用户快速制作出效果类似的网页，而且也利于以后的编辑修 改。
模板实际上也是文档，它的扩展名为.dwt，并存放在根目录的 模板文件夹Templates中。模板文件夹并不是从来就有的， 它只是在创建模板的时候才自动生成的。
5.4将效果图制作成HTML页面
完成版面以及其他相关素材的处理后，接下来就可以使用 Dreamweaver软件编辑网页了。网页布局可以对照 Photoshop软件中切割后存储的Web页面进行编排制作， 然后再利【行为】面板制作下拉菜单等效果。
5.4.1定义站点与表格布局
在制作网站过程为了能够顺利地插入、编排、调试等操作，首 先需要为网站建立本地站点，给网站制作过程提供一个良好 的制作环境，然后再进行页面属性设置、利用表格排版等操 作，具体操作步骤如下。
按照参考线设置的位置绘制选框，填充线性渐变色。
将背景色填充为灰色（颜色值#EBEBEB）。
按照参考线设置的位置，插入758*178像素的Banner图片。
设计特别导航栏。在Banner图下方绘制矩形选框，并填充渐变色 ；然后在图形上方再插入相关图标和文字。
在各个标题下方插入子链接内容。绘制矩形选框填充白色，然后 再插入文字和虚线。
插入一个1行1列，宽为758像素的表格，设置单元格的高度为 “5”像素，作为与上部分的分隔间隙。
插入一个1行2列，宽为758、高为55像素的表格，设置第一个 单元格的宽度为“550”像素，设置第二个单元格的宽度为 “207”像素，【垂直】对齐方式为“底部”。
在第一个单元格内插入一个2行1列，宽为526像素的表格，设 置其居中显示，并在各个单元格内插入相应的图 片和文字内 容。
网站的主体内容采用了一种鲜明的色彩设计，并配合简洁的布 局规划，突出了信息的集中性。下面将介绍在Photoshop软 件中设计首页版面效果的步骤。
5.3.1设计主内容区域
任何一项设计都需要事先进行规划、取材、构思等步骤，然后 在将这些资源进行加工、整合，创造出符合实际需求的效果 。同样，网页设计也不例外，在进行具体设计之前需要收集 相关的素材，然后再进行版面规划、元素设计等操作。下面 介绍设计“长盛”网站的具体操作步骤。