随着移动互联网的普及,越来越多的企业和个人将展示的内容转移到手机网页上,学习如何做好手机网页成为大家关心的网络热点。
传统的网页设计专用工具在电脑顶上制作网址起到了非常强的作用,但由于手机屏幕尺寸和CPU解决问题的能力较差,对网址的规定与传统网址有很大的不同。如果用传统的网页设计工具设计手机网页技术复杂,实际操作难度系数大,一般人很难做到。如果有一个手动的专用工具,让客户不用复杂的实际操作就能设计出移动互联网站,可能会受欢迎。
手机网页展示
在这里我们强烈推荐一个像那样的特殊工具,它可以像积木游戏一样快速地用来设计网站。从此不用再被专业技术人员的专有名词和实际操作包围,痛苦难受。
这款手机软件叫所见即所得Web Builder,是一款制作网页的专用工具,体积精美,应用方便。这款手机软件的一大特点就是选择了镀膜的定义。所有元素都是涂层,可以拖拽到网页的任何部分,不会伤害到其他元素。特别适合新手应用。不需要学习和培训html专业知识就可以设计一个手机网页。
所见即所得Web生成器
下面以一个网站的三个网页的设计方案为例来了解一下这个软件的应用,先看看这三个网页的预期效果。
页面预期效果
下面详细介绍建立每个网页页面的全过程。
一、网站设计构造如果你想建立一个网站,你首先要建立一个网站结构。因为是试听,这个网站只有三个页面:首页、资讯新闻、关于我。
启动所见即所得Web Builder,程序流中会自动构建一个空白页。这个页面在PC端,我们想设计一个手机网站,所以需要做改动。
在网站管理工具中选择“无标题1”,点击网站管理工具菜单栏中的“移动正在建设的页面”按钮,建立一个“网页1”,重复实际操作建立“网页2”和“网页3”选择索引,点击菜单栏中的“删除”按钮,删除这台pc的网页,然后分别右击网页1、网页2和网页3,在弹出菜单中选择“重命名网页”, 并将这三个网页分别命名为index、news和about,与网站的主页、资讯新闻和about me相匹配。
网站管理工具
在写作区,我看到网页在手机上变成了硬屏网页,上面的logo上出现了三个网页的名字,而我刚开始设计的这三个网页在下面。
二、创建主页它由四部分组成,从上到下依次为:标题、导航栏、照片和页脚。
A,标题
单击“插入-文本”命令,将鼠标放在网页上,拖动鼠标创建一个输入框。双击鼠标,这是一种文化艺术,在里面输入文字,然后设置字体类型、大小、色调、排序方式等。在“文件格式”选项卡中。
B,导航栏
点击“插入-导航栏-导航栏”,在网页上拖拽,就转换成了导航栏。双击鼠标导航栏打开设置提示框,点击“内容”右边的按钮进入导航栏提示框,在“名称”目录中选择一个选项,点击右边的“写入”按钮,设置文本名称、网页链接等主要参数。
导航栏提示框
点击“添加”添加新项目,点击“下移”和“上移”调整项目顺序。
C,照片
单击“插入-图像-来自位图文件”命令,将其拖放到网页上,从本机中选择一张照片并插入。您可以通过拖放来调整照片的大小。
D,页脚
单击“插入-页脚”命令,在网页上拖拽,插入页脚,双击鼠标页脚打开编辑对话框,单击“内容”右边的按钮,打开“基本”设置框,单击“添加”按钮,增强页脚包含的内容,键入文字,具体logo,在打开的对话框中设置连接的网页,重复实际操作,添加几个页脚内容。回到页脚设置提示框,在“logo位置”下拉框中选择logo的动态显示,删除标题中的页脚。
“写页脚”对话框
三、创建资讯新闻页它由页眉、页脚和新闻列表3组成。就像在首页的页脚一样,直接复制到当前页面就可以了。
A,标题
单击“插入-主题”命令,将其拖放到网页中,它将被转换为页眉,并自动位于网页的顶部。双击鼠标头打开设置提示框。在“点击按钮”中,将文字改为“主页”,网址偏向索引,“鼠标右键”中的文字改为“关于我”,网址偏向关于“杂项”
标题提示框
B,新闻列表
点击“插入-目录主视图”,在网页中插入一个目录,双击它,打开设置提示框,在“名称”目录中选择一个内容,点击“写入”按钮设置文本、图片、网页连接等主要参数,点击“添加”按钮添加新内容。
目录主视图
四、创建关于我页它由三部分组成:页眉、页脚和折叠控制面板。和前页脚一样,立即复制,还没有设置。页眉设置不属于新闻页面。同样,只需将“鼠标右键”中的网址改为新闻,即新闻页面。
单击“插入-折叠”将折叠控制面板插入网页。默认情况下,有两个控制面板。可以双击鼠标打开设置提示框,加上大量的控制面板。单击减号按钮控制面板,然后在其中插入必要的元素。
折叠控制面板
五、浏览网址单击主页徽标中的浏览按钮或按F5键,使用计算机浏览器浏览网页。
六、网站发布一个制作精良的网站可以立即上传到网络服务器,或者存储在本地电脑的文件目录中。点击“主页”标识中的“发布”按钮,打开发布网站的提示框。
公告网站提示框
点击“正在构建”按钮,在“类别”目录中选择“本地文件夹名称”,点击“文件夹名称”右侧的按钮,选择存储URL的文件目录,点击“确定”按钮返回。
添加发布的职位。
点击“发布”按钮,就可以把制作好的网站保存在这台机器里了。发布后,打开存储目的就可以访问设计方案更好的网站,和上传到网上的实际效果一模一样。
根据上面实战演练的实际操作,可以感觉到所见即所得Web Builder的应用是比较简单的。不需要html的专业知识,只要点点鼠标就可以设计网站。简单高效,所见即所得的Web Builder发挥了非常强大的作用。可以在制作的过程中慢慢学习和训练,越用越喜欢。