精品日韩,日韩综合,亚洲成人av在线

您所在的位置：單機(jī)100手游網(wǎng) > 電腦應(yīng)用 > CoffeeCup Responsive Site Designer(可視化網(wǎng)頁(yè)制作軟件) v5.1 官方版

CoffeeCup Responsive Site Designer(可視化網(wǎng)頁(yè)制作軟件)

電腦版下載
手机扫描下载

扫描访问手机版

類型：電腦應(yīng)用性質(zhì)：國(guó)外軟件版本：v5.1 官方版大小：170 MB更新：2025-01-07語(yǔ)言：英文等級(jí)：平臺(tái)：WinXP, Win7, Win8, Win10, WinAll官網(wǎng)：https://www.coffeecup.com/designer/

千尋鼠標(biāo)鎖(把鼠標(biāo)鎖定在窗口里)265 KB電腦應(yīng)用

計(jì)時(shí)器提醒軟件1.53 MB電腦應(yīng)用

鼠標(biāo)點(diǎn)擊特效軟件51.8 MB電腦應(yīng)用

ZPAY TimeBillingWindow(收費(fèi)計(jì)時(shí)器)15.7 MB電腦應(yīng)用

提醒小工具35.5 MB電腦應(yīng)用

推薦應(yīng)用

谷歌瀏覽器正式版/穩(wěn)定版(Google Chrome)106.83 MB電腦應(yīng)用

qq音樂(lè)pc端67.42 MB電腦應(yīng)用

騰訊應(yīng)用寶pc版6.54 MB電腦應(yīng)用

搜狗輸入法PC版146.31 MB電腦應(yīng)用

360極速瀏覽器pc版安裝包67.12 MB電腦應(yīng)用

騰訊視頻pc客戶端90.95 MB電腦應(yīng)用

應(yīng)用介紹應(yīng)用截圖相關(guān)版本網(wǎng)友評(píng)論下載地址
單機(jī)100網(wǎng)為您推薦：網(wǎng)頁(yè)設(shè)計(jì)

　　Site Designer提供網(wǎng)站設(shè)計(jì)功能，可以在這款軟件設(shè)計(jì)新的網(wǎng)站頁(yè)面內(nèi)容，軟件已經(jīng)提供了主題模板，雙擊一個(gè)模板就可以加載到設(shè)計(jì)區(qū)域使用，您可以點(diǎn)擊模板中的任意設(shè)計(jì)樣式編輯，例如點(diǎn)擊菜單按鈕、添加文字內(nèi)容、添加表單內(nèi)容，點(diǎn)擊圖像內(nèi)容，點(diǎn)擊任意網(wǎng)頁(yè)元素都可以在右側(cè)顯示設(shè)計(jì)頁(yè)面，從而對(duì)多個(gè)網(wǎng)頁(yè)元素調(diào)整新的樣式，支持對(duì)文字調(diào)整新的大小，設(shè)置新的排列方式，支持對(duì)圖像內(nèi)容設(shè)置顯示特效，支持對(duì)網(wǎng)頁(yè)內(nèi)容設(shè)置顏色效果，可以編輯的內(nèi)容非常多的，適合專業(yè)設(shè)計(jì)人員使用。

CoffeeCup Responsive Site Designer(可視化網(wǎng)頁(yè)制作軟件)

軟件功能

　　使用 Components Library 更快地構(gòu)建您的網(wǎng)站。

　　Site Designer 中的可自定義組件將幫助您更快地工作，而不會(huì)限制創(chuàng)作自由。這些高級(jí)“即插即用”項(xiàng)目包括您希望任何網(wǎng)站都包含的所有基本功能。由于它們是預(yù)制的，因此您不必浪費(fèi)時(shí)間自己手工制作它們。

　　組件

　　忘記重復(fù)的設(shè)計(jì)工作，使用 Component Library 加快生產(chǎn)時(shí)間。保存和重用其他項(xiàng)目中的項(xiàng)。

　　符號(hào)

