只針對完全沒有接觸過網(wǎng)頁制作的想學(xué)習(xí)網(wǎng)頁制作的新手朋友。所以就以最簡單的文字加圖片為內(nèi)容的網(wǎng)頁來舉例。希望通過最簡單的東西，讓你了解到一個網(wǎng)頁的制作過程，從而延伸到復(fù)雜的網(wǎng)頁設(shè)計做好準(zhǔn)備。什么事都是從簡單到復(fù)雜。
Only to no contact with web page made want to learn to make new friends. So in the most simple words and pictures for the content of the web page for example. Hope that through the most simple things, let you know that the process of making a web page to extend to prepare complex web design. Everything from simple to complex.
代碼編輯器：UE32，Editeplus、notepad++等
Code editor: UE32, Editeplus, notepad + +, etc
IDE編輯器：Dreavweave
IDE editor: Dreavweave
平面制作軟件：
Print production software:
photoshop
photoshop
fireworks
fireworks
illustrator
illustrator
先確認(rèn)你的系統(tǒng)中文件擴展名已經(jīng)打開。方法是：打開我的電腦，點擊文件夾選項，打開文件夾選項對話框，確保“隱藏已知文件的擴展名”前面的小勾已經(jīng)去掉，如果沒有去掉，請把小勾去掉。
Make sure your file extensions already open in the system. Method is: open my computer, click on the folder options, open the folder options dialog, make sure that "hide file extensions known" in front of the small hook has removed, if you don't take out, please remove the small hook.
創(chuàng)建你的第一個網(wǎng)頁文件。為了便于管理，請先創(chuàng)建一個文件夾，用來存放你的網(wǎng)頁文件和圖片等資料。在你創(chuàng)建的文件夾中右擊，選擇新建，文本文件：
Create your first web page file. In order to facilitate management, please create a folder, file used to store your web pages and images, etc. In the right-click, you create a folder and choose new text file:
對這個文件重命名為index,把小點后面的txt改為html。這樣一個網(wǎng)頁文件就準(zhǔn)備好了。
Rename the file, index, the bit at the back of the TXT to HTML. Such a web page file will be ready.
html是網(wǎng)頁文件的擴展名。擴展名用來區(qū)分文件的類型，擴展名也用來告訴用哪個軟件打開。比如html就會告訴瀏覽器這是一個網(wǎng)頁，需要用網(wǎng)頁的方式來解析并顯示。
HTML is the web page file extension. Extension used to distinguish the file type, extensions are also used to tell with which software to open. Such as HTML would tell this is a web browser, the need to parse and display the page.
用notepad++打開這個index.html文件
Use notepad + + open this index. The HTML file
在編寫之前，我們有必要先來了解一下一個網(wǎng)頁最基本的結(jié)構(gòu)：網(wǎng)頁有頭部和主體兩大部分組成。頭部和主體都包含在一對標(biāo)簽之內(nèi)。因為網(wǎng)頁是html語言編寫的，html語言是一門標(biāo)記語言，就是用一對對的標(biāo)簽來標(biāo)記網(wǎng)頁中的內(nèi)容，從而對內(nèi)容進(jìn)行組織和管理。
Before writing, it is necessary for us to know about the first of a web page is the most basic structure: web page consists of the head and body of two parts. The head and body are included within a pair of < HTML > tag. Because web page is written in HTML language, HTML is a markup language, is to use the pairs of tags to mark the page content, to organize and manage the content.
標(biāo)簽就是網(wǎng)頁中內(nèi)容的容器。
Container labels is the web page content.
每個網(wǎng)頁都有頭部和主體。
Each page has the head and body.
如下圖所示，整體的最外層標(biāo)簽是和,頭部是和標(biāo)簽。在標(biāo)簽中，又可以寫
(標(biāo)題)等標(biāo)簽。而<head>標(biāo)簽內(nèi)的內(nèi)容一般是不會顯示在瀏覽器窗口中的。顯示在瀏覽器窗口給我們看的內(nèi)容，都在<body></body>標(biāo)簽里。
As shown in the figure below, the outermost layers of the whole tag is < HTML > and < / HTML >, the head is the < head > and < / head > tag. In the < head > tag, and can write the < title > tag (title). Inside the < head > tag of the content is generally not be displayed in the browser window. Displayed in the browser window for us, the contents of the < body > < / body > tag.
了解了網(wǎng)頁的基本結(jié)構(gòu)，我們就開始來寫一段完整的網(wǎng)頁代碼 ：
Understand the basic structure of web pages, we began to write a complete web page code:
<html>
< HTML >
<head>
The < head >
<title>這是網(wǎng)頁的標(biāo)題 The < title > this is the title of the page < / title >
The < / head >
The < body >
這是一個一級標(biāo)題
< h1 > this is a primary title < / h1 >
這是一個段落
< p > this is a paragraph < / p >
The < / body >
The < / HTML >
在notepad++中編輯的情景如下：
In the notepad + + editor scenario is as follows:
保存之后我們在瀏覽器中預(yù)覽，效果如下圖。上面我們說過，標(biāo)簽里的內(nèi)容不會顯示在瀏覽器中，但是我們在中寫了一句：
這是網(wǎng)頁的標(biāo)題，如果你細(xì)心就會發(fā)現(xiàn)，在瀏覽器的標(biāo)簽選項卡上顯示了“這是網(wǎng)頁的標(biāo)題”這幾個字。
Save after we in the browser preview, the effect is the diagram below. We have said above, the content in the < head > tags will not display in the browser, but we write in the < head >, < title > this is the title of the page < / title >, if you carefully will find that, in the browser's tags TAB shows the words "this is the title of the page".
原來網(wǎng)頁標(biāo)題就是顯示在瀏覽器標(biāo)題欄上的內(nèi)容。網(wǎng)頁的標(biāo)題不等于內(nèi)容的標(biāo)題，于是我們寫的
這是一個一級標(biāo)題
，它被顯示在瀏覽器窗口中。
The page title is displayed in the browser the content on the title bar. The title of the page is not equal to the title of the content, so we write the < h1 > title < / h1 > this is a level, it is displayed in the browser window.
