网页制作基础：做一个小小网页设计师

小小网页设计师网页制作基础：做一个小小网页设计师认识网页·熟悉工具·动手制作·分享展示授课年级：五年级授课时间：2026年课程导览01走进网页世界认识网页与网站，建立基础概念02网页工坊初体验熟悉制作工具，掌握基础操作03给网页添砖加瓦编辑文字图片，学会表格布局04链接让网页活起来理解超链接，打通页面导航05动手做我的网页综合实战，完成个人作品06分享与成长展示评价，总结提升章节走进网页世界网页就在我们身边认识网页与网站，建立基础概念01网页是什么网页就是我们用浏览器打开的每一个画面像一本会动的图画书，展示文字、图片、声音和动画平时看到新闻、查资料、看动画，打开的都是网页网页每天都在陪伴我们学习和生活网站与网页的关系网页是网站的基本单位，网站是网页的大家庭网页是网站的基本单位，多个网页组合成一个完整的网站打个比方整体学校对应网站部分教室对应网页关系要点网页是构成网站的基本元素，一个网站至少有一个网页多个网页通过超链接相互连接，组成一个完整的网站就像一本书：网站是整本书，网页是书里的一页页网页三要素聚焦网页构成的三大核心元素：文字、图形图像、超链接缺一不可文字——传递信息的主体告诉浏览者网页讲了什么图形图像——美化页面的好帮手让网页更美观，内容更直观超链接——网页的灵魂把无数网页连接成庞大的信息网络网页背后的小秘密网页看起来图文并茂，其实它的本质是一个纯文本文件编写语言标记语言网页用

HTML

这种特殊的标记语言编写文件扩展名常见扩展名常见的网页文件扩展名有

.htm

和

.html浏览器的作用翻译官浏览器就像一位翻译官，把网页里的标签翻译成我们能看懂的画面两种打开方式代码或页面用记事本打开是代码，用浏览器打开就是漂亮页面章节网页工坊初体验认识我们的新工具熟悉制作工具，掌握基础操作02认识网页制作工具FrontPage是一款所见即所得的网页编辑软件，认识界面是动手制作的第一步。认识界面是动手制作的第一步，五个分区各司其职。标题栏显示网页名称菜单栏提供各种操作命令常用工具栏快捷按钮集中地编辑区写内容、放图片的“工作台”状态栏左下角四个切换标签，点击“预览”查看效果建立站点很重要制作网页前，必须先建立一个站点！先建站点再动手，链接才不会失效站点是什么站点就是一个专门存放网站所有文件的文件夹，里面存放网页文件、图片文件、声音文件等。为什么要先建站点建立站点可以保证文件路径正确。如果不建站点直接做网页，插入图片或链接后文件一移动就会失效。规范的站点里通常建

images

文件夹专门放图片。新建与保存网页“小提示：保存后双击文件，就能用浏览器打开查看效果啦！”新建网页打开

FrontPage

软件点击“文件”菜单，选择“新建”在右侧选择“空白网页”，进入编辑区保存网页点击工具栏上的“保存”按钮在“另存为”对话框中选择保存位置给文件起一个好记的名字点击“保存”，网页文件就保存好了章节给网页添砖加瓦让网页变得丰富多彩编辑文字图片，学会表格布局03给网页输入文字文字是网页信息的主要载体，输入和格式化是基础功输入操作2项在编辑区里可以直接输入文字，就像在Word里打字一样按

Enter键换段，按

Shift+Enter键进行换行格式化操作3项选中文字后可以设置字体、字号和颜色标题用大号加粗字体，正文用标准字号关键信息可以用不同颜色标注，让重点更醒目让文字更漂亮文字美化的目的，是让信息更清晰易读格式工具栏快速修改通过格式工具栏，可以快速修改文字样式颜色对比清晰可见文字颜色要和背景色形成对比，才看得清楚字体数量克制为宜同一页面的字体种类不要太多，2到3种

就够啦对齐方式层次有序对齐方式有左对齐、居中、右对齐，标题一般居中对齐更美观插入图片让网页更好看插入图片的操作步骤01把光标放到要插入图片的位置02点击

插入

菜单，选择

图片03从文件夹中挑选一张准备好的图片04点击

确定，图片就出现在网页上了小提醒图片要提前放进站点的

images

