网页设计与网站建设完全教程(网页制作与网站建设实战教程)

网站建设 26
本篇文章给大家谈谈网页设计与网站建设完全教程,以及网页制作与网站建设实战教程对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 学习网站设计与制作应该怎么做? 要想学做网页,首先得了解制作网页的工具。 制作网页主要有以下一些工具 Frontpage:office自带的一个工具,操作简单,实用,学起来比较轻松,功能不咋地Dreamweaver:这是网页三剑客之一,专门制作网页的工具,可以自动将网页生成代码,是普通网页制作者的首选工具,界面简单,实用功能比较强大。建议初学者选用。

本篇文章给大家谈谈网页设计与网站建设完全教程,以及网页制作与网站建设实战教程对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。

学习网站设计与制作应该怎么做?

要想学做网页,首先得了解制作网页的工具。

制作网页主要有以下一些工具

Frontpage:office自带的一个工具,操作简单,实用,学起来比较轻松,功能不咋地

Dreamweaver:这是网页三剑客之一,专门制作网页的工具,可以自动将网页生成代码,是普通网页制作者的首选工具,界面简单,实用功能比较强大。建议初学者选用。

另外一个工具就是代码编辑工具,例如写字本、EditPlus等,这些工具主要编辑asp等动态网页。

此外还有一些网络编程工具,javascript、java编辑器等。

网页制作也是一个比较吃香的行业,要真正做一个好的网站,还必须有良好的设计功底。所以还得学很多边缘性的软件,例如photoshop、flash等。

大型的网站往往还需要数据库的支持,所以还得懂数据库。sql、oracle等。

总之,掌握好网页制作,能独立完成一个网站的制作工作,那就不要考虑吃饭问题。随便混就好了!

网站设计八步骤

由于目前所见即所得类型的工具越来越多,使用也越来越方便,所以制作网页已经变成了一件轻松的工作,不像以前要手工编写一行行的源代码那样。一般初学者经过短暂的学习就可以学会制作网页,于是他们认为网页制作非常简单,就匆匆忙忙制作自己的网站,可是做出来之后与别人一比,才发现自己的网站非常粗糙,这是为什么呢?常言道:“性急吃不了热豆腐”。建立一个网站就像盖一幢大楼一样,它是一个系统工程,有自己特定的工作流程,你只有遵循这个步骤,按部就班地一步步来,才能设计出一个满意的网站。

一、确定网站主题

网站主题就是你建立的网站所要包含的主要内容,一个网站必须要有一个明确的主题。特别是对于个人网站,你不可能像综合网站那样做得内容大而全,包罗万象。你没有这个能力,也没这个精力,所以必须要找准一个自己最感兴趣内容,做深、做透,办出自己的特色,这样才能给用户留下深刻的印象。网站的主题无定则,只要是你感兴趣的,任何内容都可以,但主题要鲜明,在你的主题范围内内容做到大而全、精而深。

二、搜集材料

明确了网站的主题以后,你就要围绕主题开始搜集材料了。常言道:“巧妇难为无米之炊”。要想让自己的网站有血有肉,能够吸引住用户,你就要尽量搜集材料,搜集得材料越多,以后制作网站就越容易。材料既可以从图书、报纸、光盘、多媒体上得来,也可以从互联网上搜集,然后把搜集的材料去粗取精,去伪存真,作为自己制作网页的素材。

三、规划网站

一个网站设计得成功与否,很大程度上决定于设计者的规划水平,规划网站就像设计师设计大楼一样,图纸设计好了,才能建成一座漂亮的楼房。网站规划包含的内容很多,如网站的结构、栏目的设置、网站的风格、颜色搭配、版面布局、文字图片的运用等,你只有在制作网页之前把这些方面都考虑到了,才能在制作时驾轻就熟,胸有成竹。也只有如此制作出来的网页才能有个性、有特色,具有吸引力。如何规划网站的每一项具体内容,我们在下面会有详细介绍。 四、选择合适的制作工具

尽管选择什么样的工具并不会影响你设计网页的好坏,但是一款功能强大、使用简单的软件往往可以起到事半功倍的效果。网页制作涉及的工具比较多,首先就是网页制作工具了,目前大多数网民选用的都是所见即所得的编辑工具,这其中的优秀者当然是Dreamweaver和Frontpage了,如果是初学者,Frontpage2000是首选。除此之外,还有图片编辑工具,如Photoshop、Photoimpact等;动画制作工具,如Flash、Cool 3d、Gif Animator等;还有网页特效工具,如有声有色等,网上有许多这方面的软件,你可以根据需要灵活运用。

五、制作网页

