admin 管理员组文章数量: 1087649
2024年5月20日发(作者：springboot一个完整的登录)
《农业网络信息》２ｏ０８年第１１期 应用实践
网站制作流程与设计技巧
丛媛媛，肖艳华，赵娜
（吉林省农业科学院农业经济与信息服务中心，吉林长春１３００３３）
摘要：本文首先将网站建构的基本流程概括为五个阶段，并分别对其进行了介绍。然后从网站的整体风格、色彩搭配和布
局规划角度出发，阐述了网站设计涉及的一些技巧。
关键词：网站建设；网页制作；设计技巧
中图分类号：ＴＰ３９９ 文献标识码：Ｂ 文章编码：１６７２—６２５１（２００８）１１－０１４３—０３
Ｐｒｏｃｅｓｓ ｏｆ ｗｅｂｓｉｔｅ ｃｏｎｓｔｒｕｃｔｉｏｎ ａｎｄ ｔｈｅ ｓｋｉｌｌｓ ｆｏｒ ｄｅｓｉｇｎｉｎｇ ｔｈｅ ｗｅｂｓｉｔｅ
ＣＯＮＧ Ｙｕａｎ－ｙｕａｎ，ＸＩＡＯ Ｙａｎ—ｈｕａ，ＺＨＡＯ Ｎａ
（Ａｇｒｉｃｕｌｔｕｒａｌ Ｅｃｏｎｏｍｙ ａｎｄ Ｉｎｆｏｒｍａｔｉｏｎ Ｓｅｒｖｉｃｅ Ｃｅｎｔｅｒ，Ｊｉｌｉｎ Ａｃａｄｅｍｙ ｏｆ Ａｇｒｉｃｕｌｔｕｒａｌ Ｓｃｉｅｎｃｅｓ，Ｃｈａｎｇｃｈｕｎ １３００３３，Ｃｈｉｎａ）
Ａｂｓｔｒａｃｔ：Ｔｈｅ ｐａｐｅｒ ｓｕｍｍｅｄ ｕｐ ｆｉｖｅ ｓｔａｇｅｓ ｏｆ ｔｈｅ ｐｒｏｃｅｓｓ ｏｆ ｗｅｂｓｉｔｅ ｃｏｎｓｔｒｕｃｔｉｏｎ ａｎｄ ｉｎｔｒｏｄｕｃｅｄ ｔｈｅｍ ｓｅｐａｒａｔｅｌｙ，ａｎｄ ｅｘｐｏｕｎｄｅｄ
ｔｈｅ ｓｋｉｌｌ ｏｆ ｗｅｂｓｉｔｅ ｄｅｓｉｇｎ ｆｒｏｍ ｔｈｅ ｗｅｂｓｉｔｅ ｏｖｅｒａｌｌ ｓｔｙｌｅ，ｃｏｌｏｒ ｍａｔｃｈｉｎｇ ａｎｄ ｌａｙｏｕｔ ｐｌａｎｎｉｎｇ．
Ｋｅｙ ｗｏｒｄｓ：Ｗｅｂｓｉｔｅ ｃｏｎｓｔｒｕｃｔｉｏｎ；Ｗｅｂｐａｇｅ ｍａｋｉｎｇ；Ｄｅｓｉｇｎｉｎｇ ｓｋｉｌｌ
ｌ 引言
随着Ｉｎｔｅｒｎｅｔ的兴起和广泛应用，互联网成为人
的方式．即在首页中罗列出网站的主要内容分类、网
站导航、重点信息、企业信息等等。另一种是形象展
示型，通过艺术造型和设计布局，利用一系列与企业
形象和产品、服务有关的图像（较多），文字信息
（较少）。组成生动的画面，意在展示一种形象、一个
们快速获取、发布和传递信息的重要渠道，它在人们
政治、经济、生活等各个方面发挥着重要的作用。在
网络空间里，网站作为发布与获得信息的重要平台，
是个人、企业和政府机关的形象和存在，网站的建设
与管理是一个机构、企业实现现代化管理和参与市场
竞争的重要手段。如何构建一个成功的网站现已成为
氛围，吸引访问者进入浏览。在制作主页时，要针对
不同的类别明确自己的定位方向，设计出适合自己需
要的站点。
计算机网络领域最热门的话题。
２．２策划阶段
根据站点的目标整理出站点的内容框架以及逻辑
结构图。目标确定后，初步收集整理出为达到这些目
２网站建设的基本过程
一
个网站的完整建构是一个比较复杂的过程，概
括起来分为以下几个阶段：
的站点需要包含的内容，形成站点设计的需求纲要。
待定下内容纲要后．大致画出站点的结构图。结构图
有很多种，顺序结构、网状结构、继承结构、Ｗｅｂ结
构等，根据网站的内容而定。多数复杂的网站会综合
应用到几种不同的结构图。画出结构图的目的主要是
２．１分析阶段
定位网站的主题和类别。做网站并不是盲目地想
做多大就做多大，首先要对网站进行调研。一方面要
清楚网站建设的目的和受众群体的基本情况，另一方
面要掌握网站承办方的需求与喜好，兼顾二者以保证
网站的可观性和实用性。根据自身的能力和实际情
况．寻找一个好的出发点，确定网站的主题。
便于有逻辑地组织站点和链接，同时，为将来利用这
个图进行任务分配做准备。
２－３实现阶段
这一阶段可以分为两个部分。第一部分为绘制布
根据主题，网站的设计也有不同的类别。一种是
信息罗列型，这类网站为访问者提供大量的信息且访
问量较大。是一般大、中型企业网站和门户网站常用
局草图．这一部分可在纸上完成。无须讲究细腻工
整．草图绘制只粗略的勾画出创意的轮廓即可。尽可
收稿日期：２００８—０８—１３；修回日期：２００８—０８—１５
作者简介：丛媛媛（１９８２一），女，研究实习员，学士，研究方向：网络信息。
－－－——
１４３－－－——
《农业网络信息》２００８年第１１期 应用实践
能多画几张．从中选定一个满意的方案作为继续创作
的脚本。然后对草图进行细化，将页面的功能模块等
网站的特有形象。
３．２色彩搭配
色彩的选择和搭配与网站的主题是分不开的。一
内容具体的摆放在草图上。确定最终方案。第二部分
为网页设计与制作，这一过程是在计算机上完成的。
首先．以绘制好的布局草图为蓝本，利用Ｐｈｏｔｏｓｈｏｐ
或Ｆｉｒｅｗｏｒｋｓ软件完成网站界面的精细设计与图片切割
导出。接下来使用网页制作工具完成页面编辑、链接
设置、广告与动态效果添加等系列工作，最终实现完
整的网页效果。
般来说。一个网站必须有一种或两种象征网站内涵的
主题色让浏览者过目不忘。例如：ＩＢＭ的深蓝色，肯
德鸡的红色条型就很有代表性。当主题色确定好后，
再根据这个色调搭配其他颜色。配色时一定要考虑配
色与主题色的关系．要体现什么样的效果。例如：绿
色配以金黄、淡白，可以产生优雅、舒适的气氛；蓝
色与白色混合，能给人柔顺、淡雅的感觉：红色和黄
２．４测试与发布阶段
网页制作完毕后，需要在浏览器中进行测试，包
括检测网页、图片等链接是否正常，内容显示是否正
色、金色搭配能渲染喜庆的气氛等。整个页面在视觉
上应是一个整体，以达到和谐、悦目的视觉效果。下
面是三种常用的色彩搭配技巧：
运用相同色系色彩：先选定一种色彩，然后调整
透明度或者饱和度，产生新的色彩，用于网页。这种
搭配容易塑造网页和谐统一的氛围．缺点是容易造成
页面的单调．因此往往利用局部加入对比色来增加变
确等。发现错误或不合理的地方，及时进行修改，以
保证网页的建设质量。
在Ｉｎｔｅｍｅｔ上申请一个域名和“服务器空间”指
定网站的存放位置，是发布网站的前提工作。测试后
一
切正常的网站，方可以进行发布。ｎ 是网站常用
的系统上传工具． 也可直接用Ｆｒｏｎｔｐａｇｅ或
化，如局部添加对比色彩的图片等。
运用对比色：先选定一种色彩，再选择与其色相
差距较远的色彩作为对比色来进行搭配。这种用色方
Ｄｒｅａｍｗｅａｖｅｒ中的发布站点命令直接进行上传。
２．５维护阶段
网站发布后，网页要根据各种情况随时进行调整
式适合体现轻松、积极的素材的网站。缺点是容易造
成色彩纷杂，使用中应控制好色彩使用的度。
使用过渡色：过渡色能够将几种不协调的色彩统
一
变化。从发布的主体内容、信息互动反馈和站点安全
等方面，及时进行维护和更新。同时，不断吸取新技
术升级网页。使网页的访问更为方便快捷、信息含量
更加丰富、界面更加美观。
起来，应用形式包括：两种色彩的中间色调、单色
中混入黑、白、灰进行调和以及单色中混入相同色彩
进行调和等等。
３．３布局规划
网页布局常见以下几种类型：
“国”字型：也称为“同”字型，是一些大型网
站首页常用的类型。在网页最上面是网站的标题以及
３网站设计的技巧
３．１风格整体统一
结构的一致性：网站结构是网站风格统一的重要
手段，包括网站布局、文字排版、装饰性元素出现的
位置、导航的统一、图片的位置等等，在结构的一致
性中，我们要强调网站标志性元素的一致性，即网站
或公司名称、网站或企业标志、导航及辅助导航的形
式及位置、公司联系信息等保持一致。这种方式是目
前网站普遍采用的结构，可以减少设计、开发的工作
量，也更有利于网站的维护与更新。
Ｂａｎｎｅｒ广告条，接下来就是网站的主要内容．左右分
列一些两小条内容，中间是主要部分，与左右一起罗
列到底，最下面是网站的一些基本信息、联系方式、
版权声明等。这种布局直观、条理、均衡但也有版式
呆板、僵化的缺陷。在采用这种布局时要注意色彩的
色彩的一致性：确定能体现网站形象和延伸内涵
的主题色彩后，将其应用于网站标识、标题、主菜单
和谐搭配，通过巧妙的用色，能够调节页面的整体韵
律。
拐角型：这种结构和“国”字型很相近．上面是
标题及广告横幅，接下来的左侧是一窄列链接等．右
和主色块，给人整体统一的感觉。运用其他色彩进行
搭配只是作为点缀和衬托，绝不能喧宾夺主。
利用背景取得统一：将公司的标志、象征性的简
列是很宽的正文，下面也是一些网站的辅助信息。在
这种类型中，一种很常见的类型是最上面是标题及广
告，左侧是导航链接。一般用于网站的内页。
标题正文型：上面是标题或广告条一类的内容。
单图片作为背景，并将其淡化，使访问者在浏览网站
内容的同时不经意记下公司的标志。在整个页面中形
成特有元素在大小、明暗及位置的呼应，有利于塑造
《农业网络信 ￣｝２００８年第１１期 应用实践
下面是正文，一些文章页面或注册页面等就是这种类
型。
注意在设计中多吸取好的网站设计的精髓．才能使网
站受到更多人的欢迎。
左右框架型：这是一种左右为分别两页的框架结
构，一般左面是导航链接，有时最上面会有一个小的
４结束语
建设一个好的网站．形象地展现一个单位的实力
和风貌，这其中明确网站的建设目标和具体内容．把
握网站规划和建设的总体架构，掌握网页的设计与制
标题或标致，右面是正文。我们见到的大部分的大型
论坛都是这种结构的，有一些企业网站也喜欢采用。
这种类型结构非常清晰，一目了然。但在使用框架时
也存在问题，即不容易被搜索引擎找到。如果考虑到
这一点，应尽量少用带框架的页面。
整幅效果型：这种布局打破了传统菜单框架的固
定模式，采用大幅图片或Ｈａｓｈ动画，把页面设计成
一
作技术，使用适当的软件平台与工具等每个环节都是
十分必要的。只有将网页中的形式和内容有机地结合
起来，不断地学习实践，丰富创新网页制作的方法，
才能真正实现网站建设的最终目的。
参考文献
［１］武上富．网页制作技巧与设计原则Ⅲ．广东科技，２００６，（１）：６５－
６６．
个极具创意的广告作品。作为展示企业形象来说。
这种页面非常美观，容易让访问者驻足欣赏。但其下
载速度缓慢、文字信息量少，服务型网站不宜采用。
在版面布局中主要是考虑导航、必要信息与正文
之间的布局关系。比较多的情况是采用顶部放置必要
的信息，如企业名称、标志、广告条以及导航条，或
将导航条放在左侧而右侧是正文等等，这样的布局结
构清晰、易于使用。当然，也可以结合不同类型的布
局进行变化尝试。但任何一个具体的版面布局方案，
都要以网站的实际情况和网站受众的喜好为出发点，
【２】齐兴斌．网页制作过程及制作时的注意事项【Ｊ】．科技情报开发
与经济，２ｏ０６，（１４）：２２６～２２７．
［３］喻会．浅谈网站的设计与制作 ．湖北成人教育学院学报，２（ｘ】７，
（５）：１０２－１０３．
【４．赵素蕊，柳冬青．网页设计风格与色彩『Ｊ１．商场现代化，２０Ｈ０７，
（４）：１３６～１３７．
－－———
１４５・－・——
版权声明：本文标题：网站制作流程与设计技巧 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1716198259a692044.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论