楊老師課堂之網頁製作HTML的學習入門-含有案例
網頁製作入門 - Html的學習
本篇所授任務
- 網站資訊頁面案例
- 網站圖片資訊頁面案例
- 網站友情連結頁面案例
- 網站首頁案例
- 網站註冊頁面案例
- 網站後臺頁面案例
教學導航
教學目標 | 瞭解什麼是標記語言 |
---|---|
教學目標 | 瞭解HTML主要特性,主要變化及發展趨勢 |
教學目標 | 瞭解HTML的結構標籤 |
教學目標 | 掌握HTML的主要標籤(字型,圖片,列表,連結,表單等標籤 |
教學方法 | 案例驅動法 |
1.1 網站資訊頁面顯示案例:
1.1.1 需求分析:
在網頁中顯示一個文字資訊頁面,顯示效果如下:
1.1.2 分析:
1.1.2.1 技術分析
【HTML的概述】
- 什麼是HTML
HTML:Hyper Text Markup Language 超文字標記語言
l 超文字:比文字功能更加強大
l 標記語言:通過一組標籤對內容進行描述的一門語言
- 為什麼學習HTML
HTML是設計頁面基礎,是一個網頁最起碼的骨架內容
- 在哪些地方可以使用HTML
設計頁面的時候都可以使用HTML,可以是網站,可以是淘寶店鋪的裝修…
- 如何使用HTML
HTML的語法和規範
l HTML檔案的副檔名是.html或者是.htm
l HTML檔案是由頭和體組成
l HTML這組標籤是不區分大小寫
l HTML的標記通常是由開始標籤和結束標籤組成:<b>
內容</b>
<br/>
【HTML的字型標籤】
<font>標籤
<font 屬性名=”屬性值”>文字</font>
l size:控制字型大小.最小1 最大7
l color:控制字型顏色. 使用英文設定 ,使用16進位制數設定
l face:控制字型.
【HTML的排版標籤】
<hn>標題標籤
<h1>b標題</h1>
<p>段落標籤
<p>一段文字</p>
<br/>換行標籤
<br/>代表換行
<hr/>水平線標籤
<hr/>水平線標籤
<b>字型加粗
<b>文字</b>
<i>斜體標籤
<i>斜體</i>
1.1.2.2 步驟分析
- 步驟一:建立一個html檔案
- 步驟二:建立標題標籤
- 步驟三:標題下面會有一個水平線
- 步驟四:建立段落標籤建立四個段落
- 步驟五:將某些文字設定為紅色
1.1.3 程式碼實現
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>頁面標題</title>
</head>
<body>
<!-- 建立標題標籤 -->
<h2>公司簡介</h2>
<!--
作者:Mr.yang
時間:2018-09-01
描述:水平線
-->
<hr />
<!--
作者:Mr.yang
時間:2018-09-01
描述:建立段落標籤
-->
<p>
<font color="#FF0000"><b>“楊老師課堂”</b></font>是由Java講師<b>楊校</b>個人進行開設的公開性學習平臺、並且在CSDN的部落格進行了發表每個技術的基礎知識點,並且在CSDN及網易雲上進行了諸多實戰技術的視訊講解,致力於輔助更多年輕人學習,更快的適應企業級大開發。極大的方面解決了企業招不到優秀人才的困擾。
</p>
<p>
楊老師課堂的讀者多為線上大學生,一群有理想、有夢想,想從事IT行業,而因為外在環境和個人機遇問題無法改變自己命運的年輕人。
在楊老師的部落格中經常會有自己對該行業的個人見解和對未來發展趨勢的預想,可以讓更多的年輕人有所瞭解,更快的確立的職業生涯發展目標。
而且楊老師還會發表一些在面試前夕的話術剖析。
</p>
<p>
銘揚教育-楊老師課堂不僅著重培養學生的基礎理論知識,更注重培養專案實施管理能力,並密切關注技術革新,不斷引入先進的技術,研發更新技術課程,確保更多的學生進入企業後不僅能獨立從事開發工作,更能給企業帶來新的技術體系和理念。
</p>
<p>
一直以來,楊老師都是以技術視角去關注IT產業的發展,以深度分享推進產業技術成長,致力於弘揚技術創新,倡導分享、 開放和協作,努力打造高質量的IT人才服務平臺。
</p>
</body>
</html>
1.2 網站的圖片頁面顯示
1.2.1 需求分析:
在網頁中顯示帶有圖片的頁面效果如下:
1.2.2 分析:
以上圖片為兩個圖片顯示,只不過是處於一行中
1.2.2.1 技術分析:
【HTML的圖片標記】
<img />
其中的可以選擇的屬性有
l— src:圖片的路徑
l— width:圖片寬度
l— height:圖片的高度
l— alt:圖片提示
圖片路徑:
l— 分成相對路徑和絕對路徑
l— 相對路徑:
|— ./ :代表當前路徑
|— ../ :代表上一級路徑
1.2.2.2 步驟分析:
- 建立一個img標籤引入logo圖片
- 建立一個img標籤引入header圖片
1.2.3 程式碼實現
<html>
<head>
<meta charset="utf-8">
<title>網站圖片頁面</title>
</head>
<body>
<img src="img/logo.png"/><img src="img/header.png" />
</body>
</html>
1.3 網站的列表顯示頁面
1.3.1 需求分析:
在頁面中列表顯示友情連結:
1.3.2 分析:
1.3.2.1 技術分析
【HTML的列表標籤】
無序列表
<ul>
<li>內容1</li>
<li>內容2</li>
</ul>
有序列表
<ol>
<li>內容1</li>
<li>內容2</li>
</ol>
1.3.2.2 步驟實現
- 建立一個無序列表顯示友情連結
- 但是並沒有實現點選後有連線跳轉到的效果(原因是缺少a標籤)
1.3.3 程式碼實現
```
- 百度
- 安博
- 百合網
- 世紀佳緣
```
1.3.4 總結:
【超連結標籤】
<a>超連結</a>
其中可以選擇的屬性有:
l href:超連結跳轉的路徑
l target:開啟方式
n _self:在自身頁面開啟
n _blank:開啟一個新視窗
1.4 網站的首頁顯示
1.4.1 需求分析:
在瀏覽器中顯示網站的首頁效果如下:
1.4.2 分析:
準備圖片素材
連結:https://pan.baidu.com/s/1kvNpaoVvoOSNYlFpcT7EOA 密碼:jfbj
1.4.2.1 技術分析
【HTML的表格標籤】
表格標籤:
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
表格的屬性:
l border :表格邊框
l width :表格寬度
l height :表格高度
l align :水平方向對齊方式 left center right
l bgcolor :背景色
1.4.2.2 步驟分析:
- 步驟一:建立8行表格
- 步驟二:實現第一行,巢狀一個一行三列表格。
- 步驟三:實現第二行,實現導航,設定背景色。
- 步驟四:放置一張圖片
- 步驟五:顯示熱門商品,建立一個三行七列的表格。對錶格進行跨行,跨列的操作。
- 步驟六:引入一張廣告圖片。
- 步驟七:顯示最新商品,建立一個三行七列的表格。對錶格進行跨行,跨列的操作。
- 步驟八:廣告資訊
- 步驟九:連結版權資訊。
1.4.3 程式碼實現
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>網站首頁</title>
</head>
<body>
<table width="1400" border="0" align="center">
<tr>
<td>
<!-- LOGO部分 -->
<table width="100%">
<tr height="40">
<td>
<img src="img/logo.png"/>
</td>
<td>
<img src="img/header.png"/>
</td>
<td>
<a href="#">登入</a>
<a href="#">註冊</a>
<a href="#">購物車</a>
</td>
</tr>
</table>
</td>
</tr>
<!--導航部分-->
<tr height="30" bgcolor="#75AA24">
<td>
<a href="#"><font color="white">首頁</font></a>
<a href="#"><font color="white">精品女裝</font></a>
<a href="#"><font color="white">酷帥男裝</font></a>
<a href="#"><font color="white">時尚鞋靴</font></a>
<a href="#"><font color="white">真皮箱包</font></a>
</td>
</tr>
<!--輪播圖-->
<tr>
<td>
<img src="products/1/banner1.jpg" width="100%"/>
</td>
</tr>
<!--最新商品 展示模組-->
<tr>
<td>
<table width="100%" border="0">
<tr>
<td colspan="7"><font size="5"><b>最新商品</b></font> <img src="img/title2.jpg"></td>
</tr>
<tr>
<td rowspan="2" width="200" height="500">
<img src="products/hao/big02.jpg" width="100%" height="100%"/>
</td>
<td colspan="3" width="600" height="250">
<img src="products/hao/middle02.jpg" width="100%" height="250"/>
</td>
<td width="200" align="center">
<img src="products/1/cs20001.jpg" width="130px" height="130px" /><br/>
<p><font color="gray">上衣</font></p>
<p><font color="red">$499</font></p>
</td>
<td width="200" align="center">
<img src="products/1/cs20002.jpg" width="130px" height="130px" /><br/>
<p><font color="gray">上衣</font></p>
<p><font color="red">$499</font></p>
</td>
<td width="200" align="center">
<img src="products/1/cs20003.jpg" width="130px" height="130px" /><br/>
<p><font color="gray">上衣</font></p>
<p><font color="red">$499</font></p>
</td>
</tr>
<tr>
<td align="center">
<img src="products/1/cs20004.jpg" width="130px" height="130px" /><br/>
<p><font color="gray">上衣</font></p>
<p><font color="red">$499</font></p>
</td>
<td align="center">
<img src="products/1/cs20005.jpg" width="130px" height="130px" /><br/>
<p><font color="gray">上衣</font></p>
<p><font color="red">$499</font></p>
</td>
<td align="center">
<img src="products/1/cs20006.jpg" width="130px" height="130px" /><br/>
<p><font color="gray">上衣</font></p>
<p><font color="red">$499</font></p>
</td>
<td align="center">
<img src="products/1/cs20007.jpg" width="130px" height="130px" /><br/>
<p><font color="gray">上衣</font></p>
<p><font color="red">$499</font></p>
</td>
<td align="center">
<img src="products/1/cs20008.jpg" width="130px" height="130px" /><br/>
<p><font color="gray">上衣</font></p>
<p><font color="red">$499</font></p>
</td>
<td align="center">
<img src="products/1/cs20009.jpg" width="130px" height="130px" /><br/>
<p><font color="gray">上衣</font></p>
<p><font color="red">$499</font></p>
</td>
</tr>
</table>
</td>
</tr>
<!--廣告-->
<tr>
<td>
<a href="#"><img src="products/hao/ad.jpg" width="100%"></a>
</td>
</tr>
<!--掌櫃推薦 展示模組-->
<tr>
<td>
<table width="100%" border="0">
<tr>
<td colspan="7"><font size="5"><b>掌櫃推薦</b></font> <img src="img/title2.jpg"></td>
</tr>
<tr>
<td rowspan="2" width="200" height="500">
<img src="products/hao/big02.jpg" width="100%" height="100%"/>
</td>
<td colspan="3" width="600" height="250">
<img src="products/hao/middle02.jpg" width="100%" height="250"/>
</td>
<td width="200" align="center">
<img src="products/1/cs10007.jpg" width="130px" height="130px" /><br/>
<p><font color="gray">上衣</font></p>
<p><font color="red">$499</font></p>
</td>
<td width="200" align="center">
<img src="products/1/cs10008.jpg" width="130px" height="130px" /><br/>
<p><font color="gray">上衣</font></p>
<p><font color="red">$499</font></p>
</td>
<td width="200" align="center">
<img src="products/1/cs10009.jpg" width="130px" height="130px" /><br/>
<p><font color="gray">上衣</font></p>
<p><font color="red">$499</font></p>
</td>
</tr>
<tr>
<td align="center">
<img src="products/1/cs10001.jpg" width="130px" height="130px" /><br/>
<p><font color="gray">上衣</font></p>
<p><font color="red">$499</font></p>
</td>
<td align="center">
<img src="products/1/cs10002.jpg" width="130px" height="130px" /><br/>
<p><font color="gray">上衣</font></p>
<p><font color="red">$499</font></p>
</td>
<td align="center">
<img src="products/1/cs10003.jpg" width="130px" height="130px" /><br/>
<p><font color="gray">上衣</font></p>
<p><font color="red">$499</font></p>
</td>
<td align="center">
<img src="products/1/cs10004.jpg" width="130px" height="130px" /><br/>
<p><font color="gray">上衣</font></p>
<p><font color="red">$499</font></p>
</td>
<td align="center">
<img src="products/1/cs10005.jpg" width="130px" height="130px" /><br/>
<p><font color="gray">上衣</font></p>
<p><font color="red">$499</font></p>
</td>
<td align="center">
<img src="products/1/cs10006.jpg" width="130px" height="130px" /><br/>
<p><font color="gray">大衣</font></p>
<p><font color="red">$499</font></p>
</td>
</tr>
</table>
</td>
</tr>
<!--尾部圖片展示-->
<tr>
<td>
<img src="img/footer.jpg" width="100%"/>
</td>
</tr>
<!--網頁連線-->
<tr>
<td align="center">
<a href="">關於我們</a>
<a href="">聯絡我們</a>
<a href="">招賢納士</a>
<a href="">法律宣告</a>
<a href="">友情連結</a>
&l