材料有了,工具也选好了,下面就需要按照规划一步步地把自己的想法变成现实了,这是一个复杂而细致的过程,一定要按照先大后小、先简单后复杂来进行制作。所谓先大后小,就是说在制作网页时,先把大的结构设计好,然后再逐步完善小的结构设计。所谓先简单后复杂,就是先设计出简单的内容,然后再设计复杂的内容,以便出现问题时好修改。在制作网页时要多灵活运用模板,这样可以大大提高制作效率。

六、上传测试

网页制作完毕,最后要发布到Web服务器上,才能够让全世界的朋友观看,现在上传的工具有很多,有些网页制作工具本身就带有FTP功能,利用这些FTP工具,你可以很方便地把网站发布到自己申请的主页存放服务器上。网站上传以后,你要在浏览器中打开自己的网站,逐页逐个链接的进行测试,发现问题,及时修改,然后再上传测试。全部测试完毕就可以把你的网址告诉给朋友,让他们来浏览。

七、推广宣传

网页做好之后,还要不断地进行宣传,这样才能让更多的朋友认识它,提高网站的访问率和知名度。推广的方法有很多,例如到搜索引擎上注册、与别的网站交换链接、加入广告链等。

八、维护更新

网站要注意经常维护更新内容,保持内容的新鲜,不要一做好就放在那儿不变了,只有不断地给它补充新的内容,才能够吸引住浏览者。

网页制作教程:

FONTRPAGE的

dreamweaver的

要是在网上的话,你最好去一些论坛,你可以查一下,很多的

如何制作网页或网站

简单制作网页的方法:

工具、原料:

电脑

Dreamweaver CS5

方法步骤:

下载Dreamweaver软件。Dreamweaver是一款强大的网页制作工具。

下载好之后安装,安装后之后打开,会看到如下界面。

会看到新建里有肯多选择。html,css。这里选择html,点击之后会看到如下界面。和别的软件布局没有太大区别。

如果想输入文本。就直接可以在里面输入。如果想插入图片。可以选择插入-常用-图像。找到图片目录。就可以插入进去、如果想给文字添加链接。可以选中文字。在页面右下角链接框里输入网址。就可以了.

按F12.预览就会得到以下效果.

网站建设的基本步骤,有哪些?

一、注册网站域名。

二、根据用户的实际需求来进行服务的选择和租用性价比高的空间服务器。

三、网站设计。

在网站的整体风格和类型确定后需要根据需求设计网站,网站的图片和文字。

四、网站的前端设计。

根据客户对网站定位以及需求,有专业网页设计师来负责网站页面设计,如果客户不满意初稿可以要求修改,中间有问题可以随时咨询。

五、网站的后台搭建。

网站的整体设计就是包含前台和后台两部分,在这个后台系统当中你可以对网站进行日常维护,后台系统需要哪些功能,不同客户有不同选择。

六、网站的兼容性。

在网站上线前需要对网站兼容性进行测试,以确保良好的用户体验。

扩展资料:

网页格式:

1、静态网页。

静态网页多数为单一的超文件标示语言档案。网站建设皆倾向把动态网页静态化,之后提交百度谷歌等搜索引擎最佳化,即网站优化俗称“伪静态”。

2、动态网页。

动态网页的内容随着用户的输入和互动而有所不同,或者随着用户、时间、数据修正等而改变。动态代码的一个网站,是指它的建筑或它是如何建成的,更具体的是指用于创建一个单一的网页的代码。动态的Web页面是动态生成的代码,程序或例程拼凑块。

参考资料来源:百度百科-网站建设

网页设计课程

网页设计课程

1、课程定位和课程设计

《网页设计与制作》课程是高职电子商务专业的一门专业必修课程。本课程以图形图像处理为前导课程,本课程将从职业技术教育的特点出发,以培养学生实际动手能力为目标,使学生具备网页制作、网站规划与网站维护的专业能力和方法能力,以及培养学生的团队协作、沟通表达、工作责任心、职业规范和职业道德等综合素质和能力。作为专业的核心主干课程,使学生掌握商业网站的开发和流程,并能独立进行操作,在就业时能够成为一个合格的人才。学生毕业后可胜任网站管理员、网页设计师、网页美工师等工作岗位。

2、课程目标

本课程以学生能够网页网站开发与维护的实际工作能力为学习目标,使学生具备计算机及其它相关专业课学习和应用中所必需的网页制作与网站设计的基本知识和基本技能,形成解决实际应用问题的方法能力,为以后的学习动态网页设计课程打下基础。

3、素质目标

(1) 培养具有较强的网页设计创意思维、艺术设计素质;

(2) 培养学生在学习过程中解决困难的能力;

(3) 培养学生在学习过程中培养兴趣的能力,提高工作、学习的主动性;

(4) 培养学生理论联系实际的工作和学生方法;

(5) 培养具有高度责任心和良好的团队合作精神;

(6) 具有社会责任感。

4、知识目标

(1) 了解WEB站点的工作原理;

