Dreamweaver-CS6-第13章综合设计实训课件.pptx

1、Dreamweaver-CS6-第13章综合设计实训课件课堂学习目标u 掌握表格布局的应用方法和技巧u 掌握CSS样式命令的使用方法u 掌握表单的创建方法和应用u 掌握动画文件和图像文件的插入方法和应用u 掌握超链接的方法和创建案列类别u 个人网页u 休闲网页u 旅游网页u 房产网页u 游戏网页 13.1 个人网页张发的摄影网页u 项目背景及要求u 项目创意及制作 项目背景及要求 1客户名称 张发 2客户需求 张发是一位旅游爱好者，喜欢收录旅游资源、旅行游记、当地美食、地方特产等方面的信息，现张发想与大家共同分享他的收获和记录，想要为此发一篇博文。本例即为张发设计博文首页，要求画面简单干净功能

2、齐全。3设计要求 （1）网页风格要求表现出旅游博客的特点。（2）根据博客类型，网页要求多使用淡色，体现出旅游带来的轻松愉悦的感受。（3）网页设计分类明确，注重细节的修饰。（4）要符合旅游爱好者阳光向上、乐观开朗的特点。（5）设计规格为1400像素（宽）1258像素（高）。项目创意及制作使用“页面属性”命令，设置页面背景、边距和标题效果；使用“表格”按钮，插入表格进行页面布局；使用“CSS样式”命令，美化页面效果。效果图13.2休闲网页瑜伽休闲网页u 项目背景及要求u 项目创意及制作 项目背景及要求 1客户名称 时尚瑜伽馆 2客户需求 时尚瑜伽馆是一家设施齐全、教学项目全面、并且配有专业的教练进

3、行指导教学，瑜伽馆氛围良好，能够得到很好的身心锻炼，目前瑜伽馆为扩大其知名度，需要制作瑜伽馆网站，网页设计要求能够达到宣传效果。3设计要求 （1）网站设计风格具有瑜伽的特色。（2）网站的色彩使用紫色进行设计，能让人感到宁静舒适。（3）淡雅的风格能够突出主题，达到宣传目的。（4）整体画面搭配合理，具有创新。（5）设计规格为1400像素（宽）1535像素（高）。项目创意及制作 使用“页面属性”命令，改变页面字体、大小、颜色、背景图像和页边距效果；使用“CSS样式”面板，制作单元格背景、文字颜色和行距效果；使用“属性”面板，改变单元格的高度和宽度。效果图13.3旅游网页旅游度假网页u 项目背景及要求

4、u 项目创意及制作 项目背景及要求 1客户名称 旅游度假村 2客户需求 旅游度假村是一家专业的提供旅游信息的平台。有官方旅游网站，侧重旅游市场及宣传，向广大旅游朋友提供旅游相关信息资讯、产品等信息。现新建设旅游网，通过发布各种相关旅游信息，旅游线路供游客选择，不仅为旅客提供了服务，而且也推广了自己，让更多旅客了解自己。3设计要求 （1）网站设计风格具有旅游特色。（2）网站的色彩使用浅色调进行设计，能让人感到宁静舒适。（3）淡雅的风格能够突出主题，达到宣传目的。（4）整体画面搭配合理，具有创新。（5）设计规格为1400像素（宽）1970像素（高）。项目创意及制作 使用“页面属性”命令，设置页面字

5、体、大小、颜色、边距和页面标题；使用“图像”按钮，插入装饰图像；使用“属性”面板，改变单元格的高度、宽度、对齐方式及背景颜色；使用“CSS样式”命令，制作单元格背景图像、文字的颜色、大小及行距的显示效果。效果图13.4房产网页焦点房产网页u 项目背景及要求u 项目创意及制作 项目背景及要求 1客户名称 焦点房产网 2客户需求 焦点房产网为广大网友提供最焦点的房产资讯、新建楼盘、家居装饰、二手房信息、产业新区等房产信息及相关论坛，还设有移动客户端便于查询，是房地产媒体及业内外网友公认的专业网站和焦点房产信息库。现网站要进行改版，要求设计体现出网站独有的特色。3设计要求 （1）以城市楼盘背景作为主

6、体，在点明主题的同时，增加的说服力。（2）不规则的画面设计，更能吸引人们的视线，达到宣传的目的。（3）色彩搭配更能图片相呼应，增强画面的统一感。（4）整体设计充满了律动感，让人印象深刻。（5）设计规格为1400像素（宽）1156像素（高）。项目创意及制作 使用“鼠标经过图像”按钮，制作导航效果；使用“属性”面板，设置单元格高度和对齐方式；使用“CSS样式”面板，设置单元格的背景图像和文字大小颜色及行距。效果图13.5游戏网页锋芒游戏网页u 项目背景及要求u 项目创意及制作 项目背景及要求 1客户名称 锋芒游戏公司 2客户需求 锋芒游戏公司是一家新成立的互动娱乐软件公司，主要经营各种电子游戏的开

