零代码!Weebly的10分钟傻瓜式网站搭建之道

yumo6665个月前 (08-07)技术文章68

一提到“做网站”,许多人就会联想到“写代码”。其实,如果你是要“产出一个漂亮、看起来专业的网页“,通过Weebly,你不需懂任何代码,通过简单的拖拽,10分钟就能快速搭建简单的展示站。但是,如果你想要“成为一名扎实的网页前端攻城狮”,HTML+CSS+Javascript绝对是基础中的基础。

4年前,同许多人一样,我怀抱着“拥有一个自己的网站”的念想,从Weebly开始了学习网站的历程,历经了HTML、CSS、jQuery,到WordPress、Dreamweaver、Muse,再到现在的JavaScript、PHP 、Bootstrap。多年之后,再次体验不断迭代更新的Weebly,它仍然是我使用过的最优秀的傻瓜式快速建站工具之一。

本期半撇带大家从选择域名选择模板、到内容搭建修改主题SEO优化、再到最后的发布网页后台管理,走完Weebly的整个核心建站流程。“光看,是学不成东西的”,如果你想掌握Weebly,请动手跟着练习,你也可以在评论出留下你的作品链接。

1、注册Weebly服务

在浏览器中输入www.weebly.com访问Weebly官网,注册账户并登录。

2、选择站点类型

登陆Weebly之后,会进入“站点类型选择”页面,它提供普通站博客站电商站三种类型的站点建设。普通站(site)多指如活动专题页、公司官网等静态网页,电商站则是用于商品的展示和购买,功能较为丰富,博客站则是用于更新日常博文、提供文章归档、评论等功能。

本次课程以“site”普通站为例。

3、选择模板主题

选择完站点类型后,你会进入“网站模板选择”页面,你可以任意选择Weebly提供的主题模板进行下一步的网页搭建,当然,你也可以在之后随意更换模板。

本次课程以Weebly的第一个页面模板为例。

4、选择您的网站域名

选择模板之后,会进入“域名选择“页面,你可以使用Weebly免费提供的子域名,也可以通过Weebly注册一个新的域名,或者使用自己购买的域名(需升级高级用户)。

本次课程以“www.banpiedemo.weebly.com”为例。

注:Weebly构建的站点都是非常适合手机端的显示的,如果你的用户主要是通过手机端访问,比如微信平台,那么Weebly的子域名就非常足够的,因为他们是通过分享页或者公众号进入你的网站,而不是在浏览器输入域名网址。

5、填充网站内容

在网站设计页面的“构建”的选项卡下,通过左侧的工具栏,你不仅可以插入文本标题图片图集幻灯片地图,还可以插入视频音频文档等多媒体文件。

注:Weebly需要升级高级用户才可插入视频和音频,内置的Youtube在国内也无法使用。但是,你只需要新插入一个“HTML模块”,然后复制优酷/网易云音乐的HTML分享链接到Weebly的HTML模块里,你的站点就可以展示音视频啦!

比如,你想在网站嵌套网易云音乐的链接,可以复制以下代码<iframe src="
http://miantiao.jd-app.com/m163player/111677" frameborder="0" scrolling="0" width="430" height="200" allowtransparency></iframe>
到Weebly的HTML模块里,只要将ID请替换为对应歌曲的网易云音乐 ID,也就是浏览器地址链接最后的那个数字,就完工啦!

6、修改网站主题

在网站设计页面的“设计”的选项卡下,你可以通过左侧的侧边栏更改网站的配色方案主题模板类型字体(仅支持英文)、背景图片

7、SEO优化

在网站设计页面的“设置”的选项卡下,点击”搜索引擎优化“选项卡,你可以填写“网站描述”、“Meta关键字”、还可以在“页脚编码”中插入你的百度/谷歌统计代码,完善这些选项不仅有利于更好地被搜索引擎检索,更重要的是,让你的文章在社交网络的分享时,有更好的识别性。

8、网站发布

一切准备就绪后,点击“发布”,你就可以把网址的链接发送给你的用户了。无论通过手机访问还是PC访问,Weebly都可以给用户提供一致的使用体验。

9、后台管理

你可以在Weebly的网站管理页面,点击“统计”按钮,进入查看基本的PV和UV数据。

补充几点问题:

  • Weebly因为服务器在国外,所以速度访问可能有点慢。
  • 如果你想放到自己的服务器,可以将生成的Weebly网站另存为htm文件,再复制传送到自己的服务器。
  • 还没有自己的服务器?点击链接购买阿里云服务器,里头有张“满550减80元”的代金券。

查看本次课程的Demo站点,请点击链接。

相关文章

盘点在线代码编辑测试网站(在线编写代码网站)

对于一些前端的样式和js效果,我们非常希望可以将这些代码片段保存起来,然后分享给那些想要使用这些样式特效的人,庆幸的是,网络上已经有很多这样的网站了,今天我们就来盘点一下这些非常好用的网站。jsfid...

把CSS代码“减肥”30%后,灯具独立站加载速度快了2秒

”上个月,帮佛山李总做跨境灯具站时,技术顾问的话让他直挠头——网站刚上线,流量还没起来,就被“速度”卡了脖子。我打开Chrome开发者工具,吓了一跳:一个详情页的CSS文件有1.2MB,JS文件800...

源自codepen的25个最受欢迎的HTML/CSS 代码

Codepen是一个非常了不起的网页应用。只要电脑能够上网,你就可以创建HTML, CSS和Javascript。如果你想选择性加入PRO版本,你会得到一些非常酷的效果诸如:世界范围内的成对编程(在线...

如何编写高质量的CSS代码?(怎么编写css)

在现代Web开发中,CSS是不可或缺的一部分,它决定了网页的样式和布局。编写高质量的CSS代码不仅可以提高开发效率,还可以提升网页性能和用户体验。本文将为您分享一些有助于编写高质量CSS代码的技巧和建...

服务器搭建绿色大气的有机蔬菜食品公司网站html源码

下载HTML源码源码地址,链接:https://www.80zhan.com/code/10509.html。我看了好多html源码下载的,发现这个还不错,只需要简单注册就能下载源码了。若不想注册,可...

daisyUI - 主题漂亮、代码纯净!免费开源的 Tailwind CSS 组件库

漂亮有特色的 CSS 组件库,组件代码非常简洁,也支持深度定制主题、定制组件,可以搭配 Vue / React 等框架使用。关于 daisyUIdaisyUI 是一款极为流行的 CSS UI 组件库,...