《網(wǎng)頁設計與制作教程HTML+CSS+Bootstrap》課件 項目八創(chuàng)建網(wǎng)站全瀚通信

項目八創(chuàng)建《全瀚通信》網(wǎng)站

項目簡介

本項目以全瀚通信網(wǎng)站為例，設計制作一個企業(yè)網(wǎng)站。

“附件二”中進行了美工圖的設計和欄目的規(guī)劃，并通過切片生成了網(wǎng)站需要的圖片素材。本項目我們將在Dreamweaver中制作并完成網(wǎng)站主頁和分頁的DIV布局，并進一步將網(wǎng)頁拓展成為一個風格統(tǒng)一、功能較齊全的網(wǎng)站，完成整站超鏈接并制作網(wǎng)站后臺的靜態(tài)效果。

項目目標

1.了解網(wǎng)站綜合設計的前期準備工作；

2.能自主進行網(wǎng)站欄目的規(guī)劃、功能和頁面的設計；

3.掌握頁面布局、超鏈接、模板、表單、框架、表格等技術的綜合應用；

4.掌握在頁面設計中添加行為、Bootstrap組件以實現(xiàn)特殊的效果；

5.通過實戰(zhàn)來加強創(chuàng)意、設計、資料收集整理能力。

工作任務

一個完整的網(wǎng)站，頁面一般分為這樣幾種類型：

首頁、列表頁、內容頁、交互頁、單頁面

本項目具體工作任務為：

1.Div+CSS布局完成網(wǎng)站首頁及分頁

2.應用模板完成網(wǎng)站的各子欄目頁面

3.使用浮動框架布局完成網(wǎng)站后臺

工作任務——網(wǎng)站功能結構圖

工作任務——網(wǎng)站文件夾組織結構圖

任務一Div+CSS布局完成網(wǎng)站首頁及分頁

任務目標

觀察樣圖，分析網(wǎng)站首頁的結構，采用DIV+CSS布局并插入Bootstrap組件的方法，完成網(wǎng)站首頁的制作。

自行完成網(wǎng)站二級頁面sub.html頁面的制作。

知識準備一網(wǎng)站規(guī)劃及制作流程1.獲取布局的寬度和高度用Photoshop打開“素材\美工圖”中的psd文件，首先打開菜單“編輯-首選項-單位與標尺”，設置標尺單位為“像素”（默認為厘米），然后用矩形選框工具選擇美工圖上需要測量的區(qū)域，即可測量出相應的寬度和高度。2.獲取背景及網(wǎng)頁元素的顏色方法一：用Photoshop打開psd文件，使用吸管工具吸取需要的顏色，那么相應的前景色會得到色彩值。方法二：使用屏幕取色器工具colorCop.exe，可以用吸管隨意吸取屏幕顏色并獲取色彩值。知識準備二快速獲取美工圖的顏色及布局大小

知識準備三DIV和TableDIV+CSS布局的優(yōu)缺點：優(yōu)點：符合W3C標準、頁面加載速度快、布局靈活，內容和樣式的分離，改版更加方便；搜索引擎更加友好。缺點：對于CSS的高度依賴使得網(wǎng)頁設計變得比較復雜、瀏覽器兼容性問題比較突出；TABLE表格布局的優(yōu)缺點:優(yōu)點：布局容易、快捷、結構嚴謹、兼容性好。缺點：改動不便，需重新調整整個頁面，工作量大?？偨Y：DIV主要用來給網(wǎng)站布局定位，而表格主要是用來承載數(shù)據(jù)。

知識準備四溢出文本隱藏并顯示為省略號li{ width:300px; line-height:25px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}步驟一新建站點步驟二完成網(wǎng)站首頁步驟三完成網(wǎng)站分頁

任務實施——具體參見教材

任務二應用模板完成網(wǎng)站子欄目

