網(wǎng)站建設(shè)與管理PPT完整全套教學(xué)課件_第1頁(yè)
網(wǎng)站建設(shè)與管理PPT完整全套教學(xué)課件_第2頁(yè)
網(wǎng)站建設(shè)與管理PPT完整全套教學(xué)課件_第3頁(yè)
網(wǎng)站建設(shè)與管理PPT完整全套教學(xué)課件_第4頁(yè)
網(wǎng)站建設(shè)與管理PPT完整全套教學(xué)課件_第5頁(yè)
已閱讀5頁(yè)，還剩74頁(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)介

---WEB前端基礎(chǔ)教程網(wǎng)站建設(shè)與管理第1章網(wǎng)頁(yè)制作基礎(chǔ)知識(shí)學(xué)習(xí)目標(biāo)了解網(wǎng)頁(yè)基本知識(shí)熟悉DreamweaverCS6軟件的圖形用戶界面熟悉HTML5結(jié)構(gòu)標(biāo)簽知識(shí)要點(diǎn)靜態(tài)網(wǎng)站和動(dòng)態(tài)網(wǎng)站啟動(dòng)與退出DreamweaverCS6、水平線、圖片、表格的插入HTML5標(biāo)簽概述網(wǎng)頁(yè)和網(wǎng)站網(wǎng)頁(yè)是在互聯(lián)網(wǎng)上基于http協(xié)議傳播信息的頁(yè)面。網(wǎng)頁(yè)一般又稱HTML文件，是一種可以在WWW上傳輸、能被瀏覽器解析并顯示出來(lái)的文件。文字與圖片是構(gòu)成一個(gè)網(wǎng)頁(yè)的兩個(gè)最基本的元素，除此之外，網(wǎng)頁(yè)的元素還包括表格、多媒體、超鏈接、表單、網(wǎng)頁(yè)特效等。同一主題的多個(gè)網(wǎng)頁(yè)集合就形成了網(wǎng)站，網(wǎng)頁(yè)是構(gòu)成網(wǎng)站的基本元素。靜態(tài)網(wǎng)頁(yè)訪問(wèn)者只能被動(dòng)地瀏覽網(wǎng)站建設(shè)者提供的網(wǎng)頁(yè)內(nèi)容。信息流向是單向的，即從服務(wù)器到瀏覽器。服務(wù)器不能根據(jù)用戶的選擇調(diào)整返回給用戶的內(nèi)容。動(dòng)態(tài)網(wǎng)頁(yè)以數(shù)據(jù)庫(kù)技術(shù)為基礎(chǔ)，可實(shí)現(xiàn)與用戶的交互功能,服務(wù)器根據(jù)用戶請(qǐng)求，返回相應(yīng)的內(nèi)容，從而可以實(shí)現(xiàn)更多的功能。概述瀏覽器瀏覽器是一種可以顯示網(wǎng)頁(yè)內(nèi)容，并讓用戶與之交互的軟件。常見(jiàn)的網(wǎng)頁(yè)瀏覽器有InternetExplorer、Opera、Firefox、chrome和Safari。在激烈的市場(chǎng)競(jìng)爭(zhēng)中InternetExplorer份額逐漸減少，Googlechrome在2012年8月份市場(chǎng)份額正式超過(guò)IE瀏覽器，躍居第一。2016年2月Opera被360和昆侖萬(wàn)維收購(gòu)。概述網(wǎng)頁(yè)編輯工具介紹常用的網(wǎng)頁(yè)編輯工具常用的網(wǎng)頁(yè)編輯工具有Webtorm、notePad、Eclipse、textsublime、Dreamweaver等，本課程使用dreamweavercs6初識(shí)DreamweaverCS6DreamweaverCS6是由美國(guó)Adobe公司最新開(kāi)發(fā)的一款強(qiáng)大的可視化的跨平臺(tái)和跨瀏覽器的網(wǎng)頁(yè)編輯、網(wǎng)站管理為一體的專業(yè)軟件，圖形用戶界面更利于網(wǎng)頁(yè)初學(xué)者快速入門網(wǎng)頁(yè)編輯工具介紹網(wǎng)頁(yè)編輯工具介紹網(wǎng)頁(yè)編輯工具介紹Dreamweaver文字編輯在Dreamweaver中進(jìn)行文字編輯時(shí)，與在word中處理文字有許多相似之處。只要在“文檔”窗口中單擊，就可以直接輸入相關(guān)內(nèi)容。首先選中文字，再對(duì)文字進(jìn)行編輯，例如文字的復(fù)制、粘貼和刪除等。空格：全角狀態(tài)按空格鍵。換段：按Enter鍵換行：Enter鍵和Shift鍵同時(shí)按下我的第一個(gè)網(wǎng)頁(yè)HTML5概念HTML5是最新版本的HTML，它是標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用超文本標(biāo)記語(yǔ)言（HTML）的第五次重大修改，它取代1999年制定的HTML4.01、XHTML1.0標(biāo)準(zhǔn)，在互聯(lián)網(wǎng)應(yīng)用迅速發(fā)展的時(shí)候，使網(wǎng)絡(luò)標(biāo)準(zhǔn)達(dá)到符合當(dāng)代的網(wǎng)絡(luò)需求，為桌面和移動(dòng)平臺(tái)帶來(lái)無(wú)縫銜接的豐富內(nèi)容。HTML5簡(jiǎn)介HTML5結(jié)構(gòu)<!doctypehtml>

