7-8 课时 网站的设计与制作.pptVIP

封面页 （设计好之后可以删掉这个文本框哦） 网站设计与制作 瑞昌一中 柯国清 ★网站示例展示（网站的首页 index.html defaul.html） 首页布局—上下结构 首页布局—左右结构 首页布局—封面结构 首页布局—综合结构 教学内容 理解网页、网站 网页制作常用软件 网站制作—首页制作 交流经验、评价提升 ★理解网页、网站 网页 1. 网页概念 网页就是在浏览器上看到的一个一个的页面。 网页都是用HTML的文件格式来表示的。 2. 网页的类型 按照网页在一个网站中所处的位置可将其分为： 主页：是指进入一个网站时看到的第一页。 内页：是指与主页相链接的与本网站相关的页面。 ★网页、网站的概念 网站 1. 网站概念 因特网上，根据一定的规则，使用HTML等工具制作的用于展示特定内容的相关网页的集合。 2. 网站结构 常见的网站结构：树形结构、星型结构、混合型结构，因结构特点，在实际中使用最多的网站结构是混合型结构，它结合了树形、星型结构优点。 ★网页制作常用软件 (1) 图像处理软件 用来对图片进行效果处理。常用的有：Photoshop和Fireworks。 Fireworks具有便捷的图片和按钮制作功能，并能快捷地生成网页中常用的GIF、JPEG等图像格式。 (2) 动画制作软件 常用的有Flash。用它能制作出具有交互功能的平面动画，并且生成的播放文件很小，有利于网上发布。 ★网页制作常用软件 (3) 网页布局软件 常用的有：FrontPage和Dreamweaver。Dreamweaver与FrontPage相比，它的排版能力更强，功能更全面、操作更灵活、专业性更强。 1.1.2 网页制作的一般过程 收集、整理素材 规划站点内容 制作网页 测试站点 发布网页 创建导航条 创建返回主页链接 构建页面框架 填充内容 制作网页的原则： 为读者提供有用的信息；要美观。 ★网站制作——首页制作 建站点 1、单击开始→程序→Microsoft FrontPage； 2、单击文件→新建，选择“其他网站模板”，出现对话框； 3、在对话框中单击“个人网站”图标，然后在“指定新网站；的位置”处，输入文件夹名，单击确定； 4、双击名为“index.htm”网页，即可编辑主页页面。 1.2.1 HTML的概念 HTML（Hypertext Markup Language，超文本标记语言） 是一种纯文本类型的标记式语言，不需要编译而直接由浏览器解释执行。是目前Internet上用于编写网页的主要语言。 它的作用是通过一些标签来告诉浏览器怎么显示标签中的内容。 HTML不仅要负责组织数据，还要负责显示这些数据。 HTML中的标签是固定的，不能自己扩展标签。 1.2.3 HTML文件的基本结构 ★网站制作——首页制作 首页布局 一、利用表格、单元格进行布局网页（同时利用frontpage布局演示） ***说明：上面的布局作了修饰，①页面背景为已做好的图片：background-image: url(images/index_top1.gif) ； ②表格背景图片：table width=1024 border=0 align=center cellpadding=0 cellspacing=0 background=images/index_bottombg.gif ③表单背景图片td width=200 background=images/index_lmbg.gif ★网站制作——首页制作 首页布局 二、表格、单元格讲解 1、表格：由一些线条分开的小格组成。 2、边框：组成表格的线条。 3、单元格：被边框分开的区域。 4、行：位于水平方向的一系列单元格。 5、列：位于垂直方向的一系列单元格。 6、单元格中可以存放数据、文字、图形、图片。 7、单元格内部边距：文字或其他对象同单元格边缘之间的距离。 8、单元格间距：单元格之间的距离 ★网站制作——首页制作 首页布局 二、表格、单元格讲解 9、表格、单元格的基本概念——图示讲解 班级 学号 姓名 计算机 0101 张千 列1 列2 列3 行1 行2 边框 单元格间距 内部边距 ★网站制作——首页制作 首页布局 二、表格、单元格讲解 10、表格属性——学会利用表格属性调整页面 清除列宽 清除行高 表格与同一段落中文本或图像的对齐方式。 将表格宽度/高度转换成像素 将表格宽度/高度转换成 % 单元格内间距（像素） 单位是：像素 ★网站制作——首页制作 首页布局