网站界面设计心得

第一篇：网站界面设计心得

网站界面设计方法

网站界面设计方法

软件的整体风格和整体气氛表达要同企业形象相符合并应该很好的体现企业 CI 这方面比较经典的案例有：可口可乐个性鲜明的前卫软件 “Life Tast Good” 工整、全面、细致的通用电气公司软件 “We bring good thing to life GE 带来美好的生活）” 崇尚科技创新文化的 3M 公司软件 “Creat solut for busi industri and home” 刻意扮演一个数字电子娱乐之集大成者的角色，另外。要成为新时代梦想实现者的索尼软件；平易近人、亲情浓郁的通用汽车公司软件体现了 “ 以人为本 ” 企业定位和营销策略；服务全面、细致、方便，处处体现 “ 门庭若市 ” 服务理念的希尔顿大酒店软件。

包括硬件界面和软件界面，界面设计是人与机器之间传送和交换信息的媒介。计算机科学与心理学、设计艺术学、认知科学和人机工程学的交叉研究领域。近年来，随着信息技术与计算机技术的迅速发展，网络技术的突飞猛进，人机界面设计和开发已成为国际计算机界和设计界最为活跃的研究方向。

研究包括：

硬件人机界面的设计风格、人文关怀等；软件人机界面的形式与标准、软件人机界面设计、Internet 网页界面设计、图标设计等；人机界面设计评价与可用性测试；新交互技术及展望，人机界面的定义、起源、发展、研究内容及发展趋势；人机界面设计中认知心理学、人机工程学、人机界面的艺术设计、色彩设计等；人机界面设计。介绍了多通道用户界面、下一代人机界面展望及附录。

关于软件界面设计 : 会看到很多软件设计很朴素，软件用户界面（Softwar User Interfac 指软件用于和用户交流的外观、部件和程序等等。如果你经常上网的话。看起来给人一种很舒服的感觉；有点软件很有创意，能给人带来意外的惊喜和视觉的冲击；而相当多的软件页面上充斥着怪异的字体，花哨的色彩和图片，给人网页制作粗劣的感觉。软件界面的设计，既要从外观上进行创意以到达吸引眼球的目的还要结合图形和版面设计的相关原理，从而使得软件设计变成了一门独特的艺术。通常的讲，企业软件用户界面的设计应遵循以下几个基本原则： ．用户导向（User orient 原则

要站在用户的观点和立场上来考虑设计软件。要作到这一点，设计网页首先要明确到底谁是使用者。必需要和用户来沟通，解他需求、目标、期望和偏好等。网页的设计者要清楚，用户之间差别很大，能力各有不同。比如有的用户可能会在视觉方面有欠缺（如色盲）对很多的颜色分辨不清；有的用户的听觉也会有障碍，对于软件的语音提示反映愚钝；而且相当一部分用户的计算机使用经验很初级，对于复杂一点的操作会感觉到很费力。另外，用户使用的计算机机器配置也是千差万别，包括显卡、声卡、内存、网速、操作系统以及浏览器等都会有不同。设计者如果忽视了这些差异，设计出的网页在不同的机器上显示就会造成混乱。． KISS Keep It Simpl And Stupid 原则 简洁和易于操作是网页设计的最重要的原则。终究，KISS 原则就是 “Keep It Simpl And Stupid” 缩写。软件建设进去是用于普通网民来查阅信息和使用网络服务。没有必要在网页上设置过多的操作，堆集上很多复杂和花哨的图片。该原则一般的要求，网页的下载不要超越 10 秒钟（普通的拨号用户 56 Kbp 网速）尽量使用文本链接，而减少大幅图片和动画的使用；操作设计尽量简单，并且有明确的操作提示；软件所有的内容和服务都在显眼处向用户予以说明等。．布局控制

很多网页设计者重视不够，关于网页排版布局方面。网页排版设计的过于死板，甚至照抄他人。如果网页的布局凌乱，仅仅把大量的信息堆集在页面上，会干扰浏览者的阅读。一般在网页设计上所要遵循的原理有：

