初中八年级信息技术课件-设计我的网站

设计我的网站目录CONTENTS1任务一：规划网站2任务二：选择制作工具3任务三：布局网页结构01任务一：规划网站任务一：规划网站利用演示文稿软件（如PowerPoint），发布由文本、图像、声音和动画等组成的多媒体信息，是信息交流的常用手段。将多媒体信息发布到网上，在因特网上建立网站，更大范围地宣传与展示自己，已成为便捷、时尚的信息交流方式。要想在因特网上建立一个网站，首先需要规划网站，其次是设计制作网站，最后在因特网上安个家。

了解建立网站的基本过程，掌握网站规划的意义和方法，确定网站的主题，并能够围绕主题有效地搜集和归类整理资料。创建网站的首要任务就是要规划好网站。人们常说“磨刀不误砍柴工”，通过规划网站，明确网站设计的目的、要求，依次落实网站设计和制作的几个主要阶段，就能够又快又好地建立网站。建立一个网站一般要经历以下几个阶段。开始策划阶段制作阶段调试阶段发布与维护（确定主题，选择工具，布局网页结构，搜集、整理素材。）（运用相关软件编辑、处理信息并制作成网页。）（设置网页链接，美化、修饰各个页面。）（检查与测试网站性能，将网站发布到因特网，维护网站。）

网站规划与工程规划相似，要有系统的、全局的考虑，不能想到哪儿就做到哪儿。一般需要注意下面四点：（1）明确建立网站的目的。（2）进行可行性分：网站建立需要花费多少时间、精力、人力，性价比是否合理。（3）网站的内容设计：根据网站的性质和目的，分析浏览者的需求确定网站的内容。（4）网站表现形式设计：网页本身的设计，如网站的标志、网页里的图文排版形式等。一个优秀的网站，具有主题明确、特色鲜明、内容丰富、图文并茂、动静结合等特点，给访问者赏心悦目的感受。确定主题是网站策划阶段的首要任务。主题是什么？写文章要有主题、会议要有主题……网站的主题（见图1-3至图1-6）是指网站所要宣传和展示的目标内容，如青少年科技网站的主题是向青少年宣传和展示科普知识。

该网站的主题是什么？它是否突出了主题？它有哪些特点？你认为还有哪些不足之处？思考任务二：选择制作工具02学习目标了解常用的网页制作工具，初步认识FrontPage2003软件的窗口组成，能够识读简单的HTML语言代码。制作网页的工具很多，常用的有记事本（Windows中的）Frontierswoman、东方网页王、HomeSite和Semiprofessional等。使用这些软件工具时，仅通过菜单命令和工具按钮，就可以轻松地设计、制作网页。为两种网页制作工具的界面。探究探究目标：通过阅读网页的HTML文档，了解HTML文档结构，并能够识读简单网页的HTML标识性语言。探究准备：教学配套素材文件夹（以下简称“素材文件夹”）中的diligent网站、first.ht网页及schoolbook电子图书。探究过程：（1）打开电子图书，双击index.ht文件，根据网页内容提示，浏览电子图书。Dreamweaver制作网页Dreamweaver具有可视化编辑功能，能够快速地创建页面而无须编写任何代码，可以方便地查看所有站点元素或资源，并能轻易地将它们从面板直接拖到文档中。Dreamweaver还提供了功能全面的编码环境，可以使用服务器技术生成由动态数据库支持的web应用程序。图1一11是用Dreamweaver编辑的一个界面。FrontPage2003软件FrontPage2003软件与其他Office2003软件一样，是一种可视化的、图形界面的集成软件，使用方便、快捷，可以轻松制作网页。（1）启动FrontPage2003：依次单击“开始”到“程序”菜单。（2）窗口组成：FrontPage2003的窗口与word2003软件有许多共同之处，有标题栏、菜单栏、工具栏、视图栏、编辑区、状态栏等组成部分。FrontPage2003有七种视图，即“页面”“文件夹”“远程网站”“报表”“导航”“超链接”和“任务”，通过切换视图，可以有针对性地查看站点内容或网站结构。FrontPage23的编辑区有四种工作模式。设计模式：一般用来编辑、修改网页。该模式能直观地显示网页设计效果。拆分模式：将编辑窗口分为两个部分一一代码窗口和设计窗口，方便查看被编辑的对象所对应的HTML语言代码。代码模式：用来查看、修改HTML编码。预览模式：用来网页的显示效果。（3）退出FrontPage2003：单击“文件”菜单中的“退出”命令或单击编辑区右上角的“×”按钮，就可以关闭窗口，退出Fron2003。除以上介绍的网页制作工具外，还有很多其他网页制作工具，它们各有特点，可以根据个人喜好选择一种网页制作软件。

在任务二中我们尝试用HTML标记语言制作网页，虽然软件工具简单，但代码难以记住，编写比较麻烦，且不直观。Dreamweaver软件是一个比较好的网页制作工具，但使用起来有一定难度。总结任务三：布局网页结构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是一种框架结构的网页。