网页设计
生活
用户界面设计
网页布局

现在网站网页设计用什么软件,什么技术?

比如点点、知乎
关注者
406
被浏览
404,564

35 个回答

网站设计可以分为几个阶段:

  • 原型设计阶段
  • 编码阶段
  • 测试阶段

原型阶段

原型设计阶段的任务就是根据用户的需求描绘出页面的草图。这时候最为有效的工具其实就是铅笔和纸。当然,也有一些比较不错的原型设计工具,比如balsamip, mockingbird 等。 当然,传统的平面设计工具在这个阶段也有帮助,比如photoshop等。

关于原型设计工具的问题,stackoverflow有一个详细的讨论:

参考: stackoverflow.com/quest

编码阶段

在完成了基本的效果图设计后,就需要将相应的设计效果转换为html , css和javascript,这时候,常用的工具有dreamweaver, expression blender 等。但亦有不少前端工程师在这个阶段就会采用文本编辑器,比如vim,textmate来实现原型。

由于CSS是一个与视觉效果密切相关的要素,因此在CSS的设计方面,有大量所见即所得的辅助设计工具,

比如这个网站: css3.mikeplate.com/ 就可以用于在线生成 css样式

另外,网站设计和前端逻辑一般来讲是不能完全分离的,对于前端设计师来说,掌握基本的javascript知识是需要的,如果能够熟练地掌握一种基本的js框架,比如jquery那就更好了

测试阶段

由于众所周知的原因,目前主流的某一知名浏览器经常有着与其他浏览器截然不同的表现。作为一个认真的前端工程师,你应该还要掌握跨浏览器兼容性测试的技术和工具。

要理解每一个浏览器的css/html 实现上的差异,以及如何使用工具进行检测。

比如:

1. browsershots.org/ 在线的兼容性测试工具

//注:我的个人理解楼主的问题主要是关注网站的前端设计,因此回答的内容也就局限于前端的技术,而没有涉及后端的开发技术

编辑于 2011-08-27 15:52

这个问题其实是分两个部分:

题主开口先提到的是网页设计,但最终提问是用什么技术,不清楚到底是从设计出发,还是从编程出发,保险起见,这两个方面皮皮都来分享一下经验~

网页设计

设计的基本功我就不多赘述了,直接回答题主的主要问题:

——网页设计用什么软件

「Pixso」 —— 原型、设计、交付、资源管理一体化协作平台

适用场景:原型阶段、设计阶段

使用地址: Pixso 协同设计软件


优势:

全平台适用,无需下载安装,直接在线设计!

Pixso支持Windows、macOS、Linux各个平台!

并且Pixso基于云端搭建,打开网页就可以进行设计,对电脑的配置要求不会太高,更降低了使用门槛,对于想尝试的新手来说非常友好~

同时因为线上操作,所以所有的文稿都会自动保存,不存在突然死机而丢失内容的情况,让设计更安心~

也可以手动保存历史版本,可以随时回溯

可多人协同,协作方便

作为基于云端的设计软件,Pixso无需再通过第三方平台来进行传输设计稿,而是使用「链接」来分享,既压缩了传输步骤,也节约了沟通成本。

完善的资源库,提升设计效率

团队资源库:团队成员可以自行上传自创组件,其他成员都能下载使用;更新时也将全局更新。

官方资源库:目前市面上绝大多数的设计软件都不会自带资源库,通常需要从其他网站导入,Pixso就不同啦!官方提供超2300+常用素材,内嵌在编辑器中,可直接拖拽至画布中使用,节约了去其他网站复制粘贴的时间。

除此以外,Pixso的UI设计基础功能也非常完善,从钢笔工具、快速智能图形、布尔运算,再到智能选择、自动布局,全部具备,能很好的满足网页设计需求!


「Axure」

适用阶段:规划阶段、原型阶段

下载地址: Axure RP - UX

优势:

利于梳理网站的目录结构与层级关系

Axure RP 能帮助网站需求设计者,快速地搭建出整个信息架构组成的重要部分。

使用灵活,既可以画图也可以写文档

可以将文档集合到一起,对于开发来说更好阅读,也更利于保存。

交互效果多

更多的人用Axure还是为了其原型功能,设计师在使用其进行网页设计的时候,可以添加一些交互动效,来模拟最终呈现效果。


「Mindmaster」

