400-609-4309

网页设计知识汇总

网页设计知识汇总

网页设计中,Css中的字体属性可以应用到各种有文字的地方。1.HTML标签:蓝色的粗体文字;2.字体的变形:font-variant;3.字体类型:font-family:黑体、宋体、隶书,默认的宋体。下面是网页设计知识汇总,希望对您有所帮助。

网页设计知识汇总

字体:Css中的字体属性可以应用到各种有文字的地方。

1.HTML标签:蓝色的粗体文字。

2.字体的变形:font-variant。

3.字体类型:font-family:黑体、宋体、隶书,默认的宋体。

4.字体粗细:font-weight:粗体bole|特粗体bolder|细体lighter|正常体normal。

5.字体大小:font-size。

6.定义行高:line-height。

7.下划线:text-decoration:下划线underline|顶划线overline|删除线line-through|文本闪烁blink。

8.字体颜色:color。

9.字间距:letter-spacing:ex|em。

10.字体对齐方式:text-align:left|right|center|justify。

11.定义无序列表:list-style-type:实心圆disc|空心圆circle|实心方块square|无none。

12.定义有序列表:list-syle-type:阿拉伯数字decimal|小写罗马数字lower-roman|大写罗马数字upper-roman|小写英文字母lower-alpha|大写英文字母upper|无none。

超链接:用伪类定义动态超链接样式。

1.未访问前样式a:link{};

2.悬停时样式a:hover{};

3.用户激活时样式a:active{};

4.访问过以后样式a:visited{}。

5.给链接添加提示文字:title属性。

6.按钮式超链接:在悬停的时候把对象向下、右移动一个像素,效果很像按下去的按钮。

7.背景颜色/图片background-color/image。

8.定义鼠标样式cursor:正常auto|手型鼠标hand|等待鼠标wait|点状鼠标pointer|移动鼠标move|文字鼠标text|求助鼠标help。

图片:

1.边框样式border-style:无none|实现solid|点划线dotted|虚线dashed;

2.边框颜色border-color;

3.边框宽度border-width;

4.图片大小width:数值;height:数值;

5.图片的缩放width:百分比,height:百分比;

6.图片的对齐方式:text-align:left、right、center。

7.图片的纵向对齐vertical-align:顶端对齐top|中部对齐middle|底部对齐bottom。

8背景图片、颜色background-imgcolor。

9.导入图片:URL(图片的路径);

10.重复效果background-repeat:X轴重复repeat-x|Y轴重复repeat-y|无no-repeat。

11.图片的位置可以参考我的上一篇博客。

设置表格样式:

1.table标签的属性:边框border、表格宽width、表格高height、位置align、单元格空隙cellspacing、单元格边界之间的距离cellpadding。

2.一行的单元格;

3.一个单元格;

这些知识都是非常常用的知识,总结下来,在使用的时候能够及时找到,对自己的学习和工作是非常有帮助的。这样总结下来,对网页设计的认识更加深刻了,在思想上网页设计这样看起来非常的简单,就用这些简单的逻辑设置来勾勒网页的灵魂和肉体。对下一步的学习起到了坚定信心和降低难度的作用,网页设计——思维开出的花朵。

前端网页设计基础知识

1 WWW

● WWW (World Wide Web,万维网)是Internet上基于客户/服务器体系结构的分布式多平台的超文本超媒体信息服务系统,它是一个基于超文本(Hypertext)方式的信息检索服务工具,允许用户在一台计算机上通过Internet存取另一台计算机上的信息。

● WWW系统已在教育、科学技术、商业广告、公共关系、大众媒体和娱乐等多方面起着愈来愈重要的作用 。

● WWW获得成功的秘诀在于它制定了一套标准的、 易于人们掌握的超文本开发语言HTML、信息资源的统一定位格式URL 和超文本传送通信协议HTTP,用户掌握后可以很容易地建立自己的网站。

2 URL

● 统一资源定位器(Uniform Resource Locator,URL)用于描述Internet上资源的位置和访问方式。

● URL标识在Internet中是唯一的,一个URL标识只能表示一个网页或其他资源的位置。

● URL以统一的语法编写而成,格式如下:

● 协议名://主机域名/IP地址:端口/目录/文件名

3 HTTP

● HTTP( Hyper text Transfer Protocol)超文本传输协议,Internet中最常见的协议之一。它是用于从WWW服务器传输超文本到本地浏览器的传送协议。

● 它可以使浏览器更加高效的工作,减少网页传输的时间。

● 它不仅保证计算机正确快速地传输超文本文档,还确定优先传输文档中的哪一部分。例如,文本优先于图形等。

4 浏览器

● 浏览器是一种基于Internet的并且位于客户端计算机上的软件,它能把Internet上搜索到的文本文档翻译成网页,用于显示网页中的文本、图像、视频和声音等网页元素。

● 浏览器产品有很多可供选择,它们都可以浏览WWW上的内容。目前, 最普及的浏览器当属微软(Microsoft)公司的Internet Explorer(IE),它是和windows系统绑定在一起的,其他的一些浏览器包括Netscape(网景)公司的Navigator浏览器、Mozilla Firefox(火狐)等。

5 上传/下载

● 上传就是将信息从个人计算机(本地计算机)传递到服务器(远程计算机)系统上,让网络上的人都能看到。例如,将制作好的网页发布到Internet上去,以便让其他人浏览。这一过程称为上传。

● 上传分为Web上传和FTP上传,前者直接通过单击网页上的链接即可操作,后者需要专用的FTP工具。

