很多第一次接触网站建设的学生，拿到网站作业以后都会有一种感觉：题目看着好像不难，无非就是做几个网页、放几张图片、加个导航，再把页面之间链接起来。

　　真正动手以后才发现，问题一个接一个。

　　首页做出来了，其他页面风格对不上;导航能点，但有的链接打不开;图片在自己电脑上显示正常，换一台电脑就全没了;页面看着挺热闹，老师一检查代码，却发现结构乱七八糟。

　　更麻烦的是，有些小白一开始就把心思全放在“怎么做得酷一点”上，结果基础要求还没完成，就开始研究轮播图、动画、登录注册和各种复杂效果。

　　最后花了不少时间，网站作业却没有真正做好。

　　所以第一次做网站作业，最重要的不是先学多少复杂代码，而是先把作业到底要完成什么弄清楚。

　　很多时候，老师真正想看的并不是你能不能做出商业网站，而是你有没有理解网页结构、页面布局、链接关系、文件组织以及基本代码逻辑。

　　只要方向没走偏，小白一样可以把网站作业做得完整、清楚，而且还比较容易拿分。

　　一、先别急着写代码，第一件事是把作业要求拆开

　　很多人做网站作业最大的坑，就是题目还没有仔细看完，就开始新建HTML文件。

　　结果做到一半才发现：

　　老师要求至少5个页面;

　　必须有表格;

　　必须包含表单;

　　必须使用CSS;

　　必须有图片;

　　不同网页之间必须互相跳转。

　　这个时候再补，就会非常乱。

　　所以网站作业开始之前，最好先把老师的要求拆成一个清单。

　　例如：

　　首页1个;

　　产品页面1个;

　　新闻页面1个;

　　关于页面1个;

　　联系我们页面1个;

　　需要导航;

　　需要图片;

　　需要表格;

　　需要表单;

　　需要CSS样式;

　　页面之间可以正常跳转。

　　把这些写下来以后，网站该怎么做基本就清楚一半了。

　　小白最容易犯的错误，是把“网站作业”理解成“我要设计一个特别高级的网站”。

　　其实很多基础课程真正考察的是：

　　HTML标签会不会用;

　　网页结构是否正确;

　　CSS能不能控制样式;

　　超链接是否正确;

　　图片路径是否正确;

　　文件结构有没有整理好。

　　先完成必做项，再考虑美化，这个顺序非常重要。

　　二、主题别选太大，越简单反而越容易做完整

　　第一次做网站时，有些同学会选择很大的主题。

　　例如：

　　大型购物商城;

　　视频网站;

　　在线聊天平台;

　　旅游预订系统;

　　大型门户网站。

　　听起来确实很厉害，但对于基础网站作业来说，主题越复杂，需要补的内容越多。

　　如果你做一个商城，就会自然遇到：

　　商品分类;

　　购物车;

　　会员登录;

　　订单;

　　支付;

　　搜索。

　　最后很容易从一个简单网页作业，变成一个根本做不完的项目。

　　如果只是HTML和CSS基础课程，其实完全没必要。

　　比较适合小白的主题有：

　　个人博客;

　　校园生活网站;

　　美食介绍网站;

　　旅游景点介绍;

　　宠物知识网站;

　　电影推荐网站;

　　摄影展示网站;

　　班级网站。

　　这些主题有一个共同特点：

　　页面容易规划，素材容易准备，内容也比较好写。

　　例如做一个校园美食网站，可以设计：

　　首页;

　　美食推荐;

　　食堂介绍;

　　校园周边;

　　留言页面。

　　这样5个页面很自然就出来了。

　　网站作业最怕的不是简单，而是做了一大堆功能，却没有一个真正完整。

　　三、先画网站结构图，比直接做页面省事很多

　　真正开始写网页以前，可以拿张纸简单画一下。

　　不需要专业软件。

　　比如：

　　首页

　　下面连接：

　　美食推荐;

　　校园食堂;

　　周边小吃;

　　关于网站;

　　联系我们。

　　这就是最简单的网站结构。

　　然后再想清楚：

　　每个页面放什么。

　　首页负责整体介绍;

　　美食推荐页面展示图片和介绍;

　　食堂页面用表格展示位置和营业时间;

　　联系我们页面放表单。

　　这样一来，每一个课程要求都可以安排到具体页面里。

　　这一步虽然只需要十几分钟，但特别重要。

　　因为没有提前规划的人，做到第三个页面以后经常会发现：

　　不知道还要写什么内容;

　　页面之间重复太多;

　　导航名字又想改;

　　文件名也乱了。

　　最后链接全部跟着改。

　　所以网站作业真正省时间的方法，并不是少写代码，而是一开始把结构确定下来。

　　四、小白最容易出问题的地方，其实是文件路径

