免费网站源码汇总指南：轻松掌握网站建设代码技巧或者免费获取网站代码宝典：学习打造个人网站的编码攻略

如何通过编写代码构建一个网站

鉴于目前所见即所得型工具的日益增多且使用愈发便捷，制作网页已转变为轻松易行的工作，不再像过去那样需要手工编写逐行的源代码。通常，初学者在短时间内就能掌握网页制作，因而他们误以为网页制作极为简单，于是急于制作自己的网站。然而，与他人作品对比后，才发现自己的网站相当粗糙，这是为何呢？俗语有云：“心急吃不了热豆腐”。构建一个网站如同建造一栋大楼，它是一项系统工程，拥有其特定的工作流程。你只有遵循这些步骤，按部就班地逐步推进，才能设计出满意的网站。

一、确立网站主题

网站主题即你所创建网站所应包含的主要内蕴。一个网站必须具备一个明确的主题。特别是个人网站，你不可能像综合网站那样内容全面、包罗万象。你没有这样的能力和精力，因此必须准确找到一个自己最感兴趣的内容，深入研究、全面掌握，形成自己的特色，从而给用户留下深刻印象。网站主题无固定规则，只要你感兴趣，任何内容都可以，但主题需鲜明，在其范围内内容需做到全面而深入。

二、收集资料

明确了网站主题后，你就要围绕主题开始收集资料。俗话说：“巧妇难为无米之炊”。要想让自己的网站内容丰富、吸引用户，你就要尽可能收集资料。收集的资料越多，制作网站就越容易。资料可以来自图书、报纸、光盘、多媒体，也可以从互联网上获取。然后将收集到的资料去粗取精、去伪存真，作为制作网页的素材。

三、规划网站

一个网站设计的成功与否，很大程度上取决于设计者的规划能力。规划网站如同设计师设计大楼一样，图纸设计好，才能建成一座美丽的楼房。网站规划包含的内容众多，如网站结构、栏目设置、网站风格、色彩搭配、版面布局、文字图片的运用等。你只有在制作网页之前将这些方面都考虑周全，才能在制作时游刃有余，心中有数。也只有这样制作出的网页才能具有个性和特色，吸引人。

四、选择合适的制作工具

尽管选择何种工具不会影响网页设计的好坏，但一款功能强大、操作简便的软件往往能起到事半功倍的效果。网页制作涉及的工具较多，首先是网页制作工具，目前大多数网民选择的是所见即所得的编辑工具，其中佼佼者当然是Dreamweaver和Frontpage。对于初学者来说，Frontpage 2000是首选。除此之外，还有图片编辑工具，如Photoshop、Photoimpact等；动画制作工具，如Flash、Cool 3d、Gif Animator等；还有网页特效工具，如有声有色等。网上有许多这类软件，你可以根据需要灵活运用。

五、制作网页

有了材料，选择了工具，接下来就需要按照规划一步步将想法变为现实。这是一个复杂细致的过程，一定要按照先大后小、先简单后复杂的顺序进行制作。所谓先大后小，即在制作网页时，先设计好大的结构，再逐步完善小的结构设计。所谓先简单后复杂，即先设计简单的内容，再设计复杂的内容，以便在出现问题时易于修改。在制作网页时，要多灵活运用模板，这样可以大大提高制作效率。

六、上传测试

网页制作完成后，最后要将其发布到Web服务器上，才能让全世界的朋友观赏。目前上传的工具很多，有些网页制作工具本身就带有FTP功能，利用这些FTP工具，你可以很方便地将网站发布到自己申请的主页存放服务器上。网站上传后，你需要在浏览器中打开自己的网站，逐页逐个链接进行测试，发现问题及时修改，然后再上传测试。全部测试完成后，就可以将网址告诉朋友，让他们来浏览。

七、推广宣传

网页制作完成后，还需要不断进行宣传，这样才能让更多朋友了解它，提高网站的访问率和知名度。推广方法有很多，例如在搜索引擎上注册、与其他网站交换链接、加入广告链等。

八、维护更新

如何使用Dreamweaver套用网站源代码制作网页