适用阶段:规划阶段

使用地址: MindMaster 多平台思维导图软件,让您的创意破茧而出

优势:

多平台可用,云端储存

MindMaster会对作品进行实时储存,始终保障用户的文件安全。导图作品可以多端平台同步更新,让思维导图文件在电脑、手机、网页无缝衔接。不管是出差办公还是更换设备,用户都能在不同的时间地点快速找回自己的作品。

拥有独家模板社区,10万+用户作品

MindMaster有一个丰富的思维导图社区,里面有数十万幅原创的思维导图作品和模版,涵盖教育、职场、自我提升等各大领域的知识精华。


—— —— —— —— —— —— —— —— —— —— —— —— —— —— —— —— —— —

说完了网页设计的软件,再来说说网页制作的技术

——网页制作用什么技术

网页制作

网页制作也分很多种,比如电商网页、博客和大型网站,所需要掌握的技术也是不一的。


「电商网页」

如果你只想做电商网页,淘宝之类的电商平台应该都有提供模板,在后台界面里拖拖点点就能做出一个网页。


「博客」

如果你只想做个博客,在服务器上部署一个 WordPress 就可以搭建自己的博客了,可以在网页上写文章和看文章。


「大型网站」

但如果你是希望以前端程序员为目标,完成各类型网页制作,那就学 HTML、JS、CSS,代码是躲不掉的,再进一步学一下 Vue、React、Webpack,就能找工作了,

然后再学学 NodeJS、Linux、MySQL、Redis、Docker 就比较接近高级前端工程师了。


网页设计目前在网络上有着不少的自学教程,但想要以此为职业,是需要下功夫的,不仅要掌握软件,更需要参透用户心理,进行交互设计。希望皮皮的回答能对看到这里的你有所帮助~

更多互联网行业干货请戳:

→ 网页设计网站推荐

产品经理软件推荐

编辑于 2021-12-03 14:44

网站建设的核心不在于技术,而是在于思维!

网站建设行业从90年代发展至今,经历了多次更新换代,网站开发技术已经足够于成熟,过去几年我们一直没有过多强调开发技术,因为我们知道网站建设的核心不在于技术,而是在于思维。技术只是作为基础,支撑着我们实现企业所有需求,更像是工具,但是如何用好这个工具就是我们需要深入研究的问题。

网站技术开发的三个原则

当我们力求做好一个优质网站时,自然需要将网站建设的每一个环节做到最好,甚至是在上一个环节之下,实现更深层次地提升,在技术环节上,同样如此。

基于网站建设的三大思维(产品、数据、增长),我们提炼出了足以指导我们进行技术开发的三个原则:

1.100%还原度

2.用户体验舒适

3.实用且便捷


① 力求100%还原度

但是很多企业在技术开发时,会遇到一个非常常见的问题:为什么设计稿和网站成品差距甚远。最终前端所呈现出来的网站,才是真正的一个“产品”,因此,还原度尤为重要。这是技术开发的重要的第一步!

除去过于浮夸导致的技术无法实现的需求外,技术最为基础的原则就是竭尽全力100%还原所有需求,例如基础的字体、颜色、页面排版,尺寸大小等等。如果无法实现最基础的还原,那就更不用追求流畅度、用户体验等其他非本质需求的东西了。

② 用户体验舒适

用户体验是个老生常谈的话题了,从网站建设三大思维中的产品思维来讲,以用户为本是核心,因此,在网站开发阶段,对于每一个交互,每一个点击、切换、刷新,每一个动作,都需要尽可能更加贴合用户思维和行为习惯,确保良好的用户感受,追求舒适的体验。

这方面是初级的技术人员会忽视的事,“跑起来就行了”这是非常错误的想法。网站不仅只为我们的访客群体所设计,还需要为内部人员在考虑,比如网站运营人员上传内容、更新内容,也同样是用户。

③ 安全稳定

我们在上网的过程中,经常会不小心就进到一些赌博、色情网站,明明我们点击的不是这种网站,其实这是因为很多没有做安全防护的企业网站,这是最常见的黑客攻击,篡改页面挂载了病毒,导致网站被非法劫持。

为了确保网站能够正常使用,我们在技术开发时,需要对网站进行加密处理,安装安全防护软件等,并且在上线前进行安全检测,修复存在的网站漏洞。在质检时,需确保所有安全防护质检项目都能通过。