人一次性接受的信息量在 7 个比特左右为宜。总结一个公式为：一个人一次所接受的信息量为 7 ± 2 比特。这一原理被广泛应用于软件建设中，1 Miller 公式。根据心理学家 Georg A.Miller 研究标明。一般网页上面的栏目选择最佳在 5 9 个之间，如果软件所提供给浏览者选择的内容链接超过这个区间，人在心理上就会烦躁，压抑，会让人感觉到信息太密集，看不过来，很累。例如 Aol.com 栏目设置： Main MyA ol Mail Peopl Search Shop Channel 和 Devic 共八个分类。Msn.com 栏目设置： MSN Home My MSN Hotmail Search Shop Monei 和 Peopl & Chat 共七项。然而很多国内的软件在栏目的设置远远超出这个区间。

不能超过 9 个栏目。但如果你内容实在多，2 分组处置。上面提到对于信息的分类。超出了 9 个，需要进行分组处置。如果，网页上提供几十篇文章的链接，需要每隔 7 篇加一个空行或平行线做以分组。如果你软件内容栏目超出 9 个，如微软公司的软件，共有 11 个栏目，超越了 9 个。为了不破坏 Miller 公式，设计时使用蓝黑两种颜色分开，具体可以访问 www.xiexiebang.com 4 ．视觉平衡

也要各种元素（如图形、文字、空白）都会有视觉作用。根据视觉原理，网页设计时。图形与一块文字相比较，图形的视觉作用要大一些。所以，为了达到视觉平衡，设计网页时需要以更多的文字来平衡一幅图片。另外，依照中国人的阅读习惯是从左到右，从上到下，因此视觉平衡也要遵循这个这个道理。例如，很多的文字是采用左对齐〈 Align=left 需要在网页的右面加一些图片或一些较明亮、较醒目的颜色。一般情况下，每张网页都会设置一个页眉部分和一个页脚部分，页眉部分常放置一些 Banner 广告或导航条，而页脚局部通常放置联系方式和版权信息等，页眉和页脚在设计上也要注重视觉平衡。同时，也决不能低估空白的价值。如果你网页上所显示的信息非常密集，这样不但有利于读者阅读，甚至会引起读者反感，破坏该软件的形象。网页设计上，适当增加一些空白，精炼你网页，使得页面变的简洁。5 ．色彩的搭配和文字的可阅读性

不同的颜色对人的感觉有不同的影响，颜色是影响网页的重要因素。例如：红色和橙色使人兴奋并使得心跳加速；黄色使人联想到阳光，一种快活的颜色；黑颜色显得比较庄重，考虑到希望对浏览者产生什么影响，为网页设计选择合适的颜色（包括背景色、元素颜色、文字颜色、链节颜色等）可以参考报纸的编排方式将网页的内容分栏设计，为方便阅读软件上的信息。甚至两栏也要比一满页的视觉效果要好。另一种能够提高文字可读性的因素是所选择的字体，通用的字体（Arial Courier New Garamond Time New Roman 中文宋体）最易阅读，特殊字体用于标题效果较好，但是不适合正文。如果在整个页面使用一些特殊字体（如 Cloister Gothic Script Westminst 华文彩云，华文行楷）这样读者阅读起来感觉一定很糟糕。该类特殊字体如果在页面上大量使用，会使得阅读颇为费力，浏览者的眼睛很快就会疲劳，不得不转移到其他页面。6 ．和谐与一致性

使得设计良好的网页看起来应该是和谐的或者说，通过对软件的各种元素（颜色、字体、图形、空白等）使用一定的规格。软件的众多单独网页应该看起来像一个整体。软件设计上要保持一致性，这又是很重要的一点。一致的结构设计，可以让浏览者对软件的形象有深刻的记忆；一致的导航设计，可以让浏览者迅速而又有效的进入在软件中自己所需要的局部；一致的操作设计，可以让浏览者快速学会在整个软件的各种功能操作。破坏这一原则，会误导浏览者，并且让整个软件显的杂乱无章，给人留下不良的印象。当然，软件设计的一致性并不意味着刻板和一成不变，有的软件在不同栏目使用不同的风格，或者随着时间的推移不断的改版软件，会给浏览者带来新鲜的感觉。7 ．个性化 1 符合网络文化

要符合 Internet 网络文化的要求。首先，企业软件不同于传统的企业商务活动。网络最早是非正式性、非商业化的只是科研人员用来交流信息。其次，网络信息是只在计算机屏幕上显示而没有打印出来阅读，网络上的交流具有隐蔽性，谁也不知道对方的真实身份。另外，许多人在上网的时候是家中或网吧等一些比较休闲，比较随意的环境下。此时网络用户的使用环境所蕴涵的思维模式与坐在办公室里西装革履的时候大相径庭。因此，整个互联网的文化是一种休闲的非正式性的轻松活泼的文化。软件上使用幽默的网络语言，发明一种休闲的轻松愉快、非正式的氛围会使软件的访问量大增。2 塑造软件个性