(2) 理解Internet、WWW、HTTP、HTML的定义,计算机网络概念和作用;

(3) 了解服务器、客户端、浏览器的概念和作用;

(4) 掌握常规网站的规划及流程;

(5) 熟练掌握HTML语言中各种标记符的运用能力;

(6) 熟练掌握Dreamweaver应用软件的使用;

(7) 理解网页中脚本语言的使用方法;

(8) 熟练开发常规静态网站。

5、能力目标

(1) 熟练掌握Dreamweaver应用软件制作网站及网页;

(2) 熟练掌握使用绝对和相对URL,创建超链接,图像链接;

(3) 掌握在网页中添加CSS的方法;

(4) 培养学生设计、制作和维护动态网站。

(5) 培养学生搜集资料、阅读资料和利用资料的能力;

(6) 能独立制定、实施工作计划。

(7) 具备检查、判断能力;

(8) 具备简单的需求市场分析能力。

6、课程内容与教学要求

第一章:个人网站的制作

【教学内容】

网络相关概念、网站需求分析、风格定位与网站欣赏、草图设计、图像相关概念、Photoshop制作网页平面效果图、 HTML语言简介、HTML语言的基本结构、HTML常用标记、Css样式表的应用。

【教学重点】

项目基础与流程设计,个人网站效果图设计与切片,HTML编辑静态页面,个人网站CSS样式表设计,网站测试。

【教学要求】

了解网站项目建设流程。

掌握个人网站效果图设计。

熟练掌握HTML编写静态页面的方法。

第二章:网页设计与制作精品课程网站建设

【教学内容】

Photoshop的综合运用, Dreamweaver的认识与基本使用方法、Dreamweaver中站点的建立与管理,插入文本、图像、表格、模板等资源,网络空间的申请与与域名的申、网站文件的上传。

【教学重点】

精品课程网站的策划方案,主页面的设计与制作,模板页的制作,效果图的切片与导出,网站后期编辑,网站的发布与测试。

【教学要求】

了解网站建设的流程、需求分析。

理解网站色彩搭配的原则。

掌握网站的建设流程及网页效果图的制作。

能够利用Dreamweaver软件设计精品课程网站。

第三章:企业类网站建设

【教学内容】

Photoshop效果图的制作, Flash动画的制作,Dreamweaver中框架、表单、图层、行为、时间轴、简单脚本语言的制作、模板的使用,Dreamweaver的综合使用。

【教学重点】

商务类网站的前期策划,效果图的设计、切片与动画的设计,网站编辑与动画设计,网页的布局及后期制作。

【教学要求】

了解企业类网站的策划过程。

进一步理解Dreamweaver建立网站及网页的流程。

掌握网站动画的设计与制作。

掌握网站的后期制作与编辑,并能够调试。

第四章:自主选题进行网站建设

【教学内容】

Photoshop效果图的制作, Flash动画的制作,HTML语言的综合运用,Dreamweaver的综合运用。

【教学重点】

网站的.前期规划(文字、图片等素材的收集与整理及使用),网站效果图的制作,网站的建立与网页的制作与编辑,网站的发布五测试。

【教学要求】

了解整个网站的建设流程。

理解制作工具(dreamweaver)的使用方法

掌握网站的制作过程及综合运用方法。

能够独立并完美地完成一个完整网站的建设工作。

7.教学模式、教学方法与手段

1、注意教学方法的灵活性,可组织学生案例教学,进行讨论、问题教学、阅读指导等。全部在实训室授课,提高学生的实践操作能力。

2、充分发挥学生的学习主观能动性。在本课程的教学过程中,注意训练学生的操作动手能力,引导学生理论联系实际,应用课本中的理论知识来解决实际操作问题。本课程的学习过程全部是基于生产过程中的教学过程。

8.课程实施课时安排

(一)课时安排与教学建议

一般情况下,每周四课时,约18周,合72课时。具体课时安排如下:

一、考核方式

本课程为考试科目,期末考试总分100分,包括以下三部分成绩:

建立过程考核与结果考核相结合的方法,强调过程考核的重要性。过程考核占60分,结果考核占40分。

1、过程考核

(1)自评、小组评价和教师评价相结合;采用绩效考核,首先学生进行自评,然后再进行小组评价和教师评价。

(2)考核点占分权重:个人作业完成情况(10%);实践操作技能(30%);学习态度(10%);团队合作精神(10%)。

2、结果考核

(1)自评、小组评价和教师评价相结合:对项目完成进行结果性考核,首先学生进行自评,然后再进行小组评价和教师评价。

(2)作品考核:项目结束要求每个小组提交全部作品及资料,根据完成情况进行考核。

(3)小组答辩:小组答辩实际上是各个项目小组对本小组学习情况及成果的总结、汇总和展示。小组答辩的内容包括小组组织过程、工作程序和步骤、学习成果与收获、取得的经验与教训、回答教师提问等。该项由老师给分。