近期,我们整理《网站建设白皮书》,里面包含网站建设的全过程指南以及关键方法论,感兴趣可以关注我们公众号,回复【建站白皮书】直接领取。

以这三个点为原则,即可正式开始网站的技术开发,基本的流程为:前端开发(可视化)-后端开发(数据联动)-测试(BUG修复优化)。

测试方面这里就不过多讲解,基本是以内部人员进行使用测试,记录网站存在的BUG或者不合理的地方,之后再进行优化即可,核心还是在前后端开发上,也是技术开发最为基础的两部分。

一、前端

01 HTML+CSS+JS

前端工程师要根据网页设计师交来的设计稿,实现页面重构和页面逻辑跳转,优化网站浏览体验,以及网站界面交互动效与功能的制作。

可以从广义上来说,所有用户终端的产品与视觉交互有关的部分,都是前端工程师的专业领域。 简单来说,前端开发就是将前端界面呈现给访客的过程,目前常规的网站前端技术配置是 HTML+CSS+JS 代码的组合。

简单来讲,这三种代码主要以三种不同形式进行表达,负责不同的功能,从而实现网站前端的展示和使用。

HTML-结构:html(超文本语言)作为一种标记语言,主要作用是表述网站页面的信息和信息之间的关系,是网站形成一个整体,目前主流的版本为HTML5。

CSS-表现:CSS(层叠样式表)是一种用来表现HTML或者XML等文件样式的语言,也就是网站的信息呈现出来的外观形式主要都是由CSS来实现。

JS-行为:JS(JavaScript)是一种解释型的脚本语言,主要作用在于为HTML页面提供交互行为的实现,这也让目前的网站开发更加多样化,可玩性更高。

代码是技术的基础,如果作为网站建设的负责人起码需要了解其中的基础逻辑,只有了解这些才能理解前端工程师的工作,以便更好地配合他们。


02 自适应与响应式

1.自适应与响应式区别

自适应和响应式在网站建设领域应该是一个老生常谈的话题,经常会混淆,因为本身在命名上就较为模糊,很多情况下只有追溯本质技术才能分得清。我们可以把响应式网站看作是流动的,而是自适网站应则是固定分割。

以用户体验来讲:

自适应:需要开发多套界面,对不同分辨率屏幕进行判断,进而分配不同页面进行适配。

响应式:只需开发一套界面,对不同分辨率进行代码处理(缩放),实现不同布局和内容适配。


基于用户体验,如果你选择自适应开发,技术人员需要起码开发三套界面,分别为PC端、手机端、平板端,根据预先设置的判断标准范围进行适配。自适应网站在同一分辨率范围下的变化,更多是以宽度缩放为主,像大多数的平台网站、商城网站都使用自适应技术进行开发。

如果你选择响应式开发,技术人员只需开发一套界面,在代码中嵌入一些布局的判断,通过检测不同分辨率,代码自动进行处理,实现布局变化、尺寸缩放等,适配每一个分辨率下的屏幕。响应式网站的根据不同分辨率的变化不只是简单的宽度放缩,更像是流动的网格,在布局上也会进行变化调整,拥有液态网格和液态图片技术。


2.自适应与响应式怎么选?

目前主流的企业网站都是响应式,不管是开发还是运维,响应式更加简单、快捷,并且具备良好的用户体验。如果追求极致用户体验的话,自适应是更优的选择,但是后续需要进行修改的话,基本是每套界面都需要进行调整,在时间成本和繁琐程度都较高。

如果有在移动端以及PC端进行网站推广,建议是双端分离。PC端以响应式为主,移动端在单独开发一套界面,可以是自适应也可以是响应式,都是以创造良好的用户体验为目的。其实本质就是双端分离,提升适配度,确保更为优质的用户体验,从而提高我们的广告转化率。

以下是目前市面主流的分辨率、浏览器,需要进行兼容性重点检查:

分辨率:

2560×1600、2560x1440、2048x1152、1920×1200、1920×1080、1680×1050、1600x900、1536x864、1440×900、1440×960、1366×768、1280×800、1280×720、1024×576、800x600、414x896、393x873、375x812、360x800、360x780......

浏览器:

Chrome、Safari、Firefox、Microsoft Edge、搜狗、360、猎豹、百度、QQ、Opera、UC、遨游、IE......


