WebDeveloper插件Outline、Resize工具教程

4年前 (2021-08-23)閱讀621回復(fù)0
倪夏青
倪夏青
  • 管理員
  • 發(fā)消息
  • 注冊(cè)排名1729
  • 經(jīng)驗(yàn)值60
  • 級(jí)別管理員
  • 主題12
  • 回復(fù)0
樓主
印刷廠直印加工●彩頁1000張只需要69元●名片5元每盒-更多產(chǎn)品印刷報(bào)價(jià)?聯(lián)系電話:138-1621-1622(微信同號(hào))

  Outline線框工具  提供將元素使用線框標(biāo)識(shí)出來的功能CADtools 標(biāo)注不顯示數(shù)值。我們可以輔助查看各細(xì)部的元件。如下圖:

  我們列舉一此常用的功能如下:

  1、Outline Frames 線框顯示出框架,?cè)绻褂昧丝蚣芗夹g(shù),可以用線條標(biāo)注出來CADtools 標(biāo)注不顯示數(shù)值。

  2、Outline Headings 標(biāo)注標(biāo)題元素,?cè)绻撁嬷惺褂昧薶1~h6對(duì)象,會(huì)用線條標(biāo)注出來CADtools 標(biāo)注不顯示數(shù)值。

  3、Outline Table Cells 標(biāo)注單元格,?cè)绻撁媸怯脗鹘y(tǒng)的表格進(jìn)行布局,往往表格線是不可見的,表格只是布局的需要,根本沒有邊框線,使用這個(gè)命令可以將它們都用線框標(biāo)識(shí)出來CADtools 標(biāo)注不顯示數(shù)值。

  4、Outline Tables 類似于上面一個(gè)命令,區(qū)別在于上面的是顯示單元格,而這個(gè)命令只顯示表格CADtools 標(biāo)注不顯示數(shù)值。如上面的顯示的是tr、td。這個(gè)命令只顯示table。

  5、Outline BLock Level Elements 標(biāo)注出對(duì)象的嵌套級(jí)別CADtools 標(biāo)注不顯示數(shù)值。

  6、Outline Deprecated Elements 標(biāo)注出網(wǎng)頁中存在的不合法的對(duì)象CADtools 標(biāo)注不顯示數(shù)值。合法與否根據(jù)網(wǎng)頁的文檔對(duì)象模型doctype來判斷。

  7、Outline Positioned Elements 標(biāo)注出定位對(duì)象,可以單獨(dú)的標(biāo)注出來四種定位方式:Absolute、Fixed、Float、RelativeCADtools 標(biāo)注不顯示數(shù)值。

  8、Outline External Links 標(biāo)注出外部鏈接,請(qǐng)注意是指鏈接向站外的鏈接,外部鏈接CADtools 標(biāo)注不顯示數(shù)值。

  9、Outline Links Without Title Attributes 標(biāo)識(shí)出所有的顯示,并且不顯示title屬性的值CADtools 標(biāo)注不顯示數(shù)值。

  10、Outline Current Element 標(biāo)識(shí)鼠標(biāo)位置的當(dāng)前對(duì)象CADtools 標(biāo)注不顯示數(shù)值。

  11、Outline Custom Elements 自定義標(biāo)注,點(diǎn)選該命令會(huì)打開對(duì)象框,要求設(shè)置標(biāo)注哪些對(duì)象,?cè)珂I入“h1”,并設(shè)置相應(yīng)的顏色CADtools 標(biāo)注不顯示數(shù)值。

  12、Show Element Names When Outlining 點(diǎn)選該命令會(huì)在標(biāo)注的同時(shí),顯示對(duì)象的名稱CADtools 標(biāo)注不顯示數(shù)值。

  Resize尺寸工具 這是一個(gè)小巧而實(shí)用的工具,我們可以利用它來改變窗口的大小,我們?cè)陂_發(fā)CSS網(wǎng)頁布局時(shí),屏幕尺寸或許很大,但要兼顧到小尺寸的訪客的需求,我們可以用此工具來預(yù)覽小尺寸顯示的效果CADtools 標(biāo)注不顯示數(shù)值。如下圖:

  1、Display Window Size 顯示當(dāng)前窗口的大小,點(diǎn)選該命令會(huì)直接彈出一個(gè)對(duì)話框顯示信息CADtools 標(biāo)注不顯示數(shù)值。

  2、Display Window Size In Title 將窗口的大小放置于標(biāo)題欄,這是一個(gè)非常方便的功能,我們可以自由的拖動(dòng)縮放窗口的大小,在標(biāo)題欄立即就能知道當(dāng)前的窗口是多大CADtools 標(biāo)注不顯示數(shù)值。如下圖:

  3、Resize Window 可以鍵入數(shù)值修改窗口的大小CADtools 標(biāo)注不顯示數(shù)值。

  4、800*600 在網(wǎng)頁設(shè)計(jì)制作中,最需要關(guān)注的就是800*600大小的窗口中顯示的情況,Web Developer插件預(yù)設(shè)了這個(gè)尺寸CADtools 標(biāo)注不顯示數(shù)值。直接點(diǎn)選即可。

021yin.com 這里有一些教程或許可以助你一臂之力,我們也提供了一些CSS模板大家可以下載學(xué)習(xí),我們也列出一些CSS優(yōu)秀站點(diǎn),大家可以多看大師的作品!祝愿大家盡快的掌握CSS技術(shù),為WEB標(biāo)準(zhǔn)在中國(guó)的普及作出自己的貢獻(xiàn)!

021yin.com yumi 54

0
0
收藏0
回帖

WebDeveloper插件Outline、Resize工具教程 期待您的回復(fù)!

取消
載入表情清單……
載入顏色清單……
插入網(wǎng)絡(luò)圖片

取消確定

圖片上傳中
編輯器信息
提示信息