文檔聲明，比HTML4的文檔聲明簡(jiǎn)潔<html>

文檔的開(kāi)始<head>

存放文檔的基本信息 <metacharset="utf-8">

聲明字符編碼 <title></title>

聲明文檔標(biāo)題</head><body> 文檔主體部分可見(jiàn)內(nèi)容，包含文檔標(biāo)題、圖片、表單等</body></html> 文檔的結(jié)尾HTML5簡(jiǎn)介我的第一個(gè)手機(jī)網(wǎng)頁(yè)添加viewport標(biāo)簽<metaname="viewport"content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">解釋說(shuō)明標(biāo)簽屬性：Name=”viewport”屏幕設(shè)定width----寬度等于設(shè)備寬度height----高度等于設(shè)備寬度initial-scale----初始的縮放比例minimum-scale----允許用戶縮放到的最小比例maximum-scale----允許用戶縮放到的最大比例user-scalable----用戶是否可以手動(dòng)縮放HTML5簡(jiǎn)介常用排版標(biāo)簽<html><head><metacharset="utf-8"><title>我的網(wǎng)頁(yè)</title></head><body><h1>自我介紹</h1><hralign="left"width="200"size="1"color="#66cc66"><p>姓名：張三<br/>性別：男<br/>出生日期：2000年5月</p><p><br/></p></body></html>進(jìn)階與提高常用排版標(biāo)簽<!doctypehtml><html><head><metacharset="utf-8"><title>我的第一個(gè)網(wǎng)頁(yè)</title></head>進(jìn)階與提高<body><h1>靜夜思</h1><br>       —李白<br/><fontface="宋體"color="#FF0000"size="3">床前明月光,</font><br/><strong>疑是地上霜。</strong><br/><cite>舉頭望明月,</cite><br/><u>低頭思故鄉(xiāng)。</u></body></html>進(jìn)階與提高HTML5新標(biāo)簽<body><article>。。。<section><h3>總結(jié)details應(yīng)用</h3><detailsopen><summary><span>HTML5</span></summary><p>open屬性表示默認(rèn)打開(kāi)狀態(tài)，HTML5真好用。</p></details><detailsopen><p>如果沒(méi)有子標(biāo)簽summary，則產(chǎn)生“詳細(xì)信息”，HTML5真好用。</p></details></section><footer><p>尾部：閱讀：300評(píng)論：38</p></footer></article></body>第2章站點(diǎn)管理學(xué)習(xí)目標(biāo)了解網(wǎng)站的制作基本流程，掌握編輯和管理站點(diǎn)的方法制作完成“省運(yùn)會(huì)網(wǎng)站”掌握表格和圖片的標(biāo)簽知識(shí)要點(diǎn)域名租用服務(wù)器網(wǎng)站優(yōu)化和推廣tableimg站點(diǎn)制作流程網(wǎng)站規(guī)劃域名網(wǎng)站備案網(wǎng)站空間網(wǎng)站優(yōu)化網(wǎng)站推廣站點(diǎn)管理新建站點(diǎn)站點(diǎn)設(shè)置案例：網(wǎng)站“省運(yùn)會(huì)”表格<table>從標(biāo)簽<table>開(kāi)始，</table>結(jié)束，包括表頭標(biāo)簽<th></th>、行標(biāo)簽<tr></tr>和單元格標(biāo)簽<td></td>。 <tableborder="1"><tr><th