在首頁和分頁的網(wǎng)頁布局的基礎上，應用“模板”從一個網(wǎng)頁擴展到一個網(wǎng)站，做到風格統(tǒng)一、內容完整、布局合理。任務二的工作重點就是新建模板和應用模板完成網(wǎng)站子欄目的建設。由分頁sub.html另存為模板sub.dwt。并應用模板完成整個網(wǎng)站的制作，具體欄目包括：1.關于我們——兩個單頁面“公司概況”和“企業(yè)文化”。知識點：圖文混排；2.企業(yè)動態(tài)——文字列表頁“新聞資訊”和三級頁面“新聞詳情”及“公告詳情”；3.公司招聘——文字列表頁“招聘崗位”和三級頁面“崗位詳情”及交互頁面“我要應聘”。知識點：表單；4.員工家園——圖片列表頁“企業(yè)環(huán)境”和“員工活動”，圖片詳情為模態(tài)框。知識點：Bootstrap柵格系統(tǒng)和模態(tài)框；5.聯(lián)系我們——單頁面“聯(lián)系我們”。知識點：百度地圖。

任務目標

知識準備一block，inline和inline-block概念和區(qū)別常見的塊級元素有div,form,table,p,pre,h1~h6,dl,ol,ul等。常見的內聯(lián)元素有span,a,strong,em,label,input,select,textarea,img,br等。1.display:blockblock元素會獨占一行。block元素可以設置width、height、margin和padding屬性。2.display:inlineinline元素不會獨占一行。inline元素設置width,height屬性無效。3.display:inline-block既具有block的寬度高度特性又具有inline的同行特性。

知識準備二清除浮動使DIV高度自適應在應用DIV布局時，希望有一種效果：DIV的高度會隨著內容的變化而變化。這需要分兩種情況進行解釋：1.若子級div沒有浮動（float），此時父級div不設置高度，即高度自適應內容的高度；2.若子級div有浮動（float），此時父級div就沒有高度，有兩種方法來解決自適應的問題：(1)子元素最后使用空標記清除浮動（<brclass=“clearfix”><div>）(2)設置父元素的樣式(style="overflow:hidden")

知識準備三Bootstrap模態(tài)框（Modal）插件1.百度地圖開放平臺——2.百度地圖生成器——

/lbsapi/createmap/index.html3.百度地圖開放平臺——

/map/jsdemo.htm#a1_2

知識準備四百度地圖API步驟一將分頁另存為模板

任務實施步驟二“關于我們”欄目的制作步驟三“企業(yè)動態(tài)”欄目的制作步驟四“公司招聘”欄目的制作步驟五“員工家園”欄目的制作步驟六“聯(lián)系我們”欄目的制作1.修改sub.dwt中導航部分的超鏈接，并更新基于該模板的html頁面；2.完成首頁到分頁的超鏈接；3.測試整個網(wǎng)站。步驟七完成站點的超鏈接

任務三浮動框架完成網(wǎng)站后臺

進行網(wǎng)站后臺的布局及功能呈現(xiàn)，使大家對網(wǎng)站有一個完整的概念。網(wǎng)站的后臺具有管理權限，所以必須先登錄后管理，為了實現(xiàn)類似于軟件平臺的即視感，一般為滿屏顯示，并且用表格來管理大量的數(shù)據(jù)。1.登錄頁——后臺入口。知識點：DIV布局、表單；2.后臺管理首頁——帶有浮動框架，實現(xiàn)左側超鏈接目標都顯示在右側浮動框架中的效果。知識點：頁面自適應、DIV布局、浮動框架；3.后臺管理列表頁——如文章管理、招聘管理等。知識點：表格布局；

任務目標

知識準備一CSSposition的絕對定位與相對定位position:static|absolute|relative|fixed1.static:靜態(tài)定位。默認的定位方式。2.absolute:絕對定位。依據(jù)父級的坐標原始點為原始點,但要求父級元素設置為相對定位，否則以瀏覽器的左上角為原始點進行定位。元素的位置通過"left","top","right"以及"bottom"屬性進行規(guī)定?？梢酝ㄟ^z-index進行對象的層疊，z-index值越大越靠前；3.relative:相對定位。對象不可層疊、不脫離文檔流。可以通過CSS的設置使相對定位的元素改變自己的位置，如通過float讓元素浮動，通過margin來讓元素產生位置的移動。4.fixed:固定定位。生成絕對定位的元素，相對于瀏覽器窗口進行定位。

知識準備二DIV水平居中且垂直居中

知識準備三浮動框架iframeiframe是一種浮動框架，可以放在網(wǎng)頁中的任何位置，它是一個容器，里面放的內容是一個網(wǎng)頁。標記：<iframe></iframe>如何創(chuàng)建一個到浮動框架的超鏈接？第一步：為浮動框架添加name屬性(如name=”ma