网页开发_网页开发工具 - CSDN
精华内容
参与话题
  • web网页开发

    千次阅读 2018-09-19 11:31:24
    这里主要总结,web网页开发,即我们经常所看见的淘宝,新闻等网页。我们将一个所见的网页中每次刷新不变的部分,称为静态。这些静态由HTML和CSS组成,他们形成了网页的样式。HTML是一种标记语言,用来结构化我们的...
    这里主要总结,web网页的开发,即我们经常所看见的淘宝,新闻等网页。我们将一个所见的网页中每次刷新不变的部分,称为静态。这些静态由HTML和CSS组成,他们形成了网页的样式。HTML是一种标记语言,用来结构化我们的网页内容和赋予内容含义(形成树形结构),例如定义段落、标题、和数据表,或在页面中嵌入图片和视频。CSS 是一种样式规则语言,例如设置背景颜色和字体,内容的排版,然后我们将这些样式应用于我们的HTML。

    可参考教程:MDN


    一个简单的HTML文件人下所示:

    <!DOCTYPE html>
    <html>
    	<head>
    	/*head主要有HTML的标题,指定你的文档中字符的编码,作者和描述,在HTML中应用CSS和JavaScript等	*/
    		<meta charset="UTF-8">
    		<title></title><!--标题-->
    		<link rel="stylesheet" type="text/css" href="css/css.css"/><!--引用外部css-->
    		<style type="text/css">/*使用内部CSS*/
    			.hello{
    //    设置class=hello的样式
    				color: red;
    			}
    		</style>
    	</head>
    	<body>
    	//body是HTML的主要内容,描述了页面的结构。
    		<h1>hello</h1>
    		<div class="hello">	
    		</div>
    	</body>
    	<script src="js/main.js" type="text/javascript" charset="utf-8"></script><!--引用外部js-->
    	<script type="text/javascript">/*使用内部js*/
    		var hello=document.querySelector(".hello");<!—采用DOM的API,引用html中的元素-->
    		var newhello=document.createElement("button");<!--新建html中的元素-->
    		newhello.textContent="botton";//设置这个元素的属性以及内容
    		hello.appendChild(newhello);<!--在元素后面新插入元素-->
    		newhello.onclick()=function (){
    			/*onclick 为鼠标点击事件
    			 鼠标点击时,触发事件,运行后面的函数function*/
    		}
    		function hanshu (){
    //			单独的函数
    		}
    	</script>
    </html>
    
    
    如果说HTML和css帮助我们完成了页面上的样式的设计,那么JavaScript就帮助我们完成与用户之间的交互,如用户点击,滑动,输入等。Js(JavaScript的简称)是一种编程语言,允许你创建动态更新的内容,控制多媒体,图像动画,和一些其他的东西。JS通过对HTML上元素的引用对网页上产生的事件(浏览器中发生的动作,例如点击按钮,加载页面或播放视频)进行响应。

    大多数现代的web站点是动态的—它们在服务端使用各种类型的数据库来存储数据(服务器), 之后通过运行服务器(server-side) 代码来重新获取需要的数据,把其数据插入到静态页面的模板中,并且生成出HTML渲染到用户浏览上。为此使用HTTP/HTTPS协议在 Web 上进行数据交换,并在数据传输的过程中需经过DNS和TCP/IP 协议。它是client-server协议。客户端和服务端通过交换各自的消息(与数据流正好相反)进行交互。由像浏览器这样的客户端发出的消息叫做 requests,被服务端回应的消息叫做
    responses。它是应用层的协议,通过TCP(HTTP),或者是TLS(加密的TCP ,HTTPS)连接来发送。

    举个例子:
    当你在浏览器里输入一个网址时(在我们的例子里就是走向商店的路上时):

    1. 浏览器在域名系统服务器(DNS)上找出存放网页的服务器的实际地址(IP地址)(找出商店的位置)。
    2. 浏览器发送 HTTP 请求信息(数据的传输遵守TCP/IP 协议)到服务器来请拷贝一份网页到客户端(你走到商店并下订单)。
    3. 服务器同意客户端的请求后,会返回一个“200 OK”信息,同意传输,然后开始将网页的文件以数据包的形式传输到浏览器。
    4. 浏览器将数据包聚集成完整的网页然后将网页呈现给你。

    这样一个简单的网页就完成了,但是在实际过程中,仍会许多问题。比如:HTTP是无状态的:在同一个连接中,两个执行成功的请求之间是没有关系的。这就带来了一个问题,用户没有办法在同一个网站中进行连续的交互,比如在一个电商网站里,用户把某个商品加入到购物车,切换一个页面后再次添加了商品,这两次添加商品的请求之间没有关联,浏览器无法知道用户最终选择了哪些商品。再比如:如果传输的数据较多,较大,那么每次交互时,均重新请求时,用户需等待较长时间,体验不好。为解决这些问题,开发人员们设计了AJAX,缓存,web worker,CORS等技术。


    Asynchronous JavaScript and XML(Ajax):异步,指无需重新加载整个页面的情况下,只更新部分页面的技术。主要是通过XMLHttpRequest ()(通常缩写为XHR)或 Fetch()来请求。为了进一步提高速度,有些网站还会在首次请求时将资产和数据存储在用户的计算机上,这意味着在后续访问中,他们将使用本地版本,而不是在首次加载页面时下载新副本。 内容仅在更新后从服务器重新加载。XHR允许你使用它的 onload 事件处理器来处理这个事件 — 当onload 事件触发时(当响应已经返回时)这个事件会被运行。
    image
    AJAX代码:

    var request = new XMLHttpRequest();
    request.open('GET, url);
    request.responseType = 'text';//XHR默认返回文本,可修改格式
    request.onload = function() { 
    var.textContent = request.response;//返回 };
    request.send();
    
    

    与XHR不同,fetch()返回一个解析HTTP响应的promise,它将解析从服务器发回的响应。我们使用then()来运行一些后续代码,这是我们在其内部定义的函数。这相当于XHR版本中的onload事件处理程序。
    Fetch代码:

    fetch(url).then(function(response) {
    response.text().then(function(text)
     {//text() 也返回了一个 promise 
    var.textContent = text;
    }
    }
    
    

    对于前面所说的,将资产和数据存储在用户的计算机上,主要才采取cookie,sessionStorage和 localStorage。这些参数均可在浏览器的开发者模式中application中查看。Cookie可以采用http头部扩展的方式,把Cookies添加到头部中,创建一个会话让每次请求都能共享相同的上下文信息,达成相同的状态。注意,HTTP本质是无状态的,使用Cookies可以创建有状态的会话。sessionStorage,只要浏览器开着,数据就会一直保存 (关闭浏览器时数据会丢失)。localStorage,一直保存数据,甚至到浏览器关闭又开启后也是这样。每个域都有一个单独的数据存储区,无法交错使用。Session,由于HTTP协议是无状态的协议,所以服务端需要记录用户的状态时,就需要用某种机制来识具体的用户.典型的场景比如购物车,当你点击下单按钮时,由于HTTP协议无状态,所以并不知道是哪个用户操作的,所以服务端要为特定的用户创建了特定的Session,用用于标识这个用户,并且跟踪用户,这样才知道购物车里面有几本书。这个Session是保存在服务端的,有一个唯一标识。Session是在服务端保存的一个数据结构,用来跟踪用户的状态,这个数据可以保存在集群、数据库、文件中;
    Cookie是客户端保存用户信息的一种机制,用来记录用户的一些信息,也是实现Session的一种方式。

    如果你的网站需跨域,去获取资源,则需要使用CORS(Cross-Origin Resource Sharing)技术。这是HTML5定义的如何跨域访问资源的方法。Origin表示本域,也就是浏览器当前页面的域。当JavaScript向外域(如sina.com)发起请求后,浏览器收到响应后,首先检查Access-Control-Allow-Origin是否包含本域,如果是,则此次跨域请求成功,如果不是,则请求失败,JavaScript将无法获取到响应的任何数据。
    假设本域是my.com外域是sina.com,只要响应头Access-Control-Allow-Origin为http://my.com,或者是*,本次请求就可以成功。
    可见,跨域能否成功,取决于对方服务器是否愿意给你设置一个正确的Access-Control-Allow-Origin,决定权始终在对方手中。

    展开全文
  • 8小时学会HTML网页开发

    万人学习 2020-07-21 20:06:50
    一说学网页,学编程,大家都下意识觉得要"吃苦","熬夜",哪有那么复杂,一定是你看错了教程. 挑一个阳光的午后,关掉手机,用6个小时,看看十八哥如何把一个公司的保安教会HTML,Div,CSS的. 课程共8小时,57小集,轻松一点,你...
  • 教你写一个简单的网页(html网页开发入门)

    万次阅读 多人点赞 2017-10-16 15:02:49
    网页的组成 HTML  网页的具体内容和结构 CSS  网页的样式(美化网页最重要的一块) JavaScript  网页的交互效果,比如对用户鼠标事件作出响应 HTML 什么是HTML HTML的全称是...

    网页的组成

    HTML 
    网页的具体内容和结构

    CSS 
    网页的样式(美化网页最重要的一块)

    JavaScript 
    网页的交互效果,比如对用户鼠标事件作出响应

    HTML

    什么是HTML

    HTML的全称是HyperTextMarkupLanguage,超文本标记语言 
    其实它就是文本,由浏览器负责将它解析成具体的网页内容

    比如,浏览器会将下面的HTML代码

    <ul>
        <li>知乎</li>
        <li>CSDN</li>
        <li>博客园</li>
    </ul>
    • 1
    • 2
    • 3
    • 4
    • 5

    转化为 
    知乎 
    黑马 
    CSDN 
    的网页内容

    HTML的组成

    跟XML类似,HTML由N个标签(节点、元素、标记)组成

    HTML语法非常松散

    常见的HTML标签

    • 标题:h1,h2,h3,h4,h5…
    • 段落:p
    • 换行:br
    • 容器:div,span(用来容纳其他标签)
    • 表格:table,tr,td
    • 列表:ul,ol,li
    • 图片:img
    • 表单:input
    • 链接:a 
      推荐开发工具(网络三剑客)dreamweawer、flash、fireworks;WebStorm.
    <html>
        <!-- 网页的标题、图标... -->
        <head>
            <mate charset="utf-8">
            <title>第一个网页</title>
        </head>
        <!-- 网页的具体内容 -->
        <body>
            这是网页的内容
            <a href="http://www.baidu.com" target="_blank">百度</a>
    
            <h1>666666666</h1>
            <h2>666666666</h2>
            <h3>666666666</h3>
            <h4>666666666</h4>
            <h5>666666666</h5>
    
            <p>ppppppppppp</p>
    
        <div>
            <p>ppppppppppp</p>
        </div>
    
            <ul>
                <li>hahaha</li>
                <li>hahaha</li>
                <li>hahaha</li>
            </ul>
    
            <ol>
                <li>ahahah</li>
                <li>ahahah</li>
                <li>ahahah</li>
            </ol>
    
        <img src="text.png">
        </body>
    </html>
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38

    CSS

    什么是CSS

    CSS的全称是Cascading Style Sheets,层叠样式表 
    它用来控制HTML标签的样式,在美化网页中起到非常重要的作用

    CSS的编写格式是键值对形式的,比如

    color : red 
    background-color : blue 
    font-size : 20px 
    冒号左边的是属性名,冒号右边的是属性值

    CSS三种书写方式

    • 行内样式:(内联样式)直接在标签的style属性中书写
    <span style="color:red;background-color:red;">123</span>
    • 1
    • 内页样式:在本网页的style标签中书写
    <span>123</span>
    <style type="text/css">
        span {
            color:yellow;
            background-color:blue
        }
    </style>
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    外部样式:在单独的CSS文件中书写,然后在网页中用link标签引用 
    test.css

    span {
            color:yellow;
            background-color:blue
        }
    • 1
    • 2
    • 3
    • 4

    test.html

    <span>123</span>
    <link rel="stylesheet" herf="test.css">
    • 1
    • 2

    CSS选择器

    选择器的作用

    选择对应的标签,为之添加样式

    标签选择器 根据标签名找到标签

    类选择器 标签可以有多个类

    id选择器 id是唯一的,不能一样

    选择器组合 中间不留空格,粘在一起

    后代选择器 中间一个空格,不管嵌套多少层

    相邻兄弟选择器

    属性选择器

    <html>
    <head lang="en">
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            /*标签选择器*/
            p{
                color:red;
            }
            /*类选择器*/
            .first{
                color:red;
            }
            .second{
                color:blue;
            }
            /*id选择器*/
            #first{
                color:yollew;
            }
            #second{
                color:green;
            }
            /*群组选择器*/
            .first, #second, h1{
            }
            /*选择器组合*/
            div.first{
            }
            /*后代选择器*/
            div p{
            }
            /*子标签选择器*/
            div > p{
            }
            /*相邻兄弟选择器*/
            divp{
            }
            /*属性选择器*/
            div[name]{
            }
            div[name][age]{
            }
            div[name="jack"]{
            }
        </style>
    
    </head>
    <body>
        <div>
            <p>p1</p>
            <span>
                <p>p2</p>
            </span>
        </div>
        <div name="jack">div1</div>
        <div age="10">div2</div>
        <p>与div相邻的p</p>
    
        <div class="first">123</div>
        <div id="first">123</div>
    
        <p class="first second">123</p>
        <p id="second">123</p>
    
        <h1>hhh</h1>
    </body>
    </html>
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68

    伪类

    属性 描述
    :active 向被激活的元素添加样式
    :focus 向拥有键盘输入焦点的元素添加样式
    :hover 当鼠标悬浮在元素上方时,向元素添加样式
    :link 向未被访问的链接添加样式
    :visited 向已被访问的链接添加样式
    :first-child 向元素的第一个子元素添加样式
    :lang 向带有指定lang属性的元素添加样式
    :first-letter 向文本的第一个字母添加特殊样式
    :first-line 向文本的首行添加特殊样式
    :before 在元素之前添加内容
    after 在元素之后添加内容
    <html>
    <head lang="en">
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            div {
                width:100px;
                height:100px;
                background-color:red;
            }
            div:hover{
                background-color:blue;
            }
            div:before{
                content:"666";
            }
        </style>
    
    </head>
    <body>
        <div>
    
        </div>
    </body>
    </html>
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25

    选择器优先级

    针对性越强,优先级越高 
    选择器的权值 
    通配选择符(*):0 
    标签:1 
    :10 
    属性:10 
    伪类:10 
    伪元素:1 
    id:100 
    important:1000

    原则:选择器的权值加到一起,大的优先;如果权值相同,后定义的优先 
    important > 内联 > id > 类 > 标签|伪类|属性选择器 > 伪元素 > 通配符 > 继承

    CSS标签的类型

    HTML有N多标签,根据显示的类型,主要可以分为2大类

    块级标签,独占一行的标签 
    行内标签(内联标签),多个行内标签能同时显示在一行

    修改标签的显示类型

    CSS中有个display属性,能修改标签的显示类型

    属性 说明
    none 隐藏标签
    block 块级类型,独占一行,能随时设置宽度和高度
    inline 行内类型(内联类型),多个行内标签可以显示在同一行,宽度和高度取决于内容尺寸
    inline-block 行d内-块级类型(内联-块级类型),多个行内标签可以显示在同一行,能随时设置宽度和高度

    CSS属性

    CSS有N多属性,根据继承性,主要可以分为2大类

    可继承属性 
    - 父标签的属性值会传递给子标签 
    - 一般是文字控制属性

    不可继承属性 
    - 父标签的属性值不能传递给子标签 
    - 一般是区块控制属性

    CSS属性-可继承属性

    所有标签可继承 
    visibility、cursor

    内联标签可继承 
    letter-spacing、word-spacing、shite-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction

    块级标签可继承 
    text-indent、text-align

    列表标签 
    list-style、list-style-type、list-style-position、list-style-image

    CSS属性-不可继承属性

    display、margin、border、padding、background 
    height、min-height、max-height、width、min-width、max-width 
    over-flow、position、left、right、top、bottom、z-index 
    float、clear 
    table-layout、vertical-align 
    page-break-after、page-bread-before 
    unicode-bidi

    盒子模型

    网页上每一个标签都是一个盒子 
    每个盒子都有四个属性

    属性 说明
    内容(content) 盒子里装的东西,网页中通常是指文字和图片
    填充(padding,内边距) 怕盒子里装的(贵重的)东西损坏,而添加的泡沫或者其它抗震的辅料
    边框(border) 盒子本身
    边界(margin,外边距) 盒子摆放的时候不能全部堆在一起,盒子之间要留一定空隙保持通风,同时也为了方便取出
    <html>
    <head lang="en">
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            div {
                width: 100px;
                height: 100px;
                background-color: blue;
                margin-top: 20px;
                padding-top: 20px;
                border: 20px solid red;
                border: 5px dashed red;/*虚线*/
                        }
        </style>
    
    </head>
    <body>
        <div>123</div>
        <div>456</div>
    </body>
    </html>
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    内容(content)属性

    属性 描述
    height 设置元素高度
    max-height 设置元素的最大高度
    max-width 设置元素的最大宽度
    min-height 设置元素的最小高度
    min-width 设置元素的最小宽度
    width 设置元素的宽度

    填充(padding,内边距)属性

    属性 描述
    padding 在一个声明中设置所有内边距属性
    padding-bottom 设置元素的下内边距
    padding-left 设置元素的做内边距
    padding-right 设置元素的有内边距
    padding-top 设置元素的上内边距

    边框border属性

    属性 描述
    border-width 宽度
    border-style 样式
    border-color 颜色
    border-radius 圆角

    边界margin属性

    属性 描述
    margin 在一个声明中设置所有外边距属性
    margin-bottom 设置元素的下外边距
    margin-left 设置元素的左外边距
    margin-right 设置元素的右外边距
    margin-top 设置元素的上外边距
    展开全文
  • 一个正规的网站开发,理论上需要一个团队的配合,各自发挥自己的长处,网站需求分析、原型设计、效果图、切图、前台美工、后台代码、算法设计、数据库设计、服务器配置等等一系列的事情。  一个人想面面俱到这些...
    一个正规的网站开发,理论上需要一个团队的配合,各自发挥自己的长处,网站需求分析、原型设计、效果图、切图、前台美工、后台代码、算法设计、数据库设计、服务器配置等等一系列的事情。

     一个人想面面俱到这些,还是需要花些时间的。所以对一个初学者来说,我的建议是:别管他三七二十一,不是想开发一个网站吗,别管懂不懂,先开发出来一个再说,在开发的过程中,遇到了问题,再找解决方案的过程中,自己获得了学习,等完成了一个网站,乱七八糟的知识也学了一些,有了一个感性的认识,再去系统性的、深入的去学习也不晚。

      这里提供一个我的开发思路和具体实现的方法:

      开发一个网站,大概是这些东西:

      1.有个整体的网站页面的样子,我们姑且称之为前端开发。

      2.前端有了,点击里面的按钮、链接、新增信息、修改信息等等的操作,需要后台编码,姑且称之为后台开发。

      3.前端有了,后台有了,数据放哪里啊,因此需要用到数据库了,姑且称之为数据库开发。

      4.前面一通完成后,网站可以看了,接下来需要找服务器发布了,姑且称之为网站发布。

      5.网站发布了,如果想让别人通过一个域名去访问,因此需要绑定域名了,姑且称之为域名绑定。

      6.大功告成,回过头来消化一下吧。姑且称之为回味无穷。

      接下来详细介绍。(建议先通读一下,别一上来就陷入某一个细节)

      一、前端开发

      1.先拿笔找张纸,大概想想自己网站有哪些页面,每个页面是什么样子,如果没有灵感,就上网乱逛一阵,借鉴一下别人的做法。

      2.网站大概样子心中有数了,接下来要开发了,别自己从头写代码了,可以用前端框架,各种前端框架我也不对比,也别让你挑的头疼,就用bootstrap吧,网址:http://getbootstrap.com/,twitter的工程师开发的,很多网站有用,开发一个凑合的网站不成问题。说白了,就是给你提供了css、javascript文件,对于一些页面布局、javascript效果,不用自己去写了,可以直接按照官方的说明去操作。具体的说明可以看官方网站,别嫌人家是英文的,其实没有几个单词你不认识,找找先练练,找找感觉。

      3.什么?过程中遇到了html、css、javascript等等问题,不明白的话,建议上这个网站扫个盲:http://www.w3school.com.cn/,自己再练练手,知识应该就够了。

      经过前面三步,应该能够开发出来一个差不多的效果的网站了,大概用上一个星期去看吧,足够了。

      注意:前端开发的过程中不用想着后端怎么实现?例如点击一个按钮怎么实现功能?专心开发前端页面就行了。前端和后端是独立分离的,只需要很小的整合就可以了。

      二、后台开发

      1.如果前端的页面都开发好了,接下来要实现页面上一些功能性的东西了,如果注册、登陆等等功能,就要后台开发了,这里我也建议用框架,后台开发框架也是海了去了,就用Thinkphp的吧,国产的框架,还行,套路还是比较明显的。网址:http://www.thinkphp.cn/,是PHP的,什么?没有学过PHP,以前学的是C#?java?等等,别担心,学一下php也花不了多长时间,关键是一边学ThinkPHP,一边就把PHP给学了吧。如何学习ThinkPHP,可以看官方的文档就好,如果看不懂,可以看一下这个哥们的视频教程:http://www.thinkphp.cn/document/258.html,讲的还是不错的。

      2.看完视频教程还是有些不解,什么乱七八糟MVC了等等概念,不用着急,继续前进吧,可能慢慢就能理解了,谁说不理解就不能前进的,是不?

      注意:这个过程可能有点儿难,不过也还是可以接受的,学明白了,以后修改起来会比较灵活,至少感觉比wordpress灵活。

      三、数据库开发

      1.后台开发过程中,要存一下数据,难免要用到数据库,那么就安装一下mysql吧, 如果觉得不好管理,可以再安装一个可视化的工具:Navicat,需要用什么表,就建什么表吧,反正以后觉得不合适了还要修改。

      2.如果数据库一点儿也不懂,那么网上随便搜搜相关知识,大概熟悉熟悉,会建表、增减数据就行了。有些数据库操作,用ThinkPHP的框架,非常简单的,不需要自己考虑太多东西。

      注意:数据库开发是要配合着后台开发一起的。大概后台开发完了,数据库也差不多建好了。

      四、网站发布

      1.有很多托管代码的服务器,有收费的,有免费的,我就推荐一个吧,用新浪的SAE,速度还可以的,刚开始就先找一个尝试吧,等以后有时间了,可以再尝试尝试别家的。这里SAE是支持ThinkPHP的SAE版本。因此上传上去代码就能看效果了,发布后网址大概样子为:****.sinaapp.com

      2.SAE是按访问流量收费的,弄一个实名认证,会送流量的,对于刚开始的网站,足够用了;如果不放心,可以申请一个中级开发者,每个月都会赠流量。之前是微博有加V就可以申请中级开发者,微博加V传一个自己的工作照就可以了。现在我的中级开发者,有需要推荐的,我也可以帮一下忙,反正我也不怎么用。

      3.如果想本地查看,可以安装一个Apache,至于部署,也不难。

      注意:能到发布这一步,我想应该就没有什么难的了吧。虽然曾经我与新浪各种死磕,今天还是无私的为他做了广告,我代表新浪,谢谢我自己了。(请别说我调皮)

      五、域名绑定

      1.网站建好了,如果感觉****.sinaapp.com不好看,想用自己的域名,也是可以的。

      2.去godaddy申请吧,为啥是godaddy,别人都说好,我也就用了,反正我申请了两个域名,到现在都不怎么用,就当玩儿了。

       3.有域名了,就可以登陆SAE后台,绑定域名了,操作步骤,会有很详细的说明。

      六、回味无穷

      1.经过前面一系列过程,一个你认为还可以的网站应该就可以诞生了。

      2.过程中还有哪些想学的知识,可以去学习了。

      3.开发完一个网站,这一套模板可以保存下来,再开发别的网站,自己也可以用了。

      4.多年以后,你会觉得你的网站好low,不过又能如何,这也是一种人生体味而已。


    展开全文
  • 教你玩转HTML(html5)h5网页设计,网站
  • HTML5网页开发实例详解

    热门讨论 2020-07-30 23:32:27
    本书分为 14章。...第 6~12章介绍了表单、 Canvas、多媒体、地理、拖放、存储、通信、离线应用等多个方向,并给出了...本书适用于所有前端开发初学者和网页设计入门者,也可作为大中专院校及培训学校教材及上机指导用书。
  • 6款实用网页开发和设计工具

    千次阅读 2019-04-03 09:46:38
    现如今,越来越多的移动和桌面端应用开始应用HTML、JS和CSS进行开发,对于网页开发和设计更是如此。目前这种局面也催生了更多新的网页技术,包括React.js、Angular以及Node.js这样的库。此外,随着需求及项目的...

    现如今,越来越多的移动和桌面端应用开始应用HTML、JS和CSS进行开发,对于网页开发和设计更是如此。目前这种局面也催生了更多新的网页技术,包括React.js、Angular以及Node.js这样的库。此外,随着需求及项目的进一步细化,开发者社区几乎每天都会出现新的库和开发工具,作为网页开发者或设计师的你,自然很有必要去了解和掌握当下最新的、实用的工具,持续优化工作方法、有效提高开发进度。以下小编收集了一系列优秀的开发和设计工具,包括在线/离线搭站工具、开源代码工具、在线代码生成器、排版工具等,一起看看吧。


    1. WordPress – 一站式网站搭建工具

    · 价格:基础版终身免费,个人版HK$30,高级版HK$63,商务版HK$199

    · URL:https://zh-cn.wordpress.com/

    · 推荐指数:★★★★★

    WordPress – 一站式网站搭建工具

    WordPress是使用PHP语言开发的博客平台,支持PHP和MySQL数据库的服务器上架设属于自己的网站,也可以把它作为一个CMS(内容管理系统)来架设商业网站,提供的功能包括:所见即所得的文章编辑器、多作者共同写作、为搜索引擎而优化的永久链接、生成和使用静态页面、Trackback/Pingback、会员注册登录等。

    特色功能:

    · 安装方式简单、易用,内置许多搭站辅助工具,一键点击即可完成安装。

    · 插件工具众多,支持使用扩充其功能,适合DIY丰富的网站内容。

    · 第三方开发的免费模板、主题丰富,各色各样,应有尽有!

    · SEO搜索友好,收录时间快。

    · 强大的社区支持,成千上万的开发者贡献和审查WP,整个环境安全且活跃。


    2. Mockplus – 更快、更简单的Web/Mobile/Desktop设计平台

    价格:基础版免费,个人版¥199/年,团队版¥999/年,企业版¥5999/年

    URL:https://www.mockplus.cn/

    推荐指数:★★★★★

    Mockplus –更快更简单的设计平台

    作为国内势头正猛的工具软件,Mockplus(也叫摹客)适合软件团队、个人在软件开发的设计阶段使用,交互快、设计快、演示快、上手快,很好地顺应了当前敏捷开发(AgileDevelopment)的大趋势。同时,秉承“关注设计,而非工具”的理念,摹客提供一系列独家实用的功能,帮助用户提高工作及开发进度。

    特色功能:

    界面设计。组件开箱即用,提供项目和页面模板、自定义组件库、母版、组件样式、格子、自动数据填充,让设计快速复用。
    团队协作。支持团队管理、角色设定和分组,可协作设计、分工编辑、多人审阅和评论、支持Sketch导入。
    交互设计。拖拽鼠标即完成交互设计,支持页链接、组件交互、交互状态、交互自动还原。
    工作文档。多种批注组件添加设计说明、页面流程图快速呈现业务逻辑,脑图模式快速构建页面关系。
    演示分享。随时发布分享,提供8种演示方式,支持HTML在线预览和离线包等多种导出方式。


    3. Macaw – 革新性超前Web编辑器

    · 价格: 免费

    · URL:http://macaw.co/

    · 推荐指数:★★★★

    Macaw – 革新性超前Web编辑器

    Macaw是目前最热门的开发工具之一,被网友戏称为“金刚鹦鹉“。它是一款基于Mac平台、支持语义HTML和简洁CSS的Web开发软件,可生成多分辨率页。同时它也可以作为设计师的图像编辑工具,提供实时的布局引擎,让元素以类似AdobePS中的呈现方式进行操作,通过编辑当前的网页图片,最后生成HTML模板和JS代码。

    特色功能:

    · 特定宽度功能,可以自动计算每行字符个数,也支持用户指定的宽度,生成自适应网页布局。

    · 组件库功能,支持将自己设计的组件收藏和保存到库,并拖拽到任意页面中。

    · 不同组件类别,可自己设计或者保存到指定的类别,并将它们快速应用到整个文档。

    · 具备流计算所有必要的属性(漂浮、清除等),并将元素作为静态文件流。


    4. Weebly – 主流Web开发及设计服务商

    价格:基础版免费,个人版8美金/月,Pro版12美金/月,商务版25美金/月

    URL:https://www.weebly.com/

    推荐指数:★★★★

    Weebly – 主流Web开发及设计服务商

    作为美国本土的一家自助建站服务商,Weebly使用了大量的Ajax技术,在操作性、用户友好等方面做得很好,同类型的服务商还有Webs,Yola等,但像Weebly这样针对中国用户单独增设中文网站的比较罕见。

    特色功能:

    · 拖拽实现编辑,无论是视频、图片、地图和文章都能拖拽到网站中,无需HTML或其他网页程序语言的支持,简单且直观。

    · 专业模板设计直接使用,目前已有70个、且在持续增加中,如果懂HTML/CSS,可以直接用它们的编辑器来定制。

    · 允许绑定个人的顶级域名,而且是绑定域名是免费的,直接提供IP地址即可,也可以在Weebly上购买域名。


    5. Adobe Dreamweaver – 最权威的网页开发及设计工具

    价格:个人版$9.99-$82.99/月,商务版$33.99-$79.99/月

    URL:https://www.adobe.com/products/dreamweaver.html

    推荐指数:★★★★

    Adobe Dreamweaver – 最权威的网页开发及设计工具

    相信不少做开发和设计的小伙伴对DW这款软件并不陌生,它是集网页制作和管理网站于一体的WYSIWYG网页代码编辑器,通过使用HTML、CSS、JavaScript等语言,程序员和设计师几乎可以在任何地方快速制作和上线网站。支持Windows和Mac操作系统,对刚入门初学者或者需要进阶的大神来说都是不错的选择。

    特色功能

    · 自适应网格,可使用CSS3自适应网格版面,创建跨平台和浏览器的兼容网页设计,采用符合业界标准的代码为各种不同设备和计算机开发项目。

    · 实时视图,支持再发布前测试页面,采用最新版WebKit转换引擎,提供绝佳的HTML5支持。

    · “多平面预览”面板,支持为智能手机、Tablet和个人计算机进行设计,开发人员也可以通过其为各种设备设计样式并实现渲染可视化。


    6. 摹客iDoc - 更高效的协作设计平台

    价格:免费版;团队版16元/人/月;企业版报价

    URL:https://idoc.mockplus.cn

    推荐指数:★★★★★

    摹客iDoc
    摹客iDoc是一个专业的产品设计协作平台,其主要用户人群涵盖产品经理,设计师和工程师。原型图,设计稿,开发交付,都是产品过程中不可缺少的环节,但这每一环的交付,都伴随着沟通难、协同难、效率低的问题。摹客iDoc针对这些痛点,为产品团队提供更快更简单的产品设计协作解决方案,从产品到开发,只需一份文档,其核心功能点包括:智能标注、一键切图、多样批注、交互原型、全貌画板、团队管理。

    特色功能

    · 自动标注和切图 ,工程师可以自动动下载全部切图,且支持下载压缩,各种尺寸适配自动呈现;网页设计师彻底解放双手,告别手动标注,自动生成页面标注。

    · 代码导出,一键复制属性值,样式代码自动导出。
    · 高效协作,网页设计过程中的参与人员全部聚集到一个平台,从设计到开发,只需要一份文档。

    福利:

    为了更好地体验,可以免费获赠iDoc协作版3个月,地址:https://idoc.mockplus.cn


    结语

    以上是小编力荐的网页开发和设计工具,显而易见每款工具都各有千秋,我们可以结合实际的开发需求和项目支持来做进一步选择:如果你拥有不错的开发基础、且想自己编代码来搭站,那么Macaw和DreamWeaver都是不错的选择;如果你是开发新手或者小白、更需要完全成形的三方平台来搭建网站,那么WordPress和Weebly都可以考虑;如果你更在意开发效率、网站功能以及资金预算,那么Mockplus是不二之选!

    展开全文
  • 如何快速的开发网页

    千次阅读 2019-06-07 21:49:31
    如何快速的开发网页 开发工具与关键技术:Visual Studio 2015 如何快速的开发网页 作者:李国旭 撰写时间:2019年6月7日 那么我们首先可能会想到用插件,因为插件可以帮助我们快速地开发网页等这些方面的设计,但是...
  • WEB前端后端简单区别,通俗理解

    万次阅读 多人点赞 2018-01-14 17:14:02
    前端开发现在一般指的就是web前端开发工程师,其负责是网站前端页面也就是网页的页面开发,简单的说网站前端负责是东西是网站用户可见的东西,如网页上的特效、网页的布局、图片、视频等内容。网站前端工程师的工作...
  • Python开发网站步骤

    千次阅读 2017-12-29 14:13:33
    国内的豆瓣就是典型的Python开发的;使用python Django做网页的步骤: 1 、创建一个django项目(使用django-admin.py startproject MyDjangoSite ) 2、建立视图 from django....
  • 本套可能针对有一定JS或者jquery基础的人员,偏... jQuery发展至今,已经成为web开发人员必须掌握的一门技术,本套课程,希望通过大量案例,使大家掌握jquery核心功能:选择器,DOM,事件,动画,插件开发,插件使用.
  • 网站开发进阶(四十一)中文字体网页开发指南前言 字体的选择,是网页开发的关键因素之一。 合适的字体,对网页的美观度(或可读性)有着举足轻重的影响。 但是,相比英文字体,中文字体的网页开发有着极大的局限性。...
  • 网站开发一般分为前端和后端两个部分。前端负责实现页面效果,后端主要负责功能开发。一般的开发流程是先由美工或者网页设计师进行网页设计和切图,所谓切图就是将设计好的网页效果图利用html开发工具进行代码实现成...
  • 在互联网历史中,网页设计师和网页开发人员这两个不同的行业分工一直都扮演着不可或缺的角色。谁是主角,谁是配角的争论就如鸡和蛋谁先谁后的争论一样,喋喋不休却没有意义。但是,如果从客观的角度来讲,那么你有...
  • 移动端web开发笔记(一)

    万次阅读 多人点赞 2018-07-15 20:33:43
    我本来一直在开发PC端的网页的,但是看到很多招聘都要求要有移动端开发的经验,所以开始学习一下!先搞清楚两个概念,移动端web开发,web app开发1、 移动web开发(pc端的页面用手机浏览器打开)这部分跟web前端开发...
  • 从零开始开发一个大型网站

    万次阅读 2018-05-21 01:25:12
    从零开始开发一个大型网站 更新:前端代码已全部由TypeScript进行重写 这是本人第一个从零开始开发一个大型网站(前后端+部署代码),是一个内容分享社区,详细信息见github。目前还是开发中后期,随后还要进行...
  • Delphi web应用开发框架 - 第一部

    千次阅读 2019-05-19 00:28:24
    此框架基于Delphi 10.2.2 +UniGuiv1.0 1397开发,整个脉络采用面向服务的思想,层级为client +appserver + dbserver,今天时间晚了,先放几张截图供朋友参考: ...
  • 微信小程序和传统网页开发的区别

    千次阅读 2019-03-24 14:34:23
    小程序与普通网页开发的区别 虽然在开发语言层面小程序与传统的网页差别不大:是使用JavaScript 脚本语言编写逻辑代码、使用类似于HTML的WXML来描述页面的结构、使用类似于CSS的WXSS来描述节点的样式,但是由于小...
  • 常用的网页开发工具有哪些

    万次阅读 2011-11-02 10:48:04
    常用的网页开发工具有哪些 制作网页的基本软件离不开HTML,但是如果真的要用其完成全部的网络课程开发是不现实的,因为既不方便效率又低,常用的方法是选择一种工具软件,只是在必要的时候对工具软件生成的...
  •  一,启动VS 2010开发环境,选择菜单中的“文件”,选择其中的“新建”,再选择“网站”,会弹出”新建网站“对话框。  二,在“新建网站”的对话框,在“已安装模板”中选择Visual C#,右侧的选择“ASP.NET...
1 2 3 4 5 ... 20
收藏数 1,307,222
精华内容 522,888
关键字:

网页开发