第二篇：网站界面设计应该注意的情况

网站界面设计应该注意的情况！

网站用户界面（Website User Interface）指网站用于和用户交互的外观、元素和程序等等。

如果你经常上网，就会看到很多网站设计很朴素，看起来给人非常舒服的感觉；有的网站很有创意，常常给人带来意外的惊喜和视觉的冲击；但相当多的网站页面上充斥着怪异的字体，花哨的色彩和图片，给人网页制作粗劣的感觉。

网站界面设计，既要从外观上进行创意以到达吸引眼球的目的，还要结合图形和版面设计的相关原理，从而使得网站界面设计变成了一门独特的艺术。通常，企业网站用户界面的设计一般应遵循以下几个基本原则：

一．用户导向原则（User oriented）

设计网页首先要明确到底谁是这个网页的使用者，要站在用户的观点和立场上来考虑和设计网站。要做到这一点，就必须要和用户来沟通，了解他们的需求、目标、期望以及偏好等。网页的设计者要清楚，用户之间的差别是很大的，他们的能力也各有不同。比如有的用户可能会在视觉方面有所欠缺（如色盲），对很多的颜色分辨不清；有的用户的听觉也可能会有些障碍，对于网站的语音提示反应比较迟钝；而且相当一部分用户的计算机使用经验还很初级，对于复杂一点的操作就会感觉到很费力。另外，用户使用的计算机机器配置是千差万别的，如显卡、声卡、内存、网速、操作系统以及浏览器等都会有所不同。设计者如果忽视了这些差别，设计出的网页在不同的机器上显示就会造成错乱。

二．简洁和易于操作原则（Keep It Simple And Stupid-KISS）

KISS原则就是“Keep It Sample And Stupid”的缩写，简洁和易于操作是网页设计的最重要的原则。毕竟，网站建设出来是用于普通网民来查阅信息和使用网络服务。没必要在网页上设置过多的操作，堆积很多复杂和花哨的图片。此原则的一般要求：

1、网页的下载不要超过6秒钟（普通的家庭宽带为2M的，速度一般在220kb/s）；

2、网页尽量使用文本链接，而减少大幅图片和动画的使用，从而加快网页的打开时间；

3、操作设计尽量简单，并且有明确的操作提示；

4、网站所有的内容和服务都尽量在显眼处向用户予以说明等。三．布局控制（Layout）

在网页排版布局方面，很多网页设计者还不够重视，网页界面设计排版过于死板，甚至照抄他人。如果网页的布局凌乱，仅把大量的信息堆集在页面上，就会干扰浏览者的阅读。一般在网页界面的版式设计上所要遵循的原则有： 1、7±2的Miller公式。

根据心理学家George A.Miller的研究表明，人一次性接受的信息量在7个比特左右为宜。总结一个公式为：一个人一次所接受的信息量为 7±2 比特。这一原理被广泛应用于网站建设中，一般网页上面的栏目选择最佳在5～9个之间，如果网站所提供给浏览者选择的内容链接超过这个区间，人在心理上就会烦躁，压抑，会让人感觉到信息太密集，看不过来，很累。然而很多国内的网站在栏目的设置远远超出这个区间。

2、分组处理。

上面提到，对于信息或栏目的分类，不能超过9个。但如果你的内容实在是太多，超出9个，就需要进行分组处理。如果，你的网页上有几十篇文章的链接，需要每隔7篇加一个空行或平行线做以分组。如果你的网站内容栏目超出9个，如腾讯公司的网站或其它几个比较知名的门户，有很多个栏目，超过了9个。为了不破坏7±2的Miller公式，在设计时把比较有代表性的分类加粗，然后再按性质分组。

四．视觉平衡（Visual balance）

