《Web前端XHTMLCSSJavaScript9》由会员分享，可在线阅读，更多相关《Web前端XHTMLCSSJavaScript9（27页珍藏版）》请在金锄头文库上搜索。
1、WebWeb前端前端XHTMLCSSJavaScript9XHTMLCSSJavaScript9目录目录掌握使用Web前端技术开发网页的基本流程。 能够利用图像切片制作网页基本素材。 利用网页元素实现内容的显示。 利用CSS实现页面布局。 利用CSS实现内容和表现形式的分离。学习目标学习目标目录目录9.1 项项 目目 概概 述述9.1.1项目描述项目描述手机资讯网站为了吸引人气，需要为用户提供一个愉悦的资讯环境，所以网站的页面设计不仅要求布局简单，而且还要使用一些动态效果吸引访问者的眼球。本网站包括首页、手机介绍、最新资讯、畅销排行榜四大部分，由于篇幅有限，本章只介绍网站首页的制作。目录目录9
2、.1 项项 目目 概概 述述9.1.2站点分析站点分析本案例中采用深灰色为主基调，网站的特点是简洁、方便，栏目简单明了，具体效果如图9-1所示。目录目录9.2 网网 站站 设设 计计9.2.1网站的设计流程网站的设计流程1.设计的任务网页设计的任务是指设计者要表现的主题和实现的功能。网站的性质不同，设计的任务也不同。从形式上讲，可以将网站分为以下3类。（1）资讯类网站（2）资讯和形象相结合的网站（3）形象类网站目录目录9.2 网网 站站 设设 计计2.设计的实现 设计的实现可以分为两部分：第一部分是站点的规划及草图的绘制，这一部分可以在纸上完成，也称“原型设计”；第二部分是网页的制作，这一过程
3、是在计算机上完成的。本书的重点在于利用Web前端技术实现网站开发。目录目录9.2 网网 站站 设设 计计3.色彩的运用 颜色的使用并没有一定的法则，如果一定要用某个法则去套，效果只会适得其反。经验上可先确定一种能表现主题的主体色，然后根据具体的需要，应用颜色的近似和对比完成整个页面的配色方案。整个页面在视觉上应是一个整体，以达到和谐、悦目的视觉效果。目录目录9.2 网网 站站 设设 计计4.网页布局类型1)“国”字型 7)封面型 9)变化型 8)Flash型 2)拐角型 6)综合框架型4)左右框架型 3)标题正文型 5)上下框架型目录目录9.2 网网 站站 设设 计计5.造型的组合 网页设计主
4、要通过视觉传达表现主题。在视觉传达中，造型是很重要的一个标签。抛开是图还是文字的问题，画面上的所有标签可以统一作为画面的基本构成要素点、线、面来进行处理。在一幅成功的作品里，是需要点、线、面的共同组合与搭配来构造整个页面的。目录目录9.2 网网 站站 设设 计计6.设计的原则设计是有原则的，无论使用何种手法对画面中的标签进行组合，都一定要遵循五大原则：统一、连贯、分割、对比及和谐。 分割连贯对比和谐统一12345目录目录9.2 网网 站站 设设 计计7.网页的优化在网页设计中，网页的优化是较为重要的一个环节。它的成功与否会影响页面的浏览速度和页面的适应性，影响观者对网站的印象。在资讯类网站中，
5、文字是页面中最大的构成标签，因此字体的优化显得尤为重要。图片是网页中的重要标签。DIV与表格是页面中的重要标签,是页面排版的主要手段。目录目录9.2 网网 站站 设设 计计9.2.2原型设计与切图原型设计与切图图9-2创建文档图9-3导入logo图像目录目录9.2 网网 站站 设设 计计图9-4页面设计图图9-5Fireworks切片功能目录目录9.3 项项 目目 实实 施施9.3.1整体页面结构设计整体页面结构设计在开始编写CSS代码之前，首先需要对页面整体结构进行分析，然后确定布局和定位方式。本案例中接口框架十分简单，包括logo图片、导航条、左侧主要内容、右侧信息以及页脚等，因此采用最基
6、本的网页框架，如图9-6所示。图9-6整体结构框架目录目录9.3 项项 目目 实实 施施图9-7#content和#sideBar框架目录目录9.3 项项 目目 实实 施施9.3.2XHTML结构设计结构设计整个页面的XHTML结构，按照网页设计图从左到右、从下到上、从整体到局部的原则组织排列各种标签，并放到相应的div块级标签中。目录目录9.3 项项 目目 实实 施施9.3.3页面布局与规划页面布局与规划确定好页面的各个块后，对页面的各部分分别进行设计，本案例中采用固定宽度且居中版式，背景色为白色。导航菜单依然采用项目列表方式完成，利用进行设置。logo部分采用绝对定位方式设置大小、边距等。
7、主要内容分为#mainContent和#sideBar两部分，定位方式为浮动定位。“版权所有”位于页面下半部分，并设置背景图片等。目录目录9.3 项项 目目 实实 施施9.3.4局部设计局部设计1.logo设计logo部分使用两张图片和项目列表呈现主要内容，具体效果如图9-8所示。图9-8 logo效果目录目录9.3 项项 目目 实实 施施2.主要导航链接设置网站首页区分其他导航，设置背景色为白色，当鼠标指针经过时超链接的背景和文字进行变换，具体效果如图9-9所示。图9-9主要导航链接效果目录目录9.3 项项 目目 实实 施施3.主要内容部分设计主要内容部分分为3个模块，而这3个模块代码很相似
8、，只是图片位置不同，效果如图9-10所示。图9-10 主要内容效果目录目录9.3 项项 目目 实实 施施4.右侧栏目设计 “操作系统”的背景是具有圆角的矩形，当鼠标指针滑过后背景发生变化，如图9-11所示。圆角矩形框实际上是由两个半截圆角框组成的，原图如图9-12和图9-13 所示。目录目录9.3 项项 目目 实实 施施图9-11“操作系统”效果图9-12上半边圆角原图图9-13下半边圆角原图目录目录9.4 其他动态效果其他动态效果9.4.1CSS滤镜的使用滤镜的使用滤镜分为基本滤镜和高级滤镜两大类，基本滤镜通常可以直接作用在对象上，包括Alpha通道、Blur（模糊）、Chroma（透明色）等；高级滤镜需要配合JavaScript等脚本语言使用，包括BlendTrans（渐隐变换）、Light（灯光）、RevealTrans（变换）等。目录目录9.4 其他动态效果其他动态效果9.4.2放大镜效果放大镜效果网页中提供的手机图片是小图片，手机细节没有显示，为了显示得更清楚，可以利用放大镜效果，效果如图9-16所示。图9-16放大镜效果目录目录9.5 思考与练习思考与练习1.简述网站开发的基本流程。2.CSS基本滤镜有哪些？它们在网页中的作用是什么？3.CSS布局在实现网页制作中主要对哪些属性进行操作？4.如何制作圆角矩形框？思考与练习思考与练习思考与练习思考与练习目录目录结束结束
