第1課 html+css網(wǎng)頁(yè)設(shè)計(jì)_第1頁(yè)
第1課 html+css網(wǎng)頁(yè)設(shè)計(jì)_第2頁(yè)
第1課 html+css網(wǎng)頁(yè)設(shè)計(jì)_第3頁(yè)
第1課 html+css網(wǎng)頁(yè)設(shè)計(jì)_第4頁(yè)
第1課 html+css網(wǎng)頁(yè)設(shè)計(jì)_第5頁(yè)
已閱讀5頁(yè)，還剩32頁(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)介

第一課html+css網(wǎng)頁(yè)設(shè)計(jì)主講：譚軍Qq：83932086網(wǎng)頁(yè)設(shè)計(jì)群：60250389加群時(shí)請(qǐng)注明班級(jí)、姓名課程要求：學(xué)生作品展示網(wǎng)站規(guī)劃流程：網(wǎng)頁(yè)是什么：HTML基礎(chǔ)制作自己第一個(gè)網(wǎng)頁(yè)制作網(wǎng)頁(yè)需要什么工具本課重點(diǎn)：用html創(chuàng)建與設(shè)置文本和圖像輔助：利用Dreamweaver快速創(chuàng)建html文檔作業(yè)：看書(shū)：課本第1、2、3章，并上機(jī)實(shí)現(xiàn)課本例子；上機(jī)實(shí)驗(yàn)題：本課內(nèi)容一、課程要求：實(shí)現(xiàn)一小型站點(diǎn)的設(shè)計(jì)與發(fā)布獨(dú)立規(guī)劃和設(shè)計(jì)一個(gè)網(wǎng)站，內(nèi)容不限。掌握網(wǎng)頁(yè)設(shè)計(jì)工具Dreamweaver的使用。掌握用ftp軟件發(fā)布站點(diǎn)。寫(xiě)一份《綜合設(shè)計(jì)報(bào)告》：包含站點(diǎn)設(shè)計(jì)思想及內(nèi)容介紹、站點(diǎn)結(jié)構(gòu)圖、網(wǎng)上空間網(wǎng)址注明原創(chuàng)的動(dòng)畫(huà)和圖像及所在的頁(yè)面本課程收獲自己要改進(jìn)的地方二、站點(diǎn)設(shè)計(jì)流程：確定題目，設(shè)計(jì)出最初層次和劃分每個(gè)頁(yè)面的內(nèi)容與布局創(chuàng)建一個(gè)本地站點(diǎn)，進(jìn)行設(shè)計(jì)，并預(yù)先收集頁(yè)面素材和文字資料。申請(qǐng)一個(gè)網(wǎng)上空間，自學(xué)FTP上傳軟件的使用在本地站點(diǎn)調(diào)試通過(guò)，確保每個(gè)鏈接成功。用FTP上傳到網(wǎng)上空間寫(xiě)報(bào)告（用word文檔保存）把站點(diǎn)和報(bào)告一起打包成.RAR或.ZIP，要求5M以下，發(fā)郵箱給老師。三、網(wǎng)頁(yè)是什么認(rèn)識(shí)HTML什么是HTML超文本標(biāo)記語(yǔ)言：HTML是由一名叫TimBerners-Lee的科學(xué)家發(fā)明的。他發(fā)明HTML的目的，是為了方便不同大學(xué)的科學(xué)家們可以更容易地獲取彼此的研究文檔。HTML是一門(mén)語(yǔ)言，它令我們可以在因特網(wǎng)上展示信息（例如科學(xué)研究信息）。你所看到的網(wǎng)頁(yè)，是瀏覽器對(duì)HTML進(jìn)行解釋的結(jié)果。HTML語(yǔ)言并不會(huì)在瀏覽器中顯示出來(lái)，但是卻告訴瀏覽器如何顯示文檔的內(nèi)容，如文本、圖像及其其他媒體。這門(mén)語(yǔ)言還告訴你如何通過(guò)超文本鏈接實(shí)現(xiàn)交互式的文檔，這些鏈接可把你的文檔與其他本地或者因特網(wǎng)上的文檔，以及其他的網(wǎng)絡(luò)資源連接起來(lái)。如何查看一個(gè)網(wǎng)頁(yè)的HTML代碼：在瀏覽器菜單欄上點(diǎn)擊“查看”，然后選擇“源文件”即可。四、制作我們的第一個(gè)網(wǎng)頁(yè)打開(kāi)記事本程序，輸入以下html代碼：<html><head><title>我的第一個(gè)網(wǎng)頁(yè)</title>

