7个详细步骤教程学会大学生静态网页设计与制作

大一大二期末来临，很多同学被大学生网页设计作业搞得焦头烂额，没有创作思路，面对这个问题我总结了这7个详细步骤教程学会大学生静态网页设计与制作，大家快来一起看看吧。

1. 确定素材主题，素材主题一般分为个人、美食、旅游等。

2. 新建思维导图，草图，如果有条件可以出设计稿。如果没有设计灵感可以找一个参考网页，照猫画虎。

3. 新建文件并命名，在桌面或其他位置新建项目名称，格式为班级姓名+素材主题+网，如：2021级张三旅游网。打开文件夹分别新建images（图片素材文件夹），css（css页面样式文件夹），js（JavaScript文件夹）以及index.html文件。

4. 收集图片素材并分类整理到image文件夹，图片资源尽量找免费无版权的素材，并裁剪到统一尺寸，然后命名好就好了。

5. 打开代码编辑器，打开对应的代码文件，这里推荐用vscode，很适合开发网页，是前端程序员工作常用的编辑器之一。下载Chinese中文插件，Easy LESS插件，Live Server实时预览html效果插件等。如果觉得麻烦用dw或者Sublime Text3。

6. 写代码，写代码记得先写中文注释，把思维整理好，把代码框架搭好再上手写代码。

7. 运行到浏览器，右击**.html**结尾的文件即可在浏览器打开，编辑器内按照提示进行运行和预览。

以上7个步骤你学会了吗？如果没有证明是正常现象，无论写代码还是其他事情，都是先难后易，其实静态网页算是可以快速入手的项目，以上为思路总结，细节问题还需要多多自己动手实践，希望这个教程对你有帮助。