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

下載本文檔

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

文檔簡介

1第5章網(wǎng)頁設(shè)計(jì)技術(shù)2本章主要內(nèi)容5.1網(wǎng)頁制作基礎(chǔ)5.2HTML語言5.3Dreamweaver網(wǎng)頁設(shè)計(jì)5.4CSS+DIV5.5網(wǎng)站發(fā)布35.1網(wǎng)頁制作基礎(chǔ)網(wǎng)頁是構(gòu)成網(wǎng)站的基本元素，主要由文字、圖片、動(dòng)畫、音頻、視頻等信息組成。靜態(tài)網(wǎng)頁與動(dòng)態(tài)網(wǎng)頁

靜態(tài)網(wǎng)頁：即HTML網(wǎng)頁，其擴(kuò)展名為htm或html。其優(yōu)點(diǎn)在于內(nèi)容相對穩(wěn)定，易被檢索，但不具備交互性功能因此只允許于客戶端。動(dòng)態(tài)網(wǎng)頁：采用動(dòng)態(tài)網(wǎng)站技術(shù)開發(fā)形成的網(wǎng)頁，在設(shè)計(jì)時(shí)除了使用HTML語言外，還包括使用ASP、JSP、PHP等網(wǎng)絡(luò)編程語言和數(shù)據(jù)庫技術(shù)，具有交互性功能，一般擴(kuò)展名為asp、jsp、php、cgi等。4構(gòu)成網(wǎng)頁的基本要素包括：Logo、Banner、導(dǎo)航欄、文本、圖像、多媒體等。Logo商標(biāo)：代表企業(yè)形象或者網(wǎng)站內(nèi)容的標(biāo)志性圖片，一般位于網(wǎng)頁的左上角。Banner：用于宣傳網(wǎng)站某個(gè)欄目或者活動(dòng)的廣告，一般位于網(wǎng)頁的頂部。通常采用動(dòng)畫形式播放。網(wǎng)頁的基本要素

5導(dǎo)航欄：就是一組超鏈接，用于方便瀏覽網(wǎng)站內(nèi)部的站點(diǎn)。導(dǎo)航欄形式多樣，可能是文字鏈接、圖片鏈接、按鈕或者下拉菜單。文本：文本是網(wǎng)頁最基本的元素，所有信息都可以用文字來描述傳達(dá)。圖像：圖像可以提供信息、展示形象、裝飾網(wǎng)頁、表達(dá)情趣，增加網(wǎng)頁的吸引力。多媒體：多媒體信息包括FLASH動(dòng)畫、音頻、視頻等內(nèi)容。6一、網(wǎng)站策劃。網(wǎng)站策劃是網(wǎng)站設(shè)計(jì)的前奏，主要包括確定網(wǎng)站的主題和目標(biāo)用戶群，還有形象策劃、制作規(guī)劃和后期推廣宣傳等方面的內(nèi)容。二、規(guī)劃站點(diǎn)基本結(jié)構(gòu)。規(guī)劃網(wǎng)站欄目、網(wǎng)站風(fēng)格、網(wǎng)站導(dǎo)航、顏色搭配、版面布局和文字圖片的運(yùn)用等。三、設(shè)計(jì)網(wǎng)站頁面。在網(wǎng)頁布局規(guī)劃結(jié)束后，將確定需要的功能模塊、圖片、文字、視頻等放置到頁面上。四、制作網(wǎng)頁。利用HTML編輯工具軟件或者可視化設(shè)計(jì)軟件如Dreamweaver等制作網(wǎng)頁。五、測試上傳網(wǎng)站。網(wǎng)頁設(shè)計(jì)完成后，就可以在本機(jī)測試，測試無誤后就可以準(zhǔn)備發(fā)布了。六、申請域名和服務(wù)器空間。將測試無誤的網(wǎng)頁文件上傳到申請的空間里，就可以通過internet瀏覽訪問了。

