使用UltraEdit制作网页进阶教程之坐标篇

一个好的网页排版是很重要的，一段文字，一张图片，出现的位置不同给人的感观是不一样的。所以在设计之前需要掌握这些位置操作，而我们理解的位置对于电脑而言就是数字，用统一的说法就是坐标。

本文章主要介绍使用UltraEdit制作网页时的坐标操作，希望能对你有所帮助。

一、坐标基础知识

坐标就是用特定的描述来表达某一位置，描述方式很多，但我们最常见也最常用的就是用数字量来描述坐标。电脑是通过屏幕呈现内容给我们的，而这块屏幕仅仅是一个二维平面，我们可以通过X、Y两个量来确定屏幕上的每一处位置。

可这些量是怎么确定的？有边界限制吗？不急，先从像素讲起吧！像素我们可以理解为将计算机屏幕分割成很多小正方形，像素就是最小的不可分单元。例如普通的笔记本电脑的一项机体数据“分辨率1920×1080”，就是说屏幕长有1920个像素，宽有1080个像素。

像素也通常作为我们确定位置的依据数据，通过给定像素的量，即长宽像素对应的数字，是可以唯一确定屏幕上的某一位置的，这些数字就是我们制作网页时会用到的坐标。

二、在特定坐标处显示

首先我们打开UltraEdit，创建“.html”类型的文件，在其中写入如图1所示的代码。

图1：示例代码

然后点击“切换浏览器视图”，可以看见文字显示在左上角。

图2：普通显示

我们想要改变这串文字出现的位置时，可以设置“style”然后调用“样式编辑器”功能。

图3：设置位置

完成后会插入相应的代码，如图4，其中的100px就是像素值，此处表述的坐标也称之为“绝对坐标”。

图4：坐标代码

最后再切换浏览器显示查看效果。

图5：显示位置改变

注意事项：辨别坐标的原点，也即（0，0）处的像素点，它并不是电脑屏幕最左上角的位置，而是网页页面最左上角的位置。

当然除了文字可以在任意位置显示外，图像也可以，只不过图像并不能直接操作，我们通常是在任意位置显示一个窗体，然后在窗体中插入图像，如此便等效于图像的任意位置显示。例如图6，窗体是div，我们修改窗体位置，并在其中插入图片。

图6：修改图片位置

图7：改变的图片位置

三、区域坐标设定

即设定一块特定大小的区域，通常用作背景范围设定或者文本内容区域设定，承载对象也是div描述的窗体。

我们同样调用“样式编辑器”设置该区域的长和宽。

图8：长宽设定

鉴于窗体是无色的，为了更好的看到效果，窗体的颜色做了适当修改。

图9：长宽设定完成

如图10，可见的是一个长200像素，宽200像素的区域。

图10：获得特定范围的区域

假如我想在特定位置获得特定范围的区域又如何做呢？步骤与前面的是一样的，只不过是将两者结合，设定的“绝对坐标”是起点，指定长和宽后获得终点，由这两点获得一个矩形就是我们所需的目标框体。

以上便是使用UltraEdit完成的坐标操作，当然也不仅仅只有这些，还有浮动、镶嵌等等的操作，但常用的还是这两种，不再作细化讲解，有兴趣的话去深入学习吧！