html中使用什么标签做的导航栏_自媒体人如何自己建立一个手机网站,超简单,任何人都能做...

随着移动互联网的兴起,越来越多的公司、个人把展示的内容转到了手机网站上,学会制作手机网站就成了大家关注的热点。传统的网页制作工具制作电脑端的网站功能很强大,但手机网站由于手机屏幕大小和CPU处理能力较弱,对网站的要求与传统网站有很大的不同。如果用传统的网页制作工具设计手机网站需要的技术复杂,操作难度大,一般人很难完成。如果有一个傻瓜式的工具,让用户无需复杂操作就能完成手机网站的设计,将会大受欢迎。

a7d9ec63bbc6d5b26faf3e9da9d6e379.png

手机网站展示

下面就给大家推荐的就是一款这样的工具,使用它可以像搭积木一样快速完成网站的设计,再也不用被专业技术名词和操作包围,痛苦难受了。

这个软件叫WYSIWYG Web Builder,是一个所见即所得的网页设计工具,体积小巧,使用简单。这个软件最大的特点就是采用了图层概念,任何元素都是图层,可以拖放到页面上的任意位置,而不影响其他的元素,非常适合初学者使用。不需要学习html知识就可以设计一个手机网站。

fbb2c0c50361672ba051be63d495bbbd.png

WYSIWYG Web Builder

下面以设计一个网站的三个页面为例,了解一下该软件的使用,首先看一下这三个页面的实际效果。

e0670127b4fd2fb98c5bb34cf6351903.png

网页实际效果

下面逐一介绍每个页面的创建过程。

一、设计网站结构

要想做网站,首先要搭建网站结构,由于是演示,这个网站只有三个页面:首页、新闻资讯、关于我们。

启动WYSIWYG Web Builder,程序自动新建一个空白页面,这个页面是PC端的,而我们要设计的是手机端网站,所以要进行更改。

在“站点管理器”中选中“无标题1”,单击站点管理器工具栏中的“新建移动页”按钮,新建一个“页面1”,重复上述操作,在新建“页面2”、“页面3”。选中index,单击工具栏中的“删除”按钮,把这个pc端的页面删除,然后分别右键单击页面1、页面2、页面3,在弹出的菜单中选择“重命名页面”,将这三个页面分别命名为index、news、about,对应于网站的首页、新闻资讯、关于我们。

baa1b3ff1e1d63dbc686954030299420.png

站点管理器

在编辑区看到网页变成了手机的竖屏页面,上面的标签也也出现了三个页面的名称,下面就开始设计这三个页面。

二、建立首页

由四部分组成,由上到下依次是:标题、导航条、图片、页脚。

A、标题

单击“插入—文本”的命令,在页面上用鼠标拖动,产生一个文本框,双击这个文化,在其中输入文字,然后在“格式”标签页中设置字体类型、大小、颜色、排列方式等。

B、导航条

单击”插入—导航—导航栏”,在页面上拖动,生成一个导航栏,双击导航栏,打开设置对话框,单击“条目”右侧的按钮,进入导航栏对话框,在“名称”列表中选中一个选项,单击右侧的“编辑”按钮,可以设置文本名称、连接页面等参数。

fb9322e4948607a837c24c4a1f35e2cf.png

导航栏对话框

单击“添加”按钮,可以新增项目,同时可以单击“向下移动”和“向上移动”按钮,调整条目的顺序。

C、图片

单击“插入—图像—从图像文件”命令,在网页上拖动,从本机中选择一个图片插入,可以拖动调整图片的大小位置。

D、页脚

单击“插入—页脚”命令,在页面上拖动,插入页脚,双击页脚打开编辑窗口,单击“条目”右侧的按钮,打开“常规”设置框,单击“添加”按钮,增加页脚中包含的内容,在打开的窗口中输入文本、指定图标、设置好连接的页面,重复以上操作,添加多个页脚内容。返回页脚设置对话框,在“图标位置”下拉列表中选择图标的显示方式,同时将标题中的Footer删除。

17cb74cb9030fa9c2a207dc427038bca.png

页脚编辑窗口

三、建立新闻资讯页

有页眉、页脚、新闻列表3部分组成。页脚与前面首页中的相同,直接复制粘贴到当前页即可。

A、页眉

单击“插入—标题”命令,在页面中拖动,生成一个页眉,它会自动处于页面顶部,双击页眉,打开设置对话框,在“左键按钮”中,将文本改为“首页”,URL指向index,将“右键按钮”中的文本改为“关于我们”,URL指向about,将“杂项”中的标题改为“新闻资讯”。

b91627b95fdd98a6e6b22f79f66a346f.png

页眉对话框