(4)项目报告:报告包括项目描述、主要任务、设计流程、岗位技能及职责,每天的过程记录,以及项目完成后的个人总结等,每人提交一份,字数约2000字左右。该项由教师给分。

;

如何设计网站?

第一种,自己手工源码搭建:

1、国内买域名,必须实名认证,如果国内的服务器必须ICP备案

2、租服务器,一般Cenos Linux系统比较多,win系统的比较少;Nginx和Apache的个人建议Nginx,一般企业类,商城类网站源码php的占大多数,建议php5.4以上,之前的有些老了

3、添加站点设置域名:你的买域名 2设置根目录 3设置ftp 4数据库

4、编辑源代码,几乎没有从零开始的,找些免费开源的改动内容,功能不同选择不同的系统一般通用系统:PageAdmin ;论坛系统:discuz; 购物系统:ecshop;博客系统:wp;需要授权的系统需要注意授权问题,内容修改一般用deamviewer修改比较方便,如果改动很少,那就用notepad++,注:不要用windows的记事本修改,会出错,数据库文件指向一定要设置好。

5、下载xshell,安装,填写服务器ip,密码,链接,上传源码到服务器的根目录

6、设置域名解析,打开买的域名的管理后台,添加记录,填写记录类型选择A型,主机记录写www,解析线路选择默认,记录值输入服务器的ip,TTL默认10分钟

在浏览器打开域名,浏览网站。

第二种,自己手工一键搭建:

第一步:百度搜索菲尔莱斯科技,打开菲尔莱斯科技官网,免费注册您的账号,注:(生成的网站二级域名会是:账号.flspt.com)。

请点击输入图片描述

请点击输入图片描述

2

填写注册的相关信息

请点击输入图片描述

请点击输入图片描述

3

注册成功后进入后台页面,点击管理企业网站

请点击输入图片描述

请点击输入图片描述

4

填写网站标题,网站类型,进入电脑站,初次使用的用户,可以选择左上方的急速建站

请点击输入图片描述

请点击输入图片描述

5

选择适合自己的行业的模板,不同行业模板后期也可改动适应自己的需求

请点击输入图片描述

请点击输入图片描述

6

例如:选择数码、家具、家具百货栏目里的电脑类,点击使用

请点击输入图片描述

请点击输入图片描述

7

免费制作网站后,可对标题、栏目、图片进行上传编辑,点击右上方可以预览生成的网站,点击左上方网站管理进入网站后台管理。

请点击输入图片描述

请点击输入图片描述

8

后台可浏览网站数据,如需绑定自己的顶级域名,点击系统设置-网站域名,按教程进行绑定

请点击输入图片描述

请点击输入图片描述

9

网站做完后网站上方会有,您的网站试用资格将于 XXXX-XX-XX 到期,打开菲尔莱斯科技官网点击-产品介绍-开通免费站,提交后即可正常使用。

如何建立自己的网页或网站?具体步骤是什么?谢谢!

2. 搭建最简单的个人博客

在1. 购买云服务器和域名中,我们得到了云服务器的登录密码和域名的所有权,下面,我们将介绍如何利用云服务器和域名,搭建一个最简单的个人博客网站。这篇文章之后,你就可以随时随地通过浏览器访问自己的个人网站了!

以下操作以在腾讯云购买云服务器、域名为演示,并且你已经完成了域名备案。阿里云的操作方法类似,暂时不特别写文章演示了。如果你还没购买,请点击1. 购买云服务器和域名,也可以参与下面的活动:

- 腾讯云代金券领取,

- 阿里云最新优惠活动,老用户也可享受

文章看着很长,但是很容易操作。这篇文章的本质就是我们在云服务器安装了一个博客软件,然后将域名指向了云服务器可供访问而已。

2.1 配置安全组并登录云服务器

每一台云服务器都有很多端口负责对外实现不同功能的通讯(比如远程连接,传输文件,网页访问等),腾讯云的安全措施比较完备,默认将许多端口关闭,我们要安装宝塔软件(一种云服务器管理面板),就需要将端口打开,这个功能由”安全组“负责。

2.1.1 配置腾讯云服务器安全组,放行端口

云服务器和世界的通讯分为入站和出站两种,也就是接受外面输入的信息(比如我们的浏览器请求访问),和向外界输出信息(比如向外界传输网页内容),下面我们先分别下载这两个规则,再将规则导入我们的云服务器安全组。

腾讯云-宝塔面板安装-入站规则下载     

腾讯云-宝塔面板安装-出站规则下载

下载后将其保存在你喜欢的地址,这里我们保存在电脑桌面上。

下面,我们点击云服务器安全组,选择我们购买云服务器时的地域,会显示一个安全组栏目,这个栏目已经自动跟你的实例关联,我们点击栏目右边的修改规则:

