信息網(wǎng)絡技術與網(wǎng)絡出版發(fā)行04

第五章網(wǎng)頁編輯與設計授課教師：劉爽概覽超文本標記語言、腳本語言與動態(tài)網(wǎng)頁HTML超文本標記語言設計HTML語言的目的是為了能把存放在一臺電腦中的文本或圖形與另一臺電腦中的文本或圖形方便地聯(lián)系在一起，形成有機的整體，人們不用考慮具體信息是在當前電腦上還是在網(wǎng)絡的其它電腦上。我們只需使用鼠標在某一文檔中點取一個圖標，Internet就會馬上轉到與此圖標相關的內容上去，而這些信息可能存放在網(wǎng)絡的另一臺電腦中。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字、圖形、動畫、聲音、表格、鏈接等。HTML的結構包括頭部（Head）、主體（Body）兩大部分，其中頭部描述瀏覽器所需的信息，而主體則包含所要說明的具體內容。HTML超文本樣例頭部主體腳本語言常見的網(wǎng)頁腳本語言有JavaScript和VBScript兩種，當初開發(fā)出來的主要目的是為了解決服務器終端語言，比如Perl，遺留的速度問題。當時服務端需要對數(shù)據(jù)進行驗證，由于網(wǎng)絡速度相當緩慢,只有28.8kbps，驗證步驟浪費的時間太多。于是Netscape的瀏覽器Navigator加入了Javascript，提供了數(shù)據(jù)驗證的基本功能。JavaScript的適應范圍比VBScript更廣泛，多數(shù)腳本采用Javascript，腳本語言能夠使終端頁面交互更為友好，增強用戶的交互體驗，便利用戶的數(shù)據(jù)操作。腳本語言使靜態(tài)的網(wǎng)頁在與用戶的鼠標或鍵盤輸入的數(shù)據(jù)進行交互時，出現(xiàn)各種自動化的提示信息或頁面動態(tài)。Javascript樣例：使用下面的腳本可以在鼠標懸停和移出某區(qū)域時改變該區(qū)域CSS樣式風格<trclass="tr3f_one"onMouseOver="this.className='tr3f_two'"onMouseOut="this.className='tr3f_one'">該腳本可使TR行的樣式在tr3f_one和tr3f_two之間變換Java腳本除了經(jīng)常用于針對用戶的鼠標與鍵盤操作，即時動態(tài)的改變顯示內容或風格，也經(jīng)常用于控制顯示與隱藏重要的操作提示信息。如：在進行用戶注冊的時候，輸入密碼結束時，提示密碼是否足夠安全或密碼中有系統(tǒng)禁止的非法字符，或提示郵件地址不符合規(guī)范等。常見HTML標簽名稱屬性樣例效果段落<p>Align對齊Align="center"居中對齊（回車）斷行<br/>無強制斷行（Shift+回車）字體<font>Size字號Size="3"文字大小為3號字Face字體Face="宋體"字體為宋體Color色彩color="#FF3366”色彩為亮紅色標題<h1>…<h6>無項目列表<ul><li>Type類型Type="square"方形項目列表符號編號列表<ol><li>Type類型Type="I"編號列表(羅馬數(shù)字)水平線<HR>Noshade無陰影Color色彩Size粗細NoshadeColor=graySize=4水平線立體感消失水平線灰色4個像素粗HTMLSample02.html<h1>H1</h1><h2>H2</h2><h3>H3</h3><h4>H4</h4><p><fontsize="1"face="宋體">Size1漢字</font></p><p><fontsize="2"face="Arial">Size2Arial漢字</font></p><p><fontsize="3"face="sans-serif">Size3sans-serif漢字</font></p>HTMLSample02.html<p><fontsize="4"face="Tahoma">Size4Tahoma漢字</font><fontsize="2"face="Tahoma">Size2Tahoma漢字</font><br/><fontsize="1"face="Tahoma">Size1Tahoma漢字</font></p><p><fontsize="5">Size5漢字</font></p><palign="center"><fontsize="6">Size6漢字</font></p>HTMLSample02.html<ultype="square"><li>ABCDEF</li><li>ABCDEF</li><li>ABCDEF</li></ul><oltype="I"><li>ABCDEF</li><li>ABCDEF</li><li>ABCDEF</li></ol><p></p><p></p><p></p><p></p><p></p>HTMLSample02.html字體與特殊字符網(wǎng)頁中經(jīng)常使用的中文字體有：宋體、微軟雅黑、仿宋、黑體微軟雅黑、仿宋、黑體在啟用操作系統(tǒng)的平滑字體特性時才有較好顯示效果。網(wǎng)頁中經(jīng)常使用的英文字體有：Arial、Tahoma、sans-serif特殊字符：不斷行空格：

