整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
迎觀看indesign新手教程，小編帶大家學習 InDesign 的基本工具和使用技巧，了解如何使用“屬性”面板、“頁面”面板和其他方法在文檔中的頁面之間導航。
使用InDesign可以創建多頁文檔，如小冊子、時事通訊、雜志、書籍等。使用多個頁面，探索向頁面文檔和非面向頁面文檔之間的區別。學習如何使用pages面板和其他一些方法導航文檔中的頁面。
打開文件，查看此文檔的第一頁，選擇「視圖」-「使頁面適合窗口」。
在Mac上按幾下 Command — 鍵，即可縮小此文檔中的多個頁面。默認情況下，InDesign文檔中的頁面垂直顯示。
每個頁面都有自己的粘貼板，它周圍的灰色區域可以放置無法打印的內容。
現在這個文檔是一個非對頁文檔，因為它只有一頁。非正面文檔的示例包括雙面傳單、名片等。
現在要理解對頁文檔和非對頁文檔之間的區別，首先要創建一個新文檔。要創建新文檔，選擇「文件」-「新建」-「文檔」。
在打開的「新建文檔」對話框中，選擇「打印」后，將在右側看到此「頁面」選項，將頁數更改為8，以便可以查看更多的頁面，保持「對頁」選項處于選中狀態，單擊「邊距和分欄」-「確定」。
打開文檔時，在Mac上按幾次Command — 鍵，縮頁面這樣就可以看到文檔中的所有頁面。
由于此文檔有對頁，因此這些頁彼此相鄰。在InDesign中，每套對頁稱為排列。例如，這個對頁文檔可以成為一本雜志或一本書。
在這里看到的第一頁是封面，這就是為什么它只有一頁開始。
現在，對頁文檔通常要像書籍或雜志一樣裝訂。當你打開或關閉雜志或書籍時，頁面實際上是面對面的。還有一個右手頁和一個左手頁，例如，也許頁碼可以放在相對的角落里。
通過選擇「文件」-「關閉」，可以關閉此文件而不保存。
回到非正面頁面文檔中，選擇「視圖」-「使頁面適合窗口」。
現在將導航頁面，使用左側「工具」面板中的「抓手工具」從一頁拖動到另一頁。
或者使用右邊的滾動條從一頁轉到另一頁。
文檔中的所有頁面都可以在此頁面菜單右側的屬性面板中看到。
還將看到一個名為A-Master的頁面，它是母版頁或用于文檔的模板。
打開「頁面」面板查看文檔中的頁面，這是一種更容易可視化頁面的方法，尤其是在處理較長文檔時。打開「頁面」面板，選擇「窗口」-「頁面」，它應該在右側的此處打開。
在「頁面」面板中的上半部分看到與文檔模板類似的母版頁。
面板的下半部分是文檔中以縮略圖表示的頁面。
在「頁面」面板中從一個頁面移動到另一個頁面，雙擊頁碼5的縮略圖。
該頁面現在是文檔窗口中的活動頁面，因為「頁面」面板中頁面縮略圖之間的數字高亮顯示。
還可以在狀態欄的頁面下方看到頁碼。單擊此菜單，可以在底部看到可用頁數和母版頁。
從該菜單中選擇另一個頁碼，如1，以在文檔窗口中顯示該頁。
還可以單擊這些箭頭導航到上一頁、下一頁等。
使用此菜單或這些箭頭導航時，注意「頁面」面板中的內容，以查看所選內容。
以上就是在 InDesign 中使用手動工具導航的基本知識，使用“屬性和頁面”面板的滾動條，甚至下面狀態欄中的“頁面”菜單，都可以讓您快速開始使用多頁面文檔。
indesign下載地址：Indesign 2021 for mac(Id 2021)https://www.macz.com/mac/7645.html?id=NzY4OTYwJl8mMjcuMTg2LjEyNS4zNw%3D%3D
期開始嘗試將新文章預發表，預發表的文章僅展示在公眾號主頁（不會群發），以供提前預覽，想要看新文章的可以在主頁查看，有問題歡迎隨時指出。新文章會在合適的時間群發給各位小伙伴！
全文約 5800 字，預計閱讀需要 20 分鐘
作為一名前端開發，Chrome Devtools 是最常用的工具之一，它提供了很多實用的調試功能。Chrome 團隊也在一直積極地更新新版本，本文就來盤點自 Chrome 110 以來，Devtools 中新增的實用調試功能，總有一個你用的上！
該版本中，在Elements面板的Styles選項中新增了一個自定義屬性部分。通過使用@property CSS 規則，可以明確地定義CSS自定義屬性，并在樣式表中進行注冊，而無需編寫任何JavaScript代碼。
通過在Elements > Styles中懸停在屬性名稱上，可以查看其描述符并通過工具提示來查看已注冊屬性的詳細信息。點擊工具提示中的鏈接可以展開顯示已注冊屬性的部分。
現在搜索結果會顯示每行代碼中找到的所有匹配項。之前，每行代碼只顯示第一個匹配項。這種新的行為在搜索壓縮文件時特別有用。當點擊搜索結果時，它會在編輯器中打開文件，并且不僅在垂直方向上滾動到匹配位置，還會在水平方向上進行滾動。
此外，搜索功能得到了速度提升。下面是改變前（左側）和改變后（右側）的對比。
另外，搜索功能現在支持忽略列表，并且不會顯示已忽略文件的搜索結果。
現在可以通過拖放的方式重新排列 Sources 面板左側的邊欄。
現在，Sources面板具備以下功能：
DevTools 現在支持更多的導航按鍵操作：
優化了本地覆蓋功能，因此可以在沒有訪問權限的情況下，通過 Network 面板輕松模擬遠程資源的響應頭和網頁內容。
要覆蓋網頁內容，需要打開 Network 面板，右鍵點擊一個請求，然后選擇“Override content”。
如果已經在DevTools中設置了本地覆蓋但將其禁用了，現在 DevTools 會自動啟用本地覆蓋功能。如果尚未設置本地覆蓋，DevTool s會在操作欄中提醒你選擇一個文件夾來存儲覆蓋內容，并授權 DevTools 訪問該文件夾。
設置完本地覆蓋后，DevTools 會進入 Sources > Overrides > Editor 頁面，可以進行網頁內容的覆蓋操作。
請注意，在 Network 面板中，被覆蓋的資源會以“Saved.”的標識顯示。將鼠標懸停在圖標上可以查看哪些內容被覆蓋了。
現在還可以覆蓋XHR和fetch請求的內容。通過這樣的覆蓋，即使后端和API尚未準備好，也可以模擬API的響應來調試網頁。
DevTools 目前支持以下請求類型的內容覆蓋：圖像（例如avif、png）、字體、fetch和XHR、腳本（css和js）以及文檔（html）。對于不支持的類型，DevTools 現在會將“Override content”選項置灰。
為了幫助開發者專注于編寫代碼，因此，Network 面板新增了一個過濾器，過濾掉了可能在Chrome中安裝的擴展程序發送的無關請求。要過濾掉所有發送到chrome-extension:// URL的請求，可以勾選“Hide extension URLs”選項。
此外，DevTools 現在不會嘗試加載擴展程序的源映射文件，因此將不會看到與代碼無關的“無法加載源映射”警告。另外，由代碼導致的類似警告現在會顯示在Sources面板底部的信息欄中，而不是控制臺中顯示。
現在在請求的頭部中，HTTP狀態碼旁邊會顯示易于理解的文本，以便更快地了解請求的處理情況。以往只能看到數字狀態碼，現在還提供了相應的可讀性更強的描述性文本，使得解讀和理解請求的處理結果更加方便。
還可以將鼠標懸停在請求表中的狀態碼上，以查看相同的文本信息。
現在在請求的響應選項卡中，對于具有應用程序/[子類型]+json MIME子類型（如ld+json、hal+json等）的請求，會正確解析響應并提供更美觀的顯示效果?？梢詫憫獢祿M行格式化，使其更易讀和易于理解。以前可能只能以原始的、緊湊的形式展示 JSON 數據，而現在提供了更好的可視化格式化效果。
Performance 面板現在在網絡軌跡中的事件摘要中顯示兩個優先級字段：初始優先級和（最終）優先級，而不僅僅是單一的優先級。通過這個額外的字段，可以看到事件的獲取優先級是否發生了變化，并調整下載順序。
此外，還可以在 Network 面板的優先級列中找到相同的信息，并通過啟用“Big request rows”設置來查看。
現在，默認情況下啟用了 Settings > Preferences > Code folding 選項。該選項允許折疊代碼塊。
如果需要折疊代碼塊，將鼠標懸停在代碼塊開始旁邊的行號上，然后單擊折疊圖標即可。再次單擊{...}以展開該代碼塊。
此外，Settings > Preferences > Automatically reveal files in the sidebar選項現在也默認啟用。該設置使得在切換標簽頁時，Sources -> Page 中的文件樹會選擇當前在編輯器中打開的文件。
Chrome 團隊正在重新引入用戶可能導航到的未來頁面的完全預渲染。為了進行調試，開發者工具將在 Application 面板中添加Preloading 部分。新的預取和預渲染（統稱為“導航預加載”）使用了 Speculation Rules API，而不是基于鏈接的資源提示。
在下面的演示中，在 Application > Preloading 部分，可以檢查以下內容：
DevTools 現在有一個與Chrome更好對齊的全新外觀，并使用了全新的配色方案。使用新顏色前后的對比如下圖所示。
DevTools 進行了多項改進，可幫助您更快地識別和調試缺少樣式表的問題：
在Elements > Styles中的 Easing Editor（緩動編輯器）中，現在支持線性時間函數。
使用 Easing Editor，可以輕松地通過點擊調整過渡時間函數和動畫時間函數的值。在這個版本中，Easing Editor 得到了線性時間函數的支持。
要配置線性時間函數，點擊線性選擇器按鈕。要添加控制點，請在線上任意位置單擊。要刪除控制點，可以雙擊它。還可以選擇預設之一：linear, elastic, bounce, emphasized。
Application > Storage部分現在支持存儲桶。存儲桶是彼此獨立的，因此可以為數據片段指定驅逐優先級，并確保最有價值的數據不會被刪除。每個存儲桶可以存儲與已建立的存儲API（如IndexedDB和CacheStorage）相關的數據。
打開DevTools，導航到Application > Storage > Indexed DB，并運行代碼。DevTools 現在會顯示存儲桶及其內容。選擇一個存儲桶以查看其元數據。
現在，統一的元數據視圖也適用于本地存儲（local storage）、會話存儲（session storage）和緩存存儲（cache storage）部分。
Elements 面板中為子網格（subgrid）添加了一個新的標志。這個功能目前在Chrome Canary中處于實驗階段。要檢查和調試嵌套的子網格，它從父網格繼承軌道的數量和大小，點擊標志即可。它會切換一個覆蓋層，在元素視口的頂部顯示列、行及其編號。
在Elements > Styles中，將鼠標懸停在選擇器名稱上，可在工具提示中查看它的特異性權重（優先級）。
在Elements > Styles中，將鼠標懸停在自定義CSS屬性名稱上，可以查看其取值。
Sources 面板對于預處理的CSS文件，例如SASS、SCSS和LESS，增加了以下功能：
現在可以使用快捷方式更快地設置條件斷點。要打開斷點對話框，請按住 Command (MacOS) 或 Control (Windows / Linux)，然后單擊 Sources > Editor 左側的行號。
現在 Settings > Ignore List > Content scripts injected by extensions默認情況下是啟用的。啟用此設置后：
此外，忽略列表的選項有了更清晰的文本。
默認情況下，Network > Response 現在會對壓縮過的響應體進行格式美化，與 Sources 面板類似。
此外，SVG 文件還具有語法突出顯示功能。
Devtools 默認開啟 Settings > Experiments > WebAssembly Debugging: Enable DWARF support 。
這個實驗特性可以讓開發者在 Wasm 應用中暫停執行和調試 C 和 C++ 代碼，同時提供了所有的調試信息：
Chrome的自動填充功能可以根據保存的信息（如地址或支付信息）自動填寫表單。為了幫助開發者輕松調試與自動填充相關的問題，Elements面板現在可以用紅色波浪線突出顯示這些問題。
要查看此功能，需要啟用設置：Settings > Experiments > Highlights a violating node or attribute in the Elements panel DOM tree 。
在DOM樹中將鼠標懸停在突出顯示的問題上，然后點擊"View issue"，就會打開Issues標簽頁，其中列出了所有檢測到的問題并提供關于出錯原因的線索。
現在，Recorder 面板允許在錄制過程中添加斷言，并提供所有運行時數據。
要添加斷言，需要開始新的錄制，與頁面進行交互，然后點擊"Add assertion"。Recorder 會插入一個waitForElement類型的步驟，可以進行自定義。
還可以配置用來斷言的步驟，例如JavaScript中的條件語句、節點的子元素數、元素可見性等。
現在可以在 Network 面板中覆蓋響應頭。之前，需要訪問Web服務器才能嘗試更改HTTP響應頭。
通過響應頭覆蓋，可以在本地原型化修復各種頭部，其中包括但不限于：
要覆蓋一個頭，可以導航至 Network > Headers > Response Headers，將鼠標懸停在頭部的值上，點擊編輯，并進行修改。
也可以添加自定義頭：
要在一個地方編輯所有的覆蓋設置，請編輯Sources > Overrides中的".headers"文件。在這個文件中，還可以點擊 Add override rule，使用通配符(*)來覆蓋多個請求。
為了幫助開發者在調試過程中更快地找出問題，增強的堆棧跟蹤現在隱藏了來自 Nuxt 3.3 或更高版本生成的源代碼中的幀。DevTools會跳過這些幀：
為了實現這些改進，DevTools、Nuxt、Vite 和 Rollup 團隊合作采用了"X-Google-IgnoreList"源映射擴展：
為了幫助開發者更快地診斷CSS問題，Styles 面板現在會在以下情況下劃掉CSS屬性和值：
現在，[animation](https://developer.mozilla.org/docs/Web/CSS/animation)簡寫 CSS 屬性中包含了指向對應 @keyframes 規則的鏈接，這樣可以更快地在 Styles 面板中導航。
從之前的版本（112）開始，可以配置開發者工具控制臺在按下回車鍵時應用自動完成建議。
默認情況下，要接受自動完成建議，可以按Tab鍵或右箭頭。為了也能夠使用回車鍵進行自動完成，需要啟用設置Settings > Console > Accept autocomplete suggestion on Enter.
此外，另一個設置的文本現在更加用戶友好：Treat code evaluation as user action.
命令菜單中的快速打開對話框現在會將列入忽略列表的第三方文件變灰，以更加強調編寫的文件。
Recorder引入了一個新的導出選項：Puppeteer（包括 Lighthouse 分析）。使用Puppeteer，您可以自動化和控制 Chrome。借助 Lighthouse 可以捕獲并提高網站的性能。
打開錄制，在點擊下載按鈕。選擇 Export 選項，然后保存為 .js 文件。
運行Puppeteer腳本，以獲得一個Lighthouse報告，并保存在flow.report.html文件中。
現在，Elements > Styles 面板在鼠標懸停在屬性上時會顯示一個簡短的描述。
工具提示中還有一個“ Learn more”鏈接，該鏈接會轉到該屬性的MDN CSS參考文檔。
如果對CSS非常了解，可能會覺得這個提示很煩人?？梢怨催x Don't show 來關閉所有工具提示。
要重新打開它們，就需要進行如下設置：Settings > Preferences > Elements > Show CSS documentation tooltip。
Elements > Styles 面板現在支持CSS嵌套語法，并將嵌套樣式應用于相應的元素。
進一步改進增強的斷點用戶體驗，控制臺現在標記由斷點觸發的消息：
現在，控制臺會給出適當的源文件中斷點的錨鏈接，而不再是Chrome創建的用于在V8上運行任何JavaScript片段的VM<number>腳本。
單擊斷點消息旁邊的鏈接可直接跳轉到斷點編輯器。
為了幫助開發者專注于代碼的關鍵部分，現在可以直接從Sources > Page面板上的文件樹中將不相關的腳本添加到"忽略列表"中。
右鍵單擊任何腳本或文件夾，然后選擇與忽略相關的選項之一。可能會看到將腳本或文件夾添加到列表中或從列表中移除的選項。調試器會忽略添加到列表中的腳本，并在調用堆棧中省略它們。
所有添加到忽略列表的腳本和文件夾在文件樹中都會顯示為灰色。
如果選擇了一個被忽略的腳本，點擊Configure按鈕會轉到 Settings > Ignore List。
在Web上，將引入新的CSS顏色類型和色彩空間，DevTools 也引入了新工具來幫助開發人員創建、轉換和調試高清色彩。Styles面板現在支持CSS顏色級別4規范中提到的12種新色彩空間和7種新色域。
以下是使用color()、lch()、oklab()和color-mix()的CSS顏色定義例子。
使用 color-mix() 函數時，可以在Computed邊欄中查看最終顏色輸出。
顏色選擇器支持所有新的顏色空間，并有更多的功能。例如，點擊 color(display-p3 1 0 1) 的顏色色塊。還增加了一條色域邊界線，區分了 sRGB 和 display-p3 色域，以便更清楚地了解你所選顏色的色域。
DevTools 支持在不同的顏色格式之間進行轉換。可以使用"更改顏色格式"圖標來訪問轉換彈窗，或者在Styles面板中按住Shift鍵并點擊顏色進行轉換。
在進行轉換時，了解是否對顏色進行了裁剪以適應空間尺寸非常重要。DevTools會在轉換后的顏色旁邊放置一個警告圖標，提醒該顏色是否被裁剪。
此外，還可以使用新的快捷鍵從屏幕上拾取顏色。按下"c"鍵激活吸管工具，按下Escape鍵取消激活。吸管工具僅在sRGB色彩空間中采樣顏色。例如，如果嘗試采樣超出sRGB色彩空間的color(display-p3 1 0 1)顏色，吸管工具將會將該顏色裁剪為sRGB空間中最接近的顏色，即洋紅色(color(display-p3 0.92 0.2 0.97))。
最后，顏色格式設置現已被棄用，為新的高清色彩格式騰出空間。
重新設計的斷點邊欄允許快速訪問常用功能，特別是停用、編輯和刪除斷點。
以下是一些亮點：
使用快捷鍵可以更快地記錄和重放用戶流程。Recorder 引入了幾個方便的快捷鍵，可加快用戶流程的錄制和重放速度。忘記快捷鍵了？沒問題，隨時點擊"?"按鈕查看所有快捷鍵。
也可以通過Settings菜單自定義這些快捷方式。
如果正在使用其他面板中，并且想要開始錄制用戶流程，可以使用DevTools中的命令菜單中的"Create a new recording"命令來開始錄制。
現在可以在 Application 面板的 Cache 部分找到 Cache Store ，而 Back/forward cache已移至Background Services部分。
心箭頭
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>實心箭頭</title>
<style>
.con{
width: 300px;
height: 300px;
border: 1px solid #ccc;
margin: 50px auto;
background-color:#ccc;
}
.arrow-top{
border-bottom: 10px solid #fff;
border-right: 10px solid #fff;
border-left: 10px solid #fff;
border-top: 10px solid #ccc;
width: 0px;
height: 0px;
position: relative;
top:-40px;
left:100px;
}
.arrow-bottom{
border-bottom: 10px solid #fff;
border-right: 10px solid #fff;
border-left: 10px solid #fff;
border-top: 10px solid #ccc;
width: 0px;
height: 0px;
position: relative;
top:-40px;
left:100px;
}
</style>
</head>
<body>
<div class="con">
<div class="arrow-top"> </div>
</div>
</body>
</html>非實心箭頭
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