- 入站规则:点击导入规则,浏览器会弹框提示选择文件,我们选择刚下载的入站规则excel表即可;

- 出站规则:点击导入规则,浏览器会弹框提示选择文件,我们选择刚下载的出站规则excel表即可;

整个流程如下面动画所示:

至此,我们已经完成安全组的设置,下面可以登录云服务器安装宝塔面板了。

2.1.2 登录云服务器

进入腾讯云控制台,点击左上角云产品云服务器,自动跳转到实例界面,你会看到自己购买的云服务器在列表上(如果没有出现,在左上角实例旁边可切换服务器地域,比如我们购买的成都)。

在云服务器栏目的右侧,点击登录,跳转到登录页面,这时候只需要粘贴我们在1. 购买云服务器和域名中获得的登录密码,就可以实现登录。看着屏幕上一闪一闪的光标,你是第一次见到程序员的家伙事儿,但是不要害怕,它不是洪水猛兽,不过就是一个输入页面而已,就像微信聊天页面的输入框一样,只不过你是在和云服务器聊天。

2.2 安装宝塔(bt)面板并安装软件运行LNMP环境

下面我们安装宝塔面板,在上面一闪一闪的光标处,完全复制粘贴下面的命令并回车:

  yum install -y wget wget -O install.sh sh install.sh

这哗啦啦的字符串流动看着有点吓人,其实不过是一堆文字描述,来告诉你程序在下载什么东西,安装好了没有等等。这一串下来,是不是感觉自己像个程序员了==、

等待屏幕出现下面字符时,表示宝塔面板的安装已经完成,提示显示我们安装面板花了3分钟。记录这些信息(建议复制文本放在自己的文件夹里面),后续会需要通过这个信息登录宝塔面板。

  Congratulations! Installed successfully!

  ==================================================================

  Bt-Panel:

  username: r0wiopgd

  password: fa7120fd

  Warning:

  If you cannot access the panel,

  release the following port (8888|888|80|443|20|21) in the security group

  ==================================================================

  Time consumed: 3 Minute!

如果你安装遇到问题,可以去宝塔官网查看安装说明。

上一步得到了下面的信息:

- 宝塔面板登录地址;

- 登录用户名;

- 登录密码;

下面我们根据这些信息,登录宝塔面板后台,在浏览器中打开登录地址,填写用户名密码:

进入面板后,网页会自动跳出来一个弹框,显示推荐安装套件,我们选择LNMP(推荐),记得将php的版本从PHP5.6改成PHP7.3,点击一键安装,这里针对LNMP的含义稍微解释一下:

- ”L“: 指Linux系统,这个我们在购买云服务器的时候已经安装了CentOS这个Linux系统分支;

- ”N“: 指Nginx,是一个网页服务器软件,是它将我们的网站程序变成了网页文件供我们浏览;

- ”M“: 指Mysql,是一个数据库软件,我们网站要运行,网站程序一般是写死的,然后程序从数据库读取数据显示给人看,这样的话一旦数据有变动不需要重新编写软件,而只需要程序读取变化的数据就行了。比如微信聊天,微信这个程序是写死的,而你的聊天信息是放在数据库里面的,微信从数据库读取别人发给你的聊天信息,然后显示在你的手机里;

- ”P“: 指PHP编程语言,因为我们后面要装的WordPress博客软件是用php写的,所以需要安装这个语言让计算机能够识别。这就像我们在大学可能学过C++,用C++写出来的代码需要C++这个语言包来支持运行一样。这里我们选择PHP7.3,因为WordPress博客软件官方推荐我们使用最新版的PHP语言。

- phpMyAdmin:这是数据库管理软件,WordPress程序将我们的数据存放在Mysql这个数据库软件中,有时候需要手动改数据库,但是Mysql对普通人比较难上手,就用phpMyAdmin来管理。简单点说,phpMyAdmin相当于云服务器上的Excel软件,能查看,修改网页数据。

下面是操作动画,等画面中显示任务为空就说明环境安装完成了。动画我加速了一下方便大家看,总体时间大概花了7,8分钟。

2.3 一键部署WordPress网站程序

软件运行LNMP环境安装完成之后,我们终于要开始安装WordPress这个网站程序了。这个程序非常出名,有数据统计WordPress驱动着世界上30%以上的网站。它以博客程序起家,现在功能十分完善,不仅可以用来搭建个人博客,还能做图片展示,新闻网站,论坛系统,外贸企业官网等等。

我们点击宝塔面板左边的软件商店一键部署选择WordPress,跳出下面的弹框。其中,

