Google Web Designer 是一款先進的網絡應用，可讓您利用直觀的集成式代碼界面設計和製作HTML5 廣告以及其他網絡內容。通過Google Web Designer 的設計視圖，您不僅可以利用繪圖工具、文字和3D 對象創建內容，還可以為時間軸上的對象和事件添加動畫效果。

通過Google Web Designer 的代碼視圖，您可以創建CSS、JavaScript 和XML 文件。此外，該視圖還採用了語法突出顯示和代碼自動填充功能，可讓代碼編寫變得更簡單，且錯誤更少。

創建好內容後，您可以利用Google Web Designer 的自適應佈局工具針對多種屏幕尺寸設置內容的樣式，然後以清晰明了的HTML5、CSS3 和JavaScript 發布您的最終文檔。

Google Web Designer 還提供了一個組件庫，您可以利用該組件庫為您的網站和廣告添加圖庫、視頻、地圖和其他功能。Google Web Designer 可免費下載和使用。

Google Web Designer 推出了新版本！該版本中增加了5 個方面的功能，並修正了15 個問題。如需更多詳細信息，請參閱下文。

下載Google Web Designer 6.0：

https://webdesigner.withgoogle.com/

更新Google Web Designer

如果您已連接到互聯網，Google Web Designer會在啟動時自動進行更新。您也可以下載最新版本。

6.0.0.0710 版本中的新功能改進了代碼視圖

• 現在，系統會自動隱藏設計視圖面板和工具欄，讓您可以在更寬闊的區域內查看代碼。
• 通過新增的“文件”面板，您可以在項目文件夾中瀏覽和打開其他文件。
• 使用迷你地圖簡要地查看代碼並進行快速導航。
• 收起和展開代碼塊。
• 系統會在您輸入時自動顯示代碼補全建議。

“事件”面板佈局

• “事件”面板現在會在可調整大小的列中顯示信息。
• 您可以通過將事件拖動到列表中的新位置來對其重新排序。

自適應圖片的焦點

• 設置一個焦點，以使圖片的關鍵部分始終可見​​，這樣就不會在調整圖片大小時將其剪裁掉。

互動視頻

• 通過“視頻”組件，您可以添加顯示在視頻上的熱點。
• 設置廣告插入點，以便在視頻播放期間的特定時刻尋找或觸發事件。

在CSS 面板中修改關鍵幀規則

• 現在，您可以在設計視圖中查看並直接修改CSS 動畫關鍵幀規則。

版本6.0.0.0710 中的新模板

Dynamic remarketing for Google Ads模板類別中新增了以下2個模板：

• Responsive Dynamic Remarketing Travel Block Details
• Responsive Dynamic Remarketing Travel Pennant Details

其他值得注意的變化

• 文檔標籤現在會顯示較長的文件名。
• 廣告驗證工具會顯示一條警告，指出即將停止對“地圖”組件的Google Fusion Tables提供支持。

版本6.0.0.0710 中解決的問題和進行的改進組件和運行時

• [星級] 修正了“星級”組件的呈現問題。
• [YouTube] 顯示標題屬性已被移除，因為showinfo參數已棄用。
• 修正了以下問題：“屬性”面板無法更新以顯示自定義組件屬性。

發布

• [發佈到Display & Video 360] 修正了以下問題：“廣告素材名稱”字段在未選擇廣告客戶時處於啟用狀態。
• [發佈到Display & Video 360] 現在，當您取消關聯並清除設置後，“發布”對話框中的“發布”按鈕已停用。

時間軸和動畫

• 修正了封裝和未封裝元素無法更新動畫選擇器的問題。
• 修正了以下問題：選擇某個關鍵幀，然後在按住Shift 鍵的同時拖動以選擇其他關鍵幀後，會發生崩潰。

工作區（面板和界面）

• 修正了保存名稱為空的工作區時出錯的問題。
• 文檔標籤溢出下拉列表現在會顯示完整的文件名。

其他