　　第一次学网页，很多人都会遇到这种问题：

　　网页在自己的电脑上明明正常，交给老师以后图片全没了。

　　或者：

　　首页可以打开图片，第二个页面却打不开。

　　这类问题十有八九和路径有关。

　　比较省事的做法，是从一开始就把文件整理好。

　　例如创建一个总文件夹：

　　website

　　里面放：

　　index.html

　　about.html

　　product.html

　　news.html

　　contact.html

　　然后再建立：

　　css文件夹;

　　images文件夹。

　　CSS文件放在css里面;

　　所有图片统一放images里面。

　　不要出现这种情况：

　　一张图片在桌面;

　　一张图片在下载文件夹;

　　还有一张放在微信缓存目录。

　　你自己的电脑可能还能显示，但网站文件一旦换位置就找不到了。

　　对于网站作业来说，老师检查的不只是页面看起来怎么样，文件结构清楚也会让整个作品更规范。

　　五、首页千万别什么都往上堆

　　小白做首页特别容易犯一个毛病：

　　觉得首页内容越多越厉害。

　　于是把所有东西全部塞进去。

　　顶部一个大图;

　　下面几十张图片;

　　又加视频;

　　又加新闻;

　　又加表格;

　　再加一大段文字;

　　底部还有很多按钮。

　　最后页面特别长，也特别乱。

　　其实首页最重要的是让别人一打开就知道：

　　这是什么网站;

　　主要讲什么;

　　可以去哪里看。

　　一个基础网站作业首页通常包含这些就够了：

　　网站名称;

　　导航;

　　一张主题图片;

　　简单介绍;

　　几个内容入口;

　　底部版权信息。

　　如果想再丰富一点，可以增加推荐内容，但不要完全失控。

　　网页设计最基本的感觉是：

　　看得懂;

　　找得到;

　　点得动。

　　只要这三点做到了，至少用户体验不会差。

　　六、导航一定要统一，这是最容易暴露“小白感”的地方

　　有些网站作业首页顶部导航是：

　　首页、产品、新闻、关于我们、联系我们。

　　到了第二页变成：

　　主页、产品中心、公司新闻、公司简介、联系。

　　第三页又换了一个顺序。

　　这种细节看起来不严重，但整个网站会显得非常不统一。

　　最好每个页面顶部导航完全一样。

　　包括：

　　文字;

　　顺序;

　　颜色;

　　位置;

　　链接。

　　用户进入任何页面，都知道自己可以从导航回到其他栏目。

　　做网站作业时，可以把导航当成整个网站的骨架。

　　骨架稳了，页面之间才像一个完整网站，而不是几个单独的HTML文件。

　　七、别把所有时间都花在动画效果上

　　小白特别容易被一些网页效果吸引。

　　例如：

　　鼠标经过图片放大;

　　按钮发光;

　　文字不停滚动;

　　图片自动旋转;

　　背景不断变化;

　　鼠标跟随特效。

　　这些效果不是不能做。

　　问题在于很多人基础页面还没有做好，就先研究特效。

　　最后变成：

　　动画很多;

　　页面却错位;

　　手机打开布局崩掉;

　　导航链接还有错误。

　　网站作业首先应该保证基本功能完整。

　　顺序可以这样安排：

　　第一步，完成所有HTML页面;

　　第二步，确保所有链接正常;

　　第三步，统一CSS;

　　第四步，检查图片;

　　第五步，再添加少量效果。

　　如果时间不够，第五步甚至可以不做。

　　一个页面整齐、链接正确、结构规范的网站，通常比一个满屏动画但基础问题一堆的网站更靠谱。

　　八、CSS不要每个页面都重新写一遍

　　很多初学者会在每个HTML页面里面都写大量样式。

　　首页写一套;

　　产品页再复制一套;

　　关于页面继续复制。

　　后来想把导航颜色从蓝色改成黑色，就要5个页面分别修改。

　　非常麻烦。

　　比较规范的方法，是创建一个独立CSS文件。

　　例如：

　　style.css

　　然后所有页面都引用它。

　　这样以后想修改：

　　字体;

　　背景;

　　导航;

　　按钮;

　　页面宽度;

　　只需要修改一个CSS文件。

　　这也是老师比较希望看到的基础网站结构。

　　因为网页开发本身就强调重复样式统一管理。

　　如果网站作业已经有多个页面，使用外部CSS通常会比每页单独写更加清晰。

　　九、文字内容别全复制，哪怕简单也要像一个完整网站

　　很多网站作业最后看起来很敷衍，不是因为代码差，而是内容太随便。

　　例如产品介绍页面里面写：

　　产品1;

　　产品2;

　　产品3。

　　下面全部都是：

　　这是产品介绍。

　　或者整篇文章直接从别的网站复制一大段。

