Category: 網頁設計工具
網頁設計工具
網頁設計常用軟體（附下載地址及截圖）
網頁設計工作比較繁多，所以有一款就手的工具非常重要，HTML5被看做是Web開發者創建流行web應用的利器，增加了對視頻和Canvas 2D的支持。用HTML5的優點主要在於，這個技術可以進行跨平台的使用。比如你開發了一款HTML5的遊戲，你可以很輕易地移植到UC的開放平台、Opera的遊戲中心、Facebook應用平台，甚至可以通過封裝的技術發放到App Store或Google Play上，所以它的跨平台性非常強大，這也是大多數人對HTML5有興趣的主要原因。今天,我將為大家推薦幾個主流的HTML5開發工具。 visual studio code 一個運行於Mac OS X、Windows和 Linux 之上的，針對於編寫現代Web和雲應用的跨平台源代碼編輯器。該編輯器也集成了所有一款現代編輯器所應該具備的特性，包括語法高亮，可定制的熱鍵綁定，括號匹配以及代碼片段收集。可以見之前的VSCODE詳細介紹 下載鏈接：https://code.visualstudio.com/download Dreamweaver cc Dreamweaver是集網頁製作和管理網站於一身的所見即所得網頁編輯器，擁有可視化編輯界面，支持代碼、拆分、設計、實時視圖等多種方式來創作、編寫和修改網頁，初學HTML5的人可以無需編寫任何代碼就能快速創建Web頁面。 下載地址：https://www.adobe.com/hk_en/products/dreamweaver/free-trial-download.html Google Web designer 谷歌Web Designer讓您創建美麗的，吸引人的HTML5內容的力量。使用動畫和互動元素，將您的創意視覺帶入生活，並享受與谷歌Drive、Display & Video 360、谷歌Ads等谷歌產品的無縫集成。 下載地址：https://webdesigner.withgoogle.com/ WebStorm WebStorm是一款Java開發工具，WebStorm具有的優勢是：智能的代碼補全、代碼格式化、html提示、聯想查詢、代碼重構、代碼檢查和快速修復、代碼調試、代碼結構瀏覽、代碼折疊、包裹或者去掉外圍代碼。 下載地址：https://www.jetbrains.com/webstorm/download/ HBuilder HBuilder，即Html Builder的縮寫，Builder是建造者的意思。HBuilder是一個極客工具，追求無鼠標的極速操作，不管是敲代碼的快捷設定，還是操作功能的快捷設定，都融入了效率第一的設計思想。 下載地址：https://www.dcloud.io/hbuilderx.html Sublime Text Sublime Text是一個跨平台的代碼編輯器，同時支持Windows、Linux、Mac OS X等操作系統，也是HTML的文本編輯器。 Sublime Text具有漂亮的用戶界面和強大的功能，主要功能包括：拼寫檢查、書簽、完整的 Python API 、Goto 功能、即時項目切換、多選擇、多窗口等等。 下載地址：https://www.sublimetext.com/3 以上就是網頁設計常用軟體，收費免費都有，個人感覺收費軟件商業支持更好，免費軟件有問題自己動手一般也能解決。
Read More網頁設計工具
Chrome瀏覽器F12網頁開發工具教學
Chrome既是一個好用的瀏覽器，也是網頁開發員的好工具，能夠所見即所得修改網頁，又可以調試腳本，非常方便，能夠很好提升網頁設計效率。下面介紹如何使用這個工具。 1.如何調出開發者工具 調出Chrome網頁開發工具有2個方法： 1.在網頁按鍵盤上的F12（Windows與Mac也是這個鍵）調出2.在網頁右鍵菜單，選擇Inspect 例如，直接修改網頁上的任何內容，這裏演示修改“Google 搜尋”按鈕為“Web4Theme 搜尋” 2.網頁開發工具各部分介紹 chrome開發者工具最常用的四個功能模塊：元素（ELements）、控制台（Console）、源代碼（Sources），網絡（Network）。 元素（Elements）：用於查看或修改HTML元素的屬性、CSS屬性、監聽事件、斷點等。css可以即時修改，即時顯示。大大方便了開發者調試頁面 控制台（Console）：控制台一般用於執行一次性代碼，查看JavaScript對象，查看調試日誌信息或異常信息。還可以當作Javascript API查看用。例如我想查看console都有哪些方法和屬性，我可以直接在Console中輸入”console”並執行~ 源代碼（Sources）：該頁面用於查看頁面的HTML文件源代碼、JavaScript源代碼、CSS源代碼，此外最重要的是可以調試JavaScript源代碼，可以給JS代碼添加斷點等。 網絡（Network）：網絡頁面主要用於查看header等與網絡連接相關的信息。 2.1 元素（Elements） 查看元素的代碼：點擊左上角的箭頭圖標進入選擇元素模式，然後從頁面中選擇需要查看的元素，然後可以在開發者工具元素（Elements）一欄中定位到該元素源代碼的具體位置 查看元素的CSS屬性：在元素的右邊欄中的styles頁面可以查看該元素的CSS屬性，這個頁面展示該元素原始定義的CSS屬性以及從父級元素繼承的CSS屬性。從這個頁面還可以查到該元素的某個CSS特性來自於那個CSS文件，使編碼調試時修改代碼變得非常方便。 如下圖中的class、src、width等屬性的值。 當然從源代碼中讀到的只是一部分顯式聲明的屬性在Styles頁旁邊，有一個Computed頁面，這個頁面展示該元素經過計算之後的所有CSS屬性，即最後瀏覽器渲染頁面時使用的屬性。屬性的計算由瀏覽器自動進行，是瀏覽器渲染頁面的一個必不可少的過程。 修改元素的代碼與屬性：點擊元素，然查看右鍵菜單，可以看到chrome提供的可對元素進行的操作：包括編輯元素代碼（Edit as HTML）、修改屬性（Add attribute、Edit attribute）等。選擇Edit as HTML選項時，元素進入編輯模式，可以對元素的代碼進行任意的修改。當然，這個修改也僅對當前的頁面渲染生效，不會修改服務器的源代碼，故而這個功能也是作為調試頁面效果而使用。 修改元素的CSS屬性：在元素的Styles頁面，可以對元素的CSS屬性進行修改，甚至刪除原有、添加新屬性。不過，這些修改，僅對當前瀏覽器的頁面展示生效，不會修改CSS源代碼。所以在這裡進行CSS屬性的修改一般用來調整和完善元素的渲染效果。 給元素添加斷點：在元素的右鍵菜單中選擇斷點選項（Break on…），選中之後，當元素被修改（通常是被JS代碼修改）時，頁面加載會暫停，然後可以查看該元素的屬性。 元素斷點添加之後，可以在右側欄的DOM Breakpoints頁面中看到，這個頁面可以看到當前網頁的所有元素斷點。 查看元素的監聽事件：元素的右邊欄的Event Listener頁面，可以查看到該元素的所有監聽事件。在開發中，尤其是維護其他人的代碼時，會出現不瞭解元素對應的監聽事件，這個時候，可以在這個頁面中找到。這個頁面不僅能看到對應的事件函數，還可以定位該函數所在的JS文件以及在該文件中的具體位置（行數），大大提高開發維護的效率。 2.2 控制台（Console） Console可以查看JS對象的及其屬性，通過js訪問當前頁面的所有元素及進行js的任何操作，並且能夠立即執行JS語句： 查看控制台日誌：當網頁的JS代碼中使用了console.log()函數時，該函數輸出的日誌信息會在控制台中顯示。日誌信息一般在開發調試時啓用，而當正式上線後，一般會將該函數去掉 2.3 源代碼（Source） 查看文件：在源代碼（Source）頁面可以查看到當前網頁的所有源文件。在左側欄中可以看到源文件以樹結構進行展示。添加斷點：在源代碼左邊有行號，點擊對應行的行號，就好給改行添加上一個斷點（再次點擊可刪除斷點）。右鍵點擊斷點，在彈出的菜單中選擇Edit breakpoint可以給該斷的添加中斷條件。 中斷調試：添加斷點後，當JS代碼運行到斷點時會中斷（對於添加了中斷條件的斷點在符合條件時中斷），此時可以將光標放在變量上查看變量的 也可以在右邊的側欄上查看： 在右側變量上方，有繼續運行、單步跳過等按鈕，可以在當前斷點後，逐行運行代碼，或者直接讓其繼續運行。 2.4 網絡（Network） 網絡能夠記錄所有請求，並且進行回放，另存為文件進行分析。 紅色圓型：記錄按鈕 處於打開狀態時會在此面板進行網絡連接的信息記錄，關閉後則不會記錄。 圓裏面有斜線：清除按鈕 清除當前的網絡連接記錄信息。（點擊一下就能清空） 下面的過濾器（Filter） 能夠自定義篩選條件，找到自己想要資源信息，如下圖所示。 也可以是一些指定條件指定條件有哪些？ […]
Read More網頁設計工具
VSCode免費跨平臺網頁編輯工具
VS Code是什麼 VSCode（全稱：Visual Studio Code）是一款由微軟開發且跨平台的免費網頁源代碼編輯器。該軟體支持語法高亮、代碼自動補全（又稱 IntelliSense）、代碼重構、查看定義功能，並且內置了命令行工具和 Git 版本控制系統。用戶可以更改主題和鍵盤快捷方式實現個性化設置，也可以通過內置的擴展程序商店安裝擴展以拓展軟件功能。 在 2019 年的 Stack Overflow 組織的開發者調查中，Visual Studio Code 被認為是最受開發者歡迎的開發環境。VSCode靚照 VS Code基本功能 Visual Studio Code 默認支持非常多的編程語言，包括 JavaScript、TypeScript、CSS 和 HTML；也可以通過下載擴展支持 Python、C/C++、Java 、Markdown, HTML/CSS, PHP, Powershell, JSON和 Go 在內的其他語言。支持功能包括語法高亮、括號補全、代碼折疊和代碼片段；對於部分語言，可以使用 IntelliSense。Visual Studio Code 也支持調試 Node.js 程序。和 GitHub 的 Atom一樣，Visual Studio Code 也基於 Electron 框架構建。 作為跨平台的編輯器，Visual Studio Code 允許用戶更改文件的代碼頁、換行符和編程語言。 常用Extensions擴展插件 在VSCode左邊有個擴展面板，通過這個marketplace，可以安裝很多新奇有趣的擴展 代碼書籤(Numbered […]
Read More