二、后端

01 语言+环境+数据库

前面说到,前端开发是用代码将网站页面呈出来,属于无法进行数据调用调配等交互的“静态页面”,因此,后端开发就是让网站的服务器、数据库、系统程序实现交互,最直观的体现就是网站后台管理系统。

比如,商城常用的会员系统,需要通过注册、表单填写等获取信息,收入数据库之后为登录调配数据,实现数据动态交互,运营人员可以从后台进行查看会员信息;又比如我们通过企业网站后台的开发和上传资讯文章等,都是由后端来完成。

常规的后端技术包括「开发语言」、「部署环境」、「建立数据库」。

目前主流的开发语言有java、php、python等,常规的网站后端使用php会更加高效快捷,安全系数较高的是java,一般银行、政府、大型平台和办公系统用的都是java。之后采用Apache、Nginx、Linux等进行开发环境部署,以及建立MySQL、sqlserver等数据库,实现网站数据存储。


02 网站后台-内容管理系统

网站后台是网站非常重要的一部分,后续的网站运营中使用后台的频率非常高,例如常规的新闻资讯栏目的文章上传和更新,页面信息修改等,都需要在后台进行操作。

网站后台主要以下面三点为中心进行开发:

  1. 安全稳定
  2. 简单实用
  3. 功能强大

安全稳定是基础,简单实用是目的,功能强大是为后续网站优化和营销推广提供帮助。在功能上,我们可以按实际需求进功能开发,比如与一些统计工具的联动,实时获取网站流量信息、用户行为等,或者与第三方功能进行对接,实现营销自动化。

这里要特别注意网站的SEO和后台SEO设置功能。


三、网站SEO

SEO即搜索引擎优化,是一种利用搜索引擎的搜索规则,进而提高网站在有关搜索引擎内的自然排名的方式。

时至今日,SEO已成为建站的标配,企业在建设网站时,不仅要考虑用户,还需要考虑到搜索引擎的抓取,需要满足搜索引擎的搜索规则。

基础的SEO规范质检表:

网站的SEO规范是一个需要注意的重要课题,除去网站后台的页面基础TDK设置功能之外,我们在开发时还需要注意网站框架、内容元素、代码等是否符合SEO规范。确保符合常规的搜索引擎的抓取规则,才能为后续的网站SEO提供牢固的地基,也能让SEO效果更加显著。


总结

其实还有许多前端技术类型没讲,像视差滚动、3D动效等等,都是目前较为主流的交互技术,感兴趣可以参考我们过往的案例,当中都有讲到一些,感兴趣可以看看。

事实上,技术开发是网站建设中非常考验技术含量的一环,就如开头讲到的,技术开发的还原度、用户体验和安全性是技术考核的关键点。不仅是产品经理、设计师需要懂得产品思维、数据思维、增长思维,技术人员同样需要了解,这样才能实现网站建设全过程同频,最终才能达成统一目标。


希望能对大家有一定的帮助,资料整理和原创内容撰写不易,喜欢的可以点赞、收藏,这是对我们内容团队最大的支持~笔芯。

最后,更多内容可以关注公众号(增长超人),可在后台回复【建站白皮书】领取《企业官网建设实战指南》。

推荐阅读:

网站视觉设计的本质是什么?如何平衡艺术与商业?

原型图设计有必要吗?怎么画好原型图?

网站数据分析具体分析什么?如何做好历史数据分析?

建站市场调研怎么做?如何做好市场调研?

编辑于 2022-03-09 15:17

网页设计不是理工型技术工种!

几乎所有的新手都以为网页设计就是网页制作,需要懂编程知识,这其实是个误解,网页设计是纯粹的设计领域的东西,你只需要会平面设计,会使用ps软件就好了。

所以当你想在网页设计领域大展身手时,如果别人告诉你要学什么html,css,js等等相关知识,不要被带偏了,那些是技术小哥的事情,你只需要会画图就好了,把网页原型图画的美美的才是你该关心的。

如图,这张图片就是一个网页设计原型图,制作成网页还需要转成代码哦。

当然,现在也有很多快捷工具,不是一定要懂得代码才能制作网页,会作图就行了,给大家推荐一个网页制作利器,因为是现成的设计,所以你也不需要设计啥了。

www.vipcom.cc 超级单页。

