怎么样设计网页

分析如下：

1、首先下载安装Dreamweaver，打开后，新建一个网页，一般选择“HTML”建立网页。选择“经典”界面，有助于我们更便捷使用这个软件。

2、下面选择这三个界面，代码、拆分、设计，一般默认设计界面，对于新手这个功能具有可视化，能更好的制作网页。

3、下面我们来制作网站站点，在电脑上建一个文件作为根目录。我们所建网站的所有文件和网页都保存在这个文件中。站点的作用就是使你的网站网页之间框架清晰。同时给站点起个名字。

4、然后再在站点根目录下建立一个专门储存网站图片的文件，并设置默认。这样你添加到这个网站的所有图片都自动保存到这个文件，不会丢失。注意文件命名要用英文。下面我用我建立的（篮球资讯网）来介绍，点击右下方篮球资讯网——下拉点击管理站点——点击高级设置——设置默认图像文件夹为刚建立的images。保存。

5、下面我们来制作这个网站首页，先学习添加图片。插入——图像——选择素材添加。点击图片，下面属性可以编辑修改图片大小，添加超链接等等。下面我修改图片大小做示范。

6、下面学习添加文本。编辑“篮球资讯网”，下面属性可以设置文本字体、添加超链接等等，点击页面属性，可以详细编辑文本属性。

7、网页基本就是文字和图片的组合，添加视频还需要学习者好好搜索Dreamweaver 的使用视频加以学习。最后制作完一个网页要记得保存。左上角文件——保存。

8、最后我们学习添加超链接。我用建立的第二个网页来做示范。选中篮球资讯网文本，点击页面下方属性——链接——点文件小按钮——选中第一个网页，这样篮球资讯网文本变成蓝色。这是网站内部链接，相反就有外部链接。添加如图，一定要写http://......就可以了。

9、最后我们浏览网页。左上角文件——在浏览器中浏览网页，点击网页中两个链接都能到达指定网页。

扩展资料：

网页设计

设计网站要注意两个要点：整体风格和色彩搭配。

风格

网站的整体风格及其创意设计是最难以学习的。难就难在没有一个固定的模式可以参照和模仿。给你一个主题，任何两人都不可能设计出完全一样的网站。

风格（Style）是抽象的。是指站点的整体形象给浏览者的综合感受。这个“整体形象”包括站点的CI（标志、色彩、字体、标语）、版面布局、浏览方式、交互性、文字、语气、内容价值、存在意义、站点荣誉等等诸多因素。

色彩搭配

无论是平面设计，还是网页设计，色彩永远是最重要的一环。当我们距离显示屏较远的时候，我们看到的不是优美的版式或者是美丽的图片，而是网页的色彩。

网页配色小技巧：

1．用一种色彩：这里是指先选定一种色彩，然后调整透明度或者饱和度，这样的页面看起来色彩统一，有层次感；

2．用两种色彩：先选定一种色彩，然后选择它的对比色；

3．用一个色系：简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土

网页设计制作技巧

网站的主要结构页面，又称次首页、内页，大型网站往往框架页即首页，如一些门户网站。框架页主要是网站内部主要栏目的首页，讲究风格的一致性，并于主页呼应。下面是我整理的网页设计制作技巧，希望对你有帮助!

一、页面平铺

把页面平铺开，主要的物件有：导航栏、LOGO、Banner、按钮、图片、文字。

1.导航栏

导航栏如果设计得恰到好处，是会给网页本身增色很多。导航栏有一排、两排、多排、图片导航和Frame框架快捷导航等等各种情况的设计。有时候是横排，有时候则是竖排。另外还有一些动态的导航栏，如很精彩的Flash导航。

2.LOGO

LOGO并不是每个网站多要有的，他是网站为了给大家一个比较直观的信息的表达工具。LOGO的位置通常在页面的左上角。这个地方最明显和直观，可以第一时间给人于默化的效果网站的LOGO，一般以静态的居多，也有动态的，但是LOGO的特点都是在表达网站的信息，是一个网站的直接的表现窗口。

3.BANNER(广告条)类型

Banner设计注意点：Banner有动态和静态两种。在浏览网页的.过程中，虽然闪烁的图案会产生瞬间记忆刺激，引起注意，但这种记忆往往为压迫性的，久之易产生负面效应，从而模糊记忆。而稳定的画面不易引发特殊的关注，但如果有良好的界面引导和内容，可产生良性的记忆，持久而牢固。设计要点：Banner的文字不能太多，用一两句话来表达即可广告语要朗朗上口，可以第一时间的让人捕获表达的重点图形无须太繁杂，文字尽量使用黑体等粗壮的字体，否则在视觉上很容易被网页其他内容淹没图形尽量选择颜色数少，能够说明问题的事物如果选择颜色很复杂的物体，要考虑一下在低颜色数情况下，是否会有明显的色斑尽量不要使用彩虹色、晕边等复杂的特技图形效果，这样做会大大增加图形所占据的颜色数，增大体积。