文件夹图片大小要合适，太大影响打开速度用表格给网页排版表格是让网页整齐美观的排版神器表格可以把网页划分成整齐的格子区域表格的格子叫做单元格，横向叫行，纵向叫列在“表格”菜单中选择“插入表格”，就能添加表格表格有两大作用：装载数据、辅助布局用表格布局，网页内容不会乱，看上去更替洁章节链接让网页活起来一根线串起所有页面理解超链接，打通页面导航04超链接是什么超链接是网页的灵魂！超链接把全世界无数网页连接在一起超链接的基本认知超链接就是网页上可以点击的

文字、图片或按钮点一下，就能跳转到

另一个网页

或另一个位置有了超链接，浏览网页就像

走迷宫，一条路通向另一条路淡蓝色带下划线的文字，通常就是超链接创建超链接按住

Ctrl

键点击，可以测试链接能不能打开掌握链接操作，才能让网站真正连通起来创建超链接的步骤1选中要做链接的文字或图片2点击“插入”菜单，选择“超链接”3在弹出的对话框中选择要跳转的目标网页4点击“确定”，文字变成蓝色带下划线的样子给网站做导航栏导航栏是网站各个页面的指路牌，访客靠它快速找到想要的页面。导航栏设计要点位置固定一般在网页

顶部或侧边，排着一行或一列链接文字项目清晰常见导航项有

首页、图文欣赏、关于我们、联系方式链接到位每个导航项都做好

超链接，指向对应的子页面导航清楚别人才知道你的网站有哪些内容主页的名字要记牢网站主页的文件名一般是

index.htm

或

index.html，这是浏览器的约定，打开网站时会默认先找这个文件。子页面命名规范子页面可以自己起名比如

tupian.htm、lianxi.htm文件名最好用字母或数字不要用

中文和特殊符号起名规范，网站才能顺利打开和上传章节动手做我的网页亲手创造我的作品综合实战，完成个人作品05先规划再动手做网页前，先想清楚网页要展示什么内容。规划先行确定一个主题比如

“我的读书分享”

“我喜欢的动物”画布局草图在纸上画一画网页布局，哪里放标题，哪里放图片准备素材准备好需要的文字素材和图片素材规划清楚做网页时会又快又顺利制作我的首页首页是网站的

门面，要让人一眼就喜欢第1步打开软件新建网页新建网页，文件命名为

index.htm第2步输入名称设置网站名称在最上方输入网站名称，设置

大号加粗

字体并居中第3步插入表格划分布局区域插入一个表格，用来划分网页的

布局区域第4步合并单元格填入标题和文字合并单元格，在格子中填入

标题和文字第5步插入图片添加图片在格子里插入准备好的

图片第6步保存预览查看效果保存网页，点击

预览

查看效果小提示：首页要做得

简洁又好看制作子页面每个子页面围绕一个主题，内容不要太多子页面制作与链接1理解子页面：网站里除首页之外的其它页面2单独保存：每个子页面都要保存成单独的网页文件3内容布局：子页面同样可以放文字、图片，用表格布局4做好链接：在首页导航栏上为每个子页面做好超链接5返回首页：在每个子页面上加一个“返回首页”的链接，方便查看检查作品不能忘好作品是检查出来的！提交前逐项核对，细检查才能交出好作品检查清单首页和子页面能否正常打开所有超链接能否正确跳转图片都显示出来，有没有破图文字有没有错别字颜色搭配是否清晰美观发现问题怎么办回到编辑区修改，重新保存即可链接失效时，重新选择正确的目标文件章节分享与成长好作品要一起分享展示评价，总结提升06展示我的作品展示是分享成果、互相学习的好机会打开自己的网页作品，向同学们展示简单介绍网页主题和设计想法说一说制作的困难与解决方法认真倾听建议，大胆表达创意学会评价与改进互相学习，才能共同进步！评价别人的作品主题是否明确，内容是否丰富布局是否整齐，颜色是否协调超链接是否都能正确跳转评价自己的作品我做得最好的地方是哪里还有哪些地方可以改进下次我要尝试什么新效果回顾这节课学了什么“梳理总结才能把知识真正装进脑袋”“从浏览者到创造者，你已经跨出了一大步！”我的知识收获认识了网页和网站，记住了网页三要素会使用网页编辑软件，新建和保存网页学会输入文字、美化文字、插入图片学会用表格给网页排版掌握了超链接的制作方法和导航栏设计小小设计师的成长之路每一个大设计师，都是从第一个小网页开始的！继续完善自己的网页作品在已有作品基础上反复打磨、持续迭代，让每个细节都更出彩。