使用Dreamweaver套用网站源代码制作网页方法：

一、定义站点

1、在任意一个根目录下创建一个文件夹（我们这里假设为E盘），命名为MyWeb。

备注：网站中所用的文件都要使用英文名。

2、打开Dreamweaver，选择“站点—新建站点”，打开对话框。在站点名称中输入网站名称（可用中文），在本地根文件夹中选择刚才创建的文件夹（E:web）。然后确定即可。

备注：再次打开Dreamweaver，会自动找到刚才设立的站点。如果有多个站点，可以在菜单“站点—打开站点”中去选择。

二、创建页面

1、在本地文件夹E:MyWeb下的空白处，按右键选“新建文件”，这样就创建了一个页面，默认文件名为untitled.htm。.htm表示这个网页文件是一个静态的HTML文件。将其改名为index.htm。

网站第一页的名称通常是index.htm或index.html。其他页面的名称可以自己取。

2、双击index.htm进入该页面的编辑状态。在标题栏中输入网页名称，按右键选页面属性，打开“页面属性”窗口。在这里可以设置网站的标题、背景颜色或背景图像、超级链接的颜色（一般默认即可），其他都保持默认即可。

3．此时光标位于左上角，可输入一句话，如“欢迎来到我的主页”。选取文字，用菜单“窗口/属性”打开属性面板，选取文字大小为6，再使文字居中，然后在文字前用几个回车使其位于页面中间。

3．此刻光标位于左上角，可输入一句短语，例如“热烈欢迎光临我的主页”。选取文字，通过菜单“窗口/属性”打开属性面板，选取文字大小为6，再使其居中，接着在文字前输入几个换行符使其位于页面中央。

4．若要选择字体，则选择字体菜单中的最后一项：编辑字体列表。然后在对话框中点击加号，接着在“可用字体”栏中选择需要添加到字体列表中的一种字体，点击中间的按钮即可添加。

在网页上最常用的是宋体字。请不要将特殊字体添加到列表中使用，因为别人电脑上如果没有安装，就无法看到。如果需要使用，请将其制作成图片后再使用。

在网页上输入空格的方法是：将输入法切换为全角。

在网页上换行的方法是：按住Shift键的同时按Enter键。只按Enter键则为换段。

三、为页面添加图片

1、在本地文件夹E:MyWeb下的空白处，按右键选择“新建文件夹”，这样创建了一个文件夹，用它来存放图片，可以命名为tu、pic或images等。

2、通过菜单“窗口/对象”打开对象面板，点击“插入图像”，在对话框中选择要插入的图片。如果出现对话框：“你愿意将该文件复制到根文件夹中吗”，必须选择“是”，然后将它保存到刚创建的文件夹里。

3、选中该图片，打开属性面板，可以在上面为图片命名，重新设置图片的高度、宽度，拖动图片角上的点可以改变大小。按住Shift键，再拖动角上的点，可以使图片保持宽高比例拉伸。如要恢复原始大小，则单击右下角的“重设大小”按钮。

4、“链接”可以直接在这里输入地址。“替代”是图片的说明，即鼠标指向图片时显示的文字；“边框”是图片边框的宽度，“对齐”是对齐方式。

四、添加超级链接

1、为文字添加链接。

例如，在页面上输入“我的文章”，然后将其选中，打开属性面板，在“链接”栏中，选择它所要链接到的页面即可。后面一格“目标”我们一般常用的是self即打开的新窗口代替了当前窗口；或是选择blank即打开新窗口。

2、为图片添加链接

与上面文字的链接类似，插入图片，然后在属性面板中的“链接”栏中选择即可。

图片可以创建不同的多个链接。方法如下：

在属性面板中的“地图”一项下面有一些图形，比如点击方形，光标变成十字，在图片上画一个蓝色矩形的热区，此时在属性面板上可以为这个热区设置链接地址，鼠标指向会显示。同样，再用圆形设置一个热区，就可以再为该图片设置其他链接了。

3、添加E-mail链接

