教育ui設(shè)計課件-3 -編寫代碼_第1頁
教育ui設(shè)計課件-3 -編寫代碼_第2頁
教育ui設(shè)計課件-3 -編寫代碼_第3頁
教育ui設(shè)計課件-3 -編寫代碼_第4頁
教育ui設(shè)計課件-3 -編寫代碼_第5頁
已閱讀5頁，還剩53頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

AdobeDreamweaver，簡稱“DW”，中文名稱"夢想編織者"，最初為美國MACROMEDIA公司開發(fā)[1]

，2005年被Adobe公司收購。DW是集網(wǎng)頁制作和管理網(wǎng)站于一身的所見即所得網(wǎng)頁代碼編輯器。利用對

HTML、CSS、JavaScript等內(nèi)容的支持，設(shè)計人員和開發(fā)人員可以在幾乎任何地方快速制作和進(jìn)行網(wǎng)站建設(shè)。Dreamweaver教程目錄關(guān)于網(wǎng)頁Dreamweaver界面介紹編輯網(wǎng)頁文本標(biāo)簽的學(xué)習(xí)CSS樣式的學(xué)習(xí)實操關(guān)于網(wǎng)頁關(guān)于網(wǎng)頁●

認(rèn)識網(wǎng)頁網(wǎng)頁的基本要素包括Logo、Banner、導(dǎo)航欄、文本、圖像等。Logo代表企業(yè)形象或欄目內(nèi)容的標(biāo)志性圖片，一般位于網(wǎng)頁左上角，有三種尺寸：88像素x31像素；120像素x60像素；120像素x9像素。Banner一般位于網(wǎng)頁的頂部或底部，最常用尺寸：480像素X60像素；233像素x30像素的標(biāo)準(zhǔn)廣告。導(dǎo)航欄是一一組便于瀏覽站點的超鏈接，用于網(wǎng)站各部分內(nèi)容之間相互鏈接的指引。網(wǎng)頁中的信息主要以文本為主，通過字體、大小、顏色、底紋、邊框等。圖像在網(wǎng)頁中具有提供信息、展示象形、裝飾網(wǎng)頁、表達(dá)個人情趣和風(fēng)格的作用。關(guān)于網(wǎng)頁●

網(wǎng)頁基本術(shù)語1.因特網(wǎng)是一組全球信息資源的總匯。它以相互交流信息資源為目的，基于一些共同的協(xié)議，并通過許多路由器和公共互聯(lián)網(wǎng)組成，是個信息資源和資源共享的集合。2.超級文本——是一種用戶與計算之間進(jìn)行交流的文本顯示技術(shù)，通過對關(guān)鍵詞或圖片的索引鏈接，可以使這些帶有鏈接的詞語或圖片指向相關(guān)的文件或者文本中的相關(guān)段落。3.瀏覽器——安裝在計算機(jī)上用來查看萬維網(wǎng)中超級文本的一種工具。4.IP地址——分配給計算由一組32位二進(jìn)制數(shù)值組成的編號，用來對網(wǎng)絡(luò)中的計算機(jī)進(jìn)行標(biāo)識。采用十進(jìn)制標(biāo)記法，每個數(shù)值小于等于225，數(shù)值中間用“.”隔開。5.URL——是網(wǎng)頁在因特網(wǎng)中的地址，如果訪問某網(wǎng)站，需要使用其URL才能夠找到。6.HTTP——一種最常用的網(wǎng)絡(luò)通信協(xié)議。7.FTP——快速、高效、可靠的信息傳輸方式。8.域名——每個計算機(jī)都一個具有代表性的名字“主機(jī)名”，主機(jī)名由英文字母或數(shù)字組成。將主機(jī)名和IP對應(yīng)起來，這就是域名。9.靜態(tài)網(wǎng)頁

——純粹HTML格式的網(wǎng)頁通常被稱為靜態(tài)網(wǎng)頁，一般以。htm、html、shtml、.xml等后綴。10.動態(tài)網(wǎng)頁——在HTML格式的網(wǎng)頁中，可以出現(xiàn)各種動態(tài)效果，如GIF格式的動畫、Flash動畫、滾動字幕等。關(guān)于網(wǎng)頁●

