- CSS3+DIV網(wǎng)頁樣式與布局案例課堂(第2版)
- 劉春茂
- 310字
- 2020-06-29 18:06:42
1.6 在Photoshop中構建網(wǎng)頁結構
設計網(wǎng)頁之前,設計者可以先在Photoshop中勾畫出框架,后來的設計就可以在此框架基礎上進行了,具體的操作步驟如下。
step 01 打開Photoshop軟件,如圖1-29所示。

圖1-29 Photoshop工作界面
step 02 選擇【文件】|【新建】菜單命令,打開【新建】對話框,在其中設置文檔的寬度為1024像素、高度為800像素,如圖1-30所示。

圖1-30 【新建】對話框
step 03 單擊【確定】按鈕,創(chuàng)建一個1024像素×800像素的文檔,如圖1-31所示。

圖1-31 空白文檔
step 04 選擇左側工具箱中的矩形工具,并調整為路徑狀態(tài),繪制一個矩形框,如圖1-32所示。

圖1-32 繪制矩形框
step 05 使用文字工具,創(chuàng)建一個文本圖層,輸入“網(wǎng)站的頭部”,如圖1-33所示。

圖1-33 輸入文字
step 06 依次繪制出中左、中右和底部,網(wǎng)頁的結構布局最終如圖1-34所示。

圖1-34 網(wǎng)頁布局效果
推薦閱讀
- CSS + DIV網(wǎng)頁樣式布局實戰(zhàn)從入門到精通
- 大東話安全之網(wǎng)絡病毒篇
- 中文版Dreamweaver CC基礎培訓教程(移動學習版)
- 網(wǎng)絡工程設計與實施(第2版)
- 計算機網(wǎng)絡技術及應用
- Bootstrap從入門到項目實戰(zhàn)
- 計算機網(wǎng)絡及項目實踐
- Laravel入門與實戰(zhàn)(第2版):構建主流PHP應用開發(fā)框架
- 云原生模式
- 十進制網(wǎng)絡技術及應用
- 綜合布線實訓教程(第2版)
- Kubeflow:云計算和機器學習的橋梁
- CSS新世界
- INSTANT Migration to HTML5 and CSS3 How-to
- Bootstrap 4 Web設計與開發(fā)實戰(zhàn)