- 域名: 填写你购买的域名,比如你购买了yigehaomingzi.com(一个好名字),那就填上去。意思是当服务器接收到浏览器请求访问yigehaomingzi.com,服务器会把网站根目录下面的网页文件传输给服务器。这里我因为没有其他备案的域名,使用一个子域名yanshi.jiqianhanre.com作为演示。

- 备注: 可以不填;

- 根目录: 自动生成,不用更改;

- 数据库: 这是面板随机生成的数据库用户名和密码,你也可以自己设置。记录这两个信息,后续需要把信息告诉WordPress程序,让它知道自己要把信息存到这个数据库里面,网站程序才能运行;

下面是动画演示,WordPress部署完成之后,网页会再次弹框告诉你之前的数据库信息(数据库名和数据库用户名自动设置是相同的),如果你前面没保存这些信息,现在复制粘贴到自己的文档里面。

2.4 设置域名指向云服务器

现在我们已经完成云服务器端的所有设置,可以将宝塔面板关闭了。

到目前为止,我们还没对域名做任何操作,当我们再浏览器输入yanshi.jiqianhanre.com的时候,浏览器并不知道我们到底要访问哪个云服务器,所以它会提示“无法访问此网站,找不到xxx的服务器ip地址”。

这时候我们就需要对域名进行设置,让浏览器知道它应该找哪台服务器。服务器有一个唯一的ip地址,我们在域名商那里进行设置,这个过程叫做域名解析。我的域名在阿里云购买的(所以我知道域名和服务器不在同一家厂商备案的苦),下面动画演示下。登录后进入阿里云控制台,左上角选择云解析DNS(如果你是第一次进入可能得仔细找一找,在域名与网站栏目下面),进入域名列表,选择我们购买的域名,这里我选择本网站域名jiqianhanre.com,为其添加子站点yanshi.jiqianhanre.com的解析记录。点击添加记录,选择添加A记录:

- 主机记录: 这里我填写“yanshi”,意思是为yanshi.jiqianhanre.com添加解析记录。你们不一样,这里需要填写“@”或者什么也不填,表示是为自己购买的主域名添加解析记录;

- 记录值: 填写云服务器的公网ip地址,这个可以去腾讯云的控制台复制过来;

- TTL: 默认就行,不用管它;

此外,你们还可以为自己的域名添加CNAME记录,假如你购买了域名yigehaomingzi.com,这样做可以使浏览器在访问的时候自动跳转到yigehaomingzi.com,保证网站域名的一致性。

基本上等个五六分钟,域名解析就可以设置完成。从现在开始,当你在浏览器中输入自己的域名的时候,浏览器就知道自己要去找哪个云服务器要网站了。

腾讯云域名解析

腾讯云的域名解析方法类似,登录腾讯云控制台, 点击左上角云产品域名与网站云解析,跳转到域名列表。下面动画中因为我没有在腾讯云购买域名所以是空白的。剩下的域名解析环节参照前面阿里云的域名解析即可。

2.5 恭喜你!网站已经上线

好了,至此,我们已经在服务器端安装了WordPress博客程序,也为域名添加了解析记录,可以重新打开浏览器,输入你购买的域名,就能看到网站了!

准备好了吗?走你---》》》》》》》》》》》》

在浏览器中输入你在1. 购买云服务器和域名购买的的主域名,这里我用的是子域名yanshi.jiqianhanre.com。

YES!能访问了!不过还需要简单设置一下。我们观察到网址自动从yanshi.jiqianhanre.com跳转到了yanshi.jiqianhanre.com/wp-admin/setup-config.php,这是WordPress博客程序在运作,提示你开始进行设置。下面,为了完成WordPress网站的启动设置,我们需要准备以下信息:

- 前面步骤2.3 一键部署WordPress网站程序中的数据库名;

- 前面步骤2.3 一键部署WordPress网站程序中的数据库用户名(在我们教程中,用户名和数据库名相同);

- 前面步骤2.3 一键部署WordPress网站程序中的数据库密码;

我们点击Continue,因为绝大多数WordPress插件都是英文,翻译成中文不太容易理解,如果你后续觉得不方便,以后可以在后台设置中换成中文。当然如果你是准备做外贸网站,推荐一直使用英文,以免网站出现中文影响国外访客浏览时的用户体验。

看WordPress安装配置的过程,我们分别来讲一讲主要的两个页面:数据库信息设置页和站点信息设置页面:

数据库信息设置页:这个页面主要是告诉WordPress程序自己应该把网站数据存放在哪个数据库下面。并告诉它这个数据库的登录用户名和密码是什么,这样,WordPress就有权限存放网站数据了。

站点信息设置页:主要是填写你希望网站叫什么名字,你登录网站管理后台的用户名、密码等。这里使用程序随机生成的密码,注意复制下来保存。这里再提示一下最下面那个“Search Engine Visibility”一栏,勾选它,表示希望搜索引擎(比如百度、谷歌等)不要收录本站点,这是因为现在我们的网站还是一片白纸,我们不希望搜索引擎认为自己的站点不重要。

