网站开发与设计基础

1、第1章 动态网页制作基础内容简介：随着计算机与网络技术的发展，人们对网页的要求已经不再停留在静态网页上了，网站的动态设计成了一种必然的趋势。为了让读者对动态网站建设有个总体的认识。本章对静态网页与动态网页进行了比较分析，并对网页构成元素以及网页制作工具Dreamweaver 8进行了详细介绍。1.1 认识网页网页是构成网站的基本要素，是承载各种网站的应用平台。简单地说，所有的网站都是由网页组成的。 目前，常见的网页有静态网页和动态网页两种。本节就带领您认识网页世界。1. 1. 1 静态网页静态网页是指网页内容是固定的，不会根据浏览者的不同需求而改变。静态网页一般使用HTML语言进行编写，早期的

2、网站一般都是由静态网页制作的。静态网页文件通常以.htm、.html、.shtml、.xml等形式为后缀名。在静态网页上，也可以出现各种动态的效果，如.GIF格式的动画、FLASH、滚动字母等，这些“动态效果”只是视觉上的，与下面将要介绍的动态网页是不同的概念。1主要特征(1) 静态网页每个网页都有一个固定的URL；(2) 常用于制作一些固定版式的页面；(3) 静态网页内容相对稳定，容易被搜索引擎检索；(4) 静态网页没有数据库的支持，在网站制作和维护方面工作量较大；(5) 静态网页交互性差，在功能方面有较大的限制；2执行过程静态网页的工作模式为请求静态网页事务逻辑（查找对应文件）返回静态网页

3、文件客户浏览器执行显示。其具体执行过程为：(1) 用户首在浏览器的地址栏中键入要访问的网页地址并回车触发这个请求。(2) 浏览器将请求发送到指定的Web服务器上。(3) Web服务器接收这些请求并根据.htm或.html的后缀名判断请求的是HTML文件。(4) Web服务器从当前硬盘或内存中读取正确的HTML文件，然后将它送回用户浏览器。静态网页执行过程如图1-1所示。WWW客户端请求InternetHTML文档Web服务器图1-1 静态网页执行过程1. 1. 2 动态网页动态网页是指在接到用户访问要求后动态生成的页面，页面内容会随着访问时间和访问者发生变化。动态网页文件通常以.asp、.js

4、p、.php、.perl、.cgi等形式为后缀名，并且在动态网页网址中有一个标志性的符号“?”，如： product_detail.asp?product_id=。1主要特征(1) 网页的显示内容可以实时动态更新；(2) 用户和网站可以进行交互式信息交流；(3) 提供对数据库的管理和使用；(4) 提供对文件的管理操作。2执行过程动态网页的工作模式为请求动态网页事务逻辑（执行动态网页）数据逻辑（执行过程中可能包含数据处理）处理结束、返回静态网页客户浏览器执行显示。其具体执行过程为：(1) 用户在浏览器的地址栏中键入动态网页文件，并回车触发这个动态网页的请求。(2) 浏览器将这个动态网页的请求发送

5、到Web服务器。(3) Web服务器接收这些请求并根据扩展名（例如.asp）判断请求的是动态网页，Web 服务器从硬盘或内存中读取正确的动态网页文件。(4) Web服务器将这个动态网页文件从头至尾执行，并根据执行结果生成相应的HTML文件（静态网页）。(5) HTML文件被送回浏览器。(6) 用户的浏览器解释这些HTML文件并将结果显示出来。动态网页执行过程如图1-2所示。WWW客户端请求InternetHTML文档Web服务器中间件数据库服务器数据库图1-2 动态网页执行过程3运行环境 只要用户的计算机上装有浏览器即可运行静态网页，而动态网页则要求在Web服务器中要安装相应的服务器软件，由服

6、务器软件来完成动态网页的解释工作及网站应用程序服务工作。不同的操作系统工作平台，可以选择安装不同的Web服务器软件，现在比较常用的是WINDOWS操作系统平台下的IIS和Linux操作系统平台下Apache服务器软件。1. 1. 3 小结1区别静态网页与动态网页区别的标志在于是否必须经过服务器执行。静态网页只是存储在服务器端的网页文件，而动态网页是服务器端动态技术程序的运行结果。2比较下面我们通过表1-1来对静态网页和动态网页进行比较。表1-1 比较静态网页和动态网页代码编写环境扩展名存储运行静态网页HTML+脚本语言纯文本编辑器或网页开发工具html、htm、shtm、xml固定的URL浏览