　　將導(dǎo)航欄、頁(yè)腳、訂閱表格等轉(zhuǎn)換為符號(hào)，您只需一次編輯即可在整個(gè)網(wǎng)站中更改。

　　元素

　　用 HTML5 提供的所有內(nèi)容填充空白畫布。將原始元素拖入并根據(jù)需要設(shè)置其樣式

　　檢查

　　檢查器為您提供頁(yè)面內(nèi)容的詳細(xì)概述。搜索詞以向下鉆取到元素級(jí)別，并查看 CSS 標(biāo)記。

　　自定義代碼

　　在或頁(yè)面的任何地方使用 javascript 和 CSS 樣式表。全屏享受我們的代碼編輯器對(duì)話框。

　　CSS 網(wǎng)格

　　通過(guò)調(diào)整列和行來(lái)創(chuàng)建無(wú)縫布局，并跨越元素，讓您的設(shè)計(jì)栩栩如生。要么在那里，要么方正。

　　彈性盒

　　只需輕按一下按鈕，即可對(duì)齊、堆疊或重新排序元素。這是一個(gè)非凡的工具，應(yīng)該成為任何響應(yīng)式設(shè)計(jì)工具包的一部分。

　　自定義斷點(diǎn)

　　享受任何像素寬度的自定義斷點(diǎn)的自由。讓您的內(nèi)容決定需要它們的位置，并完全控制任何屏幕設(shè)備。

　　設(shè)備視圖

　　輕松預(yù)覽各種現(xiàn)代設(shè)備。您可以將任何屏幕尺寸添加到設(shè)備列表中。您還可以在任何瀏覽器上快速預(yù)覽。

　　回退功能

　　為最廣泛的瀏覽器支持（包括祖父 IE）進(jìn)行設(shè)計(jì)，并針對(duì)支持最新和最出色的 CSS 屬性的瀏覽器進(jìn)行增強(qiáng)。

　　導(dǎo)出 Clean Code

　　導(dǎo)出干凈、語(yǔ)義化且符合 W3C 標(biāo)準(zhǔn)的代碼。只需點(diǎn)擊一下即可從您的硬盤驅(qū)動(dòng)器獲取您的HTML和CSS、JavaScript、圖像和其他資產(chǎn)。

軟件特色

　　1、CSS 框架

　　從 Bootstrap、Materialize、Foundation 或 Vanila CSS 框架開始。

　　2、模板

　　害怕空白的畫布？通過(guò)選擇其中一個(gè)專業(yè)模板快速入門

　　3、內(nèi)容元素

　　將容器、圖像、視頻、按鈕、圖標(biāo)等元素拖放到畫布上。

　　4、資源庫(kù)

　　在 Project 資源庫(kù)中組織圖像、文檔和其他資源。

　　5、文本編輯器

　　使用功能強(qiáng)大的文本編輯器直接在畫布上鍵入、粘貼或編輯文本。

　　6、HTML 元素

　　代碼鑒賞家可以通過(guò)使用 HTML 元素注入 HTML 腳本來(lái)瘋狂。

　　7、CSS 的強(qiáng)大功能

　　填充、邊距、浮點(diǎn)數(shù)、顯示、位置、溢出、邊框（半徑）、背景（圖像）、寬度（最小值、最大值）、高度（最小值、最大值）、縮放、平移、旋轉(zhuǎn)、傾斜、不透明度、框陰影、過(guò)渡等等。

　　8、相互作用

　　設(shè)計(jì)用于與懸停、活動(dòng)和按下?tīng)顟B(tài)控件的交互。創(chuàng)建強(qiáng)大的 3D 效果，使網(wǎng)站內(nèi)容栩栩如生。

使用方法

　　1、將Site Designer直接安裝到電腦，設(shè)置軟件的安裝地址

　　2、主題模板選擇界面：Black Bikes、Black-Forest、Blank、Carrera Customs、Dart

　　3、設(shè)計(jì)界面如圖所示，可以點(diǎn)擊左側(cè)的模板頁(yè)面內(nèi)容，在右側(cè)查看設(shè)計(jì)參數(shù)

