表格网页制作教程

个人网页制作教程时间:2021-04-10 阅读:()

前言

叶子从1999年开始学习电脑那时候只会打字学校教的只有英文录文和简单的office操作。在一个老师的指导下开始学Photoshop 当时用的还是4.0的版本很难操作但感叹于Photoshop所带给我的一次又一次的惊奇。当初并不懂得学习Photoshop有什么用但现在证明当初的选择是没错的对现在做网页是起到了决定性的作用。 2000年为了交作业开始学习Frontpage 那个时候做的网页可以说是对gif动画素材的滥用。在一次学校的网页制作比赛中获得了二等奖从此更坚定了我学习网页制作的决心也是凭着对网页制作浓烈的兴趣从零开始自己一步步走过来的自己买书自学上网找资料走了很长一段艰辛的路。现在我觉得应该总结一些我的学习经验对于初学者来讲可以指引一条明路应该怎样更好更快的掌握网页制作的工具以及相关的图像处理软件、动画制作软件等。

通过此教程的学习我们不仅教会你网页制作还会在讲解的过程中牵涉到其它方面的知识点对你来讲将会是受益匪浅。

所需软件

1 、 Macromedia Dreamweaver 8.0------网页制作软件

2、Adobe Photoshop 7.0-----图像处理软件 or fireworksmx8.0

3、 Macromedia Flash 8.0-----动画制作软件

第一章建立站点

一、站点的建立

第二章做网站之前的构思

一、确定主题

二、搜索同类型网站进行比较

1 、搜索引擎--百度的使用

2、图片的保存

3、文字内容的保存

4、百度搜索功能的延伸

三、整体框架的确立

第三章DW表格的使用

一、 DW界面介绍

二、新建文件

三、文件保存

四、表格的应用

第四章深入了解DW表格的应用

1 、单元格填充与单元格间距

2、表格边框线的设置

3、单元格填充颜色

4、表格细边框线的制作方法

第五章网页超链接

1 、子页的建立

2、网页互链

3、浏览网页体验互链

4、在新窗口中打开链接的页面

第六章Dreamweaver离不开的Photoshop应用

第一章建立站点

一、站点的建立

我们先来讲一下做一个网站之前我们要先建立一个站点简单的说就是在电脑硬盘上某个位置先新建一个文件夹用来存放整个网站的内容。比如我在E盘下建了一个文件夹叫做"website",然后在"website"下建了一个文件夹叫"img" 专门用来存放图片的文件夹。等会我们的页面文件就放在"website"文件夹内与"img"处于同一级目录下。 注初学者常喜欢将文件夹及文件命名为中文的这是一个不好的习惯。网页中的文件名一定要用英文名包括HTM、图片文件名等。尽管你们在自己的电脑上测试是正确的但在上传到服务器后

[图001]

第二章做网站之前的构思

一、确定主题

做网站之前要先想好主题我们的网站是要以什么为主导我们先讲几个比较简单的 1 个人网站

个人网站一般是以介绍自己为主包括个人基本资料、个人作品比如说摄影、绘画 、音乐收藏、心情故事 日记 、留言本、论坛等。

这是一个大致的归类名称的选择可以因人喜好而定。

2公司网站

大部分小企业的网站都会包含以下内容公司简介、产品介绍、联系我们、意见反馈比如再加上人才招聘、留言板等。

当然不同类型的公司所要求的网站内容就不相同。

注不同目的的网站其分类就各不相同关键就是你想把多少内容展示在网上让别人知道。 

[图003]

在参考别人网站的时候你可以了解别人的设计思路对初学者来讲先看一下别人做了什么内容在网页里收集一些有用的资源如素材图片、文章、音乐等。

2、图片的保存

在浏览别人的网页时看到漂亮的图片我们就可以将它保存起来对着图片点右键选择“另存为” 在弹出的窗口中选择保存位置比如放到E:\website\img\ 这是我们之前建立好的专业来保存图片的文件夹 

3、文字内容的保存

[图004]