colspan="2">表格標(biāo)題</th></tr><tr><td>列1</td><td>列2</td></tr><tr><td>列1</td><td>列2</td></tr></table>進(jìn)階與提高進(jìn)階與提高圖像<img><img

src=”圖像文件的地址”alt=”描述文字的內(nèi)容”border=”圖像邊框的寬度”height=”圖片的高度”width=”圖片的寬度”hspace=”水平間距”vspace=”垂直間距”align=”相對(duì)文字的對(duì)齊方式”>第3章超級(jí)鏈接學(xué)習(xí)目標(biāo)掌握編輯和管理站點(diǎn)的方法，創(chuàng)建本地站點(diǎn)、移動(dòng)和復(fù)制文件掌握表格的基本操作，制作完成“香港美食網(wǎng)”知識(shí)要點(diǎn)鏈接<a>列表標(biāo)簽<dl>超級(jí)鏈接是網(wǎng)站中使用比較多的HTML元素，在站點(diǎn)內(nèi)使用超級(jí)鏈接，可以實(shí)現(xiàn)同一個(gè)網(wǎng)頁(yè)不同位置的快速跳轉(zhuǎn)或不同頁(yè)面間的切換，在站點(diǎn)外可以鏈接到其它的網(wǎng)站或發(fā)郵件等。超級(jí)鏈接標(biāo)簽提供了target屬性“目標(biāo)”：*_self放在相同窗口中，自我覆蓋（默認(rèn)窗口無(wú)須指定）。*_blank創(chuàng)建新窗口打開(kāi)新頁(yè)面。*_top在瀏覽器的整個(gè)窗口打開(kāi)，將會(huì)忽略所有的框架結(jié)構(gòu)。*_parent在上一級(jí)窗口打開(kāi)，放到父框架集或包含該鏈接的框架窗口中。鏈接基礎(chǔ)知識(shí)鏈接基礎(chǔ)知識(shí)案例：香港美食網(wǎng)鏈接<a><tablewidth="850"border="0"align="center"cellpadding="0"cellspacing="0"><tr><tdwidth="170"height="45"align="center"bgcolor="#FFF763"><ahref=#">首頁(yè)</a></td><tdwidth="170"height="45"align="center"bgcolor="#FFF763"><ahref="#">美食攻略</a></td><tdwidth="170"height="45"align="center"bgcolor="#FFF763"><ahref="#">健康養(yǎng)生</a></td><tdwidth="170"height="45"align="center"bgcolor="#FFF763"><ahref="">熱門搜索</a></td><tdwidth="170"height="45"align="center"bgcolor="#FFF763"><ahref="mailto:zhanzhang123@126.com">聯(lián)系我們</a></td></tr> </table> 進(jìn)階與提高列表<dl><dl>用于定義列表，從<dl>開(kāi)始，</dl>結(jié)束。<dt>用于定義列表中的項(xiàng)目，即上層項(xiàng)，<dd>用于描述列表中的項(xiàng)目，即下層項(xiàng)<dl>

<dt>上層項(xiàng)</dt><dd>下層項(xiàng)</dd><dd>下層項(xiàng)</dd><dd>下層項(xiàng)</dd>

</dt>