4.按钮

按钮设计要点：设计按钮要同页面的整体协调，不能太抢眼有的页面很单调，还要依靠花哨的按钮来提一下选用的字体，选用的插图，或插图及字体搭配，都要考虑字迹清楚，色彩简单一些，不要超过四种很长的按钮可能就是框架的分界，尽量要纤细一些，否则页面会显臃肿。

5.图片

为了美化页面，图片是任何一个页面都要用到的，图片的运用要合理。图片运用要点：图形的主体最好清晰可见图形的含义最好简单明了图片内所含文字应该清晰容易辨认背景与主体明度对比比例应为3∶1到5∶1之间为宜淡色系列的背景有助于整体和谐淡色材质背景最佳，能与主题分离之浅色标志或文字背景亦可。

6.文字

文字也是设计的。设计要点：每一行文字的长度最好20到30个中文字(40到60个英文字母)行距与字距已由软件内定。设计时注意段落与段落间空行及首行缩排方式以辅助阅读标题以H1到H3字号为佳，内文Font size=3到4级为佳同版面字型最好在三种以内文字的颜色最好也是三种以内文字在颜色上要与背景区别内文的排列向左对齐并与左边界保持适当距离。可以用表格填入文字以达此效果表格或清单内的字运用相同字型与字体大小，以利辨别。

二、整体规划

有共性，才有统一，有细节区别，就有层次防止设计与实现过程中的偏差设计的各部分，要配合整体风格不仅页面上各项设计要统一，而且网站的各级别页面也要统一信息不要太过集中，以免文字编排太紧密不要有太多分散注意力的点。动态闪烁要适中页面留白部分，要根据平面设计原理来设计，注意分栏式结构不宜留白还要考虑到浏览器上部占用的屏幕空间，防止图片截断等造成视觉效果不好首页设计图片+导航，这是一种比较强的网站表达，可以根据时间的变化更改图片。

三、功能易用性

导航栏应最先调入，以便访客快速前往所需信息空间页面长度要短，使得用户在信息空间内可迅速移动导航设计方向要一致。支持导航的层次按钮应当从上到下或从左到右，但不要两者都用，不要混用方向。

制作网页最简单的方法如下：

1、注册工具平台账号

企业网页制作离不开相关工具的帮助。然而，使用自助建站系统可以避免网站制作工具的下载，并直接在线生产企业网站。因此，在第一阶段，企业可以在网络上找到相关的自助建站系统，并注册平台账号。

需要注意的是，一些自助建站系统默认会发送域名和网站空间。因此，在企业注册平台后，可以省略购买和绑定域名和网站空间的操作。

2、建立企业网站

平台将根据企业自身形象的需要，提供与企业相对应的网站模板供企业选择，通过自助建站系统账号登录到网页制作平台界面，根据建站平台的提示，选择企业网站的行业和类型，确定行业和类型。

3、企业设计和功能建设

在复制企业网站模板的基础上，对企业网站的设计进行调整和布局，将企业准备的网站横幅图片、标志图片、背景图片等数据上传并替换为网站模板的相应模块，并在自助建站系统的视觉操作界面中对网站的各个模块进行调整和布局；然后，根据企业网站所需的功能，通过模块添加选项，为企业网站添加相应的功能。

4、设置和测试企业网站

当企业网站的建设和设计完成后，通过网站设置操作，设置企业网站的标题名称，模拟用户浏览企业网站；如果所有测试都没有问题，您可以保存设置，自助建站系统提供的网站域名访问企业网站。

网页设计通常有哪些基本步骤呢？要想设计出漂亮的页面。需要熟悉哪些设计方法呢？以下仅供参考！

第一步. 收集与归纳素材

确定项目设计方案、确定项目创意要点、确定项目表现形式、确定项目文案以及确定项目相关素材。

第二步. 处理酝酿,构思画出项目原型图

让思想自由驰骋，发挥思维的灵活性；对前期收集的信息进行综合处理；运用各种方法勾画出若干可实施方案。

第三步：讨论并 总结可实施方案

对一众方案进行筛选并挑选出最具备可行性特质的方案。

第四步. 项目设计实施与后期校验

在整个项目进行过程中，都要对项目的各个关键点进行全面的思考，并要与项目相关的各个角色保持高效的沟通，善于抓住问题核心并能给出相应的解决方案，很多时候设计师的沟通水平决定了项目的进展、推进速度与最后输出成果的质量。

网页设计创意方法之一——借鉴创意法

特点：较适用于短平快．但又要求有细节的项目。

