怎样制作自己的网页

制作自己的网页首先应该对自己的网页有一个整体的规划，是建一个什么类型的网站，网站主色调使用哪种颜色、设计布局采用什么样的方式等。下面介绍怎样制作自己的网页，希望可以为您带来帮助。

确定网页的主体色调风格。

我们制作自己的网页首先应该对自己的网页有一个整体的规划，是建一个什么类型的网站，网站主色调使用哪种颜色、设计布局采用什么样的方式等，这些都需要有一个很好的规划。

规划网站的整体布局——导航、按钮、图片、文字的排版方式。

做什么事都不能盲目的没有目的的进行，那样只能浪费时间浪费精力，在我们制作网页之前一定要对网页的基本元素进行一些设计。可以简单的画草图，或者浏览几个自己比较喜欢的网站学习借鉴。

准备和归类素材——图片、音频、视屏、文章等。

制作一个网页需要大量的文件，我们必须先将这些不同类型的文件进行归类放置，整理到一个文件夹中。

打开Dreamweaver软件，新建一个站点，然后在站点下建立不同的文件夹存放素材。

建立自己的主页，按照之前的定的风格设计布局。

不要急着添加图片和文字，先将导航栏，标题栏和内容栏都规划好然后在进行素材的导入。注意无论是文件夹的名还是素材名最好使用英文而不是中文。中文状态很容易报错，文件添加后就不要更改文件路劲了，否则会导致文件的丢失。

制作网页是一个非常复杂的过程，如果想从头到尾自己制作一个网页的话是很难说清楚的，所以这里就分享一个很简单的方法。

找到一个适合自己风格或是自己比较喜欢的网页，右击鼠标——另存为。

这时浏览器就会将这个网页中的所有的元素都复制下来，存放到一个文件夹中。

打开Dreamweaver软件代开刚刚下载的网页，这时Dreamweaver中就会显示你下载网页的所有元素，不会出现丢失的情况。

替换网页中的元素即可。

选择需要进行修改的图片或是文字直接更换即可。选择一个元素然后在下面的属性栏中进行更换即可。同时还可以更换图片的大小和其他的属性。

按下F12进行预览效果即可。不满意的地方进行修改，一定要注意随时保存文件。

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

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

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

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

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

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

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

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

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

1. 内容优先

桌面站点可以有1024*768的分辨率，而智能机仅有320*480分辨率，如何在如此小的分辨率中，在不降低用户体验效果前提下进行设计是很有挑战性的。桌面站点常常包涵更广的内容，而移动站点仅包涵一些符合使用情境的主要功能和特征，Orbitz的桌面站点和移动站点。移动站点应该通过移动设备将用户更需要的内容和特征展现给用户。一些站点内容，信息架构和屏幕布局都是在深度理解客户需求的前提下设计的。

2. 垂直浏览取代水平浏览

在呈现数据结构和数据内容时，水平导航是一种广泛采用的导航方式。用户可以从左到右，点击不同的站点链接来浏览。至于顶端时，用户可以更容易聚焦于页面的内容，而在两侧时，会很容易干扰用户视线。在我的研究中，90%的移动站点采用垂直导航的方式取代水平导航，包括Urban Outfitters移动站点。

3. 导航条，标签和超文本

超链接是因特网站点的主要组成部分，然而，在移动站点中，我们则很少看到超链接。并不是在移动站点中没有超链接，而是被一些导航条，标签和按钮等取代了。用户使用手指来操作移动设备是产生垂直导航方式的原因之一。

在电脑上，移动鼠标，点击超链接是很理想的查看信息的方式，但是在移动设备中，通过手指触摸屏幕来打开超链接就不那么容易了。用户可以很容易激活一个链接，进入一个新页面，但，这并不是用户期望的页面，如果这样的话，会产生非常差的体验效果。Fitts定律告诉我们使用指点设备达到一个目标的时间与设备当前的位置和目标位置的距离，以及目标的大小有移动的关系。在一些大的手机站点中，导航条，标签和按钮会吸引更多的注意力。

4.移动网页中的广告

相对于其他广告形式，移动网络广告，借助于移动终端所特有的硬件或传感器特性，可以具有更强的达到率、互动性、定位能力、传播性、交易能力广告特点，如AR，二维码，蓝牙广告，LBS基于位置的营销活动互动、与其他媒体的网络互动广告。

1、减少带宽占用

尽管不像从前，对服务器而言已经不成问题，不过想想近年来有多少用户通过移动设备访问你的网站。减少网站的带宽占用，会赢得流量有限的用户的感激。

2、消灭了移动版网站

当然，响应式设计不只限于单页网站。但即使采用了响应式设计，网站越复杂，让它适应小屏幕还是愈发困难。单页网站并不复杂，这是必然的。运用响应式设计总体来说更容易。简化导航和类似改变，也更容易成就适用于小屏幕的设计。

3、分割内容

单个页面不代表一整个冗长部分。实际上也不该如此。将内容根据逻辑划分为几大块，用户才能更容易找到他们所需。

4、让所有的背景都有所作为

单页网站常常有大幅背景。当然，有时候这些背景很朴素，或带有平铺纹理;不过也有单页网站利用所有的空间来挥洒创意。前面提到了，这也有助于划分内容。背景未必要是单一的图片。可以是一系列图片，如果这样做与内容更相符的话。