內(nèi)蒙古化工職業(yè)學(xué)院畢業(yè)設(shè)計(jì)（論文）用紙第第頁目錄TOC\o"1-3"\h\u前言 1第一章現(xiàn)代企業(yè)網(wǎng)站建設(shè)需求分析 21.1網(wǎng)站建設(shè)需求分析 21.2網(wǎng)站建設(shè)功能分析 21.3網(wǎng)站系統(tǒng)設(shè)計(jì)原則 3第二章網(wǎng)站開發(fā)軟件簡介 42.1Dreamweaver編輯器 42.1.1Dreamweaver簡介 42.2HTML的簡介 42.3使用CSS+DIV布局網(wǎng)頁 62.3.1CSS+DIV簡介 62.3.3CSS+DIV的布局方式 6第三章使用CSS美化網(wǎng)頁 83.1選擇器的運(yùn)用 83.3CSS+DIV的基本設(shè)計(jì) 93.4DivCSS排版對網(wǎng)站優(yōu)化的影響 103.5CSS和HTML的結(jié)合 11第四章CSS+DIV的應(yīng)用 124.1企業(yè)板塊的分析 12結(jié)束語 16致謝 17參考文獻(xiàn) 18前言隨著計(jì)算機(jī)技術(shù)和計(jì)算機(jī)網(wǎng)絡(luò)的飛速發(fā)展和計(jì)算機(jī)的日益普及,我們已經(jīng)進(jìn)入了信息化時(shí)代,從網(wǎng)絡(luò)獲取信息成為我們汲取知識的一個(gè)重要部分,已為企業(yè)帶來無限商機(jī)。越來越多的商家已經(jīng)建立了自己的門戶網(wǎng)站,可以即時(shí)發(fā)布其產(chǎn)品信息和企業(yè)動態(tài),使得與外界溝通交流更方便更暢通。Internet是目前世界上最大的計(jì)算機(jī)互聯(lián)網(wǎng)絡(luò)，它遍布全球，將世界各地各種規(guī)模的網(wǎng)絡(luò)連接成一個(gè)整體。作為Internet上一種先進(jìn)的，易于被人們所接受的信息檢索手段，WorldWideWeb(簡稱WWW)發(fā)展十分迅速，成為目前世界上最大的信息資源寶庫。據(jù)估計(jì)，目前Internet上已有上千萬個(gè)Web站點(diǎn)，其內(nèi)容范圍跨越了教育科研、文化事業(yè)、金融、商業(yè)、新聞出版、娛樂、體育等各個(gè)領(lǐng)域，其用戶群十分龐大，因此，建設(shè)一個(gè)好的Web站點(diǎn)對于一個(gè)機(jī)構(gòu)的發(fā)展十分重要。近年來，隨著網(wǎng)絡(luò)用戶要求的不斷提高及計(jì)算機(jī)科學(xué)的迅速發(fā)展，特別是數(shù)據(jù)庫技術(shù)在Internet中的廣泛應(yīng)用，Web站點(diǎn)向用戶提供的服務(wù)將越來越豐富，越來越人性化。因此網(wǎng)站建設(shè)在Internet應(yīng)用上的地位顯而易見，它已成為政府、企事業(yè)單位信息化建設(shè)中的重要組成部分，從而倍受人們的重視。第一章現(xiàn)代企業(yè)網(wǎng)站建設(shè)需求分析1.1網(wǎng)站建設(shè)需求分析網(wǎng)站需求分析是網(wǎng)站建設(shè)的第一個(gè)階段，也是關(guān)系到網(wǎng)站開發(fā)成敗的關(guān)鍵步驟。網(wǎng)站需求分析的任務(wù)在于完全搞清楚用戶對網(wǎng)站的確切要求，這樣才能使開發(fā)出的企業(yè)網(wǎng)站合理實(shí)用。網(wǎng)站目標(biāo)：企業(yè)網(wǎng)站是一個(gè)企業(yè)不可缺少的部分，它能介紹企業(yè)文化、經(jīng)營理念、特色服務(wù)及企業(yè)在全國的網(wǎng)點(diǎn)分布。拓寬顧客市場，增加企業(yè)與客戶之間的聯(lián)系，縮短二者之間的距離。提高企業(yè)知名度，為企業(yè)今后的業(yè)務(wù)發(fā)展開辟一個(gè)良好的社會環(huán)境。它的內(nèi)容對于企業(yè)來說至關(guān)重要,企業(yè)概況、企業(yè)特色服務(wù)、最新企業(yè)新聞動態(tài)等部分應(yīng)該能夠?yàn)橛脩籼峁┏渥愕男畔?。企業(yè)網(wǎng)站做成檢索迅速、查找方便、可靠性高、存儲量大、保密性好、壽命長、成本低、維護(hù)方便、信息實(shí)時(shí)性強(qiáng)的功能完善的大型企業(yè)網(wǎng)站。這些優(yōu)點(diǎn)能夠極大地提高了企業(yè)網(wǎng)站的效率,也是企業(yè)走向科學(xué)化、信息化與世界接軌的重要條件。系統(tǒng)需求隨著計(jì)算機(jī)的普及和網(wǎng)絡(luò)的飛速發(fā)展，越來越多的個(gè)人家庭擁有電腦。網(wǎng)上沖浪成了他們?nèi)粘Ｉ钪胁豢扇鄙俚囊徊糠帧?.2網(wǎng)站建設(shè)功能分析在前面的調(diào)研中，我借鑒了許多關(guān)于企業(yè)網(wǎng)站建設(shè)系統(tǒng)。網(wǎng)站從開發(fā)角度來看,大致分為網(wǎng)站的前臺（也就是網(wǎng)站的界面）、網(wǎng)站的后臺（也就是網(wǎng)站的程序開發(fā)）。網(wǎng)站的前臺則體現(xiàn)在網(wǎng)站的藝術(shù)感覺和漂亮程序，有藝術(shù)氛圍很強(qiáng)的網(wǎng)站要求，也就是平淡中尋求簡潔清爽的、也有就是追求豪華的空洞的網(wǎng)站要求。網(wǎng)站的界面好與否，一定要與網(wǎng)站的主題所要表達(dá)的思想相配才行。網(wǎng)站的后臺數(shù)據(jù)庫開發(fā)，也就是后臺的程序開發(fā)表達(dá)給客戶看到的就是網(wǎng)站實(shí)現(xiàn)的功能。本系統(tǒng)的組成和功能模塊大致如下：1、系統(tǒng)的組成：系統(tǒng)分為網(wǎng)站前臺和后臺管理。網(wǎng)站前臺是面向網(wǎng)站訪問用戶的，通俗的說也就是給訪問網(wǎng)站的人看的內(nèi)容和頁面，網(wǎng)站前臺訪問可以瀏覽公開發(fā)布的內(nèi)容。網(wǎng)站后臺，有時(shí)也稱為網(wǎng)站管理后臺，是指用于管理網(wǎng)站前臺的一系列操作。通過網(wǎng)站管理后臺，可以有效的管理網(wǎng)站供瀏覽者查閱的信息。2、系統(tǒng)的功能：前臺功能：網(wǎng)站前臺訪問可以瀏覽公開發(fā)布的產(chǎn)品信息、新聞信息、企業(yè)信息、企業(yè)聯(lián)系方式、提交留言和應(yīng)聘職位的操作。后臺功能：管理員可以通過密碼進(jìn)到后臺的網(wǎng)頁，本系統(tǒng)實(shí)現(xiàn)了管理員對產(chǎn)品信息、企業(yè)信息和新聞的增加、更新、刪除功能。而且管理員還可以對訪問用戶的留言進(jìn)行回復(fù)和刪除以及修改管理員的用戶名和密碼。1.3網(wǎng)站系統(tǒng)設(shè)計(jì)原則本系統(tǒng)除了滿足以上功能外，還具有一定的安全性。為不同的用戶分配不同的操作權(quán)限，例如普通瀏覽用戶只能瀏覽網(wǎng)站頁面和應(yīng)聘職位，管理員用戶可以使用所有功能（包括增加信息，數(shù)據(jù)維護(hù)等）。本系統(tǒng)提供了一套友好的界面，操作十分簡單，易學(xué)易用，并且滿足常見的業(yè)務(wù)要求。