版權字符：©注冊商標字符：®斷行字符：<br>①③②字體與特殊字符DreamweaverCS4安裝安裝主程序下載：AdobeDreamweaverCS4lite（精簡版）序列號1192-1014-7077-3383-4280-7435安裝CSS規(guī)則定義窗口漢化包如Dreamweaver沒有安裝在默認路徑下，必須注意選擇正確的安裝位置)默認路徑C:\ProgramFiles\Adobe\AdobeDreamweaverCS4\zh_CN\resources可能的路徑D:\ProgramFiles\Adobe\AdobeDreamweaverCS4\zh_CN\resources或D:\AdobeDreamweaverCS4\zh_CN\resources搜狗搜索引擎百度搜索引擎建立網(wǎng)站管理使用Dreamweaver建立網(wǎng)站切忌直接建立網(wǎng)頁，必須先建立站點管理，在站點管理器中創(chuàng)建空白頁面后，才開始正式的網(wǎng)頁設計與編輯工作。站點管理器使Dreamweaver的設計工作更加智能化，使網(wǎng)頁排錯工作和斷鏈情況得到很大改善。典型站點結構：站點根(X:\Sites\Site01)imagesstylesguestbookIndex.aspIndex.html圖片樣式表留言簿程序典型大型網(wǎng)站文件夾結構站點根imagesstylesInformationProductsServiceDownloadGuestbookForum/bbsManage/admin圖像CSS樣式信息/公告/新聞（News）產(chǎn)品信息服務/案例(Projects)下載留言簿動態(tài)網(wǎng)頁程序論壇動態(tài)網(wǎng)頁程序后臺管理程序動態(tài)網(wǎng)頁程序建立網(wǎng)站管理的步驟在站點菜單中選擇“新建站點”設置站點名，站點URL地址，下一步選擇不使用服務器技術，下一步設置站點存儲位置（整個路徑必須全英文），下一步設置如何連接到遠程服務器為無，下一步，完成在文件面板中右擊站點根，新建“images”文件夾在文件面板中右擊站點根，新建“styles”文件夾在文件面板中右擊站點根，新建index.html文件，此時可開始編輯該頁，作為站點首頁創(chuàng)建站點文件或文件夾時必須使用英文或數(shù)字，忌用中文字符中文字符在網(wǎng)站服務器中經(jīng)常會導致不可預計的錯誤，所以很少用在Dreamweaver中編寫網(wǎng)頁認識基本操作區(qū)域認識屬性面板輸入文字字體列表編輯段落(回車)斷行(Shift+回車)不斷行空格(Ctrl+Shift+空格)首行縮進(兩個全角中文空格)縮進項目列表編號列表插入特殊字符插入水平線Dreamweaver手工編寫網(wǎng)頁代碼的方法課后練習：

