網(wǎng)頁設(shè)計與制作(代碼介紹)和實驗報告1-DIV+CSS網(wǎng)頁設(shè)計_第1頁
網(wǎng)頁設(shè)計與制作(代碼介紹)和實驗報告1-DIV+CSS網(wǎng)頁設(shè)計_第2頁
網(wǎng)頁設(shè)計與制作(代碼介紹)和實驗報告1-DIV+CSS網(wǎng)頁設(shè)計_第3頁
網(wǎng)頁設(shè)計與制作(代碼介紹)和實驗報告1-DIV+CSS網(wǎng)頁設(shè)計_第4頁
網(wǎng)頁設(shè)計與制作(代碼介紹)和實驗報告1-DIV+CSS網(wǎng)頁設(shè)計_第5頁
已閱讀5頁，還剩10頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

網(wǎng)頁設(shè)計與制作一、HTML基本語言：1.HTML基本語法：（如圖）<html>....</html>:表示HTML文檔的開始和結(jié)束<head>…</head>:表示HTML文檔的頭部。最常用的標記是<title>…</title>,<title>標記中的內(nèi)容對應瀏覽窗口標題的信息。<body>…</dody>：<body>標記之內(nèi)的內(nèi)容對應的是瀏覽器中的內(nèi)容。2.<body>標記的使用：（如圖）Bgcolor="顏色":設(shè)置頁面背景色。Background="圖像文件的名字及路徑"：設(shè)置背景文件。Text="顏色"：設(shè)置頁面文字默認顏色。標記屬性用來對標記之間的內(nèi)容修飾，標記其屬性必須放到“<>”中，各屬性間必須用空格隔開。色彩的表示方法有兩各種：1.RGB