網(wǎng)站制作流程前期策劃——網(wǎng)站界面是人機(jī)之間的信息交互界面。交互是一個結(jié)合計算機(jī)科學(xué)、美學(xué)、心理學(xué)和人機(jī)工程學(xué)等學(xué)科領(lǐng)域的行為，其目標(biāo)是促進(jìn)設(shè)計。收集素材——前期策劃準(zhǔn)備工作完成后，網(wǎng)頁制作者就可以圍繞主題收集材料了。規(guī)劃網(wǎng)站——包含網(wǎng)站結(jié)構(gòu)、欄目的設(shè)置、網(wǎng)站的風(fēng)格、顏色搭配、版面布局、文字圖片的運(yùn)用等。制作HTML頁面——這是復(fù)雜而細(xì)致的過程，一定要按照先大后小、先簡單后復(fù)雜來進(jìn)行制作。測試并上傳網(wǎng)頁——網(wǎng)頁完成后發(fā)布Web服務(wù)器上，才能夠讓全世界觀看到。網(wǎng)站的更新與維護(hù)——服務(wù)器及相關(guān)軟件硬件的維護(hù)：服務(wù)器軟件的維護(hù)包括服務(wù)器、操作系統(tǒng)和Internet連接線路等，以確保網(wǎng)站的24小時不間斷正常運(yùn)行；服務(wù)器硬件的維護(hù)包括對可能出現(xiàn)的問題進(jìn)行評估，制定響應(yīng)時間。數(shù)據(jù)庫維護(hù)：有效地利用數(shù)據(jù)庫是網(wǎng)站維護(hù)的重要內(nèi)容，因此數(shù)據(jù)庫的維護(hù)要受到重視。內(nèi)容的更新、調(diào)整。制定相關(guān)網(wǎng)站維護(hù)的規(guī)定，將網(wǎng)站維護(hù)制度化、規(guī)范化。做好網(wǎng)站安全管理，防范黑客入侵網(wǎng)站，檢查網(wǎng)站各個功能，檢查連接是否有錯。Dreamweaver界面介紹關(guān)于網(wǎng)頁●打開Dreamweaver軟件關(guān)于網(wǎng)頁●新建HTML文件方法一：見右圖，直接單擊新建目錄下的HTML方法二：點擊文件—新建—創(chuàng)建方法三：或者直接按快捷鍵（ctrl+n）--創(chuàng)建關(guān)于網(wǎng)頁●dw的操作界面操作界面主要由菜單欄文檔窗口、工具欄、屬性面板、浮動窗口這些工具構(gòu)成關(guān)于網(wǎng)頁●dw的操作界面菜單：執(zhí)行相關(guān)的命令或?qū)傩缘脑O(shè)置插入：是我們在設(shè)計網(wǎng)頁時經(jīng)常使用到的，有一種排版方式是使用表格對頁面進(jìn)行排版（不推薦現(xiàn)在多用DIV+CSS）,插入表格就可以在插入菜單選擇表格進(jìn)行插入。關(guān)于網(wǎng)頁●dw的操作界面文檔窗口：這里可編輯網(wǎng)頁的內(nèi)容浮動面板：通常是一些功能近似的面板，它們可以是折疊狀態(tài)也可以是展開狀態(tài)，可以通過單擊標(biāo)簽來展開或折疊它們。屬性面板：顯示當(dāng)前選定的對象或者是文本的屬性，可以在這里直接修改屬性。關(guān)于網(wǎng)頁●dw的操作界面工具欄：包含了各種工具按鈕1.代碼——單擊按鈕，可以在文檔窗口中顯示“代碼”視圖；2.拆分”——在文檔窗口的一部分顯示“代碼”視圖，而在另一部分中顯示“設(shè)計”視圖；3.設(shè)計”——可在文檔窗口中顯示“設(shè)計”視圖；4.實時視圖”——顯示不可編輯的、交互式的、基于瀏覽器的文檔視圖；編輯網(wǎng)頁文本編輯網(wǎng)頁文本

●開始編輯網(wǎng)頁文本如右圖見，紅色框中的是一打開電腦就有的，這些內(nèi)容是軟件自帶的，我們不需要管。我們的編輯內(nèi)容區(qū)域在<body>這里編輯</body>，這里寫的任何文字都能在頁面中展示。

編輯網(wǎng)頁文本●分析如右圖見，是360網(wǎng)站的首頁，一個網(wǎng)頁通常分為四個部分：1.頭部，右圖的紅色框部分