B、新闻列表

单击“插入—列表视图”,在网页中插入一个列表,双击它,打开设置对话框,在“名称”列表中选中一个条目,单击“编辑”按钮设置文本、图像、连接页面等参数,单击“添加”按钮,可以添加新的条目。

e51a0389a60dd3542d8628d3fc7a5143.png

列表视图

四、建立关于我们页

有页眉、页脚、可折叠面板三部分组成。页脚与前面相同,直接复制粘贴,也没设置。页眉设置不属于新闻资讯页相同,只不过是把“右键按钮”中的URL改为news,即新闻资讯页。

单击“插入—可折叠”,在页面中插入一个可折叠面板,默认有两个面板,可以双击打开设置对话框,添加更多面板。单击加号按钮展开面板,然后将需要的元素插入其中即可。

4bb8d523ec270580a030b14c92854da5.png

可折叠面板

五、预览网站

在首页标签中单击预览按钮或按F5键,用浏览器预览网页。

六、发布网站

制作好的网站可以直接上传到网站服务器上,也可以保存到本机上的某个目录中,在“首页”标签中单击“发布”按钮,打开发布站点对话框。

1d4cfd1c730673c219681a2dd4d66ace.png

发布站点对话框

单击“新建”按钮,在“类型”列表中选择“本地文件夹”,单击“文件夹”右边的按钮,选择一个保存网站的目录,单击“确定”按钮返回。

2e6c52ea12cf284a4775d75c2a06cc3d.png

添加发布位置

单击“发布”按钮,即可将制作好的网站保存到本机中,发布完成后,打开保存目即可浏览设计好的网站,与上传到网上的效果是完全一样。

通过上面的实战操作,我们可以体会到WYSIWYG Web Builder使用非常简单。无须html知识,只需要点击鼠标就可以完成网站的设计,简洁高效,WYSIWYG Web Builder功能非常强大,你可以在制作中逐渐学习,越用你会越喜欢他。

1.阅后如果喜欢,不妨点赞、评论和关注一下。

2.如果喜欢玩软件,请关注本头条号阅读相关文章。

3.在学习中有什么问题,欢迎与我沟通交流,今日头条号搜索:微课传媒,我在这里等你哟!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/567822.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

哈夫曼编码和带权路径计算

哈夫曼树是一种带权路径长度最短的二叉树,也称为最优二叉树。下面用一幅图来说明。 它们的带权路径长度分别为: 图a: WPL5*27*22*213*254 图b: WPL5*32*37*213*148 可见,图b的带权路径长度较小,我们可以…

codesys raspberry pi_11月7日|Pi第四次减产来袭?4点浅析中文区用户关心的问题

手里有派,心中有爱这两天一些派友私下找我在抱怨,也有用户在我们的微信社群发出所谓的灵魂询问:“主网在哪里??制宪大会在哪里?停产或者减产在哪里?kyc在哪里?”我简单的回应一下&am…

android 网页取词,有道词典屏幕取词怎么用?,你知道吗?在浏览网页

有道词典屏幕取词怎么用?,你知道吗?在浏览网页你知道吗?在浏览网页时遇到不懂的外文、词语等,我们可以通过有道词典的屏幕取词来进行翻译哦!好吧,你肯定会问:我如何使用这一功能呢?下…

你发这些什么目的_微信CRM系统究竟是什么?

作为一个电商运营人,近期行业内经常会听到一个名词,微信CRM系统,私域流量,用微信CRM系统打造属于自己的私域流量。相信很多做电商的也是和我一样,对于这个词很耳熟,但是又不知道是什么意思,因此…

android微信支付坑,微信支付踏坑之旅

其实微信支付的集成步骤也就那么几步,奈何第一次接触无论是微信官方文档还是5SDK文档都看的晕头转向,于是我换个思路(以下只针对android app支付功能,服务端为java)1、首选确定app已经开通支付功能,确保 包名、应用签名、appid、m…

多个服务器数据互通_5月23日部分服务器数据互通公告!

为了提升游戏品质,给各位仙友创造更好的游戏环境,我们将于5月23日6:00对部分服务器进行“数据互通”操作,开服待定。参与合服的服务器可参与合服活动,详细请合服后登录游戏查看。服务器“数据互通”后,原登录界面上的服…

conda安装tensorflow-gpu

1、安装Anaconda Anaconda下载地址:https://www.anaconda.com/download/ 选择合适的版本,进行下载安装即可。 下载完成后就双击安装就可以了 一步一步按照默认的来就可以了,注意一下,注意勾选添加到环境变量,不然后面…

github下载