模式，用16進制的紅(Red)、綠(Green)、藍(Blue)的值來表示，格式為“#RRGGBB”，字符包括數(shù)字0～9和字母A～F，如紅色為“#FF0000”2.用英文單詞表示彩色，如紅色“red”。二、常用的HTML標記及其屬性制作網(wǎng)頁①.以下標記都出現(xiàn)在<body>中出現(xiàn),標記必須以成對出現(xiàn)，如<body>...</dody>.①.以下標記都出現(xiàn)在<body>中出現(xiàn),標記必須以成對出現(xiàn)，如<body>...</dody>.1.頁面屬性、排版標志⑴.標題標記：格式：<h#>...<h#>,其中“#”的取值范國為1（字體最大）～6（字體最?。?。作用：設(shè)置文檔的各級標題。常見屬性：align,用于定義標題的對齊方式，默認為左對齊，標題標記屬性：（如表）值表示的對方試示例left左對齊<h1align="left">文字內(nèi)容<h1>right右對齊<h1align="right">文字內(nèi)容<h1>center居中對齊<h1align="center">文字內(nèi)容<h1>⑵.版面格式標記①.分段與換行：（如表）標記名稱格式作用段落標記<p>...</p>或者<p>使標記后面的內(nèi)容另起一段。常用屬性：align,用于定義段落的對齊方式，與標題標記類似換行標記...<br>使標記后面的文字內(nèi)容換行顯示②.文本對齊標記可以在<p>標記中使用align屬性指定文本對齊方式。另外，居中對齊可以通過居中對齊方式進行設(shè)置。格式：<center>…<center>作用：使標記間的內(nèi)容以居中對齊方式顯示。③.水平線標記格式：<hr>作用：在文檔中插入水平線。屬性名稱屬性含義示例align定義水平線的對齊方式，默認為“center”右對齊水平線:<hralign="right">color定義水平線的顏色綠色水平線：<hrcolor="green">noshade定義水平線為無陰影無陰影水平線：<hrnoshadecolor="green">size定義水平線的寬度，單位默認為像素寬度為4像素的水平線:<hrsize="4">width定義水平線的長度，單位為像素或百分比（相于頁面寬度）占頁面寬度80%的水平線：<hrwidth="80%">常用水平線標記屬性：（如表）④.字體標記格式：<font>…</font>作用：設(shè)置標記間文體的字體、大小、顏色等。常用字體標記屬性：（如表）屬性名稱屬性含義示例face設(shè)置標記間文本的字體<fontface="隸書">文字內(nèi)容</font>size設(shè)置標記間文本的大小，取值范圍為1～7<fontsize="2">文字內(nèi)容</font>color設(shè)置標記間文本的顏色<fontcolor="red">文字內(nèi)容</font>title設(shè)置鼠標指向文本時，出現(xiàn)的提示信息<fonttitle="信息">文字內(nèi)容</font>⑤.字體修飾標記作用：設(shè)置標記間文本的樣式，如粗體、斜體、下劃線等。字體修飾標記（如表）功能格式粗體<b>...</b>或者<strong>...</strong>斜體<i>...</i>下劃線<u>...</u>上標<sup>...</sup>下標<sub>...<sub>刪除線<s>...</s>或者<strike>...</strike>大字體<big>...</big>小字體<small>...</small>⑥.特殊字符作用：在頁面上顯示特殊符號。字符名稱顯示結(jié)果 空格<<（小于號）>>(大于號)""(雙引號)©?®?××（乘號）特殊字符（如表）⑶項目符號標記作用：在HTML頁面中，合理地使用列表標記，可以起提綱和格式排序文作用。列表分為無序列表和有序列表兩類無序列表的主要標記為<ul>和<li>.作用：生成沒有編號的列表，每一個列表前使用<li>標簽區(qū)分。（格式如右）<ul>標記的主要屬性為type（如表）值代表disc實心加點（默認）circle空心圓square實心小方塊。注意：項目符號標記在網(wǎng)頁中的應用比較廣泛，它能清楚地標注文本的層次結(jié)構(gòu)，使用戶瀏覽網(wǎng)頁時能對該網(wǎng)頁的架構(gòu)一目了然。其中，項目符號標記使用<ul>…</ul>時，必須是成對出現(xiàn)的，并且其中，項目插入多對<li>…<li>列表項標記組成完整的列表。例：結(jié)果圖為：2.超鏈接標記格式：<a>...</a>作用：把當前位置的文本或圖像連接到其他的頁面、文本或圖像。常用超鏈接標記屬性（如表）屬性名稱屬性含義示例href指定鏈接的目標地址，可以是站內(nèi)的文件，也可以某個網(wǎng)站<ahref="a.html">...</a><ahref="">...<a>target指定鏈接的目標窗口，其值是一個窗口的名稱，也可以是_blank、_parent、_self、_top,默認為_self<ahref="a.html"target="_blank”...</a>title鼠標指向鏈接時，所顯示的信息<ahref="a.html"title="信息"...</a>target屬性target取值作用_blank在新窗口中打開_parent在上一級窗口中打開_self在當前窗口中打開，此項為默認值_top在瀏覽器的整個窗口中打開，忽略任何框架絕對路徑與相對路徑：在網(wǎng)頁文檔中引用一個文件時，需要給出該文件的路徑，這個可以是網(wǎng)絡資源，也可以是本地計算機上的文件資源。HTML有兩種路徑：絕對路徑與相對路徑。1.絕對路徑：從協(xié)議開始的URL地址或從驅(qū)動名稱開始的本地文件路徑都稱為絕對路徑。如或d:\1\1.html2.相對路徑：從文件存儲位置開始的路徑叫相對路徑。在描述相對路徑時，需要注意：⑴.如果源文件和引用的文件在同一級目錄里，直接寫引用文件名即可。⑵.“.../”表示源文件所在目錄的上一級，“.../.../”表示源文件所在目錄的上上級目錄，以此類推。⑶.引用下級的文件，直接寫下級目錄文件的路徑即可。例如，站點文件夾中有主頁文件index.html和圖像文件夾images,index.html文件中使用了images文件夾中的01.jpg圖像文件，那么圖像01.jpg相對于index.html的相對路徑就是imges\01.jpg3.圖像標記格式：<img>作用：在頁面中插入圖像或視頻文件，圖像格式可以是：GIF、JPG、PNG。常用圖像標記屬性（如表）屬性名稱屬性含義示例src指定插入圖像名稱或路徑<imgsrc="a.gif">或者<imgsrc="images\a.gif">alt替換文本，當瀏覽器不能顯示圖像時、在鼠標指向圖像時、或圖像加載時間過長時，所要顯示的文本使標記后面的文字進行換行顯示width指定圖像寬度，單位是像素<imgsrc="images\a.gif"width="100"height="200">height指定圖像高度，單位是像素border指定圖像邊框，默認為0hspace指定圖像左右兩側(cè)與其他對象（如文本）之間的距離，單位為對象<imgsrc="images\a.gif"hspace="30"vspace="20"vspace指定圖像上下兩端與其他對象（如文本）之間的距離，單位為像素align指定圖像與文本的對齊方式，取值有：top、middle、bottom、left、right。當取值為left、right時，可以實現(xiàn)圖像文字左右繞排的效果<imgsrc="images\a.jpg"align="left">4.表格標記①表格的幾種標記作用表格是最基本的網(wǎng)頁布局的技術(shù)表格的主要標記（如表）標記描述<table>...</table>表示整個表格的開始、結(jié)束<caption>...</caption>用來設(shè)置整個表格的名稱，表格中可不用此標記<tr>...</tr>代表表格中一行<td>...<td>代表單個普通的單元格，此標記必須放在一對<tr>標記內(nèi)<th>...</th>用于定義表頭單元格，單元格中的文字將以粗體顯示，此標簽必須放在一對<tr>標記內(nèi)，在表格中也可以不用此標記格式（如圖）<table>標記的主要屬性（如表）屬性名稱屬性含義border表格邊框的寬度（以像素為單位）；若不設(shè)置此屬性，則邊框的寬度默認為0，即不顯示邊框bordercolor表格邊框顏色background設(shè)置表格的背景圖像bgcolor設(shè)置表格的背景顏色width表格寬度；其值可用像素表示，也可用占窗口的百分比表示height表格高度；其值可用像素表示，也可用占窗口的百分比表示align表格在頁面的水平位置；取值為：left、right、center;默認為在對齊cellspacing單元格之間的間距；其值可用像素來表示cellpadding單元格內(nèi)容與單元格邊界之間的距離;其值可用像素來表示<tr>標記屬性屬性名稱屬性含義align行內(nèi)容的水平對齊方式；取值為：left、right、center；默認為左對齊valign行內(nèi)容的垂垂直對齊方式；取值為：top、middle、bottom；默認為局中對齊height行高；其值可用像素或表格高度百分比表示title鼠標指向該行時，顯示的指示信息bgcolor行的背景顏色bordercolor行的邊框顏色nowrap本行所有單元格內(nèi)容不能自動換行<td>和<th>標記主要屬性屬性名稱屬性含義align單元格內(nèi)容的水平對齊方式；取值為：left、right、center；默認為左對齊（若與<tr>標簽的屬性沖突時，以單元格自身的設(shè)置為主valign單元格內(nèi)容的垂直對齊方式；取值為：top、middle、bottom;默認為垂直居中（若與<tr>標簽的屬性沖突時，以單元格自身的設(shè)置為主）（續(xù)表）屬性名稱屬性含義width單元格的寬度，可用像素值或表格寬度的百分比來表示height單元格的高度，可用像素值或表格高度的百分比來表示bgcolor單元格的背景顏色bordercolor單元格的邊框顏色nowrap單元格內(nèi)容不能自動換行rowspan單元格所占的行數(shù)colspan單元格據(jù)占的列數(shù)②合并單元格若需要建立不規(guī)則表格，就要用到<td>標記的rowspan屬性和colspan屬性來合并單元格。如實現(xiàn)下圖①到下圖②的轉(zhuǎn)化。進行單元格合并時，需要遵循如下幾條原則：⑴.整個表格中，每行的列數(shù)要相同。⑵.若某個單元格中，設(shè)置了屬性colspan="2"，表示該單元格在橫向占據(jù)了兩個單元格的位置，所以，在當前行<tr>中，就需要少寫一個<tr>標簽（如B3單元格）.依此類推，若設(shè)置了屬性colspan="3",當前行<tr>中，就需要少寫兩個<td>標簽（如C2單元格）。⑶.若某個單元格中，設(shè)置了屬性rowspan="2",表示該單元格在縱向占據(jù)了兩個單元格的位置，所以，在下一個<tr>中，該列處就需要少寫一個<td>標簽（如A2單元格）。若設(shè)置了屬性rowspan="3"在下兩行<tr>中，該列處都需要少一個<td>s標簽，依此類推。合并后的表格代碼為：5.框架標記框架的主要標記有：<frameset>和<frame>,分別表示整個框架和單個框架。⑴框架集標記<frameset>的幾種常用屬性有cols、rows、frameborder.cols:創(chuàng)建縱向分割框架時，通過該屬性指定各框架的列寬，取值可以是“像素”和“%”，分割左右窗口，用“*”表示剩余部分。rows:創(chuàng)建橫向分割框架時，通過該屬性指定各框架的行高，取值可以是“像素”和“%”，分割左右窗口，用“*”表示剩余部分。Frameborder:指定框架周圍是否顯示邊框，取值為“0”或“no”表示不顯示邊框，取值為“1”或“yes⑵.框架標記<frame>的幾種常用屬性有src、name、frameborder、scrolling.src:設(shè)置此框架中要顯示的網(wǎng)頁的文件名（路徑），每個框架對應一個網(wǎng)頁。name:設(shè)置該框架的名稱，當有超鏈接指定要打開的頁面在此框架中顯示時，需要使用到target="框架"，此時如果省略了框架名就無法鏈接了。frameborder:指定框架周圍是否顯示邊框，“0”是不顯示，“1Scrolling:設(shè)置是否顯示滾動條，“yes”表示顯示，“no”表示不顯示，“auto”表示自動調(diào)整（默認值）。在包含框架HTML文檔中，要使用框架標記<frameset>取代<body>s標記，然后通過框架標記<frame>定義單個框架。除了以上所學到的標記之外，HTML中還包含可以讓文本移動的標記<marquee>...</marquee>；用于在網(wǎng)頁中插入音樂、視頻和動畫的標記<embed>；背景音樂標記<bgsound>等，如果要實現(xiàn)頁面之間的過渡效果，可以通過<meta>標記的屬性來實現(xiàn)。HTML語言擁有許多功能豐富標記，由于時間與能力有限，就不在介紹了。學生實驗報告學期：學年第二學期班級：計算機科學與技術(shù)學號：姓名：課程編號：課程名稱：網(wǎng)頁設(shè)計與制作填寫說明1、填寫實驗報告須字跡工整,使用黑色鋼筆或簽字筆填寫。2、課程編號和課程名稱必須和教務系統(tǒng)中保持一致，實驗項目名稱填寫須完整規(guī)范，不能省略或使用簡稱。3、每個實驗項目應填寫一份實驗報告。如同一個實驗項目分多次進行，可在實驗報告中寫明。4、如果實驗報告頁面不夠，可分成兩個實驗報告填寫。實驗目錄及成績登記序號實驗日期實驗項目名稱實驗成績備注1234567891011121314151617實驗報告最終成績：指導教師簽名：說明：實驗項目順序和名稱由學生填寫，必須前后保持一致；實驗成績以百分制計，由實驗指導教師填寫并簽名，一般不能涂改，確有涂改的，應在備注欄說明原因；實驗報告部分最終成績?yōu)樗袑嶒烅椖砍煽兊钠骄怠?/p>

溫馨提示

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

評論

0/150

提交評論