网页设计时，各种元素（如图形、文字、空白）都要有视觉平衡作用。根据视觉原理，图形与一块文字相比较，图形的视觉作用要大一些。所以，为了达到视觉平衡，设计网页时需要以更多的文字来平衡一张图片。另外，按照中国人的阅读习惯是从左到右，从上到下，因此视觉平衡也要遵循这个这个原则。例如，你的很多的文字是采用左对齐，需要在网页的右面加一些图片或一些较明亮、较醒目的颜色。通常情况下，每张网页都会设置一个页眉部分和一个页脚部分，页眉部分通常放置一些Banner广告或导航条及网站LOGO，而页脚部分通常放置联系方式和版权信息等，页眉和页脚在设计上也要注重视觉平衡。同时，也决不能低估空白的价值；网页上所显示的信息非常密集，这样不但不利于读者阅读，甚至会引起读者反感，破坏该网站的形象。在网页设计上，适当的地方增加一些留白，精炼和升华你的网页的形象及美感，使得页面变得简洁。

五．色彩的搭配及文字的可阅读性（Colors and text can be read）

颜色是影响网页的重要因素之一，不同的颜色对人的感觉有不同的影响，比如：红色和橙色使人兴奋并使得心跳加速；黄色使人联想到阳光，是一种快活的颜色；黑色显得比较庄重，考虑到你希望对浏览者产生什么影响，为网页设计选择最恰当的颜色（包括背景色、元素颜色、文字颜色、链节颜色等）。

为了方便阅读网站上的信息资讯，可以借鉴参考报纸及杂志的编排方式将网页的内容分栏设计，甚至两栏也要比一满页的视觉效果要好。另外一种能够提高文字可读性的因素是字体的选择，通用的字体（Arial，Courier New，Garamond，Times New Roman，中文宋体）最易阅读，特殊字体用于标题效果较好，但是不适合正文。如果在整个页面使用一些特殊字体（如Cloister，Gothic，Script，Westminster，华文彩云，华文行楷），这样读者阅读起来感觉一定很糟糕。这类特殊字体如果在页面上大量使用，会使得阅读颇为费力，浏览者的眼睛很快就会疲劳，不得不转移到其他页面。

六．和谐与一致性（Harmony and consistency）

通过对网站的各种元素（颜色、字体、图形、空白等）使用一定的规格，使得设计良好的网页看起来应该是和谐的。或者说，网站的众多独立网页看起来更像一个整体。网站界面设计上要保持一致性，这是很重要的一点。一致的网站结构设计，可以让浏览者对网站的形象有深刻的记忆与印象；一致的导航设计，可以让浏览者迅速而又有效的进入在网站中自己所需要的部分；一致的操作设计，可以让浏览者快速学会在整个网站的各种功能操作。如果破坏这一原则，就会误导浏览者，并且让整个网站显得杂乱无章，给人留下不良的印象。

当然，网站设计的一致性并不意味着刻板和一成不变，有的网站在不同栏目使用不同的风格，或者随着时间的推移不断的改版网站，会给浏览者带来新鲜的感觉。

七．个性化（Individualization）

1、符合网络文化

企业网站不同于传统的企业商务活动，要符合Internet网络文化的要求。首先，网络最早为非正式性、非商业化的，只是科研人员用来交流信息的。其次，网络信息是只在计算机屏幕上显示而没有打印出来阅读，网络上的交流具备隐蔽性，谁都不知道对方的真实身份和信息。此外，许多人在上网的时候是在家中或网吧等一些比较休闲，比较随意的环境下。此时访客的使用环境所蕴涵的思维模式与坐在办公室里西装革履的时候是截然不同的。因此，整个互联网的文化是一种休闲的、非正式性的、轻松活泼的文化。在网站上使用幽默的网络语言，创造一种休闲的、轻松愉快、非正式的氛围就会使网站的访问量大增。

2、塑造网站个性

另外，网站的整体风格和整体气氛表达要同企业形象相符合并且应该很好的体现企业CI。

八．网页的均衡规划与选择（Planning and selection）

1、尺寸

·800*600能照顾到所有网友的电脑，但相当是张“小报”。

·1024*768渐成主流。1024*768能比800*600多出一栏的信息。

·正文页采用自适应设计，能在正文页做更多相关内容。首页也可以尝试自适应的设计。自适应设计的核心是要留出宽度伸缩自如的栏。

·在1024*76模式下，页面的长度不易超过10屏。

·随着电脑升级换代，分辨率提高，电脑屏幕能够提供的面积越来越大，这是一种难得的资源，要充分利用。“小报”改“大报”要增加一倍的纸张成本，网站改“宽版”，成本的增加却要小得多。