2.廣告欄，右圖的黃色框部分3.主體，右圖的橙色框部分4.底部，右圖的藍(lán)色框部分現(xiàn)在，我們在dw軟件里，把這個網(wǎng)站的四個部分設(shè)計出來...

編輯網(wǎng)頁文本●寫出頁面的結(jié)構(gòu)1.在兩個<body>的中間寫入我們的代碼。2.為了能給每個部分進(jìn)行修飾，我們需要給每個部分用一個盒子包裹起來，而”<div></div>“就相當(dāng)于盒子的作用。我們把內(nèi)容寫在”<div></div>“的中間。3.每組的盒子名字都一樣，這時我們就需要給每組起個名字，起名字的格式’class=”“‘，名字最好用字母，沒有嚴(yán)格規(guī)范必須起什么名字，只要是字母數(shù)字都可以。編輯網(wǎng)頁文本●查看視圖在打開上方工具欄“實時視圖”，能看到我們的頁面結(jié)構(gòu)，下一步，我們對頁面進(jìn)行修飾

編輯網(wǎng)頁文本●對頁面進(jìn)行修飾我們再次對這個首頁進(jìn)行分析1.每個部分的高度是多少，待會我們要給盒子高度；2.我們的dearmweaver軟件是通欄的，意思是寬度是全屏的，所以不用測量；3.我們還需要知道圖片高，字體大小，行高，顏色，邊框距離等等；4.右圖是測量好了的；

編輯網(wǎng)頁文本●對頁面進(jìn)行修飾紅色部分是我剛才寫出的樣式1.樣式需要寫在“<style></style>標(biāo)簽里”2.對每個盒子進(jìn)行修飾的格式是”.名字“3.樣式寫在”{}“里4.在”{}“里，我們先按一下空格，或者回車鍵，然后再打一個字母”h”,頁面會出現(xiàn)關(guān)于h的屬性。5.height：高度；background-color：背景色6.我們再點擊實時視圖，可以看得到我們的頁面效果編輯網(wǎng)頁文本●存并在瀏覽器中查看保存的方法1.菜單欄里的文件--保存--確認(rèn)2.快捷鍵（ctrl+s）--確認(rèn)在瀏覽器中查看方法一：上方的”預(yù)覽按鈕“方法一：F12編輯網(wǎng)頁文本

●編輯網(wǎng)頁文本剛才的寫樣式方法，我們必須要學(xué)會，現(xiàn)在我將介紹下簡單的寫入樣式的方法，但我不支持用這種方法，因為代碼要常寫才能記住。a.打開Dreamweaver，在文檔窗口直接輸入文字。b.選中要文字，在屬性面板點擊“CSS”>字體點擊下拉按鈕，彈出字體樣式列表，點擊要選擇的字體即可（如右圖）。編輯網(wǎng)頁文本●編輯網(wǎng)頁文本b.選中要文字，在屬性面板點擊“CSS”>字體點擊下拉按鈕，彈出字體樣式列表，點擊要選擇的字體即可。編輯網(wǎng)頁文本●編輯網(wǎng)頁文本a.在軟件下方點擊“CSS”字號旁邊的空白處，彈出色彩列表，選擇深藍(lán)色。b.字體的旁邊有加粗、傾斜、左對齊、居中對齊、右對齊、兩端對齊等，點擊傾斜和居中對齊，文字自動傾斜和居中對齊。編輯網(wǎng)頁文本●選擇器1、標(biāo)簽選擇器--針對當(dāng)前頁面所有此名稱的標(biāo)簽都起作用結(jié)構(gòu)中<div></div>樣式中div{樣式：值；}2、ID選擇器--一般用在一級盒,調(diào)用時用#號結(jié)構(gòu)中<divid=”header”></div>樣式中#header{樣式：值；}3、class選擇器--二級及以上的盒命名，調(diào)用時.結(jié)構(gòu)中<divclass=”top”></div>樣式中.top{樣式：值；}編輯網(wǎng)頁文本●選擇器4、通配符選擇器--可以設(shè)置全部標(biāo)簽*{樣式：值；}5、后代選擇器--選擇器A中的所有B都生效選擇器A選擇器B{樣式：值；}編輯網(wǎng)頁文本●選擇器6、偽類選擇器--鼠標(biāo)懸浮樣式選擇器A:hover{樣式:值；}---鼠標(biāo)點擊樣式選擇器A:active{樣式:值；}7、親子選擇器：A>B用>把父子選擇器鏈接，A里面只生效兒子輩的BA>B：{樣式:值；}標(biāo)簽的學(xué)習(xí)標(biāo)簽的學(xué)習(xí)●常用標(biāo)簽的學(xué)習(xí)塊標(biāo)簽：是指當(dāng)我們在標(biāo)簽里輸入文字或圖片時會有寬高1.<div></div>搭建網(wǎng)頁結(jié)構(gòu)的基本構(gòu)成（寬度是父級100%、高度自適應(yīng)、獨占一行）2.<h1></h1>...<h6></h6>用于網(wǎng)頁的標(biāo)題，具有div的全部特征，自帶字體大小，自帶加粗、自帶外間距（如右圖）3.<p></p>段落文本標(biāo)簽，用于輸入文本

