第1課 html+css網(wǎng)頁設(shè)計_第1頁
第1課 html+css網(wǎng)頁設(shè)計_第2頁
第1課 html+css網(wǎng)頁設(shè)計_第3頁
第1課 html+css網(wǎng)頁設(shè)計_第4頁
第1課 html+css網(wǎng)頁設(shè)計_第5頁
已閱讀5頁，還剩32頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

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

</head>

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

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

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

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

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

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

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

<imgsrc=“../1.jpg”/>圖像在網(wǎng)頁的同一級文件夾: <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)頁窗口標(biāo)題<title>標(biāo)記寫在head頭部里，用于在瀏覽器窗口的標(biāo)題欄上顯示網(wǎng)頁標(biāo)題。網(wǎng)頁標(biāo)題很重要，因為搜索引擎（比如Google）要用它來索引網(wǎng)頁，并顯示在搜索結(jié)果里。<html><head> <title>歡迎來參觀</title></head><body> <h4>我的第一個網(wǎng)頁</h4></body></html>html標(biāo)記與html屬性通過前一階段學(xué)習(xí)，我們利用html標(biāo)記，使得內(nèi)容在瀏覽器中顯示出來，接下來我們學(xué)習(xí)如何設(shè)置html標(biāo)記的屬性來進(jìn)一步控制內(nèi)容的編排，比如文字的大小、顏色、網(wǎng)頁的背景等。標(biāo)記屬性的語法：<標(biāo)記名稱屬性名1=“屬性值1”屬性名2=“屬性值2”……..></標(biāo)記名稱>注：如果一個標(biāo)記使用了多個屬性，各屬性之間用空格隔開。不同標(biāo)記可以使用相同的屬性，但有些標(biāo)記也有自己專門的屬性設(shè)置。11、利用align屬性設(shè)置段落對齊方式align屬性是用于控制元素的對齊方式，很多標(biāo)記都含有該屬性，比如：<p>、<h1>、…<h6>標(biāo)記的align屬性設(shè)置了文字的水平對齊方式<img>標(biāo)記的align屬性是設(shè)置圖片與文字的對齊關(guān)系，以實現(xiàn)圖文混排的效果。align屬性值一般有三個：center、left、right如：<h1align=

溫馨提示

  • 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

提交評論