整合營(yíng)銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          前端必備技能-如何高效調(diào)試與檢測(cè)你的CSS代碼

          者:極客小俊
          一個(gè)把邏輯思維轉(zhuǎn)變?yōu)榇a的技術(shù)博主


          引言

          我們平常在項(xiàng)目開發(fā)當(dāng)中, 利用調(diào)試工具來(lái)調(diào)試CSS相關(guān)的代碼, 它可以幫助我們了解哪些CSS 功能被使用,CSS代碼效率,以及CSS代碼的執(zhí)行情況,而這些都是 CSS 代碼檢查與調(diào)試的核心, 它在某種情況下,會(huì)影響我們整個(gè)網(wǎng)站應(yīng)用程序的整體性能, 所以掌握必要的調(diào)試技巧是很有必要的!

          使用Chrome DevTools 調(diào)試CSS代碼

          我們平常可以使用chrome瀏覽器自帶的Chrome DevTools調(diào)試工具 來(lái)檢查與調(diào)試CSS代碼!

          基礎(chǔ)手工調(diào)試 CSS 代碼

          快速手動(dòng)查看元素的CSS樣式

          可以在chrome瀏覽器打開頁(yè)面中按下快捷鍵F12 打開chrome開發(fā)調(diào)試工具,然后使用箭頭工具Element選項(xiàng)中直接選擇html代碼 , 最后在右側(cè)的Style中就可以看到當(dāng)前這個(gè)元素顏色、字體、大小CSS相關(guān)信息

          如圖:

          快速查看css link外部樣式表

          概念

          在我們選擇好元素節(jié)點(diǎn)之后, 右側(cè)的 Styles 選項(xiàng)卡中,出現(xiàn)的當(dāng)前元素的 CSS屬性, 旁邊的鏈接文件可以直接點(diǎn)擊打開定義CSS規(guī)則外部樣式表 可以查看樣式的源文件

          快速給選擇的元素添加 行間樣式

          概念

          這種方法相當(dāng)于向html標(biāo)簽style 屬性一樣的原理!

          當(dāng)我們?cè)?/span>Element選項(xiàng)中直接選擇html代碼中的一個(gè)元素之后 , 在右側(cè)的Style中, 點(diǎn)擊 element.style 就可以給當(dāng)前選擇的這個(gè)元素增加行間CSS樣式了!

          這個(gè)方法在實(shí)際應(yīng)用開發(fā)當(dāng)中很實(shí)用, 根據(jù)添加的行間css屬性我們就很容易快速判斷并且檢測(cè)出元素的CSS屬性的問(wèn)題出在什么地方!

          如圖

          快速向元素已有樣式規(guī)則中添加、修改CSS屬性

          概念

          平常在開發(fā)當(dāng)中 也會(huì)用到這個(gè)小技巧, 來(lái)快速檢測(cè)自己寫的CSS是否有誤!

          添加CSS聲明

          當(dāng)我們?cè)?/span>Element選項(xiàng)中直接選擇html代碼中的一個(gè)元素之后 , 在右側(cè)的Style中單擊要添加聲明的樣式規(guī)則{}大括號(hào)中間部分, 就可以出現(xiàn)光標(biāo),輸入CSS屬性名,最后輸出完成后 按 enter 鍵即可!

          修改CSS聲明

          我們只需要在原有樣式上雙擊鼠標(biāo),修改樣式規(guī)則,并按 Enter 鍵就可以了!

          如圖

          快速給元素添加class類

          概念

          當(dāng)我們?cè)?/span>Element選項(xiàng)中直接選擇html代碼中的一個(gè)元素之后 , 在右側(cè)的Style選項(xiàng)卡中有一個(gè) .cls 的按鈕,點(diǎn)擊這個(gè)按鈕會(huì)顯示一個(gè) Add new class 的輸入框,輸入想要添加的class類名之后按 enter 鍵就可以了

          這樣就可以直接點(diǎn)擊 添加好的class類 復(fù)選框可以來(lái)回切換樣式 進(jìn)行CSS屬性的測(cè)試

          小提示: 前提是你最好是把要添加的class 先寫好!

          快速更改元素的CSS屬性值快捷鍵

          我們?cè)?/span>Element選項(xiàng)右側(cè)的Style選項(xiàng)卡中編輯CSS屬性值的時(shí)候,可以使用鍵盤上的快捷鍵將值遞增/遞減的操作

          • 方向鍵Up 則是每點(diǎn)擊一次給CSS屬性值增加1
          • 方向鍵Down 則是每點(diǎn)擊一次給CSS屬性值減少1
          • Alt+ 方向鍵Up 支持(windows,Linux)則是每點(diǎn)擊一次給CSS屬性值增加0.1
          • Alt+ 方向鍵Down 支持(windows,Linux)則是每點(diǎn)擊一次給CSS屬性值減少0.1
          • Shift + 方向鍵Up 則是每點(diǎn)擊一次給CSS屬性值增加10
          • Shift + 方向鍵Down 則是每點(diǎn)擊一次給CSS屬性值減少10
          • ctrl + Shift + Page Up 支持(windows,Linux)則是每點(diǎn)擊一次給CSS屬性值增加100
          • ctrl + Shift + Page Down支持(windows,Linux)則是每點(diǎn)擊一次給CSS屬性值減少100

          拾色器的使用

          概念

          一般可以使用拾色器來(lái)快速修改元素的顏色

          Style選項(xiàng)卡中,選中目標(biāo)html元素后 將鼠標(biāo)懸停在目標(biāo)元素顏色屬性小圖標(biāo)上點(diǎn)擊一下,就可以出現(xiàn)拾色器了 , 如果你很會(huì)搭配顏色這個(gè)小工具還是挺有用的!

          如圖


          CSS Overview (當(dāng)前頁(yè)面CSS信息提取)

          這個(gè)功能還是非常強(qiáng)大的! 但是chrome開發(fā)調(diào)試工具 默認(rèn)是沒有開啟的, 所以需要我們手動(dòng)去開啟

          如何在chrome開發(fā)調(diào)試工具中開啟CSS Overview功能

          步驟

          打開chrome瀏覽器---->F12進(jìn)入調(diào)試工具----->點(diǎn)擊調(diào)試工具右上方的小齒輪setting圖標(biāo)進(jìn)入設(shè)置---

          ---->選擇Experiments----->勾選CSS Overview 選項(xiàng)即可!

          如圖

          注意: 開啟之后要重新開啟一下調(diào)試工具!

          CSS Overview的作用

          這個(gè)功能可以給開發(fā)者展示出當(dāng)前頁(yè)面 CSS 屬性的所有信息,比如顏色、字體、對(duì)比度問(wèn)題、未使用的聲明和media查詢, 通常用這個(gè)工具來(lái)判斷當(dāng)前CSS 代碼的質(zhì)量

          CSS Overview功能包含五個(gè)信息板塊

          1.Overview summary

          重點(diǎn)可以顯示出一些當(dāng)前頁(yè)面中的CSS的使用情況!

          2.Colors

          可以顯示出當(dāng)前頁(yè)面中使用到的所有顏色信息 包括 背景、 字體、 等等...

          3.Font info

          在這里可以顯示出當(dāng)前頁(yè)面中 所使用到的字體以及字體css屬性相關(guān)的所有信息!

          也就是可以在這里看到每一種使用到的字體所設(shè)置的css字體相關(guān)屬性

          4.Media queries

          在這里可以查看到當(dāng)前頁(yè)面中使用到的媒體查詢相關(guān)信息

          Coverage panel (檢測(cè)信息覆蓋度)

          這個(gè)功能主要是可以用來(lái)檢測(cè)CSSJS 文件的代碼數(shù)量以及使用評(píng)率, 也就是說(shuō)它可以提示項(xiàng)目應(yīng)用中加載的每個(gè)文件使用多少CSS

          打開步驟

          打開chrome瀏覽器---->F12進(jìn)入調(diào)試工具----> Ctrl + shift + P 快捷鍵,輸入Coverage,然后再選擇: Show Coverage,最后點(diǎn)擊刷新的小圖標(biāo) 就可以了!

          小提示 可以在 URL Filter輸入框中過(guò)濾出 .css文件, 只要輸入.css 就可以專門顯示 CSS文件了

          如圖

          這些數(shù)據(jù)看似不重要,但可能有些時(shí)候可以幫助你 建立優(yōu)化思維以及策略!


          Rendering Panel (渲染面板)

          聽名字就知道它的作用是跟CSS效果渲染有關(guān)系的, 平常使用它 來(lái)檢測(cè)代碼的渲染時(shí)間以及渲染過(guò)載的區(qū)域!

          關(guān)于css渲染涉及到瀏覽器構(gòu)成,這里就不過(guò)多提及,以后我會(huì)出一篇詳細(xì)做講解!

          Rendering Panel (渲染面板) 打開步驟

          打開chrome瀏覽器---->F12進(jìn)入調(diào)試工具----> Ctrl + shift + P 快捷鍵----->輸入Rendering---->然后選擇 Show Rendering項(xiàng), 然后回出現(xiàn)很多復(fù)選框功能

          平常我會(huì)用到的選項(xiàng)如下表:

          復(fù)選項(xiàng)

          描述

          Paint flashing

          當(dāng)頁(yè)面上有重繪效果的地方,會(huì)顯示綠色矩形的區(qū)域進(jìn)行標(biāo)注! 可以簡(jiǎn)單理解為有動(dòng)態(tài)效果的頁(yè)面區(qū)域, 這些效果區(qū)域 往往瀏覽器渲染時(shí)間會(huì)長(zhǎng)一些!

          Frame Rendering Stats

          這個(gè)選項(xiàng)勾選上之后可以顯示GPU的一些實(shí)時(shí)情況, 用來(lái)判定一些效果動(dòng)畫是否卡頓還是比較有用的!



          如圖



          渲染面板中我們可以獲取到 一些常規(guī)檢查中沒有的數(shù)據(jù)信息, 這些信息對(duì)于了解 CSS 代碼 或者是 JS代碼的性能以及消耗設(shè)備的資源等 都提供了很多依據(jù)和參照, 在深度優(yōu)化的時(shí)候或許能給你帶來(lái)一絲啟發(fā)!

          Performance Monitor (性能監(jiān)視器)

          故名意思就是用來(lái)查看代碼運(yùn)行的性能監(jiān)視界面,

          打開步驟

          打開chrome瀏覽器---->F12進(jìn)入調(diào)試工具----> Ctrl + shift + P 快捷鍵----->輸入Performance Monitor---->最后選擇 Show Performance Monitor 項(xiàng) 即可打開,

          在這個(gè)面板當(dāng)中可以勾選一些選項(xiàng)如下

          CPU usage

          當(dāng)前CPU的使用率,也就是CPU占用率

          JS heap size

          指的是JS對(duì)象堆的占用的內(nèi)存大小

          DOM nodes

          內(nèi)存中DOM節(jié)點(diǎn)個(gè)數(shù),這個(gè)會(huì)隨著頁(yè)面的效果變化而增加或減少

          JS event listeners

          JS事件偵聽器個(gè)數(shù)

          如圖

          Layouts/sec

          在用戶查看頁(yè)面的過(guò)程當(dāng)中,頁(yè)面中的布局元素重排

          Style recalcs / sec

          頁(yè)面中的樣式重繪

          以上兩個(gè)選項(xiàng)通常也是用于檢測(cè)與分析我們的CSS代碼性能, 例如我們?cè)?span style="color: #E96900; --tt-darkmode-color: #E96900;">CSS中使用了left或top屬性那么就會(huì)產(chǎn)生一些布局上的重繪, 那么如果將這些屬性加載到JS動(dòng)畫中,則可能每秒都觸發(fā)幾十甚至是上百次重繪操作

          處于性能優(yōu)化考慮 , 我們?nèi)绻褂昧?/span>CSS3中的transform屬性中的translateX/Y來(lái)做動(dòng)畫效果 ,那么會(huì)發(fā)現(xiàn)它并不會(huì)觸發(fā)重繪的流程,而只是組合畫面 而這些都是基于顯卡GPU, 而CPU 的使用率會(huì)大大降低!

          所以我們平常在開發(fā)JS效果的過(guò)程當(dāng)中使用 translate()來(lái)移動(dòng)元素,而不用 top或left來(lái)移動(dòng)元素的根本原因!

          我們可以來(lái)看一下對(duì)比圖:

          小結(jié): 所以通過(guò) Layouts/secStyle recalcs/sec 兩個(gè)選項(xiàng)展示了在頁(yè)面中觸發(fā)重繪布局CSS相關(guān)信息

          以上這些在平常前端開發(fā)當(dāng)中可以幫助你獲取一些實(shí)時(shí)應(yīng)用程序的性能數(shù)據(jù),在判斷性能優(yōu)劣的時(shí)候也是非常有幫助的!

          Performance Panel (性能面板)

          Performance Panel跟之前的Performance Monitor的區(qū)別就是 我們先通過(guò) Performance Monitor性能監(jiān)視器來(lái)把控每一個(gè)環(huán)節(jié)的性能, 然后再使用Performance Panel進(jìn)行整體的性能分析!

          打開步驟

          打開chrome瀏覽器---->F12進(jìn)入調(diào)試工具----> Ctrl + shift + P 快捷鍵----->輸入Performance---->然后我們選擇 Show Performance項(xiàng), 最后點(diǎn)擊重新加載的圖標(biāo),或者按下快捷鍵 ctrl + shift + e

          并且我們也可以反復(fù)按下快捷鍵(ctrl + shift + e)重新加載繪制頁(yè)面性能信息, 在最下面的餅圖中顯示了繪制頁(yè)面渲染頁(yè)面的總體時(shí)間!

          如圖

          從上圖中就可以看到 當(dāng)我們打開性能面板加載之后就可以獲取到 加載頁(yè)面的時(shí)間/毫秒、 CSS、JS、DOM節(jié)點(diǎn)、事件監(jiān)聽等所需要的渲染總體時(shí)間!

          國(guó)外在線CSS調(diào)試檢測(cè)代碼工具

          1.CSS Specificity Visualizer

          概述

          Specificity Visualizer個(gè)人覺得是一款國(guó)外非常不錯(cuò)的在線css檢測(cè)工具

          在線地址: https://isellsoap.github.io/specificity-visualizer/

          如圖

          我們只需要打開訪問(wèn)地址后 粘貼你想要檢測(cè)CSS代碼, 然后點(diǎn)擊Visualize it按鈕進(jìn)行檢測(cè), 然后回在下面顯示出特殊樣式選擇器 以及選擇器的權(quán)重等相關(guān)信息

          操作圖

          標(biāo)記為紅色的地方說(shuō)明這些選擇器還可以優(yōu)化得更好!

          2.CSS Specificity Graph Generator

          概述

          這款國(guó)外在線的CSS檢測(cè)工具 可以幫助你檢測(cè) CSS代碼中的 選擇器是如何按特定樣式組織

          在線地址: https://jonassebastianohlsson.com/specificity-graph/

          如圖

          它會(huì)提示波峰值高那么是不好的, 總的趨勢(shì)應(yīng)該是在樣式表的后面有更高的特異性

          如下圖

          END

          以上就是平常我在工作與學(xué)習(xí)當(dāng)中會(huì)使用到的一些CSS代碼檢測(cè)調(diào)試工具, 希望能給你帶來(lái)一點(diǎn)幫助!

          感謝你的閱讀!




          "點(diǎn)贊" "評(píng)論" "收藏"

          大家的支持就是我堅(jiān)持創(chuàng)作下去的動(dòng)力!?


          ?如果以上內(nèi)容有任何錯(cuò)誤或者不準(zhǔn)確的地方,歡迎在下面 留個(gè)言指出、或者你有更好的想法,歡迎一起交流學(xué)習(xí)?

          內(nèi)容首發(fā)于工粽號(hào):程序員大澈,每日分享一段優(yōu)質(zhì)代碼片段,歡迎關(guān)注和投稿!

          大家好,我是大澈!

          本文約 600+ 字,整篇閱讀約需 1 分鐘。

          今天分享一段優(yōu)質(zhì) CSS 代碼片段,使用CSS的偽類選擇器實(shí)現(xiàn)了對(duì)特定位置列表項(xiàng)的樣式控制。

          老規(guī)矩,先閱讀代碼片段并思考,再看代碼解析再思考,最后評(píng)論區(qū)留下你的見解!

          li:nth-child(-n + 3) {
            text-decoration: underline;
          }
          
          li:nth-child(n + 2):nth-child(-n + 5) {
            color: #2563eb;
          }
          
          li:nth-last-child(-n + 2) {
            text-decoration-line: line-through;
          }


          分享原因

          這段代碼展示了如何使用CSS的 nth-child 和 nth-last-child 偽類選擇器來(lái)選擇和樣式化特定的列表項(xiàng),這在復(fù)雜的樣式需求中非常有用。

          理解6和使用這些選擇器,在項(xiàng)目中寫樣式的時(shí)候真的會(huì)是水到渠成,最起碼不需要再費(fèi)勁去想一個(gè)新類名了。

          代碼解析

          1. li:nth-child(-n + 3)

          n是從0開始的非負(fù)整數(shù)。

          nth-child(-n + 3) 選擇器會(huì)選中父元素的前三個(gè)子元素。

          其中,-n + 3 表示選擇從第一個(gè)元素開始直到第三個(gè)元素的所有子元素。

          2. li:nth-child(n + 2):nth-child(-n + 5)

          nth-child(n + 2) 選擇器從第2個(gè)子元素開始選擇。

          nth-child(-n + 5) 選擇器從第1個(gè)子元素選擇到第5個(gè)子元素。

          組合使用時(shí),會(huì)選中從第2個(gè)到第5個(gè)子元素。

          3. li:nth-last-child(-n + 2)

          nth-last-child(-n + 2) 選擇器從父元素的最后一個(gè)子元素向前數(shù),選擇倒數(shù)前兩個(gè)子元素。


          - end -


          TML編輯器是一種用于創(chuàng)建、編輯和預(yù)覽HTML(超文本標(biāo)記語(yǔ)言)代碼的工具或應(yīng)用程序。它提供了一個(gè)直觀的界面,使用戶能夠輕松地編寫和設(shè)計(jì)網(wǎng)頁(yè)內(nèi)容。本文主要介紹HTML 常用編輯器(Visual Studio Code、Sublime Text、Atom、Notepad++和Dreamweaver)。


          參考文檔:https://www.cjavapy.com/article/3299/


          1、Visual Studio Code(VS Code )


          Visual Studio Code(簡(jiǎn)稱VS Code)是一款由微軟開發(fā)的跨平臺(tái)源代碼編輯器,支持Windows、macOS和Linux等多種操作系統(tǒng)。它被廣泛用于Web開發(fā),包括編輯HTML、CSS、JavaScript等前端技術(shù)。VS Code是一款輕量級(jí)的代碼編輯器,啟動(dòng)迅速,占用資源少。VS Code提供了豐富的擴(kuò)展和插件,可以根據(jù)需求安裝插件來(lái)增強(qiáng)編輯器功能。


          1)安裝和配置


          官網(wǎng)地址:Visual Studio Code - Code Editing. Redefined


          根據(jù)操作系統(tǒng)下載并安裝相應(yīng)版本的VS Code。打開VS Code后,可以根據(jù)自己的喜好配置編輯器設(shè)置,如主題、字體等。


          2)新建HTML文件


          在 VS Code 安裝完成后,選擇" 文件(F)->新建文件(N) ",在新建的文件中輸入以下代碼:


          <!DOCTYPE html>
          <html>
          <head>
          <meta charset="utf-8">
          <title>編程之路(cjavapy.com)</title>
          </head>
          <body>
           
          <h1>我的第一個(gè)標(biāo)題</h1>
           
          <p>我的第一個(gè)段落。</p>
           
          </body>
          </html>


          3)編輯HTML文件


          在VS Code中,點(diǎn)擊左上角的"文件"菜單,選擇"打開文件",或者使用快捷鍵Ctrl+O(Windows)或Cmd+O(macOS)來(lái)打開HTML文件。


          在編輯器中可以直接修改HTML文件的內(nèi)容。VS Code會(huì)自動(dòng)識(shí)別HTML標(biāo)記,并提供代碼高亮和智能提示功能。編輯完成后,使用快捷鍵Ctrl+S(Windows)或Cmd+S(macOS)來(lái)保存HTML文件。


          4)插件推薦


          HTML CSS Support:提供對(duì)HTML和CSS的支持,包括代碼片段、自動(dòng)補(bǔ)全等功能。


          Live Server:啟動(dòng)一個(gè)本地開發(fā)服務(wù)器,實(shí)時(shí)預(yù)覽HTML頁(yè)面的效果。


          Prettier:格式化HTML代碼,使代碼結(jié)構(gòu)更整潔。


          Auto Close Tag:自動(dòng)閉合HTML標(biāo)簽,提高編碼效率。


          Bracket Pair Colorizer:對(duì)成對(duì)的括號(hào)進(jìn)行著色,方便識(shí)別代碼塊。


          2、Sublime Text


          Sublime Text是一款流行的跨平臺(tái)源代碼編輯器,支持Windows、macOS和Linux等多種操作系統(tǒng)。它被廣泛用于Web開發(fā),包括編輯HTML、CSS、JavaScript等前端技術(shù)。


          Sublime Text的界面非常簡(jiǎn)潔,沒有多余的菜單和工具欄,更便于專注于代碼編輯。Sublime Text支持多種編程語(yǔ)言,包括HTML、CSS、JavaScript、Python、Java等。Sublime Text擁有強(qiáng)大的插件系統(tǒng),用戶可以根據(jù)需要安裝插件來(lái)擴(kuò)展編輯器功能。用戶可以自定義快捷鍵、主題、顏色方案等,以滿足個(gè)性化需求。Sublime Text啟動(dòng)迅速,響應(yīng)快速,適合于快速編輯代碼。


          1)安裝和配置


          官網(wǎng)地址:Sublime Text - Text Editing, Done Right


          根據(jù)操作系統(tǒng)下載并安裝相應(yīng)版本的Sublime Text。打開Sublime Text后,可以根據(jù)自己的喜好進(jìn)行編輯器設(shè)置,如字體、主題等。


          2)新建HTML文件


          在Sublime Text 安裝完成后,選擇" File->New File ",在新建的文件中輸入以下代碼:


          <!DOCTYPE html>
          <html>
          <head>
          <meta charset="utf-8">
          <title>編程之路(cjavapy.com)</title>
          </head>
          <body>
           
          <h1>我的第一個(gè)標(biāo)題</h1>
           
          <p>我的第一個(gè)段落。</p>
           
          </body>
          </html>


          3)編輯HTML文件


          在Sublime Text中,點(diǎn)擊左上角的"File"菜單,選擇"Open File",或者使用快捷鍵Ctrl+O(Windows)或Cmd+O(macOS)來(lái)打開HTML文件。在編輯器中可以直接修改HTML文件的內(nèi)容。Sublime Text會(huì)自動(dòng)識(shí)別HTML標(biāo)記,并提供代碼高亮和智能提示功能。編輯完成后,使用快捷鍵Ctrl+S(Windows)或Cmd+S(macOS)來(lái)保存HTML文件。


          4)插件推薦


          Emmet:提供HTML/CSS快速編寫和自動(dòng)完成功能,可以大大提高編碼效率。


          Sublime Linter:對(duì)代碼進(jìn)行實(shí)時(shí)語(yǔ)法檢查,幫助發(fā)現(xiàn)潛在的錯(cuò)誤和警告。


          Color Highlighter:對(duì)CSS中的顏色進(jìn)行高亮顯示,方便調(diào)試和修改樣式。


          SideBarEnhancements:增強(qiáng)側(cè)邊欄功能,提供更多文件操作選項(xiàng)。


          3、Dreamweaver


          Dreamweaver是由Adobe公司開發(fā)的一款全球知名的網(wǎng)頁(yè)設(shè)計(jì)和開發(fā)工具。它為開發(fā)人員和設(shè)計(jì)師提供了一個(gè)可視化的界面,可以直觀地創(chuàng)建和編輯網(wǎng)頁(yè)內(nèi)容,同時(shí)也支持手動(dòng)編輯代碼。Dreamweaver提供可視化界面,可以直觀地拖拽和編輯網(wǎng)頁(yè)元素,無(wú)需手動(dòng)編寫代碼。除了可視化界面,Dreamweaver也支持手動(dòng)編輯代碼,適合于開發(fā)人員和設(shè)計(jì)師。Dreamweaver可在Windows和macOS等多個(gè)平臺(tái)上運(yùn)行。Dreamweaver集成了代碼編輯器、預(yù)覽窗口、文件管理器等功能,提供全面的開發(fā)環(huán)境。


          1)安裝和配置


          官網(wǎng)地址:Website design software | Adobe Dreamweaver


          根據(jù)操作系統(tǒng)下載并安裝相應(yīng)版本的Dreamweaver。打開Dreamweaver后,,根據(jù)需要進(jìn)行編輯器設(shè)置,如界面語(yǔ)言、字體、代碼顏色等。


          2)編輯HTML文件


          在Dreamweaver中,點(diǎn)擊左上角的"File"菜單,選擇"New",然后選擇"HTML",即可新建一個(gè)空白的HTML文件。內(nèi)容如下:


          <!DOCTYPE html>
          <html>
          <head>
          <meta charset="utf-8">
          <title>編程之路(cjavapy.com)</title>
          </head>
          <body>
           
          <h1>我的第一個(gè)標(biāo)題</h1>
           
          <p>我的第一個(gè)段落。</p>
           
          </body>
          </html>


          使用可視化界面,可以直接拖拽頁(yè)面元素、調(diào)整布局、插入圖片等。若需要手動(dòng)編輯HTML代碼,可以在下方的代碼編輯器中進(jìn)行修改。Dreamweaver會(huì)自動(dòng)提供代碼補(bǔ)全和語(yǔ)法高亮功能。在Dreamweaver中,可以實(shí)時(shí)預(yù)覽網(wǎng)頁(yè)效果,點(diǎn)擊右上角的"Live View"按鈕即可。


          3)CSS和JavaScript支持


          Dreamweaver也支持CSS和JavaScript的編輯和預(yù)覽,可以幫助創(chuàng)建更豐富的網(wǎng)頁(yè)效果。在編輯器中可以直接編輯CSS樣式和JavaScript代碼,并實(shí)時(shí)查看效果。


          4)網(wǎng)頁(yè)上傳和發(fā)布


          Dreamweaver集成了FTP功能,可以直接將編輯好的網(wǎng)頁(yè)上傳到服務(wù)器。點(diǎn)擊"Site"菜單,選擇"Manage Sites",配置好站點(diǎn)設(shè)置,即可進(jìn)行上傳和發(fā)布。


          5)Dreamweaver模板和庫(kù)


          Dreamweaver提供模板和庫(kù)功能,可以保存和復(fù)用常用的網(wǎng)頁(yè)元素和樣式,提高開發(fā)效率。


          參考文檔:https://www.cjavapy.com/article/3299/


          主站蜘蛛池模板: 中文字幕aⅴ人妻一区二区 | 成人精品一区二区不卡视频| 国产探花在线精品一区二区| 国产自产在线视频一区| 日韩人妻无码一区二区三区| 偷拍激情视频一区二区三区| 亚洲国产AV一区二区三区四区 | 杨幂AV污网站在线一区二区| 精品人妻一区二区三区四区在线 | 久久国产三级无码一区二区| 国产主播一区二区| 久久精品免费一区二区喷潮| 国产福利电影一区二区三区,亚洲国模精品一区 | 国产天堂一区二区综合| 亚洲第一区香蕉_国产a| 无码人妻一区二区三区av| 东京热无码av一区二区| 欧美日韩精品一区二区在线视频| 成人乱码一区二区三区av| 无码国产精品一区二区免费虚拟VR| 精品一区二区三区电影| 国产主播福利一区二区| 日韩亚洲AV无码一区二区不卡| 狠狠做深爱婷婷综合一区 | 蜜桃无码AV一区二区| 精品日本一区二区三区在线观看| 人妻互换精品一区二区| 国产精品久久久久久麻豆一区| 免费av一区二区三区| 波多野结衣AV无码久久一区| A国产一区二区免费入口| 中文字幕av人妻少妇一区二区| 69福利视频一区二区| 一区国产传媒国产精品| 日本视频一区在线观看免费| 97av麻豆蜜桃一区二区| 老熟女五十路乱子交尾中出一区| 综合无码一区二区三区| 一区二区视频在线| 亚洲日韩中文字幕一区| 一级特黄性色生活片一区二区|