網(wǎng)頁設(shè)計(jì)基本步驟75.2HTML語言HTML（HyperTextMarkupLanguage）語言即超文本標(biāo)記語言，通過標(biāo)記符號(hào)來標(biāo)記要顯示的網(wǎng)頁中的各個(gè)部分。其中超文本是指頁面內(nèi)可以包含圖片、鏈接、音頻、視頻、程序等非文本元素。在HTML文件中對文本和非文本元素進(jìn)行標(biāo)記，由瀏覽器解釋和顯示出來。可以使用文本編輯器來創(chuàng)建HTML文件，或者使用專門的網(wǎng)頁設(shè)計(jì)工具，如AdobeDreamweaver、Notepad++等。8用HTML語言編寫網(wǎng)頁1.HTML標(biāo)記標(biāo)記格式為：

<標(biāo)記>指定內(nèi)容</標(biāo)記>(1)“<標(biāo)記>”和“</標(biāo)記>”分別是一個(gè)標(biāo)記元素的開始和結(jié)束(2)

標(biāo)記本身不區(qū)分大小寫。9常用HTML標(biāo)記

10HTML文檔結(jié)構(gòu)

（1）開頭與結(jié)尾標(biāo)記：<html>、</html>（2）頭部標(biāo)記:<head>、</head>（3）主體標(biāo)記：<body>、</body>11HTML文檔實(shí)例

記事本（Notepad.exe）編輯HTML文檔，文件的擴(kuò)展名是.htm或.html<html> <head> <title>文檔的標(biāo)題</title> </head> <body> <H2>第一個(gè)網(wǎng)頁</H2> <hr> <p><fontface="楷體_GB2312"size=6color="red">第一個(gè)例子</font></p> <p>第二句話</p> <p>第二句話</p> </body></html>12圖片、超級(jí)鏈接與表格標(biāo)記

<html><head><title>我的第二個(gè)網(wǎng)頁</title></head><body><h2>第二個(gè)網(wǎng)頁</h2><hr><tableborder="1"width="400px"><tr><td>文字</td><td><ahref="eg_5_1.html">超級(jí)鏈接</a></td></tr><tr><td>圖片</td><td><imgborder="0"src="cache.gif"width="80px"height="120px"></td></tr></table></body></html>HTML文檔實(shí)例

13表單標(biāo)記實(shí)例：表單提供交互操作界面。

<html><head><title>我的第三個(gè)網(wǎng)頁</title></head><body><h2>第三個(gè)網(wǎng)頁</h2><hr><formmethod=””action=””><tableborder="1"width="400px"><tr><td>輸入姓名:</td><td><inputtype="text"name="myname"></td></tr><tr><td>輸入密碼:</td><td><inputtype="password"name="password"></td></tr><tr><td>操作按鈕:</td><td><inputtype="submit"name="submit"value=”提交”></td></tr></table></form></body></html>HTML文檔實(shí)例

14列表實(shí)例

<html><head><title>我的第四個(gè)網(wǎng)頁</title></head><body><h2>第四個(gè)網(wǎng)頁</h2><divstyle="width:300px;height:100px”><ol><li><ahref=”E5_1.html”>第一個(gè)網(wǎng)頁</a></li><li><ahref=”E5_2.html”>第二個(gè)網(wǎng)頁</a></li><li><ahref=”E5_3.html”>第三個(gè)網(wǎng)頁</a></li></ol></div></body></html>HTML文檔實(shí)例