2、字体字号

·目录页用小字号，为的是放更多的标题。·正文页用大字号。为的是让读者读得舒坦。

·慎用不容易看清楚的楷体。楷体的作用等于图片，主要起美化版面的作用。·多用对搜索引擎友好的标粗，来表示重点。

3、颜色

·同一个页面的颜色不要超过4种。眼花缭乱，容易产生视觉疲劳。

·颜色对比不要反差太大。网页版面不是美术作品，要避免形式对内容的喧宾夺主。

·文字+底色能够起到很好的突出作用，在视觉变化上相当于图片的作用。

4、静态化

·访问量大的页都应该静态化，以便减少服务器压力，增强网站稳定性。访问不到的网页是最差的网页。

·动态化和静态化在一个页面中结合使用，能同时得到轻负荷和即时交互性的好处。

·哪些页面的哪些地方需要静态化要在一开始就考虑，访问量大了之后，再高考虑，就迟了，由动态化转为静态化，会有很多历史问题。

5、分栏

·首页选4栏？还是3栏？

·正文页多用2栏。

·“纵向逻辑”是指将相近的内容从上至下排列，而不是从左向右排列。如果读者对这方面内容感兴趣，他会从上至下，逐行阅读。这样可充分力利用首屏，让首页增多从上至下阅读的可能。

·避免一栏太强，一栏太弱。通过图片、套红等手段进行调控。平均使用读者主意力。使读者不敢放过左中右任何一栏。

6、图片

·有图有真相，一图胜千言。十分必要时才用。因为图片的编辑成本和带宽成本都比较文字高很多。

·在目录页的图，小点，再小点，多用特写；小分辨率，能看就行。在正文页的图，保证清晰，美观。正文页有的是版面。

·正文页在5屏之内，尽量不要分页。让读者一次读完。

7、导航条与网站地图

·导航条是网站的门牌号码，不能随意更改。否则，读者会迷路，找不到他原来看的内容。

·导航条上的分类名的前后次序要兼顾重点和读者阅读逻辑，即归类摆放。

·导航条最多三行。最好二行。太多行显重。

·导航的更多，就是网站地图。网站地图的摘要版可以放在网站底部，成为底部导航。网站的底部导航，很有必要。其好处是：

一、可放多行；

二、可形成网站底部的阅读重点。将读者从首屏带到最后一屏，期间会增加很多点击。

·主导航和频道导航：主导航每页都有，频道导航只在本频道页面出现。

8、首页更新成本

·首页设计不能只考虑美观、协调，要考虑24小时更新一遍之要求。更新是网站的生命，一定要最大限度地降低首页更新成本。

·交叉自动同步更新的设计，可有效降低各种首页更新成本，给读者内容丰富即时的感觉。

·更新即时的首页是网站的资源，因为是资源，更多的标题会拥上这个首页。如此，正循环，这个首页也就火了。更新不即时的首页是网站的鸡肋，会越来越寂寞，最终会被荒废。

·每个首页的设计成至少要有一个读者点击进去的理由。即时更新比独家内容成本低。

第三篇：毕业论文(基于div+css的Tasty美食网站的界面设计)

毕 业 论 文（设计）

题

目 基于DIV+CSS的

美食网站界面设计

指导老师 ***** 专业班级 ******* 姓

名 *** 学

号 *********

2014 年 05 月 30 日

浙江经贸职业技术学院毕业论文(设计)

摘 要：美食，贵的有山珍海味，便宜的有街边小吃。美食是不分贵贱的，只要是自己喜欢的，就可以称之为美食。吃前有期待、吃后有回味的东西。美食遭遇心情的时候，美食已不仅仅是简单的味觉感受，更是一种精神享受。美食还体现人类的文明与进步。本网站以美食作为窗口，让海内外观众领略中华饮食之美，进而感知中国的文化传统和社会变迁。本文的主要内容集中在：对网站界面制作过程的详细描述，对div+css布局进行讨论，并对网站开发过程中使用的开发工具和技术做了简要的介绍。

关键词：网页设计；div+css；Dreamweaver；美食网站 页 第浙江经贸职业技术学院毕业论文(设计)

目录

引 言..................................................................1 1市场调研..............................................................1

1.1 网站开发背景和需求...........................................1 1.2 同类型网站的分析.............................................2 2 文献检索..............................................................3