7、器动态网页HTML+动态技术命令（包括脚本语言）纯文本编辑器或网页开发工具asp、php、jsp与数据库交互无固定的URL服务器1.2 网页的基本构成元素网页中的基本元素，简单来说，就是网页中所能够显示的各种内容。不同类型的网站的内容尽管不同，但几乎所有的网页都具有基本构成元素，比如Logo，Bannar、导航栏、文字、图像等等。下面就来介绍这些基本元素1. 2. 1 网站Logo网站Logo也称为网站标志，网站标志是一个站点的象征，也是一个站点是否正规的标志之一。网站的标志应体现该网站的特色、内容及其内在的文化内涵和理念。成功的网站标志有着独特的形象标识，在网站的推广和宣传中将起到事半功倍的

8、效果。网站标志一般放在网站的左上角，访问者一眼就能看到它。网站标志通常有3种尺寸：8831像素、12060像素和1209像素。标志的设计创意来自网站的名称和内容。1. 2. 2 网站Banner网站Banner即横幅广告，是互联网广告中最基本的广告形成。Banner可以位于网页顶部、中部或底部任意一处，一般横向贯穿整个或者大半个页面。网站Banner常见的尺寸是48060像素或23330像素，它使用GIF格式的图像文件，既可以使用静态图形，也可以使用动画图像。除普通GIF格式外，采用Flash能赋予Banner更强的表现力和交互内容。 网站Banner首先要美观，这个小的区域如果设计得非常漂亮

9、，让人看上去很舒服，那么即使Banner不是浏览者所要看的内容，或者是一些他们可看可不看的东西，他们也会很有兴趣地去看看，点击就是顺理成章的事情了。网站Banner还要与整个网页协调，同时又要突出、醒目，用色要同页面的主色相搭配，如主色是浅黄，广告条的用色就可以用一些浅的其他颜色，切忌用一些对比色。 1. 2. 3 导航栏导航栏是网页的重要组成元素，它的任务是帮助浏览者在站点内快速查找信息。好的导航系统应该能引导浏览者浏览网页而不迷失方向。导航栏的形式多样，可以是简单的文字链接，也可以是设计精美的图片或是丰富多彩的按钮，还可以是下拉菜单导航。 一般来说，网站中的导航位置在各个页面中出现的位置是

10、比较固定的，而且风格也较为一致。导航的位置一般有4种：在页面的左侧、右侧、顶部和底部。有时候在同一个页面中可以运用多种导航。当然并不是导航在页面中出现的次数越多越好，而是要合理地运用，达到页面总体的协调一致。 1. 2. 4 文本网页内容是网站的灵魂，而文本又是网页内容最主要的表现形式，无论制作网页的目的是什么，文本都是网页中的最基本和必不可少的元素。与图像相比，文字虽然不如图像那样易于吸引浏览者的注意，但却能准确地表达信息的内容和含义。一个内容充实的网站必然会使用大量的文本。良好的文本格式可以创建出别具特色的网页，激发读者的兴趣。为了克服文字固有的缺点，人们赋予了文本更多的属性，如字体、字号

11、、颜色等，通过不同格式的区别，突出显示重要的内容。此外，还可以在网页中设置各种各样的文字列表来明确表达一系列的项目。这些功能给网页中的文本增加了新的生命力。1. 2. 5 图像图像在网页中具有提供信息、展示形象、装饰网页、表达个人情趣和风格的作用。图像是文本的说明和解释，在网页适当位置放置一些图像，不仅可以使文本清晰易读，而且使得网页更加有吸引力。现在几乎所有的网站都使用图像来增加网页的吸引力。可以在网页中使用GIF、JPEG和PNG等多种图像格式，其中使用得最广泛的是GIF和JPEG两种格式。 1. 2. 6 多媒体元素在网页中适当地添加一些多媒体元素，可以给浏览者的听觉或视觉带来强烈的震撼

12、，从而能够留下深刻的印象。在网页中可以插入的多媒体元素有很多种，如网页中的背景音乐或MTV等。另外，还可以向网页中添加使用Shockwave的影片以及各种插件，通过使用这些元素来增加页面的可视性。1.3 网页制作工具Dreamweaver 8Dreamweaver是Macromedia公司推出的一款专业级网页设计软件，它采用多种先进技术，能够快速高效地制作出精美且内容丰富的网页。站点管理和页面设计是它的两大核心功能，只要掌握初步的知识再加上自己的创意，即可制作出独树一帜的网页。1. 3. 1 Dreamweaver 8的工作环境学习具体内容之前，先来了解一下Dreamweaver 8的工作环境

