网站设计与建设资料.docx
《网站设计与建设资料.docx》由会员分享,可在线阅读,更多相关《网站设计与建设资料.docx(36页珍藏版)》请在冰豆网上搜索。
网站设计与建设资料
第1章思考问题
1-3.Web媒体与传统媒体有何区别?
答:
WEB媒体是是丰富多彩的多媒体,所包含的Internet是非线性的,用户可以随时跳转到其他网页或网站,传统媒体是线性的。
一对一关系,大众媒体的概念和应用对于Internet无效,传统媒体为广播式传播;互动、主动获得信息,与被动地接受广播信息有本质的区别;交互性,聊天、博客(部落阁)、BBS、在线游戏和电子商务等;个性化,可提供一对一的客户需求信息;平等身份:
可以平等身份获取信息和发表信息
信息搜索能力:
有强大的信息搜索能力;即时性,一旦信息发布,瞬间就可借助Internet传遍世界各地,任何一种传统媒体所做不到的;B/S结构,Web站点发布与传统软件C/S不同,省时省力、便于维护与发布;无需培训,易于浏览信息、不需要任何客户培训,无须安装与卸载客户端软件;Web媒体还有信息变化快、易修改、传播速度快和传播成本低等特点;充分使用原有信息,传统媒体难于使用众多类信息和陈旧信息
1-6.Web设计中,客户是第一位的与内容是第一位的矛盾吗?
答:
Web客户和站点设计关系:
Web设计必须吸引人,以客户为本,引导他快速找到他所需要的内容。
Web客户不希望网页充斥无关内容和混乱图像。
内容很重要,布局和传递也很重要。
用可以赢得客户的布局特性来创建网页。
Web最基本设计原则:
Web内容永远是第一位的,多媒体外观设计与设计技术始终是第二位的。
网站设计主要目的是为用户而不是设计者浏览信息,与C/S应用程序的使用者浏览信息也有很大区别。
针对客户群设计,突出客户最需要的信息。
站点设计既应该专注客户的共性,也应该兼顾个性。
简洁、方便和快速。
滥用多媒体会阻碍用户。
还应遵循颜色、字体、空白、图像和多媒体等设计基本原则。
1-10.怎样理解空白在页面布局中的作用?
答:
“空白”实际上与其他页面布局元素有紧密关联,甚至是其他元素的一部分,比如行间距等。
1-13.什么是浏览器的安全颜色?
答:
40个颜色用于OS,剩下的216种颜色用于页面。
1-14.颜色抖动的含义是什么?
答:
抖动是浏览器将颜色近似为它所支持的最相近的浏览器安全颜色的过程。
1-16.什么是单色方案、相似色方案、互补色方案和三色方案?
答:
单色方案是在网站设计中始终使用一种基本颜色,为避免单调,我们可以通过调整这种基本颜色的灰度和亮度来得到更多的颜色。
单色方案是一种比较稳重的方案,给客户简洁、清雅和经典的感觉,比较适于风格严谨的网站,比如政府网站,学校网站、学术网站,企业网站等。
相似色方案色彩圆环上选择彼此相邻的几种颜色构成的配色方案。
例如橙色、橙红色以及橙黄色就可以组成一个相似色方案。
典型做法是用一种颜色作为页面背景,而另外一种在颜色环中与其相邻的颜色作为前景色。
除了绿色和黄色之外,蓝色和绿色以及红色和褐色也是比较常用的相似色配色方案。
互补色方案在色彩圆环上沿直径相对应的两种颜色构成一对互补色,下图中小箭头所指的红色和深绿色就互为互补色。
三色方案是指在色彩圆环中选择一个等边三角形三个顶点上的颜色构成的配色方案。
例如红、黄、蓝是一个三色方案。
1-23.为自己的个人网站设计一个主页方案。
第2章思考问题
2-2什么是主要导航和次要导航?
答:
主要导航:
可以从站点的各类层次栏目的网页上进行访问,是对整个网站信息的分类划分,主要导航栏一般应以相同样式在相同位置出现于所有页面中。
次要导航:
在指定的某类层次栏目的网页内进行访问,它是对某一个栏目的信息分类划分,次要导航栏应以相同样式在相同位置出现于所有该类的页面中。
2-6站点地图的基本概念是什么?
为什么在一个较为复杂的网站需要创建站点地图?
答:
网站导航是串接网站页面的链条。
站点地图:
网站体系的结构图形表示,站点地图也称为网站地图。
站点地图可以使浏览者迅速查看到网页的整体结构,提高工作学习效率。
2-8什么是站点结构?
说明站点结构的重要性。
答:
网站结构分为物理结构和逻辑结构。
下面分别解释下这两种结构:
所谓物理结构,指的是网站中页面在服务器空间上的存放结构。
物理结构又可以分为“扁平结构”和“树形结构”。
逻辑路径,指的是在逻辑上网站页面的结构。
重要性:
提供信息分类间切换,推荐重要的浏览信息:
导航可以为浏览客户推荐网站最重要和具有特色的信息。
2-9什么是网站体系?
答:
站点的结构图,由顶层主页和各分支具有不同深度的子页组成,也称为站点的信息体系。
2-10导航应该遵守哪些主要的导航原则?
答:
导航应遵循“3次点击规则”
站点并不需要选择独特的导航方式,特例除外
站点结构清晰和逻辑性强
借鉴成功导航
导航系统应该包含多种导航:
主要导航、次要导航、站点地图、热点链接和站内搜索等。
导航外观会对用户产生影响
导航名称要规范和大众化:
导航名称要规范、大众化,如首页、下载。
导航名称命名既要有吸引力又要简明扼要和准确
最新通知和新闻需要有提示
当前导航条提示
网站徽标和名称要放到主页的左上方
第3章思考问题
3-3图像在网站设计中的一般原则如何?
答:
网站徽标应适宜大小放在主页左上方
网站标题应放在主页徽标的右边
网站图像与网站色系协调一致
图像的文件尺寸应该要足够小
图像尽量避免使用高分辨率的真彩照片
使用Web标准调色板,避免抖动
尽可能使用纯色,混合颜色会加大文件
在网页中勿滥用图像
Internet和Intranet的图像区别
切割大幅图像
3-6请解释颜色抖动的原因如何?
答:
是在图像调色板和系统调色板之间调和,图像调色板上的颜色被和系统调色板上匹配的颜色所替代,如果系统不能找到匹配的颜色,它会使用它认为合适的颜色,这就可能导致异常的颜色组合!
为了防止抖动的发生,图像应该使用Web安全颜色调色板上的颜色。
3-11GIF、JPEG和PNG的区别是什么?
答:
gif:
与平台无关的文件格式,限于256色,是一个无损压缩格式(推荐使用),GIF压缩格式可以“渐显”。
Gif98a动画gif图像文件。
透明GIF。
jpeg:
联合图像专家组,24位色,有损压缩。
缺点:
无法控制24位色与256色调色板的映射。
JPEG2000采用新的子波压缩技术,减少压缩损失,同时支持有损和无损压缩。
JPEG支持渐进式隔行扫描
png:
PNG支持24位图像并产生无锯齿状边缘的背景透明度,PNG保留灰度和RGB图像中的透明度。
PNG是目前保证最不失真的格式,它汲取了GIF和JPG二者的优点。
PNG是采用无损压缩方式来减少文件的大小,显示速度很快,同样支持透明图像。
缺点是不支持动画应用效果。
Fireworks默认格式是PNG。
Web图形与一般图形有何区别?
答:
图像(图片)颜色要与网站色系协调一致:
网站-图形尺寸尽可能小:
切割大尺寸图像:
在不同大小和分辨率的显示器上显示的图像:
分辨率为72ppi和300ppi的图像:
第4章思考问题
4-4多媒体在网站设计中应遵守的一般设计原则是什么?
答:
根据网站主题选择多媒体
重视网络带宽,慎用视频
网页应避免使用背景音频
避免网页使用零乱的动画
网页中避免使用滚动文本
网站中避免使用特别插件
网站拒绝最新最耀眼技术
避免网站设计的版权侵害
珍惜Web用户时间-时刻吸引用户
4-5多媒体在网页设计中用的越多越好?
为什么?
答:
不正确,因为有的用户网络宽带速度较慢,长时间打不开网页会造成不必要的困扰,其次,多媒体较多会显得网页整体不够稳定,错综杂乱,影响用户的正常访问。
4-14Web多媒体与文件尺寸、网络带宽和下载时间的关系如何?
答:
视频与Web设计:
Web视频具有时序性与丰富的信息内涵,常用于交待事物的发展过程,视频类似于电影和电视,有声有色,在多媒体中充当起重要的角色。
Web视频是一个正在发展和非常有前途的技术,但现在频带还不足够的宽,因此,Web视频的品质很低,实时播放使用的还是比较少。
Web视频一般分辨率低、像素少、帧速率低、尺寸小,Web视频观看品质比有限电视差很多,比电影的品质就更差了
电影的品质是Web视频追求的目标。
实时直播主要有视频会议、远程教育、视频聊天、视频电话、WebTV直播、Web电影直播、Web监控视频、电视台Web直播等;
录像点播或下载播放主要有Web电影点播、Web电视点播、广告小视频、录制节目点播等等。
第5章思考问题
5-1什么是静态网页?
什么是静态网站?
答:
静态网页:
网页内容每次调用固定不变,Web服务器将纯粹的HTML文档传送给客户浏览器。
特点:
设计针对性和灵活性强,都有一个固定的URL,容易被搜索引擎检索,对应独立的磁盘文件,网页设计比较简单,存取速度比动态网页快。
更新内容必须重新制作网页,网站制作和维护工作量大,交互性较差,缺乏对信息数据的管理、检索和维护,静态网页信息发布、维护等需要专业人员。
静态网站:
所有网页都是由“静态网页”组成的网站称为静态网站,没有数据库的支持,静态网站可能包含动画和滚动信息。
5-2什么是动态网页?
什么是动态网站?
答:
动态网页:
具有交互性、自动更新和因人而异的特点,存取数据库、有代码在服务器端运行并只有访问时才确定内容的网页称为动态网页。
动态网页一般是以.asp、.php和.jsp为后缀的网页文件。
动态网站:
有动态网页的网站称为动态网站,动态网站并不是所有网页都是动态网页,大多数网站都是以静态网页和动态网页混合而组成的。
动态网页一般是以.asp、.php和.jsp为后缀的网页文件。
5-3试分析“网页中有动画的网站就是动态网站”是否正确?
答:
不是
5-16一个网站必须使用域名才能提供Web服务,这个观点正确吗?
答:
IP数字地址是Internet网上主机的唯一标识,以区别不同的主机。
难记、无含义。
域名是网站在互联网上的“文字”名字,是网站的第一笔财富,也被誉为“企业的网上商标”。
域名是联接企业和互联网网址的纽带。
Internet主机可有一个或多个域名
每个域名只对应一个唯一的IP地址
域名表示方法:
四级域名·三级域名·二级域名·一级域名(顶级域名)
第6章思考问题
6.7什么是门户网站?
答:
门户网站,是指通向某类综合性互联网信息资源并提供有关信息服务的应用系统。
门户网站最初提供搜索服务、目录服务,后来由于市场竞争日益激烈,门户网站不得不快速地拓展各种新的业务类型,希望通过门类众多的业务来吸引和留住互联网用户,以至于目前门户网站的业务包罗万象,成为网络世界的“百货商场”或“网络超市”。
是综合性网站的俗称,提供信息丰富、服务多样,是网络用户上网的首选。
最初是指搜索引擎网站
门户网站分类:
国内搜索网站:
新浪、搜狐、网易等
境外投资网站:
中文雅虎、美国在线
传统媒体网站:
人民网、新华网、央视国际
6.10一般网站与电子商务网站有什么主要区别?
答:
6.13什么是CI?
网站CI主要包括哪些内容?
答:
所谓CI(corporateidentity)是指通过视觉来统一企业的网站形象,一个杰出的网站和实体公司一样,需要整体的形象包装和设计。
例如:
麦当劳网站。
主要包括:
网站logo标志(徽标)、网站设计颜色、网站设计字体、统一图片处理效果、统一的宣传标语等。
6.19网站定位、蓝图、Web战略和Web策略间的关系?
答:
网站定位是指网站客户群:
网站主要服务的用户对象。
网站一般都有相对固定的客户群,因为针对不同的客户群,设计网站的风格和多媒体等技术是不一样的。
网站设计团队应该了解网站的客户群和相关信息:
年龄、教育和位置。
老人、中年、青年、中学生、小学生、儿童:
高等教育、中等教育大城市、中小城市、农村及偏远地区;
企业内部网用户还是企业外用户;
网站蓝图:
义网站范围和意图的基本框架:
网站轮廓框架和一个可以测量的目标。
考虑的三个重要因素是:
受众、内容以及导航结构。
Web战略:
是构建一个可以吸引并留住用户的网站,并非看起来最好或最有用的网站。
Web策略:
是构建一个可以吸引并留住用户的网站,并非看起来最好或最有用的网站。
首先定义并设计网站的外观和功能,形成网站的大致轮廓(模板),再递交给用户,根据用户意见再修改网站设计,直到满足要求即可。
适于中小型、个人网站或类似网站以及客户对需求不明确等情况。
缺点是修改次数太多。
其次进行详细的需求功能分析,在对网站主题、蓝图有深刻的认识基础上,再设计网站的外观、内容和功能。
第10章思考问题
10.1什么是HTML?
它的特点是什么?
答:
超文本标记语言
不是编程语言
超链接
纯文本文档
不提供数据访问
支持超媒体
Web浏览器解释
html或.htm后缀
10.2常见的HTML解释器有哪些?
答:
HTML中的标记用来描述文档的结构、数据的显示格式和建立超级链接等。
HTML主要描述信息的显示样式;动态语言处理业务逻辑。
用户访问网站时,将会把网页下载到本地计算机中,然后通过客户机器上的浏览器将文档解释为网页并在浏览器窗口中显示出来。
Web浏览器:
解释超媒体文档。
标准HTML在各浏览器会产生同样效果,但浏览器一般采用技术和标准不尽相同,因此效果略有不同。
10.13为什么在网页设计中应该使用的是相对路径而不是绝对路径?
答:
文本格式的局限
缺乏对布局控制的能力
无法动态改变页面内容
交互困难
适应性差:
不能在计算机和手机、PDA以及智能家电中统一编写网页
不能访问数据库
第11章思考问题
11.1表格中常用的标记有哪些?
它们的作用分别是什么?
答:
1、
标志对用来创建一个表格。
它有以下属性:
属性
用途
设置表格的背景色。
设置边框的宽度,若不设置此属性,则边框宽度默认为0。
设置边框的颜色。
设置边框明亮部分的颜色(当border的值大于等于1时才有用)。
设置边框昏暗部分的颜色(当border的值大于等于1时才有用)。
设置表格格子之间空间的大小。
设置表格格子边框与其内部内容之间空间的大小。
设置表格的宽度,单位用绝对像素值或总宽度的百分比。
说明:
以上各个属性可以结合使用。
有关宽度、大小的单位用绝对像素值。
而有关颜色的属性使用十六进制RGB颜色码或Html语言给定的颜色常量名(如Silver为银色)
2、
|
| |
标志对用来创建表格中的每一行。
此标志对只能放在table>标志对之间使用,而在此标志对之间加入文本将是无用的,因为在
|
之间只能紧跟
| 标志对才是有效的语法,
| 标志对用来创建表格中一行中的每一个格子,此标志对也只有放在
|
标志对之间才是有效的,您想要输入的文本也只有放在
| 标志对中才有效(即才能够显示出来)。
、
|
和
| 标志对的关系如下所示:
最外层,创建一个表格-->
创建一行-->
创建一个格子(这里总共创建了三个格子)-->
要输出的文本只能放在此处 | 要输出的文本只能放在此处 | 要输出的文本只能放在此处 | 最外层-->
此外,
还有align和valign属性。align是水平对齐方式,取值为left(左对齐)、center(居中)、right(右对齐);而valign是垂直对齐方式,取值为top(靠顶端对齐)、middle(居中间对齐)或bottom(靠底部对齐)。
具有width、colspan、rowspan和nowrap属性。 width是格子的宽度,单位用绝对像素值或总宽度的百分比;colspan设置一个表格格子跨占的列数(缺省值为1);rowspan设置一个表格格子跨占的行数(缺省值为1);nowrap禁止表格格子内的内容自动断行。 3、 | | | 标志对用来设置表格头,通常是黑体居中文字。11.3表格和框架的区别是什么?
答:
表和框架都可以构造网页的布局结构,表可以很容易地为页面加书签或添加到收藏夹,框架组合页面则不可以。
表布局结构在垂直或水平滚动时,页面所有内容滚动;框架布局允许创建彼此独立的页面区域。
11.7rowspan、colspan功能是什么?
答:
colspan和rowspan这两个属性用于创建特殊的表格。
colspan是“columnspan(跨列)”的缩写。
colspan属性用在td标签中,用来指定单元格横向跨越的列数:
在浏览器中将显示如下:
单元格1
单元格2
单元格3
单元格4
该例通过把colspan设为“3”,令所在单元格横跨了三列。
如果我们将colspan设为“2”,则该单元格将只跨越两列,于是有必要在第一行插入另外一个单元格,以确保两行占据相同的列数。
该例在浏览器中将显示如下:
单元格1
单元格2
单元格3
单元格4
单元格5
rowspan的作用是指定单元格纵向跨越的行数。
浏览器中将显示如下:
单元格1
单元格2
单元格3
单元格4
上例中的单元格1,其rowspan被设为“3”,这表示该单元格必须跨越三行(本身一行,加上另外两行)。
因此,单元格1和单元格2在同一行,而单元格3和单元格4形成独立的两行。
第12章思考问题
12.1框架中常用的标记有哪些?
它们的作用分别是什么?
答:
●文件声明让浏览器知道这是HTML文件
●开头提供文件整体资讯●标题定义文件标题,将显示于浏览顶端●本文设计文件格式及内文所在排版标记
--注解-->○说明标记为文件加上说明,但不被显示
○段落标记为字、画、表格等之间留一空白行
○换行标记令字、画、表格等显示于下一行
○水平线插入一条水平线●居中令字、画、表格等显示于中间反对●预设格式令文件按照原始码的排列方式显示●区隔标记设定字、画、表格等的摆放位置
●不折行令文字不因太长而绕行
●建议折行预设折行部位
字体标记
●加重语气产生字体加粗Bold的效果
●粗体标记产生字体加粗的效果
●强调标记字体出现斜体效果
●斜体标记字体出现斜体效果
●打字字体Courier字体,字母宽度相同
●加上底线加上底线反对
●一级标题标记变粗变大加宽,程度与级数反比
●二级标题标记将字体变粗变大加宽
●三级标题标记将字体变粗变大加宽
●四级标题标记将字体变粗变大加宽
●五级标题标记将字体变粗变大加宽
●六级标题标记将字体变粗变大加宽
●字形标记设定字形、大小、颜色反对
○基准字形标记设定所有字形、大小、颜色反对
●字体加大令字体稍为加大
●字体缩细令字体稍为缩细
●画线删除为字体加一删除线反对
●程式码字体稍为加宽如
●键盘字字体稍为加宽,单一空白
●范例字体稍为加宽如
●变数斜体效果
●传记引述斜体效果
●引述文字区块缩排字体●述语定义斜体效果
●地址标记斜体效果●下标字下标字
●上标字指数(平方、立方等)
清单标记
●顺序清单清单项目将以数字、字母顺序排列●无序清单清单项目将以圆点排列- ○清单项目每一标记标示一项清单项目
反对●目录清单清单项目将以圆点排列,如反对●定义清单清单分两层出现- ○定义条目标示该项定义的标题
- ○定义内容标示定义内容
表格标记
●表格标记设定该表格的各项参数●表格标题做成一打通列以填入表格标题●表格列设定该表格的列●表格栏设定该表格的栏 | ●表格标头相等于 | ,但其内之字体会变粗 表单标记 |