网站建设技术外文翻译

网站建设技术*

1.介绍

网络技术的发展,为今天全球性的信息交流与资在建立源共享和交往提供了更多的途径和可能。足不出户便可以知晓天下大事,按几下键盘或点几下鼠标可以与远在千里之外的朋友交流,网上通信、网上浏览、网上交互、网上电子商务已成为现代人们生活的一部分。Internet 时代, 造就了人们新的工作和生活方式,其互联性、开放性和共享信息的模式,打破了传统信息传播方式的重重壁垒,为人们带来了新的机遇。随着计算机和信息时代的到来,人类社会前进的脚步在逐渐加快。近几年网页设计发展,快得人目不暇接。随着网页设计技术的发展,丰富多彩的网页成为网上一道亮丽的风景线。要想设计美观实用的网页就应该深入掌握网站建设技术。在建立网站时,我们分析了网站建立的目的、内容、功能、结构,应用了更多的网页设计技术。

2、网站的定义

2.1 如何定义网站

确定网站的任务和目标,是建设网站所面临的最重要的问题。为什么人们会来到你的网站? 你有独特的服务吗? 人们第一次到你的网站是为了什么? 他们还会再来吗? 这些问题都是定义网站时必须考虑的问题。要定义网站,首先,必须对整个网站有一个清晰认识,弄清到底要设计什么、主要的目的与任务、如何对任务进行组织与规划。其次,保持网站的高品质。在众多网站的激烈竞争中,高品质的产品是长期竞争的最大优势。一个优秀的网站应具备：

（1）用户访问网站的速度要快；

（2）注意反馈与更新。及时更新网站内容、及时反馈用户的要求；

（3）首页设计要合理。首页给访问者留下的第一印象很重要,设计务必精美,以求产生良好的视觉效果。

2.2 网站的内容和功能

在网站的内容方面,就是要做到新、快、全三面。网站内容的类型包括静态的、动态的、功能的和事物处理的。确定网站的内容是根据网站的性质决定的,在设计政府网站、商业网站、科普性网站、公司介绍网站、教学交流网站等的内容和风格时各有不同。我们建立的网站同这些类型的网站性质均不相同。

*Feng Liu ,Lingling Zhang, Jifa Gu, INTERNATIONAL JOURNAL OF KNOWLEDGE AND SYSTEMS SCIENCES, Volume 4.Number 4 .December 2007

2.3 网站的结构

（1）网站的结构；

（2）定义导航；

（3）可视化设计；

（4）设计框架和页面。

3、网站的设计与实现

随着人们对设计的要求越来越高,高格调,高品位的设计作品,才深受人们的欢迎。这也就给设计者们提出了更高的要求,从这个角度说,板式设计正是满足了人们的要求应需而生。科技的飞跃发展, 让Internet 走进了千家万户,也产生出新的设计领域空间,而网页设计成为新的设计领域的重要内容。优秀的网页设计,必须有好的创意,才能使观者视线久久难移,产生震撼力。版面设计是很重要的,通过文字、图形的空间组合,能最佳的表达出和谐与美。如果想进一步认识网页设计,做出有别于一般网站的网页,就需要掌握更多的象CSS 、javascript 、CGI 等网页设计技术。在网站的建设中就应用了CSS 、javascript 等网页设计技术。

3.1 应用CSS 设计网页

(1) 什么是CSS ? CSS 是一种样式表(stylesheet)技术。也有的人称之为层叠样式表( Cascading Stylesheet)。

(2) CSS与HTML的结合方式。方式一：将所定义的CSS内容书写在这一对标签之间。方式二：将CSS内容单独保存为一个文本文件,再由标签来调用。

(3) CSS在网站中的应用事例。在网站中的页面,增加了以下的定义, 使页面有特殊的显示效果。

3.2 应用javascript 设计网页

javascript的出现使得信息和用户之间不仅只是一种显示和浏览的关系,而是实现了一种实时的、动态的、可交式的表达能力。从而基于CGI静态的HTML页面将被可提供动态实时信息,并对客户操作进行反应的Web页面的取代。javascript脚本正是满足这种需求而产生的语言。它深受广泛用户的喜爱。它是众多脚本语言中较为优秀的一种。与WWW的结合有效地实现了网络计算和网络计算机的蓝图。