13、，熟悉工作环境，对学习Dreamweaver有很大帮助。启动Dreamweaver 8后，首先进入的是Dreamweaver的起始界面，如图1-3所示。在起始界面中，可以创建各种类型的新项目，也可以打开最近使用过的项目，或者从范例创建各种页面所需的元素。打开任意一个网页文件，此时Dreamweaver 8工作界面如图1-4所示。可以看出Dreamweaver 8窗口是一个标准的Windows窗口，它也有标题栏、菜单栏和快捷菜单。图1-3 Dreamweaver 8起始界面标题栏菜单栏插入栏文档工具栏编辑窗口属性面板标签选择器浮动面板组纵向扩展按钮水平扩展按钮状态栏图1-4 Dreamweave

14、r 8工作界面1. 插入栏插入栏主要用于在网页中插入各类网页元素，主要有“常用”、“布局”、“表单”、“文本”、“HTML”、“应用程序”、“Flash元素”和“收藏夹”8个选项卡。选择某个选项卡，即可看到相应的工具栏，单击工具栏中相应的工具选项即可执行相应的命令。其中，“常用”插入栏主要用于在网页中添加超链接、图像和日期等常见元素；“布局”插入栏主要用于进行页面布局，可添加表格、层、框架以及窗口模式的切换等操作；“表单”插入栏主要用于插入表单对象，如文字字段、单选按钮和复选框等；“文本”插入栏主要用于设置文本格式以及添加特殊字符。2. 文档工具栏文档工具栏主要用于切换编辑区视图模式、设置网页

15、标题、进行标签验证以及在浏览器中浏览网页等。3. 浮动面板组浮动面板组是指编辑窗口右侧的所有浮动面板的集合。通常用于管理站点和添加事件等操作。默认情况下Dreamweaver打开4个面板组，分别是CSS、应用程序、标签检查器和文件。在各个面板名称上单击，可以折叠或展开面板。通过单击【窗口】菜单中的相应命令可以打开或关闭相应的面板。4. 状态栏状态栏位于编辑窗口的下方，其中包括标签选择器、选取工具、手形工具、缩放工具、“设置缩放比率”下拉列表框、“窗口大小”栏和“文件大小”栏等项目。5. 属性面板Dreamweaver提供的属性面板可以显示并修改当前选定的页面对象甚至是整个页面的属性。执行【窗口

16、】g【属性】命令或直接按Ctrl+F3键，就可以显示或隐藏属性面板。不同对象其属性面板的参数设置项目也不同。1. 3. 2 规划与创建站点站点就是放置网站上所有文件的地方，每一个网站都有自己的站点，在创建站点之前，要对站点进行合理的规划，这样能使站点中的文档管理起来更轻松，也能提高工作效率。在Dreamweaver 8中，站点包括远程站点和本地站点，简单地说，就是位于Internet服务器上的远程站点和位于本地计算机上的本地站点。一般都现在本地计算机上构建本地站点，当一切都准备好了，再将站点上传到Internet服务器上。一般来说，在规划站点结构时，应注意以下问题：每个栏目一个文件夹，把站点划

17、分为多个目录，不同类型的文件放在不同的文件夹中，利于调用和管理。在本地站点和远程站点使用相同的目录结构，使在本地制作的站点原封不动地显示出来。在规划之后，就要考虑网站具体结构的搭建，可以利用Dreamweaver在本地计算机上构建出整个站点的完整框架，这与上传后的远程站点最好保持一致。可按以下步骤创建本地站点。步骤1：启动Dreamweaver 8，单击【站点】g【新建站点】命令，弹出如图1-5所示的对话框。在该对话框中设置站点的名称，如myweb。步骤2：单击【下一步】按钮，打开如图1-6所示的对话框。在该对话框中选择是否使用服务器技术。如果要建立的是静态网页，就选择“否，我不想使用服务器技

18、术”，如果要建立动态网页，就选择“是，我想使用服务器技术”。此处选择“否，我不想使用服务器技术”。建立静态网页，选择此项。 图1-5 设置站点名称 图1-6 选择是否使用服务器技术步骤3：单击【下一步】按钮，打开如图1-7所示的对话框。在文本框中输入文件存储的路径，或单击【浏览】按钮，在弹出的对话框中选择保存站点文件的位置。步骤4：单击【下一步】按钮，打开如图1-8所示的对话框。在弹出的对话框中选择如果连接到远程服务器，此处选择“无”。步骤5：单击【下一步】按钮，打开如图1-9所示的对话框，该对话框显示了前面设置的站点信息。步骤6：单击【完成】按钮，新建的站点即出现在“文件”面板上，如图1-1