从字面上理解我们知道

 1 网页全部 *.htm;*.html  -----保存下来的时候是一个网页文件和一个包含该页图片相关信息的文件夹。这种方法对于图文都需要的读者来讲是一种比较便捷的保存方法等看完后再对不用的信息做删除整理。

2Web档案单一文件 *.mht  ----这种形式保存下来的就像你在网上看到的效果一模一样只有单一的一个网页文件对于没有宽带的用户来讲到网吧搜索了多个页面文件将其保存成Web档案格式回家后打开来看就跟上网看到的效果是一样的。

3网页仅HTML *.htm;*.html)----这种保存类型图片将无法显示文字内容可以照常显示

4文本文件 *.txt  ----这种保存类型就是把网页中所有的文字保存为文本文件的格式不过有一个不好的地方就是所有的文字不会像网页上划分的布局完整的显示你还必须自己找到自己所需的内容。

以上四个不同的保存类型 自己可以根据需要来选择。

[图006]

我们会发现搜索出来的mid格式的文件才51 .5K比如其它格式的文件就小得多了 这里补充一个常识 1M(1MB的简称)=1024K(1024KB的简称  

三、整体框架的确立

想做出一个漂亮的网站并不是直接在DW中就能够编辑得很完美的一个成熟的网站是前台美工与后台程序的结合。网页设计师在用DW之前都会先用Photoshop把整个页面的设计效果图做出来然后再分割裁剪最后才是在DW中实现网页格式。

如果你不懂得Photoshop怎么办呢没关系我们会在后面的章节中教你现在我们先从最基本的学起。

我们来看一个最普通的框架结构如[图007]

[图008_1]

[图020]

注为什么我们要将文件命名为index.htm呢因为当我们浏览一个网站时第一眼呈现在你面前的这个页面我们将其称为首页默认的首页是index.htm或index.html或Default.htm或Default.asp或index.asp等。我们目前最常用到的就是“index.htm”

首页建好后我们就可以首手开始把准备好的内容做成网页的格式了。怎么样来排列这些文字呢接下来我们来讲一下表格的应用。

四、表格的应用

表格是个非常灵活的工具它可以控制你的网页将要显示多大的宽度。你在浏览网页的时候有时候看到一些网页占满了你的整个屏幕有的只是占了百分之七八十绝大多数页面是居中有的是居左。那如何来设置网页的宽度呢。这跟我们显示器的分辨率有关。现在绝大部分人用的显示器都是17"纯平设置的分辨率以1024*768居多部分人还是设置为800*600 在几年前 800*600是比较普通因为那时候用的显示器大部分是15"的。

现在绝大多数的网站其网页设置的宽度为778象素这样子可以保证在800*600的分辨率下看到的是满屏状态如果在1024*768状态下就处于居中位置两边还留出一定的空白 现在常被用来做对联广告。如果你想在1024*768的分辨率下看到满屏可以将网页的宽度设为1000象素。

前面我们提到的页面宽度都是固定的象素值那我们能不能设置一种页面宽度不管是在800*600还是在1024*768的情况下都能保证满屏呢可以这时我们的网页宽度就应该设置为100%而不是用象素来定义了。但做100%对初学者来讲有一定难度我们在后面章节会讲到有兴趣的再去体验体验。

在前面[图007]中我们讲到一个网页通常被分成上中下三块这样子我们就可以用插入三个表格来制作网页。为什么我们要分三个表格而不直接插入一个三行一列的表格呢那是考

[图009]

2、显示结果如下

3、叶子在做表格时习惯对表格的宽度和高度进行准确严格的设置经验证明养成这种习惯 自己很清楚每个单元格的宽度高度避免出错。现在我们来设置表格的高度将鼠标移到表格的边缘待出现四个方向箭的标志时单击鼠标左健表格处于选中状态如[图010]所示

[图010]

4、接下来我们来设置表格的高度为90象素如下图所示

[图01 1]

5、设置后表格变成

[图013]

9、这时候你会发现我将宽度设置为100%因为我们刚才已经设置这个单元格的宽度为598像素了所以现在在这个单元格内插入的表格我们就可以用百分比来控制。