I 通识教育选修课《躍程序设计》认知网页制作目录一 网页制作简介二 网页设计简介三 静态网页制作四 动态网页制作五 动态网页与静态网页的区别六 网页制作语言七 网页制作流程八 网页制作基础入门九 网页制作常用工具认知网页制作 同时教育选修课《C#程序设计》为拓展课外知识,本学期选修了《C#程序设计》,对C#这一领域 有了浅显的了解,主要用于网页制作下面就网页制作谈谈浅显的认 知:一:网页制作简介网页制作是网站策划师、网络程序员、网页设计师等岗位,应用 各种网络程序开发技术和网页设计技术,为企事业单位、公司或个人 在全球互联网上建设站点,并包含域名注册和主机托管等服务的总称 其作用为展现公司形象,加强客户服务,完善网络业务网页制作是 企业开展电子商务的基础设施和信息平台,是INTERNET上宣传和反 映企业形象和文化的重要窗口新竞争力也认为注重网站的网络营销 价值而不是外在表现网页制作是指使用标识语言,通过一系列设计、 建模、和执行的过程将电子格式的信息通过互联网传输,浏览网页制作要能充分吸引访问者的注意力,让访问者产生视觉上 的愉悦感因此在网页创作的时候就必须将网站的整体设计与网 页设计的相关原理紧密结合起来。
网站设计是将策划案中的内容、 网站的主题模式,以及结合自己的认识通过艺术的手法表现出来; 网页制作通常就是将网页设计师所设计出来的设计稿,按照 W3C规范用html语言将其制作成网页格式二:网页设计简介网页设计是指使用标识语言(markup language),通过一系列 设计、建模、和执行的过程将电子格式的信息通过 互联网传输, 最终以图形用户界面(GUI )的形式被用户所浏览简单来说,网页设计的目的就是产生网站,什么是网站呢, 就是服务器内的一系列网页的组合,终端用户发出请求后[[服务 器通过传输特定的网页向用户传输所需的信息简单的信息如文 字,图片和表格,都可以通过使用HTML/XHTML/XML放置到网站页 面上而更复杂的信息如vector graphics,动画,视频,声频则 需要插件程序例如 Flash, QuickTime, Java run-time environment,等等,这些插件程序也是通过HTML/XHTML/XML植入 网页的三:静态网页在网站设计中,纯粹HTML格式的网页通常被称为“静态网页”, 早期的网站一般都是由静态网页制作的静态网页是相对于动态网页 而言,是指没有后台数据库、不含程序和不可交互的网页。
你编的是 什么它显示的就是什么、不会有任何改变静态网页相对更新起来比 较麻烦,适用于一般更新较少的展示型网站静 态 网 页 的 网 址 形 式 通 常 为 htm 结 尾 , 还 有 就 是以.htm、.html、.shtml、.xml等为后缀的在HTML格式的网页上, 也可以出现各种动态的效果,如 .GIF 格式的动画、 FLASH 、滚动字 幕等,这些 “动态效果 ”只是视觉上的,与下面将要介绍的动态网 页是不同的概念静态网页的特点简要归纳如下::(1) 静态网页每个网页都有一个固定的URL,且网页URL以.htm、.h tml、.sh tml等常见形式为后缀,而不含有 “?”;(2) 网页内容一经发布到网站服务器上,无论是否有用户访问, 每个静态网页的内容都是保存在网站服务器上的,也就是说,静 态网页是实实在在保存在服务器上的文件,每个网页都是一个独 立的文件;(3) 静态网页的内容相对稳定,因此容易被搜索引擎检索;(4) 静态网页没有数据库的支持,在网站制作和维护方面工作 量较大,因此当网站信息量很大时完全依靠静态 网页制作方式比 较困难;(5) 静态网页的交互性较差,在功能方面有较大的限制。
四:动态网页动态网页,与网页上的各种动画、滚动字幕等视觉上的“动态 效果”没有直接关系,动态网页也可以是纯文字内容的,也可以 是包含各种动画的内容,这些只是网页具体内容的表现形式,无 论网页是否具有动态效果,采用 动态网站技术生成的网页都称为 动态网页从网站浏览者的角度来看,无论是动态网页还是静态 网页,都可以展示基本的文字和图片信息,但从网站开发、管理、 维护的角度来看就有很大的差别动态网页特征简要归纳如下;(1) 动态网页一般以数据库技术为基础,可以大大降低网站维 护的工作量;(2) 采用动态网页技术的网站可以实现更多的功能,如用户注 册、用户登录、调查、用户管理、订单管理等等;(3) 动态网页实际上并不是独立存在于服务器上的网页文件,只有当用户请求时服务器才返回一个完整的网页;(4) 动态网页中的“?”对搜索引擎检索存在一定的问题,搜 索引擎一般不可能从一个网站的数据库中访问全部网页,或者出 于技术方面的考虑,搜索蜘蛛不去抓取网址中“?”后面的内容, 因此采用动态网页的网站在进行 搜索引擎推广时需要做一定的技 术处理才能适应搜索引擎的要求五:动态网页与静态网页的区别静态网页,动态网页主要根据网页制作的语言来区分:静态网页使用语言:HTML (超文本标记语言动态网页使用语言:HTML+ASP 或HTML+PHP 或HTML+JSP 等。
静态网页与动态的区别程序是否在服务器端运行,是重要标志在服务器端运行的 程序、网页、组件,属于动态网页,它们会随不同客户、不同时 间,返回不同的网页,例如ASP、PHP、JSP、ASPnet、CGI等运 行于客户端的程序、网页、插件、组件,属于静态网页,例如html 页、Flash、JavaScript、VBScript等等,它们是永远不变的静态网页和动态网页各有特点,网站采用动态网页还是静态 网页主要取决于网站的功能需求和网站内容的多少,如果网站功 能比较简单,内容更新量不是很大,采用纯静态网页的方式会更 简单,反之一般要采用 动态网页技术来实现静态网页是相对于动态网页而言,是指没有 后台数据库、不 含程序和不可交互的网页你编的是什么它显示的就是什么、不 会有任何改变静态网页相对更新起来比较麻烦,适用于一般更 新较少的展示型网站静态网页是标准的HTML文件,它的文件扩展名是.htm 或.html,可以包含文本、图像、声音、FLASH动画、客户端脚本 和ActiveX控件及JAVA小程序等尽管在这种网页上使用这些对 象后可以使网页动感十足,但是,这种网页不包含在服务器端运 行的任何脚本,网页上的每一行代码都是由网页设计人员预先编 写好后,放置到Web服务器上的,在发送到客户端的 浏览器上后 不再发生任何变化,因此称其为静态网页。
静态网页是网站建设的基础,静态网页和动态网页之间也并 不矛盾,为了网站适应搜索引擎检索的需要,即使采用 动态网站 技术,也可以将网页内容转化为静态网页发布动态网站也可以采用静动结合的原则,适合采用动态网页的 地方用动态网页,如果必要使用静态网页,则可以考虑用静态网 页的方法来实现,在同一个网站上,动态网页内容和静态网页内 容同时存在也是很常见的事情六:网页制作语言(一)静态网页使用语言HTMLHTML是一种规范,一种标進,它通过标记符号来标记要显 示的网页中的各个部分网页文件本身是一种文本文件,通过 在文本文件中添加标记符,可以告诉 浏览器如何显示其中的内 容(如:文字如何处理,画面如何安排,图片如何显示等) 浏览器按顺序阅读网页文件,然后根据标记符解释和显示其标 记的内容,对书写出错的标记将不指出其错误,且不停止其解 释执行过程,编制者只能通过显示效果来分析出错原因和出错 部位但需要注意的是,对于不同的浏览器,对同一标记符可 能会有不完全相同的解释,因而可能会有不同的显示效果HTML之所以称为超文本标记 语言,是因为文本中包含了所谓“超级链接”点所谓超级链接,就是一种 URL指针,通过 激活(点击)它,可使浏览器方便地获取新的网页。
这也是HTML 获得广泛应用的最重要的原因之一由此可见,网页的本质就是HTML,通过结合使用其他的Web技术(如:脚本语言、CGI、组件等),可以创造出功能强 大的网页因而,HTML是Web编程的基础,也就是说万维网是 建立在超文本基础之上的HTML文档制作不是很复杂,且功能强大,支持不同数据格式的文件镶入,这也是WWW盛行的原因之一,其主要特点如下:1简易性,HTML版本升级采用超集方式,从而更加灵活方便2可扩展性,HTML语言的广泛应用带来了加强功能,增加标识符等要求,HTML采取子类元素的方式,为系统扩展带来保证3平台无关性虽然PC机大行其道,但使用MAC等其他 机器的大有人在,HTML可以使用在广泛的平台上,这也是WWW 盛行的另一个原因二)动态网页使用语言 HTML+ASPASP是Active Server Page的缩写,意为“动态服务器页面”ASP 是微软公司开发的代替CGI脚本程序的一种应用,它可以与数据库 和其它程序进行交互,是一种简单、方便的编程工具o ASP的网页文件的格式是asp,现在常用于各种动态网站中ASP是一种服务器端脚本编写环境,可以用来创建和运行动 态网页或Web应用程序oASP网页可以包含HTML标记、普通文本、 脚本命令以及COM组件等。
利用ASP可以向网页中添加交互式内 容(如表单),也可以创建使用HTML网页作为用户界面的 web应用程序与HTML相比,ASP网页具有以下特点:(1) 利用ASP可以实现突破静态网页的一些功能限制,实现 动态网页技术(2) ASP文件是包含在HTML代码所组成的文件中的,易于 修改和测试;(3) 服务器上的ASP解释程序会在服务器端执行ASP程序, 并将结果以HTML格式传送到客户端浏览器上,因此使用各种浏览 器都可以正常浏览ASP所产生的网页;(4) ASP提供了一些内置对象,使用这些对象可以使服务器端脚本功能更强例如可以从web浏览器中获取用户通过HTML 表单提交的信息,并在脚本中对这些信息进行处理,然后向 web浏览器发送信息;(5) ASP可以使用服务器端ActiveX组件来执行各种各样的 任务,例如存取数据库、发送Email或访问文件系统等6) 由于服务器是将ASP程序执行的结果以HTML格式传回 客户端浏览器,因此使用者不会看到ASP所编写的原始程序代码, 可防止ASP程序代码被窃取7)方便连接ACCESS与SQL数据库8) 开发需要有丰富的经验,否则会留出漏洞,让骇客(cracker )利用进行注入攻击。
ASP也不仅仅局限于与HTML结合制作WEB网站,而且还可以 与XHTML和WML语言结合制作WAP网站但是其原理也是一 样的七:网页制作流程网页设计是一个综合性极强的工作,涉及到商业策划、平面设计、人机界面、程序语言和数据库等网页设计总体上分为策划、前台和 后台三部分一般都是由 三种不同专业的人合作完成的,一个人独立完成的网站一般很难 做到各方面都很专业因此,网站设计一般由团队完成引策划是指网站的整体定位、功能规划、应用分析、流程设计和内容架构组织前台是指网站页面的设计制作,包括版式规划、色彩应用、版面设计、 切片输出、页面整合、动画和 多媒体设计、交互环节设计和页面 代码编写等从这里可以看出,前台美工的任务很重,而且还 涉及到公司形象,潜在形象广告宣传的劳动能力为公司的整体 付出了潜在的市场价值唉,但现在各行业不重视美工,造成程序为重这也是很多网站,软件的功能,效果容易出错的原因 )后台是扌旨程序设计、数据操作、功能实现、管理界面和管理功能设计 等关于需要学习的知识则因你所面对的任务不同而不同侧重界面设计的,应在图形设计和视觉创意上多下功夫,做页面 代码和后台程序则要多熟悉web标准、标记语言、内嵌语言、脚 本语言、数据库等内容。
八:网页制作的基础入门最开始,网页呈现在你面前的时候,它就好像一张白纸,它需要你任意挥洒你的设计才思在开始的时候,你需要明白,虽然 你能控制一切你所能控制的东西,但假如你知道什么是一种约定 俗成的标准或者说大多数访问者的浏览习惯,那么你可以在此基 础上加上自己的东西你当然也可以创造出自己的设计方案,但 如果你是初学者,那么最好明白网站制作的基本概念1. 页面尺寸:由于页面尺寸和显示器大小及分辨率有关系,网页的局限性 就在于你无法突破显示器的范围,而且因为浏览器也将占去不少 空间,留下给你的页面范围变得越来越小浏览器的 工具栏也是 影响页面尺寸的原因在网站制作过程中,向下拖动页面是惟一 给网页增加更多内容(尺寸)的方法2. 整体造型:这里是指页面的整体形象,这种形象应该是一个整体,图形 与文本的接合应该是层叠有序虽然,显示器和浏览器都是矩形, 但对于页面的造型,你可以充分运用自然界中的其它形状以及它 们的组合:矩形,圆形,三角形,菱形等 对于不同的形状,它 们所代表的意义是不同的3•页头:页头又可称之为页眉,页眉的作用是定义页面的主题比如 一个站点的名字多数都显示在页眉里这样,访问者能很快知道 这个站点是什么内容。
页头是整个页面设计的关键,它将牵涉到 下面的更多设计和整个页面的协调性页头常放置站点名字的图 片和公司标志以及旗帜广告4.文本:文本在页面中出现都数以行或者块(段落)出现,它们的摆放 位置决定者整个页面布局的可视性在过去因为页面制作技术的 局限,文本放置的位置的灵活性非常小,而随着 DHTML的兴起, 文本已经可以按照自己的要求放置到页面的任何位置5•页脚:页脚和页头相呼应页头是放置站点主题的地方,而页脚是 放置制作者或者公司信息的地方你能看到,许多制作信息都是 放置在页脚的6•图片图片和文本是网页的两大构成元素,却一不可如何处理好 图片和文本的位置成了整个页面布局的关键而你的布局思维也 将体现在这里7.多媒体除了文本和图片,还有声音,动画,视频等等其它媒体 虽然它们不是经常能被利用到,但随着动态网页的兴起,它们在 网站制作的布局设计上也将变得更重要九:网页制作常用工具1、dreamweaver,用与编辑 HTML、ASP、JSP、PHP 时的辅助工具 Dreamweaver是美国MACROMEDIA公司开发的集网页制作和管理网 站于一身的所见即所得网页编辑器,它是第一套针对专业网页设 计师特别发展的视觉化网页开发工具,利用它可以轻而易举地制 作出跨越平台限制和跨越浏览器限制的充满动感的网页。
2、Fro nt page 跟 dreamweaver 一样,不过还是 dreamweaver 好3、FLASH网页需要画面流动时的首选择4、 PS图象处理软件,一般网页都需要有图片相搭配,PS是 款很强大的工具5、 FW跟PS 一样都是图象处理软件,但FW偏向与对网页的 处理6、 Adobe公司推出的cs3系列,软件之间兼容性较好可以 用此系列对网站的美工特效进行进一步的修饰美化和优化。