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

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

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

主體：提供文檔的內容

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

<imgsrc=“1.jpg"/></body> 注：Img標記用于在網(wǎng)頁中插入圖片Src屬性用于指定圖片所在的路徑和名稱，此例中圖片和網(wǎng)頁文件是處于同一個文件夾下，所以省略了路徑。那么，當圖片與網(wǎng)頁不在同一個文件夾下，又怎么表示文件的路徑呢？文件路徑的表達：分為兩種情況如果圖片文件就在本網(wǎng)站內部，那么要以顯示該圖像的網(wǎng)頁文件為起點，通過層級關系描述圖像位置，我們稱這為相對路徑。如果圖像不在本網(wǎng)站內部，那么通常以http://開頭的URL作為文件的路徑。下面舉例說明相對路徑的使用：假設網(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標記的width和height屬性設置圖像寬度與高度：如：<imgwidth="200“height="150"border="5"src="1.jpg"/>注：width是設置圖片寬度Height是設置圖片高度border是設置圖像邊框的粗細。10、利用title標記設置網(wǎng)頁窗口標題<title>標記寫在head頭部里，用于在瀏覽器窗口的標題欄上顯示網(wǎng)頁標題。網(wǎng)頁標題很重要，因為搜索引擎（比如Google）要用它來索引網(wǎng)頁，并顯示在搜索結果里。<html><head> <title>歡迎來參觀</title></head><body> <h4>我的第一個網(wǎng)頁</h4></body></html>html標記與html屬性通過前一階段學習，我們利用html標記，使得內容在瀏覽器中顯示出來，接下來我們學習如何設置html標記的屬性來進一步控制內容的編排，比如文字的大小、顏色、網(wǎng)頁的背景等。標記屬性的語法：<標記名稱屬性名1=“屬性值1”屬性名2=“屬性值2”……..></標記名稱>注：如果一個標記使用了多個屬性，各屬性之間用空格隔開。不同標記可以使用相同的屬性，但有些標記也有自己專門的屬性設置。11、利用align屬性設置段落對齊方式align屬性是用于控制元素的對齊方式，很多標記都含有該屬性，比如：<p>、<h1>、…<h6>標記的align屬性設置了文字的水平對齊方式<img>標記的align屬性是設置圖片與文字的對齊關系，以實現(xiàn)圖文混排的效果。align屬性值一般有三個：center、left、right如：<h1align=

溫馨提示

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

最新文檔

評論

0/150

提交評論