12、 网页制作教案.docx

12、网页制作教案

第一篇：12、网页制作教案12、DREAMWEAVER8.0网页制作教案（一）一、网站的基本概述（一）、网页：网页是计算机连接网络时浏览器窗口中显示的一个页面，是计算机网络最基本的信息单位,它实际是一个文件,存放在世界某个角落的某一台计算机中,当我们在浏览器输入网址后,网页文件会被传送到你的计算机,这样就可以利用网页来访问计算机了。网页分类：（1）静态网页:网页中包含文字、图片、动画、视音频。（2）动态网页:网页中包含文字、图片、动画、视音频以及交互功能.（两者的主要区别:是否包含交互功能）例：《自动控制原理》精品课程网站：是众多网页的集合。（二）、网页的基本构成元素：包含图片，文字，超级链接，动画，表单，视频音频等元素中的一种或多种（三）、网页的页面设计：（1）、网页布局：网页布局是根据你所设计网站类型而设计的，不同的网站有不同的风格，一般包括了标题栏，页眉区（通常包含网站标志），导航区，正文区、页脚。例：VisualBasic学习网站（2）、配色原则：网页设计要达到赏心悦目的目的，需要注意色彩的搭配与风格的设计。例：麦当劳（3）、版面编排：例：清华大学版面既要有美感又要实用，美感是令人感觉舒服的主要因素之一，但美感是要为内容服务的，所以版面的编排要注意各部分内容的比例关系，也就是“经营位置”。作为一种版面，既有文字，又有图片。文字有大有小，还有标题和正文之分;图片也有大小，而且有横有竖之别。图片和文字都需要同时展示，不能简单地罗列在一个页面上，这样往往会搞得杂乱无章。必须根据内容的需要，将图片和文字按照一定的次序进行合理的编排和布局，使它们组成一个有机的整体。可以依据如下几条来做：1.主次分明，中心突出。在一个页面上，必然考虑视觉的中心，这个中心一般在屏幕的中央，或者在中间偏上的部位。因此，一些重要的文章和图片一般可以安排在这个部位，在视觉中心以外的地方就可以安排那些稍微次要的内容，这样在页面上就突出了重点，做到了主次有别。2.大小搭配，相互呼应。较长的文章或标题，不要编排在一起，要有一定的距离，同样，较短的文章，也不能编排在一起。对待图片的安排也是这样，要互相错开，造成大小之间有一定的间隔，这样可以使页面错落有致，避免重心的偏离。3.图文并茂，相得益彰。文字和图片具有一种相互补充的视觉关系，页面上文字太多，就显得沉闷，缺乏生气。页面上图片太多，缺少文字，必然就会减少页面的信息容量。因此，最理想的效果是文字与图片的密切配合，互为衬托，既能活跃页面，又使主页有丰富的内容。（四）网站设计的原则（１）网站主题和内容明确。（２）网页色调和谐，布局清晰。（３）网站方便易用，提供有效的导航条，使人很容易从每一页上访问到网站的任何部分,最好在每一个网页同样的位置上都有相同的导航条。（４）避免长文本页面,每一个网页的高度不能超过三倍的浏览器高度，避免使用过大的图像，不要使用横滚动条。（５）避免错误链接，保证链接有效。二、如何策划一个网站（制作网站的目的以及如何实现）步骤：1.给网站定位，确定网站的性质给出网站的主题和名称(例如求职，聊天，社区，计算机技术，网站开发，娱乐，旅行)2.确定网站的栏目：也就是导航区的内容，栏目的实质是一个网站的大纲索引，所以应该将网站的主体明确的显示出来，栏目要主体突出。3.确定网站的目录和链接结构，画出网站的目录结构图。4.绘制首页网页的布局：如：圣诞节网站，见网页例子：网页表格布局.htm5、根据你的网站构思准备素材（文字、图片、动画、视频音频等元素）.在你的文件夹下面分别建立images和txt、others三个文件夹存放你的素材。三、Dreamweaver软件的启动四、Dreamweaver8.0操作界面DREAMWEAVER8.0操作界面（一）工作区的组成结构：（二）、Dreamweaver面板和面板组：（三）菜单栏中各个菜单的基本作用：文件：包括对文件的各种操作。编辑：包含了对文件的拷贝，粘贴，查找与替换等命令。查看：使用查看菜单可以查看文档的相关内容。插入：用于将对象插入文档中。包括图片标记、flash动画、视频、表格、超级链接、日期、水平线等：属性可以在属性面板中进行可视化设置修改：可以使用修改菜单更改选定页面元素的属性。文本：可以设置文本的格式，如段落格式、字体、文本环绕排版及停止文本环绕等。命令：提供各种命令的访问。站点：提供用于管理站点以及上传和下载文件的菜单项，可以创建站点和对已有站点进行编辑窗口：提供对Dreamweaver中的所有面板，检查器和窗口的访问。帮助：提供了对Dreamweaver文档的访问。五、定义一个站点举例：Dreamweaver学习网站（一）、定义一个站点在正式开始制作网页之前，最好先定义一个新网站，这是为了更好地利用站点