网页中首页设计与思考 第1篇
1.色彩的鲜明性。网页的色彩要鲜艳，容易引人注目。
2.色彩的独特性。要有与众不同的色彩，使得大家对你的印象强烈。(参考设计思考第二篇网站CI的标准色彩一节)
3.色彩的合适性。就是说色彩和你表达的内容气氛相适合。如用粉色体现女性站点的柔性。
4.色彩的联想性。不同色彩会产生不同的联想，蓝色想到天空，黑色想到黑夜，红色想到喜事等，选择色彩要和你网页的内涵相关联。
网页中首页设计与思考 第2篇
关于内容：目前我所调研的网页中发现，每个网页都含有热门推荐的功能：购物类网站大多是一些关于秒杀或销售较好的产品信息链接；社交类网站大多是一些关于当前热门、实时或者具有讨论意义的文章；旅游类网站大多是一些关于购买优惠头条、旅游套餐的推荐。
关于布局：在我本人看来，这一部分可以采用左右分块布局。如果是制作新闻和社交类网页，这部分应该去使用大面积的去堆积；如果是制作旅游类网页，这部分不建议使用太大面积，就个人调研大部分网页来看，旅游类网站若使用大面积的热门推荐（特别是关于金钱有关的推荐，以穷游网为例），会让使用者从该网页去获得旅游相关信息的兴趣大大减少。该部分一般为三个浮动小盒子构成较美观，且每个小盒子的内容能够独立且抓住眼球。
总结：根据制作网页本身的性质对其进行相应的调整，才能够得到很好的效果。
以下是上述谈论到的图片
图3-1购物类 京东
图3-2社交类 新浪
图3-3旅游类 途牛
图3-4旅游类 马蜂窝
图3-5社交类 CSDN
图3-6旅游类 穷游网http://www./
网页中首页设计与思考 第3篇
在查看html文件原代码时，我们经常可以在文件头和之间看到这么一句代码： 这段代码的作用是什么呢？是否可以删除呢？ 其实这是meta标签的设定语句，是给浏览器看的。它的作用就是告诉浏览器：这个HTML文件是采用gb2312字符集制作的。当浏览器读到这一代码，便以gb2312字符集来解释和翻译网页原代码，然后我们就可以看到正确的网页。所以这个meta语句是非常重要的，尽量不要删除。
gb2312就是我们最熟悉的GB简体码，英文是iso-8859-1字符集。其它还有BIG5,UTF-8,Shift-JIS,EUC,KOI8-2等字符集，分别用于不同的字体显示。
网页中首页设计与思考 第4篇
比如Webdesigner(网页设计师)，我们将其中的E字母大写一下: wEbdEsigEr，感觉怎么样，这其实就是一种创意！
创意并不是天才者的灵感，而是思考的结果。根据美国广告学教授詹姆斯的研究，创意思考的过程分五阶段
1.准备期--研究所搜集的资料，根据旧经验，启发新创意； 2.孵化期--将资料咀嚼消化，使意识自由发展，任意结合； 3.启示期--意识发展并结合，产生创意； 4.验证期--将产生的创意讨论修正； 5.形成期--设计制作网页，将创意具体化。
网页中首页设计与思考 第5篇
网站的链接结构是指页面之间相互链接的拓扑结构。它建立在目录结构基础之上，但可以跨越目录。形象的说：每个页面都是一个固定点，链接则是在两个固定点之间的连线。一个点可以和一个点连接，也可以和多个点连接。更重要的是，这些点并不是分布在一个平面上，而是存在于一个立体的空间中。
●我们研究网站的链接结构的目的在于：用最少的链接，使得浏览最有效率。
一般的，建立网站的链接结构有两种基本方式：
1.树状链接结构（一对一）。类似DOS的目录结构，首页链接指向一级页面，一级页面链接指向二级页面。立体结构看起来就象蒲公英。这样的链接结构浏览时，一级级进入，一级级退出。优点是条理清晰，访问者明确知道自己在什么位置，不会_迷_路。缺点是浏览效率低，一个栏目下的子页面到另一个栏目下的子页面，必须绕经首页。
2.星状链接结构（一对多）。类似网络服务器的链接，每个页面相互之间都建立有链接。立体结构象东方明珠电视塔上的钢球。这种链接结构的优点是浏览方便，随时可以到达自己喜欢的页面。缺点是链接太多，容易使浏览者迷路，搞不清自己在什么位置，看了多少内容。
这两种基本结构都只是理想方式，在实际的网站设计中，总是将这两种结构混合起来使用。我们希望浏览者既可以方便快速的达到自己需要的页面，又可以清晰的知道自己的位置。所以，最好的办法是：
●首页和一级页面之间用星状链接结构，一级和二级页面之间用树状链接结构。
举个例子。一个新闻站点的页面结构如下：
---------------------------------------------------一级页面 二级页面 财经新闻页 -- [财经新闻1，财经新闻2...]/ |首页 -- 娱乐新闻页 -- [娱乐新闻1，娱乐新闻2...]/ |IT新闻页 -- [IT新闻1，IT新闻2...]----------------------------------------------------
注意：以上我们都是用的三级页面举例。如果您的站点内容庞大，分类明细，需要超过三级页面，那么建议你在页面里显示导航条，可以帮助浏览者明确自己所处的位置。就是您经常看到许多网站页面顶部的，类似这样：“您现在的位置是：首页->财经新闻->股市信息->深圳股->深发展”
关于链接结构的设计，在实际的网页制作中是非常重要一环。采用什么样的链接结构直接影响到版面的布局。例如你的主菜单放在什么位置，是否每页都需要放置，是否需要用分帧框架，是否需要加入返回首页的链接。在连接结构确定后，再开始考虑链接的效果和形式，是采用下拉表单，还是用DHTML动态菜单等等。
随着电子商务的推广，网站竞争的越来越激烈，对链接结构设计的要求已经不仅仅局限于可以方便快速的浏览，更加注重个性化和相关性。例如，一个爱婴主题网站里，在8个月婴儿的营养问题页面上，你需要加入8个月婴儿的健康问题链接，智力培养链接，或者是有关奶粉宣传的链接，一本图书，一个玩具的链接。因为父母不可能到每个栏目下去寻找关于8个月婴儿的信息，他们可能在找到需要的问题后就离开网站了。如何尽可能留住访问者，是网站设计者未来必须考虑的问题。
讲到这里，阿捷忽然觉得自己很厉害，居然会总结出这么大一套理论:)什么，皮厚?可能吧，这么多高手都没发言呢！有意见请来信ajie@
下次我们继续讨论“确定网站的整体风格创意设计”。
网页中首页设计与思考 第6篇
“外部摸板调用”就是说你将css的设定作成一个单独的文件，在每个页面里都调用它。一旦你需要修改字体大小，只要修改一个.css文件，几百个页面就同时修改了。(这种方法类似子程序调用编写过程序的网友很容易理解:)
调用的具体方法如下：
(1)将上面的css代码copy成一个文件，然后修改后缀名为 (2)在html文件的之间插入 ，语句调用(注意有关路径的设置正确)OK!
网页中首页设计与思考 第7篇
文章写到这里，有心急的网友要问了：“到底用什么色彩搭配好看呢？你能不能推荐几种配色方案？”别急，这里有一点技巧，可以帮助你迅速成为调色大师:)
1.用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度，(说得通俗些就是将色彩变淡或则加深)，产生新的色彩，用于网页。这样的页面看起来色彩统一，有层次感。
2.用两种色彩。先选定一种色彩，然后选择它的对比色(在photoshop里按ctrl+shift+I)。我的主页用蓝色和黄色就是这样确定的。整个页面色彩丰富但不花稍。
3.用一个色系。简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。确定色彩的方法各人不同，我是在photoshop里按前景色方框，在跳出的拾色器窗中选择_自定义_，然后在_色库_中选就可以了:)
4.用黑色和一种彩色。比如大红的字体配黑色的边框感觉很_跳_。
网页中首页设计与思考 第8篇
前面分析了造成这个问题的原因，从处理的角度，也就有了更多的处理方式。对于这次的漏洞，以下文章我将针对如何去制作一个网站的首页进行研究与分析，该调研主要为新闻社交类和旅游类。
从调研的情况来说，对于网页总体的布局，除导航、轮播图和尾部三部分外，所有的内容都采用了左右分块布局（大多数为左窄有宽的布局，个人意见此种布局更好看）。在我看来，对这种布局的实现可以采用大盒子里面嵌套两个左右盒子，再分别进行添加各自的小盒子进行内容的填充。左边的盒子可以根据实际网页的作用添加一些兴趣文章或主题相关的超链接等，右边的盒子才是真正内容的东西。这种布局好处不仅可以使用户注意力集中在一个区域内，也不会觉得网页内容过于单一。
网页中首页设计与思考 第9篇
关于内容：新闻类网页大多数此处框架是对一些信息的分类。购物类网页大多数此处框架是对一些商品的分类。而一些旅游类的大多会用到轮播图进行一些景点的展示，然后在轮播图上添加复选框的搜索。
关于布局：针对旅游类网页，我对排名前十的旅游网站进行了研究，大多数都是将购票放在首页，更多繁琐的超链接让我眼花缭乱，减少了阅读网页的兴趣。在其中，我最欣赏的是马蜂窝的布局，这部分由轮播图、就具有选择功能的搜索浮框、图片来源文字三个主要模块构成，在整个页面占据四分之三的内容。此布局具有简单大方扁平化，而这些特点正是当前pc端用户所喜欢的，大多说的客户端和网页都已经向扁平化进军。
总结：这部分的内容主要是去引导阅读者的使用该网页，可以利用这个区域去突出网页的主题。另外再调研中大多数网页的搜索框部分都含有热门推荐，指引读者去了解可能会感兴趣的词语。但对于本人个人审美和使用感受来说，更喜欢简洁和自己去选择。
以下是上述谈论到的图片
图2-1社交类 新浪
图2-2社交类 CSDN
图2-3购物类 京东
以下是排名靠前的旅游类网站
图2-4旅游类 途牛
图2-5旅游类 马蜂窝
图2-6旅游类 驴妈妈 https://www./
图2-7旅游类 穷游网http://www./
网页中首页设计与思考 第10篇
关于内容：我调研中的所有网页中都是一个一个盒子构成，每个盒子类型各不同，展示了网页的个性化和丰富化。每个盒子又以链接的形式进行填充，里面会含有更多内容的链接。对于新闻社交类网站，传递的更多应该是信息与文字，所以整体都以文字链接堆积进行填充，让使用者能够得到更多更丰富的信息；对于旅游类网站，传递的更多是景点信息与特色，所以在整体可以使用标题突出、图片展示、简短的文字描述的一个小盒子。
关于布局：首先从整体布局来讲，依旧采用左右分块布局。左侧制作一些标准流的小盒子进行堆积，每一个小盒子的内容和性质各不相同且最好实时；右侧制作一些浮动流的小盒子，一行中三个小盒子比较适当，每一个小盒子是具有不同的方向但性质相同。其次这一部分也将是整个网站首页的主要布局，最好在整个页面的二分之一以上。
总结：根据制作网页本身的性质对其盒子进行调整，获得到独特的效果。
以下是上述谈论到的图片
图4-1社交类 新浪
图4-2购物类 京东
图4-3旅游类 马蜂窝
网页中首页设计与思考 第11篇
阿捷经常收到的来信问题就是：我制作的主页如何能在不同分辨率下保持不变形，如何能在IE和NC下看起来都不至于太丑陋，如何设置字体和链接颜色....等等,阿捷将在下面几篇文章里为大家详细介绍。
首页设计是整个网站设计的难点和关键，阿捷希望能够通过和大家的交流，总结出一套较为合理易学的设计方法，从而举一反三，使我们能够更加轻松的完成整个站点的设计制作。如果你愿意将你的心得体会和大家分享，请来信ajie@,谢谢！
设计首页的第一步是设计版面布局。
版面指的是浏览器看到的完整的一个页面（可以包含框架和层）。因为每个人的显示器分辨率不同，所以同一个页面的大小可能出现640*480像素,800*600像素,1024*768像素等不同尺寸。
布局，就是以最适合浏览的方式将图片和文字排放在页面的不同位置。你可能注意到：“最适合”是一个不确定的形容词，什么才是最适合的呢？抱歉的是阿捷不能也不可能给您一个完整的正确的答案。就好比有人希望知道成功的秘诀是什么，成功者只能建议您用什么方法，什么途径才能最容易获得成功，而不可能有一步成功的_秘诀_告诉您。
我们在设计思考系列文章第四篇讲过站点整体的创意，版面布局也是一个创意的问题，但要比站点整体的创意容易，有规律的多。让我们先来了解一下版面布局的步骤：
网页中首页设计与思考 第12篇
将粗略布局精细化，具体化。（靠你的智慧和经验，旁敲侧击多方联想，才能作出具有创意的布局。）
在布局过程中，我们可以遵循的原则有：
以上的设计原则，虽然枯燥，但是我们如果能领会并活用到页面布局里，效果就大不一样了。比如：
○网页的白色背景太虚，则可以加些色快； ○版面零散，可以用线条和符号串联； ○左面文字过多，右面则可以插一张图片保持平衡； ○表格太规矩，可以改用导角试试。
经过不断的尝试和推敲，你的网页一定会亮丽起来的哦:)
看看我们经常用到的版面布局形式：
1._T_结构布局。所谓_T_结构。就是指页面顶部为横条网站标志+广告条，下方左面为主菜单，右面显示内容的布局，因为菜单条背景教深，整体效果类似英文字母_T_,所以我们称之为_T_形布局。这是网页设计中用的最广返的一种布局方式。(图略)
这种布局的优点是页面结构清晰，主次分明。是初学者最容易上手的布局方法。缺点是规矩呆板，如果细节色彩上不注意，很容易让人_看之无味_。
2._口_型布局。这是一个象形的说法，就是页面一般上下各有一个广告条，左面是主菜单，右面放友情连接等，中间是主要内容。(图略)
这种布局的优点是充分利用版面，信息量大(我的主页首页即属于这种布局)。缺点是页面拥挤，不够灵活。也有将四边空出，只用中间的窗口型设计，例如网易壁纸站。
3._三_型布局。这种布局多用于国外站点，国内用的不多。特点是页面上横向两条色块，将页面整体分割为四部分，色块中大多放广告条。
4.对称对比布局。顾名思义，采取左右或者上下对称的布局，一半深色，一半浅色，一般用于设计型站点。优点是视觉冲击力强，缺点是将两部分有机的结合比较困难。
布局。POP引自广告术语，就是指页面布局象一张宣传海报，以一张精美图片作为页面的设计中心。常用于时尚类站点，比如。优点显而易见：漂亮吸引人。缺点就是速度慢。作为版面布局还是值得借鉴的。
以上总结了目_络上常见的布局，其实还有许许多多别具一格的布局，关键在于你的创意和设计了。对于版面布局的技巧，这里提供四个建议，您可以自己推敲：
1.加强视觉效果 2.加强文案的可视度和可读性 3.统一感的视觉 4.新鲜和个性是布局的最高境界
网页的色彩是树立网站形象的关键之一，色彩搭配却是网友们感到头疼的问题。网页的背景，文字，图标，边框，超链接...，应该采用什么样的色彩，应该搭配什么色彩才能最好的表达出预想的内涵呢？阿捷这里谈一些心得，希望对你有所启发。
首先我们先来了解一些色彩的基本知识：
1.颜色是因为光的折射而产生的。
2.红，黄，蓝是三原色，其它的色彩都可以用这三种色彩调和而成。 网页html语言中的色彩表达即是用这三种颜色的数值表示 例如：红色是color(255,0,0)十六进制的表示方法为(FF0000) 白色为(FFFFFF), 我们经常看到的_bgColor=#FFFFFF_就是指背景色为白色。
3.颜色分非彩色和彩色两类。 非彩色是指黑，白，灰系统色。 彩色是指除了非彩色以外的所有色彩。
4.任何色彩都有饱和度和透明度的属性，属性的变化产生不同的色相，所以至少可以制作几百万种色彩。
网页制作用彩色还是非彩色好呢？根据专业的研究机构研究表明：彩色的记忆效果是黑白的倍。也就是说，在一般情况下，彩色页面较完全黑白页面更加吸引人。我们通常的做法是：主要内容文字用非彩色(黑色)，边框，背景，图片用彩色。这样页面整体不单调，看主要内容也不会眼花。
●非彩色的搭配
黑白是最基本和最简单的搭配，白字黑底，黑底白字都非常清晰明了。灰色是万能色，可以和任何彩色搭配，也可以帮助两种对立的色彩和谐过渡。如果你实在找不出合适的色彩，那么用灰色试试，效果绝对不会太差。
网页中首页设计与思考 第13篇
网站的目录是指你建立网站时创建的目录。例如：在用frontpage98建立网站时都默认建立了根目录和images子目录。目录的结构是一个容易忽略的问题，大多数站长都是未经规划，随意创建子目录。目录结构的好坏，对浏览者来说并没有什么太大的感觉，但是对于站点本身的上传维护，内容未来的扩充和移植有着重要的影响。下面是建立目录结构的一些建议：
●不要将所有文件都存放在根目录下。
有网友为了方便，将所有文件都放在根目录下。这样做造成的不利影响在于：
2.上传速度慢。服务器一般都会为根目录建立一个文件索引。当您将所有文件都放在根目录下，那么即使你只上传更新一个文件，服务器也需要将所有文件再检索一遍，建立新的索引文件。很明显，文件量越大，等待的时间也将越长。所以，给您的建议是：尽可能减少根目录的文件存放数。
●按栏目内容建立子目录。
子目录的建立，首先按主菜单栏目建立。例如:网页教程类站点可以根据技术类别分别建立相应的目录，象Flash,Dhtml,Javascript等；企业站点可以按公司简介，产品介绍，价格，在线定单，反馈联系等建立相应目录。
所有程序一般都存放在特定目录。例如：CGI程序放在cgi-bin目录。便于维护管理。所有需要下载的内容也最好放在一个目录下。
●在每个主目录下都建立独立的images目录。
默认的，一个站点根目录下都有一个images目录。刚开始学习主页制作时，阿捷习惯将所有图片都存放在这个目录里。可是后来发现很不方便，当我需要将某个主栏目打包供网友下载，或者将某个栏目删除时，图片的管理相当麻烦。经过实践发现：为每个主栏目建立一个独立的images目录是最方便管理的。而根目录下的images目录只是用来放首页和一些次要栏目的图片。
●目录的层次不要太深。
目录的层次建议不要超过3层。原因很简单，维护管理方便。
其它需要注意的还有：
1.不要使用中文目录；网络无国界，使用中文目录可能对网址的正确显示造成困难。
2.不要使用过长的目录；尽管服务器支持长文件名，但是太长的目录名不便于记忆。
3.尽量使用意义明确的目录；上面的例子中，你可以用Flash,Dhtml,Javascript来建立目录，也可以用1，2，3建立目录，但是哪一个更明确，更便于记忆和管理呢？显然是前者！
随着网页技术的不断发展，利用数据库或者其他后台程序自动生成网页越来越普遍，网站的目录结构也必将飞跃到一个新的结构层次。
网页中首页设计与思考 第14篇
经过第二步印象的的_量化_后，你需要进一步找出其中最有特色特点的东西，就是最能体现网站风格的东西。并以它作为网站的特色加以重点强化，宣传。例如：再次审查网站名称，域名，栏目名称是否符合这种个性，是否易记。审查网站标准色彩是否容易联想到这种特色，是否能体现网站的性格等等。具体的做法，没有定式。我这里提供一些参考：
1.将你的标志logo,尽可能的出现在每个页面上。或者页眉，或者页脚，或则背景。
2.突出你的标准色彩。文字的链接色彩，图片的主色彩，背景色，边框等色彩尽量使用与标准色彩一致的色彩。
3.突出你的标准字体。在关键的标题，菜单，图片里使用统一的标准字体。
4.想一条朗朗上口宣传标语。把它做在你的banner里，或者放在醒目的位置，告诉大家你的网站的特色是...
5.使用统一的语气和人称。即使是多个人合作维护，也要让读者觉得是同一个人写的。
6.使用统一的图片处理效果。比如，阴影效果的方向，厚度，模糊度都必须一样。
7.创造一个你的站点特有的符号或图标。比如在一句链接前的一个点，可以使用,.。☆※○◇□△→（区位码里自己参看）等等。虽然很简单的一个变化，却给人与众不同的感觉，(为什么我没有想到呢？)
8.用自己设计的花边，线条，点
9.展示你网站的荣誉和成功作品。
10.告诉网友关于你的真实的故事和想法。
风格的形成不是一次定位的，你可以在实践中不断强化，调整，修饰，直到有一天，网友们写信告诉你：_我喜欢你的站点，因为它很有风格！_
● 创意(idea)是网站生存的关键。这一点相信大家都已经认同。然而作为网页设计师，最苦恼的就是没有好的创意来源。
注意，这里说的创意是指站点的整体创意，(因为这个创意而产生这个站点，或者相同的内容，推出的创意不同),网页的平面设计创意我将在后面的版面布局窍门里介绍。
创意到底是什么，如何产生创意呢？
创意是引人入胜，精彩万分，出奇不意的； 创意是捕捉出来的点子，是创作出来的奇招.... 这些讲法都说出了创意的一些特点，实质上，
网页中首页设计与思考 第15篇
这个“整体形象”包括站点的CI（标志，色彩，字体，标语），版面布局，浏览方式，交互性，文字，语气，内容价值，存在意义，站点荣誉等等诸多因素。举个例子：我们觉得网易是平易近人的，迪斯尼是生动活泼的，IBM是专业严肃的。这些都是网站给人们留下的不同感受。
风格是独特的，是站点不同与其他网站的地方。或者色彩，或者技术，或者是交互方式，能让浏览者明确分辨出这是你的网站独有的。例如新世纪网络()的黑白色,网易壁纸站的特有框架,即使你只看到其中一页，也可以分辨出是哪个网站的。
风格是有人性的。通过网站的外表，内容，文字，交流可以概括出一个站点的个性，情绪。是温文儒雅，是执著热情，是活泼易变,是放任不羁。象诗词中的“豪放派”和“婉约派”，你可以用人的性格来比喻站点。
有风格的网站与普通网站的区别在于：普通网站你看到的只是堆砌在一起的信息，你只能用理性的感受来描述，比如信息量大小，浏览速度快慢。但你浏览过有风格的网站后你能有更深一层的感性认识，比如站点有品位，和蔼可亲，是老师，是朋友。
看了以上描述，你可能对风格是什么可能依然模糊。其实风格就是一句话：与众不同！
网页中首页设计与思考 第16篇
关于内容：无论是社交类、购物类还是旅游类，大多数的导航栏都有和网页自己的特色标志或者特色功能（具有标志性代表的）。从导航界面一看，就能够初步了解和认识该网页是什么内容，例如新浪网导航内出现了“微博”“博客”类标签，那么这个网站会更加偏向将事实类的信息发送给使用者。例如csdn的顶部导航里含有多个实用且快捷的标签。
关于布局：大多都是采用浅色为底色、与内容更小的字体组成，不会分散使用者对整个网页主题的注意力，但对于长期使用者来说，更加的方便快捷。
总结：导航应该使用一些图标、特色功能（经典）和一些基本的登陆注册的链接，布局简单最好，也可对网页所倾向的链接进行突出引导（不能太多）。
网页中首页设计与思考 第17篇
表格的基本用法相信您已经非常熟悉了。但为了保证文章的完整性，阿捷在这里还是再罗列一遍。
●表格的HTML基本语法
例如：
●table标签的参数。table标签可以含下列参数。
border 表格边框cellspacing 表元之间的空白距离cellpadding 表元内部的空白距离width 表格宽度（可以用%或者具体数据表示）height 表格高度
例如：
●表格的对齐方式
１.表格内的文字对齐。
语法： 其中#可以设定的参数有：
left 横向居左center 横向居中right 横向居右top 纵向居顶middle纵向居中bottom 纵向居底
例如：
2.表格在页面内的对齐。
如果你需要与表格并排放一段文字，就需要用到table标签的另一个个参数：
例如：
这里的文字是和表格并排排放的
●表格的嵌套
表格嵌套就是在表格里插入表格，嵌套的排版方法就是将要插入的表格当做文字来处理同样使用语句。
例如：
●表格的色彩
表格的色彩也在
bgcolor 背景颜色bordercolor 边框颜色bordercolorlight 立体边框亮色bordercolordark 立体边框暗色
语法为：
例如：