第8章 网页设计综合案例

• • • • • • •
2. DIV+CSS的优势 (1)符合W3C标准。 (2)对浏览者和浏览器更具亲和力。 (3)使页面载入得更快。 (4)保持视觉的一致性。 (5)修改设计时更有效率 (6)搜索引擎更加友好
• 3. DIV+CSS网站设计的缺陷 (1)对于CSS的高度依赖使得网页设计变得比较复杂。 (2)CSS文件异常将影响整个网站的正常浏览。 (3)对于CSS网站设计的浏览器兼容性问题比较突出。 (4)DIV+CSS对搜索引擎优化与否取决于网页设计的 专业水平而不是DIV+CSS本身。
三、操作题 • 1．结合网站主题，通过WHOIS程序查询意向域名 的注册状态，如确实有实际需要，请完成域名的注 册过程，并设置域名的DNS解析。 • 2．目前各类团购网站在互联网上比较流行，请分 析团购网站的运营模式，设计一种团购网运营思路 ，并撰写一份网站规则书。 • 3．试用HTML语言创建一个网页，网页中插入一 个4行1列的表格，表格的4个单元格中依次插入一 串文字，一幅图片，一个文字超链接和一条水平线 。
8.2.4 任务四：网站发布
1.使用Dreamweaver站点管理发布网站。
设置远程信息对话框图
2.使用CuteFTP发布网站
CuteFTP 5.0 XP的操作界面
8.3 开发流程
• 8.3.1 实例功能分析与设计
• 本实例是一个文具企业的主页，页面由LOGO、形象FLASH 片头和版权声明构成。开发过程主要涉及以下技术。 • （1）使用Photoshop完成首页的效果图设计 • （2）利用Photoshop切片工具将图片转换为WEB页面 • （3）使用FLASH软件制作产品形象区动画 • （4）使用DIV+CSS布局方法对整个页面进行构建 • （5）使用CuteFTP软件将完成的网页上传到服务器
8.3.2实例开发步骤
• 1.使用Photoshop完成首页的效果图设计
• 2.使用Photoshop切片工具将图片转换为WEB页面
• 3.使用FLASH软件制作产品形象区动画
产品形象动画
4.使用DIV+CSS布局方法对整个页面进行构建
(1)打开Dreamweaver CS4,新建站点。 (2)新建网页文档，存储为index.htm文件。 (3)在代码视图中编写代码（略，见书本），完成 首页的布局。
(1)分辨率 所谓的分辨率指的是单位长度中，所表达像素数目。分 辨率是数字影像课题中一个重要而基本的概念，分辨率 的高低是衡量一张图片质量好坏的标准之一。 (2)位图与矢量图 位图是由计算机屏幕上的像素点组成，具有固定的分辨 率，也就是位图按照原来的大小显示效果最好，放大或 缩小图像都会影响图像的质量。
1. Photoshop概述
Photoshop是Adobe公司推出的一款功能强大、 使用广泛的平面图像处理软件。它是众多平面设 计师进行平面设计，UI设计，图形、图像处理的 首选软件。Photoshop CS是目前流行版本，拥有 更加强大的图形图像处理功能，它可以创造出无 与伦比的影像世界，是当今世界一流的图像处理 和设计工具。
习题
• 一、思考题
• 1．规划站点需考虑哪些问题? 什么是本地站点? 什么是远程站点? • 2．如果一台机器安装了防火墙，当你使用FTP 软件进行网站上传时发生错误，应采取怎样的 应对措施？
二、单项选择题
• 1．无论使用哪种FTP方法进行网站上传，具有的连接信息是： • （A）FTP主机地址，登录名和密码。（B）FTP登录名，密码 ，主机目录。 • （C）主机目录，防火墙用户名，密码。 （D）只需FTP地址。 • 2．下面说法错误的是： • （A）网页文件上传前需进行测试，保证网页脚本执行正确。 • （B）CuteFTP是一种网站上传工具，他只限于上传HTML文件 类型。 • （C）Dreamweaver CS4自带的站点管理面板，可以实现网站的 上传操作。 • （D）网站正式发布前，需要申请到虚拟主机才能够正确上传 和访问。
5.使用CuteFTP软 件将完成的网页 上传到服务器 （1）打开 CuteFTP软件，打 开“文件/站点管 理器”菜单，新 建一站点，配置IP 主机地址，FTP站 点用户名称，以 及FTP站点密码三 项参数。
• （2）点击“连接”按钮连接服务器。 • （3）将鼠标拖动窗口左侧文档至右侧窗口， 即完成本地网页文件及素材的上传工作，上传 完成后，可访问企业网址http://www.peser.cn查 看网站效果。
2. FLASH网页动画原理
• 电影是由一格一格的胶片按照先后顺序播放出来 的，由于人眼有视觉停留现象，这一格一格的胶 片按照一定速度播放出来，看起来就“动”了。 在电脑动画中这一格一格的胶片，就是Flash中的 “帧”。在Flash中，帧的概念贯穿了动画制作的 始终。
• 8.2.3 任务三：使用DIV+CSS进行页面排版 • 1.什么是DIV+CSS DIV元素是html(超文本语言)中的一个元素，是标签，用 来为HTML文档内大块（block-level）的内容提供结构 和背景的元素。DIV的起始标签和结束标签之间的所有 内容都是用来构成这个块的，其中所包含元素的特性由 DIV标签的属性来控制，或者是通过使用样式表格式化 这个块来进行控制。
8.4拓展知识
网站开通后，就像注册了公司一样，必须进 行宣传推广，才能变得知名，并带来经济效益。 网站的宣传有多种方式。 1.注册到搜索引擎 2.交换广告条 3.Meta标签的使用 4.直接跟客户宣传 5.网下推广
Hale Waihona Puke Baidu 本章小结
本章通过创建一个企业网站首页文件的过程，读者 可通过参考实践掌握网页平面效果图的设计， FLASH动画的制作，使用DIV+CSS进行页面布局， 以及掌握网页的上传方法。由于篇幅限制，本章中 未加入动态编程语言ASP以及数据库的知识内容， 读者可参考前几章的学习对网站功能进行重新设计 。最终完成一个页面美观，功能强大的企业网站。
• 8.2.2 任务二：使用Flash制作网页动画
Flash是Macromedia公司推出的著名的矢 量动画制作软件，并且也是目前最优秀、最火 爆的网络交互动画制作工具，它不仅能制作精 湛的动画效果，而且能配合Fireworks和 Dreamweaver等网页开发软件，制作出优秀的 网页画面。
1. FLASH基本概念
图8-1 实例最终效果图
8.2 任务分解
该综合实例功能的实现需要基于以下4个方 面的知识点： (1)使用photoshop设计网页效果图。 (2)使用Flash制作网页动画。 (3)使用DIV+CSS进行页面排版。 (4)网站发布与维护。
• 8.2.1 任务一：使用photoshop设计网页效果图
(3)图层 在大部分图像处理软件中，都引入了图层(Layer)的 概念，如我们所熟知的PhotoShop、Flash等。灵活地 掌握与使用图层，不但能轻松制作出种种特殊效果， 还可以大大提高工作效率。可以说，对图层技术的掌 握，无论是Flash，还是其他图形处理软件，都是新 手进阶的必经之路。
(4)场景 在Flash动画中，场景犹如一个舞台，所有的演员 与所有的情节，都在这个舞台上进行。舞台由大小、 音响、灯光等条件组成，场景也有大小、色彩等的设 置；跟多幕剧一样，场景也可以不止一个，多个场景 集合在一起并按它们在场景面板上排列的先后顺序进 行播放，最终形成一个动画。
• 2. Photoshop在网页布局中的作用
(1) 布局灵活 (2) 修改方便 (3) 加快浏览进度 • 3.用Photoshop设计网页布局应注意的几个问题 (1)网页文档尺寸与分辨率 (2)颜色 (3)字体，标题 (4)布局格式 (5)图文搭配 (6)科学使用参考线
• 4. “切片”工具是Photoshop通向DreamWeaver的桥 梁 (1)必须依靠参考线 (2)Logo和Banner必切 (3)虚线和转角形状必切 (4)渐变必切 (5)大图必切 (6)特殊文字效果必切 (7)导航条必切 (8)有效存储切片
第八章 网页设计综合案例
• • • • 学习目标 熟悉Photoshop进行网页效果图设计。 熟悉FLASH进行网页动画的制作过程。 掌握在Dreamweaver软件中使用DIV+CSS技术 进行页面布局。 • 掌握常用FTP上传工具。 • 了解网络推广的常用方法
8.1 需求分析
本案例是创建一个文具类企业网站首 页，该网页创建的目的是展示企业良好的 产品形象，整个网页以绿色为主色，配合 灰色等其它过渡色进行搭配设计，网页主 体部分采用渐变效果的动画展示产品形象 ，整体网页布局采用DIV+CSS实现。