网站已经上线

是的,恭喜你!你的网站已经可以访问了,通过浏览器访问你的主域名,会显示下面的网页。你现在可以试试用手机浏览器打开自己的主域名,也能显示你的网站。我们已经完成了最简单的博客网站的搭建!能跟着教程做到这一步,为你自己鼓掌!下面图片的左边是电脑端的浏览器展示效果,右边是手机端的展示效果,我们的网站是自适应的,也就是随着浏览器的尺寸变化,会自动调整网站布局。

2.6 收尾工作

我们已经成功建成了一个最简单的博客网站,理论上,我们可以开始写文章,传日常生活照片了,但是为了以后的使用方便,以及网站在搜索引擎上的表现,现在来进行一些收尾的工作吧。

2.6.1 WordPress语言换成中文

这在前面说过,如果你不习惯英文,可以换成中文。再提示一下,外贸网站还是全程使用英文比较好。

我们打开网站后台(在浏览器中打开yigehaomingzi.com/wp-admin这个页面,记得把域名换成你购买的主域名),登录进去,在左边栏目中选择SettingsGeneral,跳转到设置页,在其中的Site Language中,选择最下面的中文,滑到页面底部,选择Save Changes即可。整个切换WordPress站点语言的过程如下面动画所示。

2.6.2 给网站传输加密-开通SSL

你可能已经注意到了,浏览器最上方的网址URL前面有显示“不安全”,这是因为我们在浏览器访问网站时,浏览器和服务器之间没有加密,所以访客在网站输入的信息可能会在传输过程中被窃取。这对我们普通的展示型网页影响不大,但是对于需要输入银行卡密码,交易信息的网站就很有必要。现在因为搜索引擎都比较偏爱传输有加密的网站,所以我们就给网站传输加密吧,不花一分钱!

现在我们的网站url是(),下面我们通过给网站访问嵌套一层SSL,让网站url变成。

首先,使用我们在2.2 安装宝塔(bt)面板并安装软件运行环境中保存的登录信息,登录宝塔面板,在面板左侧点击网站,选择列表中我们刚建立的网站,浏览器自动跳出一个弹框,我们选择左边的SSL,选择Let's Encrypt,并选择文件验证,勾选我们的域名,点击申请,此时浏览器弹出一个黑色的命令提示框,提示我们SSL部署的进度。

等待30秒左右,提示SSL已部署成功,我们再点击右上角的强制HTTPS,强制所有指向云服务器的网页流量都经过访问。这里简单说明一下Let's Encrypt,它给全球网站提供免费加密服务,缺点是每3个月要为网站申请一次加密证书。幸好,宝塔已经帮我们提供了自动续签服务,这样设置完成之后,我们就可以不管它了。

现在我们访问我们的网站,在url前面就会显示小绿锁了,显示站点连接是安全的。下面,我们还需要在站点后台对站点url进行设置。

网站部署SSL之后更改站点地址(URL)

因为我们网站安装之时未开启SSL,WordPress自动将我们的站点地址设置成了,这导致我们后续上传图片等媒体文件时,自动将图片url设置成http而非https**,导致有图片的页面浏览器显示不安全。

为了解决这个问题,我们到网站后台,点击设置常规,将里面的WordPress地址(URL)和站点地址(URL)均改成https开头。

2.6.3 更改网页固定链接样式-LNMP环境下wordpress程序站点伪静态

WordPress后台的设置页面有一个固定链接,这里我们可以指定我们撰写文章后文章网址url的样式,一般为了站点美观以及搜索引擎优化,我们选择下面文章名这种样式,点击保存更改。

对于运行Nginx的网页服务器,我们直接更改固定链接会出现WordPress网站只能访问首页的问题(所有其他页面都显示404 Not Found),有很多人就掉进了这个坑。为了解决404Not Found的问题,我们需要设置站点伪静态来解决这个问题。

“站点伪静态”这个名字不太容易理解。意思是我们的WordPress程序是一个动态程序,它每接收一次浏览器访问请求,都会去数据库中查询数据,所以是个动态的过程。静态程序不一样,都是写死的网页,比如一个纯粹的网页文本。“伪静态”的意思,就是开通这个服务之后,可以让动态网页程序表现地像静态网页一样(对我们来说主要就是网页url能够自由设置),便于搜索引擎抓取。

登录宝塔面板后,在左边栏选择网站,选择我们的网站,在浏览器弹框中选择伪静态,左上角选择wordpress,点击保存即可。我们重新刷新下之前无法访问的网站,发现已经可以访问了。

2.6.4 WordPress网站后台的基本设置

我们还需要对网站后台进行一些基本设置,保证后续的使用体验。

删除无用的插件