适合不懂代码的朋友快速生成网页,生成的网页一样很漂亮

编辑于 2021-12-15 13:36

橱窗式网站可以用 wordpress, 简单好用,就算没有任何code的知识也可以做出一个非常漂亮professional 的网站。

e-commerce 网站可以用prestashop 和 magendo

网站mock-up 可以用 balsamiq, 或者just in mind prototyper来设计。

在选择网站的颜色时可以用 adobe color cc, 这是一个在线的取色工具:

color.adobe.com/zh/crea

最终的设计呈现出的效果主要通过ps来完成

发布于 2016-04-25 00:00

现在网站网页设计常用的5款软件,你用过哪个?

仅仅依靠一种网页设计软件来制作精致大方的网站是不够的!

今天小凡总结整理了一些常用的网页设计软件,快来看看吧~



1.开发布局软件的网页

(1)开发代码编程软件

它的特点是可以快速创建静态网页、动态网页,并产生代码。可以编辑专业的可视化网页,也可以管理和维护网站。

(2)制作智能网站软件

它的特点是快速制作一个完整的网站系统,不仅包括各种页面,还包括相关的后台、域名、服务器等。还会有很多现成的网站模板可供不同风格的选择。对于网站建设者来说,制作一个网站就像积木一样简单。它非常方便,可以组合他们最喜欢的模板并填写页面信息。


2.网页图像处理软件

(1)Photoshop

它在图像处理方面一直处于领先地位,并且具有非常强大的图像处理能力。它可以帮助处理网页图像,深受设计师的喜爱。它可以创建一个网页照片画廊,并配合Imageready软件设计GIF动画。

(2)Firework

它可以让用户快速掌握图像处理、图像变换、GIF动画、导航栏等方面的使用方法。


3.网页动画制作软件

Flash是一个非常著名的网页动画制作软件。它具有文件容量小、视觉效果优异等特点。它的效果很好,深受设计师和广告商的追捧。



希望以上的内容对大家有所帮助~

发布于 2022-05-24 16:37

设计出图一般都是用Photoshop,切图布局用DW,FLASH用得比较少,JS特效知道怎么套用就行不需要深入,测试需要火狐,IETESTER,谷歌,世界之窗,这几类,主要是还考虑IE的兼容,目前国内IE用户的多。好的网页设计师要不就是效果图好(偏重平面设计能力),要不就是DIV+CSS和SEO能力强,看你怎么选择方向,个人觉得前者适合企业站创意站展示站这类设计要求高的项目,后者更适合在大型站项目里面做,比如SNS,B2C这类功能站。个人愚见,如有错误望高手一笑而过,希望对你有帮助

发布于 2011-09-02 10:50

HTML
超级文本标记语言是 标准通用标记语言下的一个应用,也是一种 规范,一种 标准,它通过标记符号来标记要显示的网页中的各个部分。


JavaScript
JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。


Adobe Photoshop
Adobe Photoshop,简称“PS”,是由 AdobeSystems开发和发行的 图像处理软件。这是必须要撑握的。


Adobe Dreamweaver
DW是集 网页制作和管理网站于一身的所见即所得 网页代码编辑器。利用对 HTML、 CSS、 JavaScript等内容的支持, 设计师和 程序员可以在几乎任何地方快速制作和进行 网站建设


Flash(交互式矢量图和Web动画标准)
网页设计者使用 Flash 创作出既漂亮又可改变尺寸的导航界面以及其他奇特的效果。

Lanhu(团队协作工具)以上制作的成果都可以通过蓝湖达到更好更快的效果。

发布于 2019-07-15 15:36

页面原型设计现在比较流行用axure

=========================================

Axure 特点  

1.Axure 快速创建带注释的wireframe文件,并可根据所设置的时间周期,自动保存文档,确保文件安全。

  2.Axure 可以在不写任何一条html与javascript语句的情况下,制作丰富的交互效果。

  3.Axure 根据设计稿,可以一键生成一致而专业的word版本的原型设计文档。

编辑于 2011-09-01 09:13

网页设计需要学什么软件?