使用Dreamweaver創(chuàng)建網(wǎng)站結構正確安裝Dreamweaver和CSS面板漢化包創(chuàng)建網(wǎng)站結構編輯恰當?shù)淖煮w列表練習基本的文字排版通過切分視圖觀察文字排版時出現(xiàn)的各種HTML編碼練習不斷行回車、空格、首行縮進、版權商標符號的插入圖片<imgsrc=“TestSite/Chrysanthemum.jpg”alt=“太陽花"width="1024"height="768"hspace="16"vspace="16"border="2"/>圖片需要使用相對地址或絕對地址來顯示到網(wǎng)頁中圖片可設置屬性：來源src=“images/pic0free.jpg”寬度與高度width=500height=300邊框border=2水平間距vspace=16垂直間距hspace=16提示文字alt=“圖1"鏈接、相對地址與絕對地址鏈接的制作特殊的絕對地址在使用Dreamweaver的F12快捷鍵預覽時，經(jīng)常會在地址欄出現(xiàn)這種絕對地址，這種地址瀏覽正確的網(wǎng)頁不一定在發(fā)布時能夠正常顯示，但如果在站點管理器的協(xié)調下，能夠避免常見的低級錯誤。表格<tablewidth="400"height="500"border="3"cellspacing="10"cellpadding="10"bgcolor="#000000"bordercolor="#FF9900"background="../../images/Penguins.jpg"><trbgcolor="#FFCC00"><tdbgcolor="#00CC00"> </td><tdbordercolor="#3333CC"> </td></tr><tr><td> </td><td> </td></tr></table>表格列合并<tablewidth="300"border="1"cellspacing="5"cellpadding="5"><tr><tdcolspan="2"> </td></tr><tr><td> </td><td> </td></tr></table>表格行合并<tablewidth="300"border="1"cellspacing="5"cellpadding="5"><tr><td> </td><tdrowspan="2"> </td></tr><tr><td> </td></tr></table>表格屬性面板與單元格屬性面板表格排版網(wǎng)頁設計時，我們會發(fā)現(xiàn)文字、列表、圖片、表格等內容經(jīng)常是順序往下排列。如何讓文字或圖片能夠在網(wǎng)頁設計時放到指定的位置呢？最早的設計方法是使用透明表格，利用表格的單元格固定網(wǎng)頁內可視化元素位置。如文字，圖像，列表，水平線等。甚至可見的表格也經(jīng)常通過透明表格指定位置。表格排版示例首頁產(chǎn)品服務案例資料下載用戶社區(qū)聯(lián)系我們LogoBannerFooterL_ListM_ListR_List第二部分層疊式樣式表排版用統(tǒng)一的方法規(guī)范網(wǎng)頁設計，增強表現(xiàn)力CSS樣式表常見的樣式表定義創(chuàng)建簡單的類，使用類統(tǒng)一相似元素的顯示風格。如統(tǒng)一小標題的風格重定義BodyPTDH1H2H3標簽重定義復合內容a:linka:hovera:visiteda:active技巧：BODY設置長條背景圖可以快速美化網(wǎng)頁畫面P設置像素單位的縮進，可以方便的控制段落樣式P設置行高，可使文字精確對齊使塊狀元素水平居中對齊

margin:0auto;/*水平居中*/用CSS樣式重定義