7、发、出版以及销售业务。目前需要制作公司网站，为前期的宣传做准备，该网页主要内容为公司研发的几款小游戏，要求能够表现公司的特点，达到宣传效果。3设计要求 （1）网页的风格具有可爱清新的风格特色。（2）画面使用卡通的图案进行搭配，体现小游戏的趣味与放松。（3）色彩搭配清爽干净，让人感到舒适。（4）使用卡通图案装饰画面，具有童趣。（5）设计规格为1600像素（宽）1510像素（高）。项目创意及制作 使用“页面属性”命令，修改页面的页边距和页面标题；使用“属性”面板，设置单元格宽度、高度及背景颜色，使用“CSS样式”命令，设置文字的大小、字体及行距的显示效果。效果图13.6课堂练习1设计书法艺术网页u

8、 项目背景及要求u 项目创意及制作 项目背景及要求 1客户名称 青竹书法网 2客户需求 青竹书法网以书法资讯、书家机构推介、作品展示及交易和业内交流为主要服务项目的书法综合性网站。为了扩大网站的知名度，网站需要重新设计，设计要求表现书法特色，使人一目了然。3设计要求 （1）网页设计要体现中国书法文化的元素，增强网页的文化氛围。（2）网页页面要大气，信息排列合理恰当。（3）网页的背景颜色使用沉稳的颜色衬托主要信息。（4）将传统文化在网页的设计上全面体现。（5）设计规格为1003像素（宽）923像素（高）。项目创意及制作 使用使用“页面属性页面属性”面板，更改页面属性；使用面板，更改页面属性；使用

9、“CSSCSS样式样式”命令，设置文命令，设置文字的颜色和大小；使用字的颜色和大小；使用“行为行为”命令，制作弹出信息效果。命令，制作弹出信息效果。13.7课堂练习2设计电影在线网页u 项目背景及要求u 项目创意及制作 项目背景及要求 1客户名称 在线电影网 2客户需求 在线电影网是一家涵盖最新电影、好看电影、经典电影、电影推荐、免费电影、高清电影在线观看及海量最新电影图文视频的网站。目前特推出全新的网站首页，网站内容主要是电影的最新动态，网站要求紧凑直观、丰富多样。3设计要求 （1）网页设计要求围绕网站特色，电影元素在网页上充分体现。（2）网页的页面布局合理，便于用户浏览搜索。（3）网页的主

10、题颜色以深色为主，增强画面质感，突出内容。（4）设计紧凑直观，独特新颖。（5）设计规格为1600像素（宽）2198像素（高）。项目创意及制作 使用“表格”按钮，插入表格布局网页；使用“属性”面板，设置单元格的大小及背景颜色；使用“CSS样式”命令，设置图片与文字的对齐方式；使用“CSS样式”命令，控制文字的大小、颜色及行距的显示。13.8课后习题1设计篮球运动网页u 项目背景及要求u 项目创意及制作 项目背景及要求 1客户名称 VBFE篮球网站 2客户需求 VBFE是一家著名的网络公司，公司目前想要推出一个以篮球为主要内容的网站，以报道篮球相关最新资讯、篮球赛事转播、以及相关产品销售为一体的专

11、业网站，网站内容明确，以篮球为主，设计要抓住重点，明确主题。3设计要求 （1）网页风格以篮球运动的活力激情为主。（2）设计要时尚、简洁、大方，体现网站的质感。（3）网页图文搭配合理，符合大众审美。（4）色彩搭配使用红色，体现篮球运动的热情与活力。（5）设计规格为986像素（宽）1005像素（高）。项目创意及制作 使用“页面属性”命令，设置页面的字号大小、背景颜色和边距；使用“表格”按钮，插入表格；使用“图像”按钮，插入图像；使用“代码”命令，制作滚动条效果；使用“日期”按钮，插入日期时间；使用“CSS样式”面板，设置文字的大小和颜色。13.9课后习题2设计电子商城网站u 项目背景及要求u 项目

12、创意及制作 项目背景及要求 1客户名称 第比电子商城 2客户需求 第比电子商城是一家覆盖传统家电、3C电器、日用百货等品类的电子销售平台。网站以销售电子类产品为主，目前网站需要更新其网站，需要重新设计网站页面，设计要求体现网站特色。3设计要求 （1）网页设计要求具有调理，整齐的页面能够体现网站的专业性和品质。（2）网页画面背景使用红白的色彩搭配，使画面干净舒适。（3）网页设计突出主题，分类明确细致，体现网站服务特色。（4）设计规格均为993px（宽）1208px（高 项目创意及制作 使用“页面属性”面板，设置页面的背景色；使用“表格”按钮，插入表格；使用“图像”按钮，插入图像；使用“鼠标经过图像”按钮，制作导航条效果；使用“表单”命令，制作会员注册表效果；使用“CSS样式”命令，调整文字的大小、颜色和行距；使用“代码”视图，修改图片属性。