3.3 应用Dreamweaver 设计网页

Macromedia Dreamweaver 是为视觉上设计并且管理网络站点和网页的一个专业

的HTML 编辑器。

不论你是比较喜欢手写代码还是在可视化编辑的环境下工作，Dreamweaver 都向

你提供有用的工具让你快速起手或提高你的网络设计经验。

Dreamweaver 包括许多编码工具和特征：HTML CSS 和JAVASCRIPT 参考，一

个JAVASCRIPT 调试器，和代码编辑器（代码看法和代码查看器）容许你在

Dreamweaver 中编辑JAVASCRIPT ，XML 以及其他文本文件。Macromedia 的双程

的HTML 技术可以导入HTML 而不会重新格式化。而且你如果愿意也可以设置Dreamweaver 清理代码或重新格式化HTML。

Dreamweaver 的可视化编辑的土正也让你快速把设计和功能加到你的页面，而不

用写一行代码。你能查看所有的你的站点的元素或资源。并且直接从一个容易使用的面版拖拽他们进一个文件。通过在Macromedia Fireworks 中创建并编辑图象来优化你

的开发工作流程，然后直接将他们导入Dreamweaver，或假如直接在Dreamweaver 创造的Flash 对象。

Dreamweaver 是可完全自定义的。使用Dreamweaver 来创建你自己的对象和命

令，修改快捷键，甚至写入JAVASCRIPT 来扩展Dreamweaver 在新的行为、属性面

板以及站点报告上的能力。

Dreamweaver 工作区域

让我门从Dreamweaver 工作区域的简短的概述开始。

如果你已经没安装Dreamweaver，双击Dreamweaver 图标安装它。

Dreamweaver 工作区域不同工作的方式和用户的水平有不同的界面。当你安装Dreamweaver 时，下列工作区域打开：

当你创造并且编辑页面时，文件窗口显示当前的文件

对象面板包含一些图标。你可以点击插入对象到你的文件。

Dreamweaver 提供许多浮动的面板，例如HTML 式样面板和代码检查器，它使

你能够使用另外的Dreamweaver 元素。

Launcher 转载器工具条包含打开关闭你的最经常使用的检查器和面板。

属性检查器所选择的物体或文章的性质，并且让你修改那些属性（哪个属性在检

查器出现取决于在文件中选择哪个对象）。

打开Dreamweaver 的窗口，检查器和面板，使用窗口菜单。靠着在菜单显示项目

有一个勾，表示该项窗口项目在当前打开（尽管它可以被隐蔽在另外的窗户后面）。要打开一个窗口项目，从菜单选择项目名字或使用它的键盘快捷。

使用Dreamweaver

Dreamweaver 能在3 个方法显示一个文件：在设计视图，在代码视图，实际与代

码结合视图，（改变你在其正在工作的视图，在Dreamweaver 工作跳选择视图）Dreamweaver 缺省是在设计视图显示文件窗口。

另外，你呢功能使用设计试图的两种方法：在标准视图与布局视图。（你在对象

面板最下面的视图分类选择这些视图）在布局视图你能设计页面布局，插入图形，正文和另外的煤体。在标准的视图，除了插入图形正文煤体，你能也插入层，创建桢文

件，创建表格，并且做其他在布局视图无法做到的改变。__

4.关于网站建设的几点体会

随着Internet的普及，越来越多的政府部门、公司和个人意识到需要拥有自己

的独立网站。下面就设计和制作网站谈谈自己的一些体会。

在进行完系统分析之后，我们就应该进行系统的设计。网页的设计类似于软件开

发的设计，有自顶向下、自底向上和不断增补等设计方法。主要任务是网页内容的设

计，包括网页的信息组织结构、外观、内容分块、导航与链接、目录结构等设计。系

统设计是网站具体实现前的准备，对网页的实现进一步提出更具体的要求，对网页的