2.1 css样式编写规则..............................................3 2.2 div+css布局方式..............................................4 2.3 JavaScript编写规则...........................................5 2.4 网站配色方案.................................................5 3 设计实践..............................................................5

3.1 设计立意.....................................................5 3.2 创作过程.....................................................6 3.2.1美食网站类主题与版面的分析..............................7 3.2.2美食网站效果图的设计与制作..............................8 3.2.3界面元素的制作过程......................................9 3.2.4首页界面的制作过程.....................................10 3.2.5简介界面的制作过程.....................................14 3.2.6中式美食界面的制作过程.................................14 3.2.7相册界面的制作过程.....................................15 3.2.8西式美食界面的制作过程.................................17 3.2.9联系我们界面的制作过程.................................18 3.3 制作中遇到的问题和解决方法..................................20 4 网站的测试..........................................................20 结 论.................................................................22 致谢...................................................................23 参考文献...............................................................24

1页 第浙江经贸职业技术学院毕业论文(设计)

引 言

随着信息时代的来临，IT行业已经成为现今最受关注的行业之一，它发展飞速且在全球范围内广泛、普及应用，人类的生活因此有了革命性的变化。同时，网络技术的发展也取得了卓越的成就，为网站开发、界面设计等奠定了坚实的基础。

论文详细论述了关于一个美食网站的开发的设计过程。在技术上，采用了 Dreamweaver网站开发工具，以 HTML的超大功能结合JavaScript的客户端语言。

本文实现了首页、简介、中式美食、西式美食、联系我们等功能，全面化个人网站的需求。

论文组织如下：首先阐述了该网站的开发背景、意义，详细介绍了div+css理论知识；其次介绍了相关的开发工具及技术基础；接着对网站进行了需求分析，提出了具体的设计方案；然后展现了整个网站的具体实现，包括网页的设计和链接，各功能模块的实现；最后对该网站进行了严格的测试。

1市场调研

1.1 网站开发背景和需求

“忽如一夜春风来，千树万树梨花开”，迅猛发展并日益成熟的互联网已经影响到我们生活的方方面面。人们真真切切的体会到了网络带给大家的便捷，互联网也以其独有的优势快速地渗透到越来越多的传统领域。俗话说“民以食为天”，在解决了温饱问题的现代，人们对食物的要求越来越高，已不仅仅局限于能吃饱就好，更多是希望能吃好，追求更多的美食。

近年来，已出现不少网站对美食进行普及宣传，提供大量美食信息，介绍各菜系和小吃的饮食文化、饮食习俗、饮食习惯等，具有一定的可读性和趣味性。在网上推广美食，详述各种美食做法必定可以受到全国乃至全世界的美食爱好者的追捧。

设计开发此美食网站最基本的意义，就是能够尽可能详细地展示、介绍各种 第 页

浙江经贸职业技术学院毕业论文(设计)

美食信息，同时提供美食爱好者一个交流的平台，使得更多的美食传统做法得到推广，也可激发更多美食创意的产生。1.2 同类型网站的分析

美食网站越来越多，这说明了人们对美食的需求也越来越多。本人在设计之前对同类型网站进行了调研。首先对中华美食网进行分析，中华美食网首页如图1.1所示。

图1.1 中华美食网首页

中华美食网首页事个页面采用黄色为背景，导航图片简洁明了，色彩简单，网站多以文字加以图片展示，多采用a链接，内容包涵广，加了滚动图片，动感十足。头部的logo简洁大方，在中规中矩的美食网站中，中华美食网的首页布局紧凑且信息量大，图文并茂又不显杂乱。

接着又分析了美食天下网站，该网站首页截图如图1.2所示。

第 页

浙江经贸职业技术学院毕业论文(设计)

图1.2美食天下网站首页

不同于中华美食网的内容繁多，美食天下网站事个首页内容较少，事个版面更显清晰整洁，背景采用裸粉色，看过去更为清爽。导航利用div+css在大导航下加了子导航，鼠标移上去时会显示不同的文字信息。不过与中华美食网设计相同的是，该网站也是以黄色为导航背景，内容种类多，版面紧凑。文献检索

