微信小程序制作
当前位置:网站首页 > 网站建设热文 > 网站设计基础知识大总结 返回列表

网站设计基础知识大总结

作者:admin 时间:2018-12-12 浏览量:1237

网站设计基础知识大总结,其实在实际工作中,网站设计是一项非常综合性的工作,不是你会西安网站设计的那个软件你就能设计除完美的网站的,你懂这点换不够,需要对不同功能类型的网站都有所了解,然后重点是结合客户的意向和想法,然后在进行设计,只有这样你设计出来的网站也未必能满足客户的需求的,一个好的网站设计师懂的倾听客户的i意见和建议,并且需要明白的是客户需要做的是企业网站还是行业平台性质的网站,明白这些之后,在综合性,全面的构思,只有这样才能设计出一个客户满意的网站,接下来我们来看,具体的网站设计需要懂那些专业技能呢?

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

1.2 网页
网页(Web Page)实际上是一个文件,网页里可以有文字、图像、声音及视频信息等。网页可以看成是一个单一体,是网站的一个元素。平常我们所听说的“新浪”、“搜狐”、“网易”等,即是俗称的“网站”。而当我们访问这些网站的时候,最直接访问的就是“网页”了。这许许多多的网页则组成了整个站点,也就是网站。

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

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

通常网站为方便浏览者查找和分类浏览网站的信息,会将信息分类,并建立一个网页以放置网站信息的目录,即网站的主页。并非所有的网站都将主页设置为首页,有的网站喜欢在首页放置一段进入动画,并将主页的链接放置在首页上,浏览者需要单击首页的链接进入主页。

1.4网页的表现形式
1.静态网页:客户端与服务器端不发生交互
访问者只能被动地浏览网站建设者提供的网页内容。其特点:

网页内容不会发生变化,除非网页设计者修改了网页的内容。不能实现和浏览网页的用户之间的交互。信息流向是单向的。

2.动态网页:客户端与服务器端要发生交互
动态网页是指浏览器可以和服务器数据库进行实时数据交流的交互网页,而不是加上了动画等效果的动感网页。动态网页技术的网站可以实现更多的功能,如用户注册、用户登录、搜索查询、用户管理、订单管理等。信息流向是双向的。

2.1 网站LOGO
1.通常网站为体现其特色与内涵,涉及并制作一个LOGO图像放置在网站的左上角或其他醒目的位置。

2.企业网站常常使用企业的标志或者注册商标。

3.一个设计优秀的LOGO可以给浏览者留下深刻的印象,为网站和企业形象宣传起到十分重要的作用。

2.2 导航条
导航条是网页的重要组成元素。设计的目的是将站点内的信息分类处理,然后放在网页中以帮助浏览者快速查找站内信息。

导航条的形式多种多样,包括文本导航条、图像导航条以及动画导航条等。

有些使用特殊技术(例如Flash、JavaScript、CSS)制作的导航条还可以具有下拉菜单的功能。

2.3 Banner
Banner的中文意思是横幅。Banner的内容通常为网页中的广告。

在网页布局中,大部分网页将Banner放置在与导航条相邻处,或者其他醒目的位置以吸引浏览者浏览。

2.4 内容版块
网页的内容版块是整个页面的组成部分。设计人员可以通过该页面的栏目要求来设计不同版块,每个版块可以有一个标题内容,并且每个内容版块主要来显示不同文本信息。

2.5 版尾或版权版块
版尾,即页面最低端的版块。

这部分位置通常放置网页的版权信息,以及网页所有者、设计者的联系方式等。有的网站也将网站的友情链接以及一些附属的导航条放置在这里。

3.1 文本
网页中的信息以文本为主。与图片相比,文字虽然不如图片那样能够很快引起浏览者的注意,但却能准确地表达信息的内容和含义。

3.2 图片
用户在网页中使用的图片格式主要包括GIF、JPEG和PNG等,其中使用最广泛的是GIF和JPEG两种格式。

3.3 超链接
超链接在本质上属于一个网页的一部分,是一种允许用户同其他网页或站点之间进行连接的元素。

超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是一个图片、一个电子邮件地址、一个文件,甚至是一个应用程序。

3.4 动画
在网页中为了更有效地吸引浏览者的注意,许多网站的广告都做成了动画形式。

网页中的动画主要有两种:GIF动画和Flash动画。其中GIF动画只能有256种颜色,主要用于简单动画和图标。

