軟件生命周期七個(gè)階段天津百度網(wǎng)站排名優(yōu)化
在本章中，我們將介紹網(wǎng)頁(yè)的基本布局。在創(chuàng)建我們的網(wǎng)頁(yè)布局之前，我們需要考慮我們的內(nèi)容，然后設(shè)計(jì)我們希望如何呈現(xiàn)該內(nèi)容，因?yàn)樗窃谖覀兊木W(wǎng)站上可見的內(nèi)容。
由我們?nèi)绾纬尸F(xiàn)我們的內(nèi)容，以便我們的觀眾找到我們的網(wǎng)站，然后留下來(lái)查看。布局可能包括頂部的公司徽標(biāo)或橫幅、導(dǎo)航菜單、可能包含多列的內(nèi)容區(qū)域以及頁(yè)面底部的頁(yè)腳。
以前，開發(fā)人員使用表格來(lái)實(shí)現(xiàn)這種外觀。表創(chuàng)建了一組用于創(chuàng)建行和列的框?，F(xiàn)在，網(wǎng)頁(yè)設(shè)計(jì)師使用
<div> 標(biāo)簽
以下是 <div> 標(biāo)簽的一些功能。
-
<div>標(biāo)簽定義 HTML 文檔中的分區(qū)或節(jié)，使管理、樣式和操作這些分區(qū)或節(jié)變得容易。 -
它用于對(duì)塊元素進(jìn)行分組，以使用CSS格式化它們。
-
瀏覽器通常會(huì)在 div 元素之前和之后放置換行符。
-
<div>標(biāo)記是塊級(jí)元素。 -
<div>標(biāo)簽幾乎可以包含任何其他元素。 -
<div>標(biāo)簽不能位于<p>標(biāo)簽內(nèi)。
示例
讓我們看一個(gè)簡(jiǎn)單的例子，在這個(gè)例子中，我們將使用 <div> </div> 標(biāo)簽來(lái)創(chuàng)建各種框和樣式規(guī)則。
步驟1 - 打開表達(dá)式Web，用我們之前創(chuàng)建的index.html頁(yè)面。如果不會(huì)創(chuàng)建空白頁(yè)面可以去看Microsoft Expression Web - 空白網(wǎng)頁(yè)。
步驟2 - 如上面的屏幕截圖所示，默認(rèn)情況下突出顯示代碼視圖。您可以在“代碼視圖”或“設(shè)計(jì)視圖”中工作，但也可以看到“拆分視圖”，它將同時(shí)打開“代碼視圖”和“設(shè)計(jì)視圖”。因此，讓我們選擇“拆分視圖”選項(xiàng)。
步驟3 - body 元素定義文檔的正文。要設(shè)置 <body> 標(biāo)簽的樣式，我們需要?jiǎng)?chuàng)建一個(gè)新樣式。首先在“設(shè)計(jì)視圖”中選擇正文標(biāo)簽，然后單擊“應(yīng)用樣式”面板中的“新建樣式…”，這將打開“新建樣式”對(duì)話框。在這里，您可以為您的樣式定義不同的選項(xiàng)。
步驟4 - 第一步是從“選擇器”下拉列表中選擇正文，然后從下拉列表中的“定義”中選擇現(xiàn)有樣式表。從 URL 中，選擇我們?cè)谏弦徽轮袆?chuàng)建的 CSS 文件。
在左側(cè)，有一個(gè)類別列表，例如字體，背景等，并突出顯示當(dāng)前字體。根據(jù)您的要求設(shè)置與字體相關(guān)的信息，如上面的屏幕截圖所示。
步驟5 - 選擇所需的背景顏色。您還可以使用瀏覽器按鈕選擇背景圖像。完成背景后，根據(jù)需要定義邊框。
步驟6 - 讓我們選擇邊框的雙線選項(xiàng)，并從下拉列表中選擇寬度和顏色。完成樣式后，單擊“確定”。
步驟7 - 現(xiàn)在您可以在設(shè)計(jì)視圖中看到背景顏色已更改為我們選擇的顏色。如果打開 sample.css 文件，您將看到所有信息都自動(dòng)存儲(chǔ)在 CSS 文件中。
步驟8 - 再次轉(zhuǎn)到 index.html頁(yè)面，然后將<div>從“工具箱”面板拖放到打開的頁(yè)面上。
步驟9 - 在代碼視圖上方，您將看到<body>和<div>標(biāo)簽，單擊<div>標(biāo)簽，然后在“應(yīng)用樣式”面板中單擊“新建樣式…”。這將打開“新建樣式”對(duì)話框。
在選擇器字段中鍵入“#container”。哈希標(biāo)記 # 是一個(gè) ID 選擇器。從“定義位置”下拉列表中，選擇現(xiàn)有樣式表，然后選中“將新樣式應(yīng)用于文檔選擇”選項(xiàng)。轉(zhuǎn)到“背景”類別。
步驟10 - 選擇背景顏色，讓我們選擇白色，然后轉(zhuǎn)到“框”類別。
步驟11 - 定義填充和邊距，然后轉(zhuǎn)到“位置”類別
步驟12 - 將寬度設(shè)置為90%。但是，不要指定高度，因?yàn)槲覀兿Ｍ萜髟谳斎雰?nèi)容時(shí)應(yīng)該展開。單擊“確定”按鈕。
同樣，讓我們?yōu)轫?yè)眉、頂部導(dǎo)航、左側(cè)導(dǎo)航、主要內(nèi)容和頁(yè)腳添加樣式。
sample.css
以下是添加上述所有樣式后sample.css樣式表中的代碼。
body { font-family: Calibri; font-size: medium; font-weight: normal; font-style: normal; font-variant: normal; text-transform: none; color: #0000FF; background-color: #CCFFFF; background-image: none; border: medium double #FF0000;
} #container { background-color: #FFFFFF; padding: 8px; margin: 8px; width: 90%;
} #header { background-color: #54B431; background-repeat: no-repeat; background-position: right center; height: 170px;
} #top-nav { height: 50px; border-top: solid medium #006600; border-bottom: solid medium #006600; background-color: #FFFFFF;
} #left-nav { margin: 20px 0px 10px 0px; width: 180px; float: left; border: thin dashed #006600;
} #main-content { margin: 20px 10px 10px 200px; background-color: #CCFFCC;
} #footer { border-top: 2px solid #006600; clear: both; padding: 10px 0px; text-align: center;
}
index.html
以下是添加所有 <div> 標(biāo)記后 index.html 文件中的代碼。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta content = "text/html; charset = utf-8" http-equiv = "Content-Type" /> <style type = "text/css"></style> <link href = "sample.css" rel = "stylesheet" type = "text/css" /> </head> <body> <div id = "container"> <div id = "header"></div> <div id = "top-nav"></div> <div id = "left-nav"></div> <div id = "main-content"></div> <div id = "footer"></div> </div> </body>
</html>
輸出
設(shè)計(jì)視圖中的頁(yè)面布局將如以下屏幕截圖所示。
想要搭建網(wǎng)站或需要學(xué)習(xí)seo的小伙伴沒有資料可以通過(guò)文末免費(fèi)獲取相關(guān)的資料
