實驗一 HTML標記基本應用與網頁設計
一、實驗目的
1.掌握Sublime Text 3或者editplus的安裝與使用
2.掌握HTML常用標記的使用。
二、實習題目
運用所學知識，完成課本的練習與實驗中的以下實驗內容：
1.第2章（第40頁） 實驗2；
1.求知家園



求知家園

歡迎來到我們的求職家園

2.Google 搜尋



Google 搜尋

歡迎使用Google搜尋

2.第3章（第60頁） 實驗3；
1.自薦信

New Document





自薦信

自薦信

 

尊敬的領導： 

    您好！

感謝您在百忙之中啟閱我的自薦材料！相信此刻的停留不會讓您失望！

我是計算機專業的本科畢業生。經過將近四年的大學學習和鍛鍊，與同齡人一樣，我即將走上工作崗位，通過社會來證實自己的知識和能力。為了找到一份適合自己

特長和興趣的工作，更好地發揮自己的才能，實現自己的人生價值，我冒昧地寫下這封信，希望能得到您的認可，能為貴公司服務。

此致

敬禮！

 </pre>

 <hr size="3" color="red" width="100%"/>

 <i align="center">聯絡E-mail:
 
[email protected]</i>

2.數學方程式



New Document





h3{font - size:24px;color:red;text-align:center;}

font標記及文字標記的應用

數學方程式

2x₂+3x=9
x¹+x²=10

3.第4章（第72頁） 實驗4；
1.Windows作業系統



New Document

Windows不同版本

1. Windows 95
2. Windows 98
3. Windows NT
   
   
   
   • Windows NT Workstation
   • Windows NT Server
   
   
4. Windows 2000
   
   
   
   • Windows 2000 Professinoal
   • Windows 2000 Server
   • Windows 2000 Advance Server
   
   

4.第5章（第86頁） 實驗5；
1.apple網站



New Document




apple網站

apple網站

2.桂林山水



New Document




桂林山水風景圖片

桂林山水風景圖片

  <a href="1.jpg"><img border="0" width="24%" heigth="200" src="1.jpg"/></a>
  <a href="2.jpg"><img border="0" width="24%" heigth="200" src="2.jpg"/></a>
  <a href="3.jpg"><img border="0"  width="24%" heigth="200" src="3.jpg"/></a>
  <a href="4.jpg"><img border="0" width="24%" heigth="200" src="4.jpg"/></a> 
  <pre>桂林山水1                                         桂林山水2                                           桂林山水3                                             桂林山水4</pre>

5.第6章（第109頁）實驗6；
1.影象對齊方式



影象對齊方式

img{width:50px;height:50px;}

設定影象對齊方式

  <h3>未設定對齊方式的影象:</h3>
  <img src = "1.PNG">
  <p>PNG.影象檔案儲存格式，其目的是試圖（原來此處使用了“企圖”）替代GIF和IFF檔案格式，同時增加一些GIF文</p>
  <p>件格式所不具備的特性。</p>
  <p></p>
  <h3>已設定對齊方式的影象</h3>
  <p></p>
  <p></p>
  <p>PNG使用了從LZ77派生的一個非專利無失真壓縮演算法（名為deflation）。<img src="1.PNG" align = "bottom">這個演算法對影象裡的直線進行預測然</p>
  <p>後儲存顏色差值，這使得PNG經常能獲得比原始影象甚至比GIF更大的壓縮率。但也有一些軟體不能適合的預測而造</p>
  <p>成過分臃腫的PNG檔案。</p>
  <p></p>
  <p></p>
  <p>PNG使用了從LZ77派生的一個非專利無失真壓縮演算法（名為deflation）。<img src="1.PNG" align="middle">這個演算法對影象裡的直線進行預測然</p>
  <p>後儲存顏色差值，這使得PNG經常能獲得比原始影象甚至比GIF更大的壓縮率。但也有一些軟體不能適合的預測而造</p>
  <p>成過分臃腫的PNG檔案。</p>
  <img src="1.PNG" align="left">
  <p>PNG使用了從LZ77派生的一個非專利無失真壓縮演算法（名為deflation）。這個演算法對影象裡的直線進行預測然</p>
  <p>後儲存顏色差值，這使得PNG經常能獲得比原始影象甚至比GIF更大的壓縮率。但也有一些軟體不能適合的預測而造</p>
  <p>成過分臃腫的PNG檔案。</p>

2.影象滾動



影象畫廊





img{width:100px;height:100px}

影象畫廊

• 
• 
• 
• 
• 

6.利用表格技術製作你的本學期的課程表；
7.
8.
9.
10. 課程表
11.
12.
13.
14.
15.
16.
17.
18.
19.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.

2017軟體工程課程表

20.

節次	星期一	星期二	星期三	星期四	星期五
第一二節	java	c++	c	c#	資料結構
第三四節	java	c++	c	c#	資料結構
第五六節	java	c++	c	c#	資料結構
第七八節	java	c++	c	c#	資料結構

65.

7．第12章（第252頁）實驗12；



框架集的應用

浮動框架應用

a{width:300px;margin:0 10px;}
h3{font-size:28px;color:#0000ff;text-align:center;}
div{margin:0 auto;text-align:center;}

8.第13章（第275頁）實驗13。



登入介面





fieldset{width:300px;height:300px;border:1px;padding-left:30px}

登入頁面
姓名:
密碼:
型別 管理員
普通使用者
記住密碼
自動登入

       <input name="" type="submit" value="提交">
       <input name="" type="reset" value="重置">
  </fieldset>

應聘介面

希望工作地點:
北京
南京
東京

月薪要求:
要求提供過渡住房
清選擇應聘行業:

計算機軟體
計算機硬體
計算機服務
通訊/電信/網路裝置
網際網路/電子商務
網路遊戲
電子技術/半導體/積體電路
儀器儀表/工業自動化

本次實驗我對書上的web設計有了很深的瞭解，經過我對是習題的書寫，我對格式化文字與段落、列表、超連結、影象與媒體檔案、CSS基礎、DIV、CSS樣式屬性、表格、框架、表單有個更深入的瞭解。