</head>

<body><p>厲害！這是我的第一個(gè)網(wǎng)頁(yè)。</p>

<imgsrc=“1.jpg”/></body></html>把記事本文檔保存為1.html，注意后綴htm表明了它是一個(gè)html文檔，然后用瀏覽器顯示。頭部：提供關(guān)于當(dāng)前文檔的信息

主體：提供文檔的內(nèi)容

五、制作網(wǎng)頁(yè)需要什么工具瀏覽器：用于瀏覽網(wǎng)站的程序。游覽器有很多可供選擇，最普及的瀏覽器當(dāng)屬微軟（Microsoft）公司的InternetExplorer（俗稱“IE”）。其他的一些瀏覽器包括Opera、MozillaFirefox（俗稱“火狐貍”或“火狐”）等。這些瀏覽器的基本功能都是瀏覽網(wǎng)頁(yè)，因此具體使用哪個(gè)瀏覽器是無(wú)所謂的。網(wǎng)頁(yè)制作工具：比如MacromediaDreamweaver、MicrosoftFrontPage等。網(wǎng)頁(yè)制作工具可以為編寫(xiě)代碼提供很好的提示和幫助，還提供了許多標(biāo)準(zhǔn)功能供你選擇。缺點(diǎn)是，你只能按照這些標(biāo)準(zhǔn)功能來(lái)制作網(wǎng)頁(yè)，更糟糕的是，這些標(biāo)準(zhǔn)功能遠(yuǎn)遠(yuǎn)不能涵蓋所有的html標(biāo)記和屬性，如果你不懂得html，將無(wú)法制作正合你意的網(wǎng)頁(yè)?；蛘?，更令人討厭的是，它們會(huì)修改你手工編寫(xiě)的代碼。所以，要想制作精美的網(wǎng)頁(yè)，不能完全依賴Dreamweaver，而應(yīng)該在掌握一定程度html的基礎(chǔ)上去使用工具作為設(shè)計(jì)的輔助手段。對(duì)于dw，我們要學(xué)到什么程度？第一，熟練利用代碼視圖來(lái)輸入并修改html和CSS代碼。第二，利用dw的站點(diǎn)功能和文件面板，來(lái)管理網(wǎng)站的文件，比如文件的復(fù)制、移動(dòng)、重命名等，都需要更新關(guān)聯(lián)的超鏈接以及文件的路徑，這些dw都能替我們很好的完成，同時(shí)謹(jǐn)記網(wǎng)站中所有文件以及文件夾名不能用中文名或全角字符。第三，利用dw的spry插件制作流行的網(wǎng)頁(yè)元素，比如選項(xiàng)卡、折疊式面板等。第四，利用dw插入表格輸入標(biāo)記：在英文狀態(tài)下，按<鍵，即可彈出html標(biāo)記的列表，選擇相應(yīng)標(biāo)記按回車(chē)。輸入屬性：輸入標(biāo)記后，按空格可彈出其屬性列表，選擇相應(yīng)屬性按回車(chē)。利用dw代碼視圖輸入html標(biāo)記和屬性一個(gè)網(wǎng)頁(yè)可包含文本、圖像、表格，我們把這些內(nèi)容稱為網(wǎng)頁(yè)元素。元素構(gòu)成了HTML文檔，并告知瀏覽器如何呈現(xiàn)網(wǎng)頁(yè)。元素是文本、圖像、表格等。元素由首標(biāo)記、內(nèi)容（content）和尾標(biāo)記構(gòu)成。第2章、HTML文件結(jié)構(gòu)“標(biāo)記”是什么？標(biāo)記指示元素的起始與結(jié)束。所有標(biāo)記都具有相同的格式：以小于號(hào)“<”開(kāi)頭，以大于號(hào)“>”結(jié)尾。網(wǎng)頁(yè)有兩種標(biāo)記——首標(biāo)記和尾標(biāo)記。它們唯一的區(qū)別在于，尾標(biāo)記多一條斜杠“/。你通過(guò)把內(nèi)容放在首標(biāo)記和尾標(biāo)記之間來(lái)對(duì)內(nèi)容進(jìn)行標(biāo)記。如：<p>這是一行文字</p>HTML主要包含各種各樣的元素，所以，學(xué)習(xí)HTML，就是學(xué)習(xí)使用各種標(biāo)記來(lái)顯示網(wǎng)頁(yè)元素。舉例說(shuō)明b標(biāo)記的作用是，告訴瀏覽器介于標(biāo)記<b>和</b>之間的文本應(yīng)以粗體顯示。（這里的“b”是“粗體bold”的意思。）例1：<b>顯示粗體文字</b>該例在瀏覽器中將顯示如下：顯示粗體文字接下來(lái)，我們正式學(xué)習(xí)html常用的html標(biāo)記各標(biāo)記的屬性第3章、用html設(shè)置文本和圖像文本排版分段標(biāo)記<p>與段內(nèi)換行標(biāo)記<br>：設(shè)置標(biāo)題標(biāo)記：<h1>…<h6>:文字水平居中標(biāo)記：<center>設(shè)置文字段落縮進(jìn)標(biāo)記：<blockquote>設(shè)置網(wǎng)頁(yè)背景音樂(lè)標(biāo)記：<bgsound>滾動(dòng)字幕標(biāo)記：<marquee>設(shè)置文字列表：建立無(wú)序列表：<ul>建立有序列表：<ol>在網(wǎng)頁(yè)中添加圖像：img標(biāo)記網(wǎng)頁(yè)中的圖像格式一個(gè)簡(jiǎn)單圖片的網(wǎng)頁(yè)使用路徑相對(duì)路徑絕對(duì)路徑使用img標(biāo)記屬性設(shè)置圖片大?。簑idth和height屬性使用img標(biāo)記alt屬性設(shè)置圖像的替換文本：利用title標(biāo)記設(shè)置網(wǎng)頁(yè)窗口標(biāo)題：html標(biāo)記與html屬性控制p標(biāo)記的水平位置：align屬性：控制body標(biāo)記的網(wǎng)頁(yè)背景顏色或圖片：bgcolor、background。設(shè)置文字字體效果<font>標(biāo)記及其屬性：face、color、size等屬性1、分段標(biāo)記<p>與段內(nèi)換行標(biāo)記<br>：從word中復(fù)制一段文字到代碼窗，并用瀏覽器預(yù)覽，可看到瀏覽器會(huì)忽略掉原文中所有的空格和換行。要使得文字在瀏覽器中分段或換行，需要用<p>和<br>標(biāo)記：<p>互聯(lián)網(wǎng)發(fā)展的起源</p><p>1969年，為了保障通信聯(lián)絡(luò)，美國(guó)國(guó)防部高級(jí)研究計(jì)劃署ARPA資助建立了世界上第一個(gè)分組交換試驗(yàn)網(wǎng)ARPANET，連接美國(guó)四個(gè)大學(xué)。ARPANET的建成和不斷發(fā)展標(biāo)志著計(jì)算機(jī)網(wǎng)絡(luò)發(fā)展的新紀(jì)元。</p>2、設(shè)置標(biāo)題標(biāo)記：<h1>…<h6>:<h1>…<h6>共6個(gè)標(biāo)題標(biāo)記，用于把文本顯示為不同級(jí)別的標(biāo)題。<html><head><title>標(biāo)題標(biāo)記</title></head><body>以下為標(biāo)題樣式：<h1>H1標(biāo)題大小</h1><h2>H2標(biāo)題大小</h2><h3>H3標(biāo)題大小</h3><h4>H4標(biāo)題大小</h4><h5>H5標(biāo)題大小</h5><h6>H6標(biāo)題大小</h6></body></html>3、文字水平居中標(biāo)記：<center><center>標(biāo)記：使得內(nèi)容在瀏覽器中間開(kāi)始顯示<html><head><title>插入圖片</title></head><body><center> <p>互聯(lián)網(wǎng)發(fā)展的起源</p></center></body></html>4、設(shè)置文字段落縮進(jìn)標(biāo)記：<blockquote><blockquote>用于對(duì)段落進(jìn)行縮進(jìn)顯示：<html><head><title>標(biāo)題標(biāo)記</title></head><body><h1>互聯(lián)網(wǎng)發(fā)展的起源</h1><blockquote> <p>1969年，為了保障通信聯(lián)絡(luò)，美國(guó)國(guó)防部高級(jí)研究計(jì)劃署ARPA資助建立了世界上第一個(gè)分組交換試驗(yàn)網(wǎng)ARPANET，連接美國(guó)四個(gè)大學(xué)。ARPANET的建成和不斷發(fā)展標(biāo)志著計(jì)算機(jī)網(wǎng)絡(luò)發(fā)展的新紀(jì)元。</p></blockquote></body></html>5、設(shè)置網(wǎng)頁(yè)背景音樂(lè)標(biāo)記：<bgsound><bgsound>：設(shè)置網(wǎng)頁(yè)背景音樂(lè)，該標(biāo)記必須加在網(wǎng)頁(yè)的head位置。<html><head> <title>無(wú)標(biāo)題文檔</title><bgsoundsrc="1.mp3"/></head><body><h1>互聯(lián)網(wǎng)發(fā)展的起源</h1></body></html>6、滾動(dòng)字幕標(biāo)記：<marquee><marquee>標(biāo)記用于內(nèi)容的滾動(dòng)顯示；<html><head> <title>無(wú)標(biāo)題文檔</title></head><body> <marquee><h1>互聯(lián)網(wǎng)發(fā)展的起源</h1></marquee></body></html>還可以設(shè)置marguee標(biāo)記的屬性來(lái)修改滾動(dòng)方向、滾動(dòng)方式以及內(nèi)容的背景顏色。如：<marqueebehavior="alternate"bgcolor="#FF0000"direction="right"><h1>互聯(lián)網(wǎng)發(fā)展的起源</h1></marquee>注：behavior=“alternate”：是輪替滾動(dòng)；bgcolor=“#FF0000”：背景顏色；direction=“right”：滾動(dòng)方向在輸入標(biāo)記后按空格可彈出屬性列表，可根據(jù)需要選擇相應(yīng)屬性。7、建立無(wú)序列表：<ul>+<li>無(wú)序列表相當(dāng)于項(xiàng)目符號(hào)列表，其結(jié)構(gòu)如下：<ul>以下是無(wú)序列表<li>列表第1項(xiàng)</li><li>列表第2項(xiàng)</li><li>列表第3項(xiàng)</li></ul>8、建立有序列表：<ol>+<li>有序列表使用ol標(biāo)記，每一個(gè)列表前使用li標(biāo)記，每個(gè)項(xiàng)目用數(shù)字表示，其結(jié)構(gòu)如下：<ol>以下是有序列表<li>列表第1項(xiàng)</li><li>列表第2項(xiàng)</li><li>列表第3項(xiàng)</li></ol>9、在網(wǎng)頁(yè)中添加圖片：<img>標(biāo)記網(wǎng)頁(yè)中的圖片格式：Gif：只支持256色圖像，支持透明色，文件很小，是網(wǎng)頁(yè)圖像的首選。Jpg：支持1670萬(wàn)種顏色，利用img在網(wǎng)頁(yè)中添加圖片：<body>

