第3节设计网站首页

设计网站首页,学习目标：1.知识目标:认识网页的工作原理;了解网页编辑的一般过程;2.技能目标:学会在网页中输入文字、插入图片和水平线；学会保存网页。3.情感、态度与价值观目标：善于从身边的广告、书刊中学习版面设计知识，并学以致用。,教学重点：网页中文字、图片及水平线的插入。教学难点：嵌入式文件的保存。教学方法：自主探究法、难点演示法,自主探究,学习任务：任务一：自主探究网页中文字的输入，并试着完成课本第11页练一练中第1个问题。任务二：探究网页中图片的插入，并试着完成课本第12页练一练中第2及第3个问题。任务三：探究网页中水平线的插入，在“我的情感小屋”文字下插入一条水平线，要求：宽度为528像素、高度为8、水平居中、颜色为绿色。,学习与探究,在网页中输入文字在FrontPage中进行文字输入和编辑等操作，与在Word中的操作极为相似，但又具有自己的特点，需要我们通过不断的实践去掌握它。,任务一,打开网站“D:情感小屋“，双击打开主页文件“index.htm”,在编辑窗口输入如右图所示的文字，按照图例对这些文字进行修改字体、字号、颜色、对齐方式等操作。,二.在网页中插入图片依次单击插入图片来自文件，然后会弹出如右下图所示的对话框：,找到需要的图片，点击插入即可。插入图片后如果发现其大小不合适，还可以进行调整。,任务二,1.在“Banner位置“处插入存放在“D:素材”中的Banner图片。2.在“欢迎光临”的左侧插入存放在“D:素材”中的home图片。,加油站：为了便于网上传输，网页中的图片一般采用容量较小的文件格式，常见的文件类型有JPEG、GIF、PNG等。,任务三,在“情感小屋”网站首页“我的情感小屋”文字下插入一条水平线，要求：宽度为528像素、高度为8、水平居中、颜色为绿色。,三.在网页中插入水平线：为了让网页内容的层次更清楚，我们往往在标题和正文之间插入水平线，将网页的标题和正文分开，并且根据需要改变其长度、颜色、粗细等。插入水平线的操作步骤为：依次单击“插入”水平线，即可插入水平线。双击刚刚插入的平水线，可弹出“水平线属性”对话框，在该对话框可进行相关设置，如下图所示。,一点通,嵌入式文件的保存我们在上面操作中插入的图片并没有保存在正在编辑的网站内，我们称之为“嵌入式文件”。保存网页时必须将其保存在网站指定的文件夹中。“保存嵌入式文件”的对话框如下图所示。,通过单击“更改文件夹”按钮，指定嵌入式文件在网站中的存放位置为本网站的“images”文件夹。如果不保存在本网站内，就会造成网站访问时图片显示不正常。,四.保存网页FrontPage中保存文件的操作步骤与Word非常相似，依次单击“文件”菜单“保存”按钮或者单击工具栏上的“保存”按钮，在第一次保存网页时，会弹出“另存为”对话框，我们可以在这个对话框中设置或更改网页的标题，如下图所示：,“另存为”对话框,知识拓展,什么是网页标题？网页的标题是用最精炼的词语对本网站或本网页主题进行的概括。在浏览时，网页标题显示在浏览器窗口的标题栏中。网站的每一个页面都应该有针对该页面的标题。,作业：1.在首页中“我的情感小屋”文字下插入素材中的图片“小屋”，并试着调整图片的大小。2.在水平线下输入如下文字：“父亲是山，让我学会了坚强，母亲是海，教我懂得了感恩生命。今天，爸爸妈妈牵着我的手走过了成长的喜怒哀乐；明天，我愿陪同爸爸妈妈一