19、0所示。对于静态网站一般先在本地站点编辑完成之后再上传服务器，所以选择“无”。 图1-7 定义站点位置 图1-8 选择远程服务器界面 图1-9 站点建立完成界面 图1-10 myweb站点1. 3. 3 网页文档的基本操作网页是构成网站的基础，在熟悉了Dreamweaver的工作环境之后，本节将系统地学习网页文档的基本操作方法，包括创建网页、打开网页、保存网页、预览网页以及设置网页属性等。1. 创建网页网页的创建一般有以下3种方法：方法1：启动Dreamweaver 8后，窗口中会出现一个起始页，单击“创建新项目”下面的选项即可创建网页，如图1-11所示。图1-11 利用起始页创建网页方法2：

20、选择【文件】g【新建】菜单命令，弹出“新建文档”对话框，如图1-12所示。对话框提供了【常规】和【模板】两个选项卡，打开【常规】选项卡，在【类别】选项区中选择一种基本页类型，然后在【基本页】选项区中选择HTML，最后单击【创建】按钮即可。方法3：在“文件”面板中新建文档，如图1-13所示。选择一个站点，在站点目录上单击鼠标右键，在弹出的快捷菜单中选择【新建文件】命令即可。 图1-12 “新建文档”对话框 图1-13 在站点中新建文档 2. 打开网页打开已经存在的Dreamweaver文件，通常也有如下3种方法：方法1：启动Dreamweaver 8，利用起始页中的“打开最近项目”下面的选项即可

21、打开最近打开过的文件，如图1-14所示。图1-14 利用起始页打开网页方法2：选择【文件】g【打开】菜单命令，弹出“打开”对话框，如图1-15所示。选择要打开的文件，单击【打开】按钮，即可打开该文件。方法3：在“文件”面板中打开文档，如图1-16所示。在站点目录上选择需要打开的文档，单击鼠标右键，在弹出的快捷菜单中选择【打开】命令即可，也可以通过直接双击文件名来打开文档。 图1-15 “打开文件”对话框 图1-16 在站点中打开文档3. 保存网页编辑好的网页可以将其保存起来，以便以后使用。在Dreamweaver 8中，通常采用如下两种方法来保存网页文件。方法1：选择【文件】g【保存】（【另存

22、为】）菜单命令，弹出“另存为”对话框，如图1-17所示。在“文件名”文本框中输入保存文件的名称，单击【保存】按钮即可。方法2：在编辑窗口上方的文档名称选项卡上直接通过单击鼠标右键，在弹出的快捷菜单中选择【保存】或【另存为】对话框进行保存文件，如图1-18所示。 图1-17 “另存为”对话框 图1-18 通过快捷菜单进行保存4. 预览网页为了完成最佳的页面设计，在网页设计过程中常常需要预览页面效果，以便进行必要的修改调整。通常有如下两种方法：方法1：选择【文件】g【在浏览器中预览】g【IExplore 8.0】菜单命令。方法2：单击“文档工具栏”中的预览按钮，在弹出的下拉菜单中选择【预览在IEx

23、plore 8.0】命令。注意：网页未执行保存而使用浏览器预览时，Dreamweaver会弹出提示对话框，询问是否保存网页，如图1-19所示。因此用户必须先保存网页，才能通过浏览器预览网页设计效果。图1-19保存提示对话框5. 设置网页属性页面标题、背景图像和颜色、文本和链接颜色、样式以及边距是每个网页的基本属性，可以通过“页面属性”对话框进行设置或更改。打开“页面属性”对话框可通过如下种方法：方法1：选择【修改】g【页面属性】菜单命令。方法2：在网页空白处单击鼠标右键，在弹出的快捷菜单中选择【页面属性】命令。方法3：单击属性面板中的【页面属性】按钮。“页面属性”对话框如图1-20所示。图1-20 “页面属性”对话框通过该对话框，用户可以设置外观、链接、标题等项的属性。下面具体介绍：（1）外观在“分类”列表中选择“外观”选项，对话框右侧显示出相应的属性，各属性的作用如下：& 页面字体：设置在页面中使用的默认字体。& 大小：设置在页面中使用的默认字体大小。& 文本颜色：设置显示字体的默认颜色。& 背景颜色：设置页面使用的背景颜色。& 背景图像：设置页面的背景图像。注意：页面的背景图像和背景颜色不能同时显示，如果同时在页面设置了背景图像和背景颜色，则在浏览页面时只显示背景图片。& 重复：设置背景图像在页面上的显示方式，共有4种方式：不重复（仅显示背景图像一