基础的网页设计与制作

基础的网页设计与制作

目录

第一章诸论

1．设计思想

2．开发工具的选用及介绍

3．网页设计的色彩

第二章 dreamweave的发展

第三章网站总体分析与设计

1网站系统分析

2主页设计

3背景分析

4网页设计的色彩

第四章详细设计

第五章为什么选择dreamweaver

第六章设计方案

1模板创建

2页面制作

3框架技术

4表格设计

6超级链接

7 Flash 的制作过程

第七章总结与体会

总结

心得体会：

第一章诸论

近十年来随着互联网的发展，Web也得到了迅猛的发展。目前，Web网页信息已经拥有上100亿的静态网页。网站已成为人们快速获取、发布和传递信息的重要渠道，并对人们的生活，学习，工作起到了不可估量的作用。人们通过网页获取对自己有用的信息。因此，网站建设在互联网应用上的地位显而易见，在企事业单位信息化建设中备受关注。本文将介绍网页设计的基本技术以及目前流行的web开发工具。

Dreamweaver是制作主页的好工具.Dreamweaver是可视化的网页制作工具，很容易上手，可以让你轻松地制作出自己的网页。Dreamweaver

与Flash、Fireworks合在一起被称为网页制作三剑客，这三个软件相辅相承，是制作网页的最佳选择。其中，Dreamweaver主要用来制作网页文件，制作来的网页兼容性比较好，制作效率也很高，Flash则用来制作网页动画。

1．Dreamweaver的发展

1．1 1997年首次推出

1．2 2000年推出Dreamweaver UltraDev:

Dreamweaver 成专业网站外观设计的先驱。Macromedia 针对多种日益受到网页发展人员用的服务器技术，而推出了Dreamweaver UltraDev。本产品除了提供Dreamweaver 的功能外，还提供以ASP、JSP 和ColdFusion 建立网页应用程序的工具。

1．3 2002年5月推出Dreamweaver MX:

目的是支援现代网页肩负的多重角色。Dreamweaver MX 將UltraDev 最

佳的开发功能以及HomeSite 的主要程式编辑功能整合為一个核心的Dreamweaver 环境,为建立单一开发环境的第一步，以期让使用者能在此环境中，依其偏好的方式以手動来建立不同的网站和应用程式。

1．4 2003年9月推出Dreamweaver MX 2004:

新增了以CSS 为基础的设计性开发提供支援的革命性功能，将网页设计提升到新的位置。透过將CSS 結合在所有使用者的工作流程中，促进了网页专业人员对CSS 的普遍採用。

1．5 2005年8月推出Dreamweaver 8.0:

以之前版本为基础，扩充了主要范围的功能，例如 XML 和 CSS，并简化了工作流程，以幫助使用者事半功倍。由支援最新的专业设计方式，Dreamweaver 8 為使用者提供以开放标准基礎的强大开发方式，增強了专业性的基本工具。另外，Dreamweaver 也支援所有主要的伺服器技术，包括 ColdFusion、PHP、ASP、https://www.360docs.net/doc/fd9227463.html, 和 JSP，让各种能力程度的开发人员，无论是新手或老手，都能实现其设计。

1.62007年7月推出Dreamweaver CS3：

在之前的版本上扩充了很多功能，更好的支持了css的编写以及ajax的开发。

1.7 2008年5月推出Dreamweaver CS4：

借助改进的JavaScript 核心对象和基本数据类型支持, 更快速、准确地编

写JavaScript。通过集成包括jQuery Prototype 和Spry 在内的流行JavaScript 框架, 充分利用 Dreamweaver CS4 的扩展编码功能。

1.8推出Dreamweaver CS5：

将任何 Adobe Photoshop® PSD 文档插入 Dreamweaver 即可创建出图像智能对象。智能对象与源文件紧密链接。无需打开Photoshop 即可在Dreamweaver 中更改源图像和更新图像。

无需掌握数据库或 XML 编码即可将动态数据的强大功能融入网页中。Spry 数据集可以将简单 HTML表中的内容识别为交互式数据源。

2．设计思想

建设网站，是为了更好的宣传，展示某事物的风采、优点与特色，发布特定的信息，以引起人们的注意，使人们更多了解我们宣传的事物。