选中需要添加E-mail链接的文字或图片，打开属性面板，在“链接”栏中输入填写邮件地址。格式如下：mailto:邮件地址。注意中间不要空格。

4、如果链接到浏览器无法打开的文件，例如exe、Zip等文件，那么浏览者在点击这个链接的时候，就会实现文件下载或在线播放的功能。

五、表格的使用

1、点击插入/表格，打开表格面板进行设置。行数、列数、宽度、边框等，“单元格填充”为单元格内侧与内容的距离；“单元格间距”为单元格之间的距离，单位均为像素。

2、插入表格后，在表格的边框上点击一下，可以全选整个表格。然后在下面的属性面板里可以进行各种设置。

3、把光标移到其中一个单元格，此时看到的属性面板，就是单元格的属性面板。也可以进行各种关于单元格的操作。如背景色、背景图、边框、合并、拆分等。

六、关于表格的其他操作

一制作细线表格原理：

1、选中整个表格，设置其背景为黑色（该颜色即表格线的颜色）。

2、选中所有单元格，设置其背景为白色。

二自动格式化表格

1、先制作好一张表格，然后选中。

2、选择菜单中的命令/格式化表格。即可以其中选择预设好的一些表格样式。

三一像素分割条

1、插入一个1行1列，宽为200像素，边框边距均为0的表格。

2、选中表格，设置表格高为1像素，并设置一个背景色（即所要的线条颜色）。

3、切换到代码和设计窗口，将代码

七、用表格构建完整的页面

一网页顶部（一般包括图标、广告、导航菜单）

1、创建一个1行2列，宽为760像素，边框及边距均为0的表格。

2、选中表格，设置排列方式为居中对齐，背景色为3366CC。

3、将光标置于左边单元格中，设置其水平排列为左对齐，垂直排列为顶端对齐，然后插入一张图像，一般在此插入的是网站的图标，即logo。

4、将光标置于右边单元格中，设置其宽度为500，水平排列为居中对齐，垂直排列为中间，然后插入图像，一般是网页广告，即banner。

5、将光标置于刚完成的表格之后，插入/表格，创建一个1行1列，宽为760像素，边框及边距均为0的表格。

6、选中刚创建的表格，设置排列方式为居中对齐，背景色为005173。

7、在该表格中依次插入多个图像，作为导航条菜单。

二网页中部（左边栏目列表、中间网站新闻、右边栏目列表）

1、在导航条表格后面，插入/表格，创建一个1行3列，宽为760像素，边框及边距均为0的表格。并设置排列方式为居中对齐，背景色为FFFFFFF。

2、将光标置于左边单元格中，设置其宽度为18%，水平排列为居中对齐，垂直排列为顶端对齐，然后插入一张图像，插入一个导航条。

3、将光标置于刚插入的图片后，插入/表格，插入一个12行1列，宽为90%的表格。设置其单元格间距为1，背景色为CCCCCC。

4、将光标放在表格第一个单元中，设置其高为20，背景色为FFFFFF。插入/图像，插入一个导航文字前面的小点。同样设置其他11个单元格，这样左边的栏目分类列表就完成了。

4、将光标定位至表格首个单元格，调整其高度至20，背景色调设为纯白。添加/图像，插入导航文字前的圆点。依照此法，调整其余11个单元格，左侧的分类列表便制作完成。

5、将光标置于主体表格中央单元格，调整其宽度至66%，水平居中，垂直顶端对齐。添加/图像，插入导航栏。

6、将光标置于图像之后，添加/表格，创建一个4行1列，宽度95%的表格。调整单元格间距为1，背景色调为灰色。

7、将光标置于表格首个单元格，拖动鼠标选中所有4个单元格，调整高度至60，背景色调设为纯白。

8、将光标置于主体表格右侧单元格，调整其宽度至16%，水平居中，垂直顶端对齐。添加/图像，插入导航栏。

9、将光标置于图像之后，添加/表格，创建一个7行1列，宽度90%的表格。调整间距为1，背景色调为灰色。

10、按住Ctrl键，用鼠标点击新插入表格的第1、3、5、7单元格，调整高度至55，背景色调设为纯白。