网页设计需要学什么软件?21世纪是网络的时代,据官方统计现在中国的网民已经超过了3亿,是全世界网民数量最多的国家。每一个人、每一个企业都在上网找寻自己或他人所需要的各种产品,那么在找寻过程中人们必定会进入网站去浏览网页上的产品,如果网站内容或者产品本身一点都不好看、打开的很慢、甚至无法显示,势必会对人们的购买和咨询欲望大打折扣,这时候就需要一名专业的网页设计人员来把我们的网页或产品做美工以及优化甚至重新建立一个全新的网站,那么一个网页设计师需要学什么软件呢?

网页设计需要学什么软件?学习网页设计,什么软件适合初学者,功能又很全的。下面小编就给大家介绍几款网页设计常用的软件:

html语言

一个优秀的网页设计师,必须要懂得html语言,这是我们学网页设计和网站开发的基础课,html语言虽说不懂的人看起来很难,但真正学起来还是很容易的。

javascript脚本

这个可能相对html语言来说,有点编程的意思了,但如果想做出特别的效果出来,也是必不可少的。

photoshop

这是必须要撑握的,页面美观如何全靠photoshop在制作效果图时设计的如何。

dreamweaver

这是专业的网页设计软件,可以像word一样简单来开发html言语页面,也是网页布局非常简单的一个可视化工具。

flash

这是网页动画软件,可以制作出非常酷非常炫的页面出来。

以上

发布于 2017-10-13 10:08

网站的网页设计又叫界面设计。界面设计的工具多种多样,至于技术上,通常是HTML、CSS这类代码。那么就会有两个部分:一个是网页框架的搭建和交互设计,一个是代码的编写。这里介绍几款满足以上两个基本需求的工具。

1. 墨刀

利用墨刀产品+设计合一的特性,制作网站设计的高保真原型图,形成一个网页框架的搭建。在UI/UX交互设计上,组件库的交互组件、页面之间的交互功能、组件与组件的交互功能、事件触发等,都可以实现几乎所有的交互设计。利用素材广场的模板,一键即可引用,并且可以查看相关的CSS代码。配合标注功能可以明确网站原型设计中的元素大小、间距等信息,更加一目了然。



2.Webflow

Webflow是一款能够实现直接在浏览器上创建交互布局的网站设计工具。不需要编写代码,就能够在可视化的画布中进行网站设计。支持HTML5、CSS和JavaScript,配合内置的SEO工具,可以对元数据进行控制、规范标签等。根据用户需求,可以随意创建内容结构,并且通过自定义设置或API添加内容,这样可以让用户更加方便进行内容管理。



3.Adobe Dramweaver

Adobe旗下的Dramweaver是一款能够使用智能简化的编码工具,进行网站快速构建的网站设计工具。同样,支持HTML、CSS、JavaScript和其他Web标准,在代码编程这一块能够完美实现用户所有的需求。通过Adobe云,可以在线分享制作好的网站设计给团队内部。


发布于 2021-09-22 19:32

最基本需要会前端技术,html,css,js这些都是入门必须的

后端开发一般需要熟悉php或.net,知乎应该后台用的是.net,数据库还需要学mysql或mssql。太多了。

软件分前端开发软件和后端开发软件。

前端软件:
菜鸟练习期一般用Dreamweaver,专业的一般用vscode 或hbuilder这些,因为可以开发页面,app或vue单页面。

后端软件
后台开发就更细了,主要分php和net开发,后台不建议自己开发,这个涉及知识点太多了,一般都是选择cms系统来做后台系统,比如pageadmin、phpcms这些cms系统经常用来做网站后台。

发布于 2021-04-14 10:06

网站设计会用到多个设计软件,我来举几个例子说一说。网页设计肯定是会遇到需要处理图片的问题,那么ps或是Pixlr就显得十分重要了。Pixlr更像是简单版的photo shop,当然功能也还不错,ps就更不用说了,功能是非常强大的。

除此之外,要进行网页的设计也离不开数据库和一些网页设计工具的帮助,那么就可以选择 墨刀设计软件。墨刀设计软件是国产的一款比较不错的设计软件,可以使用sketch插件进行原型的分享。墨刀的模板和素材库很强大,而且拥有很不错的交互能力,可以满足团队间的合作设计,并且对于初次使用的设计人员来说,简洁的界面和便捷的工具都很好用。