3．开发工具的选用及介绍

Dreamweaver是制作主页的好工具.Dreamweaver是可视化的网页制作工具，很容易上手，可以让你轻松地制作出自己的网页。并与Flash、Fireworks合在一起被称为网页制作三剑客，这三个软件相辅相承，是制作网页的最佳选择。其中，Dreamweaver主要用来制作网页文件，制作出来的网页兼容性比较好，制作效率也比较高，Flash用来制作精美的网页动画，而Fireworks用来处理网页

中的图形。

开发常用色技术简介：

1）．Css简介

层叠样式表(CSS) 是一系列格式设置规则，它们控制Web 页面内容的外观。使用CSS 设置页面格式时，请将内容与表现形式分开。页面内容（即HTML 代码）驻留在HTML 文件自身中，而用于定义代码表现形式的CSS 规则驻留在另一个文件（外部样式表）或HTML 文档的另一部分（通常为文件头部分）中。使用CSS 可以非常灵活并更好地控制具体的页面外观，从精确的布局定位到特定的字体和样式。

CSS 允许控制HTML 无法独自控制的许多属性。

除设置文本格式外，还可以使用CSS 控制Web 页面中块级别元素的格式和定位。

●CSS 的主要优点是: 它提供了便利的更新功能；更新一处的CSS 规则时，

使用该已定义样式的所有文档的格式都会自动更新为新样式。

●外部CSS 样式表是一系列存储在一个单独的外部CSS (.css) 文件（并非

HTML 文件）中的CSS 规则。利用文档文件头部分中的链接，该文件被链接到Web 站点中的一个或多个页面。

●内部（或嵌入式）CSS 样式表是一系列包含在HTML 文档文件头部分的

style 标签内的CSS 规则

●字体大小的css的代码如下：

这段文字大小是10pt。

这段文字大小是16px。

这段文字大小是16pt。

这段文字大小是10pt的80%。

这段文字的大小比10pt大。

这段文字的大小是特大号(xx-large)。

2）．网页和Html语言

我们的网页是用html语言编写的一个关于动物的网站，html中文翻译为“超文本标记语言”，所谓“超文本“就是指页面内可以包含图片，链接，多媒体等非问字的元素，通过html语言将这些元素表示出来，就形成了html代码。浏览器的工作主要是将这些标记语言进行”翻译“，并按照定义的格式显示出来，这就是我们所看到的网页。

HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。另外，HTML是网

络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。

其主要特点如下：

1、简易性，HTML版本升级采用超集方式，从而更加灵活方便。

2、可扩展性，HTML语言的广泛应用带来了加强功能，增加标识符等要求，HTML采取子类元素的方式，为系统扩展带来保证。

3、平台无关性。虽然PC机大行其道，但使用MAC等其他机器的大有人在，HTML可以使用在广泛的平台上。

下面是一个层的HTML 代码示例：

3．网页设计的色彩

颜色可以直接刺激人的眼球，对人的情绪会产生一定的影响，这些影响总是在不知不觉中发挥作用，左右我们的情绪。色彩的心理效应发生在不同层次中。有些属直接的刺激，有些要通过间接的联想，更高层次则涉及到人的观念，信仰，对于网页设计者来说，色彩的心理作用尤其重要，因为用网络是在一种特定的历史与社会条件的环境下，即高效率，快节奏的现代生活方式的条件，这需要做网页时把握人们在这种生活方式用网络的一种心理需求。针对不同的主题来布置色彩，如健康类的网页就不能采用较为刺激的大红和黄，橙以及象征死亡和神秘的黑色和紫色，这样会造成一种紧张和某种程度的恐慌，我们的网站就是用清爽单调的颜色为背景。

第二章设计方案

1.创建模板

当需要制作大量布局基本一致的网页时，使用模板是最好的方法。

我们的网页制作就是基于一个网页创建模板而设计的。

简明步骤：

打开一个已经存在的网页→另存为模板→新建可编辑区域→保存。

我们所用的是一个左右结构的模板，通过以上步骤一个模板就弄好了。

2框架技术

在浏览网页的时候，我们常常会遇到一种导航结构。就是超级连接做在左边单击以后链接的目标出现在右面。或者在上边单击链接指向的目标页面出现在下面。要做出这样的效果，必须使用框架。