本次设计是遵循web标准规范，在dreamweaver中利用div+css，并在文本文档中编写JavaScript代码的形式完成事个网站界面的设计。此外网站的色彩搭配方面也需要格外注意，因此分别对css样式编写的规则、div+css布局方式、JavaScript的编写规则和网页色彩搭配方案做了相关检索。2.1 css样式编写规则

css类型中，内联式是指直接在html标签后写样式代码。而嵌入式就是对本文件内所有的该类型的标签名运用这样的样式，但该样式的标签要放在head中。

嵌入式样式表解决了同一个文件内使用同样样式的多个标签的代码重用，当接触到有很多个文件组成的网站，如果这些独立的网页文件要使用统一的风格，就需要使用外部样式表。建立后缀名.css的文本文件。在使用时，在引用该样式

第3 页

浙江经贸职业技术学院毕业论文(设计)

表的网页文件内的head标签中使用link标签来引入。

css规则由两个主要的部分构成：选择器，以及一条或多条声明。选择器通常是您需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成。属性（property）是希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

有三种方法可以在站点网页上使用样式表： ① 外部样式：将网页链接到外部样式表。② 内页样式：在网页上创建嵌入的样式表。③ 行内样式：应用内嵌样式到各个网页元素。2.2 div+css布局方式

对于网站div+css设计越来越受到业界的关注，从个人网站到企业及门户网站，页面设计人员已经将div+css作为了业界标准。

如果用div+css来构建和美化网站，那么div就是整个网站的骨架，css样式就是网站的衣服。其中的内容，就是血肉。要入手设计一个网站。那么，就要从div的布局开始。

本网站的骨架架构如下图2.1所示：

图2.1 设计中网站的骨架图

第 页

浙江经贸职业技术学院毕业论文(设计)

2.3 JavaScript编写规则

JavaScript程序应独立保存在后缀名为.js的文件中。

JavaScript代码不应该被包含在HTML文件中，除非这是段特定只属于此部分的代码。在HTML中的JavaScript代码会明显增加文件大小，而且也不能对其进行缓存和压缩。应尽量放到body的后面。这样可以减少因为载入script而造成其他页面内容载入也被延迟的问题。缩进的单位为四个空格。避免每行超过80个字符。在运算符号，最好是逗号后换行。下一行应该缩进8个空格。及时地更新注释也很重要。错误的注释会让程序更加难以阅读和理解。单行注释的符号是“//”，多行注释以“/*”开始，以“*/”结束。所有的变量必须在使用前进行声明。将var语句放在函数的首部。2.4 网站配色方案

同色系方案是选择彼此相邻的几种颜色构成的配色方案。例如橙色、橙红色以及橙黄色就可以组成一个同色系方案。使用同色系配色方案可以给人非常协调的感觉，因此在网站设计中非常常用。典型的运用方法就是，用一种颜色作为页面背景，而另外一种在颜色环中与其相邻的颜色作为前景色。

互补色方案则是互补色方案的配置。虽然略显繁琐，但是在现在的网站设计中非常流行，因为互补色适合于制作活泼时尚的效果，可以让网站魅力四射。

另外，在photoshop中，要想构造一个三色方案也是非常容易。首先选中一种颜色，记下他的H（Hue）值，然后为这个值加120以此类推得到第三种颜色，构成一个三色方案。三色方案中使用了三种彼此之间差别明显的颜色，因此页面显得相当不稳定，是一种可以带来比较另类的感觉的配色方案，将给予浏览者某种紧张感，这是因为这三种颜色均对比强烈。设计实践

3.1 设计立意

在中国传统文化教育中的阴阳五行哲学思想、儒家伦理道德观念、中医营养 第 页

浙江经贸职业技术学院毕业论文(设计)

养生学说，还有文化艺术成就、饮食审美风尚、民族性格特征诸多因素的影响下，创造出彪炳史册的中国烹饪技艺，形成博大精深的中国饮食文化。越来越多的人喜欢使用互联网查询信息、交流互动。美食需要传承，也需要交流，美食网站是一个交流美食的平台。

由于本人偏爱美食，时常关注美食信息，也因为所处的软件专业，平时对网站设计和HTML编写等方面有一定的熟悉度，借着此次制作毕业作品的机会，为美食设计一个版式新颖的网站，作为此论文的依据。

本次网站的制作主题确定为简洁型。整个网站以图片为主，减少文字。网页主要以黑色为背景，灰色为辅，以达到清新整洁的页面效果。

各页面之间布局力求工整合理，内容表达清晰。