　　这种网站虽然技术上能打开，但成品感很差。

　　其实没必要写特别专业的内容。

　　只需要保持主题统一。

　　例如旅游网站可以写：

　　景点名称;

　　景点特点;

　　推荐季节;

　　交通方式;

　　注意事项。

　　美食网站可以写：

　　菜品名称;

　　口味;

　　价格范围;

　　推荐理由。

　　内容和页面主题对应，网站就会完整很多。

　　十、表格和表单别硬塞，最好让它们有合理用途

　　如果老师要求必须出现table表格，不要随便为了完成任务插一个毫无意义的表格。

　　可以设计成：

　　课程安排表;

　　价格表;

　　营业时间表;

　　产品参数表;

　　活动时间表。

　　如果要求表单，可以放在：

　　联系我们;

　　用户留言;

　　意见反馈;

　　报名页面。

　　例如留言表单可以包含：

　　姓名;

　　邮箱;

　　联系电话;

　　留言内容;

　　提交按钮。

　　这样老师一看就知道你明白这些标签是干什么的，而不是为了完成要求生搬硬套。

　　十一、交作业之前最重要的不是美化，而是完整检查一次

　　很多人网站做完后直接压缩提交。

　　这是最容易出问题的一步。

　　交网站作业之前，最好重新完整检查一遍。

　　第一项：

　　每个导航都点一次。

　　看看有没有404或者空白页面。

　　第二项：

　　检查所有图片。

　　把整个网站文件夹复制到另一个位置，再打开一次。

　　如果图片还能正常显示，路径一般就没问题。

　　第三项：

　　检查文字。

　　看看有没有“这里以后再写”“测试文字”“请输入内容”之类的临时文本。

　　第四项：

　　检查页面标题。

　　不要每个网页浏览器标签都显示“无标题文档”。

　　可以分别设置成：

　　校园美食网;

　　美食推荐;

　　校园食堂;

　　关于我们;

　　联系我们。

　　第五项：

　　检查文件名。

　　尽量不要出现：

　　新建文本文档1;

　　最终版2;

　　最终版真的最终版;

　　test123。

　　比较规范的文件名会让整个项目看起来舒服很多。

　　十二、不会高级功能并不丢分，基础错误才最可惜

　　第一次做网站作业，很多人会和同学比较：

　　“别人做了轮播图。”

　　“别人有登录页面。”

　　“别人还有音乐。”

　　然后开始怀疑自己的网站是不是太简单。

　　其实如果课程本身只是HTML、CSS基础，那么你真正应该关注的是基础有没有做好。

　　页面结构正确;

　　样式统一;

　　栏目合理;

　　图片正常;

　　超链接正常;

　　表格和表单能展示;

　　文件目录清晰;

　　整体主题统一。

　　这些做好以后，已经是一份比较完整的网站作业。

　　高级效果可以加分，但基础错误很容易扣分。

　　千万不要本末倒置。

　　十三、真正适合小白的网站作业思路：先完成，再优化

　　如果完全不知道从哪里开始，可以直接按照这个顺序做。

　　第一天先确定主题和5个页面。

　　第二天完成HTML结构。

　　第三天统一CSS样式。

　　第四天准备图片和文字。

　　第五天检查链接、表格和表单。

　　最后再根据时间决定要不要添加简单的鼠标经过效果或者轮播效果。

　　这种方式看起来不花哨，却比较稳。

　　做网站最怕一开始就追求完美。

　　很多小白花一个晚上研究一个复杂动画，第二天才发现还有4个页面没做。

　　所以网站作业真正实用的一句话就是：

　　先把它做完整，再把它做漂亮。

　　结语：网站作业并没有想象中那么难，难的是一开始方向乱了

　　第一次接触网站建设，遇到问题很正常。

　　真正容易踩坑的地方通常不是代码有多难，而是：

　　题目没有看清;

　　网站主题选得太复杂;

　　页面结构没有提前规划;

　　文件路径混乱;

　　过度追求特效;

　　最后没有认真检查。

　　如果把这些问题避开，一份基础的网站作业完全可以做得干净、完整、层次清楚。

　　尤其对于刚学HTML和CSS的小白来说，不用一开始就想着做一个和大型网站一样复杂的作品。

　　把页面搭好，把导航做好，把图片放对，把CSS整理清楚，再让每个页面有自己的内容和用途，已经完成了网站建设最重要的一部分。

　　等这些基础真正熟悉以后，再去研究响应式布局、JavaScript交互、后台程序、数据库和更复杂的网页功能，会顺畅很多。

　　网站建设本来就是一步一步学出来的。

　　第一次网站作业，不求做得有多炫，先求没有明显错误、结构完整、打开顺畅。

　　做到这一点，基本就已经避开了大多数新手最容易踩的坑。