1+X证书项目专项第一讲

208 阅读2分钟

一、网站介绍

1、概念

网站(Website)是指在因特网上根据一定的规则,使用HTML(标准通用标记语言下的应用)等工具制作的用于展示特定内容相关网页的集合。

2、出现形式

PC端网站、移动端网站 APP形式 小程序形式

二、网站组成

1、网站组成

web页面+服务器+域名+数据库 web页面分前端页面和后端页面 例如后端页面.net、php、jsp等 (目前技术使用的是前后端分离)

2、公司人员开发分布

20220417-1.jpg

三、基于前后端分离的项目流程

  • 需求分析(产品经理)
  • UI设计(UI+产品+前端)
  • 方案确认审核
  • 方案设计+备案信息+洽谈(产品+CTO+市场+构架)
  • 制作(前端+UI+后台+构架)
  • 内侧(前端+构架+后台)
  • 上线测试(甲方+乙方+前端+构架+测试+后台)

四、网页组成:结构层、表现成、行为层

基础知识讲解

1. 结构层:html(wxml)

HTML是Hypertext Markup Language的英文缩写,即超文本标记语言,它是构成web页面的主要工具。
组成基本单位为标记,标记组成如下: <标记名称 属性="值">内容</标记名称>
例如:<font size="7">文字标记<font/>

2、表现层:css(wxss)

CSS(Cascading Style Sheet),中文为层叠样式表,它用于控制网页样式并允许将样式与网页内容分离的一种标记性语言。
组成的基本单位为标记选择器,组成如下:
.类别名称{属性:值,属性:值......}
例如:.bg{background-color:"#ff0000",color:"#0000ff"}
引入方式:<link rel="stylesheet" href="../css/public.css">

3、JavaScript行为层

js行为层:网站全栈工程师js相关技术要求。
原生js、js类库 jquery zeptojs、 前端框架boostrap amaze ant design、 前端自动化构建 nodejs grunt gilp webpack
引入方式:<script type="javascript/text" scr="路径"></script>

五、环境搭建[搭建物理环境]

在本地C盘或者D盘建立文件夹1+X > juejinwang(可以写成自己的英文名字或者名字缩写) > css.img.js.文件

20220417-2.jpg

六、基础文件建立

1、打开Visual Studio Code软件(中文),点击上方栏中的文件

20220417-3.jpg

2、点击打开文件夹(快捷方式为Ctrl K Ctrl O),选择上一步建好的站点juejinwang文件

20220417-6.jpg

3、点击JUEJINWANG新建文件,命名为index.html

20220417-5.jpg

七、主页信息

1、在工作区打HTML,会出来HTML:5这个提示,点击HTML:5

20200417-7.jpg

2、点击左方框css,在点击新建css,命名为index.css ;在新建一个css,命名为public.css

20220417-10.jpg 在点击index.html,添加两个css,在<head>里面,即<title>下方打出<link type="text/css" rel="stylesheet" href="css/public.css"><link type="text/css" rel="stylesheet" href="css/index.css">
必须把public放在index的上面

20220417-8.jpg

3、开发环境搭建

在网页上搜索jquery-1.12.4.min.js,并进行下载,将下载好的jquery-1.12.4.min.js文件放到js站点里面,在工作区内打 <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
点击左工作栏js,点击新建index.js文件,在工作区内打<script type="text/javascript" src="js/index.js"></script>

20220417-10.jpg

20200417-9.jpg

八、公共部分

1.将logo图放到img站点里面

logo.png

2.在主页部分写出导航栏

20220417-11.jpg

3.写public.css

20220417-12.jpg

4、最终效果图

20220417-13.jpg

第一讲结束