UltraEdit

UltraEdit中文网 > 使用技巧 > 使用UltraEdit制作网页进阶教程之坐标篇

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

发布时间:2021/12/06 13:37:10

品牌型号:联想ThinKpad

系统:win7 64位旗舰版

软件版本:UltraEdit 28

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

本文章主要介绍使用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完成的坐标操作,当然也不仅仅只有这些,还有浮动、镶嵌等等的操作,但常用的还是这两种,不再作细化讲解,有兴趣的话去深入学习吧!UltraEdit除了能制作网页之外还能完成很多其它的任务,欢迎前往UltraEdit中文网站下载软件试用。

作者:零缘

标签:UltraEdit制作网页

读者也访问过这里:
UltraEdit 中文网站
功能强大的文本编辑器
立即购买
QQ 群
官方交流群: 立即加群
400-8765-888 kefu@makeding.com
热门文章
UltraEdit安装激活换机教程 如何生成脱机许可证
UltraEdit是深受编程人士喜爱的代码编辑器之一,简洁干净的工作界面,标配的语法高亮功能,代码折叠等高效编程功能,并且,还支持HTML、PHP和JavaScript等语法,让代码编辑、文档内容处理更加方便。
2021-10-12
UltraEdit入门基础
UltraEdit是一款功能强大的、多平台的文本编辑器,也是多种程序语言的程序编辑器。UltraEdit界面简洁易用(界面与Word相似),图形化的工具栏有助于使用者迅速找到所需的工具。此外,UltraEdit可以处理复杂的软件开发项目,它的灵活性及易于自定义,非常适合程序开发人员和公司企业应用。
2020-12-29
如何使用UltraEdit的查找和替换功能
UltraEdit强大且易于使用,能查找到搜索大型日志文件,生成包含搜索字符串的所有行的列表,基于模式的查找和替换正则表达式支持,搜索列和选定文本,保存搜索收藏夹,替换单个文件或所有打开文件,显示和隐藏包含特定字符串的行,以及更多内容。如何运用这款专业、且容易上手的软件进行查找和替换,是我们今天要为大家解答的问题。在本篇文章中,将使用UltraEdit这款Windows软件,进行查找和替换过程的讲解。
2021-03-16
UltraEdit使用技巧之自定义用户界面
UltraEdit在默认的情况下,使用的是Ribbon功能区的页面布局模式。其特点是顶部菜单栏中的选项会以水平的方式,平铺展开在顶部菜单栏中。但对于比较习惯使用工具栏式(竖向菜单)布局模式的用户来说,使用起来会显得不够便捷。那么,是否可以更改UltraEdit的默认布局模式呢?答案是肯定的,除了总体的布局模式外,用户还可以对工具栏、主题等进行更改。
2020-09-18
巧用UltraEdit查找功能实现批量查找(上)
UltraEdit作为一款专业、使用便捷的代码编辑器,提供了多项便于编码人员操作的功能。而其中的查找功能,能帮助用户快速、批量地找到对应的关键词进行编辑处理。其查找功能中,包含了文本查找以及文件查找功能。
2020-09-18
UltraEdit文本编辑器怎么自动换行
UltraEdit文本编辑器的功能强大,操作简单,可编辑4GB以上的超大型文档,同时它的界面美观,还能自由更换主题,满足你的个性化需求。本篇教程将向大家介绍,如何开启UltraEdit文本编辑器的自动换行功能,一起来看看吧。
2021-01-28