第1章网页制作基础知识教育研究

1、网页设计与制作主讲：葛继科主讲：葛继科tel-mail:qq:5763151101章节课堂课程简介课程简介u本课程介绍了使用dreamweaver 8制作网页和开发网站的各种技术，主要内容涉及dreamweaver 8工作环境，站点创建和管理，编辑网页文本，编辑网页图像、声音、动画等，制作动态交互网页，行为、库、框架等。u通过本课程的学习，希望学习者能够理论结合实际，快速掌握基本的网站设计与网页制作相关知识！2章节课堂教材及参考书目教材及参考书目ldreamweaver 8网页制作与网站开发标准教程清华大学出版社，杨志姝编著。l巧学巧用dreamweaver 8制作

2、网页人民邮电出版社，前沿电脑图像工作室编著。l网页设计与制作教程清华大学出版社，杨选辉编著。l网页设计与制作教程（第二版）清华大学出版社，赵祖荫主编。3章节课堂教学方式与要求教学方式与要求l讲授、自学与上机结合。讲授 30 学时上机自行安排l加强上机实践。l加强上网实践。4章节课堂考核方式考核方式l考试5章节课堂第一章网页制作基础知识第一章网页制作基础知识1.1 网页和网页制作工具1.2 网站建设流程1.3 dreamweaver 界面与基本操作1.4 创建与管理站点6章节课堂1.1.1 什么是网页什么是网页l通俗的讲，internet 就是指许多不同功能计算机通过线路连接起来组成的一个世界范

3、围内的计算机集合体。linternet 提供的服务包括：www 服务（也就是网页浏览服务）、电子邮件服务、网上传呼（icq 就是最常见的网上传呼服务）、文件传输、在线聊天、网上购物、网络炒股、联网游戏、虚拟空间等等。 7章节课堂1.1.1 什么是网页（续）什么是网页（续）lwww 是由遍布在 internet 上的称为 web 服务器的计算机组成，它将不同的信息资源有机的组织在一起，通过一种叫做浏览器的软件进行浏览。 l网上冲浪的过程。8章节课堂1.1.1 什么是网页（续）什么是网页（续） 9章节课堂1.1.1 什么是网页（续）什么是网页（续）l网页实际上就是用 html 语言写成的文档，ht

4、ml（hypertext markup language，超文本标记语言）语言是显示网页的一种文本表现方式，它可通过标记符来定义网页内容的显示效果。l通过超链接连接起来的一系列逻辑上可以视为一个整体的页面，则叫做网站。 10章节课堂1.1.2 常见的网页制作软件常见的网页制作软件l网页编辑工具的作用就是用直观的方式将网页制作的过程实现。现在的网页编辑工具绝大多数都是所见即所得的，即我们实际操作的结果就是最终生成的网页（html 文档）的效果，也就是说，网页编辑工具将 html 代码的生成自动化了。l最常用的两种网页编辑工具是 dreamweaver 和 frontpage。 11章节课堂1.1

5、.2 常见的网页制作软件（续）常见的网页制作软件（续）12章节课堂1.1.2 常见的网页制作软件（续）常见的网页制作软件（续）l最常用的素材处理工具有：photoshop photoshop 是最著名的图形图像处理软件，由 adobe 公司出品。photoshop 的功能非常强大，是专业图像创作的首选软件。 fireworks fireworks 是 macromedia公司出品的web 图形工具软件，是用来设计和制作专业化网页图形的终极解决方案。它是第一个可以帮助网页图形设计人员和开发人员解决所面临的特殊问题的制作环境。 13章节课堂1.1.2 常见的网页制作软件（续）常见的网页制作软件（续

6、）flashflash 是目前最流行的一种 web 矢量动画软件，它建立了 web 上交互式矢量图形和动画的工业标准。 anfy anfy 是一种常用的 java 特效生成工具，它能以简明的方式实现多种复杂的 java 效果 。14章节课堂1.2.1 规划站点规划站点l目标规划书l定义、分析目标用户l确立站点的风格信息式 表现形式是以文字信息为主。画廊式 表现形式是以图像、动画、多媒体等高新网络技术为主。15章节课堂1.2.1 规划站点（续）规划站点（续）l考虑网络技术网络上的速度因素（带宽） 网络带宽是一个要引起设计者注意的首要因素，连接速度将影响到网页的设计。影响网页显示速度的最主要因素就