1、我们建了一个对话文档

2、选择「窗口」菜单＞“框架”，弹出“框架”面板如下图。从框架面板可知，系统对左右框架生成命名。

3、保存框架。选择“文件”菜单点击“保存全部”。系统弹出对话框。这时，保存的是一个框架结构文件。我们按照惯例都命名为index.htm。保存的时候如果虚线框笼罩的是周围一圈就是保存框架结构。

4、下面我们要实现按左边的超级链接，对应的页面出现在右边。在左边的页面中做上超级链接。指向一个已经存在的页面。注意做好链接以后，要在目标栏中设置为mainFrame。

6、设置完毕，保存全部，按F12预览网页。链接指向的页面出现在右边框架中。

7、重复以上步骤，把左框架所有的链接做完，一个简单的网站导航结构创建完成

4表格设计

表格是现代网页制作的一个重要组成部分。表格之所以重要是因为表格可以实现网页的精确排版和定位。

1、在编辑视图界面中生成了一个表格

2、用鼠标拖拽表格的边框调整到适当的大小。

3. 单击左边的单元格，只需要鼠标的光标移动到边框上拖拽即可。

4.在右边上下单元格内分别插入图片和文本。页面的基本样子有了。

5、光标移动到表格的边框上单击。表格周围出现调整框，表示选中整张表格。然后，在属性面板中将“边框”值设置适合的值，一个符合要求的表格做好了。

5设置站点

Web 站点是一组具有如相关主题、类似的设计、链接文档和资源。Dreamweaver MX 2004 是一个站点创建和管理工具，因此使用它不仅可以创建单独的文档，还可以创建完整的 Web 站点。创建Web 站点的第一步是规划。为了达到最佳效果，在创建任何 Web 站点页面之前，应对站点的结构进行设计和规划。决定要创建多少页，每页上显示什么内容，页面布局的外观以及页是如何互相连接起来的。

执行以下操作：

启动Dreamweaver CS3：

选择“站点”>“管理站点”（即，从“站点” 菜单选择“管理站点”）。出现“管理站点”对话框。

在“管理站点”对话框中，单击“新建”，然后从弹出式菜单中选择“站点”。出现“站点定义”对话框。

如果对话框显示的是“高级”选项卡，则单击“基本”。出现“站点定义向导”的第一个界面，要求您为站点输入一个名称。

在文本框中，输入一个名称以在Dreamweaver MX 2004中标识该站点。该名称可以是任何所需的名称。

单击“下一步”。出现向导的下一个界面，询问您是否要使用服务器技术。

选择“否”选项，指示目前该站点是一个静态站点，没有动态页。

选择标有“编辑我的计算机上的本地副本，完成后再上传到服务器（推荐）”的选项。在站点开发过程中有多种处理文件的方式，初学网页制作的朋友请选择此选项。

单击该文本框旁边的文件夹图标。随即会出现“选择站点的本地根文件夹”对话框。

单击“下一步”，出现向导的下一个界面，询问您如何连接到远程服务器。从弹出式菜单中选择“无”。您可以稍后设置有关远程站点的信息。目前，本地站点信息对于开始创建网页已经足够了。单击“下一步”，该向导的下一个屏幕将出现，其中显示您的设置概要。

单击“完成”完成设置。随即出现“管理站点”对话框，显示您的新站点。单击“完成”关闭“管理站点”对话框。

现在，站点定义了一个本地根文件夹。下一步，我们就可以编辑自己的网页了。

6超级链接

作为网站肯定有很多的页面，如果页面之间彼此是独立的，那么网页就好比是孤岛，这样的网站是无法运行的。为了建立起网页之间的联系我们必须使用超级链接。称“超级链接”，是因为它什么都能链接，如：网页、下载文件、网站地址、邮件地址……等等。

【页面之间的超级连接】

在网页中，单击了某些图片、有下划线或有明示链接的文字就会跳转到相应的网页中去。

1、在网页中选中要做超级链接的文字或者图片。

2、在属性面板中单击黄色文件夹图标，在弹出的对话框里选中相应的网页文件就完成了。做好超级链接属性面板出现链接文件显示。（如下图）