3.5 声音和视频
声音是多媒体网页的一个重要组成部分。用于网络的声音文件的格式非常多,常用的有MIDI、WAV、MP3和AIF等。很多浏览器不要插件也可以支持MIDI、WAV和AIF格式的文件,而MP3和RM格式的声音文件则需要专门的浏览器播放。

3.6 表格
在网页中表格用来控制网页中信息的布局方式。
包括两个方面:一是使用行和列的形式来布局文本和图像以及其他的列表化数据;二是可以使用表格来精确控制各种网页元素在网页中出现的位置。

3.7 表单

网页中的表单通常用来接受用户在浏览器端的输入,然后将这些信息发送到网页设计者设置的目标端。这个目标可以是文本文件、Web页、电子邮件,也可以是服务器端的应用程序。表单一般用来收集联系信息、接受用户要求、获得反馈意见、设置来宾签名簿、让浏览者注册为会员并以会员的身份登录站点等。



3.8 其他常见元素
包括悬停按钮、Java特效、ActiveX等各种特效。它们不仅能点缀网页,使网页更活泼有趣,而且在网上娱乐、电子商务等方面也有着不可忽视的作用。



4.1 文本编辑器
不仅在记事本中可以编写HTML代码,任何文本编辑器都可以编写HTML。比如写字板、word等,但保存的时候必须保存为.html或.htm格式。

有一些文本编辑器专门提供网页制作及程序设计等许多有用的功能,支持HTML、CSS、PHP、ASP、Perl、C/C++、Java、JavaScript、VBScript等多种语法的着色显示。

例如:Sublime text3、EmEditor、EditPlus、UltraEdit



4.2 Dreamweaver网页设计软件
这是现在使用最广泛的网页编辑工具之一。

Dreamweaver是Macromedia公司推出的网页编辑工具。

它是一个所见即所得网页编辑器,支持最新的DHTML(Dynamic HTML,动态HTML)和CSS标准。采用了多种先进技术,能够快速高效地创建极具表现力和动感效果的网页,使网页创作过程变得非常简单。

另外还有Microsoft公司开发的FrontPage也是设计网页和管理网站的软件。除了所见即所得的编辑功能之外,也可以直接编辑HTML标记,让设计者可以轻松的编辑网页。



4.3 Photoshop图像处理软件
Photoshop是Adobe公司推出的功能强大的平面图像处理软件,Photoshop在图像编辑、桌面出版、网页图像编辑、广告设计、婚纱摄影等各行各业的广泛应用,它已成为许多涉及图像处理的行业的事实标准。



4.4 Flash动画设计软件
Flash是Macromedia公司开发的一款优秀的网页动画开发软件,从简单的动画到复杂的交互式Web应用程序,它使用户可以创建任何作品。通过添加图片、声音和视频,可以使Flash应用程序媒体丰富多彩。

Flash被称为“最灵活的前台”,其独特的编译方式和跨平台的能力,广泛的应用(软件、游戏、Web应用程序、多媒体娱乐等多方面),使之越来越成为一种重要的工具。



4.5 Fireworks网页图像处理软件
Fireworks是Macromedia公司发布的一款专为网络图形设计的图形编辑软件,使用Fireworks都不仅可以轻松地制作出尺寸较小的图形、GIF动画。

如果将Photoshop比作全能的图像处理大师的话,Fireworks就是精于网页图像处理的专家。它在矢量图形的处理方面有其独特之处。

在Web应用方面,Fireworks是最早提供切片功能的图像处理软件。Fireworks支持在图像中绘制热区并直接生成网页文档,并且具备简单的GIF动画制作能力,同时支持将动画转换为Flash文件并嵌入到网络中播放。



5.1 CSS

CSS即层叠样式表(CascadingStyle Sheet)。在主页制作时采用CSS技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。

HTML=内容

CSS=表现

CSS带来的好处:

CSS使页面载入更快;

CSS可以降低网站的流量费用;

CSS使设计师在修改设计时更有效率,而代价更低;

CSS使整个站点保持视觉的一致性;

5.2 JavaScript
JavaScript是由 Netscape公司开发的一种脚本语言,可以被嵌入HTML文件中,它是一种基于对象和事件驱动,并具有安全性能的脚本语言。

在HTML基础上,使用JavaScript可以开发交互式Web网页,可以回应使用者的需求事件而不需要通过网络来回传输资料。

简单地说,当用户输入一项信息时,不需要先将信息传给服务器处理,再传回来,而是可以直接被客户端的程序处理。



6.1 网页布局
网页布局是网页设计的基础,目前网页的布局主要可归为三大类型:

1.分栏式结构

2.区域分布式结构

3.无框架局限式结构

分栏式布局

区域分布式布局

无框架局限式布局

6.2 导航设计
1.导航是网页设计中不可或缺的基础元素之一。导航就如同一个网站的路标,有了它就不会在浏览网站时“迷路”。导航链接着各个页面,只要单击导航中的超级链接就能进入相应的页面。

2.导航设计的好坏,决定着用户是否能很方便地使用网站。导航设计应直观明确,最大限度地为用户使用考虑,尽可能使网页切换更便捷。导航的设计要符合整个网站的风格和要求,不同的网站会采用不同的导航方式。

3.一般来说,在网页的上端或左侧设置导航栏是比较普遍的方式。网站采用上端文字作为一级导航,左侧树状结构菜单作为二级导航。

让用户了解当前所处的位置;

4.让用户能根据走过的路径,确定下一步的前进方向和路径;

5.不需要浏览太多的页面才能找到需要的信息,让用户能快速而简捷地找到所需的信息,并以最佳的路径到达这些信息;

6.让用户使用网站遇到困难时,能寻求到解决困难的方法,找到最佳路径;

7.让用户清楚地了解整个网站的结构概况,产生整体性感知;

8.对使用频率不同的信息作有序处理。



7.1 页面配色
设计精美的网站都有其色调构成的总体倾向。以一种或几种临近颜色为主导,使网页全局呈现某种和谐、统一的色彩倾向。

运用色系。先根据网页主题,选定一种主色,然后调整透明度或饱和度,也就是将色彩变浅或加深,调配出新的色彩。这样的页面看起来色彩一致,有层次感;一般来说,适合于网页标准色的颜色有3大系:蓝色、黄/橙色和黑/灰/白色。

使用对比色。可以充分利用对比色进行设计,同时注意使用灰色调进行调和。这样的作品页面色彩丰富.



7.2 文字艺术
文字在版面中一般占有绝大部分空间,是网页信息的主要载体。处理好文字关系到网页设计的成败。字体的选择、字号的大小、文字的颜色、行与行的距离、段落与段落的安排,都需要认真考虑。好的文字设计会给网页增色不少。



7.3 实例分析
1.网站描述
这是一家航空公司的网站首页。界面设计给人现代、驿动的感觉,这与公司的风格相一致。导航设计简洁利落,很值得学习借鉴。

2.布局
网页布局采用的是比较常见的分栏式结构。A为网站的Logo所在的区域;B为网站主菜单所在的区域;C为搜索与其他公共功能所在的区域;D为网站的内容区域,主要由文字和图片组成;E为版权信息所在的区域。

3.配色
网页选用蓝色系,象征天空,与网站主题一致。网页主要运用了两种蓝色,分别是“#14397D”和“1E95BD”。除此之外,网页文字的配色主要以白色和蓝色为主。

 


联系方式:18066528545   029-89298792