11、选中第2、4、6单元格，调整高度至6，背景色调设为纯白。

12、切换至源代码窗口，删除第2、4、6单元格中的空格符号。

网页底部（通常包括版权信息等）

1、将光标置于主体表格之后，添加/表格，创建一个2行2列，宽度760像素，边框及边距均为0的表格。

2、选中表格，调整排列方式为居中对齐，背景色调为蓝紫色。

3、将光标置于表格第1行左侧单元格，调整宽度为50%，水平默认，垂直基线，背景色调设为纯白，输入版权信息，内容颜色随意。

4、将光标置于表格第1行右侧单元格，添加/图像，插入圆角图像，输入Email字样，调整大小和颜色为1和纯白。

5、添加/表单对象/文本域，插入文本域，宽度可自由设置。

6、添加/图像，插入GO图像。

7、设置页属性。点击菜单修改/页面属性，在标题栏输入标题，选择背景图像，顶部边界设为0。

整个网页通过将不同部分放入表格组合而成，能提升浏览器读取页面速度；因为浏览器需读完整个表格后才显示内容，所以最好避免将所有内容框在一个表格中。

八、利用布局表格构建完整页面

1、点击插入/布局，切换至布局视图状态（默认为标准视图）。也可通过菜单查看/表格视图/布局视图进入。

2、点击绘制布局表格按钮，在页面中绘制布局表格。

3、先绘制网页顶部、中部、底部的大表格。

4、点击绘制布局单元格按钮，在已绘制的布局表格中绘制布局单元格。

5、返回标准视图，在划分好的表格中插入嵌套的小表格，细化页面设计。

注意：将整个页面置于一个大的布局表格中会导致网页浏览速度变慢。应按页面版面和内容划分多个布局表格，并在其中插入布局单元格。

九、层的使用

1、点击插入/层。也可点击图标，拖动鼠标创建层。

2、选中创建的层，查看属性面板。“层编号”和“标签”使用默认设置。“层编号”用于编程，现在一般不用。“上”指距页面上边界的距离；“左”指距左边界的距离。“z轴”指层的顺序，数值大的层叠加在数值小的层之上。

3、不设置颜色时，层是透明的。

4、点击层左上角的小方框可随意拖动层，大小也可调整。

5、“溢出”选项中，当文字多于层大小时，可选择visible（超出部分显示）、hidden（超出部分隐藏）、scroll（不管是否有超出，都显示滚动条）、auto（有超出时才出现滚动条）。

6、点击菜单窗口/其他/层，此时将出现层管理窗口。可在其中修改层名称和Z轴值，也可点击眼睛图标使层可见或不可见。还有一个防止重叠的选项。

7、层的对齐。按住Shift键，同时选中几个层，使用修改/对齐中的选项。

8、嵌套层。①在文档中插入一个层。②将光标置于该层内，继续插入一个层，得到嵌套层。内部层为子层，外部层为父层。它们的Z轴顺序相同。拖动父层时，子层也会相对移动。移动子层时，父层不会随之移动。

十、了解时间轴

1、点击菜单中的插入/层，插入一个层。

2、在层中插入图片，如飞机图片。（此处图片也可为小动画的.gif图像）

3、点击菜单中的窗口/其他/时间轴，打开时间轴窗口。

4、选中页面上创建的层，用鼠标按住层左上角的小方框图标，将层拖放到时间轴的第1帧中。此时自动创建了一个长度为15帧的时间轴。

5、选中时间轴上的第1帧，将页面中的层拖放到页左上角，即动画开始时的位置。

6、选中时间轴上第15帧，可拖动该帧至任意长度，如30帧。

7、选中第30帧，将层拖放到页面的右下方，此时窗口中显示出层从第1帧到第30帧的运动轨迹。(此时运动为直线)

8、可点击第15帧，右键选“增加关键帧”，在选中第15帧的状态下，拖动层到页面中下方。

9、勾选“自动播放”项。

总结：Dreamweaver是一款功能强大的软件，其中包含许多功能需要不断总结和摸索，熟悉后使用会变得简单。