本美食网站的建设，主要针对美食爱好者及各界需要搜集美食信息的网络用户的需求进行设计开发的，因此，将打造一个界面美观友好，布局合理，栏目功能强大，信息详尽的网站。主要实现如下目标：

① 向外界宣传美食文化和菜肴传统做法； ② 信息尽可能齐全，满足不同用户需求。

3.2 创作过程

利用Photoshop制作出网页效果图，再参考另外的一些美食网站，如中华美食网、美食天下等网站定下框架布局，考虑美食网站的logo设计。

网上搜集素材并下载，图片素材分类取名统一保存在images文件夹下，下载搜集图片如图3.1所示。

第 页

浙江经贸职业技术学院毕业论文(设计)

图3.1 图片搜集截图

有关介绍美食网站的文字素材复制并保存在meishi.txt中，文字资料如图3.2所示。

图3.2 文字资料截图

创建页面，做好首页及子页的命名，为样式、脚本分类创建文件夹。结合photoshop软件制作效果图，利用photoshop软件实现某些元素的裁剪及取材。

3.2.1美食网站类主题与版面的分析

在美食网站整体版面布局中，需要更多运用css样式、HTML代码和div+css布局使网站清爽简洁。需要达到的要求：

（1）色彩轻快，版面清爽，搭配合理

由于是美食类网站，所以版面不宜生硬死板，不宜过于花哨缭乱，但也要注

第7 页

浙江经贸职业技术学院毕业论文(设计)

意整体格局。采用明亮清晰色彩、板块布局工整。主题风格偏向清爽整洁，网页主要以黑色为背景，灰色为辅。文字颜色以白色为主。采用12像素的正文宋体。

（2）版面合理，页面链接无误。

为避免布局过于混乱，各个div之间的位置间距要控制得当，代码的正确应用，HTML与css的简洁书写，使之有更丰富的动画效果，此外也要保证页面间的链接完整。

3.2.2美食网站效果图的设计与制作

美食网站效果图由网上模板下载所得，在photoshop软件中打开，首页模板效果如图3.3所示。

图3.3首页效果图

banner部分不做修整，导航部分主要是后面在dreamweaver中修改文字，只把内容信息的右边部分全部改为图片模式，如图3.4所示。

第 页

浙江经贸职业技术学院毕业论文(设计)

图3.4首页效果图

子页整体布局继承首页布局，只在内容信息部分异于首页。子页模版效果图如图3.5所示。

图3.5子页效果图

子页布局不做修改。3.2.3界面元素的制作过程

界面元素的制作包括网站中用到的所有图片，如导航图、logo图等。把所有图片依次使用photoshop进行修整、取材。背景需要透明的图片保存为*.png格

第9 页

浙江经贸职业技术学院毕业论文(设计)

式，其他图片匀保存为*.jpg。

由于本网站导航栏除了几个数字图片外没再放其他图片，所以只需在dreamweaver中布局后加入文字即可。3.2.4首页界面的制作过程

首先建立站点，站点下新建images、css、js、data四个文件夹，文字搜集的素材归于meishi.txt中，图片素材的搜集与自己设计处理过的图片都统一放在images文件夹内。另外控制样式的style和slimbox两个文件放入css文件夹内，init、jquery.localscroll-min、jquery.min、jquery.scrollTo-min和slimbox2五个js文件放入js文件夹内，数据库文件放入data文件夹中。

创建首页，初建header、main_wrapper、footer上中下三大版块，其中在header中再插入site_title，输入网站标题，如图3.6所示。

图3.6 site_title效果图

中间区块分为左右两个版块，依次命名为home_box left、home_box right。左边为导航区块，右边为网站展示图区块。导航区块利用div+css平均布局为四块，每块中都使用a链接加入相应图片，输入导航文字，导航文字大小设置为h2，颜色为白色并给导航文字设置链接，去下划线，点击导航文字进入相应界面；右边部分利用div+css平均分为六个区块，每个区块都使用a链接加入展示图，点击任何一张展示图都可进行放大显示。首页界面中内容信息部分的效果如图3.7所示。

页 第

浙江经贸职业技术学院毕业论文(设计)

图3.7首页内容效果图

导航区块中的效果为鼠标移到导航上时，当前鼠标所在的导航项目栏的背景色加深，移开后又恢复。导航区块的代码如下：