網(wǎng)頁(yè)設(shè)計(jì)和制作_第1頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)和制作_第2頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)和制作_第3頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)和制作_第4頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)和制作_第5頁(yè)
已閱讀5頁(yè)，還剩4頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

網(wǎng)頁(yè)設(shè)計(jì)與制作第1章網(wǎng)站開發(fā)基礎(chǔ)網(wǎng)站開發(fā)流程網(wǎng)站整體策劃：（1）目標(biāo)用戶定位和網(wǎng)站的主題定位（2）網(wǎng)站整體風(fēng)格創(chuàng)意設(shè)計(jì)（3）網(wǎng)頁(yè)的色彩搭配（4）網(wǎng)站的層次結(jié)構(gòu)和鏈?zhǔn)浇Y(jié)構(gòu)（5）版面布局設(shè)計(jì)設(shè)計(jì)和制作素材：搜集的素材一樣包括跟主題有關(guān)的文字圖片資料；一些優(yōu)秀的頁(yè)面風(fēng)格；開放的源代碼。設(shè)計(jì)和制作的素材包括網(wǎng)站的Log。、Banner、背景圖片、列表圖表、橫幅廣告等。成立站點(diǎn)：安裝和配置IIS；在Dreamweaver中創(chuàng)建站點(diǎn)。4?制作網(wǎng)頁(yè)：創(chuàng)建CSS樣式；制作網(wǎng)站首頁(yè)；制作網(wǎng)站的其他頁(yè)面；制作超鏈接5.測(cè)試和發(fā)布網(wǎng)站：發(fā)布網(wǎng)站前必需要測(cè)試網(wǎng)站，測(cè)試網(wǎng)頁(yè)內(nèi)容、鏈接的正確性和在不同閱讀器中的兼容性等。發(fā)布網(wǎng)站先申請(qǐng)站點(diǎn)域名和租用效勞器空間，然后通過(guò)FTP工具把網(wǎng)站上傳到效勞器上。1.4HTML的概念：HTML是一種用來(lái)制作超文本文檔的簡(jiǎn)單標(biāo)記性語(yǔ)言。.3HTML標(biāo)簽標(biāo)簽表示：＜標(biāo)簽名稱屬性＞＜標(biāo)簽〉元素＜/標(biāo)簽〉，標(biāo)簽的作用范圍:〈標(biāo)簽〉f〈標(biāo)簽〉.例：〈h2〉demo〈h2〉，即將demo這段文本以2號(hào)題目來(lái)顯示，這對(duì)標(biāo)簽之外的文本不受這組標(biāo)簽阻礙?！礃?biāo)簽屬性名=”屬性值”〉元素〈/標(biāo)簽〉一個(gè)標(biāo)簽?zāi)軌虬ǘ鄠€(gè)屬性屬性之間無(wú)前后順序，用空格分開。例：〈bodybackground二””text二”red”＞hello＜/body＞,其中background屬性用來(lái)表示HTML文檔的背景圖片，tect屬性用來(lái)表示文本的顏色?！礃?biāo)簽〉空標(biāo)簽：標(biāo)簽單獨(dú)顯現(xiàn)，只有開始標(biāo)簽而沒有終止標(biāo)簽。（1） 〈html〉和〈/html〉在最外層，表示這對(duì)標(biāo)簽里的代碼是HTML語(yǔ)言。（2） 〈head〉和〈/head〉標(biāo)簽里是網(wǎng)頁(yè)中的頭部信息，如網(wǎng)頁(yè)總題目，網(wǎng)頁(yè)關(guān)鍵字等。無(wú)頭部信息可不要這對(duì)標(biāo)簽（3） ＜title〉和〈/title〉.在〈head〉和〈/head〉這對(duì)雙標(biāo)簽的中間還包括著〈title〉和〈/title〉這對(duì)標(biāo)簽，網(wǎng)頁(yè)題目的內(nèi)容，題目出此刻IE閱讀器窗口?？键c(diǎn)：n八、、?<p>和</卩>.文本段落的標(biāo)簽。<br>:換行符。<br>標(biāo)簽是空標(biāo)簽（它沒有終止標(biāo)簽，因此這是錯(cuò)誤的:〈br〉〈/br〉）?？旖萱I：F12預(yù)覽網(wǎng)頁(yè)； Shift+Enter分段（行間距?。磺熬吧?、背景色的調(diào)整：前景色是alt+del背景色是ctrl+del前后互換是XHTML文檔的大體結(jié)構(gòu)p18-p19<html><head>〈title>—個(gè)簡(jiǎn)單的網(wǎng)頁(yè)〈/title〉（頭部信息）</head>〈/body〉（網(wǎng)頁(yè)內(nèi)容：文本、鏈接、圖像、動(dòng)畫等）<h1>歡迎光臨〈/h1>〈br>〈frontsize二”5”face=”華文行楷”color二”red”>這是我的第一個(gè)主頁(yè)，歡迎大伙兒的訪問(wèn)！〈/front>〈/body>〈/html>Ps:去掉第6、7、8、10行是HTML的大體結(jié)構(gòu)。第2章DreamweaverCS5基礎(chǔ)2.1.2Dreamweaver軟件界面P23圖2-3視圖模式種類及其適應(yīng)情形1） 代碼視圖（寫代碼，要緊用于那個(gè)，利用Dreamweaver工具編輯網(wǎng)頁(yè)代碼），2） 拆分視圖（編寫代碼邊看視圖，直觀地編輯網(wǎng)頁(yè)中的元素，又能夠觀看到相關(guān)的代碼）3） 設(shè)計(jì)視圖（可視化設(shè)計(jì)，以所見所得的方式編輯網(wǎng)頁(yè)）第3章制作網(wǎng)頁(yè)內(nèi)容1.創(chuàng)建超鏈接的方式：給文字創(chuàng)建超鏈接；給圖片創(chuàng)建超鏈接；添加email鏈接,mailto:（冒號(hào)后不能空格）電子郵件地址；添加空連接。2.創(chuàng)建超鏈接的途徑：1） 絕對(duì)途徑:是被鏈接文檔的完整URL，包括所利用的傳輸協(xié)議（網(wǎng)頁(yè)一般是：。在創(chuàng)建外部鏈接時(shí)必需利用絕對(duì)途徑。2） 文檔相對(duì)途徑：確實(shí)是以以前文檔所在位置為起點(diǎn)到被連接文檔經(jīng)由的途徑。要緊用于創(chuàng)建內(nèi)部鏈接。如：3） 站點(diǎn)根目錄相對(duì)途徑：是指所有途徑都開始于當(dāng)前站點(diǎn)的根目錄。站點(diǎn)根目錄相對(duì)途徑以一個(gè)正斜杠開始，該正斜杠表示站點(diǎn)根文件夾，如/images/google.gif.移動(dòng)含有根目錄相對(duì)連接的文檔時(shí)，不需要更改鏈接。新建CSS規(guī)那么選擇器的類型及其特點(diǎn)。1類：概念的時(shí)候前面必需加點(diǎn)（?），格式是.XXX，能夠在一個(gè)頁(yè)面中挪用多次；（用于任何HTML元素）名稱以“#”開頭，一樣中只用在網(wǎng)頁(yè)中的一個(gè)元素上標(biāo)簽（從頭概念HTML元素）能夠?qū)崿F(xiàn)用CSS從頭概念HTML標(biāo)簽外觀的功能。4?復(fù)合內(nèi)容（基于選擇的內(nèi)容）：a:link 超鏈接的正常狀態(tài)，無(wú)任何動(dòng)作a:visited訪問(wèn)過(guò)的超鏈接狀態(tài)a：hover鼠標(biāo)指針指向超鏈接的狀態(tài)a：active選中超鏈接狀態(tài)第4章CSS樣式表CSS樣式表：內(nèi)部用于當(dāng)前網(wǎng)頁(yè)內(nèi)部；外部連接到多個(gè)網(wǎng)頁(yè)上1-創(chuàng)建內(nèi)部CSS樣式表：（1） 用DW打開網(wǎng)頁(yè)文檔4.3.1.html（2） 單擊“樣式表”面板中的“新建CSS規(guī)那么”按鈕，彈出“新建CSS規(guī)那么”對(duì)話框（3） 在“選擇器類型”下拉列表當(dāng)選擇“類（可用于任何HTML元素）”在“選擇器名稱”文本框里輸入要概念的CSS樣式的名稱.ziti,在“規(guī)那么概念”下拉列表當(dāng)選擇“僅限該文檔”（4） 單擊“確信”按鈕，在“ziti的CSS規(guī)那么概念”對(duì)話框中，設(shè)置完成后，單擊“確信”按鈕，現(xiàn)在，能夠在“CSS樣式”面板里看到增加了一個(gè).ziti的CSS樣式或（1）執(zhí)行“窗口“l(fā)〃CSS樣式”命令.打開“CSS樣式”面板。⑵在“CSS樣式”面板中單擊“新建CSS樣式”按鈕。在“CSS樣式，面板的底部的按鈕功能如下?！案郊訕邮奖怼卑粹o:在HTML文檔中鏈接一個(gè)外部的CSS文件。二“新建CSS樣式，按鈕:編輯新的CSS樣式文件?！熬庉嫎邮奖?按鈕:編輯原有的CSS規(guī)那么?！皠h除CSS樣式”按鈕:刪除選中的CSS規(guī)那么。(3)彈出“新建Css規(guī)那么”對(duì)話框。(4〕在對(duì)話框中若是設(shè)置“選擇器類型'為“標(biāo)簽“，那么在“選擇器名稱”下拉列表當(dāng)選擇一個(gè)HTML標(biāo)簽，也能夠直接插入那個(gè)標(biāo)簽。在“新建CSS規(guī)那么'對(duì)話框中能夠進(jìn)行如下設(shè)置。.選擇器名稱:用來(lái)設(shè)里新建的樣式表的名稱。.選擇器類型:用來(lái)概念樣式類型，并將其運(yùn)用到特定的部份。若是選擇“類”選項(xiàng)，要在“選擇器名稱”文本框中翰人自概念樣式的名稱，其名稱能夠是字母和數(shù)字的組合，若是沒有輸入符號(hào)“?”Dweaver會(huì)自動(dòng)輸入;若是選擇“標(biāo)簽”選項(xiàng)，需要在“選擇器名稱”下拉列表當(dāng)選擇一個(gè)HTML標(biāo)簽，也能夠直接摘人那個(gè)標(biāo)簽;若是選擇“復(fù)合認(rèn)”選項(xiàng)，需要在“選擇器名稱.下拉列表當(dāng)選擇一個(gè)選擇器的類型.上海網(wǎng)站建設(shè)也能夠直接輸入一個(gè)選擇器類型。.規(guī)那么概念:用來(lái)設(shè)置新建的CSS語(yǔ)句的位置。CSS樣式依照利用方式能夠分為內(nèi)部樣式和外部樣式。若是想把CSS語(yǔ)句新建在網(wǎng)頁(yè)內(nèi)部?能夠選擇“僅限該文檔”選項(xiàng)若是選擇“復(fù)合內(nèi)容”，那么在對(duì)話框中的“選擇器類型”下拉列表當(dāng)選擇“復(fù)合內(nèi)容”選項(xiàng).在“選擇器名稱'下拉列表當(dāng)選擇一個(gè)選擇器的類型.也能夠直接輸人一個(gè)選擇器類型。在此選擇“選擇器類型'下拉列表中的“類”選項(xiàng)?然后在“選擇器名稱'文本框中輸入body。由于創(chuàng)建的是css樣式內(nèi)部樣式表，因此在“規(guī)那么概念”當(dāng)選擇“僅限該文檔”。單擊“確信”按鈕.彈出“body的css規(guī)那么概念”對(duì)話框?在對(duì)話框中將“Font-family",設(shè)置為宋體，“font-size"設(shè)置為12像素，"Line-height"設(shè)置為200%,"Color"設(shè)置為#000000。單擊“確信”按鈕.在"Css樣式〃面板中能夠看到上海網(wǎng)站建設(shè)新建的樣式表和屬性。2.外部樣式表（1） 在開始頁(yè)的“新建”列表當(dāng)選擇CSS選項(xiàng)新建一個(gè)外部CSS文件，將其保留為（2） 單擊“樣式表”面板中的“新建CSS規(guī)那么”按鈕，彈出“新建CSS規(guī)那么”對(duì)話框在“選擇器類型”下拉列表當(dāng)選擇“類（可用于任何HTML元素）”在“選擇器名稱”文本框里輸入要概念的CSS樣式的名稱.text,在“規(guī)那么概念”下拉列表當(dāng)選擇“僅限該文檔”（3） 單擊“確信”按鈕，在“.text的CSS規(guī)那么概念”對(duì)話框中，設(shè)置完成后，單擊“確信”按鈕，現(xiàn)在，能夠在'CSS樣式”面板里看到增加了一個(gè).text的CSS樣式（4） 將上面創(chuàng)建的外部CSS樣式表文件，連接到某個(gè)網(wǎng)頁(yè)上，在DW中打開網(wǎng)頁(yè)文件（5） 在“CSS樣式表”面板中單擊“附加樣式表”彈出的“連接外部樣式”對(duì)話框中的“添加選項(xiàng)區(qū)域中”選中“鏈接”按鈕，然后單擊閱讀按鈕，選擇創(chuàng)建的外部鏈?zhǔn)奖砦募?） 單擊“確信”按鈕，返回“鏈接外部鏈?zhǔn)奖怼睂?duì)話框（7） 單擊“確信”按鈕，外部鏈?zhǔn)奖砦募蜁?huì)自動(dòng)連接到網(wǎng)頁(yè)中內(nèi)部樣式表與外部樣式表的區(qū)別第一它們都是CSS，美化修飾網(wǎng)頁(yè)的，其中：內(nèi)部樣式表是寫在HTML的〈head〉〈/head〉里面的，內(nèi)部樣式表只對(duì)當(dāng)前所在的網(wǎng)頁(yè)有效；若是很多網(wǎng)頁(yè)需要用到一樣的樣式（Styles）,用外部樣式表，將樣式（Styles）寫在一個(gè)以.css為后綴的CSS文件里，然后在每一個(gè)需要用到這些樣式的網(wǎng)頁(yè)里引用那個(gè)CSS文件即可,較方便。利用外部樣式表,相關(guān)于內(nèi)部樣式的，有以下優(yōu)勢(shì)：1、樣式代碼能夠復(fù)用。一個(gè)外部CSS文件，能夠被很多網(wǎng)頁(yè)共用。2、便于修改。若是要修改樣式，只需要修改CSS文件，而不需要修改每一個(gè)網(wǎng)頁(yè)。3、提高網(wǎng)頁(yè)顯示的速度。若是樣式寫在網(wǎng)頁(yè)里，會(huì)降低網(wǎng)頁(yè)顯示的速度，若是網(wǎng)頁(yè)引用一個(gè)CSS文件，那個(gè)CSS文件多半已經(jīng)在緩存區(qū)（其它網(wǎng)頁(yè)早已經(jīng)引用過(guò)它），網(wǎng)頁(yè)顯示的速度就比較快。第5章網(wǎng)頁(yè)布局1.利用表格進(jìn)行網(wǎng)頁(yè)布局P104-105

