2024年sublime网页设计作业 篇1
我也是做网站开发的。
当年我学习的时候用的是DW、editplus、sublime这些软件，这些年经常用的editplus、sublime这两软件，好处就是打开速度快，使用方便，也能锻炼编码能力。要是做的有点后台程序上的，那就推荐HBuilderX等这些大型的开发工具软件，功能多能加快速度。要仅仅是前端webstrom这个也是很好的开发利器。
2024年sublime网页设计作业 篇2
以下3个工具能让程序猿下岗，题主学会了就再也不用受气啦，下面就详细介绍下这几个让设计师摆脱代码扬眉吐气的工具！一、Adobe Muse它支持HTML5、CSS3的复杂页面，也能够方便嵌入 Google map、YouTube 等代码并预览。Muse 希望帮助设计师完成网页的交互设计，不需要敲代码也可以制作、发布网站。先看看他的操作界面，首先是“计划”界面，是负责页面的数量和层级的。当创建多个页面的时候，就会出现我们熟悉的树状图。然后就是“设计”界面，个人感觉跟AI界面比较接近，非常好上手。Muse的构件库里面有一些现成的比如菜单、照片播放、社交媒体插入、表格等控件，方便直接调用。另外Muse支持响应式网页设计，从而让网页适配在不同的屏幕上，大大降低了程序员和设计师的工作量。细心的朋友可能有发现上图说明有一项叫做“流动宽度（Fluid Width）”，如果想要设计响应式网页，就选择这个选项。网页就会根据浏览设备自己进行调整。有兴趣的可以自行百度一下，但遗憾的是Adobe在5月31日发布了Adobe Muse终止服务的说明，不再新增功能，並將於 2020 年 3 月 26 日停止支援。二、i-TOP定制H5编辑器这是i-TOP创意共享平台自主研发的一款H5编辑神器，是一款无需代码即可完成定制级作品的在线H5制作工具。文字、图片随意切换，通过状态集、时间轴、形状遮罩及动态精灵等高级功能实现自由编辑操作，一个人就可以快速生成高端H5。换言之，这个编辑神器把原来H5开发过程中所需要的代码编程部分全部转化为傻瓜式的可视化操作了，任意设计师都能轻松驾驭。到底能做出怎样水准的作品呢？市面上一些刷屏的定制级H5，设计师用这个工具一个人就能做出一模一样的效果。下面就模仿网易《游园惊梦》H5，来讲解以下这款H5编辑神器的操作。欢迎大家先自行搜索体验一下这款翻页H5——这样在接下来的讲解中你才能体会到i-TOP定制H5编辑器是怎么高精度把它还原的~接下来表演时间到——我们先做第一页，首先把背景和开场动画的月亮、人物素材添加到画板中。（所有的图片素材都由我们设计师事先做好了上传到素材库，方便在此操作演示直接调用）接下来，添加文字，并且给文字设置动画出场效果及时间。再接着，从图片素材库中找到定格动画的人物、倒影等素材，添加到画板。选中素材后即可制作右侧设置动画效果和时间，预览效果，再点击保存，第一页就完成啦！来，跟原来的H5截图对比一下，是不是一模一样？接下来做第二页，同样的步骤，添加背景、人物等元素，调整位置，设置动画。在设置整个背景左移的动画及文字效果，第二页完成。再跟原H5对比看看，你分得出哪个是原作品哪个是复制品？好了，演示就到这里，有兴趣的可以上i-TOP官网去摸索，官网上就有这个视频教程的。三、Sketch2Code前不久，微软也推出了开源Sketch2Code，不得不说AI界的角逐越来越激烈了。这是一种基于Web 的解决方案，它可以将用户界面的图片转换为可用的HTML 代码。现在我们就来体验了一下。首先，用户上传自己的草图到网站上。很快，Sketch2Code就识别草图生成了html页面，超赞的有有木有！这时候下载这个html页面再用Sublime text打开，就能看到输出的代码。此外，Sketch2Code还能把将草图中图像的位置、类别等识别并标记出来，点击生成页面上的“Predicted object details”就可以查看，简直666！更多功能题主可以到官网上试试哦。有了上面这几个去代码神器，程序猿哥哥可以回去歇着啦，设计师们可以击掌狂欢了！再也不用跟程序猿干架啦！
2024年sublime网页设计作业 篇3
1、Sublime和vscode比较Sublime优点
主流前端开发编辑器
体积小，运行快，启动快
文本功能强大
支持编译，且可以在控制台看到输出
可安装大量插件，来满足定制化需求（ctrl+shift+p,ip,搜索插件安装）
轻量级，使用小项目
Sublime缺点：
收费闭源，bug修复时间慢
安装插件的时候，只有插件列表，显示一句简单的描述，插件配置不方便，很多插件sublime2 和sublime3不兼容
VS Code优点：
免费，最重要是不要钱。
插件很多，最近VS Code发展势头猛，安装插件方便简单，有插件的详细介绍
占用内存低，启动速度，打开速度相对比较快
全平台，内置了对JavaScript, TypeScript and Node.js,C++, C#, Python, PHP等语言的强大支持
VS Code缺点：
不够稳定
启动速度，打开速度没有sublime快，大项目比较适用。2、VS Code安装
官网下载，直接安装
https://code.visualstudio.com/3、VS Code 常用插件安装
查看--扩展（或者快捷键ctrl+shift+x),在输入框输入你要安装的插件，选择一个插件，点击，右边会显示插件的详细信息，点击安装就可以了。
HTML Snippets，提示初级的h5代码片段，标签等
HTML CSS Support，让html标签写上class，智能提示当前项目所支持的样式。
view in browers，ctrl+f1在默认浏览器中，运行当前的html
vscode-icon，让vscode的文件夹目录添加上对应的图标。（如果不生效，在【文件-首选项-文件图标主题】重新选择设置）
path intellisense，文件路径自动补齐。
npm intellisense，require引用包的补齐
bracket pair colorizer，让括号有独立的颜色
auto rename tag ，修改标签闭合
vetur，vue插件，语法高亮、智能感知、emmet
tortoiseSvn，svn插件
auto close tag，自动添加html、xml关闭标签
beautify，格式化代码
change-case，修改文本的更多明明格式，驼峰命名，下划线分割命名等等
chinese(Simplified)Language Pack for Visual Studio，vscode看不习惯英文的同学，可以下载安装这个，中文简体语言包
color info，在颜色上悬停光标，就可以预览色块中色彩模型的详细信息、
css peek，追踪至样式表中css类和id定义的地方。在html文件右键菜单，单击选择器时，选择“go to definition ”，会跳转到css样式代码段
debugger for chrome，前端调试
eslint,检查js编程中的语法错误
html boilerplate，html模板插件，一键创建html文件
htmlHint，html代码格式检测
image preview，鼠标防在image路劲上，显示图像预览
intelliSense for CSS class names in HTML，把项目中css文件里的名称，智能提示在html中
JavaScript (ES6) code snippets ，es6代码片段提示
————————————————
综上，个人建议优先考虑VS Code!