捕鱼机打鱼犯法吗

書名： HTML5+CSS3+jQuery Mobile APP與移動網站設計從入門到精通
作者名：新視角文化行
本章字數： 1982字
更新時間： 2019-10-23 16:45:08

1.3 HTML文件的編寫方式

網頁文件即擴展名為htm或html的文件，本質上是文本類型的文件，網頁中的圖片、動畫等資源是通過網頁文件的HTML代碼鏈接的，與網頁文件分開存儲。

由于HTML語言編寫的文件是標準的ASCII文本文件，因此可以使用任意一種文本編輯器來打開或編輯。例如，Windows操作系統中自帶的記事本或者專業的網頁制作軟件Dreamweaver。

1.3.1 使用記事本編寫

HTML是一個以文字為基礎的語言，并不需要什么特殊的開發環境，可以直接在Windows操作系統自帶的記事本中進行編輯，其優點是方便快捷，缺點是無任何語法提示、無行號提示和格式混亂等，初學者使用困難。

實戰使用記事本制作HTML頁面

最終文件：最終文件\第1章\1-3-1.html　視頻：視頻\第1章\1-3-1.mp4

01 在Windows操作系統中執行“開始>所有程序>附件>記事本”命令，打開記事本窗口，如圖1-1所示。在記事本中按正確的文檔結構編寫HTML頁面代碼，如圖1-2所示。

圖1-1　打開記事本窗口

圖1-2　編寫HTML代碼

02 所編寫的完整的頁面HTML代碼如下。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>在記事本中編寫HTML頁面</title>
</head>
<body>
<img src="images/1301.jpg" width="100%" height="auto">
</body>
</html>

提示

此處所編寫的HTML頁面代碼非常簡單，主要在頭部的<title>與</title>標簽之間輸入網頁的標題，在頁面主體內容<body>與</body>標簽之間使用<img>標簽插入一張圖片，并且添加了圖片寬度和高度屬性的設置。

03 執行“文件>另存為”命令，將會彈出“另存為”對話框，將文件保存為“源文件\第1章\1-3-1.html”，如圖1-3所示。單擊“保存”按鈕，即可將用記事本編寫的HTML代碼保存為網頁文件，在瀏覽器中預覽該網頁文件，可以看到網頁的效果，如圖1-4所示。

圖1-3　“另存為”對話框

圖1-4　在瀏覽器中預覽HTML頁面

提示

在將記事本中編寫的HTML代碼保存為網頁html格式時，需要注意“編碼”選項的設置。默認情況下，需要將“編碼”設置為UTF-8，否則，網頁中的中文在瀏覽器中可能會顯示為亂碼。

1.3.2 使用Dreamweaver編寫

Dreamweaver是網頁制作的主流軟件，其優點是有所見即所得的設計視圖，能夠通過鼠標指針拖放直接創建并編輯網頁文件，自動生成相應的HTML代碼。Dreamweaver的代碼視圖有非常完善的語法自動提示、自動完成和關鍵詞高亮等功能。可以說，Dreamweaver是一個非常全面的網頁制作工具，圖1-5所示為Dreamweaver軟件的工作界面。

圖1-5　Dreamweaver工作界面

1. 菜單欄

菜單欄中包含了所有Dreamweaver CC操作所需要的命令。這些命令按照操作類別分為“文件”“編輯”“查看”“插入”“修改”“格式”“命令”“站點”“窗口”和“幫助”10個菜單。

2. 文檔工具欄

文檔工具欄包含一些按鈕，它們提供各種“文檔”窗口視圖（如“設計”視圖和“代碼”視圖）的選項、各種查看選項和一些常用操作（如單擊“實時視圖”按鈕可以將設計視圖切換到實時視圖）。

3. 代碼視圖

該窗口將顯示當前所編輯頁面的相應代碼，在代碼窗口左側是相應的代碼工具，通過使用這些工具，可以在代碼中插入注釋，簡化代碼操作。

4. 設計視圖

該窗口顯示當前所制作頁面的效果，也是可視化操作的窗口，可以在該窗口中使用各種工具實現輸入文字、插入圖像等，是所見即所得的視圖。

5. 標簽選擇器

標簽選擇器位于“文檔”窗口底部的狀態欄左側，可顯示當前選定內容的標簽的層次結構。單擊該層次結構中的任何標簽可以選擇該標簽及其全部內容。

6. “屬性”面板

用于查看和更改所選對象或文本的各種屬性。選中不同的對象，在“屬性”面板中會顯示不同的內容。

7. 面板組

用于幫助用戶完成監控和修改工作，如“插入”面板、“CSS設計器”面板。雙擊相應的選項卡，可以折疊或展開當前選項卡。

在Dreamweaver的代碼視圖中會以不同的顏色顯示HTML代碼，幫助用戶區分各種標簽，同時用戶也可以自己指定標簽或代碼的顯示顏色。總體看來，代碼視圖更像是一個常規的文本編輯器，只要單擊代碼的任意位置，就可以開始添加或修改代碼了，通過代碼視圖工具能夠非常方便地對HTML代碼進行編輯和調整，如圖1-6所示。

圖1-6

實戰使用Dreamweaver制作HTML頁面

最終文件：最終文件\第1章\1-3-2.html　視頻：視頻\第1章\1-3-2.mp4

01 打開Dreamweaver，執行“文件>新建”命令，將會彈出“新建文檔”對話框，選擇HTML選項，如圖1-7所示。單擊“創建”按鈕，新建HTML5文檔，轉換到代碼視圖中，可以看到文檔的HTML代碼，如圖1-8所示。

圖1-7　“新建文檔”對話框

圖1-8　網頁HTML代碼

02 執行“文件>保存”命令，將會彈出“另存為”對話框，將該網頁保存為“源文件\第1章\1-3-2.html”，如圖1-9所示。在頁面的<title>與</title>標簽之間輸入網頁的標題，如圖1-10所示。

圖1-9　“另存為”對話框

圖1-10　輸入網頁標題

03 在<body>標簽中添加style屬性設置代碼，如圖1-11所示。在<body>與</body>標簽之間編寫相應的網頁正文內容代碼，如圖1-12所示。

圖1-11　添加style屬性設置

圖1-12　編寫頁面正文內容

提示

在<body>標簽中添加style屬性設置，實際上是CSS樣式的一種使用方式，稱為內聯CSS樣式。此處通過內聯CSS樣式設置頁面整體的背景顏色、水平對齊方式、文字顏色和頂部邊距。

04 完成該網頁HTML代碼的編寫，完整的HTML代碼如下。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用Dreamweaver制作HTML頁面</title>
</head>
<body style="background-color:#06F; text-align:center; color:#FFF;margin-top:200px;">
<img src="images/1302.png" width="400" height="332" alt="">
<br><br>
<b>歡迎光臨我們的網站>></b>
</body>
</html>

05 執行“文件>保存”命令，保存網頁，在瀏覽器中預覽該網頁，可以看到網頁的效果，如圖1-13所示。

圖1-13　在瀏覽器中預覽頁面

提示

Dreamweaver是一款專業的網頁制作軟件，在Dreamweaver中新建HTML頁面，會自動給出HTML文檔結構的基礎代碼，編寫HTML代碼還具有代碼提示等功能，非常適合初學者使用。

官术网_书友最值得收藏!

HTML5+CSS3+jQuery Mobile APP與移動網站設計從入門到精通

1.3 HTML文件的編寫方式

1.3.1 使用記事本編寫

1.3.2 使用Dreamweaver編寫