<big id="n3dbt"><strong id="n3dbt"></strong></big>
      1. <small id="n3dbt"><delect id="n3dbt"></delect></small>

        <thead id="n3dbt"><ruby id="n3dbt"><rp id="n3dbt"></rp></ruby></thead>
        <th id="n3dbt"></th>
        <span id="n3dbt"></span><span id="n3dbt"></span><span id="n3dbt"></span><strike id="n3dbt"></strike>

        建站百科Website News

        當前位置:首頁 »0基礎!寫給設計師的前端小知識之入門篇

        0基礎!寫給設計師的前端小知識之入門篇

        至成科技 2016-03-31 訪問量(1029) 評論(0)
        摘要:

            本文作為小白入門級,相對基礎,是寫給現在想了解一點前端知識的設計師同行們。文章把前端相關的術語都用設計師熟悉的東西解釋一遍(比如比喻成畫布),通俗易懂幽默風趣,絕對是小白入門的好教程!

        背景交代(此處省略2000個字……)

            前言還是要一點的:很多人一聽前端兩個字,就以為是寫網頁的,其實前端包括很多,不僅僅是標簽加樣式那些東西。如果按10級來評的話,不知道你們想象的那些東西有沒有占兩成,

        今天把以前的一些東西整理出來,給需要的人。作為web轉行做設計師的人,我會盡量用設計師能理解的角度來講,如有不足及錯誤請指正但勿噴。

        一、使用工具

        工具的話,DW我想大家是較熟悉的吧,對設計師來說光看圖標就覺得親切有木有?

            對專職做前端的來說DW可能并不是優選,因為會覺得性能不好,比如代碼提示不夠,工作起來效率不太高。以DW為例,這個主要是……本人電腦里剛好只裝了它。代碼提示太多并不是件好事,單詞量本來就少,如果養成了只記前兩個字母然后等待代碼提示的習慣。大概就好比沒有自動鉛筆的時候,你連普通鉛筆都不會削,多尷尬啊。

        二、初識html

            html并不是一種編程語言,而是一種標記語言,它只是把內容放在相應的標簽內通過網頁的形式表現出來,讓人們能看到。就像使用PS來添加字體、顏色、樣式……然后完成導出成一張圖片給別人看,實際上編寫PS這個程序軟件的人干的才是編程的工作。你需要做的只是掌握一定的PS技法。同理,DW也是一個讓你的內容呈現給別人的工具,你可以給內容(圖片、文字、形狀……)布局,添加樣式、動作……然后導出成一個html文件,讓別人能通過瀏覽器看到,而布局和添加樣式的技法是你需要掌握的,也就是本文所要傳達的東西。

        1. 文件格式

            后綴為“.html”的文件即為網頁的文件格式,默認為使用瀏覽器打開。有時候會遇到諸如“.htm”之類的格式其實也是差不多的。就像jpg也有jpeg的叫法一樣。

        2. 新建文件

            DW內新建一個html文件,然后就會自動出現如下代碼:

        這段代碼是必不可少的,不同版本的DW可能會有些不同,但是作用是一樣的,相當于在新建一個PS文檔的時候,至少有一個圖層。這些代碼規定了一些瀏覽器讀取所需要的規范,為你寫入內容奠定了基礎。

        其中:

        想要顯示的內容都裝在標簽內,它就是html畫布,在畫布以外放置東西,可能會看不見,也可能出錯。

        你的網頁名字則是放在內:

        (其他的標簽作用會在之后的文章中慢慢講解或百度哦。)

        編碼區上方有幾個菜單,Code(編碼)、Split(拆分)、Design(設計)、Live(實時),請你是在編碼菜單下。此前有設計師利用design直接可視化進行排版,說也能排出來啊。額……那還要程序員來干嘛咩?你有你的便利,咱有咱的長處……乖乖碼字吧。

        尖括號“< >”和看似認識又有點不認識的單詞的組成便是標簽了,也是構成網頁不可或缺的元素,當然不止這幾個。有木有發現除先進行和帶meta的,都是成對兒出現?(oh god,代碼都來虐狗了!)并且不交叉。

        接下來是需要注意的幾點規范:

        1)除特殊標簽外,所有標簽必須成對出現并以“< tagName>”開始,以“< / tagName>”結束(所以它們也被稱為開始標簽和結束標簽),并且不與其他標簽交叉:下面這種亂叉的方式絕對會死很慘噠。

        2)標簽名小寫(記住記住……)

        3)每個標簽的尖括號不能多,也不能少(跟瀏覽器讀取網頁的形式有關,一般由上到下,由左到右,當讀取到一個左尖括號“<”時,會一直尋找下一個右尖括號“>”為結束,,是的,它就是這么執著。缺失可能會導致比較嚴重的問題,也要養成一個規范編碼的習慣,先寫完一對標簽,再填充內容和樣式。)

        好啦,講多無益,還是在實踐中尋找知識吧!

        實戰案例演示

        一、畫個矩形

        你習慣了在PS里移動鼠標?那現在要換個方式了,把你想要DW做的事情變成一行行命令。

        在后回車換行,然后縮格(不想代碼亂七八糟的話就養成換行縮格的習慣吧)。當你開始打左尖括號的時候右下角就已經有代碼提示了,像平時的百度搜索一樣,選擇你想要的按下回車便自動完成。你也可以選擇自己一個字母一個字母的敲。然后完整的敲出如下代碼 —— 代碼例1:

        然后在先進個div的后面,先空格,再添加樣式句子如下:

        保存后刷新即可看到:

        OK,接觸到了

        這個標簽,我們就來說道說道。


        我一般會把標簽看做是一個一個的二維盒子,之所以說它是二維盒子,是因為盒子只有寬高,是平面的。這個盒子可以小到看不見,也可以大到望不到邊。html中有很多種類的盒子,例如裝鏈接的a標簽盒子(),裝文本的p盒子()或者span盒子(

        如例1中,有這樣一句:

        style="width:200px; height:200px; background-color:#c93; "

        如果沒有這一句,那就像在白色畫布上畫了一個白色的矩形,你將會看不到你的盒子。

        width(寬)、height(高)、background-color(背景顏色)決定了盒子的寬高和顏色,他們被稱為屬性,其后跟的是屬性值。其實有時候你有效可以把每個標簽當成一個人或任何物體(有點面向對象思想的意思哦,有興趣的請百度)。所有能描述這個人的外在都叫做他的屬性:

        上圖中的小孩如果我們要用html標記語言來描述的話,大概是這個樣子:<人 style=”年齡:10歲;  膚色:黃色; 性別:男;”>,當然,不可能醬紫寫啦,標簽及標簽屬性是不允許有中文的。

        所以,得到如下樣式書寫規范,多練習畫幾個盒子吧(可以嘗試更改寬高及背景顏色):

        二、默認樣式及附加樣式

        如果你是個乖孩紙,做了上面的練習,多畫了幾個盒子,你會發現,所有的盒子不管右邊空格有多寬,新的盒子總是另起一行。你只規定了大小,并沒有告訴盒子要“站”在哪里。

        那就是即將要說到的。

        1. 默認樣式:

        1)靠左而且會占與其自身高度一樣的空間(前提是你已經規定了寬高,否則為0)

        所以別人是沒法緊隨其后的。

        2)div盒子默認為白色

        2. 附加樣式:

        例1中style內就是附加樣式,添加附加樣式(以下簡稱樣式)之前,div按照自身的默認樣式呈現。添加樣式之后,默認樣式將被覆蓋,也就是俗稱的“后來居上”。來做個實驗吧,在一個div盒子的樣式也就是style內添加兩個同一屬性名,不同屬性值的樣式:

        然后觀察一下,較后出現的矩形顏色是#c93還是#c00?

        好啦,到較后看看能不能不看示例自己敲出來吧。內容不多只是為了入門,之后會不間斷更新爭取講多一點。

        有一種方法叫用文本文檔寫html,但是寶寶不想跟你們說,怕誤人子弟。哈哈……

        下一篇講“征服霸道div,用矩形模仿網頁布局”,寶寶看看有沒有人給贊!嗚嗚……幾千字也不是好敲的。

        網友評論

        登錄后可評論,請登錄

        全部評論:0條

        掃描左側二維碼
        關注至成微信公眾號

        西安至成信息科技有限公司  Copyright 2012-2019  xazcit.com  All rights reserved.

        Email:[email protected]     郵政編碼:710016     《中華人民共和國增值電信業務經營許可證》陜B1.B2-20140011     陜ICP備12008874號-1

        聯系地址:西安市經開區鳳城四路西安國際企業中心B座23層06-10室    售前咨詢熱線:029-89390727    售后服務電話:029-89393039

        西安網站建設、網站設計制作公司-至成科技,已為眾多企業提供網站建設網站制作響應式網站設計手機網站建設虛擬主機云主機服務器租用等建站解決方案。

        網絡警察 12321垃圾信息舉報 不良信息舉報 中國文明網 西安工商
        ×
        安徽25选5计划