　　4、發(fā)布功能將使您的設(shè)計(jì)一鍵生效，并快速同步未來(lái)的更新。您可以添加自定義域并發(fā)布生產(chǎn)就緒的網(wǎng)站，或者只使用此選項(xiàng)進(jìn)行輕松共享和協(xié)作。要將您的網(wǎng)站放置在其他服務(wù)器上，請(qǐng)使用導(dǎo)出選項(xiàng)

　　5、頁(yè)面操作：激活頁(yè)面、下一頁(yè)、上一頁(yè)、添加空白頁(yè)、復(fù)制當(dāng)前頁(yè)面

　　6、切換斷點(diǎn)：默認(rèn)模式、關(guān)閉所有斷點(diǎn)、僅在斷點(diǎn)處應(yīng)用樣式：576像素、768像素、992像素、1200像素

　　7、菜單內(nèi)容：頁(yè)面管理器、偏好、資源、組件、設(shè)計(jì)用于、結(jié)構(gòu)數(shù)據(jù)、切換斷點(diǎn)、設(shè)置滑塊位置、更改顯示單位

　　8、幫助菜單：幫助對(duì)話框、網(wǎng)站設(shè)計(jì)者用戶指南、參觀CoffeeCup學(xué)院、框架文件、網(wǎng)站設(shè)計(jì)師技巧

官方教程

　　CSS 網(wǎng)格 - 基礎(chǔ)

　　CSS 網(wǎng)格布局是 CSS 中最強(qiáng)大的布局控件。它是一個(gè)處理行和列的二維系統(tǒng)。“網(wǎng)格”非常適合模塊化設(shè)計(jì)方法。用于管理主要頁(yè)面區(qū)域或元素的小組合。

　　該系統(tǒng)允許您在不使用浮子和其他定位方法的情況下進(jìn)行設(shè)計(jì)。

　　將頁(yè)面內(nèi)容組織到 Container 元素中，然后在其中相應(yīng)地放置內(nèi)容。您基本上在 Container 中構(gòu)建了一個(gè)迷你網(wǎng)格。可以直接告訴父元素中的子元素在網(wǎng)格中的位置。您可以為每個(gè)項(xiàng)目指定一個(gè)區(qū)域名稱，也可以為其指定與所需行匹配的坐標(biāo)。

　　我們看到 Grid 是 Web 上內(nèi)容的首選布局方法——尤其是現(xiàn)在所有現(xiàn)代瀏覽器都支持它。

　　CSS 網(wǎng)格 - 創(chuàng)建布局

　　要激活 CSS 網(wǎng)格控件，請(qǐng)選擇畫布上的任何 Container 元素，然后轉(zhuǎn)到 Layout（布局）> Display > Grid（顯示網(wǎng)格）> Styles（樣式）窗格。點(diǎn)擊 Launch Grid Editor 按鈕打開 Grid 控制面板。

　　在此面板中，您將找到用于設(shè)置 Grid 的最重要控件。請(qǐng)注意，您可以在面板中附加控件，也可以使用“Attach as right panel”或“Center in app”綠色按鈕作為對(duì)話框附加控件。

　　讓我們通過(guò)一個(gè)例子來(lái)理解 CSS 網(wǎng)格的概念。

　　1. 配置父容器和子容器

　　首先，我們將為我們的布局準(zhǔn)備基本結(jié)構(gòu)。我們將使用最小高度為 100vh 的父容器（“vh”是代表視口高度的 CSS 單位）。這樣，父容器將至少占據(jù)畫布高度的 100%。

　　然后，我們可以在將成為此父級(jí)的子級(jí)的容器中拖動(dòng)。我們還將為每個(gè)它們應(yīng)用不同的顏色。這樣我們就可以輕松識(shí)別它們。此外，請(qǐng)記住為每個(gè)容器添加有意義的類名。

　　2. 為子容器配置基于網(wǎng)格區(qū)域的名稱

