煙臺網(wǎng)頁設(shè)計教你設(shè)計出內(nèi)頁右側(cè)內(nèi)容區(qū)方法

1.右側(cè)欄目線和圖標(biāo)

新建“子欄目線”圖層，使用矩形選擇工具建立長矩形選區(qū)，填充灰色（R：208，G：208，B：208），得到灰色的欄目線。接下來設(shè)計子欄目前的圖標(biāo)，同樣使用矩形工具建立矩形選區(qū)，上面矩形填充藍(lán)灰色（R：36，G：103，B：139），下面舉行填充灰色（R：208，G：208，B：208），得到如圖子欄目線，結(jié)果如圖所示。

網(wǎng)站內(nèi)頁右側(cè)內(nèi)容的設(shè)計教程（圖一）

2.欄目名稱和位置信息

使用文本工具在欄目圖標(biāo)后輸入子欄目信息“圖形設(shè)計類”，顏色為藍(lán)灰（R：36，G：103，B：139），在右側(cè)輸入位置信息：“您的位置：首頁/培訓(xùn)課程/圖形設(shè)計類”，顏色為灰色（R：101，G：101，B：101）。

網(wǎng)站內(nèi)頁右側(cè)內(nèi)容的設(shè)計教程（圖二）

3.右側(cè)欄目內(nèi)容的設(shè)計

新建“右側(cè)背景”圖層，使用直線工具從上向下建立垂直的直線路徑，如圖所示。

網(wǎng)站內(nèi)頁右側(cè)內(nèi)容的設(shè)計教程（圖三）

使用文本工具，將鼠標(biāo)移動到路徑的頂部，當(dāng)鼠標(biāo)指針變成如圖所示形狀時單擊鼠標(biāo)，輸入文字“---------”（多個減號），如圖所示。然后全選輸入的文字，在字符面板中設(shè)置文字的大小和間距，如果文字不夠或超過直線可以增減字符得到最終結(jié)果。

網(wǎng)站內(nèi)頁右側(cè)內(nèi)容的設(shè)計教程（圖四）

然后選擇菜單“圖層|柵格化|文字”，將該層文字轉(zhuǎn)化為位圖，如圖所示，否則在后面使用Fireworks軟件進(jìn)行圖像切片時將不能顯示該文字。

網(wǎng)站內(nèi)頁右側(cè)內(nèi)容的設(shè)計教程（圖五）

設(shè)置前景色為藍(lán)色（R：144，G：190，B：231），使用圓角矩形工具，設(shè)置圓角半徑為2px，方式為填充像素，創(chuàng)建圓角矩形區(qū)域，同樣設(shè)置前景色為淡紅（R：255，G：154，B：159），繪制第2個圓角矩形。

網(wǎng)站內(nèi)頁右側(cè)內(nèi)容的設(shè)計教程（圖六）

使用文本工具輸入文字信息。

網(wǎng)站內(nèi)頁右側(cè)內(nèi)容的設(shè)計教程（圖七）

選擇菜單“文件|打開”命令，打開配套光盤中“\源文件\6\素材\平面廣告大師.png”和“平面廣告大師.png”文件，使用移動工具移動到效果圖中，并使用文本工具輸入“MORE”，結(jié)果如圖所示。

最后選擇菜單“文件|存儲”命令，保存效果圖文件，文件名為“領(lǐng)跑者IT培訓(xùn)中心內(nèi)頁”，以備后面進(jìn)行圖像切片的制作。

科普云煙臺網(wǎng)站建設(shè)網(wǎng)頁設(shè)計部整理發(fā)布。