155.3Dreamweaver網(wǎng)頁設(shè)計(jì)Adobe公司的Dreamweaver是一個(gè)可視化、功能強(qiáng)大的專業(yè)級(jí)網(wǎng)頁設(shè)計(jì)和網(wǎng)站管理軟件，目前版本由DreamweaverCS6更新到DreamweaverCC。該軟件支持最新的Web技術(shù)，能實(shí)現(xiàn)PC及移動(dòng)終端網(wǎng)站設(shè)計(jì)開發(fā)。打開起始頁面:16DreamweaverCS6工作界面包括代碼區(qū)、設(shè)計(jì)區(qū)以及兩者同時(shí)顯示的拆分三種視圖。17創(chuàng)建與管理站點(diǎn)站點(diǎn)是一系列相互鏈接的網(wǎng)頁文檔的組合。在網(wǎng)頁設(shè)計(jì)階段需要?jiǎng)?chuàng)建站點(diǎn)，搭建好各個(gè)網(wǎng)頁文檔的屬性及存放位置。18編輯和保存網(wǎng)頁輸入文字，選中文字在下方的屬性面板中設(shè)置字體、大小、項(xiàng)目符號(hào)等屬性。打開頁面屬性界面，可以對網(wǎng)頁的外觀、鏈接、標(biāo)題等進(jìn)行設(shè)置。當(dāng)網(wǎng)頁編輯完成好，將網(wǎng)頁文件保存，執(zhí)行“文件-在瀏覽器中預(yù)覽（選擇瀏覽器）”命令，就可以在瀏覽器中瀏覽保存好的網(wǎng)頁。超鏈接超級(jí)鏈接是構(gòu)成網(wǎng)站最為重要的部分之一。在網(wǎng)頁上創(chuàng)建超鏈接，即可將網(wǎng)站上的網(wǎng)頁聯(lián)系起來。超級(jí)鏈接由源端點(diǎn)和目標(biāo)端點(diǎn)兩部分組成，其中設(shè)置了鏈接的一端為源端點(diǎn)，跳轉(zhuǎn)到的頁面或?qū)ο蟪蔀殒溄拥哪繕?biāo)端點(diǎn)。超級(jí)鏈接指向的目標(biāo)，可以是網(wǎng)頁、書簽、網(wǎng)站或者其他URL資源。選擇文字，單擊屬性面板【鏈接】文本框旁的【瀏覽文件】圖標(biāo)，打開【選擇文件】對話框在其中選擇文件。也可以在屬性面板【鏈接】文本框中直接輸入鏈接目標(biāo)的URL地址，如“./ccbs”。19列表在網(wǎng)頁中對內(nèi)容進(jìn)行排版時(shí)，還需要用到列表。使用網(wǎng)頁設(shè)計(jì)軟件，只需要選中需要列表的文字，點(diǎn)擊右鍵，在列表選項(xiàng)中選擇列表樣式（包括項(xiàng)目列表、編號(hào)列表、定義列表），就可以完成列表顯示。如上圖5-15中的實(shí)例，選擇第一句話和第二句話兩行文字，點(diǎn)擊右鍵，在列表樣式中選擇編號(hào)列表，獲得效果如下：2021圖像與多媒體在網(wǎng)頁中添加圖像文件插入圖片：執(zhí)行“插入-圖像”命令，打開“選擇圖像源文件”頁面，選擇圖片插入到網(wǎng)頁中。同時(shí)還可選中網(wǎng)頁設(shè)計(jì)版面的圖片，對圖片的屬性進(jìn)行調(diào)整。另外執(zhí)行“插入-媒體”命令，可以在網(wǎng)頁中插入FLASH動(dòng)畫及其它視頻文件。22表格新建表格：執(zhí)行“插入表格”命令，打開“表格”對話框，設(shè)置好行列、表格寬度等選項(xiàng)后，點(diǎn)擊確定。表格格式化：選中表格，在屬性面板中可以對表格屬性進(jìn)行設(shè)置。23表單執(zhí)行“插入表單”命令組的命令插入文本框、滾動(dòng)文本框、復(fù)選框、單選按鈕、下拉列表和按鈕等表單對象。245.4CSS+DIVCSS（CascadingStyleSheet）即層疊樣式表，是用于控制網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁內(nèi)容分離的一種標(biāo)記性語言。CSS是一系列格式設(shè)置規(guī)則，用于控制網(wǎng)頁頁面內(nèi)容的顯示方式。使用樣式表，對象的格式只要指定一次，就可以被整個(gè)網(wǎng)站的所有網(wǎng)頁使用；只改變樣式表，就可以改變網(wǎng)站的整體風(fēng)格，使得網(wǎng)頁設(shè)計(jì)和管理工作變得更加輕松。25CSS樣式CSS基本語法由三部分構(gòu)成：選擇器（Selector）、屬性（Property）和屬性值（Value）。選擇器{屬性1:值1;屬性2:值2;……}以下代碼分別規(guī)定了標(biāo)記元素Body、H5、P和Table的樣式Body{Background:#666699;Font-Size:12px;Font-Family:宋體;COLOR=#989922}H5{Color:Lime;}P{Color:#FF0000}Table{Background:#00ffff;Width:700px;Border:1pxSolid#000000;}26網(wǎng)頁使用CSS樣式包括三種方法：外聯(lián)式、嵌入式、內(nèi)聯(lián)式。<head><linkrel="stylesheet"type="text/css"href="mystyle.CSS"></head>外聯(lián)到文件嵌入式內(nèi)部樣式<head><styletype="text/css"body{background-color:red}</style></head>內(nèi)聯(lián)式<PStyle="Font-Size:12px;Font-Family:宋體;Color=#989922">樣式的一個(gè)例子</P>27DIV標(biāo)簽DIV（Division），區(qū)塊標(biāo)記，是CSS層疊樣式表中的定位技術(shù)，可設(shè)定區(qū)塊內(nèi)文本、圖像、表格等元素的擺放位置。DIV的起始標(biāo)簽和結(jié)束標(biāo)簽之間的所有內(nèi)容都是用來構(gòu)成這個(gè)區(qū)塊容器的，其中所包含元素的特性由DIV標(biāo)簽的屬性來控制，或者通過樣式表格式化這個(gè)塊來進(jìn)行控制。在HTML文檔內(nèi)其標(biāo)記符號(hào)為<div>、</div>。28用Dreamweaver設(shè)計(jì)樣式執(zhí)行插入→DIV命令，在插入DIV對話框中給定Class名稱，然后選擇新建CSS規(guī)則。CSS示例//CSS樣式內(nèi)容：<head><styletype=”text/css”>.container{width:600px;height:400px;border:1pxsolidred}</style></head>//頁面設(shè)計(jì)內(nèi)容：<divclass="container">#定義一個(gè)class名為container的div<h2>CSS+DIV示例</h2>#加入一個(gè)標(biāo)題2格式的文字

<p>第一句話</p>#加入一個(gè)段落格式的文字內(nèi)容

<tableclass=”mytable”>#加入表格，將其class命名為mytable<tr><td>單元格1</td><td>單元格2</td></tr></table></div>2930CSS+DIV布局網(wǎng)頁CSS+DIV是WEB設(shè)計(jì)標(biāo)準(zhǔn)，它是一種新的網(wǎng)頁布局方法，可以實(shí)現(xiàn)網(wǎng)頁頁面內(nèi)容與表現(xiàn)相分離，從而適應(yīng)網(wǎng)絡(luò)應(yīng)用更多的需求。使用Div可以將頁面首先在整體上進(jìn)行<div>標(biāo)記的分塊，然后對各個(gè)塊進(jìn)行CSS定位，最后再在各個(gè)塊中添加相應(yīng)的內(nèi)容。315.5網(wǎng)站發(fā)布網(wǎng)站發(fā)布一般要經(jīng)過三個(gè)步驟：申請域名申請空間網(wǎng)站上傳。申請域名申請域名一般通過域名申請代理商進(jìn)行，如通過阿里萬網(wǎng)、百度、騰訊等都可以購買到域名?？梢陨暾垏H域名和中國國內(nèi)域名，國際頂級(jí)域名包括com、net、org、

溫馨提示

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

評(píng)論

0/150

提交評(píng)論