网站设计教程个人网站制作全过程

怎样制作自己的网页?

如今，互联网越来越走近我们的生活，网上冲浪也渐渐成为我们生活不可缺少的一部分。

网络世界五彩缤纷，涌现出大量优秀精美的网页。

大量网络信息的呈现，无非就是通过文本、图像、Flash动画等，其中,文本是网页中最为重要的设计元素。

对于网页设计初学者而言，了解和掌握网页设计中的文字排版设计就显得尤为重要，下面笔者想谈谈一己之见。

文字的格式化 [被屏蔽广告] 1.字号、字体、行距 字号大小可以用不同的方式来计算，例如磅(Point)或像素(Pixel)。

因为以像素技术为基础单位打印时需要转换为磅，所以，建议采用磅为单位。

最适合于网页正文显示的字体大小为12磅左右，现在很多的综合性站点，由于在一个页面中需要安排的内容较多，通常采用9磅的字号。

较大的字体可用于标题或其他需要强调的地方，小一些的字体可以用于页脚和辅助信息。

需要注意的是，小字号容易产生整体感和精致感，但可读性较差。

网页设计者可以用字体来更充分地体现设计中要表达的情感。

字体选择是一种感性、直观的行为。

但是，无论选择什么字体，都要依据网页的总体设想和浏览者的需要。

例如：粗体字强壮有力，有男性特点，适合机械、建筑业等内容；细体字高雅细致，有女性特点，更适合服装、化妆品、食品等行业的内容。

在同一页面中，字体种类少，版面雅致，有稳定感；字体种类多，则版面活跃，丰富多彩。

关键是如何根据页面内容来掌握这个比例关系。

从加强平台无关性的角度来考虑，正文内容最好采用缺省字体。

因为浏览器是用本地机器上的字库显示页面内容的。

作为网页设计者必须考虑到大多数浏览者的机器里只装有三种字体类型及一些相应的特定字体。

而你指定的字体在浏览者的机器里并不一定能够找到，这给网页设计带来很大的局限。

解决问题的办法是：在确有必要使用特殊字体的地方，可以将文字制成图像，然后插入页面中。

行距的变化也会对文本的可读性产生很大影响。

一般情况下，接近字体尺寸的行距设置比较适合正文。

行距的常规比例为10:12，即用字10点，则行距12点。

这主要是出于以下考虑：适当的行距会形成一条明显的水平空白带，以引导浏览者的目光，而行距过宽会使一行文字失去较好的延续性。

除了对于可读性的影响，行距本身也是具有很强表现力的设计语言，为了加强版式的装饰效果，可以有意识地加宽或缩窄行距，体现独特的审美意趣。

例如，加宽行距可以体现轻松、舒展的情绪，应用于娱乐性、抒情性的内容恰如其分。

另外，通过精心安排，使宽、窄行距并存，可增强版面的空间层次与弹性，表现出独到的匠心。

行距可以用行高(line-height)属性来设置，建议以磅或默认行高的百分数为单位。

例如：｛line-height：20pt｝、｛line-height：150%｝。

文字的整体编排 页面里的正文部分是由许多单个文字经过编排组成的群体，要充分发挥这个群体形状在版面整体布局中的作用。

从艺术的角度可以将字体本身看成是一种艺术形式，它在个性和情感方面对人们有着很大影响。

在网页设计中，字体的处理与颜色、版式、图形等其他设计元素的处理一样非常关键。

从某种意义上来讲，所有的设计元素都可以理解为图形。

1.文字的图形化 字体具有两方面的作用：一是实现字意与语义的功能，二是美学效应。

所谓文字的图形化，即是强调它的美学效应，把记号性的文字作为图形元素来表现，同时又强化了原有的功能。

作为网页设计者，既可以按照常规的方式来设置字体，也可以对字体进行艺术化的设计。

无论怎样，一切都应围绕如何更出色地实现自己的设计目标。

将文字图形化、意象化，以更富创意的形式表达出深层的设计思想，能够克服网页的单调与平淡，从而打动人心。

Dreamweaver（网页制作软件）、Flash（动画制作软件）、Fireworks（图片制作软件）、Photoshop。

网上学习网页制作教程：/ 祝你好远！

网页设计制作详细流程

分析如下： 1、首先下载安装Dreamweaver，打开后，新建一个网页，一般选择“HTML”建立网页。

选择“经典”界面，有助于我们更便捷使用这个软件。

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

3、下面我们来制作网站站点，在电脑上建一个文件作为根目录。

我们所建网站的所有文件和网页都保存在这个文件中。

站点的作用就是使你的网站网页之间框架清晰。

同时给站点起个名字。

4、然后再在站点根目录下建立一个专门储存网站图片的文件，并设置默认。

这样你添加到这个网站的所有图片都自动保存到这个文件，不会丢失。

注意文件命名要用英文。

下面我用我建立的（篮球资讯网）来介绍，点击右下方篮球资讯网——下拉点击管理站点——点击高级设置——设置默认图像文件夹为刚建立的images。

保存。

5、下面我们来制作这个网站首页，先学习添加图片。

插入——图像——选择素材添加。

点击图片，下面属性可以编辑修改图片大小，添加超链接等等。

下面我修改图片大小做示范。

6、下面学习添加文本。

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

7、网页基本就是文字和图片的组合，添加视频还需要学习者好好搜索Dreamweaver 的使用视频加以学习。

最后制作完一个网页要记得保存。

左上角文件——保存。

8、最后我们学习添加超链接。

我用建立的第二个网页来做示范。

选中篮球资讯网文本，点击页面下方属性——链接——点文件小按钮——选中第一个网页，这样篮球资讯网文本变成蓝色。

这是网站内部链接，相反就有外部链接。

添加如图，一定要写http://......就可以了。

9、最后我们浏览网页。

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

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

风格 网站的整体风格及其创意设计是最难以学习的。

难就难在没有一个固定的模式可以参照和模仿。

给你一个主题，任何两人都不可能设计出完全一样的网站。

风格（Style）是抽象的。

是指站点的整体形象给浏览者的综合感受。

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

色彩搭配 无论是平面设计，还是网页设计，色彩永远是最重要的一环。

当我们距离显示屏较远的时候，我们看到的不是优美的版式或者是美丽的图片，而是网页的色彩。

网页配色小技巧： 1．用一种色彩：这里是指先选定一种色彩，然后调整透明度或者饱和度，这样的页面看起来色彩统一，有层次感； 2．用两种色彩：先选定一种色彩，然后选择它的对比色； 3．用一个色系：简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。

在网页配色中，还要切记一些误区： 1．不要将所有颜色都用到，尽量控制在三至五种色彩以内； 2．背景和前文的对比尽量要大（绝对不要用花纹繁复的图案作背景），以便突出主要文字内容。

参考资料：搜狗百科：设计

个人网站制作全过程

首先先好你的网站这个你已经做了，然后就是开始设计你的网站的大概的样子和框架，然后按照你设计的样子把他做成网页文件，上传到你购买的空间里，就可以访问了，至于静态网站后期的维护很麻烦，都是得打开源文件来修改的