只針對(duì)完全沒有接觸過網(wǎng)頁(yè)制作的想學(xué)習(xí)網(wǎng)頁(yè)制作的新手朋友。所以就以最簡(jiǎn)單的文字加圖片為內(nèi)容的網(wǎng)頁(yè)來舉例。希望通過最簡(jiǎn)單的東西，讓你了解到一個(gè)網(wǎng)頁(yè)的制作過程，從而延伸到復(fù)雜的網(wǎng)頁(yè)設(shè)計(jì)做好準(zhǔn)備。什么事都是從簡(jiǎ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)中文件擴(kuò)展名已經(jīng)打開。方法是：打開我的電腦，點(diǎn)擊文件夾選項(xiàng)，打開文件夾選項(xiàng)對(duì)話框，確?！半[藏已知文件的擴(kuò)展名”前面的小勾已經(jīng)去掉，如果沒有去掉，請(qǐ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)建你的第一個(gè)網(wǎng)頁(yè)文件。為了便于管理，請(qǐng)先創(chuàng)建一個(gè)文件夾，用來存放你的網(wǎng)頁(yè)文件和圖片等資料。在你創(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:
對(duì)這個(gè)文件重命名為index,把小點(diǎn)后面的txt改為html。這樣一個(gè)網(wǎng)頁(yè)文件就準(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)頁(yè)文件的擴(kuò)展名。擴(kuò)展名用來區(qū)分文件的類型，擴(kuò)展名也用來告訴用哪個(gè)軟件打開。比如html就會(huì)告訴瀏覽器這是一個(gè)網(wǎng)頁(yè)，需要用網(wǎng)頁(yè)的方式來解析并顯示。
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++打開這個(gè)index.html文件
Use notepad + + open this index. The HTML file
在編寫之前，我們有必要先來了解一下一個(gè)網(wǎng)頁(yè)最基本的結(jié)構(gòu)：網(wǎng)頁(yè)有頭部和主體兩大部分組成。頭部和主體都包含在一對(duì)標(biāo)簽之內(nèi)。因?yàn)榫W(wǎng)頁(yè)是html語(yǔ)言編寫的，html語(yǔ)言是一門標(biāo)記語(yǔ)言，就是用一對(duì)對(duì)的標(biāo)簽來標(biāo)記網(wǎng)頁(yè)中的內(nèi)容，從而對(duì)內(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)頁(yè)中內(nèi)容的容器。
Container labels is the web page content.
每個(gè)網(wǎng)頁(yè)都有頭部和主體。
Each page has the head and body.
如下圖所示，整體的最外層標(biāo)簽是和,頭部是和標(biāo)簽。在標(biāo)簽中，又可以寫
(標(biāo)題)等標(biāo)簽。而<head>標(biāo)簽內(nèi)的內(nèi)容一般是不會(huì)顯示在瀏覽器窗口中的。顯示在瀏覽器窗口給我們看的內(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)頁(yè)的基本結(jié)構(gòu)，我們就開始來寫一段完整的網(wǎng)頁(yè)代碼 ：
Understand the basic structure of web pages, we began to write a complete web page code:
<html>
< HTML >
<head>
The < head >
<title>這是網(wǎng)頁(yè)的標(biāo)題 The < title > this is the title of the page < / title >
The < / head >
The < body >
這是一個(gè)一級(jí)標(biāo)題
< h1 > this is a primary title < / h1 >
這是一個(gè)段落
< p > this is a paragraph < / p >
The < / body >
The < / HTML >
在notepad++中編輯的情景如下：
In the notepad + + editor scenario is as follows:
保存之后我們?cè)跒g覽器中預(yù)覽，效果如下圖。上面我們說過，標(biāo)簽里的內(nèi)容不會(huì)顯示在瀏覽器中，但是我們?cè)谥袑懥艘痪洌?title>這是網(wǎng)頁(yè)的標(biāo)題，如果你細(xì)心就會(huì)發(fā)現(xiàn)，在瀏覽器的標(biāo)簽選項(xiàng)卡上顯示了“這是網(wǎng)頁(yè)的標(biāo)題”這幾個(gè)字。
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)頁(yè)標(biāo)題就是顯示在瀏覽器標(biāo)題欄上的內(nèi)容。網(wǎng)頁(yè)的標(biāo)題不等于內(nèi)容的標(biāo)題，于是我們寫的
這是一個(gè)一級(jí)標(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.
