资源简介

(共23张PPT)
人教版三年级上册
美术
全册优质课课件
设计我的网站
目录
CONTENTS
1
任务一：规划网站
2
任务二：选择制作工具
3
任务三：布局网页结构
01
任务一：规划网站
任务一：规划网站
利用演示文稿软件（如PowerPoint），发布由文本、图像、声音和动画等组成的多媒体信息，是信息交流的常用手段。将多媒体信息发布到网上，在因特网上建立网站，更大范围地宣传与展示自己，已成为便捷、时尚的信息交流方式。要想在因特网上建立一个网站，首先需要规划网站，其次是设计制作网站，最后在因特网上安个家。
了解建立网站的基本过程，掌握网站规划的意义和方法，确定网站的主题，并能够围绕主题有效地搜集和归类整理资料。
创建网站的首要任务就是要规划好网站。人们常说“磨刀不误砍柴工”，通过规划网站，明确网站设计的目的、要求，依次落实网站设计和制作的几个主要阶段，就能够又快又好地建立网站。建立一个网站一般要经历以下几个阶段。
开始
策划阶段
制作阶段
调试阶段
发布与维护
（确定主题，选择工具，布局网页结构，搜集、整理素材。）
（运用相关软件编辑、处理信息并制作成网页。）
（设置网页链接，美化、修饰各个页面。）
（检查与测试网站性能，将网站发布到因特网，维护网站。）
网站规划与工程规划相似，要有系统的、全局的考虑，不能想到哪儿就做到哪儿。一般需要注意下面四点：
（1）明确建立网站的目的。
（2）进行可行性分：网站建立需要花费多少时间、精力、人力，性价比是否合理。
（3）网站的内容设计：根据网站的性质和目的，分析浏览者的需求确定网站的内容。
（4）网站表现形式设计：网页本身的设计，如网站的标志、网页里的图文排版形式等。
一个优秀的网站，具有主题明确、特色鲜明、内容丰富、图文并茂、动静结合等特点，给访问者赏心悦目的感受。
确定主题是网站策划阶段的首要任务。主题是什么？写文章要有主题、会议要有主题……网站的主题（见图1-3至图1-6）是指网站所要宣传和展示的目标内容，如青少年科技网站的主题是向青少年宣传和展示科普知识。
该网站的主题是什么？它是否突出了主题？它有哪些特点？你认为还有哪些不足之处？
思考
任务二：选择制作工具
02
学习目标
了解常用的网页制作工具，初步认识FrontPage2003软件的窗口组成，能够识读简单的HTML语言代码。
制作网页的工具很多，常用的有记事本（Windows中的）Frontierswoman、东方网页王、Home Site和Semiprofessional等。使用这些软件工具时，仅通过菜单命令和工具按钮，就可以轻松地设计、制作网页。为两种网页制作工具的界面。
探究
探究目标：通过阅读网页的HTML文档，了解HTML文档结构，并能够识读简单网页的HTML标识性语言。
探究准备：教学配套素材文件夹（以下简称“素材文件夹”）中的diligent网站、first.ht网页及schoolbook电子图书。
探究过程：
（1）打开电子图书，双击index.ht文件，根据网页内容提示，浏览电子图书。
Dream weaver制作网页
Dream weaver具有可视化编辑功能，能够快速地创建页面而无须编写任何代码，可以方便地查看所有站点元素或资源，并能轻易地将它们从面板直接拖到文档中。
Dream weaver还提供了功能全面的编码环境，可以使用服务器技术生成由动态数据库支持的web应用程序。图1一11是用Dream weaver编辑的一个界面。
FrontPage2003软件
FrontPage2003软件与其他Office2003软件一样，是一种可视化的、图形界面的集成软件，使用方便、快捷，可以轻松制作网页。
（1）启动FrontPage2003：依次单击“开始”到“程序”菜单。
（2）窗口组成：FrontPage2003的窗口与word2003软件有许多共同之处，有标题栏、菜单栏、工具栏、视图栏、编辑区、状态栏等组成部分。
FrontPage2003有七种视图，即“页面”“文件夹”“远程网站”“报表”“导航”“超链接”和“任务”，通过切换视图，可以有针对性地查看站点内容或网站结构。
FrontPage23的编辑区有四种工作模式。
设计模式：一般用来编辑、修改网页。该模式能直观地显示网页设计效果。
拆分模式：将编辑窗口分为两个部分一一代码窗口和设计窗口，方便查看被编辑的对象所对应的HTML语言代码。
代码模式：用来查看、修改HTML编码。
预览模式：用来网页的显示效果。
（3）退出FrontPage2003：单击“文件”菜单中的“退出”命令或单击编辑区右上角的“×”按钮，就可以关闭窗口，退出Fron2003。除以上介绍的网页制作工具外，还有很多其他网页制作工具，它们各有特点，可以根据个人喜好选择一种网页制作软件。
在任务二中我们尝试用HTML标记语言制作网页，虽然软件工具简单，但代码难以记住，编写比较麻烦，且不直观。Dream weaver软件是一个比较好的网页制作工具，但使用起来有一定难度。
总结
任务三：布局网页结构
03
网站是由多个网页组成的，每个网页围绕主题展示信息。在网页设计中，每个页面的色调、版面结构、设计风格都体现着该网站的风格，因此在网站规划过中，除对主题、内容进行规划外，还要对网页版面布局结构进行规划。
学习目标
掌握网页结构的布局方法，学会设计多种形式的网页结构。
（1）小迪和茵茵的参赛作品是否到了围绕主题来设计？
（2）图1一13是如何布局网页结构的？图1-14又是如何布局网页结构的？
思考
运用表格布局网页结构
由于表格具有整齐统一、直观明了的优点，在复杂的网页设计中，人们不仅用表格显示数据，还通过表格对网页进行布局，这样可以有效地控制文字、图片等对象的位置，使网页的布局既紧凑又整齐美观，见书上图1一16、图1一17。
制作表格，可以利用制作表格的按钮工具、插入表格命令、绘制表格的工具及布局表格与单元格命令来实现。图1-18、图1-19为常用的表格制作工具。
（1）启动FrontPage2003，新建一个空白网页。
（2）执行“表格"乛“插入”命令，弹出“格属性"对话框，设置行数为1、列数为3，表格边框线的粗细为0，表格指定宽度为100％，见图1一21。
（3）在该行下方，再插入一个1行6列的表格，表格边框线为1，颜色为蓝色。
（4）在该行下方，单击“表格"下“布局表格和单元格"命令，弹出“布局表格和单元格"对话框，选择一种布局结构（2行2列），见图1一22。合并第二行单元格，用嵌入方法在该单元格中再插入一个1行2列的表格。
（5）在网页最后插入1行1列的表格，边框线为0，网页布局完成。
（6）保存网页，设置文件名为Diego.ht。
在表格设计过程中，利用表格属性对话框，可以修改表格大小、边框粗细、颜色等属性，见图1一21。
运用框架布局网页结构
框架是将web浏览器窗口划分成若干区域，每个区域内的网页既相互独立，又保持着一定的联系。框架布局网页结构有点像在电视上看到的画中画的效果，在浏览器窗口内能同时看到多个网页的内容。书上图1一23是一种框架结构的网页。上部为“呼唤"横幅标题，左边为“自然之友"等导航目录，中间为对应导航目录的网页内容，拖动滚动条可以查看主页面的内容。
表格与框架都能布局网页的结构，说出它们有什么不同之处。
网页结构是动态的，在网页制作过程中，通常还要根据内容和版面效果做适当调整，以使网页结构更整齐，页面效果更好。
思考
谢 谢

展开更多......

收起↑