<imgsrc=“1.jpg"/></body> 注：Img標(biāo)記用于在網(wǎng)頁(yè)中插入圖片Src屬性用于指定圖片所在的路徑和名稱，此例中圖片和網(wǎng)頁(yè)文件是處于同一個(gè)文件夾下，所以省略了路徑。那么，當(dāng)圖片與網(wǎng)頁(yè)不在同一個(gè)文件夾下，又怎么表示文件的路徑呢？文件路徑的表達(dá)：分為兩種情況如果圖片文件就在本網(wǎng)站內(nèi)部，那么要以顯示該圖像的網(wǎng)頁(yè)文件為起點(diǎn)，通過(guò)層級(jí)關(guān)系描述圖像位置，我們稱這為相對(duì)路徑。如果圖像不在本網(wǎng)站內(nèi)部，那么通常以http://開(kāi)頭的URL作為文件的路徑。下面舉例說(shuō)明相對(duì)路徑的使用：假設(shè)網(wǎng)站中有一個(gè)網(wǎng)頁(yè)名為1.html，還有一個(gè)圖像文件名為1.jpg，現(xiàn)在你要在網(wǎng)頁(yè)中插入該圖像，根據(jù)圖像所在位置不同，其路徑也有不同的表示方法：圖像與網(wǎng)頁(yè)在同一個(gè)文件夾：

