网站开发与设计基础

1第1章动态网页制作基础内容简介：随着计算机与网络技术的发展，人们对网页的要求已经不再停留在静态网页上了，网站的动态设计成了一种必然的趋势。为了让读者对动态网站建设有个总体的认识。本章对静态网页与动态网页进行了比较分析，并对网页构成元素以及网页制作工具Dreamweaver8进行了详细介绍。21.1认识网页网页是构成网站的基本要素，是承载各种网站的应用平台。简单地说，所有的网站都是由网页组成的。目前，常见的网页有静态网页和动态网页两种。本节就带领您认识网页世界。1.1.1静态网页静态网页是指网页内容是固定的，不会根据浏览者的不同需求而改变。静态网页一般使用HTML语言进行编写，早期的网站一般都是由静态网页制作的。静态网页文件通常以.htm、.html、.shtml、.xml等形式为后缀名。在静态网页上，也可以出现各种动态的效果，如.GIF格式的动画、FLASH、滚动字母等，这些“动态效果”只是视觉上的，与下面将要介绍的动态网页是不同的概念。1．主要特征(1)静态网页每个网页都有一个固定的URL；(2)常用于制作一些固定版式的页面；(3)静态网页内容相对稳定，容易被搜索引擎检索；(4)静态网页没有数据库的支持，在网站制作和维护方面工作量较大；(5)静态网页交互性差，在功能方面有较大的限制；2．执行过程静态网页的工作模式为请求静态网页——事务逻辑（查找对应文件）——返回静态网页文件——客户浏览器执行显示。其具体执行过程为：(1)用户首在浏览器的地址栏中键入要访问的网页地址并回车触发这个请求。(2)浏览器将请求发送到指定的Web服务器上。(3)Web服务器接收这些请求并根据.htm或.html的后缀名判断请求的是HTML文件。(4)Web服务器从当前硬盘或内存中读取正确的HTML文件，然后将它送回用户浏览器。静态网页执行过程如图1-1所示。3图1-1静态网页执行过程1.1.2动态网页动态网页是指在接到用户访问要求后动态生成的页面，页面内容会随着访问时间和访问者发生变化。动态网页文件通常以.asp、.jsp、.php、.perl、.cgi等形式为后缀名，并且在动态网页网址中有一个标志性的符号“?”，如：=8915738。1．主要特征(1)网页的显示内容可以实时动态更新；(2)用户和网站可以进行交互式信息交流；(3)提供对数据库的管理和使用；(4)提供对文件的管理操作。2．执行过程动态网页的工作模式为请求动态网页——事务逻辑（执行动态网页）——数据逻辑（执行过程中可能包含数据处理）——处理结束、返回静态网页——客户浏览器执行显示。其具体执行过程为：(1)用户在浏览器的地址栏中键入动态网页文件，并回车触发这个动态网页的请求。(2)浏览器将这个动态网页的请求发送到Web服务器。(3)Web服务器接收这些请求并根据扩展名（例如.asp）判断请求的是动态网页，Web服务器从硬盘或内存中读取正确的动态网页文件。(4)Web服务器将这个动态网页文件从头至尾执行，并根据执行结果生成相应的HTML文件（静态网页）。(5)HTML文件被送回浏览器。(6)用户的浏览器解释这些HTML文件并将结果显示出来。所示。图1-2动态网页执行过程3．运行环境只要用户的计算机上装有浏览器即可运行静态网页，而动态网页则要求在Web服务器中要安装相应的服务器软件，由服务器软件来完成动态网页的解释工作及网站应用程序服务工作。不同的操作系统工作平台，可以选择安装不同的Web服务器软件，现在比较常用的是WINDOWS操作系统平台下的IIS和Linux操作系统平台下Apache服务器软件。1.1.3小结1．区别静态网页与动态网页区别的标志在于是否必须经过服务器执行。静态网页只是存储在服务器端的网页文件，而动态网页是服务器端动态技术程序的运行结果。2．比较下面我们通过表1-1来对静态网页和动态网页进行比较。表1-1比较静态网页和动态网页代码编写环境扩展名存储运行静态网页HTML+脚本语言纯文本编辑器或网页开发工具html、htm、shtm、xml固定的URL浏览器动态网页HTML+动态技术命令（包括脚本语言）纯文本编辑器或网页开发工具asp、php、jsp与数据库交互无固定的URL服务器1.2网页的基本构成元素网页中的基本元素，简单来说，就是网页中所能够显示的各种内容。不同类型的网站的内容尽管不同，但几乎所有的网页都具有基本构成元素，比如Logo，Bannar、导航栏、文字、图像等等。下面就来介绍这些基本元素1.2.1网站Logo网站Logo也称为网站标志，网站标志是一个站点的象征，也是一个站点是否正规的标志之一。网站的标志应体现该网站的特色、内容及其内在的文化内涵和理念。成功的网站标志有着独特的形象标识，在网站的推广和宣传中将起到事半功倍的效果。网站标志一般放在网站的左上角，访问者一眼就能看到它。网站标志通常有3种尺寸：88×31像素、120×60像素和120×9像素。标志的设计创意来自网站的名称和内容。1.2.2网站Banner网站Banner即横幅广告，是互联网广告中最基本的广告形成。Banner可以位于网页顶部、中部或底部任意一处，一般横向贯穿整个或者大半个页面。网站Banner常见的尺寸是480×60像素或233×30像素，它使用GIF格式的图像文件，既可以使用静态图形，也可以使用动画图像。除普通GIF格式外，采用Flash能赋予Banner更强的表现力和交互内容。网站Banner首先要美观，这个小的区域如果设计得非常漂亮，让人看上去很舒服，那么即使Banner不是浏览者所要看的内容，或者是一些他们可看可不看的东西，他们也会很有兴趣地去看看，点击就是顺理成章的事情了。网站Banner还要与整个网页协调，同时又要突出、醒目，用色要同页面的主色相搭配，如主色是浅黄，广告条的用色就可以用一些浅的其他颜色，切忌用一些对比色。1.2.3导航栏导航栏是网页的重要组成元素，它的任务是帮助浏览者在站点内快速查找信息。好的导航系统应该能引导浏览者浏览网页而不迷失方向。导航栏的形式多样，可以是简单的文字链接，也可以是设计精美的图片或是丰富多彩的按钮，还可以是下拉菜单导航。一般来说，网站中的导航位置在各个页面中出现的位置是比较固定的，而且风格也较为一致。导航的位置一般有4种：在页面的左侧、右侧、顶部和底部。有时候在同一个页面中可以运用多种导航。当然并不是导航在页面中出现的次数越多越好，而是要合理地运用，达到页面总体的协调一致。1.2.4文本网页内容是网站的灵魂，而文本又是网页内容最主要的表现形式，无论制作网页的目的6是什么，文本都是网页中的最基本和必不可少的元素。与图像相比，文字虽然不如图像那样易于吸引浏览者的注意，但却能准确地表达信息的内容和含义。一个内容充实的网站必然会使用大量的文本。良好的文本格式可以创建出别具特色的网页，激发读者的兴趣。为了克服文字固有的缺点，人们赋予了文本更多的属性，如字体、字号、颜色等，通过不同格式的区别，突出显示重要的内容。此外，还可以在网页中设置各种各样的文字列表来明确表达一系列的项目。这些功能给网页中的文本增加了新的生命力。1.2.5图像图像在网页中具有提供信息、展示形象、装饰网页、表达个人情趣和风格的作用。图像是文本的说明和解释，在网页适当位置放置一些图像，不仅可以使文本清晰易读，而且使得网页更加有吸引力。现在几乎所有的网站都使用图像来增加网页的吸引力。可以在网页中使用GIF、JPEG和PNG等多种图像格式，其中使用得最广泛的是GIF和JPEG两种格式。1.2.6多媒体元素在网页中适当地添加一些多媒体元素，可以给浏览者的听觉或视觉带来强烈的震撼，从而能够留下深刻的印象。在网页中可以插入的多媒体元素有很多种，如网页中的背景音乐或MTV等。另外，还可以向网页中添加使用Shockwave的影片以及各种插件，通过使用这些元素来增加页面的可视性。1.3网页制作工具Dreamweaver8Dreamweaver是Macromedia公司推出的一款专业级网页设计软件，它采用多种先进技术，能够快速高效地制作出精美且内容丰富的网页。站点管理和页面设计是它的两大核心功能，只要掌握初步的知识再加上自己的创意，即可制作出独树一帜的网页。1.3.1Dreamweaver8的工作环境学习具体内容之前，先来了解一下Dreamweaver8的工作环境，熟悉工作环境，对学习Dreamweaver有很大帮助。启动Dreamweaver8后，首先进入的是Dreamweaver的起始界面，如图1-3所示。在起始界面中，可以创建各种类型的新项目，也可以打开最近使用过的项目，或者从范例创建各种页面所需的元素。打开任意一个网页文件，此时Dreamweaver8工作界面如图1-4所示。可以看出Dreamweaver8窗口是一个标准的Windows窗口，它也有标题栏、菜单栏和快捷菜单。7图1-3Dreamweaver8起始界面图1-4Dreamweaver8工作界面1.插入栏插入栏主要用于在网页中插入各类网页元素，主要有“常用”、“布局”、“表单”、“文本”、“HTML”、“应用程序”、“Flash元素”和“收藏夹”8个选项卡。选择某个选项卡，即可看到相应的工具栏，单击工具栏中相应的工具选项即可执行相应的命令。其中，“常用”插入栏主要用于在网页中添加超链接、图像和日期等常见元素；“布局”插入栏主要用于进行页标题栏菜单栏插入栏文档工具栏编辑窗口属性面板标签选择器浮动面板组纵向扩展按钮水平扩展按钮状态栏8面布局，可添加表格、层、框架以及窗口模式的切换等操作；“表单”插入栏主要用于插入表单对象，如文字字段、单选按钮和复选框等；“文本”插入栏主要用于设置文本格式以及添加特殊字符。2.文档工具栏文档工具栏主要用于切换编辑区视图模式、设置网页标题、进行标签验证以及在浏览器中浏览网页等。3.浮动面板组浮动面板组是指编辑窗口右侧的所有浮动面板的集合。通常用于管理站点和添加事件等操作。默认情况下Dreamweaver打开4个面板组，分别是CSS、应用程序、标签检查器和文件。在各个面板名称上单击，可以折叠或展开面板。通过单击【窗口】菜单中的相应命令可以打开或关闭相应的面板。4.状态栏状态栏位于编辑窗口的下方，其中包括标签选择器、选取工具、手形工具、缩放工具、“设置缩放比率”下拉列表框、“窗口大小”栏和“文件大小”栏等项目。5.属性面板Dreamweaver提供的属性面板可以显示并修改当前选定的页面对象甚至是整个页面的属性。执行【窗口】【属性】命令或直接按Ctrl+F3键，就可以显示或隐藏属性面板。不同对象其属性面板的参数设置项目也不同。1.3.2规划与创建站点站点就是放置网站上所有文件的地方，每一个网站都有自己的站点，在创建站点之前，要对站点进行合理的规划，这样能使站点中的文档管理起来更轻松，也能提高工作效率。在Dreamweaver8中，站点包括远程站点和本地站点，简单地说，就是位于Internet服务器上的远程站点和位于本地计算机上的本地站点。一般都现在本地计算机上构建本地站点，当一切都准备好了，再将站点上传到Internet服务器上。一般来说，在规划站点结构时，应注意以下问题：每个栏目一个文件夹，把站点划分为多个目录，不同类型的文件放在不同的文件夹中，利于调用和管理。在本地站点和远程站点使用相同的目录结构，使在本地制作的站点原封不动地显示出来。9在规划之后，就要考虑网站具体结构的搭建，可以利用Dreamweaver在本地计算机上构建出整个站点的完整框架，这与上传后的远程站点最好保持一致。可按以下步骤创建本地站点。步骤1：启动Dreamweaver8，单击【站点】【新建站点】命令，弹出如图1-5所示的对话框