第二章網(wǎng)站開發(fā)軟件簡介2.1Dreamweaver編輯器2.1.1Dreamweaver簡介Dreamweaver是創(chuàng)建和管理網(wǎng)頁的專業(yè)化可視編輯器。使用Dreamweaver可以輕松創(chuàng)建跨平臺、跨瀏覽器的頁面。Macromedia的RoundtripHTML技術(shù)允許用戶隨意導(dǎo)入HTML文檔而無需重新設(shè)置代碼格式。Dreamweaver可以為用戶做到：使用動態(tài)HTML功能（例如具有動態(tài)效果的層和行為）而不用寫一行代碼。它甚至還可以檢查用戶的工作成果在所有流行的平臺和瀏覽器中可能發(fā)生的錯(cuò)誤。Dreamweaver還是一個(gè)可以完全自定義的應(yīng)用程序。用戶可以創(chuàng)建自己的對象和命令修改菜單和快捷鍵，甚至編寫JavaScript代碼擴(kuò)展Dreamweaver的行為和屬性檢查器。至于Dreamweaver工作區(qū)是非常靈活的，因此它可以適應(yīng)各種不同的工作風(fēng)格和使用水平。常用的Dreamweaver工作區(qū)組件有以下若干種：(1)文檔窗口可顯示當(dāng)前文檔，文檔的外觀和瀏覽器中看到的非常相似。(2)裝載器中包含一些打開和關(guān)閉常用檢查器和模板的按鈕。(3)對象工具欄包含創(chuàng)建不同類型的對象（例如圖象、表格和層等）的按鈕(4)屬性檢查器顯示選定對象的屬性。(5)快捷菜單可以使用戶對當(dāng)前選擇或區(qū)域快速執(zhí)行某些命令。(6)可固定的浮動工具欄允許用戶將浮動窗口、檢查器和工具欄組合在一個(gè)或多個(gè)選擇窗口中。2.2HTML的簡介HTML（HyperTextMark-upLanguage）即超文本標(biāo)記語言或超文本鏈接標(biāo)示語言，是WWW的描述語言。設(shè)計(jì)HTML語言的目的是為了能把存放在一臺電腦中的文本或圖形與另一臺電腦中的文本或圖形方便地聯(lián)系在一起，形成有機(jī)的整體，人們不用考慮具體信息是在當(dāng)前電腦上還是在網(wǎng)絡(luò)的其它電腦上。我們只需使用鼠標(biāo)在某一文檔中點(diǎn)取一個(gè)圖標(biāo)，Internet就會馬上轉(zhuǎn)到與此圖標(biāo)相關(guān)的內(nèi)容上去，而這些信息可能存放在網(wǎng)絡(luò)的另一臺電腦中。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字、圖形、動畫、聲音、表格、鏈接等。HTML的結(jié)構(gòu)包括頭部（Head）、主體（Body）兩大部分，其中頭部描述瀏覽器所需的信息，而主體則包含所要說明的具體內(nèi)容。另外，HTML是網(wǎng)絡(luò)的通用語言,一種簡單、通用的全置標(biāo)記語言。它允許網(wǎng)頁制作人建立文本與圖片相結(jié)合的復(fù)雜頁面，這些頁面可以被網(wǎng)上任何其他人瀏覽到，無論使用的是什么類型的電腦或?yàn)g覽器。就像我們逛淘寶買東西，在百度查看新聞等等。也許你聽說過許多可以編輯網(wǎng)頁的軟件,事實(shí)上,你不需要用任何專門的軟件來建立HTML頁面；你所需要的只是一個(gè)文字處理器（如McrosoftWord\記事本\寫字板等等）以及HTML的工作常識。其實(shí)你很快就會發(fā)現(xiàn),基礎(chǔ)的HTML語言很簡單易學(xué)。HTML只不過是組合成一個(gè)文本文件的一系列標(biāo)簽。它們像樂隊(duì)的指揮,告訴樂手們哪里需要停頓,哪里需要激昂。HTML標(biāo)簽通常是英文詞匯的全稱（如塊引用:blockquote）或縮略語（如“p”代表Paragragh），但它們的與一般文本有區(qū)別，因?yàn)樗鼈兎旁趩螘柪铩９蔖aragragh標(biāo)簽是<p>,塊引用標(biāo)簽是<blockquote>。有些標(biāo)簽說明頁面如何被格式化（例如，<p>開始一個(gè)新段落），其他則說明這些詞如何顯示(<b>使文字變粗)還有一些其他標(biāo)簽提供在頁面上不顯示的信息－－例如標(biāo)題。關(guān)于標(biāo)簽，需要記住的是，它們是成雙出現(xiàn)的。每當(dāng)使用一個(gè)標(biāo)簽－－如<blockquote>,則必須以另一個(gè)標(biāo)簽</blockquote>將它關(guān)閉。注意“blockquote”前的斜杠，那就是關(guān)閉標(biāo)簽與打開標(biāo)簽的區(qū)別。但是也有一些標(biāo)簽例外。比如，<input>標(biāo)簽就不需要?；綡TML頁面以<html>標(biāo)簽開始，以</html>結(jié)束。在它們之間，整個(gè)頁面有兩部分－－標(biāo)題和正文。標(biāo)題詞－夾在<head>和</head>標(biāo)簽之間－這個(gè)詞語在打開頁面時(shí)出現(xiàn)在屏幕底部最小化的窗口。正文則夾在<body>和</body>之間－即所有頁面的內(nèi)容所在。頁面上顯示的任何東西都包含在這兩個(gè)標(biāo)簽之中。那么讓我們建立一個(gè)簡單的范例吧，非常容易的。第一步，當(dāng)然是要建立一個(gè)新的文本文件（記住，如果你在使用比較復(fù)雜的文字處理器，就應(yīng)該用“純文本”或“普通文本”來保存），將它命名為“xxxx.html”。(隨便你起一個(gè)什么名字,但記住,要用英文)擴(kuò)展名也可是HTML然后你可以用瀏覽器將它打開，你會看見最簡單的自己做的頁面。2.3使用CSS+DIV布局網(wǎng)頁2.3.1CSS+DIV簡介CSS+DIV是標(biāo)準(zhǔn)化（或稱“web標(biāo)準(zhǔn)”）中常用的術(shù)語之一，通常為了說明與HTML網(wǎng)頁設(shè)計(jì)語言中的表格（table）定位方式的區(qū)別，因?yàn)閄HTML網(wǎng)站設(shè)計(jì)標(biāo)準(zhǔn)中，不再使用表格定位技術(shù)，而是采用CSS+DIV的方式實(shí)現(xiàn)各種定位。CSS是英語CascadingStyleSheets(層疊樣式表)的縮寫，它是一種用來表現(xiàn)HTML或XML等文件式樣的計(jì)算機(jī)語言。DIV元素是用來為HTML文檔內(nèi)大塊block-level）的內(nèi)容提供結(jié)構(gòu)和背景的元素。DIV的起始標(biāo)簽和結(jié)束標(biāo)簽之間的所有內(nèi)容都是用來構(gòu)成這個(gè)快的，其中所包含元素的特性由DIV標(biāo)簽的屬性來控制，或者是通過使用樣式表格式化這個(gè)塊來進(jìn)行控制。2.3.2應(yīng)用的方法1、In-line行內(nèi)：行內(nèi)樣式是在html標(biāo)簽里直接使用style屬性，如：<pstyle="color:red">text</p>，設(shè)定段落文字紅色。但要記住，最后的HTML應(yīng)該是獨(dú)立出來，使用表現(xiàn)文檔，所以行內(nèi)樣式應(yīng)該在任何地方避免。2、Internal內(nèi)部：使用于整個(gè)頁面的植入內(nèi)部樣式在head標(biāo)簽里面，style標(biāo)簽包圍樣式，可以在里面輸入你想要的樣式值。例如：<html><head><title>CSSExample</title><styletype="text/css">p{color:red;}a{color:blue;}</style>所有段落文字紅色，鏈接藍(lán)色。3、外部：外部樣式使用在整個(gè)多樣頁面網(wǎng)站。它是一個(gè)獨(dú)立的CSS文件，像下面一樣：p{color:red;}a{color:blue;}如果上面保存為“web.css”，HTML里面的鏈接就會像下面所顯示效果，相關(guān)的代碼如下：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""/TR/xhtml1/DTD/xhtml1-strict.dtd"><html>。2.3.3CSS+DIV的布局方式1、網(wǎng)頁頁面中的每個(gè)區(qū)域，如頁頭區(qū)、主體區(qū)、鏈接和版權(quán)聲明區(qū)等，我們都插入相應(yīng)的DIV元素，然后，用CSS控制DIV使網(wǎng)頁居中顯示。2、對于頁面中所有的DIV元素，利用CSS控制DIV的位置，我們可以將頁面中的DIV視為一個(gè)個(gè)塊狀元素。在此應(yīng)用了“盒模型”的工作原理，“盒模型”是CSS的基礎(chǔ)，“盒模型”理論認(rèn)為：頁面上的每個(gè)元素都被看做一個(gè)矩形，這個(gè)矩形由內(nèi)容、填充（padding）、邊框（border）和邊距（margin）構(gòu)成。元素的實(shí)際寬度=內(nèi)容寬度+2x邊距+2x填充+2x邊框，對于每部分的間距，以及文字、圖片空隙的調(diào)整，用CSS+DIV布局是很合適的，那就是用“盒模型”的工作原理來調(diào)整，在網(wǎng)頁默認(rèn)的情況下，元素由上到下依次疊放，當(dāng)這樣的疊放順序不能滿足布局的需要時(shí)，就要使用“float（浮動）”屬性來改變元素的疊放順序。元素應(yīng)用了“float（浮動）”屬性，他周圍的元素就會靠近、包圍元素，這樣的影響在有的布局中是多余的，這時(shí)，可以用“clear（清除）”屬性來阻止這種浮動對后面元素的影響。再復(fù)雜的布局也是重復(fù)利用這樣的技術(shù)，大到網(wǎng)頁每一部分的疊放，小到文字、圖片的排版。3、在DIV中添加各種網(wǎng)頁元素，把文字、圖片、動畫安排到合適的位置，再把每部分合理地疊放到網(wǎng)頁中，這樣就完成了網(wǎng)頁的布局。

