项目三页面布局设计
网店开设项目三理论复习测试
项目三理论复习测试姓名________________________ 班级________________________一、单选题1．多见于经营玉器、茶叶、纯银饰品中国风服装等的店铺。
如采用泼墨等国画手法体现古典淡雅,给页面赋予很强的文化内涵的是（）店铺风格。
[单选题] *A.简约风格B.古典/民族风C.潮牌风D.日/韩系风2.店铺模板的备份中，系统可保留最近（）次的模板。
[单选题] *A. 2B. 3C.4D.53.经营女装、饰品等商品的网店装修选择（）风格比较合适。
[单选题] *A.简约风格B.古典/民族风C.潮牌风D.日/韩系风4.在店铺页面的配色中，所占的比重最少，一般用于强调、吸引眼球作用的是（）。
[单选题] *A.主色B.副色C.点缀色D.都可以5.在店铺页面的配色中，主色所占的比例不合理的是（） [单选题] *A. 49%B.60%C.70%D.80%6.淘宝店铺常用布局装修模块不包括（） [单选题] *A.音乐模块B.自定义模块C.友情链接模块D.宝贝推荐模块7.首页布局中页尾部分可以添加（）。
[单选题] *A.FLASH模块B.店招模块C.宝贝推荐模块D.自定义模块8.店铺上唯一在各个页面都能展示出现的模块是（） [单选题] *A.店标B. 店招C.店铺公告栏D.类目标签9.在淘宝旺铺专业版店铺首页布局管理中，店铺页中部分最多可添加（）个布局单元。
[单选题] *A.3B. 4C.5D.610.在淘宝旺铺专业版店铺首页框架中，店铺页头只能添加（）装修模块。
[单选题] *A.图片轮播B. 自定义区C.店招D.宝贝搜索11. 设计效果最为丰富的装修模块是（）。
[单选题] *A.特价专区模块B.宝贝推荐模块C.自定义区模块D.图片轮播模块12.页面布局中顶部为横幅区，是店铺标志+店招广告条，接下来页面分为左、右两个部分，左侧为分类导航等信息，右侧为活动或产品推荐，这种首页布局形式是（）。
店铺页面策划书模板3篇
店铺页面策划书模板3篇篇一《店铺页面策划书模板》一、项目概述1. 店铺名称：[店铺名称]2. 店铺定位：[店铺定位，如高端时尚、亲民实惠等]3. 目标受众：[目标受众群体，如年龄、性别、兴趣爱好等]4. 项目背景：[简要介绍店铺的背景和发展目标]二、页面布局1. 首页：顶部导航栏：包括店铺 logo、首页、商品分类、购物车、我的账户等。
轮播图：展示店铺的主打产品或促销活动。
产品分类：清晰列出店铺的产品分类，方便用户浏览。
热门产品推荐：展示店铺的热门产品，吸引用户购买。
新品上市：展示店铺的新品，增加用户的新鲜感。
客户评价：展示用户对店铺产品的评价，增加用户的信任感。
底部导航栏：包括关于我们、联系我们、隐私政策等。
2. 商品详情页：产品图片：展示产品的多角度图片，让用户更好地了解产品。
产品描述：详细介绍产品的特点、功能、材质等信息。
价格：显示产品的价格和促销信息。
规格参数：列出产品的规格参数，如尺寸、颜色、重量等。
用户评价：展示用户对该产品的评价，增加用户的信任感。
购买按钮：方便用户购买产品。
3. 购物车页面：购物车列表：展示用户已添加到购物车的产品信息，包括产品图片、名称、数量、价格等。
总价：显示购物车中所有产品的总价。
优惠券：用户可以输入优惠券代码，享受优惠。
结算按钮：方便用户结算购物车中的产品。
4. 我的账户页面：个人信息：展示用户的个人信息，如姓名、地址、电话等。
订单记录：展示用户的订单记录，包括订单号、订单状态、下单时间等。
收藏夹：展示用户收藏的产品。
优惠券：展示用户拥有的优惠券。
修改密码：用户可以修改自己的密码。
三、页面设计1. 整体风格：根据店铺的定位和目标受众，确定页面的整体风格，如简约、时尚、复古等。
2. 色彩搭配：选择适合店铺风格的色彩搭配，如高端时尚店铺可以选择黑白灰等经典配色，亲民实惠店铺可以选择明亮活泼的色彩。
3. 字体选择：选择易读性高的字体，确保用户能够清晰地阅读页面内容。
网页布局方案
网页布局方案第1篇网页布局方案一、项目背景随着互联网技术的不断发展和普及，网页作为信息传播的重要载体，其界面布局的合理性、美观性和用户体验成为越来越受到重视的环节。
为满足客户需求，提高用户访问体验，确保网页信息的有效传达，特制定本网页布局方案。
二、目标定位1. 确保网页界面整体风格统一，符合品牌形象；2. 优化网页布局，提高用户体验，降低用户访问跳出率；3. 提高网页加载速度，满足不同设备访问需求；4. 合理安排内容布局，提升网页信息传达效果。
三、布局原则1. 简洁明了：界面设计简洁，易于用户理解和操作；2. 层次清晰：内容布局层次分明，便于用户快速找到所需信息；3. 一致性：整体风格、色彩搭配、字体选择等方面保持一致性；4. 灵活性：适应不同设备、分辨率和浏览器，提高兼容性；5. 响应式：根据用户行为和设备环境进行智能化布局调整。
四、具体布局方案1. 头部区域：- 标志：放置品牌标志，增强品牌形象；- 导航栏：提供全局导航，方便用户快速切换到其他页面；- 搜索框：便于用户快速查找内容。
2. banner区域：- 轮播图：展示重要信息、广告或活动，吸引用户关注；- 简洁明了，突出主题。
3. 内容区域：- 主体内容：根据用户需求，合理安排信息展示顺序，突出重点；- 侧边栏：提供辅助信息、推荐阅读等内容，提高用户粘性；- 分页：合理划分内容，提高加载速度。
4. 底部区域：- 版权信息：注明版权所有，增强法律意识；- 导航链接：提供网站地图、友情链接等，方便用户浏览；- 联系方式：提供联系方式，便于用户咨询和反馈。
五、实施步骤1. 需求分析：深入了解客户需求，明确项目目标；2. 设计草图：根据需求，绘制初步布局草图；3. 设计稿制作：根据草图，制作详细设计稿；4. 前端开发：遵循W3C标准，进行HTML、CSS和JavaScript编写；5. 测试与优化：在不同设备和浏览器上测试，优化布局效果；6. 上线部署：确认无误后，进行上线部署；7. 持续优化：根据用户反馈，持续优化网页布局。
页面设计方案
页面设计方案随着互联网的普及和发展，页面设计的重要性越来越凸显出来。
一个好的页面设计方案不仅可以提升用户体验，还能增加网站的可用性和吸引力。
本文将从页面布局、颜色搭配和交互设计等方面，探讨一个完善的页面设计方案。
一、页面布局页面布局是一个页面设计的基础，合理的页面布局可以使信息结构清晰、有序。
在页面布局中，需要考虑以下几个方面：1.1 导航栏的设计导航栏是一个网站的重要组成部分，它负责引导用户浏览网站的不同页面。
一个好的导航栏设计应该简洁明了，让用户一目了然地找到自己想要的功能或页面。
可以将导航栏固定在页面的顶部或侧边，使用户在任何时候都可以方便地进行导航。
1.2 内容展示区域的设计在页面布局中，内容展示区域是承载网站主要信息的地方。
在设计内容展示区域时，可以采用分栏布局或瀑布流布局。
分栏布局可以使信息分类清晰，同时也方便用户的浏览。
而瀑布流布局则可以增加页面的动感和吸引力，适合展示图片或多媒体内容。
二、颜色搭配颜色搭配是页面设计中一个重要的方面，不同的颜色可以传递出不同的情绪和氛围。
在选择颜色搭配时，可以参考以下几点：2.1 与品牌形象的一致性如果有品牌形象的要求，页面设计的颜色搭配应与品牌形象保持一致。
这样可以增加用户的辨识度，并加强品牌的形象感。
2.2 注意色彩的对比度在页面设计中，色彩的对比度可以提升页面的可读性和易用性。
可以使用相对明亮的颜色来突出重要的信息，让用户更容易注意到。
2.3 避免颜色的过度使用在页面设计中，过多的颜色使用不仅容易让用户感到混乱，还可能影响页面的可视性。
因此，应该避免使用过多的颜色，保持页面简洁清爽。
三、交互设计交互设计是页面设计中至关重要的一环，它直接关系到用户的操作和体验。
在交互设计中，需要注意以下几个方面：3.1 易用性一个好的交互设计应该能够使用户的操作更加轻松和顺畅。
可以采用一些常见的交互模式，如下拉菜单、按钮等，让用户能够直观地进行操作。
3.2 响应速度在页面设计中，页面的响应速度是用户体验的重要因素之一。
项目三：旅游电子商务网站建设(教案)[8页]
![项目三：旅游电子商务网站建设(教案)[8页]](https://img.taocdn.com/s3/m/95f49bece87101f69f319599.png)
2.导航栏：导航栏是在规划网站结构、开始设计网站主页时必须考虑的一项内容。一般情况下，导航栏放置在网页中较为醒目的位置，通常在网页的顶部或一侧。导航栏既可以是文本链接，也可以是图片链接。
二、旅游电子商务网站的定位分析
1.确定目标受众群体
旅游电子商务网站不可能满足所有在线旅游者的需求，需要结合旅游企业自身的特点和产品业务，精准锁定目标客源群体，深入了解目标受众群体的需求，规划并设计符合目标群体的旅游电子商务网站，为其提供所需的旅游产品或服掌握竞争对手的相关情况，这是进行旅游电子商务规划不可或缺的部分。包括：找到网上的直接及潜在的竞争对手、了解竞争对手旅游电商网站的战略、了解竞争对手网站设计的整体架构。
2.首页的版面设计
在首页功能模块确定后，开始设计首页的版面内容。版面设计的主要方法是：先将网站首页的构思图通过纸质草图的样式画出来，再绘制效果图；然后选择Frontpage、Weebly或Dreamweaver等网页制作工具，按照草图和效果图来逐步完成网站首页的设计。
3.技术细节的处理
在技术细节的处理上，需要注意以下几方面的内容。第一，绘制草案。新建的页面就像一张白纸，没有任何表格、框架及约定俗成的规范；第二，粗略布局。在草案形成的基础上，开始斟酌各项功能及内容的呈现位置，使其在页面上布局更合理；第三，最终定案。将粗略布局精细化、具体化，并经美工绘制成效果图。
以四人为一个小组的吗？还是通过各大旅游App、旅游微信公众号及微信小程序完成旅游产品的购买？
2.在移动互联网如此普及的今天，旅游企业有没有必要建设旅游电子商务网站？为什么？
《项目一任务三制作电子手账》作业设计方案-初中劳动技术浙教版七年级上册
《制作电子手账》作业设计方案（第一课时）一、作业目标本节课的作业设计旨在使学生掌握电子手账的基本概念与制作流程，能够初步使用软件工具进行手账的布局设计、素材添加及简单编辑，为后续深入学习打下基础。
二、作业内容作业内容分为以下几个部分：1. 理论学习：学生需认真阅读关于电子手账的介绍资料，了解电子手账的概念、特点及制作软件的基本操作界面。
2. 软件熟悉：学生需在教师的指导下，熟悉电子手账制作软件的操作界面，掌握基本工具的使用方法，如画笔、橡皮擦、填充工具等。
3. 素材收集：学生需自行收集喜欢的图片、贴纸、文字素材等，用于手账的装饰与排版。
4. 布局设计：学生需运用所学的软件操作知识，设计电子手账的页面布局，包括标题、分区及整体风格等。
5. 素材应用：学生将收集的素材合理应用到手账页面中，进行排版与装饰，使手账美观且实用。
三、作业要求1. 每位学生需独立完成一份电子手账作品，不得抄袭他人作品。
2. 作品需符合中学生审美标准，内容积极向上，不得含有不良信息。
3. 素材应用需合理，不得过度使用或滥用，保持页面整洁。
4. 作品需在规定时间内提交，并注明作品名称及个人姓名。
5. 教师将对学生的作品进行点评，优秀作品将在班级展示。
四、作业评价作业评价将从以下几个方面进行：1. 操作熟练度：评价学生软件操作是否熟练，是否能够快速完成基本操作。
2. 创意性：评价学生作品是否有创意，是否能够体现出个人风格。
3. 素材应用：评价学生素材应用是否合理，是否能够使手账美观且实用。
4. 作品完整性：评价学生作品是否完整，是否符合中学生审美标准。
五、作业反馈1. 教师将对每位学生的作品进行详细点评，指出优点与不足。
2. 对于优秀作品，将在班级进行展示，并给予表扬与鼓励。
3. 对于存在问题的作品，教师将提供改进建议，帮助学生完善作品。
4. 作业反馈将作为学生后续学习的重要参考，帮助学生不断提高电子手账制作水平。
通过以上作业设计旨在通过实际操作与理论学习相结合的方式，帮助学生全面掌握电子手账的制作技巧，提高学生的动手能力和审美水平。
三级页面的设计标准
三级页面的设计标准一、导言三级页面是网站设计中非常重要的一环，它是用户在网站内部的一个子页面，是用户获取更详细信息的地方。
本文将从页面结构、内容布局、交互设计等方面，对三级页面的设计标准进行详细阐述，以期为网站设计提供一些参考和指导。
二、页面结构设计1. 三级页面的布局三级页面的布局应该清晰明了，主要分为页眉、主体内容和页脚三部分。
页眉一般包括网站Logo、导航栏和搜索框等，用来方便用户快速找到所需信息。
主体内容是三级页面的重点，应该根据内容的重要性和紧迫性进行展示。
页脚一般包括网站的版权信息、联系方式、友情链接等，用来提供更多的信息和服务。
2. 内容分类三级页面的内容应该根据不同的需求进行分类，以便用户快速找到所需信息。
一般可以根据产品类型、服务项目、行业分类等进行内容的划分。
同时，也需要考虑到内容的相关性和连贯性，确保用户在浏览过程中不会感到困惑。
三、内容布局设计1. 信息展示在三级页面的内容展示中，应该遵循重点突出、重要性在前的原则。
根据内容的重要性和紧迫性，进行排列和展示，突出重点，提高用户的阅读和浏览效率。
同时，也需要遵循视觉艺术和排版原则，保持页面的整体美感和和谐性。
2. 图片和文字搭配在三级页面的内容布局中，需要合理搭配图片和文字。
图片可以用来展示产品或服务的外观和特点，增强页面的吸引力和互动性。
文字要简洁明了，通俗易懂，突出关键信息，让用户一目了然。
四、交互设计1. 导航设计在三级页面的导航设计中，应该突出页面的关键模块和功能，提供清晰明了的导航路径，让用户能够快速找到所需信息。
同时，也需要考虑页面的层级关系，确保用户在浏览过程中不会迷失方向。
2. 表单设计在三级页面中可能会涉及到用户填写表单的情况，这是需要注意表单的设计。
要确保表单的简洁明了、易于填写，用户填写完整后可以清晰地提交信息。
同时，还需要考虑表单的布局和排版，确保用户操作的便捷性和流畅性。
五、页面性能1. 页面加载速度在三级页面的设计中，需要注意页面的加载速度。
如何进行网站页面设计和布局
如何进行网站页面设计和布局今天我们来谈一下网站页面设计和布局。
在互联网时代，网站已经成为企业与用户交流的重要渠道。
好的网站页面设计和布局不仅能够提高用户体验，还能帮助企业提高品牌形象和销量。
一、页面设计的原则1.界面简洁明了一个清新简洁的网站页面能让用户更好地了解信息，减少冗余信息。
在设计时，可以适当运用配色原理，使网站页面的颜色搭配和谐，让用户的视觉体验更加舒适。
2.内容易于理解网站的设计不仅需要注重美感，更需要注重内容的呈现。
页面上的文字、图像、视频等要尽可能地表达更多的信息，让用户更好地理解你所要表达的内容。
3.布局合理对于网站页面而言，合理的布局同样重要，不仅要考虑到整体性和内容性，也要考虑到用户的视觉习惯和操作习惯。
设计时可以运用格局原理，将有相同主题的图像、文字等放到一起，使页面更加整齐美观。
4.交互友好现在的网站越来越强调用户体验，所以网站设计中的交互体验也越来越受重视。
可以通过适当的动画效果、呈现方式等方式，让用户更好地参与到网站的使用当中，从而提升用户的满意度。
二、页面设计的技巧1.色彩的搭配让网站更加清晰、美观，运用色彩搭配原理成为不可少的一部分。
色彩搭配要注意统一性，不要随意使用让人眼花缭乱的颜色，会影响网站的美观度。
色彩的选择也需要考虑到用户体验和企业品牌的定位。
2.字体的选择和排版选择一个适合的字体是很重要的，字体的大小、颜色都会直接影响用户的体验。
在排版上，除了注重字体的大小和颜色，还要注重行距、间距、段落缩进的设置，这些都能直接影响到网站的观感和易读性。
3.多媒体的运用多媒体素材在现代网页设计中已经越来越广泛应用。
图片、视频、音频对于网站内容的呈现能更好的达到宣传效果。
然而应用的多媒体素材也要注意与网站内容的协调性以及音、图、视的质量，否则会影响用户的体验感。
4.布局的设计整个网站设计的布局要适当的分块，每个块的内容之间要有一定比例和间隔，不要让网站显得杂乱无章。
然而不同的内容版块之间也要有明显的分界线，保证用户阅读时能够清晰地分辨出各个版块之间的内容。
页面布局的几种方式（静态化布局，流式布局，自适应布局，响应式布局，弹性布局）
页⾯布局的⼏种⽅式（静态化布局，流式布局，⾃适应布局，响应式布局，弹性布局）⼀、静态布局（static layout） 即传统Web设计，⽹页上的所有元素的尺⼨⼀律使⽤px作为单位。
1、布局特点 不管浏览器尺⼨具体是多少，⽹页布局始终按照最初写代码时的布局来显⽰。
常规的pc的⽹站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果⼩于这个宽度就会出现滚动条，如果⼤于这个宽度则内容居中外加背景，这种设计常见于pc端。
2、设计⽅法 PC：居中布局，所有样式使⽤绝对宽度/⾼度(px)，设计⼀个Layout，在屏幕宽⾼有调整时，使⽤横向和竖向的滚动条来查阅被遮掩部分； 移动设备：另外建⽴移动⽹站，单独设计⼀个布局，使⽤不同的域名如wap.或m.根据浏览器⽤户代理，识别移动端，并重定向。
pc端⾃适应设计详情参考优点：这种布局⽅式对设计师和CSS编写者来说都是最简单的，亦没有兼容性问题。
缺点：显⽽易见，即不能根据⽤户的屏幕尺⼨做出不同的表现。
当前，⼤部分门户⽹站、⼤部分企业的PC宣传站点都采⽤了这种布局⽅式。
固定像素尺⼨的⽹页是匹配固定像素尺⼨显⽰器的最简单办法。
但这种⽅法不是⼀种完全兼容未来⽹页的制作⽅法，我们需要⼀些适应未知设备的⽅法。
⼆、流式布局（Liquid Layout） 流式布局（Liquid）的特点（也叫"Fluid") 是页⾯元素的宽度按照屏幕分辨率进⾏适配调整，但整体布局不变。
代表作栅栏系统（⽹格系统）。
⽹页中主要的划分区域的尺⼨使⽤百分数（搭配min-*、max-*属性使⽤），例如，设置⽹页主体的宽度为80%，min-width为960px。
图⽚也作类似处理（width:100%, max-width⼀般设定为图⽚本⾝的尺⼨，防⽌被拉伸⽽失真）。
1. 布局特点 屏幕分辨率变化时，页⾯⾥元素的⼤⼩会变化⽽但布局不变。
【这就导致如果屏幕太⼤或者太⼩都会导致元素⽆法正常显⽰。
网页设计中的网格布局设计技巧
网页设计中的网格布局设计技巧在网页设计中，网格布局是一种重要的设计技巧，它能够帮助设计师将网页元素有条理地排列，使页面更加美观和易于阅读。
下面将介绍一些网格布局设计的技巧，希望对您有所帮助。
1. 定义网格布局：网格布局是将网页划分为等宽的列和行，以便于放置不同的元素。
使用网格布局可以使页面看起来更加整齐、规整，并且有助于用户快速找到所需内容。
2. 选择适当的网格系统：网格系统是一种用于创建网页布局的工具，它提供了一些预定义的布局模板和网格线的参考。
常见的网格系统包括Bootstrap、Foundation等。
选择适合自己项目的网格系统，在设计时可以根据网格线进行元素的定位和对齐。
3. 使用对称网格布局：对称网格布局是指网页上的列数和行数相等的布局方式。
这种布局方式常用于展示图片或产品等元素，可以使页面看起来更加均衡和整洁。
4. 采用非对称网格布局：非对称网格布局是指网页上的列数和行数不相等的布局方式。
这种布局方式可以用来突出某个元素或内容，从而吸引用户的注意力。
5. 划分主要和次要区域：在网页设计中，主要区域通常用来放置最重要的内容，如标题、主要图片等。
而次要区域可以用来展示相关内容、广告等。
通过划分主要和次要区域，可以使页面结构更加清晰，提高用户的阅读体验。
6. 考虑响应式设计：在设计网格布局时，务必考虑到不同设备和屏幕尺寸的适配。
响应式设计是指网页能够自动调整布局和元素的大小，以适应不同的屏幕尺寸。
通过使用媒体查询和弹性盒子布局等技术，可以实现网页在不同设备上的良好显示效果。
7. 注意间距和对齐：在网页设计中，间距和对齐是非常重要的。
合理的间距能够提高页面的可读性和视觉效果，而对齐可以使页面看起来更加整齐和专业。
在使用网格布局时，要注意元素之间的间距和对齐方式，避免元素之间的杂乱和混乱。
8. 考虑色彩搭配：色彩搭配是网页设计中的另一个关键因素。
使用合适的颜色可以增强页面的吸引力，并且有助于表达设计的主题和情感。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
任务二 绘制表格编辑网页布局 （1）单击插入栏的下拉按钮，展开插入栏，单击“常用”选项， 打开常用工具栏。 （2）单击“表格”按钮，创建表格。在弹出的“表格”对话框中， 设置参数如图3.1.4所示，单击“确定”按钮，关闭对话框。
第 9 页
《中小型网站建设与管理》
图3.1.3 表格布局网页第二步
第 10 页
（2）在文档工具栏的“标题”文本框中输入网页标题“第八届北京 国际电影体育周”，如图3.2.16所示。
第 33 页
《中小型网站建设与管理》
图3.2.12 框架面板
图3.2.13 设置框架属性
图3.2.14 设置框架属性
图3.2.16 设置框架集网页标题
第 34 页
《中小型网站建设与管理》
模块三 使用AP元素布局网页
（2）让表格居中对齐，在其中输入如图3.1.12所示文字，并对文字进行 编辑。 （3）在嵌套表格的第二行单元格内再插入6行1列的表格，如图3.1.13所 示，修改表格属性，设置参数如图3.1.14所示。 （4）在插入的表格中输入相应文字，效果如图3.1.15所示，将“栏目导 航”字号设为18像素，并设为斜体，在该单元格设置背景颜色为 “#F5F5F5”；设置“体育电影资讯”、“体育电影论坛”和“联系 方式”的链接分别到files/tdzx.html、files/tdlt.html和files/lxfs.html ，单击“修改”菜单栏下面的“页面属性”子菜单，在弹出的对话框 中进行“链接”分类的设置，如图3.1.16所示。 第 15 页
《中小型网站建设与管理》
图3.1.14设置表格属性
图3.1.13 创建嵌套表格
图3.1.15 表格效果
第 16 页
《中小型网站建设与管理》
（5）单击表格边框，选取表格。 （6）在属性面板中将“水平”设置为居中 对齐，垂直设置为“居中”。 （7）保存当前网页。
图3.1.16 表格效果
第 17 页
《中小型网站建设与管理》
第 18 页
《中小型网站建设与管理》
图3.1.18 设置表格属性
图3.1.19设置表格单元格属性
图3.1.20设置表格属性
第 19 页
《中小型网站建设与管理》
图3.1.21 最终效果
第 20 页
《中小型网站建设与管理》
模块二 建立框架网页
(一) 学习目标 掌握利用框架和框架集来布局网页。 (二 ) 任务分析
第 13 页
《中小型网站建设与管理》
图3.1.9 标题与版权效果
第 14 页
《中小型网站建设与管理》
任务四 制作导航栏
（1）打开上述活动中制作的index.html网页，将光标定位在第二行左侧 单元格内，在属性面板中将垂直对齐方式设为“顶端”对齐（如图 3.1.10所示）；并插入2行1列宽100%的表格，在该嵌套表格的第一 行单元格中插入一行一列表格，如图3.1.11所示。
(一) 学习目标 掌握并学会利用AP元素布局网页，学会spry构件的使用。 (二 ) 任务分析
1、为网页设置页面属性；
2、创建AP元素布局网页；
3、编辑网页内容； 4、利用spry构件编辑网页内容
第 35 页
《中小型网站建设与管理》
图3.3 .1 AP元素布局网页效果图
第 36 页
《中小型网站建设与管理》
1、创建框架网页；
2、保存框架和框架集文档；
3、制作框架网页内容； 4、设置框架属性；
第 21 页
《中小型网站建设与管理》
图3.2.1 框架布局网页效果图
第 22 页
《中小型网站建设与管理》
任务一 ：创建框架网页 本任务中通过创建框架来对网页布局。 1、在Dreamweaver CS3起始页中选择“文件>新建”命令，打开“ 新建文档”对话框。 2、在“示例中的页”选项卡中的“示例文件夹”列表框中选择“框 架集”选项，在右侧的“示例页”列表框中选择“上方固定，左侧嵌 套”框架结构，如图3.2.2所示。 3、单击“创建”按钮，打开“框架标签辅助功能属性”对话框，在 “框架”下拉列表中选择“mainframe”框架，在“标题”文本框中 输入该框架的标题，通常保持默认设置，如图3.2.3所示。 4、单击“确定”按钮关闭对话框，完成框架网页的创建。
图3.1.5合并单元格
图3.1.6 设置表格行高
第 11 页
《中小型网站建设与管理》
图3.1.7设置表格对齐方式
图3.1.8表格布局效果
第 12 页
《中小型网站建设与管理》
任务三 制作标题与版权说明
１、复制所有素材图片至站点目录的images下 ２、将鼠标定位在表格的第一行，执行“插入>图像”命令，在弹出的对 话框中选择images文件夹下的图片文件“top.gif” ３、选取插入的图片，在“属性”面板中设置居中对齐 ４、将鼠标定位在表格的第三行，插入水平线，并在“属性”面板中将 水平线设置为宽600像素，居中对齐，取消阴影，并设置颜色 ５、输入制作日期及版权说明 ６、保存网页，预览效果如图3.1.9所示
１、绘制表格编辑网页布局；
２、制作标题与版权说明； ３、制作导航栏的；
４、编辑网页表格内容；
第 5 页
《中小型网站建设与管理》
第 6 页
《中小型网站建设与管理》
任务一：建立站点并新建网页； （1）在C:\Inetpub\下建立站点目录tyweb，并使用高级标签定义站点 ，站点名为“tyweb”，如图3.1.2所示。
（2）在起始页中的“创建新项目”中单击“html”创建新网页。
（3）执行“文件”→“保存”菜单命令，将网页保存在站点根目录下， 保存文件名为iБайду номын сангаасdex.html，如图3.1.3所示。
第 7 页
《中小型网站建设与管理》
图3.1.2 建立站点第一步
第 8 页
《中小型网站建设与管理》
图3.1.3建立站点第三步
第 29 页
《中小型网站建设与管理》
图3.2.6设置页面属性
第 30 页
《中小型网站建设与管理》
图3.2.8 创建表格
图3.2.9 left.html页面属性的链接设置
第 31 页
《中小型网站建设与管理》
图3.2.10 框架网页效果图
第 32 页
《中小型网站建设与管理》
任务四 ：设置框架属性
第 25 页
《中小型网站建设与管理》
图3.2.4 保存框架（一）
第 26 页
《中小型网站建设与管理》
图3.2.5保存框架（二）
第 27 页
《中小型网站建设与管理》
任务三 ：制作框架网页内容
（1）在“top”框架中，插入图片“top.jpg”，居中对齐；并调整该框 架的高度为265px，设置top.html的页面属性，如图3.2.6所示。 （2）在“left”框架中，设置“页面属性”，修改“页面字体”为“黑 体”，“文本颜色”为“#000080”，“背景颜色”为 “#AAB3FB”，如图3.2.7所示。 （3）插入一个4行1列的表格，单元格高度设为35，并输入文字内容， 设置文字水平“居中对齐”，文字加粗、大小16px，如图3.2.8所示 ；分别对四行文字设置链接，“返回首页”链接到../index.html，目 标为_top，“资讯主页”链接到main.html，目标为mainframe，“ 体育资讯”链接到tyzx.html，目标为mainframe，“电影资讯”” 链接到dyzx.html，目标为mainframe。在该框架中进行页面属性的 链接分类设置，如图3.2.9所示。
项目三 页面布局设计
《中小型网站建设与管理》
项目简介 本项目是设计并制作一个第八届北京体育电影周网站。 该网站利用表格进行整体布局，通过表格属性的设置控制页面内 容的显示，同时还利用行、列以及单元格的操作及属性设置，使得页 面更加整洁美观；该网站采用“上中下”结构的布局形式，其中还涉 及表格的嵌套使用等。
1、选择“窗口>框架”命令，打开“框架”面板，选中框架集，如图 3.2.12所示。
2、在“属性”面板的“行”栏的“值”文本框中输入“265”，即顶 部框架高度为“265”，如图3.2.13所示。
3、在“框架”面板中选择嵌套框架集，如图所示。 4、在“属性”面板的“列”栏的“值”文本框中输入“180”，如图 3.2.15所示。 5、设置框架集的网页标题。 （1）选择要设置框架集网页标题的框架集“tdzx”。
第 2 页
《中小型网站建设与管理》
项目目标 本项目以设计一个北京体育电影周网站为例，要求结合网站布局 设计的特点，学会并掌握创建表格的方法,能够熟练编辑表格并设置 表格属性；掌握利用框架和框架集来布局网页；掌握并学会利用AP 元素布局网页；学会利用spry构件布局网页。
第 3 页
《中小型网站建设与管理》
任务一 ：为网页设置页面属性
1、在Dreamweaver CS3起始页中选择“文件>新建”命令，打开“ 新建文档”对话框。
2、在“空白页”选项卡中的“页面类型”列表框中选择“HTML”选 项，在右侧的“布局”列表框中选择“无”，如图3.3.2所示。
3、单击“创建”按钮，完成网页的创建，并保存该网页在files文件 夹中，命名为tdlt.html。 4、在“属性”面板中设置单击“页面属性”按钮，如图3.3.3所示。 5、在弹出的“页面属性”对话框中设置参数如图3.3.4所示。
第 28 页
《中小型网站建设与管理》
（4）“main.html”框架网页内容的制作。 在other文件夹中找到对应的文字素材，并进行文字的编排，保存框 架网页，选中框架集后预览，其效果如图3.2.10所示。 （5） 利用相同的方法完成其他两个“体育资讯”和“电影资讯”的 页面，如图3.2.11所示。