当然,像一些传统的工具也是值得使用的,譬如说,如果你想要进行图标的设计,那么就可以使用到ai,如果要加入视频的元素,那么就可以使用到ae,它是一个视频剪辑设计软件,是制作动态影像不可或缺的工具。它可以很好的满足网页设计中可能用到的运动图片和视觉效果的设计。再诸如什么figma之类的都可以去尝试使用,不局限,可按需求选择。

发布于 2021-11-02 15:52

Dreamweaver(简称DW)这个软件不仅热门也是最合适新手的,DW是可视化设计的,也就是说不需要敲代码也可以做出网站来,当然不敲代码辅助ps软件更美观方便,技术的话CSS/js/html h5 PHP 和Java语音

编辑于 2017-12-20 11:50

背景

前几天在论坛看到想保护公司的服务器共享文件的安全,但是员工自己的电脑总是忘记关闭关机,想再设置一个密码。可是这样不应该先解决一下员工电脑总是忘记关的问题么?

如果你要离开设备几分钟,最好将其锁定,以免他人看到屏幕上的内容,或访问设备上的任何内容。按 Windows 徽标键 + L 立即将其锁定。

动态锁

当然,也可以通过动态锁的方式实现,Windows 可以使用与你的电脑配对的设备检测你何时离开,并在你的已配对设备超出蓝牙范围后立即锁定你的电脑。这使得当你离开电脑并且忘记将其锁定时,其他人更难于访问你的设备。配对完成后,只需在离开时随身带上手机,你的电脑便可在你超出蓝牙覆盖范围之后大约一分钟自动锁定。

动态锁

但是主动锁定和动态锁,一个要主动一个要配置和蓝牙配合都有一些不足,如何更方便的实现?

临时加更干货分享

大家能看到这里,已是对我们的支持了。分享一组2023年2月录制的C#零基础教程。我们喜欢做这样的分享,它足够的基础,对新手友好。如果需要的话,就来免费领取吧!

资料免费自取:

由于内容过多不便呈现,需要视频教程和配套源码的小伙伴,点击下方卡片!

也可点击下方卡片:点击后自动复制威芯号,并跳转到威芯。搜索威芯号添加,内容已做打包,备注知乎

即可免费领取,注意查收!

屏幕保护程序

屏幕保护程序在我印象里好像是 Windows XP 的时代,现在好像没见过几个 Win10 和 Win11 用户去专门的设置这个,倒是看过 Win7 的用户在用。

针对上门提出的超时锁定,这个屏幕保护程序可以大有作为,我们可以勾选“在恢复时显示登录屏幕”,这样我们在不使用电脑第一段时间后就需要输入密码了。

转到"设置>个性化>锁屏界面,然后选择"屏幕保护程序设置"。

屏幕保护程序

屏幕保护程序有用吗

电脑里的屏幕保护程序对保护屏幕有用吗?作为一个古老的功能,实际上屏幕保护程序仅对使用图形界面操作系统的 CRT 显示器有保护作用。对于CRT来说,屏幕保护是为了不让屏幕一直保持静态的画面太长时间。

因为不同显示器的工作原理不同,比如笔记本常用的 LCD, 一直开着屏幕保护反而是帮了倒忙,所以无论什么显示器如果是长时间不用电脑而又需要主机处于运行状态的话,把显示器关掉才是明智的做法。

这里我们可以同时配合“屏幕超时设置”,在一定时间下关闭电脑屏幕。比如1分钟进屏幕保护,3分钟直接关闭屏幕。


屏幕超时设置


设计一个屏幕保护程序

在设计之前我们需要了解一些基本的常识。

屏幕保护程序命令行参数

屏幕保护程序的开发需要提供一些启动参数供设置和预览。Windows 通过命令行参数与屏幕保存程序通信。具体可查阅文档:屏幕保护程序命令行参数[1]

参数说明
显示设置对话框
/c显示设置对话框,使用模态对话框显示到前台
/p <HWND>在<HWND>窗体下预览效果
/s启动屏幕保护程序
/S右键scr的Test启动

了解了启动参数,我们需要对软件的参数启动进行处理。

/// <summary>

/// <summary>
/// 应用程序的主入口点。
/// </summary>
[STAThread]
static void Main(string[] args)
{
    Application.EnableVisualStyles();
    Application.SetCompatibleTextRenderingDefault(false);

    if (args.Length > 0)
    {
        switch (args[0].ToLower().Trim().Substring(0, 2))
        {
            case "/p":
                Main pri = new Main(new IntPtr(long.Parse(args[1])));
                pri.ShowDialog();
                break;
            case "/s"://Test 或 执行屏保,大写为测试,小写为被启动,这里不做区分
                Application.Run(new Main());
                break;
            default:
                ShowSetting();
                break;
        }
    }
    else
    {
        ShowSetting();
    }
}

