WYSIWYG Web Builder制作网页

首页 » 建站教程 » WYSIWYG Web Builder制作网页

打开软件主界面,能看到这玩意界面就像是office和VS的结合体。

WYSIWYG Web Builder制作网页

其实这软件使用起来还真是挺简单的,就像画图一样,左侧栏工具箱里把你想要的部件拖上去,拉个大小,就好了。这个软件使得网页设计轻松了很多,但有一点不得不提的是,这软件,bug特别多,但又真找不到能替代它的软件了,不得已这里还是用它来说吧。

那么下面开始教程
首先,新建一个文件,在顶部菜单栏选择首页→属性。

WYSIWYG Web Builder制作网页

 

在弹出的窗口中设置页面大小为1000*2000(主要设置宽度,高度会跟随内容自动增加。建议最低1000或1200,不要超过1400为好)
因为我现在的电脑屏幕比较小,所以选择了1000的宽度。

WYSIWYG Web Builder制作网页

其他的参数可以不用改,设置好后点击确定。
然后在左侧工具栏,里找到【图像】,拖动到页面上。作为个人网站的背景图。
选择好你想要的图片,这样图片就加入好了。

WYSIWYG Web Builder制作网页

现在图片是加入了,但排版还不正确。在界面右下角即属性面板,即可设置这张图片的属性信息,修正它的排版问题。

WYSIWYG Web Builder制作网页

找到【位置】和【大小】,位置即图片左上角的坐标,设置0,0即可;大小只需要把宽度改成上一步设置的网页宽度即可,我设置的是1000。设置好宽度后,高度默认也会自动按比例缩放,现在这张图片的排版就已经正确了。
(PS:如果你的电脑屏幕跟我一样也比较小,记得主界面右下角可以缩放大小)
接下来,添加一个居中的头像。作为个人网站,直接放自己的照片也行,但如果你不想放照片,放一个自己的虚拟头像也是很合适的。
在顶部菜单栏,选择【插入】页面,找到图形这个图标,展开下拉找到圆形

WYSIWYG Web Builder制作网页

然后在工作区域把这个圆形画出来,画好后在右下角属性面板,把大小修改为200,*200,这个大小在电脑上浏览是一个比较合适的大小,当然你可以设置为其他值,这没限制。
设置好后 ,拖动圆形到图片中心,不用担心居中问题,软件自带对齐线辅助,只要拖动要差不多中间位置就会出现对齐线。
上面的步骤就做好后,就是这样子了。

WYSIWYG Web Builder制作网页

然后是设置头像了,双击这个圆形,将会弹出具体设置。
如下图操作,记得导入头像图片前,务必把头像裁剪成正方形。

然后点击确定即可。
添加头像标题,即你的昵称。左侧栏选择【文本】,拖放到合适位置,输入文字。
(PS不知是不是软件问题,这软件不能输入中文,但中文可以复制粘贴进去)
文字格式的设置,可以像这样

WYSIWYG Web Builder制作网页

Arial字体是网页通用字体,要记得网页上字体不能随便设置,别人客户端浏览器上不一定能显示出来,除非把字体集成到网站上。但使用Web标准字体都行,就比如默认的Arial就可以了。
其他的,选择居中,字号差不多就行,可以加粗。
完成后再稍微拖动要居中位置即可。
文字颜色按实际情况设置,一般白色比较通用,但使用白色也存在一个很明显的问题,看不清。因为我这张图背景是偏亮的,用白色文字的确会产生视觉干扰。如何解决这个问题呢?比如可以把背景图压暗一些,在这里可以加入一个半透明黑色的遮罩层,降低背景图的亮度。
同样的,在顶部菜单选择插入,图形,绘制一个矩形

WYSIWYG Web Builder制作网页

属性,将矩形的位置设置为0,0,大小设置和背景图一样,使得矩形可以刚好重叠背景图即可。然后右键单击矩形,移动到最底层。再右键点击背景图,同样点移动到最底层。这样这个遮罩层的位置就在背景图上面,在其他元素下面了。

双击矩形,在弹出来的窗口设置如下参数:

WYSIWYG Web Builder制作网页

再点击确定,这样遮罩层就加入好了。白色的文字也就更加清晰了。
到这里,WYSIWYG Web Builder的基本使用方法也就这样了。
通过更加细致的修改,你可以加入更多文本或其他元素。

WYSIWYG Web Builder制作网页

 

未经允许不得转载:作者:qq123, 转载或复制请以 超链接形式 并注明出处 啾啾的小破博客
原文地址:《WYSIWYG Web Builder制作网页》 发布于2020-04-09

分享到:
赞(0)

评论 抢沙发

9 + 4 =


Vieu4.5主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册