</dl>進(jìn)階與提高第4章框架學(xué)習(xí)目標(biāo)掌握框架網(wǎng)頁(yè)的基本知識(shí)利用框架制作完成“繼續(xù)教育”網(wǎng)站知識(shí)要點(diǎn)新建框架框架網(wǎng)頁(yè)框架集屬性框架<iframe>框架概述編輯框架式網(wǎng)頁(yè)案例：網(wǎng)站“繼續(xù)教育”框架基礎(chǔ)知識(shí)框架<frame><framesetrows="80,*,80"frameborder="no"border="0"framespacing="0"><framesrc="UntitledFrame-6"name="topFrame"scrolling="no"noresize="noresize"id="topFrame"title="topFrame"/><framesrc="Untitled-5"name="mainFrame"id="mainFrame"title="mainFrame"/><framesrc="UntitledFrame-7"name="bottomFrame"scrolling="no"noresize="noresize"id="bottomFrame"title="bottomFrame"/></frameset>進(jìn)階與提高進(jìn)階與提高框架綜合應(yīng)用第5章表單學(xué)習(xí)目標(biāo)了解表單基本知識(shí)靈活運(yùn)用表單元素及其屬性設(shè)置掌握Form知識(shí)要點(diǎn)表單元素表單驗(yàn)證Form標(biāo)簽表單概述表單form是Internet和服務(wù)器之間進(jìn)行信息交流的一種重要工具。表單可以收集瀏覽者輸入的信息，因而被應(yīng)用在網(wǎng)站的各個(gè)領(lǐng)域。表單對(duì)象主要包括按鈕、文本框、文本區(qū)域、單選按鈕、復(fù)選按鈕、列表、菜單、跳轉(zhuǎn)菜單等。表單的應(yīng)用包括兩部分：一是用戶界面，提供用戶輸入數(shù)據(jù)的元件；另一部分是處理程序，可以是客戶端程序在瀏覽器執(zhí)行，也可以是服務(wù)器程序處理用戶提交的數(shù)據(jù)，返回結(jié)果。表單基礎(chǔ)知識(shí)表單基礎(chǔ)知識(shí)案例：注冊(cè)表單頁(yè)表單元素表單驗(yàn)證表單<form>標(biāo)簽5_1.html<fieldset><legend>注冊(cè)區(qū)域</legend><form>......</form></fieldset>進(jìn)階與提高5_2.html構(gòu)建HTML5表單<labelfor="user">賬號(hào)：</label><inputtype="text"name="user"id="user"placeholder="請(qǐng)輸入賬號(hào)"required><br/><labelfor="password">密碼：</label><inputtype="password"name="password"id="password"placeholder="請(qǐng)輸入密碼"required><br/><labelfor="tel">電話號(hào)碼：</label><inputtype="tel"name="tel"id="tel"placeholder="請(qǐng)輸入電話"required><br/><labelfor="email">電子郵箱：</label><inputtype="email"name="email"id="email"placeholder="請(qǐng)輸入郵箱"required><br/><button>點(diǎn)擊注冊(cè)</button>進(jìn)階與提高第6章CSS層疊樣式表學(xué)習(xí)目標(biāo)了解CSS語(yǔ)法基礎(chǔ)知識(shí)制作完成“陽(yáng)光小學(xué)”網(wǎng)站編輯理解CSS+Div布局網(wǎng)頁(yè)知識(shí)要點(diǎn)新建CSS樣式應(yīng)用CSS樣式編輯CSS樣式CSS基礎(chǔ)知識(shí)CSS選擇器標(biāo)簽選擇器類別選擇器ID選擇器CSS基礎(chǔ)知識(shí)CSS選擇器盒子模型將網(wǎng)頁(yè)中的所有元素都看成是一個(gè)盒子，占據(jù)著一定的空間。盒子通常包括著內(nèi)容(content)、填充(padding)、邊框(border)、邊界(margin)，CSS盒子模式都具備這些屬性，每個(gè)屬性都有top、left、bottom和right四個(gè)方向。CSS基礎(chǔ)知識(shí)快速定義樣式在“CSS面板”中新建選擇器，在彈出的界面中定義規(guī)則。在左邊的“分類”中有“類型”、“背景”、“區(qū)塊”、“方框”、“邊框”、“列表”、“定位”、“擴(kuò)展”和“過(guò)渡”。CSS基礎(chǔ)知識(shí)CSS基礎(chǔ)知識(shí)應(yīng)用CSS行內(nèi)式：直接對(duì)HTML標(biāo)記使用style屬性，然后將CSS代碼直接寫在其中內(nèi)嵌式：把樣式表放到頁(yè)面<head></head>區(qū)鏈接式：<linkrel="stylesheet"type="text/css"href="mystyle.css">導(dǎo)入式：@import‘mystyle.css’進(jìn)階與提高樣式應(yīng)用實(shí)例6_1.html body{ font-family:"宋體"; font-size:12px; } b{ background-color:#CFC; } .ccc{ background:#F00; } #fff{ background:#FF0; font-size:18px; } .cccb{ background:#00F;}進(jìn)階與提高樣式應(yīng)用實(shí)例6_2.html樣式應(yīng)用實(shí)例6_3.html.liebiao{ list-style-image:url(image/xm.gif); font-size:12px; margin:0px; padding:0px;}進(jìn)階與提高進(jìn)階與提高CSS+Div網(wǎng)頁(yè)6_4.html第7章網(wǎng)頁(yè)布局學(xué)習(xí)目標(biāo)理解幾種不同的網(wǎng)頁(yè)布局方式靈活應(yīng)用各種網(wǎng)頁(yè)布局站點(diǎn)管理知識(shí)要點(diǎn)固定布局流體布局浮動(dòng)布局定位布局多列布局彈性布局網(wǎng)頁(yè)布局概述在設(shè)計(jì)網(wǎng)頁(yè)時(shí)，能否控制好各個(gè)元素在頁(yè)面中的位置是非常重要的。使用表格、框架或CSS+Div都可能達(dá)到布局效果。用嵌套表格和框架布局網(wǎng)頁(yè)之前已經(jīng)介紹過(guò)，本章主要介紹固定布局、流體布局、浮動(dòng)布局、定位布局、多列布局和彈性布局等各種布局方式，并通過(guò)實(shí)例來(lái)應(yīng)用各種布局方式。固定布局固定布局設(shè)置了固定寬度的外包裹，里面的各個(gè)模塊也是固定寬度或百分比，通常設(shè)置960px或760px的固定寬度，960px適合1024*768或者更高的分辨率，760px適合800*600分辨率。

固定寬度和高度的布局容易使用，適合定制設(shè)計(jì)頁(yè)面，它在所有瀏覽器中一樣，不設(shè)置min-width和max-width，可防止內(nèi)容縮放引起的布局混亂。但是對(duì)于高分辨率的用戶，固定寬度布局可能在頁(yè)面中留下很大的空白，屏幕分辨率過(guò)小時(shí)需要垂直滾動(dòng)條。常見(jiàn)網(wǎng)頁(yè)布局方式常見(jiàn)網(wǎng)頁(yè)布局方式流體布局流體布局的主體部分用百分比設(shè)置寬度，可自適應(yīng)用戶的分辨率。流體布局頁(yè)面對(duì)用戶友好，能自適應(yīng)用戶的設(shè)置，頁(yè)面周圍的空白區(qū)域在所有分辨率和瀏覽器中都是相同的，在視覺(jué)上更美觀。但是設(shè)計(jì)者難以控制用戶所見(jiàn)，可能忽略掉一些錯(cuò)誤。視頻和其它設(shè)置了寬度的內(nèi)容可能需要多種寬度以適應(yīng)不同分辨率的用戶。常見(jiàn)網(wǎng)頁(yè)布局方式浮動(dòng)布局根據(jù)內(nèi)容是固定尺寸還是百分比可劃分成流體浮動(dòng)布局和固定浮動(dòng)布局。使用浮

溫馨提示

  • 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ù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 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)論