1、本章简介：本章的综合设计实训案例，是根据网页设计项目真实情境来训练学生如何利用所学知识完成网页设计项目。通过多个网页设计项目案例的演练，使学生进一步牢固掌握Dreamweaver CS6的强大操作功能和使用技巧，并应用好所学技能制作出专业的网页设计作品。第13章综合设计实训课堂学习目标u 掌握表格布局的应用方法和技巧u 掌握CSS样式命令的使用方法u 掌握表单的创建方法和应用u 掌握动画文件和图像文件的插入方法和应用u 掌握超链接的方法和创建案列类别u 个人网页u 休闲网页u 旅游网页u 房产网页u 游戏网页 13.1 个人网页张发的摄影网页u 项目背景及要求u 项目创意及制作 项目背景及要求
2、 1客户名称 张发 2客户需求 张发是一位旅游爱好者，喜欢收录旅游资源、旅行游记、当地美食、地方特产等方面的信息，现张发想与大家共同分享他的收获和记录，想要为此发一篇博文。本例即为张发设计博文首页，要求画面简单干净功能齐全。3设计要求 （1）网页风格要求表现出旅游博客的特点。（2）根据博客类型，网页要求多使用淡色，体现出旅游带来的轻松愉悦的感受。（3）网页设计分类明确，注重细节的修饰。（4）要符合旅游爱好者阳光向上、乐观开朗的特点。（5）设计规格为1400像素（宽）1258像素（高）。项目创意及制作使用“页面属性”命令，设置页面背景、边距和标题效果；使用“表格”按钮，插入表格进行页面布局；使用
3、“CSS样式”命令，美化页面效果。效果图13.2休闲网页瑜伽休闲网页u 项目背景及要求u 项目创意及制作 项目背景及要求 1客户名称 时尚瑜伽馆 2客户需求 时尚瑜伽馆是一家设施齐全、教学项目全面、并且配有专业的教练进行指导教学，瑜伽馆氛围良好，能够得到很好的身心锻炼，目前瑜伽馆为扩大其知名度，需要制作瑜伽馆网站，网页设计要求能够达到宣传效果。3设计要求 （1）网站设计风格具有瑜伽的特色。（2）网站的色彩使用紫色进行设计，能让人感到宁静舒适。（3）淡雅的风格能够突出主题，达到宣传目的。（4）整体画面搭配合理，具有创新。（5）设计规格为1400像素（宽）1535像素（高）。项目创意及制作 使用“
4、页面属性”命令，改变页面字体、大小、颜色、背景图像和页边距效果；使用“CSS样式”面板，制作单元格背景、文字颜色和行距效果；使用“属性”面板，改变单元格的高度和宽度。效果图13.3旅游网页旅游度假网页u 项目背景及要求u 项目创意及制作 项目背景及要求 1客户名称 旅游度假村 2客户需求 旅游度假村是一家专业的提供旅游信息的平台。有官方旅游网站，侧重旅游市场及宣传，向广大旅游朋友提供旅游相关信息资讯、产品等信息。现新建设旅游网，通过发布各种相关旅游信息，旅游线路供游客选择，不仅为旅客提供了服务，而且也推广了自己，让更多旅客了解自己。3设计要求 （1）网站设计风格具有旅游特色。（2）网站的色彩使
5、用浅色调进行设计，能让人感到宁静舒适。（3）淡雅的风格能够突出主题，达到宣传目的。（4）整体画面搭配合理，具有创新。（5）设计规格为1400像素（宽）1970像素（高）。项目创意及制作 使用“页面属性”命令，设置页面字体、大小、颜色、边距和页面标题；使用“图像”按钮，插入装饰图像；使用“属性”面板，改变单元格的高度、宽度、对齐方式及背景颜色；使用“CSS样式”命令，制作单元格背景图像、文字的颜色、大小及行距的显示效果。效果图13.4房产网页焦点房产网页u 项目背景及要求u 项目创意及制作 项目背景及要求 1客户名称 焦点房产网 2客户需求 焦点房产网为广大网友提供最焦点的房产资讯、新建楼盘、家
6、居装饰、二手房信息、产业新区等房产信息及相关论坛，还设有移动客户端便于查询，是房地产媒体及业内外网友公认的专业网站和焦点房产信息库。现网站要进行改版，要求设计体现出网站独有的特色。3设计要求 （1）以城市楼盘背景作为主体，在点明主题的同时，增加的说服力。（2）不规则的画面设计，更能吸引人们的视线，达到宣传的目的。（3）色彩搭配更能图片相呼应，增强画面的统一感。（4）整体设计充满了律动感，让人印象深刻。（5）设计规格为1400像素（宽）1156像素（高）。项目创意及制作 使用“鼠标经过图像”按钮，制作导航效果；使用“属性”面板，设置单元格高度和对齐方式；使用“CSS样式”面板，设置单元格的背景图
7、像和文字大小颜色及行距。效果图13.5游戏网页锋芒游戏网页u 项目背景及要求u 项目创意及制作 项目背景及要求 1客户名称 锋芒游戏公司 2客户需求 锋芒游戏公司是一家新成立的互动娱乐软件公司，主要经营各种电子游戏的开发、出版以及销售业务。目前需要制作公司网站，为前期的宣传做准备，该网页主要内容为公司研发的几款小游戏，要求能够表现公司的特点，达到宣传效果。3设计要求 （1）网页的风格具有可爱清新的风格特色。（2）画面使用卡通的图案进行搭配，体现小游戏的趣味与放松。（3）色彩搭配清爽干净，让人感到舒适。（4）使用卡通图案装饰画面，具有童趣。（5）设计规格为1600像素（宽）1510像素（高）。项
8、目创意及制作 使用“页面属性”命令，修改页面的页边距和页面标题；使用“属性”面板，设置单元格宽度、高度及背景颜色，使用“CSS样式”命令，设置文字的大小、字体及行距的显示效果。效果图13.6课堂练习1设计书法艺术网页u 项目背景及要求u 项目创意及制作 项目背景及要求 1客户名称 青竹书法网 2客户需求 青竹书法网以书法资讯、书家机构推介、作品展示及交易和业内交流为主要服务项目的书法综合性网站。为了扩大网站的知名度，网站需要重新设计，设计要求表现书法特色，使人一目了然。3设计要求 （1）网页设计要体现中国书法文化的元素，增强网页的文化氛围。（2）网页页面要大气，信息排列合理恰当。（3）网页的背
9、景颜色使用沉稳的颜色衬托主要信息。（4）将传统文化在网页的设计上全面体现。（5）设计规格为1003像素（宽）923像素（高）。项目创意及制作 使用使用“页面属性页面属性”面板，更改页面属性；使用面板，更改页面属性；使用“CSSCSS样式样式”命令，设置文命令，设置文字的颜色和大小；使用字的颜色和大小；使用“行为行为”命令，制作弹出信息效果。命令，制作弹出信息效果。13.7课堂练习2设计电影在线网页u 项目背景及要求u 项目创意及制作 项目背景及要求 1客户名称 在线电影网 2客户需求 在线电影网是一家涵盖最新电影、好看电影、经典电影、电影推荐、免费电影、高清电影在线观看及海量最新电影图文视频的
10、网站。目前特推出全新的网站首页，网站内容主要是电影的最新动态，网站要求紧凑直观、丰富多样。3设计要求 （1）网页设计要求围绕网站特色，电影元素在网页上充分体现。（2）网页的页面布局合理，便于用户浏览搜索。（3）网页的主题颜色以深色为主，增强画面质感，突出内容。（4）设计紧凑直观，独特新颖。（5）设计规格为1600像素（宽）2198像素（高）。项目创意及制作 使用“表格”按钮，插入表格布局网页；使用“属性”面板，设置单元格的大小及背景颜色；使用“CSS样式”命令，设置图片与文字的对齐方式；使用“CSS样式”命令，控制文字的大小、颜色及行距的显示。13.8课后习题1设计篮球运动网页u 项目背景及要
11、求u 项目创意及制作 项目背景及要求 1客户名称 VBFE篮球网站 2客户需求 VBFE是一家著名的网络公司，公司目前想要推出一个以篮球为主要内容的网站，以报道篮球相关最新资讯、篮球赛事转播、以及相关产品销售为一体的专业网站，网站内容明确，以篮球为主，设计要抓住重点，明确主题。3设计要求 （1）网页风格以篮球运动的活力激情为主。（2）设计要时尚、简洁、大方，体现网站的质感。（3）网页图文搭配合理，符合大众审美。（4）色彩搭配使用红色，体现篮球运动的热情与活力。（5）设计规格为986像素（宽）1005像素（高）。项目创意及制作 使用“页面属性”命令，设置页面的字号大小、背景颜色和边距；使用“表格
12、”按钮，插入表格；使用“图像”按钮，插入图像；使用“代码”命令，制作滚动条效果；使用“日期”按钮，插入日期时间；使用“CSS样式”面板，设置文字的大小和颜色。13.9课后习题2设计电子商城网站u 项目背景及要求u 项目创意及制作 项目背景及要求 1客户名称 第比电子商城 2客户需求 第比电子商城是一家覆盖传统家电、3C电器、日用百货等品类的电子销售平台。网站以销售电子类产品为主，目前网站需要更新其网站，需要重新设计网站页面，设计要求体现网站特色。3设计要求 （1）网页设计要求具有调理，整齐的页面能够体现网站的专业性和品质。（2）网页画面背景使用红白的色彩搭配，使画面干净舒适。（3）网页设计突出主题，分类明确细致，体现网站服务特色。（4）设计规格均为993px（宽）1208px（高 项目创意及制作 使用“页面属性”面板，设置页面的背景色；使用“表格”按钮，插入表格；使用“图像”按钮，插入图像；使用“鼠标经过图像”按钮，制作导航条效果；使用“表单”命令，制作会员注册表效果；使用“CSS样式”命令，调整文字的大小、颜色和行距；使用“代码”视图，修改图片属性。