標(biāo)簽的學(xué)習(xí)●常用標(biāo)簽的學(xué)習(xí)4.<ul></ul>無序列表，通常與<li></li>一起使用5.<ol></ol>有序列表，通常與<li></li>一起使用6.<dl></dl>定義列表,通常與<dt></dt><dd></dd>一起使用標(biāo)簽的學(xué)習(xí)●常用標(biāo)簽的學(xué)習(xí)7.<i></i>字體傾斜8.<b></b>字體變粗9.<strong></strong>字體變粗10.想學(xué)習(xí)更多標(biāo)簽，登陸這個網(wǎng)站標(biāo)簽的學(xué)習(xí)●常用標(biāo)簽的學(xué)習(xí)內(nèi)聯(lián)標(biāo)簽：是指輸入寬高沒有效果，轉(zhuǎn)成塊標(biāo)簽：”display：block;“1.<a></a>超鏈接（自帶藍(lán)色、自帶下劃線、訪問過后變紫色）<ahref=”網(wǎng)址”>文字或圖片</a>#是占位符，代表本頁面刷新2.<span></span>萬能標(biāo)簽

標(biāo)簽的學(xué)習(xí)●常用標(biāo)簽的學(xué)習(xí)內(nèi)聯(lián)塊標(biāo)簽：有寬高但不占行，想要占行：”display：block;“1.<img/>前景圖<imgsrc=”圖片路徑”/>2.<input/>輸入框標(biāo)簽的學(xué)習(xí)●樣式的寫入對于樣式的寫入，咱們之前有學(xué)習(xí)，但那只是其中一種方式一：在<style></style>標(biāo)簽里寫入方式二：在標(biāo)簽里寫入（右圖）方式三：外部調(diào)用css樣式

外部樣式：內(nèi)轉(zhuǎn)外更利于版權(quán)保護(hù)在</head>前，</title>后面。格式：<linkhref="網(wǎng)址"rel="stylesheet"type="text/css"/>CSS樣式的學(xué)習(xí)CSS樣式的學(xué)習(xí)●常見的樣式屬性1.、關(guān)于網(wǎng)頁框架

height--高h(yuǎn)eight：300px；

width--寬width：200px；margin--盒子的外間距

margin-top--上留白margin-bottom：下留白

margin-left--左留白margin-right：右留白margin：10px------四周都留10像素的白padding--盒子的內(nèi)填充

padding-top--上填充padding-bottom：下填充

padding-left--左填充padding-right：右填充padding：10px------四周都留10像素的白CSS樣式的學(xué)習(xí)●常見的樣式屬性1.、關(guān)于網(wǎng)頁框架

border--盒子的邊框

border-color--邊框顏色

border-color：#ff0000；

border-left--下邊框

border-left：none；

border-left--下邊框

border-left：none；

border：1pxsolidred------1px的紅色實線的邊框

CSS樣式的學(xué)習(xí)●常見的樣式屬性

2、關(guān)于文本

font-family--文字字體Font-family：Arial；多個字體用逗號隔開，后面的是備用字體（常用微軟雅黑）

Font-size--字體大小

Font-size：20px

font-weight--字體粗細(xì)

font-weight：300；

color--字體顏色

color：#ff0000；

line-height--行高

line-height：24px；

text-aligh--對齊方式

text-aligh：left；

text-decoration--文本修飾

text-decoration：none；