　　我們將為所有子容器命名，以命名它們將被放置在的網(wǎng)格區(qū)域。為此，您需要轉(zhuǎn)到每個(gè)元素的 Layout > Grid 和 Flexbox Layout 部分> Styles 窗格。然后在 Grid 子部分 > Grid 控件中，使用下拉框選擇 Grid Area Based Placement。

　　在 Name 框中，刪除占位符 'elementArea' 并輸入您將在下一步的 Grid Settings 中使用的元素名稱。我們將在示例中使用以下名稱：“header”、“article-1”、“article-2”和“footer”。

　　3. 在父節(jié)點(diǎn)上配置 Grid

　　在畫布上選擇父 Container 元素，然后轉(zhuǎn)到 Layout > Display > Grid > Styles 窗格。點(diǎn)擊 Launch Grid Editor 按鈕打開 Grid 控制面板。

　　啟動(dòng) Grid Editor 后，您現(xiàn)在可以開始創(chuàng)建網(wǎng)格布局。網(wǎng)格列和行 — 網(wǎng)格軌道 — 使用相應(yīng)的 + 按鈕添加。

　　現(xiàn)在我們已經(jīng)準(zhǔn)備好了基本結(jié)構(gòu)，讓我們?cè)诖私Y(jié)構(gòu)中分配我們之前配置的網(wǎng)格區(qū)域名稱。為此，只需單擊一個(gè)單元格以打開文本輸入框（橢圓形）。您可以直接在單元格中或在 Selection Settings Cell Name 框下的相應(yīng)控件區(qū)域中輸入名稱。

　　注：輸入單元格名稱時(shí)，請(qǐng)務(wù)必從名稱中刪除點(diǎn) “.” 。僅當(dāng)您希望將該單元格留空時(shí)，該點(diǎn)才會(huì)保留在單元格中。

　　4. 固定網(wǎng)格

　　現(xiàn)在，讓我們更改行的大小，以便為網(wǎng)格中間的兩個(gè)區(qū)域提供更大的內(nèi)容。

　　為此，我們需要配置 row（或 column，如果需要）設(shè)置。只需單擊文本 “auto” 一側(cè)的標(biāo)題即可。網(wǎng)格生成器下方的面板將發(fā)生變化，顯示相應(yīng)的 Selection Settings。

　　我們將對(duì)第一行和最后一行應(yīng)用 MinMax 的 Height，我們將在 Min 字段中輸入“25vh”，并為 Max 保留“auto”。這樣，這些行將至少占據(jù)畫布的 25% 高度，并且由于我們?yōu)?Max 設(shè)置了 “auto”，因此如果它需要增長(zhǎng)，它將自動(dòng)增長(zhǎng)。

　　然后，對(duì)于中間行，我們還將應(yīng)用 MinMax 的高度，我們將在 Min 字段上輸入“50vh”，并為 Max 保留“auto”。

　　5. 向 Grid 添加一些內(nèi)容

　　現(xiàn)在我們準(zhǔn)備向網(wǎng)格區(qū)域添加一些內(nèi)容。對(duì)于此示例，我們只添加一些標(biāo)題來(lái)標(biāo)識(shí)每個(gè)部分。在現(xiàn)實(shí)生活中，我們將在 “header” 上添加導(dǎo)航，在 “footer” 上添加一些鏈接，并在 “article-1” 和 “article-2” 上添加適當(dāng)?shù)膬?nèi)容。

　　6. 使 Grid 具有響應(yīng)性

　　當(dāng)我們移動(dòng)滑塊以查看它在較小設(shè)備上的外觀時(shí)，我們發(fā)現(xiàn)“article-1”和“article-2”的空間太小。對(duì)于這種情況，我們希望兩個(gè)部分堆疊在一起，而不是彼此相鄰。

　　因此，讓我們將滑塊移動(dòng)到我們認(rèn)為需要堆棧發(fā)生的位置，并在該位置添加一個(gè)斷點(diǎn)（如果還沒(méi)有的話）。在此斷點(diǎn)上，我們將添加布局的 switch，因此我們需要確保斷點(diǎn)處于活動(dòng)狀態(tài)。我們可以點(diǎn)擊它，或者看看它里面是否有更暗的標(biāo)記。

