设计网站首页教学.pptVIP

第九章 网页制作 第2课 设计网站首页 第2章 设计网站首页 1、教学目标 2、任务一：在网页中输入文字 3、任务二：在网页中插入图片 4、任务三：在网页中插入水平线 5、任务四：保存网页 6、任务五：预览网页 7、任务六：添加新网页 教学目标 任务一：在网页中输入文字 任务二：在网页中插入图片 任务三：在网页中插入水平线 任务四：保存网页 任务五：预览网页 任务六：添加新网页 作业 根据第一课的规划，参照小宇设计的“我的父母所示界面，设计制作网页“我的父母”，其文件名为：Parents.htm，标题为“我的父母”。 目 录 上一页 下一页 退 出 青岛出版社 信息技术 八年级上册 1、知识目标 认识网页中的工作原理；了解网页编辑的一般过程。 2、技能目标 学会在网页中输入文字、插入图片和水平线；学会新建、预览和保存网页。 3、情感、态度与价值观目标 善于从身边的广告、书刊中学习版面设计知识，并学以致用。 在网页中输入文字和Word2000相识 自己输入——在网页编辑界面用键盘敲进去就可以了 拷贝其他文件的文字——如其它网页上的文字，选中反白了以后复制，粘贴，就可以了 练一练 打开站点“D:\情感小屋”，双击主页文件“index.htm”，对照小宇在上节课中的首页设计效果，在编辑窗口中输入如图所示的文字，按照图例对文字进行修改字体、字号、颜色、对齐方式等操作。 插入图片的步骤 第一步，移动光标至想要插入图像处。 第二步，单击菜单项中的“插入”，选择“图片”项，再选取二级菜单中的“来自文件(E)…”，弹出对话框。 第三步，如果图片在该站点中，则选中图片文件并按“确定”按钮；否则单击“从计算机上选择一个文件”按钮或单击“使用web浏览器来选择网页或文件”按钮，从计算机本地硬盘中或者Internet上选中图片并按“确定”，即可将其插入网页中。 加 油 站 为了便于传输，网页中的图片一般采用容量较小的文件格 式，常见的文件类型有:JPEG、GIF、PNG等。 在“Banner位置”和“欢迎光临”的左侧插入一张图片，并调整大小。 操作步骤如下 (1)在准备插入水平线的位置设置插入点。 (2)打开“插入”菜单，选择“水平线”命令，此时在网页的插入点处插入一条水平线。如果插入点位于或接近行尾，则水平线将插入到下一行。将光标移动至水平线上双击，打开 “水平线属性”对话框。在“宽度”栏中可设置水平线的宽度。在“高度”栏中输入水平线的高度。在“对齐方式”栏中选择水平线在网页内水平对齐的方式。在“颜色”列表框内设置水平线的颜色，系统默认的颜色是黑色。选择“实线(无阴影)”复选框时，水平线将被设置成实心线，并且在水平线的边缘上没有阴影。 在情感小屋网站首页中，插入一条水平线（宽度为75%、高度为8、水平居中、颜色为蓝绿色）。 练一练 4. 保存网页 保存网页的步骤与word非常相似，包括“另存为”和“保存文件”两种方式 尝试用不同的方法保存index.htm，哪种方式更方便？ 练一练 用户可以转换到预览视图方式预览网页，还可以使用“文件”菜单上的“在浏览器中预览”命令，使用外部浏览器打开当前网页进行预览。此时，将打开“在浏览器中预览”对话框 。 在“浏览器”框内选择一个web浏览器，在“窗口大小”框内选辑窗口的尺寸，然后单击“预览”按钮。 用户还可以单击“添加”按钮，添加其他的预览浏览器。 练一练 利用介绍的两种方法预览下网页。 执行“文件\新建\网页”命令, 在“新建”对话框中选择一个模板或向导，利用模板或向导新建一个网页。