ppt网页布局图片下载

这是ppt网页布局图片，包括了WEB站点建立的基本步骤，网站整体风格和创意设计，网站的目录结构和链接结构，版面布局与首页搭配，使用布局视图、框架、表格等进行页面布局，网站建设实例讲解等内容，欢迎点击下载。

ppt网页布局图片是由红软PPT免费下载网推荐的一款课件PPT类型的PowerPoint.

第六章 网站总体设计与网页布局 规划网站、组织网站 主要内容 1、WEB站点建立的基本步骤 2、网站整体风格和创意设计 3、网站的目录结构和链接结构 4、版面布局与首页搭配 5、使用布局视图、框架、表格等进行页面布局。 6、网站建设实例讲解 1、WEB站点建立的基本步骤 1）网站建设前的准备工作 2）创建站点的导航结构 3）收集整理相关资料 4）组织文档和数据，进行具体的网站建设 5）测试站点 6）申请域名和主页空间 7）上传站点资料 1）网站建设前的准备工作 确定网站的主题； 计划要发布的内容； 一般个人主页可以根据自己的爱好或一些热门的话题来选择网站的主题。 如普及医疗卫生知识， 提供文学艺术信息， 学习计算机技术， 向世人推销自己等等。 2）创建站点的导航结构 建设网站的整体框架设计。 注意在站点的基本结构中，页面之间的链接关系要清晰，同时要兼顾以后的可扩充性，以备网站的修改与发展。 3）收集整理相关资料 包括：网站徽标、背景图片、按钮图片以及网站需要展示的内容。 有能力者可以自己编制网站建设所需的内容， 也可以通过各种渠道搜集相关资料，注意在引用他人的资料和文章时，应征得对方的同意，并注明作者和出处。 4）组织文档和数据，进行具体的网站建设 在制作网页之前应设计出网页的页面结构，即需要设计几个栏目和版块。 大多数网站都是以表格来布局网页，也可以用框架同表格结合来完成。 一般制作的第一个网页应该是首页，首页是整个网站精华的汇集。 对于网页制作者来说，首页是最难也是最花工夫的。 为制作风格一致的网站，还需要创建模版等。 5）测试站点 制作出的网站可以先在本地进行测试，检查站点的浏览器兼容性以及可能存在的错误链接等。 6）申请域名和主页空间 域名分为国际域名和国内域名。 请登录申请域名，根据你的资金实力和网站的重要性做出选择： 大型企业，资金雄厚，可以向邮电局申请专线服务。需要建立自己的机房，配备服务器、路由器、网络管理软件及网络管理人员。 中小企业，信息量和数据量都不是很大，可采用虚拟主机托管方案，即租用要建设网站。 如果你的企业信息量和数据量较大，可采用服务器托管方案，将已经制作好的服务器主机放到ISP的网络中心机房。 如果是个人网站，资金又很有限，如果是个人网站，资金又很有限，可以到一些公司申请他们的域名+主机。（ CNNIC CN域名认证注册服务机构 ，中资源、中国万网等） 7）上传站点资料  利用专门的上传软件对网页进行上传，如：CuteFTP就是一款很好的网页上传软件，方便、灵活。 如果你的企业信息量和数据量较大，可采用服务器托管方案，将已经制作好的服务器主机放到ISP的网络中心机房。 2、网站整体风格和创意设计 1）树立网站的风格 2）进行创意设计 1）树立网站的风格 风格指站点的整体形象给浏览者的综合感受 整体形象主要包括： 站点的CI（标志，色彩，字体，标语）， 版面布局， 浏览方式， 交互性， 文字，语气，内容价值，存在意义，站点荣誉等等 1）树立网站的风格 如何树立站点的风格 网站的内容要有价值 网站的配色要合理，并且合乎内容需求 网站要具有一定的个性：活泼、诚恳、奔放…… 与其他站点相比，要有自己的特色或不一样的地方 1）树立网站的风格 建立和加强风格印象 1.将标志logo尽可能的出现在每个页面上。在页眉，页脚或背景。 2.突出标准色彩。文字的链接色彩，图片的主色彩，背景色，边框等色彩尽量使用与标准色彩一致的色彩。 3.突出标准字体。在关键的标题，菜单，图片里使用统一的标准字体。 4.想一条朗朗上口宣传标语。把它做在banner里，或放在醒目的位置 5.使用统一的语气和人称。 6.使用统一的图片处理效果。比如，阴影效果的方向，厚度，模糊度都必须一样。 7.创造一个特有的符号或图标。比如在一句链接前的一个点，可以使用，.。☆※○◇□△→等等。 8.用自己设计的花边，线条，点 9.展示你网站的荣誉和成功作品。 2）进行创意设计 创意是指站点的整体创意，(因为这个创意而产生这个站点，或者相同的内容，推出的创意不同) 创意思考的过程分五阶段 1.准备期--研究所搜集的资料，根据旧经验，启发新创意； 2.孵化期--将资料咀嚼消化，使意识自由发展，任意结合； 3.启示期--意识发展并结合，产生创意； 4.验证期--将产生的创意讨论修正； 5.形成期--设计制作网页，将创意具体化。 2）进行创意设计 创意思考的途径最常用的是联想，这里提供了网站创意的25种联想线索： 1.把它颠倒 2.把它缩小 3.把颜色换一下 4.使它更长 5.使它闪动 6.把它放进音乐里 7.结合文字音乐图画 8.使它成为年轻的 9.使它重复 10.使它变成立体 11.参加竞赛 12.参加打赌 13.变更一部分 14.分裂它 15.使它罗曼蒂克 16.使它速度加快 17.增加香味 18.使它看起来流行 19.使它对称 20.将它向儿童诉求 21.价格更低 22.给它起个绰号 23.把它打包 24.免费提供 25.以上各项延伸组合　　 -------------(转载自樊志育《广告制作》) 3、网站的目录结构和链接结构 1）网站的目录结构 2）网站的链接结构 1）网站的目录结构 网站的目录是指你建立网站时创建的目录 目录的结构是一个容易忽略的问题，大多数站长都是未经规划，随意创建子目录。 目录结构的好坏，对浏览者来说并没有什么太大的感觉，但是对于站点本身的上传维护，内容未来的扩充和移植有着重要的影响。 1）网站的目录结构 建立目录结构的一些建议: 不要将所有文件都存放在根目录下，否则会造成： 文件管理混乱 上传速度慢 按栏目内容建立子目录 子目录的建立，首先按主菜单栏目建立 其他的次要栏目，需要经常更新的可以建立独立的子目录。不太更新的可合并放在一个目录下。 所有的程序一般都存放在特定目录下。 在每个主目录下都建立独立的images（图片）目录 目录的层次不要太深，不要超过3层。 1）网站的目录结构 其他注意事项: 1.不要使用中文目录。使用中文目录可能对网址的正确显示造成困难。 2.不要使用过长的目录。尽管服务器支持长文件名，但是太长的目录名不便于记忆。 3.尽量使用意义明确的目录。例如可以用Flash，Dhtml，Javascript来建立目录，也可以用1，2，3建立目录，但明显前者更明确，更便于记忆和管理。 2）网站的链接结构 网站的网站的链接结构是指页面之间相互链接的拓扑结构。它建立在目录结构基础之上，但可以跨越目录。 形象的说：每个页面都是一个固定点，链接则是在两个固定点之间的连线。一个点可以和一个点连接，也可以和多个点连接。 用最少的链接，使得浏览最有效率 。 2）网站的链接结构 建立网站的链接结构有两种基本方式 ： 1.树状链接结构(一对一)。 首页链接指向一级页面，一级页面链接指向二级页面。这样的链接结构浏览时，一级级进入，一级级退出。 优点是条理清晰，访问者明确知道自己在什么位置，不会“迷”路。 缺点是浏览效率低，一个栏目下的子页面到另一个栏目下的子页面，必须绕经首页。 2.星状链接结构(一对多)。 类似网络服务器的链接，每个页面相互之间都建立有链接。 这种链接结构的优点是浏览方便，随时可以到达自己喜欢的页面。 缺点是链接太多，容易使浏览者迷路，搞不清自己在什么位置，看了多少内容。 2）网站的链接结构 在实际的网站设计中，总是将这两种结构混合起来使用； 浏览者既可以方便快速的达到自己需要的页面，又可以清晰的知道自己的位置，解决办法是 ：首页和一级页面之间用星状链接结构，一级和二级页面之间用树状链接结构。 2）网站的链接结构 注意:以上我们都是用的三级页面举例。若站点内容庞大，分类明细，需要超过三级页面，则建议在页面里显示导航条，可以帮助浏览者明确自己所处的位置。 即为经常看到许多网站页面顶部的，类似这样:“您现在的位置是:首页->财经新闻->股市信息->深圳股->深发展” 4、版面布局与首页搭配 1）设计要求 整洁大方：各种元素的运用应适度 突出重点：突出主体内容 平衡对称：页面的上下左右应给人以任意匀称的感觉 风格一致：样式统一，配色合理 5、使用布局视图、框架、表格等进行页面布局。 1）使用表格进行布局 2）使用框架进行布局 3）使用图层进行布局 4）使用布局视图进行页面布局 布局模式 绘制布局表格和布局单元格 编辑布局表格和布局单元格 使用网格 内容添加，制作主页 6、网站建设实例讲解 （1）栏目设置 （2）颜色设计 （3）整体布局设计 （4）头部设计 （5）导航条和背景图像制作 （6）制作“主广告区”、“信息分类”区与页脚 （7）创建样式 （8）添加导航栏信息与分类信息 （9）添加页脚及公告栏、标语栏信息 （10）制作首页 （11）其他页面链接制作 （12）添加网站链接 实例讲解－ （1）栏目设置 根据网站的主题来确定网站的栏目 例如以建立一个教育站点（如Internet与网页设计站点）为例： 分析： 既有组织类站点的功能 又有信息类站点的功能 栏目设置为： 课程大纲——介绍课程的学习大纲，自学大纲 课程内容——课程的具体内容，提供对应的PPT下载 资料素材——分类提供相关学习资料、建站素材 课程练习——提供各章节的对应练习题 课程互动——提问与解答 娱乐放松——提供娱乐链接 实例讲解－ （2）颜色设计 可采用配色软件来完成——一般主色少于四种颜色 人对色彩的联想： 红色：热情、震撼、高贵、力量来源、刺激、上进 灰色：压抑、暧昧、内向、失望、消极 蓝色：清凉、哀伤、沉稳、深远、开朗 黄色：高贵、富有、灿烂、活泼 黑色：严肃、夜晚、沉着 白色：纯洁、简单、洁净 绿色：植物、生命、生机 紫色：浪漫、富贵 棕色：大地、厚朴  实例讲解－ （2）颜色设计 设计用色实例 1、这是一个娱乐类的综合性网站UGO，他的配色方案是： 背景色为黑色RGB为（0，0，0）中嵌套RGB（0，0，82）， 字体白色RGB（255，255，255）， 菜单为RGB（77，114，159）。 虽以黑蓝为主色调，但是配以漂亮的图片，给人的感觉是生机盎然，充满了互动色彩和青春气息。 实例讲解－ （2）颜色设计 设计用色实例 2、下面的这个网站是的微软公司网站 ： 背景颜色使用蓝色RGB为（0，151，254）， 菜单为黑色RGB（0，0，11）， 菜单为灰色RGB（200，200，200）， 字体为黑色RGB（0，0，0） 。 实例讲解－ （2）颜色设计 设计用色实例 3、下面的网站Smirnoff采用红黑色调为主，很体现公司的个性： 他使用的主色调是RGB（200，9，0），配以抽象的图形， 文字使用的是RGB（213，229，167） 实例讲解－ （2）颜色设计 设计用色实例 5、一般网页颜色的搭配不要超过四种主要颜色，否则就有杂乱之感。下面的这个网站远远的超过了四种颜色，但是她并不失美丽。因此重要的还是色彩的驾驭能力。 实例讲解－ （3）整体布局设计 1、可先思考网站的整体布局格式； 2、而后通过DreamWeaver新建一个站点。准备设计网页。 实例讲解－ （3）整体布局设计 3、绘制布局——头部绘制（注：仅在设计状态下使用） （1）工具条－布局－布局模式－使用布局表格进行绘制。 在属性面板中设置表格宽：756pt；高：105pt 右键单击表格－对齐－居中对齐 （2）设置用于放置头部信息的单元格 选择“绘制布局单元格”按钮进行布局，拖动时注意左右边缘部分与表格之间留空隙。宽：730pt，高：105pt （可查看对应代码，在说明标记内写上对应说明） 实例讲解－ （3）整体布局设计 3、绘制布局——导航条绘制 （1）工具条－布局－布局模式－使用布局表格进行绘制。 在属性面板中设置表格宽：756pt；高：45pt 右键单击表格－对齐－居中对齐 （2）设置用于放置导航栏的布局单元格 选择“绘制布局单元格”按钮进行布局 一次左右绘制两个布局单元格，宽度可在以后的制作中据要求进行调节。 统样的方式在代码中为导航栏设置注释标记。 实例讲解－ （3）整体布局设计 3、绘制布局——“课程介绍” 采用同上的方式绘制“课程介绍”区域。宽756，高190（可据实际高度设定），居中。 绘制单元格，宽180，高190，用于放置“信息提示”板块 在右上方绘制单元格，宽550，高19，用于放置课程介绍的标题 剩下的即为绘制“课程介绍”板块。 接着写上说明。 实例讲解－ （3）整体布局设计 3、绘制布局——“主信息区”板块 （1）绘制布局表格：宽756，高564 （2）在刚才的布局表格内再绘制布局表格，宽180，高564 （3）绘制布局单元格：——主信息区板块中“信息分类”区 使用CTRL键：连续绘制多个单元格 使用ALT键：禁止表格靠齐 点击绘制单元格按钮后，再按住CTRL键可不断绘制单元格。 （4）绘制主信息区板块中的主信息区 用布局单元格绘制信息标语栏：宽550，高19 用布局表格绘制标语栏下方的主信息区： 实例讲解－ （3）整体布局设计 3、绘制布局——页脚 （1）绘制布局表格：宽756，高75，居中对齐 绘制730×15的布局单元格 再绘制730×43的布局单元格 再绘制730×16的布局单元格 实例讲解－ （3）整体布局设计 4、头部设计 （1）可以通过PhotoShop或FireWork制作头部的图片 （2）或者从网上寻找素材。 实例讲解－ （3）整体布局设计 5、导航条和背景图像制作 使用Fireworks制作 6、制作“课程介绍区”、“信息分类”区与页脚 使用Fireworks制作 页脚直接设置背景颜色 7、创建样式 body:方框－上边界：0 td：字号12px .biaoti：字号12px .yanse：文字为白色 .liebiao：下边框为实线，1px，黑色，其余无边框 实例讲解－ （3）整体布局设计 8、添加导航栏信息与分类信息 课程大纲 课程内容 资料素材 课程练习 课程互动 娱乐放松 9、添加页脚及公告栏、标语栏信息 公告栏、标语栏内填入滚动信息 页脚填入版权声明 实例讲解－ （3）整体布局设计 10、制作首页 以前面制作的网页为模板可以制作其他网页 用布局表格分割在主信息区，以放置信息 用布局表格绘制550w*160h的表格； 再用布局表格将上面的布局表格分成均等的左右两个区域 再用布局单元格绘制其中的布局表格，结合alt与ctrl键绘制 实例讲解－ （3）整体布局设计 11、其他页面链接制作 12、添加网站链接zl6红软基地

用表格为网页布局ppt：这是用表格为网页布局ppt，包括了创建表格，创建嵌套表格，创建布局表格，创建Spry框架，在表格中插入网页元素，设置表格属性，编辑表格，调整表格大小，课堂练习：圆角相框，课堂练习：可隐藏的说明书等内容，欢迎点击下载。