网页制作相关知识第一讲.doc

第1讲网页制作相关知识1、 网页技术概述接入Internet的计算机有两种：一种是Server ，其随时准备向客户提供服务；另一种是Client，它将连接到某一Server上，并获取服务。 网站建站技术从技术上大体上分为两类：静态网页技术和动态网页技术。（1）静态网页技术 静态网页是指客户端浏览器发送请求给web服务器，服务器查找需要的超文本文件不加处理直接返回给客户端，运行在客户端的页面是事先已制作完成存放在服务器上的网页。静态网页往往只用来存放无需用户参与，只需要发布的静态文本内容。 制作静态网页主要使用HTML语言，配合客户端脚本语言Javascript也能产生丰富的动态效果。 HTML（超文本标识语言) 浏览器所看到的网页，主要是由HTML语言写成的，通过各种标记，将影像、声音、图片、文字等连接显示出来。 一个HTML文件事实上是一个具有一些特殊代码的文本文件，它告诉浏览器如何表示此文件。通常，静态网页文件以*.html或*.htm为后缀名。（2）动态网页技术 根据程序站点运行地点的不同，又分为客户端动态技术和服务器端动态技术。 客户端动态网页技术不需要与服务器交互，实现动态功能的代码往往采用脚本语言形式直接嵌在网页中，服务器发送给客户后，网页在客户端浏览器直接响应用户的动作，有些作用需要浏览器安装组件（插件）支持。 常见的客户端动态技术：Javascript、JavaApplet、DHTML、ActiveX、Flash、VRML 服务器端动态技术需要服务器和客户端的共同参与，客户通过浏览器发出页面请求后，服务器根据请求的参数运行服务器端程序产生结果页面再返回给客户端。一般涉及到数据库 典型的服务器端动态技术：ASP、ASP.NET、PHP、JSP、CGI 很经常讲的动态网页是指服务器端动态技术2、学习制作网页应该学习的技术知识n 网页的骨架是HTML n 增强网页修饰和增加网页个性的CSS n 网页的客户端编程以增强网页的特殊显示效果、与服务器更好沟通. .的Javascript或VBScript n 网页的服务器端编程加强网页的交互功能的ASP（或JSP、PHP、CGI等） n 图形图像的制作、动画制作等其它相关知识3、网页（网站）制作的基本步骤 （1）网站的整体规划 （2）网页的设计与制作 （3）网站测试与发布 （4）网站维护4、 Macromedia“网页制作三剑客”（1）Dreamweaver(DW)：网页制作工具（2）Flash：矢量图形编辑和动画创作工具（3）Fireworks：图形处理工具，网页图形设计及制作工具 5、Dreamweaver MX操作界面1、菜单栏1、文档窗口（document）2、属性面板（properties）3、面板组（panel group）：浮动面板设计面板、代码面板、应用面板、文档面板、回答面板4、文档工具栏（document toolbar）5、插入栏（insert bar）：对象面板 对象面板和属性面板是DW中最常用的工具 各种浮动面板实现特定的功能第一章：DW界面介绍1、 菜单栏2、 3、插入栏4、 文档工具栏5、 文档窗口6、 属性面板7、 面板组运行Dreamweaver MX，选择Dreamweaver MX工作区后，将看到下面的画面：一、 为菜单区，和其它的软件一样，该软件所有的操作命令都可以从这一个区内找到,举例子，选中该区“编辑(E)”中的参数选择(S). CTRL+U其中CTRL+U是该选项的快捷键,如下图所示：在这里，你可以把DREAMWEAVER设置为自己喜欢的样式，一般使用默认就可以了，如下图：二、 是插入项目选择工具(插入面板)，在 选中了某个项目， 中会出现相应的插入项目，下面详细介绍，选中常用这一项后如下图：锚点用于网页中的定位，如网页的上、中、下等；图像占位符是用于动态交换图片的，后面再说；Fireworks HTML为用Fireworks软件切割出来的图片；交换图像为鼠标移上去时变为另一图片，增强动感；表格数据可以将其它文件的数据转化为表格，插进网页；标签选择器可以插入其它不常用的HTML标签。在 中选中布局一项，共有标准视图和布局视图两种视图，如下图所示：在标准视图下，可以插入表格和在网页制作区画图层。切换到布局视图下，如下图：在布局视图下，可以在网页制作区描绘布局视图下的表格和单元格，描绘好之后，再切换到标准视图后，可以转化为表格，这个比较好用，可以用来排版网页，后面将说到。在 中选中文本一项，可以对文本进行格式化，如下图：A可以对字体进行全面的格式；B可以将字体变为粗体；I为斜体；S为加强字体；这些比较简单，可以自己一项一项慢慢试试，看看字体有什么变化。在 中选择表单（表格和框架两项后面再说），可以插入各种按钮，如下图：A 为表单；B 为文本框；C 为隐藏域；D 为文本区域；E 为多选框；F 为单选框；G 为单选按钮组；H 为列表/菜单；I 为跳菜单；J 为图像域；K 为文本字段；L 为按钮；M 为标签；N 为字段集。（详细的使用方法后面将说到）在 中选中模版可以使用模版制作网页或自己创建模版，做起网页更加方便快捷。在 中选中字符可以插入一些特殊的字符，如：，其中BR为换行符（快捷键为CTRLENTER，此项与ENTER有所不同，可以自己试试），其它的可以自己试试。在 中选中媒体，可以插入FLASHFLASH按扭FLASH文本Applet等插件。在 中选中文本头，将出现下面的画面：关键字为网页的关键词，可以让搜索引擎搜索到；说明为网页的说明，如作者、介绍等；刷新可以设定多长时间后刷新网页或跳转到其它网页；基础为网页的基本链接，如插入一个目标为_blank基础，网页中的一切默认链接都将打开新窗口；其它比较少用不再详细讲述。在 中选中脚本，可以插入各种Javascript、Vbscript或其它脚本。在 中选中ASP（编辑ASP网页时用到，新手可不必理会），可以插入各种ASP编程里用到的标签。在 中选中应用程序（编辑动态网页时候用到，新手可不必理会），可以对数据库进行操作。三、对 区的详解如下图：在上图中，点击带有向下小箭头的工具，会弹出更多选择。四、 区为网页设计区，你所设计的网页或代码将出理在该区。