導航:首頁 > 萬維百科 > 網頁設計模板怎麼用

網頁設計模板怎麼用

發布時間:2020-11-08 12:29:54

1、網頁製作中如何使用PSD模版

其實標準的網製作完成的工作實際是:psd to html,一般情況下,我們會拿到美工的psd,這時候不同的人會有不同的做法:

1.打開fireworks將圖片切割導出為html。

2.直接在dreamweaver之類的工具去拖拉布局,導入相關的圖片,flash資源。

3.先在ps中完成切圖後,在文本編輯器中看著效果圖一步步的製作。

以上是大多被採用的方法,但都不好:

第一種方法最為不好,這樣的代碼根本不具維護性和可讀性。

第二種方法也不好,代碼難免會有冗餘,做出來的東西基本需要排查一遍。

第三種方法也不好,因為你需要看效果圖一點點的拼,也就是說寫html標簽的時候,你在不斷的假設這塊要怎麼去顯示。

正確的做法是:

1.拿到psd後,先不要做別的,直接在文本編輯器中將網頁的框架寫出來,不要假設這塊將來css要去怎麼渲染,完全自然化的標簽,不加任何的css。

2.寫完之後在各個瀏覽器運行之後確保大體定位都沒有問題。

3.書寫總體css,這里的css只負責大塊的定位及樣式。

4.切出需要的圖片資源,在寫好的框架中一點點的去構造,不斷的調試,最終為成品。

5.最後,為自己的代碼添加註釋,在css,html中都要合適的為自己的代碼添加註釋。

要想做出能靈活切換皮膚,讓css主導表現,還有很多要注意的地方,但大體的流程就是這樣的,當然我們一開始不能直接就做到先寫html,但起碼要有這個意識,循序漸進。。。

謝謝熱心會員"linxz"提供實際經驗,我貼上來供大家參考:
PSD出網站從兩個大點考慮
一、一個獨立的頁面
1、分析這個頁面,先在腦袋中或者草稿紙上描繪大概的結構
2、根據設計稿的的情況,分析背景圖的分布、ICO圖的分布等
3、切割相應的圖片,導出、合並圖片
4、在編輯器中寫整體結構XHTML代碼,包括頁面中出現的所有元素的結構
5、編寫CSS樣式中的整體以及模塊代碼
6、細節調整
7、收工,瀏覽器驗證是否正確

二、由多個頁面組成的小站點或者大站點
1、瀏覽所有設計稿,統一規劃站點模塊、圖片、文件分布
2、開始第一點的操作,但規劃站點的內容分布很重要

整體考慮點:
圖片的合並,減少請求量
結構的合理性,語義化
樣式的簡潔,便於後期維護
多為後期的維護以及程序開發著想,如何簡單實現效果

2、我在網上下載了一下網頁模板 但是不知道怎麼用dreamweaver設計呢?

首要做的:
用DW打開後,濾清代碼每層的結構,<head>、<body>、<foot>以及CSS和JS的文件位置和作用效果是什麼。
清理:
去掉一些自己不想要的,建議做前備份一下。另外去掉不知道的代碼後,要刷新一下,看看哪裡有變化。
提取:
收藏起來自己想要的特效或者樣式文件。
如果下載知識網頁圖片,做起來更簡單:
用FW切圖,要細心。轉頁,最後把LOGO換成自己的。
建議:
多下載幾個模板,拼合一下。

3、網頁設計模版是什麼,怎麼利用網頁設計模版?

網頁模板就是已經做好的網頁框架,使用網頁編輯軟體輸入自己需要的內容,再發布到自己的網站。每個網頁模板壓縮包內包含:PSD圖片文件(可用Photoshop、ImageReady或Fireworks修改),按鈕圖片PSD文件、Flash源文件和字體文件,推薦使用Dreamweaver軟體向網頁模板添加內容。

創建和設置

1)模板的概念:作為創建其它文檔的樣板的文檔。創建模板時,可以說明哪些網頁元素不可編輯,哪些元素可以編輯。其擴展名為.dwt。

2)模板的作用:有利於保持網頁風格的一致;提高工作效率。

1.創建模板

1)創建一個全新的模板:在模板面板中,使用快捷菜單按鈕或單擊面板上的新建按鈕

模板面板的打開:Window菜單--Templates

2)創建基於文檔的模板:File菜單-Save As Template

2.設置模板頁面屬性

1)用模板創建的文檔繼承模板的頁面屬性,頁標題除外。

2)設置:Modify菜單-Page Properties

3.定義模板的可編輯區

1)定義模板的可編輯區

在模板文檔中選定對象、Modify菜單、Templates、New Editable Region

2)取消可編輯區標記

Modify菜單-Templates-Remove Editable Region

應用和更新

1.應用模板創建文檔

1)應用模板創建文檔

使用模板創建新文檔:File菜單-New From Template

或:File菜單-New-從模板面板中拖一個模板到文檔

對現有文檔應用模板:Modify菜單-Templates-Apply Template to Page-模板面板中選定模板-單擊Select

或:從模板面板中拖一個模板到文檔中

或:從模板面板中選定一個模板,單擊Apply

2)可編輯區和鎖定區

在應用了模板的文檔中,只有可編輯區的內容才可以修改。

3)把頁面從模板中分離出來

如果要對應用了模板的頁面的鎖定區進行修改,必須先把頁面從模板中分離出來。

具體操作:Modify菜單-Templates-Detach From Template

