又到期末，我们这学期的《网页设计与开发》课也到交大作业的时候。这回作业要求我们自己做一个完整的网站出来，主题不限，只要是自己从头到尾搞定的就行。

拿到这个任务，我一开始还真有点懵，不知道做啥主题想来想去，觉得还是做个自己熟悉的东西比较靠谱，不容易半途而废。我决定，就做一个介绍我家乡的网站。这样一来，内容我有话说，图片啥的也好找，感觉比较稳妥。

定方向和画草图

主题定下来后，我没急着马上打开电脑敲代码。我先找张纸和笔，大概画一下网站的结构。就想着得有个首页，然后分几个栏目，比如家乡简介、风景名胜、特色美食、历史文化之类的。每个页面大概长啥样，哪里放个大图，哪里是文字介绍，导航栏放顶部还是侧边，心里先有个谱。

我寻思着，导航要清楚，让人一点就知道去哪儿。内容嘛图片肯定不能少，干巴巴的文字谁爱看。整体风格就想弄得简洁一点，看着舒服就行。

准备材料和内容

草图画得差不多，接下来就是找“料”。文字部分，我结合自己知道的，再上网查点资料，自己组织语言写各个板块的介绍。图片这块就比较花时间，我翻箱倒柜找出以前拍的老照片，挑些清晰度还行、能看的。有些实在找不到合适的，就只好在网上找一些可以免费用的，或者自己用手机去拍点。还想着给网站弄个简单的小图标，就是那个logo嘛自己随便画个，代表一下。

开始动手敲代码

材料备齐，终于到实际操作环节。我先用HTML把网页的骨架搭起来。一个页面一个页面的建，先把大标题、小标题、段落、图片位置这些都用标签标记这一步就是个体力活，得耐心一点，标签不能写错，不然到时候显示就不对。

• 先把首页的框架搭
• 然后是各个子页面的基本结构。
• 把文字内容填进去。
• 图片先占个位置，或者把路径写对。

搭框架的时候，就想着内容怎么布局。我试着用一些简单的表格来排版，虽然老师好像说过现在不太推荐用表格布局，但我当时觉得用表格把图文左右分开，或者分成几栏，看起来挺整齐的，就先这么用。

给网页“化妆”——用CSS美化

光有骨架肯定不行，黑白文字多丑。接下来就轮到CSS上场。这是我觉得最花时间也最容易头大的地方。调颜色、改字体、设置边距、控制图片大小和位置…… 反正就是各种捣鼓，让页面看起来好看点。

为让导航栏一直显示在页面顶部，我研究好一阵子。还有那个图片和文字怎么对齐，怎么让不同区块之间有点空隙，不会挤在一起，都得一点点调。经常是为一个小细节，对着屏幕反复试好几种写法，看哪个效果有时候调着调着，这里好，那里又乱，真是挺磨人的。

连接页面和测试

所有页面都弄得差不多好看，一步就是把它们串起来。就是给导航栏的链接，还有页面里可能有的“解更多”按钮啥的，都加上正确的跳转地址。点这个能跳到那个页面去，保证网站能正常浏览。

这个很重要，不能有死链接。我每个链接都点一遍，确保没问题。然后在自己的电脑上，把浏览器窗口拉大、缩小，看看排版会不会乱掉，图片会不会变形得太厉害。虽然没学太复杂的响应式设计，但至少保证在常用屏幕大小下看着还行。

最终完成

反反复复修改好几遍，感觉没啥大毛病，整个网站看起来也像那么回事。虽然可能跟外面那些专业的网站没法比，但从选题、构思、找素材到自己一行行敲代码、调试样式，整个过程都是亲手完成的，心里还是挺满足的。学到不少东西，也踩不少坑，这大概就是实践的意义。

把所有文件整理打包，准备提交给老师。希望能给个好成绩，嘿