<tablewidth=”500”height=”200”border=”2”cellpadding=”1”<tablewidth=”500”height=”200”border=”2”cellpadding=”1”cellspacing=”1”bordercolor=”#000FF”bgcolor=”#999999”><tr>〈tdbgcolor=”#999999”〉設(shè)置單元格背景〈/td><td>灰色背景〈/td〉<td>黃色背景〈/td〉〈/tr〉〈tr〉〈td〉 〈/td〉<tdalign二”center”〉居中對(duì)齊</td><tdalign二”left”〉左對(duì)齊〈/td〉〈/tr〉〈/table〉2.〈body〉〈tablewidth=”760”boder=”0”cellspacing=”0”ceiipadding=”0”〉〈tr〉〈td〉. 〈/td〉〈td〉 〈/td〉〈td〉rowspan=”2”〉 〈/td〉〈/tr〉〈tr〉〈td〉rowspan=”2”〉 〈/td〉〈/tr〉〈tr〉〈td〉 〈/td〉〈td〉 〈/td〉〈/tr〉〈/table〉〈/body〉用表格布局網(wǎng)頁(yè)圖5-17pl05框架框架集概念了解P110框架集frameset〉〈/frameset〉框架集〈frame/〉框架能夠進(jìn)行拆分和刪除框架集成立后是不是能夠添加移動(dòng)刪除？5.4.2DIV+CSS布局原理、特點(diǎn)p123利用DIV+CSS布局網(wǎng)頁(yè)是一種盒子模式的開發(fā)技術(shù)，通過(guò)由CSS概念的大小不易的盒子和盒子嵌套來(lái)編排網(wǎng)頁(yè)。因?yàn)橛眠@種方式編排的網(wǎng)頁(yè)代碼簡(jiǎn)練、更新方便，能兼容更多的閱讀臾器。DIV+CSS布局原理及特點(diǎn)：利用div劃分網(wǎng)頁(yè)邏輯區(qū)域;利用css操縱每一個(gè)div的外觀位置以實(shí)現(xiàn)網(wǎng)頁(yè)布局特點(diǎn)。特點(diǎn)：本身沒有樣式；是塊元素；通常充當(dāng)容器；要區(qū)分各個(gè)div,因此常要利用id屬性P123用法（2個(gè)）第8章ps調(diào)整圖像色彩利用“色相/飽和度”、“替換顏色”、“匹配顏色”、“轉(zhuǎn)變”調(diào)整調(diào)整圖像色調(diào)p222（1） 色階：調(diào)整圖像色調(diào)的明暗度（2） 曲線：調(diào)整圖像色調(diào)的明暗度比色階更為準(zhǔn)確、靈活（3） 色彩平穩(wěn)：能夠調(diào)整圖像暗調(diào)區(qū)域，高光區(qū)域和中間色調(diào)區(qū)域的色彩成份，并混合各類色彩以達(dá)到色彩平穩(wěn)剪切蒙版的類型和特點(diǎn)（1） 剪貼蒙版事實(shí)上是兩個(gè)或多個(gè)有特殊關(guān)系的圖層關(guān)系的總稱，必需有上下了兩個(gè)圖層，利用下方圖層中圖像的形狀對(duì)上層圖像進(jìn)行剪切，最終以下方圖層中的圖像的形狀規(guī)定上方圖層中圖像的范圍，從而取得豐碩的成效。（2） 圖層蒙版是為圖層添加的遮罩，起到隱藏或顯示圖像的作用，只能用介于黑白兩個(gè)色間的256級(jí)灰度色畫圖。用黑色畫圖能夠隱藏圖像，白色畫圖能夠顯示圖像，灰度色畫圖能夠使本層圖像呈現(xiàn)假設(shè)隱假設(shè)現(xiàn)的朦朧成效（3） 矢量蒙版能夠操縱或隱藏圖層區(qū)域，能創(chuàng)建具有銳利邊緣的蒙版，是由鉛筆或形狀工具利用途徑方式創(chuàng)建的，而途徑能夠利用多種工具進(jìn)行編輯，因此矢量蒙版常常用來(lái)布局對(duì)象摳圖：規(guī)那么的：矩形選框，橢圓選框，單行選框，單列選框；不規(guī)那么的:套索，多邊形套索，磁性套索，快速選擇，魔棒工具Flash快捷鍵：保留Ctrl+S 測(cè)試影片Ctrl+Enter 修改“丨”組合”Ctrl+G修改“丨”分離文本Ctrl+B復(fù)制Ctrl+C 粘貼Ctrl+V 插入一般幀F(xiàn)5插入關(guān)鍵幀F(xiàn)6 插入空白幀F(xiàn)7修改丨轉(zhuǎn)換為元件F8 打開顏色面板Shift+F9是對(duì)象按原先的長(zhǎng)度比以中心點(diǎn)為基準(zhǔn)縮小和放大Alt+Shift 文件保留Ctrl+sShift開始幀+選取持續(xù)幀的最后一幀 Ctrl能夠選取多個(gè)不持續(xù)的幀Ctrl同時(shí)選中要導(dǎo)入的多個(gè)圖像文件Shift同時(shí)選擇兩個(gè)

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論