● 下载时通过网络进行传输文件并保存到本地计算机上的一种网络活动,是指把服务器上保存的软件、图片、音乐、文本等下载到本地计算机中。

6 Web标准

● Web标准是一些规范的集合,是由W3C (World Wide Web Consortium 全球万维网联盟)和其他的标准化组织共同制定的,以用它来创建和解释网页的基本内容。这些规范是专门为了那些在网上发布的可向后兼容的文档所设计,使其能够被大多数人所访问。

● 在1996~1999年期间,为了兼容Netscape和IE,网站不得不为这两种浏览器编写不同的代码。为了解决这些问题,就需要建立一种普遍认同的标准来结束这种无序和混乱。商业公司(Netscape、Microsoft等)也终于认识到统一标准的好处,因此在W3C的组织下,网站标准开始被建立(以1998年2月10日发布XML 1.0为标志),并在网站标准组织的督促下推广执行。

7 HTML

● HTML是Hypertext Markup Language的英文缩写,即超文本标记语言,它是构成Web页面(Page)的主要工具。

● 用HTML编写的超文本文档称为HTML文档,它是由很多标记组成的一种文本文件,HTML标记可以说明文字、图形、动画、声音、表格、链接等 。

● 使用HTML语言描述的文件,能独立于各种操作系统平台(如UNIX,WINDOWS等),访问它只需要一个WWW浏览器,我们所看到的网页,是浏览器对HTML文件进行解释的结果。

关于前端网页设计的基础知识

8 网站

● 网站(Web Site)是一个存放网络服务器上的完整信息的集合体。它包含一个或多个网页,这些网页以一定的方式链接在一起,成为一个整体,用来描述一组完整的信息或达到某种期望的宣传效果。有的网站内容众多,如新浪、搜狐等门户网站;有个网站只有几个页面,如个人网站。

9 网页

● 网页(Web Page)实际上是一个文件,网页经由网址(URL)来识别与存取。当浏览者输入一个网址或单击某个链接,在浏览器中显示出来的就是一个网页。

● 网页是网站的组成部分,制作者可以将需要公布的信息按照一定的方式分类,放在每个网页上,网页里可以有文字、图象、声音及视频信息等。网页可以看成是一个单一体,是网站的一个元素。

网页设计知识汇总

10 首页

● 首页(Home page),它是一个单独的网页,和一般网页一样,可以存放各种信息,同时又是一个特殊的网页,作为整个网站的起始点和汇总点。例如,当浏览者输入搜狐网站地址“www.sohu.com”后出现在第一个页面,即sohu网站的首页,浏览者可以根据首页的导航进入其他页面,了解更多内容。

● 问题:首页和主页有区别吗?

● 通常网站为方便浏览者查找和分类浏览网站的信息,会将信息分类,并建立一个网页以放置网站信息的目录,即网站的主页。

● 并非所有的网站都将主页设置为首页,有的网站喜欢在首页放置一段进入动画,并将主页的链接放置在首页上,浏览者需要单击首页的链接进入主页。

11 网页的表现形式

● 静态网页:客户端与服务器端不发生交互

Internet最早出现时,站点内容都是以HTML静态页面形式存放在服务器上的,访问者浏览到的页面都是这些实际存在的静态页面。这些静态网页中每个网页都有一个固定的URL,且网页以.htm和.html等形式为后缀。静态网页没有数据库的支持,交互性较差,在功能方面有较大的限制。

● 动态网页:客户端与服务器端要发生交互

动态网页是指浏览器可以和服务器数据库进行实时数据交流的交互网页,而不是加上了动画等效果的动感网页。它包括服务器端运行的程序、网页、组件等。它会根据不同客户、不同时间和不同要求,返回不同的网页内容。例如ASP、PHP、JSP等都属于动态网页程序。

响应式网页设计布局

随着移动互联网的发展和微信的突起,移动端的响应式布局越来越重要了。

目前网站布局有以下几种:

1.定宽度布局

很多pc的网站都是定宽度布局的,也就是设置了min-width,这样一来,如果小于这个宽度就会出现滚动条,如果大于这个宽度则内容居中外加背景,这种设计常见与pc端。

2.响应式布局

所谓响应式布局就是流式布局+媒体查询,流式布局用来解决不同宽度的布局问题,外加媒体查询,可以调整布局,例如大屏幕是布局1,小屏幕是布局2,这种布局通吃pc和移动端,做到精细处,两者的效果都很好,缺点是媒体查询是有限的,也就是可以枚举出来的,只能适应主流的宽高。

3.rem布局

近期出现rem布局,参考:http://isux.tencent.com/web-app-rem.html,原理是,先按定高宽设计出来页面,然后转换为rem单位,配合js查询屏幕大小来改变html的font-size,最终做出所谓的完美自适应。

rem的缺点

rem一出好像所有移动端自适应不采用rem都很low一样,来分析分析,假设以100x100做出网页,那么采用rem+js完全可以自适应所有200x200,300x300,450x450等等高宽,问题来了,如果用100x100设计好后,来了100x200,100x300,100x400的手机,那么效果无非两种:

1.网页内容只局限与网页顶部,例如100x400的手机,网页内容只占用的100x100的部分

2.有人说可以高度也js+rem,那么效果无非是拉伸或者缩放不要抬杠

有人会说了,现实中不会有100x400的手机,我想说的是这种rem+js只不过是宽度自适应,高度没有做到自适应,一些对高度,或者元素见间距要求比较高的设计,那这种布局没有太大的意义。如果只是宽度自适应,那我更推荐的是响应式设计。

12 12 分享:

相关课程

发表评论

登录后才能评论,请登录后发表评论...
提交评论

最新文章