使用div+css开发个人网站毕业设计

第二章 开发工具的介绍

第一节 梦幻网页的编织者——Dreamweaver

Dreamweaver是创建和管理网页的专业化可视编辑器。使用Dreamweaver可以轻松创建跨平台、跨浏览器的页面。Macromedia的Roundtrip HTML技术允许用户随意导入HTML文档而无需重新设置代码格式。

Dreamweaver可以为用户做到：使用动态HTML功能（例如具有动态效果的层和行为）而不用写一行代码。它甚至还可以检查用户的工作成果在所有流行的平台和浏览器中可能发生的错误。

Dreamweaver还是一个可以完全自定义的应用程序。用户可以创建自己的对象和命令修改菜单和快捷键，甚至编写JavaScript代码扩展Dreamweaver的行为和属性检查器。

至于Dreamweaver工作区是非常灵活的，因此它可以适应各种不同的工作风格和使用水平。常用的Dreamweaver工作区组件有以下若干种：

① 文档窗口可显示当前文档，文档的外观和浏览器中看到的非常相似。 ② 装载器中包含一些打开和关闭常用检查器和模板的按钮。

③ 对象工具栏包含创建不同类型的对象（例如 图象、表格和层等）的按钮。 ④ 属性检查器显示选定对象的属性。

⑤ 快捷菜单可以使用户对当前选择或区域快速执行某些命令。

⑥ 可固定的浮动工具栏允许用户将浮动窗口、检查器和工具栏组合在一个或多个选择窗口中。

第二节 图形、图像编辑设计软件制作软件——Adobe

Photoshop cs2

Photoshop cs2是目前最流行的图形、图像编辑设计软件，在数码影像处理、

13

图像编辑合成、广告设计、封面设计、美术绘画、网页设计等领域都被广泛地应用。

① 文字处理更加方便

② 增加的图层集使图层管理更有序。

③ 新增图像功能：图像的剪切和剪裁更加方便。

④ 将所有工具的选项板改进为工具选项栏放置在工作区顶部，方便先项参数的设置。

⑤ 为了更方便地用路径绘画，改进增加了几何形状工具，通过选择工具的不同工作模式，可创建路径、几何形状或几何填充区，使得矢量绘图功能得到了加强。

14

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

第一节 网站开发的需求分析

随着网络技术的饿不断发展,网络应用已经渗透到人类社会的各个角落作为网络，世界色支撑点的网站,更是人们关注的热点：政府利用网站宣传自己的施政纲领, 日益成为与百姓交流的直通车；企业利用网站宣传自己的形象,挖掘无限商机，个人利用网站展示个性风采,创建彼此沟通的桥梁.越来越多的企业希望拥有网。建立个人网站要有一个清晰的网站布局。比如说，导航条要不要？很多人说那东西人人在做，就显得太俗没个性，难显示出新潮。但导航条之所以有那么多人在用，是因为它给浏览者一个明确的布局，便利人们查找本身所需的信息。从某种角度上说，大家都在用的东西就说明它确实被大家所接受。要清楚网站做出来是给每一个人普通用户看的。网站还要经常更新，给人以新意。

设计技术的成长，带来了网页世界的繁荣。尤其在崇尚个性的今天，设计者们更是将页面设计表示的淋漓尽致。用户欣喜的看到那些僵化的设计模式正在被逐个打破，网页设计充满了朝气。但是，作为网页设计者，不能一味的只追求个性的表现，还必需兼顾到用户和客户的习惯，在表现本身的风格的同时，在功能上使用户更加便利。网站导航结构图如下图3.1所示：

站长设计 首页 新闻 博客 素材 联系我们 图3.1 网站导航功能

15

需求结果：生成5个页面，index.HTML----网站首页；blog.html---网站新闻；notes.html---网站案例；styles.html---网站介绍;lianxi.html---网站联系。

第二节 网站的总体设计

与传统媒体不同，网页除了文字和图像以外，还包含声音、视频和动画等新兴多媒体元素，更借助由代码语言编程所实现的各种交互式效果，增加了网页界面的生动性和复杂性，也使得网页设计者需要考虑更多页面元素的排布、优化。一般来说，网页的界面主要由下面几个因素构成：

① 文字：文字元素是信息传达的主体部分。网页中的文字主要包括标题、信息、文字链接、几种主要形式。标题和传统媒体中信息传达的基本作用相同，是内容的简概说明一般比较醒目、优先编排。文字作为占据页面重要比率的元素，同时又是信息重要载体，它的字体、大小、颜色和排布对页面整体设计影响极大。我所使用的文字是宋体12号，因为这样看得比较清楚，使整个页面整洁，网页中都普遍的使用，让顾客一看就忍不住继续看，所以在此我选择12号宋体作为网页的主体文字样式。

② 图形：图形在网页界面中具有重要作用。合理的运用图形，可以生动直观、形象地表现设计主题。网页中常用的图形格式包括jpg和gif，这两种格式压缩比高，得到了规范浏览器的支持，下载速度快，具有跨平台的特性，不需要浏览器安装插件即可直接阅览。图形元素包括标题、背景、主图、链接图标四种。

我所使用的图片主要是自己收集的比较精美。如下图3.2：

16

图3.2图案展示

③ 页面版式：版式是网页界面设计的重要组成部分，它将文字、图形等视觉元素进行组合配置，使页面整体视觉效果美观和谐，简单大方，便于阅读，实现信息传达的最佳效果。如下图3.3：

17