7、是图像的数量和大小。16章节课堂1.2.1 规划站点（续）规划站点（续）浏览器的分辨率 显示器的屏幕分辨率是网页设计者应该特别关注的因素。显示器屏幕分辨率是指计算机屏幕水平与垂直方向的像素值（即屏幕的宽度与高度），通常可以将国内用户显示器分辨率的设计标准定为：800 * 600 兼顾 1024 * 768。 即时交互与插件17章节课堂1.2.2 设计站点设计站点l建立网站目录结构网站中的命名规则（1）最好使用小写英文名称，可以用汉语拼音代替。（2）可以包含数字或下划线 。（3）注意正确的文件后缀名（扩展名）：网页文件的后缀名为：.htm 或 .html。 （4）默认的主页名称 。18章节课堂1

8、.2.2 设计站点（续）设计站点（续）建立站点结构 19章节课堂1.2.2 设计站点（续）设计站点（续）l设计站点的导航导航的概念 网站中的导航系统，实质上就是一组使用了超链接技术的网页对象（包括文字、按钮、小图片、图形等），它们将网站中的内容有机地连接在一起。导航的分类导航的要点导航设计的原则20章节课堂1.2.2 设计站点（续）设计站点（续）l设计主要页面的版式设计页面的布局网页中的颜色文字、图像、动画以及多媒体的使用l收集和制作素材21章节课堂1.2.3 制作网页制作网页l网站建设的第三步就是具体实施设计的结果，将站点中的网页按照设计方案制作出来。需要注意的是，在该步骤中有一个经常被初学

9、者忽视的环节，就是测试网页。因为影响浏览者访问网页的因素很多，网页设计者永远也无法准确把握网页在不同的平台、连接速度、访问方法（调制解调器、isdn或是其他方法）、显示分辨率等情况下的显示结果。唯一的解决方案就是：测试，不断的测试。 22章节课堂1.2.4 站点发布和维护站点发布和维护l站点发布和维护网站的发布和维护发布前的工作 （1）确保测试正常 （2）检查页面中的搜索信息23章节课堂1.3.1 dreamweaver 8的功能及特点的功能及特点ldreamweaver 8是美国macromedia公司开发的集网页制作和网站管理于一身的所见即所得的网页编辑器，它是第一套针对专业网页设计师特别

10、开发的视觉化网页开发工具，利用它可以轻松地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。24章节课堂1.3.1 dreamweaver 8的功能及特点（续）的功能及特点（续）ldreamweaver 8是构建网站和应用程序的专业选择工具。它提供可视化布局工具、应用程序开发功能以及支持代码编辑的强大组合，使各个技术级别的开发者和设计者都能够快速创建可视化、吸引人的基于标准的站点和应用程序。从基于css设计的领先支持功能到手工编写代码功能，dreamweaver 8都提供了集成、无缝环境中所需的专业工具。开发者可以选择将dreamweaver 与服务器技术结合使用，构建强大的internet

11、应用程序，该应用程序能够将用户开发的程序连接到数据库、实时数据服务和原有系统。25章节课堂1.3.2 dreamweaver 的工作界面的工作界面26章节课堂1.3.3 创建网页创建网页创建网页的基本步骤如下：（1）启动 dreamweaver 程序。（2）设置网页标题。（3）保存网页文件并设置网页名称。（4）输入内容并设置内容格式。（5）保存网页并测试。27章节课堂1.4.1 制作本地站点制作本地站点l建立本地站点 在打开的 dreamweaver 文档窗口中，选择“站点”菜单中的“新建站点”命令，打开 “定义无标题站点”对话框，在该对话框中进行设置。l查看站点中的资源28章节课堂1.4.1 制作本地站点（续）制作本地站点（续）29章节课堂1.4.2 管理本地站点管理本地站点l文件的基本操作 可以使用站点窗口菜单栏中的命令或右键快捷菜单对选中的文件进行基本操作。l设置站点主页l站点操作打开站点编辑站点30章节课堂1.4.3 网站上传网站上传l申请空间l设置远程站点l上传站点31章节课堂目标规划书目标规划书l制作环境的准备l网站目标的确定l网站的主题、风格和创意点的确定l网站结构的确立l网站素材的准备l网站制作工具的选择和确定l网站的建立l网站的测试和上传l网站的宣传和推广l网站的更新和维护返回32章节课堂定义、分析目标