鏈接（復合內容）效果重定義a:link黑色無下劃線重定義a:hover黑色有下劃線重定義a:visited灰色有下劃線重定義a:active橙色無下劃線重定義a:link褐色無下劃線重定義a:hover褐色有下劃線重定義a:visited紅色有下劃線重定義a:active藍色無下劃線CSS美化技巧（1）背景圖居中縱向平鋪（多數(shù)長版型網(wǎng)頁使用）body{ background-attachment:fixed; background-color:#FFF; background-image:url(/image/logo_home_c.png); background-repeat:repeat-y; background-position:centertop;背景圖居中橫向平鋪（多數(shù)為短版型網(wǎng)頁使用）body{ background-attachment:fixed; background-color:#FFF; background-image:url(/image/logo_home_c.png); background-repeat:repeat-x; background-position:leftcenter;創(chuàng)建與鏈接外部樣式表外部樣式表是一個獨立的樣式表代碼文件，我們可以通過鏈接網(wǎng)頁到不同的樣式表來改變網(wǎng)站的整體顯示風格我們甚至可以利用鏈接不同的精心設計好的樣式表將網(wǎng)站的排版格局進行快速轉換，包括將背景圖，背景色彩進行整體轉換，這樣，在不同的節(jié)日或者季節(jié)，我們就可以快速裝扮網(wǎng)頁了。通過靈活定義和選擇外部樣式表，網(wǎng)頁的創(chuàng)作風格可以千變萬化，學好網(wǎng)頁的排版設計，樣式表技術是一個必須完整掌握的內容。結構與表現(xiàn)的分離拓展：制作可更換皮膚的網(wǎng)頁資料來源原理：設置兩個風格不同的網(wǎng)頁外部樣式，分別為a.cssb.css在測試網(wǎng)頁的代碼中加入這兩個樣式的鏈接，并定義title屬性利用JS程序遍歷有title屬性的樣式用按鈕控制哪個樣式產(chǎn)生作用容易出錯的地方：資料中有小錯誤，注意參數(shù)的一一對應關系注意JS代碼中的大小寫嚴格區(qū)分問題盒子模型1尺寸完整清晰的理解盒子模型，是學好CSS樣式的首要條件盒子模型2層次關系/dennyxno1@yeah/blog/static/7357517920093432725956/完整清晰的理解盒子模型，是學好CSS樣式的首要條件CSS“類型”樣式字體大小修飾（加粗、下劃線、刪除線、變體等）行高色彩CSS“區(qū)塊”樣式單詞間距字母間距垂直對齊文本對齊CSS“背景”樣式背景色背景圖背景圖重復背景圖附加背景圖位置CSS“方框”樣式寬高浮動填充距離邊界距離CSS“邊框”樣式實線邊框虛線邊框邊框線粗細邊框線色彩CSS“列表”樣式列表樣式項目符號圖像位置CSS“定位”樣式DIV標簽位置顯示Z軸溢出文本內容作業(yè)4：制作CSS修飾的單頁利用CSS樣式對BODYH1、H2、P、a:linka:hovera:visited等標簽進行重定義使網(wǎng)頁呈現(xiàn)如下圖效果：鼠標懸停到鏈接上，背景變紅色有虛線邊框，小標題為深綠色Body設置縱向平鋪的漸變圖片背景作業(yè)格式：站點文件夾壓縮包第三部分導航條與DIV+CSS排版用CSS樣式做導航條效果準備導航條背景圖片插入DIV容器標簽，定義#Nav制作項目列表定義特殊的CSS樣式表，假設樣式名為#Nav定義復合內容#Navul定義復合內容#Navli定義復合內容#Nava

定義復合內容#Nava:link

定義復合內容#Nava:visited

定義復合內容#Nava:hoverli需要Float:left;實現(xiàn)橫向導航條效果a通過Display:block;使之成為盒子塊狀元素利用背景的垂直位移可以用同一張背景圖實現(xiàn)背景變化效果DIV+CSS樣式排版DIV標準布局1橫向3欄#Container#Header#Menu/Navbar#MainContent#Footer#container{margin:0auto;width:900px;}#header{height:100px;background:#6cf;margin-bottom:5px;}#menu{height:30px;background:#09c;margin-bottom:5px;}#mainContent{height:500px;background:#cff;margin-bottom:5px;}#footer{height:60px;background:#6cf;}#container{margin:0auto;width:900px;}DIV標準布局2標準內容頁#Container#Header#Menu/Navbar#MainContent#SideBar#Content#Footer#container{margin:0auto;width:900px;}#header{height:100px;background:#6cf;margin-bottom:5px;}#mainContent{margin-bottom:5px;}#sidebar{float:left;width:200px;height:500px;background:#9ff;}#content{float:right;width:695px;height:500px;background:#cff;}/*因為是固定寬度，采用左右浮動方法可有效避免ie3像素bug*/#footer{height:60px;background:#6cf;}DIV標準布局3標準內容頁#Container#Header#Menu/Navbar#MainContent#SideBar1#SideBar2#Content#Footer#container{margin:0auto;width:900px;}#header{height:100px;background:#6cf;margin-bottom:5px;}#menu{height:30px;background:#09c;margin-bottom:5px;}#mainContent{height:500px;margin-bottom:5px;}#sidebar{float:left;width:200px;height:500px;background:#9ff;}#sidebar2{float:right;width:200px;height:500px;background:#9ff;}#content{margin:0205px!important;margin:0202px;height:500px;background:#cff;}#footer{height:60px;background:#6cf;}常見縮寫與簡化CSSHack/view/1119452.htm學習資料由于不同的瀏覽器，比如InternetExplorer6,InternetExplorer7,MozillaFirefox等，對CSS的解析認識不一樣，因此會導致生成的頁面效果不一樣，得不到我們所需要的頁面效果。這個時候我們就需要針對不同的瀏覽器去寫不同的CSS，讓它能夠同時兼容不同的瀏覽器，能在不同的瀏覽器中也能得到我們想要的頁面效果。作業(yè)5CSS模板修改演講完畢，謝謝觀看！附錄資料：不需要的可以自行刪除

信息技術的戰(zhàn)略管理應用信息技術創(chuàng)造組織馬力本章的重點本章考察七種由IT技術激活的策略,提高組織的競爭能力IT促成完美的服務組織馬力的開發(fā)質量是組織競爭的基礎OHP策略創(chuàng)造競爭優(yōu)勢OHP策略應用激進還是持續(xù)?競爭優(yōu)勢什么是競爭優(yōu)勢?如何獲得競爭優(yōu)勢?

如何保持競爭優(yōu)勢?

客戶對產(chǎn)品或服務的認同。通過對競爭環(huán)境及自己企業(yè)內的了解，開發(fā)新的產(chǎn)品或創(chuàng)建良好的服務。不斷創(chuàng)新，保持優(yōu)勢。組織馬力組織馬力是組織力量與速度的結合。組織力量盡可能地滿足顧客的期望體現(xiàn)在更多的適合客戶需要的產(chǎn)品或服務組織速度能夠迅速地滿足客戶的期望體現(xiàn)了對客戶需求的響應速度利用IT提高OHP的策略準時生產(chǎn)方式Just-in-Time組織團隊信息伙伴靈活的運營跨國公司虛擬組織學習型組織質量：競爭的基礎什麼是質量？質量不是優(yōu)良、漂亮、豪華。質量是指滿足顧客的期望。質量是OHP的基礎。全面質量管理（TQM）滿足客戶的期望持續(xù)不斷的改進組織范圍的質量觀念JIT方法Just-in-Time-----將產(chǎn)品或服務在客戶需要時，能及時的生產(chǎn)并送達。JIT的方法將以生產(chǎn)為中心的方式轉化為以客戶為中心（訂單到達之前沒有產(chǎn)品），以避免生產(chǎn)的過剩。JIT增強了企業(yè)的柔性，減少庫存水平。目的：提高組織的速度關鍵：外部的信息溝通（利用通信技術） 生產(chǎn)過程的管理（內部生產(chǎn)過程的控制）--過程預測--材料需求計劃MATERIALREQUIREMENTSPLANNING(MRP)）--制造資源計劃MANUFACTURINGRESOURCEPLANNING(MRPII)

組織中的團隊團隊：項目團隊、長期團隊-----一組擁有共同的目標、協(xié)同工作的人。目的：團隊的創(chuàng)造力增強組織的力量關鍵：網(wǎng)絡平臺，群件的支持信息伙伴----與客戶間加強信息的溝通，實現(xiàn)信息的共享，促進信息的流動。即，通過共享信息增強每個合作組織的實力。目的與戰(zhàn)略：提高組織的速度：