第三章使用CSS美化網(wǎng)頁3.1選擇器的運(yùn)用CSS選擇器共有三種：標(biāo)簽選擇器、ID選擇器、類選擇器?！緲?biāo)簽選擇器】一個(gè)完整的HTML頁面是有很多不同的標(biāo)簽組成，而標(biāo)簽選擇器，則是決定哪些標(biāo)簽采用相應(yīng)的CSS樣式，(在大環(huán)境中你可能出于不同的位置，但是不管怎么樣，你總是穿著同一套衣服，這件衣服就是由標(biāo)簽選擇器事先給你限定好的，不管走到哪里都是這身衣服)比如，在style.css文件中對p標(biāo)簽樣式的聲明如下：p{font-size:12px;background:#900;color:090;}則頁面中所有p標(biāo)簽的背景都是#900(紅色)，文字大小均是12px，顏色為#090(綠色)，這在后期維護(hù)中，如果想改變整個(gè)網(wǎng)站中p標(biāo)簽背景的顏色，只需要修改background屬性就可以了，就這么容易！【ID選擇器】ID選擇器在某一個(gè)HTML頁面中只能使用一次(當(dāng)然也可以用好幾次，不過就不符合W3C標(biāo)準(zhǔn)了，那頁面也就不是標(biāo)準(zhǔn)頁面嘍!，咱們的目的不就是為了做標(biāo)準(zhǔn)的頁面么，所以建議大家不要在同一個(gè)html頁面中多個(gè)標(biāo)簽擁有共同的ID)，就像在你所處的環(huán)境中，你只有一個(gè)ID(身份證)，不可能重復(fù)！相信大家也能看出來，ID選擇器更具有針對性，如：先給某個(gè)HTML頁面中的某個(gè)p標(biāo)簽起個(gè)ID，代碼如下：<pid="one">此處為p標(biāo)簽內(nèi)的文字</p>在CSS中定義ID為one的p標(biāo)簽的屬性，就需要用到#，代碼如下：#one{font-size:12px;background:#900;color:090;}這樣頁面中的某個(gè)p就會是CSS中定義的樣式。【類選擇器】這種選擇器就是使頁面中的某些標(biāo)簽(可以是不同的標(biāo)簽)具有相同的樣式，就像國慶中某個(gè)方陣中，肯定都是不同的人，但是都穿紅色衣服，手中高舉花環(huán)，樣式都是一樣的，如果想讓這一類人都有共同的樣式，和ID選擇器的用法類似，只不過把id換做class，如下：<pclass="one">此處為p標(biāo)簽內(nèi)的文字</p>如果我還想讓div標(biāo)簽也有相同的樣式，加上同樣的class就可以了，如下<divclass="one">此處為p標(biāo)簽內(nèi)的文字</div>。這樣頁面中凡是加上class="one"的標(biāo)簽，樣式都是一樣的了。CSS定義的時(shí)候和ID選擇器差不多，只不過把#換成，如下one{font-size:12px;background:#900;color:090;}。補(bǔ)充:一個(gè)標(biāo)簽可以有多個(gè)類選擇器的值，不同的值用空格分開，如：<divclass="oneyellowleftStyle">此處為p標(biāo)簽內(nèi)的文字</div>這樣我們可以將多個(gè)樣式用到同一個(gè)標(biāo)簽中，當(dāng)然也可以，ID和class一塊用<divid="div1"class="oneyellowleftStyle">此處為p標(biāo)簽內(nèi)的文字</div>。【通用選擇器】“通用選擇器”是CSS選擇器中功能最強(qiáng)大但是用的最少的一種選擇器。強(qiáng)大之處是因?yàn)樗麑Ω讣壷械乃蠬TML標(biāo)簽進(jìn)行樣式定義，可對具有共同樣式的標(biāo)簽樣式進(jìn)行定義，這樣可以大大精簡代碼。3.2CSS盒子模型盒子模型是CSS控制頁面時(shí)一個(gè)很重要的概念，只要很好地掌握了盒子模型以及其中每個(gè)元素的用法，才能真正的控制好頁面中的各個(gè)元素。所有頁面中的元素都可以看成是盒子，占據(jù)著一定的頁面空間，一般說來這些被占據(jù)的空間往往要比單純的內(nèi)容大。換句話說，可以通過調(diào)整盒子的邊距和距離等參數(shù)，來調(diào)節(jié)盒子的大小。一個(gè)頁面由很多這樣的盒子組成，這些盒子之間會相互影響，因此掌握盒子模型需要從倆方面來理解。一是理解一個(gè)孤立的盒子的內(nèi)部結(jié)構(gòu)，二是理解多個(gè)盒子之間的相互關(guān)系。在CSS中，一個(gè)獨(dú)立的盒子模型由content內(nèi)容，border邊框，padding內(nèi)邊距和margin外邊距4個(gè)部分組成。一個(gè)盒子實(shí)際所占有的寬度或高度是由內(nèi)容+內(nèi)邊距+邊框+外邊距組成的。在CSS中，可以通過設(shè)定width和height的值來控制內(nèi)容所占的矩形的大小。并且對于任何一個(gè)盒子，都可以分別設(shè)定4條邊各自的border、padding與margin。因此只要利用好這些屬性就能夠?qū)崿F(xiàn)各種各樣的排版效果。3.3CSS+DIV的基本設(shè)計(jì)若采取DIV+CSS的網(wǎng)頁布局結(jié)構(gòu)，首先需要用div來分塊，定義語義結(jié)構(gòu)；然后用CSS來定位和添加樣式，如浮動、位置、對齊屬性、加入背景等；然后用CSS定義的各個(gè)塊中添加相應(yīng)的樣式，如文字、圖片等。用<div>標(biāo)記把網(wǎng)頁區(qū)分成不同模塊，包括header、content(其中有sidebar邊欄區(qū)域和main主體區(qū)域)、footer三個(gè)區(qū)域，分別作為網(wǎng)頁的頭部、內(nèi)容和版權(quán)區(qū)域。編寫HTML文檔代碼：<body><divid=”container”><divid=”header”>頭部</div><divid=”content”><divid=”sidebar”>邊欄</div><divid=”main”>內(nèi)容</div></div><divid=”footer”>版權(quán)</div></div></body>設(shè)置CSS樣式代碼：#container{margin:0;width:90%;}#container{margin:0;width:90%;}#header{height:200px;margin-top:20px;border:2pxsolid;}#content{height:500px;width:100%;margin-bottom:10px;}#sidebar{float:right;width:30%;height:500px;border:1pxsolid;}#main{float:left;width:70%;height:400px;border:2pxsolid;}#footer{height:60px;border:1pxsolid;}其中，width屬性設(shè)置為百分比形式，表示當(dāng)窗口大小發(fā)生變化時(shí)，頁面的寬度也隨之變化。Container的margin屬性為0auto，表示上下邊距為0像素，auto表示左右邊距為自動，實(shí)現(xiàn)網(wǎng)頁的居中顯示。Sidebar的float屬性為right，標(biāo)識靠右對齊，main的float屬性為left，表示靠左對齊，實(shí)現(xiàn)中間兩列整欄的顯示效果。Border屬性為2pxsolid，表示2個(gè)像素寬的實(shí)線邊框。3.4DivCSS排版對網(wǎng)站優(yōu)化的影響第一：spider爬行效率DivCSS的代碼精簡是table無法比擬的，divCSS實(shí)現(xiàn)了樣式和布局完全分離。第二：網(wǎng)頁打開速度DIVCSS布局較Table布局減少了頁面代碼，加載速度得到很大的提高，這在Spider爬行時(shí)是非常有利的。過多的頁面代碼可能造成爬行超時(shí)，Spider就會認(rèn)為這個(gè)頁面無法訪問，影響收錄及權(quán)重。題外：tale布局的頁面打開原理：一般table布局的頁面是大表格套中表格，中表格嵌套小表格，小表格再套小小表格。一般第一個(gè)表格（最外邊的）要讀取完才能顯示出來，讀取大表格的同時(shí)又要讀取大表格中的小表格，大大加長了網(wǎng)頁打開速度。第三：對排名的影響基于XTHML標(biāo)準(zhǔn)的DIVCSS布局，一般在設(shè)計(jì)完成后會盡可能的完善到能通過W3C驗(yàn)證。截止目前沒有搜索引擎表示排名規(guī)則會傾向于符合W3C標(biāo)準(zhǔn)的網(wǎng)站或頁面，但事實(shí)證明使用XTHML架構(gòu)的網(wǎng)站排名狀況一般都不錯(cuò)。3.5CSS和HTML的結(jié)合CSS與HTML的結(jié)合使用完美的實(shí)現(xiàn)了網(wǎng)頁表現(xiàn)與內(nèi)容的分離。網(wǎng)頁設(shè)計(jì)通常使用CSS來控制網(wǎng)頁的樣式，其中包括頁面的布局、字體、背景等等信息。而HTML則用來羅列網(wǎng)頁中的內(nèi)容，其中包括文本、圖片等。CSS樣式表可以以多種方式應(yīng)用到HTML頁面當(dāng)中，但最常用最好的方式是外部連接。這種方式是將CSS樣式代碼放入一個(gè)外部文件中，再由HTML中的link元素進(jìn)行調(diào)用。這樣做的好處是可以使多個(gè)網(wǎng)頁調(diào)用同一個(gè)樣式表文件，最大限度的實(shí)現(xiàn)了代碼重用及網(wǎng)站文件的最優(yōu)化配置。具體的使用方法為：在HTML頁面中的head標(biāo)簽下使用link元素調(diào)用。

第四章CSS+DIV的應(yīng)用4.1企業(yè)板塊的分析1、企業(yè)板塊頁面布局簡述企業(yè)板塊最重要的是公司簡介，承擔(dān)著反映企業(yè)的重要信息，包括企業(yè)概況、發(fā)展歷史、主要業(yè)績以及組織結(jié)構(gòu)等，作用是讓瀏覽者對企業(yè)的情況有一個(gè)明確的掌握。外界可以憑借企業(yè)網(wǎng)站了解認(rèn)識企業(yè)的運(yùn)營，包括業(yè)務(wù)范圍、運(yùn)營狀況、性質(zhì)和實(shí)力等等方面的信息，有一個(gè)了解的平臺，促使更多的合作。公司簡介的主要內(nèi)容是準(zhǔn)確并且完整地描述企業(yè)的業(yè)務(wù)范圍、主要產(chǎn)品、相關(guān)服務(wù)等內(nèi)容，并且全面介紹企業(yè)的性質(zhì)、地址、聯(lián)系方式等。最好是還可以提供企業(yè)的年度報(bào)表，利于訪問者更好、更清晰地從具體的數(shù)據(jù)上了解企業(yè)的經(jīng)營狀況、方針和實(shí)力。圖4-1企業(yè)板塊2、CSS+DIV布局以企業(yè)簡介為例，CSS代碼如下：.pagewith{width:990px;}.content{height:auto;}.content_top_left{width:590px;height:270px;float:left;margin-top:8px;padding:0px20px0px20px;color:#727477;}.content_top_right{width:270px;height:270px;float:left;margin-top:8px;text-align:left;}.content_center{padding-top:10px;height:200px;text-align:left;margin-top:5px;margin-bottom:10px;padding-left:5px;margin-left:2px;color:#727477;}.content_bottom_left{width:283px;height:160px;margin-top:5px;float:left;}.content_bottom_right{width:700px;height:auto;float:left;margin-top:5px;text-align:left;}a.t2{font-size:12px;font-weight:normal;text-decoration:none;color:#727477;}a.t2:hover{font-size:12px;font-weight:normal;text-decoration:none;color:blue;}a.t3{font-size:16px;font-weight:bold;text-decoration:none;color:black;}a.t3:hover{font-size:16px;font-weight:bold;text-decoration:none;color:blue;}CSS樣式表是用于（增強(qiáng)）控制網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁內(nèi)容分離的一種標(biāo)記性語言。通過使用CSS樣式表，不僅可以對文字格式進(jìn)行設(shè)置，還可以更加精確地控制布局、字體、顏色、背景和其他圖文效果，從而避免在標(biāo)識字符和設(shè)置段落格式等操作時(shí)重復(fù)定義需要的樣式，提高網(wǎng)頁編輯的效率。本網(wǎng)站統(tǒng)一采用了CSS+DIV網(wǎng)頁技術(shù)制作。使得網(wǎng)頁更加清晰美觀。

結(jié)束語通過這次畢業(yè)設(shè)計(jì)，使我受到了一次用專業(yè)知識、專業(yè)技能分析和解決問題的全面系統(tǒng)的鍛煉。使我在綜合知識的選用方面，在企業(yè)網(wǎng)站開發(fā)的基本思想、方法方面，以及在常用代碼設(shè)計(jì)思路技巧的掌握方面都能向前邁了一大步。在這次的畢業(yè)設(shè)計(jì)中，讓我深深地體現(xiàn)到進(jìn)行網(wǎng)站開發(fā)不是一件簡單的事情，它需要設(shè)計(jì)者具有全面的專業(yè)知識、縝密的思維、嚴(yán)謹(jǐn)?shù)墓ぷ鲬B(tài)度以及較高的分析問題、解決問題的能力，而我在很多方面還有欠缺。我會在以后工作的使用過程中，根據(jù)工作的具體要求不斷的修改、完善、爭取使該系統(tǒng)慢慢趨向完美。致謝在本論文完成之際，首先要向我的導(dǎo)老王小蒙、馮啟榮致以誠摯的謝意。在本論文的寫作過程中，我不僅學(xué)到了扎實(shí)的專業(yè)知識，也在怎樣處人處事等方面收益很多；在此我謹(jǐn)向王小蒙和馮啟榮老師表示我衷心的感謝和深深的敬意。同時(shí)，我要感謝我們學(xué)院給我們授課的各位老師，正是由于他們的傳道、授業(yè)、解惑，讓我學(xué)到了專業(yè)知識，并從他們身上學(xué)到了如何求知治學(xué)、如何讓為人處事。我也要感謝我的母?；W(xué)院，是他提供了良好的學(xué)習(xí)環(huán)境和生活環(huán)境，讓我們的大學(xué)生活豐富多姿，為我的人生留下精彩的一筆。另外，衷心的感謝我的同窗同學(xué)們和計(jì)算機(jī)系的學(xué)友們；在我畢業(yè)論文寫作中，與他們的探討交流使我受益頗多；同時(shí)，他們也給了我很多無私的幫助和支持，我再次深表謝意。本文是在倆位老師精心指導(dǎo)和大力支持下完成的。老師以其嚴(yán)謹(jǐn)求實(shí)的治學(xué)態(tài)度、高度的敬業(yè)精神、兢兢業(yè)業(yè)、孜孜以求的工作作風(fēng)和大膽創(chuàng)新的進(jìn)取精神對我產(chǎn)生重要影響。他們淵博的知識、開闊的視野和敏銳的思維給了我深深的啟迪。另外，我最后再次對關(guān)心、幫助我的老師和同學(xué)們表示衷心的感謝!參考文獻(xiàn)[1]:榮艷東編著，網(wǎng)頁制作項(xiàng)目實(shí)訓(xùn)教程，北京交通大學(xué)大學(xué)出版社，2012年2月第1版[2]:TommyOlssonPaulO’Brien著，高偉蘇寶龍等譯，CSS終極參考手冊，中國水水利出版社，2009年6月第1版基于C8051F單片機(jī)直流電動機(jī)反饋控制系統(tǒng)的設(shè)計(jì)與研究基于單片機(jī)的嵌入式Web服務(wù)器的研究MOTOROLA單片機(jī)MC68HC（8）05PV8/A內(nèi)嵌EEPROM的工藝和制程方法及對良率的影響研究基于模糊控制的電阻釬焊單片機(jī)溫度控制系統(tǒng)的研制基于MCS-51系列單片機(jī)的通用控制模塊的研究基于單片機(jī)實(shí)現(xiàn)的供暖系統(tǒng)最佳啟停自校正（STR）調(diào)節(jié)器單片機(jī)控制的二級倒立擺系統(tǒng)的研究基于增強(qiáng)型51系列單片機(jī)的TCP/IP協(xié)議棧的實(shí)現(xiàn)基于單片機(jī)的蓄電池自動監(jiān)測系統(tǒng)基于32位嵌入式單片機(jī)系統(tǒng)的圖像采集與處理技術(shù)的研究基于單片機(jī)的作物營養(yǎng)診斷專家系統(tǒng)的研究基于單片機(jī)的交流伺服電機(jī)運(yùn)動控制系統(tǒng)研究與開發(fā)基于單片機(jī)的泵管內(nèi)壁硬度測試儀的研制基于單片機(jī)的自動找平控制系統(tǒng)研究基于C8051F040單片機(jī)的嵌入式系統(tǒng)開發(fā)基于單片機(jī)的液壓動力系統(tǒng)狀態(tài)監(jiān)測儀開發(fā)模糊Smith智能控制方法的研究及其單片機(jī)實(shí)現(xiàn)一種基于單片機(jī)的軸快流CO〈,2〉激光器的手持控制面板的研制基于雙單片機(jī)沖床數(shù)控系統(tǒng)的研究基于CYGNAL單片機(jī)的在線間歇式濁度儀的研制基于單片機(jī)的噴油泵試驗(yàn)臺控制器的研制基于單片機(jī)的軟起動器的研究和設(shè)計(jì)基于單片機(jī)控制的高速快走絲電火花線切割機(jī)床短循環(huán)走絲方式研究基于單片機(jī)的機(jī)電產(chǎn)品控制系統(tǒng)開發(fā)基于PIC單片機(jī)的智能手機(jī)充電器基于單片機(jī)的實(shí)時(shí)內(nèi)核設(shè)計(jì)及其應(yīng)用研究基于單片機(jī)的遠(yuǎn)程抄表系統(tǒng)的設(shè)計(jì)與研究基于單片機(jī)的煙氣二氧化硫濃度檢測儀的研制基于微型光譜儀的單片機(jī)系統(tǒng)單片機(jī)系統(tǒng)軟件構(gòu)件開發(fā)的技術(shù)研究基于單片機(jī)的液體點(diǎn)滴速度自動檢測儀的研制基于單片機(jī)系統(tǒng)的多功能溫度測量儀的研制基于PIC單片機(jī)的電能采集終端的設(shè)計(jì)和應(yīng)用基于單片機(jī)的光纖光柵解調(diào)儀的研制氣壓式線性摩擦焊機(jī)單片機(jī)控制系統(tǒng)的研制基于單片機(jī)的數(shù)字磁通門傳感器基于單片機(jī)的旋轉(zhuǎn)變壓器-數(shù)字轉(zhuǎn)換器的研究基于單片機(jī)的光纖Bragg光柵解調(diào)系統(tǒng)的研究單片機(jī)控制的便攜式多功能乳腺治療儀的研制基于C8051F020單片機(jī)的多生理信號檢測儀基于單片機(jī)的電機(jī)運(yùn)動控制系統(tǒng)設(shè)計(jì)Pico專用單片機(jī)核的可測性設(shè)計(jì)研究基于MCS-51單片機(jī)的熱量計(jì)基于雙單片機(jī)的智能遙測微型氣象站MCS-51單片機(jī)構(gòu)建機(jī)器人的實(shí)踐研究基于單片機(jī)的輪軌力檢測基于單片機(jī)的GPS定位儀的研究與實(shí)現(xiàn)基于單片機(jī)的電液伺服控制系統(tǒng)用于單片機(jī)系統(tǒng)的MMC卡文件系統(tǒng)研制基于單片機(jī)的時(shí)控和計(jì)數(shù)系統(tǒng)性能優(yōu)化的研究基于單片機(jī)和CPLD的粗光柵位移測量系統(tǒng)研究單片機(jī)控制的后備式方波UPS提升高職學(xué)生單片機(jī)應(yīng)用能力的探究基于單片機(jī)控制的自動低頻減載裝置研究基于單片機(jī)控制的水下焊接電源的研究基于單片機(jī)的多通道數(shù)據(jù)采集系統(tǒng)基于uPSD3234單片機(jī)的氚表面污染測量儀的研制基于單片機(jī)的紅外測油儀的研究96系列單片機(jī)仿真器研究與設(shè)計(jì)基于單片機(jī)的單晶金剛石刀具刃磨設(shè)備的數(shù)控改造基于單片機(jī)的溫度智能控制系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)基于MSP430單片機(jī)的電梯門機(jī)控制器的研制基于單片機(jī)的氣體測漏儀的研究基于三菱M16C/6N系列單片機(jī)的CAN/USB協(xié)議轉(zhuǎn)換器基于單片機(jī)和DSP的變壓器油色譜在線監(jiān)測技術(shù)研究基于單片機(jī)的膛壁溫度報(bào)警系統(tǒng)設(shè)計(jì)基于AVR單片機(jī)的低壓無功補(bǔ)償控制器的設(shè)計(jì)基于單片機(jī)船舶電力推進(jìn)電機(jī)監(jiān)測系統(tǒng)