• 現在，廣告驗證工具會為使用App Promo Install template 創建的廣告顯示正確的尺寸上限。
• 修正了打開包含特定圖片網址的文件時發生崩潰的問題。
• 修正了以下問題：對於已應用文字調整的元素的子項，系統不會保存動態數據綁定。
• [發佈到Display & Video 360]修正了以下問題：廣告素材字段在未選擇廣告客戶時處於啟用狀態。
• [AMP] 現在，您可以在CSS 面板中查看和修改內嵌樣式規則。
• [AMP] 現在，您可以在AMPHTML 廣告中使用動畫路徑。

已知問題

• 對自定義Google Web Designer元素（、、、和）的引用可能無法按預期運行。了解如何更新您的引用。gWD-videogwd-audiogwd-iframegwd-pagegwd-pagedeck
• 當您直接在瀏覽器中打開.html 源文件時，時間軸動畫事件（如暫停或循環播放）不能正常運行。這個問題是預料之中的，因為預覽或發布文檔時會生成時間軸動畫CSS。解決方案：使用“預覽”按鈕；或者先在本地發布文檔，然後在瀏覽器中查看發布的文件。
• 缺少文件擴展名且文件名中包含點號的圖片文件無法導入到資源庫中。臨時解決方法：為文件名添加文件擴展名（如.png）。
• 過時的視頻驅動程序可能會導致啟動時出現黑屏。請嘗試更新視頻驅動程序。如果無效，請在重新啟動之前停用GPU 渲染- 具體方法是：退出Google Web Designer，然後按照下文中與您的操作系統對應的說明操作：
  • Windows：向註冊表中的HKEY_CURRENT_USERSoftwareGoogleWeb DesignerSettings添加一個名為disable-gpu-rendering的DWORD32值，並將此值設為1。
  • Mac：向~/Library/Preferences/com.google.WebDesigner.plist添加一個名為disable-gpu-rendering且值為YES的布爾值行，或者在終端中運行defaults write com.google.WebDesigner.plist disable-gpu-rendering -bool true。
  • Linux：向~/.local/share/google-web-designer/preferences/settings.conf添加一個名為disable-gpu-rendering且值為true的行。（如果[Settings]部分不存在，您將需要先創建該部分。）
• 當廣告在Mac Safari 上重新展開時，要想讓視頻自動播放，第一個視頻源文件應為.mp4 格式。
• 僅當“縮放比例”設為“拉伸”時，圖片的漸變背景填充效果才會呈現。
• 最多只能將4 個面板納入同一群組/標籤中。
• 如果使用網絡代理，啟動時會出現白屏。請按照這些說明更改您的代理設置。
• Mac Chrome、Opera、IE：啟用自動播放預覽後，無法在Google Web Designer 預覽中正常使用“播放”按鈕。臨時解決方法：從網址中移除localhost，改為使用file:///
• 僅限Linux：無法將文件從文件系統拖放到Google Web Designer 中。臨時解決方法：使用“文件”>“導入素材資源”，或“資源庫”中的“添加素材資源”。
• Safari 桌面瀏覽器不支持下載iCalendar ics 文件。
• 無法使用多個“地圖”組件或“街景”組件，也無法在同一個廣告素材中同時使用“地圖”組件和“街景”組件。
• 僅限Linux：在Google Web Designer 出於預覽目的而啟動瀏覽器（Chrome 或Firefox）後，必須先關閉瀏覽器，才能關閉Google Web Designer。
• 僅限Linux：在切換應用時，Google Web Designer 有時會失去焦點，且無法使用鍵盤輸入。臨時解決方法：調整Google Web Designer 窗口大小，讓此應用重新具有焦點。
• 僅限Linux：如果渲染程序崩潰了，且出現了白屏，請在Google Web Designer設置部分將disable-gpu-rendering設為true，然後，向~/.local/share/google-web-designer/preferences/settings.conf添加一個名為disable-gpu-rendering且值為true的行。（如果[Settings]部分不存在，您將需要先創建該部分。）