使用2.3 一键部署WordPress中保存的登录信息,登录网站后台(如yigehaomingzi.com/wp-admin),点击左边的插件已安装插件,删除其中的你好多莉,这是个开发人员的情怀插件,没什么用。

启用Akismet拦截垃圾评论

当我们的网站上线后,会有很多机器爬虫自动在我们网站上留言垃圾留言,如果不设置Akisment,我们每天删除这些留言都得费些功夫。

在插件已安装的插件页面,点击Akismet Anti-Spam下面的启用,网站会自动跳转到Akismet的激活页面,点击Set up your Akismet account按照网页提示激活服务即可。

选择PERSONAL版本的就够用了,他自动跳出来让你按意愿支持点钱,可以选择0元。

填写网站标题和副标题

在2.5 恭喜你,网站已经上线那一节,我们已经设置了网站标题,我们在这里可以进行更改,在网站后台,点击设置常规,填写站点标题和副标题,滑到最下方点击保存更改即可。

安装WP Acceleration for China插件-解决WordPress网站国内访问慢的问题

因为WordPress内置了一些谷歌的服务以及Gravatar的头像服务,而中国大陆是将这些服务屏蔽的,所以我们打开网站的速度会比较慢。下面我们通过下载一个插件“WP Acceleration for China”来解决这个问题。这个插件的功能就是将这些被屏蔽的服务替换成了国内能访问的服务镜像。

在网站后台,我们进入插件安装插件,搜索WP Acceleration for China,等出现结果后,点击现在安装,待安装完成,点击启用即可。

最近WordPress网站抽风,经常拒绝国内的访问,可能会提示安装失败:下载失败。Too Many Requests:

这个时候不要慌,我们可以多试几次,我多试了两次,安装成功。如果还是不行,请登录插件下载页面(),将插件先下载到本地电脑桌面,然后通过上传插件功能完成安装,安装之后点击启用,启用之后无需其他操作。如果你的电脑不能访问上面的网址,多试几次。如果还是不行,那就挂上番强(谐音)软件再试试,FQ软件下面我有一个推荐的,可以点击购买使用,买15块钱一个月的就行。希望大家在外网不要被所谓的民主自由带偏了,国外的媒体也都不是什么天使大姐,都是吃资本饭的。你也知道,资本是会吃人的。

番强服务推荐

这时候我们再用浏览器访问自己的网站(按Ctrl+F5强制刷新),会发现速度快了很多。

2.7 总结

这篇文章,我们通过自己购买的云服务器和备案后的域名,成功搭建了一个最简单的个人博客网站。我们首先登录云服务器,安装了服务器管理面板(宝塔bt面板)。然后通过宝塔面板安装了博客程序所需要的运行环境(LNMP环境),并且使用宝塔面板一键部署了WordPress博客程序。接着,我们通过域名解析,将自己购买的域名指向云服务器,实现了域名的访问功能。最后,我们设置安装了WordPress程序,完成了个人博客网站的搭建。

直观地看,在搭建个人网站的流程中,我们做了以下的事情:

步骤                          需要这些信息      得到这些信息   

2.1 配置安全组并登录云服务器            云服务器登录密码*  -       

2.2 安装宝塔(bt)面板并安装软件运行LNMP环境 云服务器登录密码    宝塔面板登录用户名密码

2.3 一键部署WordPress网站程序      宝塔面板登录用户名密码 数据库用户名密码 

2.4 设置域名指向云服务器              域名管理权*      -       

2.5 恭喜你!网站已经上线              数据库用户名密码    后台登录用户名密码

2.6 收尾工作                    后台登录用户名密码  -       

*云服务器和域名是我们在第一篇1. 购买云服务器和域名中获得的信息。

在这系列建站教程中,我们总共有4篇文章介绍普通人如何从0到1搭建个人网站:

1. 购买云服务器和域名

2. 搭建最简单的博客网站

3. 发布第一篇博客文章

4. 个性化自己的网站

现在访问我们的域名,展现的是WordPress预设的博客网站,里面只有一篇自动生成的文章。下一篇,我们会给网站添加自己的文章,一起进入3. 发布第一篇文章吧!

【若图片及演示gif动画无法打开,请点击本文原始地址-几千寒热】

网页设计与网站建设完全教程的介绍就聊到这里吧,感谢你花时间阅读本站内容,更多关于网页制作与网站建设实战教程、网页设计与网站建设完全教程的信息别忘了在本站进行查找喔。

网页设计与网站建设完全教程 网页设计与网站建设实例教程网页设计与网站建设从入门到精通网页设计与网站建设期末考试网页设计与网站建设考试网页设计与网站建设书网页设计与网站建设课后答案网页设计与网站建设期末考试答案网页设计就是网站建设是同一个概念电子商务网站建设与网页设计医疗网站建设与网页设计
扫码二维码