2.修改模板

在模板面板中選定模板、單擊編輯按鈕或雙擊模板名稱或使用快捷菜單的Edit、編輯完成後保存

3.更新站點中使用模板的所有文件

Modify菜單-Templates-Update Pages

4、網頁設計模版是什麼?應該怎麼設計?

網頁模板就是已經做好的網頁框架,使用網頁編輯軟體輸入自己需要的內容,再發布到自己的網站。每個網頁模板壓縮包內包含:PSD圖片文件(可用Photoshop、ImageReady或Fireworks修改),按鈕圖片PSD文件、Flash源文件和字體文件,推薦使用Dreamweaver軟體向網頁模板添加內容。

創建和設置

1)模板的概念:作為創建其它文檔的樣板的文檔。創建模板時,可以說明哪些網頁元素不可編輯,哪些元素可以編輯。其擴展名為.dwt。

2)模板的作用:有利於保持網頁風格的一致;提高工作效率。

1.創建模板

1)創建一個全新的模板:在模板面板中,使用快捷菜單按鈕或單擊面板上的新建按鈕

模板面板的打開:Window菜單--Templates

2)創建基於文檔的模板:File菜單-Save As Template

2.設置模板頁面屬性

1)用模板創建的文檔繼承模板的頁面屬性,頁標題除外。

2)設置:Modify菜單-Page Properties

3.定義模板的可編輯區

1)定義模板的可編輯區

在模板文檔中選定對象、Modify菜單、Templates、New Editable Region

2)取消可編輯區標記

Modify菜單-Templates-Remove Editable Region

應用和更新

1.應用模板創建文檔

1)應用模板創建文檔

使用模板創建新文檔:File菜單-New From Template

或:File菜單-New-從模板面板中拖一個模板到文檔

對現有文檔應用模板:Modify菜單-Templates-Apply Template to Page-模板面板中選定模板-單擊Select

或:從模板面板中拖一個模板到文檔中

或:從模板面板中選定一個模板,單擊Apply

2)可編輯區和鎖定區

在應用了模板的文檔中,只有可編輯區的內容才可以修改。

3)把頁面從模板中分離出來

如果要對應用了模板的頁面的鎖定區進行修改,必須先把頁面從模板中分離出來。

具體操作:Modify菜單-Templates-Detach From Template

2.修改模板

在模板面板中選定模板、單擊編輯按鈕或雙擊模板名稱或使用快捷菜單的Edit、編輯完成後保存

3.更新站點中使用模板的所有文件

Modify菜單-Templates-Update Pages

5、DW怎麼把首頁設為模板,子網頁用模板設計

剛進入dreamweaver點擊新建下方的更多,然後選擇空白頁,頁面類型選擇html模板,布局選無就行了。

插入一個表格(菜單欄中選擇插入,再找到表格),表格里的布局自己根據需要設置,在這里我設置為行數為5,列為1,表格寬度為1000像素。插入表格後,選中整個表格,選中後表框會加黑加粗,在下方設置為居中對齊。

在表格第一行插入圖像(菜單欄中選擇插入,再找到圖像),第二行加入滾動字幕。第三行插入表格(方法同上),1行4列,表格寬度為百分之一百。插入表格之後,再選中第三行的表格,選中後表格邊框會加黑加粗,在下方設置表格為居中對齊,寬度為20%。

第三行中選入一些文字,如首頁,李白,杜甫,白居易。新建一個css文件,再建一個css,設置好類型中的顏色和背景中的顏色,加以區分。選中第三行,使用剛才新建的css,再新建一個css,表格的邊框使用該css。

在第四行插入可編輯區域。點擊確定,可編輯區域中的文字即EditRegion3可以去掉,換行可以擴大可編輯區域的面積。

在第五行插入可編輯區域,我還插入了一條水平線,並加上了版權。最後保存。此時模板已經建好。

新建,模板中的頁,找到新建的模板,創建,保存為index.html(即網站的主頁),再重新打開新建的模板,在可編輯區預報輸入李白的資料,保存為li.com,此時你會發現只有在可編輯區域才能輸入內容,其他區域都是不可操作的,這就是模板的特點。同理,在新建兩個作為杜甫和白居易的網頁。

現在就差用超鏈接把上面做的幾個網頁連接起來了。在模板中選中首頁,在下方html中的鏈接中輸入首頁的名稱,即index.html,同理,選中李白,杜甫,白居易將他們連起來。超鏈接做好後在文字下方會多出一條橫線。

做完了之後在index.html中打開可以看看做出的效果,點擊圖中的小地球圖標就可進行查看。

6、如何使用網站模板建設網站,流程是什麼?

1、以nicebox為例,首先需要注冊網站賬號,注冊成功後登錄建站平台的中心,進行網站建設
2、選擇網站模板,或者直接向用戶展示不同行業的網站模板,這是模板建站較為核心的環節,大家製作網站應該根據自己的行業和主題,選擇相對應的模板類型。
3、經過系統構建好網站模板以後,在接著進行網站模塊和功能的搭建,這一點是模板網站建設的優點,用戶可以直接通過系統提供的各種模塊、各種功能,直接點擊拖曳到網站模板上,並且通過拖動操作布局網站。
4、當網站都設計好以後,對網站中的各個模塊添加上內容,並且將操作都保存後,在可視化界面預覽網站無誤以後,確定保存網站,就能實現模板網站的建設。

與網頁設計模板怎麼用相關的知識