　　一旦我們到達(dá)斷點(diǎn)，我們就可以應(yīng)用堆棧了。我們將再次啟動(dòng) Grid Editor 來(lái)修改設(shè)置。我們將從相應(yīng)的 + 按鈕添加一個(gè)新行。然后我們還需要修改大小，所以現(xiàn)在所有行都將有 25vh，就像我們?cè)诘?4 步中所做的那樣。

　　最后，我們只需要重命名區(qū)域，使每行都有名稱 “header”、“article-1”、“article-2” 和 “footer” 之一。

　　7. 玩轉(zhuǎn)網(wǎng)格

　　現(xiàn)在我們已經(jīng)讓基本結(jié)構(gòu)開始工作了，我們可以釋放我們的想象力，思考如何使這個(gè)布局更具吸引力。

　　我們可以從 Grid Editor 調(diào)整區(qū)域名稱以創(chuàng)建不同的布局。唯一的限制是區(qū)域需要連續(xù)創(chuàng)建矩形。

　　CSS 網(wǎng)格 - 設(shè)置

　　現(xiàn)在，讓我們深入了解用于配置網(wǎng)格的控件和不同屏幕。通過(guò)這種方式，您可以了解使用 CSS Grid 可以實(shí)現(xiàn)的不同可能性。第一步是 Grid Editor 對(duì)話框上的主 Grid Settings。

　　元素放置在網(wǎng)格中的方式可以通過(guò) Auto Flow 控件來(lái)影響，該控件可通過(guò)本節(jié)中的相應(yīng)下拉菜單獲得。默認(rèn)情況下，grid-items 會(huì)自動(dòng)逐行填充單元格。但是這可以更改為由列填充，或者一些更高級(jí)的方式，如 dense、row dense 或 column dense。

　　Justify 和 Align 控件的工作方式與 Flexbox 對(duì)齊項(xiàng)目的方式非常相似。它們確定項(xiàng)目在列（塊）和行（內(nèi)聯(lián)）軸的網(wǎng)格區(qū)域中的放置位置。

　　自動(dòng)創(chuàng)建的行和列通常會(huì)增大和收縮以容納它們所包含的內(nèi)容。使用 Auto 控件，可以為該情況指定默認(rèn)大小。

　　可以使用 Gap 控件指定裝訂線，以在網(wǎng)格中的行/列之間創(chuàng)建分隔。

　　CSS 網(wǎng)格 - 行和列

　　如上例所示，您可以使用網(wǎng)格列和行的相應(yīng) + 按鈕創(chuàng)建網(wǎng)格布局，也稱為網(wǎng)格軌道。要配置 Row 或 Column 設(shè)置，只需單擊標(biāo)題即可。網(wǎng)格生成器下方的面板將發(fā)生變化，顯示相應(yīng)的 Selection Settings

　　默認(rèn)情況下，寬度和高度設(shè)置為 Auto。這些可以使用 input 和 unit 選擇器進(jìn)行更改，其中包括很棒的 fr 單位。新的 fr 單位表示網(wǎng)格容器中可用空間的一小部分（了解更多）。此外，還可以通過(guò)高度（行）或?qū)挾?（列）切換來(lái)選擇 Single value 或 MinMax 值

　　還有 Manage 控件，可以輕松復(fù)制行和列或?qū)⑺鼈円苿?dòng)到不同的位置。

　　提示：使用分?jǐn)?shù)空間

　　fr 單位表示網(wǎng)格容器中剩余可用空間的一小部分。“剩余”這個(gè)詞在這里很重要——首先分配所有專門定義的空間，例如 100px 或 20%。然后，如果還有任何空間，它將使用 fr 單位轉(zhuǎn)到 tracks。

　　這個(gè)空間根據(jù) fr 的數(shù)量在 'fr tracks' 之間按比例劃分。

應(yīng)用截圖

多平臺(tái)下載

Pc版