static void ShowSetting()
{
    MessageBox.Show("这个屏幕保护程序没有可以设置的选项。","黑客模拟器",MessageBoxButtons.OK,MessageBoxIcon.Information);
    Application.Exit();
}

效果实现思路

我们常常会在一些影视作品中里看到一些黑客高手,在电脑前一阵噼里啪啦“黑”进别人的安全系统的场景。

GeekTyper[2] 就是国外网友制作的几个用来装 X 的娱乐网页。


GeekTyper


所以软件的主要实现是放置一个无框的窗体,通过 WebBrowser 来显示黑客效果的网页。我们只需要在软件启动时用 WebBrowser 加载喜欢的效果的网页就可以了。

this.FormBorderStyle = System.Windows.Forms.FormBorderStyle.None;
this.FormBorderStyle = System.Windows.Forms.FormBorderStyle.None;
this.TopMost = true;
this.WindowState = System.Windows.Forms.FormWindowState.Maximized;

这里我们可以自行指定一个 URI ,但是为了离线使用,可以将其放到本地,这里我打包了一个分享在仓库的 releases

//webB.Url = new Uri("https://geektyper.com/SCP");

//webB.Url = new Uri("https://geektyper.com/SCP");
webB.Navigate(Application.StartupPath + "\\html\\hacker.html");

注意退出

编码测试时还有一个特别需要注意的事情,一定要写好退出功能。如果没写好就安装屏保测试的话,就不好退出了呀, Ctrl+Alt+Del 试试吧。

这里说的退出是指屏保运行后,用户操作了鼠标或者是键盘就需要退出屏保程序。因为这里用了 WebBrowser ,同时我们需要考虑多显示器的情况,所以鼠标键盘的事件需要监听全局,这里使用的是 MouseKeyHook[3] 库。

public Main()

public Main()
{
    InitializeComponent();

    // 鼠标键盘事件用于结束屏保
    m_GlobalHook = Hook.GlobalEvents();
    m_GlobalHook.MouseClick += M_GlobalHook_MouseClick;
    m_GlobalHook.KeyPress += M_GlobalHook_KeyPress;
    m_GlobalHook.MouseMove += M_GlobalHook_MouseMove;
}
private void M_GlobalHook_KeyPress(object sender, KeyPressEventArgs e)
{
    Application.Exit();
}

private void M_GlobalHook_MouseClick(object sender, MouseEventArgs e)
{
    Application.Exit();
}


private bool isActive = false;
private Point mouseLocation;
/// <summary>
/// 鼠标动了一定程度,就结束屏保
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void M_GlobalHook_MouseMove(object sender, MouseEventArgs e)
{
    if (isPreviewMode) return;
    if (!isActive)
    {
        isActive = true;
        mouseLocation = new Point(e.X, e.Y);
        return;
    }

    if ((Math.Abs(e.X - mouseLocation.X) > 10) ||
        (Math.Abs(e.Y - mouseLocation.Y) > 10))
    {
        Application.Exit();
    }
}

窗体预览的处理

前面的窗体预览我们处理好了启动参数,只需要通过 WinAPI 更改父窗体就行,但是因为只是简单的处理,没有做缩放,所以我就简单的放了个图片替代了。

[DllImport("user32.dll")]

[DllImport("user32.dll")]
private static extern IntPtr SetParent(IntPtr hWndChild, IntPtr hWndNewParent);
public Main(IntPtr intPtr)
{
    InitializeComponent();
    //预览
    SetParent(this.Handle, intPtr);
    isPreviewMode = true;
    picLogo.Visible = true;
}

安装测试

编辑好代码,我们生成 exe 程序后,只需要将其后缀名改为 scr 即可作为屏幕保护程序使用,这时右键菜单就可以看到测试,配置和安装。

右键菜单

最后

至此,我们已经完成了一个屏幕保护程序的开发,快去秀给自己的女朋友吧!当然除了秀技术,你的网页可以换成类似下面的这种。


saylove

发布于 2023-03-24 11:19