阅读过此文章的读者,还阅读过下面的文章

  • 小程序与原生APP那个好?下面我们就来一起了解一下小程序与原生APP那个好。以下是所整理的小程序与原生App的内容,希望对你有所帮助。

    小程序的优点:

    基于微信平台开发,享受微信自带的流量,这个优点最大
    无需安装,只要打开微信就能用,不占手机内存,体验好
    开发周期段,一般最多一个月就可以上线完成
    开发所需的资金少,所需资金是开发原生APP的一半不到
    小程序名称是唯一的,在微信的搜索里权重很高
    容易上手,只要之前有HTML+CSS+JS基础知识,写小程序基本没有大问题
    基本不需要考虑兼容性问题,只要微信可以正常运行的机器,就可以运行小程序
    发布,审核高效,基本上午发布审核,下午就审核通过,升级简单,支持灰度发布
    开发文档完善,社区活跃
    支持插件式开发,一些基本功能可以开发成插件,供多个小程序使用
    小程序的缺点:
    局限性很强(比如页面大小不能超过1M,不能打开超过5个层级的页面,样式单一,小程序的部分组件已经是成型的- 了,样式不能修改,比如幻灯片,导航)只能依赖于微信依托与微信,无法开发后台管理功能
    不利于推广,推广面窄,不能分享朋友圈,只能分享给朋友,附近小程序推广,其中附加小程序也收到微信限制
    后台调试麻烦,因为API接口必须https请求,且公网地址,也就是说后台代码必须发布到远程服务器上;当然我们可以修改host进行dns映射把远程服务器转到本地,或者开启tomcat远程调试;不管怎么说终归调试比较麻烦
    前台测试有诸多坑,最头疼莫过于模拟器与真机显示不一致
    js引用只能使用绝对路径,不能操作DOM
    原生App优点:
    原生的相应速度快
    对于有无网络操作时,譬如离线操作基本选用原生开发
    需要调用系统硬件的功能(摄像头,拨号,短信蓝牙…)
    在无网络或者弱网情况下体验好
    原生App缺点:
    开发周期长,开发成本高,需要下载
  • 小程序和Vue写法的区别?下面我们就来一起了解一下小程序和Vue写法的区别。以下是我所整理的小程序和Vue写法的区别,希望对你有所帮助。

    遍历的时候:

    • 小程序wx:for=“list”,
    • 而Vue是v-for=“item in list”

    调用data模型(赋值)的时候:

    • 小程序:this.data.item // 调用,

    • 小程序:this.setDate({item:1})//赋值

    • Vue:this.item //调用,

    • Vue:this.item=1 //赋值

  • 小程序调用后台接口遇到那些问题?下面我们就来一起了解一下小程序调用后台接口遇到那些问题。以下是所整理的小程序调用后台接口遇到的问题,希望对你有所帮助。

    数据的大小限制,超过范围会直接导致整个小程序崩溃,除非重启小程序

    小程序不可以直接渲染文章内容这类型的html文本,显示需要借助插件
    注:插件渲染会导致页面加载变慢,建议在后台对文章内容的html进行过滤,后台直接处理批量替换p标签div标签为view标签,然后其他的标签让插件来做
  • 分析微信小程序的优劣势?下面我们就来一起简单的了解一下微信小程序的优劣势。下面是所整理的微信小程序的优劣势,希望对你有所帮助。

    优势:

    容易上手,基础组件库比较全,基本不需要考虑兼容问题
    开发文档比较完善,开发社区比较活跃,支持插件式开发
    良好的用户体验,无需下载,通过搜索和扫一扫就可以打开,打开速度快,安卓上可以添加到桌面,与原生APP差不多
    开发成本比APP要低
    为用户提供良好的保障(小程序发布,严格是审查流程)

    劣势:
    限制较多,页面大小不能超过1M,不能打开超过5个层级的页面
    样式单一,部分组件已经是成型的,样式不可修改,例如:幻灯片,导航
    推广面窄,不能分享朋友圈,只能通过分享给朋友,附加小程序推广
    依托与微信,无法开发后台管理功能
    后台调试麻烦,因为api接口必须https请求且公网地址
    真机测试,个别安卓和苹果表现迥异,例如安卓的定位功能加载很慢

  • 简单描述下微信小程序的 相关文件类型。下面我们就来一起了解一下微信小程序的 相关文件类型。以下是所整理的微信小程序的 相关文件类型,希望对你有所帮助。

    wxml 模板文件,是框架设计的一套标签预言,结合基础组件,事件系统,可以构建出页面的结构

    wxss 样式文件,是一套样式语言,用于描述WXML的组件样式
    js脚本逻辑文件。逻辑处理网络请求
    json配置文件,小程序设置,如页面注册,页面标题及tabBar
    app.json 整个小程序的全局配置,包括:
    pages:\[所有页面路径]
    网络设置(网络超时事件)
    页面表现(页面注册)
    window:(背景色,导航样式,默认标题)
    底部tab等
    app.js 监听并处理小程序的生命周期函数,声明全局变量等
    app.wxss 全局配置的样式文件

  • 请谈谈原生开发小程序,wepy,mpvue的对比?下面我们就来一起了解一下原生开发小程序,wepy,mpvue的对比。个人认为,如果是新项目,且没有旧的 h5 项目迁移,则考虑用小程序原生开发,好处是相比于第三方框架,坑少。

    而如果有 老的 h5 项目是 vue 开发 或者 也有 h5 项目也需要小程序开发,则比较适合 wepy 或者 mpvue 来做迁移或者开发,近期看wepy几乎不更新了,所以推荐美团的mpvue。
    而如果如果团队前端强大,自己做一套框架也没问题。

029-86195145 180 6652 8545 西安嘉瑞德网络科技公司
工作时间:周一到周六 8:30-18:30
邮箱:2528823962@qq.com
QQ:2528823962
地址:陕西省西安市未央元朔路明丰伯马都A座10820室
  • 微信小程序制作微信二维码
    扫码咨询
Copyright © 2015 西安嘉瑞德网络科技有限公司 陕ICP备17015187号-1