第一种方案:修改host(几乎属于无效方案) 1、获取GitHub的官方CDN地址 打开https://www.ipaddress.com/查询以下三个链接的DNS地址解析github.comassets-cdn.github.comgithub.global.ssl.fastly.net 记录下查询到的IP地址。 2、修改系…

rt-thread怎么使用数码管_三菱FX PLC功能指令,怎么学?

很多小伙伴问学完编程入门后又应该学习什么内容呢?我的回答是,学完三菱编程入门后应该学习三菱FX PLC功能指令,包括功能指令的预备知识、三菱FX系列PLC的编程元件、寻址方式等,以及三菱FX PLC的所有功能指令的使用和应用。注意&am…

html界面等待状态,html 等待界面

发送中,请稍等...function show(o1,o2,open){var o1 document.getElementById(o1);var o2 document.getElementById(o2);o1.style.width document.documentElement.scrollWidth;o1.style.height document.documentElement.scrollHeightif(open){o1.style.display "bl…

信息学奥赛之数学一本通_部分地区中考加分,又一批中学公布中考认可信息学特长生!...

点击上面微信号关注我关注我哟定期推送帐号信息学新闻,竞赛自主招生,信息学专业知识,信息学疑难解答,信息学训练营信息等诸多优质内容的微信平台,欢迎分享文章给你的朋友或者朋友圈!有任何问题请联系小编&a…

电脑打开微信小程序_终于可以在电脑上玩转微信小程序啦

微信小程序可以在电脑PC端打开吗?这是很久之前都有朋友问的一个问题了,今天可以告诉大家这个好消息,微信PC端2.7.0.65测试版已经增加这一功能了。目前该功能支持windows 7及以上版本操作系统,Mac还未开放,应该不会等太…

html九宫格抽奖视频,原生JS实现九宫格抽奖效果

效果图:代码如下:*{margin:0;padding:0;}#container{width:310px;height:310px;margin:30px auto;}#ul1{width:310px;height:310px;list-style:none;}#ul1 li,#ul1 a{width:100px;height:100px;border:1px solid #565656;float:left;text-align:center;l…

Windows 系统下.sh文件的运行

在论文期间好多的python项目是用Linux系统下写的,为了省事就尝试了再Windows系统下运行,以下是运行的过程: 1,Git的安装,下载Git并安装,我是在360软件管家中直接下载安装的,速度还不错&#xf…

axure原型怎么让文字自动换行_理解「回车」和「换行」,纠正数据输入过程中的坏习惯...

各位朋友,你们好。今天和大家分享的是一个很小很的技巧:文字、内容换行。关于文字换行,你们可能已经看过了很多这方面的文章,那些文章中确实已经讲解过不少换行操作的方法。那么我今天讲什么呢?大家看内容目录(是不是介…

python CV2裁剪图片并保存

import cv2 imgcv2.imread("timg.jpg") cv2.imshow("before cut",img) cv2.waitKey(0) imgimg[10:650,300:600] # 第一个范围表示高度 第二个范围表示宽度 cv2.imshow("after cut",img) cv2.imwrite("cutimage",img) cv2.waitKey(0)运…

1g等于多少mb计算机网络,手机流量1G等于多少MB ,如何产生,怎么节省

对于手机党来讲,手机流量对于手机党来说是有多重要呀,但有时候忘了,1G到底等于多少MB。1MB到底等于多少KB呢?问题还没弄懂,不知不觉地有超流量了,扣了不少话费。我就这里与大家分享下我所知道的1G到底等于多…

阻尼衰减曲线用python_高阻尼橡胶支座隔震原理

高阻尼橡胶支座是靠特殊橡胶的高阻尼性能来吸收震动能量,一般是通过加入石墨来调节阻尼的特性,但是其性能很不稳定,需要进一步研究。板式橡胶支座也很有特点,作用在上部结构和桥墩之间,保证桥梁的位移和转动&#xff0…

Win10调试ssd_tensorflow的目标检测

1、环境:win10tensorflow-gpu1.14.0 2、下载代码:到https://github.com/balancap/SSD-Tensorflow到本地 3、解压代码,并将checkpoints下的ssd_300_vgg.ckpt.zip进行解压在checkpoints目录下。否则后果不堪设想 4、如果你的电脑装有jupyter…

c++ 不插入重复元素但也不排序_面试官爱问的 10 大经典排序算法,20+ 张图来搞定...

(给算法爱好者加星标,修炼编程内功)作者:技术让梦想更伟大 / 李肖遥 (本文来自作者投稿)冒泡排序简介冒泡排序是因为越小的元素会经由交换以升序或降序的方式慢慢浮到数列的顶端,就如同碳酸饮料中二氧化碳的气泡最终会上浮到顶端一样&#xf…