<imgsrc=“1.jpg”/>圖像在網(wǎng)頁(yè)的下一級(jí)文件夾：

<imgsrc=“子文件夾名/1.jpg”/>圖像在網(wǎng)頁(yè)的上一級(jí)文件夾:

<imgsrc=“../1.jpg”/>圖像在網(wǎng)頁(yè)的同一級(jí)文件夾: <imgsrc=“../子文件夾名/

1.jpg”/>利用img標(biāo)記的width和height屬性設(shè)置圖像寬度與高度：如：<imgwidth="200“height="150"border="5"src="1.jpg"/>注：width是設(shè)置圖片寬度Height是設(shè)置圖片高度border是設(shè)置圖像邊框的粗細(xì)。10、利用title標(biāo)記設(shè)置網(wǎng)頁(yè)窗口標(biāo)題<title>標(biāo)記寫(xiě)在head頭部里，用于在瀏覽器窗口的標(biāo)題欄上顯示網(wǎng)頁(yè)標(biāo)題。網(wǎng)頁(yè)標(biāo)題很重要，因?yàn)樗阉饕妫ū热鏕oogle）要用它來(lái)索引網(wǎng)頁(yè)，并顯示在搜索結(jié)果里。<html><head> <title>歡迎來(lái)參觀</title></head><body> <h4>我的第一個(gè)網(wǎng)頁(yè)</h4></body></html>html標(biāo)記與html屬性通過(guò)前一階段學(xué)習(xí)，我們利用html標(biāo)記，使得內(nèi)容在瀏覽器中顯示出來(lái)，接下來(lái)我們學(xué)習(xí)如何設(shè)置html標(biāo)記的屬性來(lái)進(jìn)一步控制內(nèi)容的編排，比如文字的大小、顏色、網(wǎng)頁(yè)的背景等。標(biāo)記屬性的語(yǔ)法：<標(biāo)記名稱屬性名1=“屬性值1”屬性名2=“屬性值2”……..></標(biāo)記名稱>注：如果一個(gè)標(biāo)記使用了多個(gè)屬性，各屬性之間用空格隔開(kāi)。不同標(biāo)記可以使用相同的屬性，但有些標(biāo)記也有自己專門(mén)的屬性設(shè)置。11、利用align屬性設(shè)置段落對(duì)齊方式align屬性是用于控制元素的對(duì)齊方式，很多標(biāo)記都含有該屬性，比如：<p>、<h1>、…<h6>標(biāo)記的align屬性設(shè)置了文字的水平對(duì)齊方式<img>標(biāo)記的align屬性是設(shè)置圖片與文字的對(duì)齊關(guān)系，以實(shí)現(xiàn)圖文混排的效果。align屬性值一般有三個(gè)：center、left、right如：<h1align=

溫馨提示

  • 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)論