(Web编程基础知识)第4章 页面设计
更新时间:2023-08-27 17:04:01 阅读量: 教育文库 文档下载
- vba编程基础知识推荐度:
- 相关推荐
Web编程基础知识
第4章 页 面 设 计
1 网页设计基础 2 静态页面设计 3 动态页面设计
4 样式表设计本章小结
网页设计要使用多种技术, 包括HTML、脚本程序设计、 CSS样式表及美工技术等。 仅使用HTML设计的页面属 于静态页面。Web刚出现 的一段时间内,它是一个 静态信息发布平台,所设 计的页面都是静态的;而 当今的Web已经具有更丰 富的功能。1
Web编程基础知识
4.1 网页设计基础
4.1.1 页面功能与内容设计 4.1.2 页面布局设计 4.1.3 页面视觉设计 4.1.4 页面效果设计
Web编程基础知识
4.1.1 页面功能与内容设计
Web应用(网站)
主目录,首页 子目录、网页文件及各类其他文件
数据库
Web应用 == 传统的计算机软件系统
软件系统分析、设计和开发相关的方法和模式进行 生命周期法 原型法
MVC设计模式
Web编程基础知识
MVC设计模式
在Web开发中,模型-视图-控制器(Model-View-Controller, MVC)设计模式是一种比较流行的设计模式。 MVC设计模式
核心思想是在系统开发中把商业逻辑,界面显示和数据进行 分离,强制性的使应用程序的输入、处理和输出分开,分成 相对独立而又能协同工作的3个组成部分:模型(Model)、 视图(View)、控制器(Controller),它们各自处理自己的 任务。
模型:表示企业数据和业务规则,在MVC的三个部件中,模型拥 有最多的处理任务,实现具体的业务逻辑、状态管理的功能。 视图:是用户看到并与之交互的界面,通常实现数据的输入和输 出功能。
控制器:控制整个业务流程,实现View层跟Model层的协同工作。 控制器接受用户的输入并调用模型和视图去完成用户的需求。 4
Web编程基础知识
网页功能进行分类根据MVC设计模式,可以将网页功能进行分类:
用于输入输出的页面(视图); 服务端脚本程序页面(模型),这类页面不在浏览器中 显示,主要是负责数据的查询、存储等; 导航页面,类似MVC中的控制器,也类似于传统程序中 的菜单,实现页面之间的调用和导航,典型的导航页面 就是站点首页。
将网页按照MVC设计模式进行分类,可以更好的规划一个 Web站点,保证站点的可扩展性、灵活性和可维护性,这 也是所有的软件设计模式所追求的目标。5
Web编程基础知识
网页内容与表现形式
网页内容 网站标志,导航,菜单,图片按钮,表单
样式,表格数据文字表现,新闻,公告, 讨论区,blogs,友情链接,广告条,版权 信息等。
表现形式 文本、图片、动画等不同的媒体形式来展
示,以产生更好的用户体验
Web编程基础知识
4.1.2 页面布局设计
网页布局设计方法
页面布局的草图加工 定稿
页面尺寸,页面尺寸和显示器大小及分辨率有关系 整体造型 政府网页、 商业站点、游戏场景、时尚站点
影响因素
页头 页脚
菜单超链接7
Web编程基础知识
常见页面布局-1
基于栏目的页面布局 大部分的门户网站首页即采用基于栏目的页面
布局形式,例如,sina,yahoo,163,265上 网导航等 优点:基于栏目的页面布局主要应用于一些商
业网站的首页。为吸引用户,增加用户访问量, 从商业运营的目的出发,网站的内容很多,分 成了不同的超链接区域(版块)。为节省屏幕 空间,在栏目内往往还使用标签,以组织更多 的内容。8
Web编程基础知识
常见页面布局-2
整幅效果型布局 页面采用大幅图片或Flash动画,在底部加一
“登录”按钮,通常用于站点首页。 优点:页面美观,可以较好的展示企业形象。 缺点:登录速度较慢。
Web编程基础知识
常见页面布局-3
“口”型页面布局 页面一般上下各有一个广告条,左面是主菜单,
右面放友情链接等,中间是主要内容,这种页 面布局也经常用于一些站点的首页设计。
优点:充分利用版面,信息量大。 缺点:页面拥挤,不够灵活。也有将四边 空出,只用中间的窗口型设计。
Web编程基础知识
常见页面布局-4
“工”型结构布局
所谓“工”型结构布局,是指将页面分成上、中、下 三个部分,页面顶部为横条网站标志+广告条,下面 是版权等信息,中间为主要内容,又分为左右两个部 分,左面为主菜单,右面显示内容的页面布局形式。
Web编程基础知识
常见页面布局-4
优点 “工”型页面布局是网页设计中用的最广泛的一
种布局方式,这种布局的优点是页面结构清晰, 主次分明。
缺点 规矩呆板,如果细节和色彩上搭配不好,很难让
人留下印象,不适宜做前卫的和个性化强的站点。
Web编程基础知识
常见页面布局-5
自顶向下层次结构布局 将页面自顶向下分成几个平行的区域,
顶部是页头,接下来的区域分别放置超 链接块,最下面的区域显示具体的文章 正文内容。一些文章页面或注册页面等 经常采用这种类型的页面布局。
Web编程基础知识
常见页面布局-6
自由式结构布局
页面结构布局打破了传统的页头、页尾、菜单、栏目、超链接 区域等布局模式,把页面设计成一张极具创意的广告作品 自由式结构布局的优点是页面靓丽、现代、轻松、节奏明快, 很容易让访问者驻足欣赏。 缺点,下载速度缓慢,文字信息量少,信息的逻辑表达能力弱, 浏览者不易直奔主题,信息查找麻烦。 自由式结构布局一般用在时尚类站点上,如时装、化妆品等以 崇尚现代、美感为主题的站点,专业性的商
务站点不宜采用。14
特点
应用
Web编程基础知识
4.1.3 页面视觉设计
页面视觉
视觉设计是指利用视觉符号来传递各种信息的设 计,其应用的范畴很广,可以包括工业产品设计, 广告设计,新媒体设计,服饰设计等等。 页面视觉设计分成图形、字体和色彩几个方面
色彩设计
不同功能的网站,其颜色的主色调设计也不相同。 其次是颜色的搭配 。
Web编程基础知识
页面视觉设计
图形的应用 用于信息反馈 增加趣味性
文字的字体 大号字 空白,提高页面的易读性和易用性 ,空
白可以分离出重要信息,使眼睛得到休 息,并给人以冷静和有秩序的感觉。
Web编程基础知识
4.1.4 页面效果设计
效果设计
效果设计就是利用Photoshop等图形图像处理工具,按照页面的 布局设计,来设计页面的完整图片 然后对图片进行切图,为下面的页面html代码编写准备images。
Web编程基础知识
4.2
静态页面设计
静态页面主要是使用HTML语言设计的页面,
用户只能浏览Web服务器上预先安排好的 信息。 设计静态页面主要使用各种页面开发工具, 如Dreamweaver,FrontPage等
返
回18
Web编程基础知识
4.2.11.
HTML基本标记
头部标记
<head>,</head> HTML文件头部的起始和结束标记。 <title>,</title> HTML文件的标题,是显示于浏览器标题
栏的字符串。 <style>,</style> CSS样式定义 <meta> 该标记位于<head>与<title>标记之间,用于描述 文档属性2.
体部标记 ① <body>,</body>标记返 回19
正在阅读:
(Web编程基础知识)第4章 页面设计08-27
医疗器械不良事件监测系统-国家药品不良反应监测中心10-07
GPS相对定位基本原理11-04
幼儿教师师德德育学习心得感悟范文五篇03-22
偶像剧《斗鱼》经典台词、语录摘抄05-09
买卖合同管辖地规定03-01
(拓展训练)拓展训练的收获和感悟.doc05-09
廉洁伴我行作文500字06-25
- exercise2
- 铅锌矿详查地质设计 - 图文
- 厨余垃圾、餐厨垃圾堆肥系统设计方案
- 陈明珠开题报告
- 化工原理精选例题
- 政府形象宣传册营销案例
- 小学一至三年级语文阅读专项练习题
- 2014.民诉 期末考试 复习题
- 巅峰智业 - 做好顶层设计对建设城市的重要意义
- (三起)冀教版三年级英语上册Unit4 Lesson24练习题及答案
- 2017年实心轮胎现状及发展趋势分析(目录)
- 基于GIS的农用地定级技术研究定稿
- 2017-2022年中国医疗保健市场调查与市场前景预测报告(目录) - 图文
- 作业
- OFDM技术仿真(MATLAB代码) - 图文
- Android工程师笔试题及答案
- 生命密码联合密码
- 空间地上权若干法律问题探究
- 江苏学业水平测试《机械基础》模拟试题
- 选课走班实施方案
- 基础知识
- 编程
- 页面
- 设计
- Web
- 验收测试报告模板
- 匀变速直线运动专项练习题.doc
- 泰达宏利价值优化型稳定类行业证券投资基金2010年第2季度报告2010年06月30日
- 室内设计基础图画法
- 软件限制策略的简单应用应用简单策略限制软件运行所有
- 苏珊米勒2015年10月双子座运势
- 2015-2020年中国高速公路智能化行业全景调研报告
- Java网上五子棋游戏设计
- 2012年会计职称考试《初级经济法》重点导读:支付结算法律制(精)
- 中小学心理健康教育C证论文
- Apriori算法在足球技战术分析中的应用
- 经典滑轮计算题
- LabView虚拟示波器实验报告
- 现代交换技术实验报告1
- 品类管理策略加案例
- 企业标准体系结构图及标准化职责一览表
- 农行流水对账单电子模版
- 二极管正负极如何判断
- 医院随访系统需求
- 专题六 数论初步与规律探究讲义