借鉴创意法可以从我们已知的一切入手，一如街边的路牌、途中的风景、斑驳的墙漆、月夜下的街灯，再到同行的案例启发，这些都是我们可以吸取的地方。相信我们都有逛网的习惯，这不仅是积累各方知识及了解时下流行视觉趋势的好方法，无形中也丰富了我们的创意阅历，为借鉴创意种下良好的因子。在工作中，当我们黔驴技穷，为找不出一个好的创意解决方案而挠头时，可以吸取日常工作、生活中的所见所闻，从其中的一个点，或者一个表现出发，借鉴其成功之处，拓宽创意思路，结合项目现状，给出优质的创意设计。

网页设计创意方法之二——情景(情感)映射创意法

特点：较适用于短平快．对情感有一定诉求的项目。

说明：情景创意法的'进行要求对一个想法进行纵向深入发掘，思维忌横向发散。

生活中，我们都是独一无二的，不同的成长的历程赋予了我们不同的阅历、不同的性格、不同的想法与世界观。我们每个人都有自己独一无二的想像力、理解力和判断力。于是乎，当我们面对同一件事物时，会做出不同的情感反映。同样的，在我们的日常创作过程中，也就有了不同视觉风格，不同创意想法的出现。

情景映射创意法是把我们所要表达的概念化的、抽像化的东西（如文案、主题等）丰富化、立体化。把这些所要表达的概念逐步的从低级抽象向高级抽象演变，直至获得满意的创意表达为止。

比如说春天，在想到春天的时候。在脑海里我们都会出现不同的元素，丰富而有诗意，绿色、和风、细雨、春泥、青草，还有风筝、燕子、踏青诸如此类。由此，我们可以充份发挥我们的主观能动性，融合主题创造出富有感染力的创意画面。

网页设计创意方法之三——思维导图创意

特点：要求有较好的视觉表现力，有思想深度、延展度的项目，如海报、平面、广告、富媒体等。

思维导图是一种放射性的创意模式，被认为是最自然的一种创意工具(自认为是这样)，很多时候，当项目对创意表达有较高的要求时，它是一个既简单有效又具有美感的创意工具。思维导图法以需要解决的问题为起点，把我们所认识的、与问题有关的元素进行联想细分，向外延展，再延展，充分发挥联想的创造力。然后思维再跳出来，把这些之前创造性的想法都结合起来，进而激发出我们创意的火花。

网页设计创意方法之四——头脑风暴与逆向思维

说明：较适用对整体创意有较高要求的项目，如大中型项目的创意起始阶段。

局限性：头脑风暴方法对会议的主持人有一定要求，要求具备相当的专业性与组织能力。

说起头脑风暴，似乎已经没有人不知道了；在创意工作开始的时候，想到的最优先的，也应该是头脑风暴，但在这里还是想提一下。因为始终觉得在众多创意方法中，头脑风暴确实是优秀的且可行性很高的创意方法之一。

头脑风暴的特点是：众志成城。是集众人才智解决创意缺失的良好方法。是众多创意方案的集合。是创意工作中的捷径。

步骤：

1、点击【文件】【新建文件】【常规】【HTML页面】【打开】

2、如图所示，新建了一个空白的html页面，拆分视图

3、设置页面body样式信息

【-webkit-touch-callout: none-webkit-text-size-adjust: none】

是防止用户复制和保存图片,只支持iphone、ipad、android

4、设置页面的宽度和高度

【.page-content{background:-webkit-linear-gradient(#2F5A53,#6CA199)top:352pxmin-height:550px_height:550pxwidth:640px }】

5、【关键点】

新建一个div标签，样式使用page-content

6、在段落标记<p>里面输入文字信息，这里天使就不排版了，主要是教大家方法，然后保存网页。

7、将网页上传到服务器目录下

8、输入网站域名，在电脑上访问可以看见效果，只有左侧部分

9、使用手机访问，得到如图所示效果，就不会像直接书写html代码一样文字很小

手机网站网页设计应该注意什么问题：

1、网页宽度不用像素表示，用百分比表示（如：width=100%）；

2、左间距、上间距设为0；

3、屏蔽图片显示；

4、charset使用UTF-8编码（国际化编码），不使用gb2312编码。

网页设计一定要有美术的功底，要设计的漂亮，让人难忘才算是比较好的网页。

简洁性：能让浏览者一目了然，不使浏览者感到繁琐并且无法找到其所需内容。

突出主题：一个没有主题的网页同样会使人失去浏览的兴趣。

网页设计（webdesign，又称为WebUIdesign，WUIdesign，WUI），是根据企业希望向浏览者传递的信息（包括产品、服务、理念、文化），进行网站功能策划，然后进行的页面设计美化工作。作为企业对外宣传物料的其中一种，精美的网页设计，对于提升企业的互联网品牌形象至关重要。