text-indent--文本縮進(jìn)

text-indent：20px；CSS樣式的學(xué)習(xí)●常見的樣式屬性3、關(guān)于背景

background-color--背景顏色用#色值或者red等顏色background-color：#ff0000；

background-position--背景定位

background-position：center；

background-image--背景圖片通常與background-repeat--背景是否平鋪一起用background-image:url('smiley.gif');background-repeat:no-repeat;4、關(guān)于浮動

float--浮動

float：left；CSS樣式的學(xué)習(xí)●常見的樣式屬性5、關(guān)于定位

position:relative--相對定位以網(wǎng)站為坐標(biāo)軸進(jìn)行的定位

position:absolute--絕對定位以自身為坐標(biāo)軸進(jìn)行的定位實操實操●盒模型一個盒子包括了content（實際內(nèi)容）1、顯示文本和圖像2、我們給元素設(shè)置的width和height其實是content的寬高3、指定高度大于顯示內(nèi)容所需高度，多余的高度會產(chǎn)生類似內(nèi)邊距一樣的效果4、如果指定高度小于顯示內(nèi)容所需高度，會出現(xiàn)滾動條實操●盒模型padding（內(nèi)邊距）1、清除內(nèi)容周圍的區(qū)域，內(nèi)邊距是透明的

2、取值不能為負(fù)

3、受盒子的Background屬性影響，padding是有背景的。border（邊框）

1、元素的邊框是圍繞元素內(nèi)容的內(nèi)邊距的一條或多條線

2、邊框由粗細(xì)、樣式和顏色三部分組成。實操●盒模型margin（外邊距）1、在元素外創(chuàng)建額外的空白，空白通常指不能放其他元素的區(qū)域2、在這個區(qū)域中可以看到父元素的背景（padding所帶的是本身的背景而非父元素）3、margin經(jīng)常取負(fù)值實現(xiàn)定位的作用。實操●盒模型margin（外邊距）1、在元素外創(chuàng)建額外的空白，空白通常指不能放其他元素的區(qū)域2、在這個區(qū)域中可以看到父元素的背景（padding所帶的是本身的背景而非父元素）3、margin經(jīng)常取負(fù)值實現(xiàn)定位的作用。實操●分析回到這個頁面，之前我們已經(jīng)搭建出框架，現(xiàn)在我們來完善它1.頭部，有l(wèi)ogo和導(dǎo)航

2.廣告欄，是一張圖片3.主體，有兩部分，第一部分是分類欄，第二部分是詳情。4.底部，顯示了版權(quán)5.頁面里有很多圖片，比如logo，banner，還有主體里面的很多icon，我們需要在ps里

實操●分析5.頁面里有很多圖片，比如logo，banner，還有主體里面的很多icon，我們需要在ps里用切片這個工具把圖片切出來。ps左側(cè)工具欄里的裁剪--點擊鼠標(biāo)右鍵--選擇切片工具（見右圖）切完后保存在html所在的文件夾里方法一：文件--存儲為web所用格式--預(yù)設(shè)--選擇PNG24--存儲方法二：快捷鍵（ctrl+alt+shift+s）--預(yù)設(shè)--選擇PNG24--存儲

實操●實操頭部，有l(wèi)ogo和導(dǎo)航

1、在頭部這個盒子里，我們還需要三個盒子，一個用來把內(nèi)容放中間，一個用來裝logo，一個用來裝導(dǎo)航；

2、logo通常是圖片，用<img/>

3、img里面的alt=“l(fā)ogo”的作用是：如果無法顯示圖像，這幾個字將替代圖像出現(xiàn)。

4、行業(yè)習(xí)慣用”<ul></ul>

”這組標(biāo)簽來裝導(dǎo)航。

5、a標(biāo)簽里鏈接的“#”是占位符，代表本頁面刷新；實操●實操寫完頭部的結(jié)構(gòu)，我們接著來寫樣式。之前我們的操作方式是在HTML里<style>標(biāo)簽中寫入，行業(yè)中通常為了好管理，都是運(yùn)用外部調(diào)用css樣式；步驟：新建（ctrl+n）--css--創(chuàng)建。在這里不需要寫<style></style>標(biāo)簽，格式：選擇器：{}我們將之前在html里寫入的樣式復(fù)制到這個css文件里

溫馨提示

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

評論

0/150

提交評論