3、按F12预览网页。在浏览器里光标移到超级链接的地方就会变成手型。

在网页制作中，还经常看到这样的一些超级链接。单击了以后，会弹出邮件发送程序，联系人的地址也已经填写好了。这也是一种超级链接。制作方法是：在编辑状态下，先选定要链接的图片或文字（比如：联系我们），在插入栏点或点插入菜单选“电子邮件链接”弹出如下对话框，填入E-Mail地址即可。

还可以选中图片或者文字，直接在属性面板链接框中填写“mailto：邮件地址”。

创建完成后，保存页面，按F12预览网页效果。

1、首先插入图片。单击图片，用展开的属性面板上的绘图工具在画面上绘制热区。

2、属性面板改换为热点面板如图：链接输入框：填入相应的链接。替代框：填入你的提示文字说明。目标框：不作选择则默认在新浏览器窗口打开。

3、保存页面，按F12预览，用鼠标在设置的区域就可检验效果。

超级链接属性面板中的目标选项。

“目标”我们称它为目标区。也就是超级链接指向的页面出现在什么目标区域。默认的情况下域中总有四个选项。

①_blank ：单击链接以后，指向页面出现在新窗口中。

②_parent：用指向页面替换他外面所在的框架结构。

③_self：将连接页面显示在当前框架中。

④_top：跳出所有框架，页面直接出现在浏览器中.

这样这个网站就可以和其他的网页链接了.

总结

许多人和我一样都是采用参照、临摹实例的方法来开始学习Dreamweaver的，这种方法的优点是感觉能够较快入门，缺点也是显而易见的，就是不利于对MAX 整体结构的理解和掌握。这也是许多朋友在合上书本后，连书中的例子都做不

出来的原因。现在许多Dreamweaver的书籍都是在讲实例，有的干脆只讲实例，说明这种学习方法还是得到了很多人的认可。其实，像MAX这样的制作软件，其知识量之巨大任何一本书都不可能讲清楚，试想学习Dreamweaver的朋友那一个会只抱着一本书学习呢？关键是参考各种书籍找到一种最适合自己的学习方法，书籍本身只是作为一种资料来参考而已。

实例学习法首先要求自己有足够的耐心，对于任何一个练习都要反复推敲，目的只有一个，就是理解实例所涉及的所有知识点，只有这样你才算有所收获。典型的方法是反复练习，并尝试用不同的方法完成练习，并对所涉及的知识点进一步探索，以求理解更多的功能、参数、选项和方法；其二，要有清醒的头脑和明确的学习方向。当你学习掌握了足够的练习制作后，应该及时对所学的知识进行总结和归纳，发现规律，进一步推敲软件的整体结构和知识体系，这样才会真正有所提高。

在找寻动物的种类和照片的时候,我花了很多时间和精神,但我觉得都是

值得的.因为我看了很多动物和昆虫的书和纲页,觉得很有趣味和学识到很多动物.

我又知道了动物学家是利用动物不同的特徵和生活习惯来分类的.陆

生动物最大的有已经绝种的暴龙,现在最大的是大象,最小的是要用显微镜才看得到的变形虫.我又知道了两栖动物原来是幼时生长於水里,长大后才生活在陆地上.有些动物原来我以前把它们分为同类,现在才知道原是第二类的动物.

我还发觉到原来我们吃的东西都是生物,所有动物都是吃生物的.大部份的动物都是对我们人类有用的,但很多动物因为我们捕捉和杀害,濒临绝种,特别是哺乳类动物.

参考文献

（1）李飞工作室编著Dreameanage MX 2004网页设计山东电子音像出版社

( 2 ) 卓越科技编著Photoshop cs2特效制作电子工业出版社

( 3 ) 刘瑞华Macromedia Dreamweaver MX 2004中文版标准教程北京：科学出版社2005

( 4 ) 前沿电脑图像工作室巧学巧用Dreamweaver、Fireworks、Flash制作网页

北京:人民邮电出版社2005

( 5 ) 王辉，罗皇等编著《中文Dreamweaver 8 网页制作》-北京：清华大学出版社，2006.7

( 6 ) 梵人工作室聂小燕等编著《中文Dreamweaver 8 网页制作11日通》-北京：机械工业出版社，2007.1