Dreamweaver CS6实例教程(第3版)课件.ppt

本章简介： 本章的综合设计实训案例，是根据网页设计项目真实情境来训练学生如何利用所学知识完成网页设计项目。通过多个网页设计项目案例的演练，使学生进一步牢固掌握Dreamweaver CS6的强大操作功能和使用技巧，并应用好所学技能制作出专业的网页设计作品。,第13章综合设计实训,课堂学习目标,掌握表格布局的应用方法和技巧掌握CSS样式命令的使用方法掌握表单的创建方法和应用掌握动画文件和图像文件的插入方法和应用掌握超链接的方法和创建,案列类别,个人网页购物网页休闲网页房产网页汽车网页,13.1 个人网页李明的摄影网页,项目背景及要求项目创意及制作,项目背景及要求,1客户名称 李明 2客户需求 李明是一名专业的摄影师，为了使更多的人认识和了解他以及分享其摄影成果，需要制作一个个人网站，网站内容包括个人资料、个人作品、摄影日志等，内容全面，具有独特的个性和个人特色。3设计要求 （1）网页风格要求具有艺术与时尚感。 （2）设计要求具有张扬的设计，等够凸显个性。 （3）网页设计分类明确，注重细节的修饰。 （4）使用蓝绿黑三色进行搭配，并且摄影图片进行装饰。 （5）设计规格均为775px（宽） 670px（高）。,项目创意及制作,使用“表格”按钮，插入表格；使用“图像”按钮，插入图像；使用“CSS样式”命令，调整文字的颜色、大小和行距。,效果图,13.2购物网页百货商场网,项目背景及要求项目创意及制作,项目背景及要求,1客户名称 百货商城网 2客户需求 百货商城网是一家网购专业平台，是中国电子商务领域较受消费者欢迎和较具影响力的电子商务网站之一。为了更好为广大消费者服务，需要重新设计网页页面，网页的设计要求符合百货商城网的定位，能够更加吸引消费者。3设计要求 （1）网页设计的背景使用白色，能够更好地突出产品。 （2）网页的页面分类明确细致，便于用户浏览搜索。 （3）网页的内容丰富，画面热闹，使用粉色进行装饰。 （4）整体设计更偏重于迎合女性消费者的喜好。 （5）设计规格均为1000px（宽） 1412px（高）。,项目创意及制作,使用“表单”按钮，插入表单；使用“表格”按钮，插入表格；使用“图像”按钮，插入图像；使用“代码”命令，调整图片的属性；使用“CSS样式”命令，调整文字的颜色、大小和行距。,效果图,13.3休闲网页旅游度假网页,项目背景及要求项目创意及制作,项目背景及要求,1客户名称 旅游网 2客户需求 旅游网是专门面向旅游市场及宣传，向广大旅游朋友提供旅游相关信息资讯、产品等信息的旅游网站，旅游网站为了扩大知名度，特需重新对网页进行设计，网页设计要紧紧围绕网站主题，表现旅游的魅力与乐趣。3设计要求 （1）网页背景要求使用美丽的海边摄影照片，视野宽广。 （2）网页多使用清新干净的色彩搭配，为画面增添自然之感。 （3）图文搭配合理舒适，将主要内容放置在主要位置，达到宣传效果。 （4）导航栏的设计要直观简洁，方便浏览。 （5）设计规格均为1000px（宽） 770px（高）。,项目创意及制作,使用“表格”按钮，插入表格；使用“图像”按钮，插入图像；使用“CSS样式”命令，调整文字的颜色、大小、行距和为表格添加背景图像。,效果图,13.4房产网页新焦点房产网页,项目背景及要求项目创意及制作,项目背景及要求,1客户名称 新焦点房地产有限责任公司 2客户需求 新焦点房产是一家经营房地产开发、物业管理、城市商品住宅、商品房销售等全方位的房地产公司。公司为迎合市场需求，扩大知名度，需要制作网站，网站设计要求厚重沉稳，并且设计精美，体现企业的高端品质。3设计要求 （1）设计风格要求高端大气，制作精良。 （2）要求网页设计使用深绿色的背景，深沉的色彩表现出画面质感。 （3）网站设计围绕房产的特色进行设计搭配，分类明确细致。 （4）整体风格沉稳大气，表现出企业的文化内涵。 （5）设计规格均为1000px（宽） 842px（高）。,项目创意及制作,使用“页面属性”命令，调整页面的样式；使用“表格”按钮，插入表格；使用“图像”按钮，插入图像；使用“CSS样式”命令，调整文字的颜色、大小、行距和为表格添加背景图像。,效果图,13.5汽车网页TSHFA汽车网页,项目背景及要求项目创意及制作,项目背景及要求,1客户名称 TSHFA汽车 2客户需求 TSHFA汽车是一家产品覆盖乘用车、商用车、微型车等领域的国内自主品牌，目前已成为国内颇具名气的汽车品牌，公司目前需要对其网站进行更新设计，设计要求表现汽车品牌的品质，展现TSHFA汽车的魅力。3设计要求 （1）网页设计多体现汽车品牌相关元素，突出网页的宣传重点。 （2）网页页面干净清爽，避免图文编排太过紧密。 （3）网页的背景使用汽车的效果图，衬托主要信息，使画面具有层次感。 （4）导航栏设计清晰直观，使用户浏览方便快捷。 （5）设计规格均为980px（宽） 855px（高） 。,项目创意及制作,使用“页面属性”命令，调整页面的属性；使用“表格”按钮，插入表格；使用“SWF”按钮，插入Flash动画；使用“CSS样式”命令，制作导航条效果和调整文字的颜色、大小、行距；使用“超链接”命令，创建超链接。,效果图,13.6课堂练习1设计时尚购物网页,项目背景及要求项目创意及制作,项目背景及要求,1客户名称 时尚SSCL女性时尚媒体 2客户需求 时尚SSCL是一家社区型女性时尚媒体，网站提供应季最新单品，各种风格的服饰搭配信息，并提供时尚、美容问答服务。致力于为女性用户提供最美丽的时尚购物体验。目前网站需要进行改版，要求针对网站的女性受众群体设计一款时尚、独特的网站。3设计要求 （1）网页设计要求使用深色的背景，体现神秘魅惑的女性魅力。 （2）网页画面分为休闲之旅与时尚购物两个板块，要求设计独特，搭配合理。 （3）网页设计紧紧围绕网站主题，将女性、时尚、服饰等元素在页面上充分表现。 （4）网页能够运用插画元素，导航栏设计简单直观。 （5）设计规格均为1003px（宽） 1028px（高） 。,项目创意及制作,使用“表格”按钮，插入表格；使用“图像”按钮，插入图像；使用“超链接”命令，为文字添加超链接效果，使用“外部样式”命令，调整文字的大小、颜色、行距、超链接的显示和导航条效果。,13.7课堂练习2设计书法艺术网站,项目背景及要求项目创意及制作,项目背景及要求,1客户名称 中国书法网站 2客户需求 中国书法网站是刚刚成立的专业的书法学习交流网站，内容包括书法学术理论、名家书法作品欣赏、公益书法培训、名家书法讲座等，是书法爱好者首选书法网站。需要为其设计制作网站，设计要求符合书法的内涵，具有中国传统文化气息。3设计要求 （1）网页设计使用中国书法字画为背景，表现主题，使人一目了然。 （2）网页分类明确，画面整齐干净。 （3）网页设计注重细节的处理，能够在画面多处体现书法元素。 （4）设计规格均为996px（宽） 941px（高） 。,项目创意及制作,使用“表格”按钮，插入表格；使用“图像”按钮，插入图像；使用“超链接”命令，为文字添加超链接效果，使用“CSS样式”命令，调整文字的大小、颜色和行距等。,13.8课后习题1设计淘宝小屋网页,项目背景及要求项目创意及制作,项目背景及要求,1客户名称 快乐淘宝小屋购物网站 2客户需求 快乐淘宝小屋购物网站是较受消费者欢迎的购物网站之一，网站经营范围广泛，信誉度高，网站致力于打造时尚新潮的网络购物品牌。在新春到来之际，网站推出商品五折优惠活动，以此吸引消费者前来购物，要求根据本次活动设计网站页面。3设计要求 （1）网页设计要求清新自然，画面干净清爽。 （2）网页画面背景以白色为主，能够衬托产品。 （3）网页设计色彩搭配丰富，画面亮丽，具有青春时尚之感。 （4）网页设计主题信息明确，使用户能够快速直接的接收到折扣信息。 （5）设计规格均为980px（宽） 1172px（高）。,项目创意及制作,使用“页面属性”面板，修改页面属性；使用“表格”按钮，插入表格；使用“图像”按钮，插入图像；使用“CSS样式”命令，调整文字的大小、颜色、行距和单元格背景效果等。,13.9课后习题2设计电子商城网站,项目背景及要求项目创意及制作,项目背景及要求,1客户名称 第比电子商城 2客户需求 第比电子商城是一家覆盖传统家电、3C电器、日用百货等品类的电子销售平台。网站以销售电子类产品为主，目前网站需要更新其网站，需要重新设计网站页面，设计要求体现网站特色。3设计要求 （1）网页设计要求具有调理，整齐的页面能够体现网站的专业性和品质。 （2）网页画面背景使用红白的色彩搭配，使画面干净舒适。 （3）网页设计突出主题，分类明确细致，体现网站服务特色。 （4）设计规格均为993px（宽） 1208px（高,项目创意及制作,使用“页面属性”面板，设置页面的背景色；使用“表格”按钮，插入表格；使用“图像”按钮，插入图像；使用“鼠标经过图像”按钮，制作导航条效果；使用“表单”命令，制作会员注册表效果；使用“CSS样式”命令，调整文字的大小、颜色和行距；使用“代码”视图，修改图片属性。,