個人網頁設計教程_怎樣製作個人網頁有教程簡單點

1、需要一份html教程的網頁製作，主題是我的個人網頁，

這是我在大學學的知識
給你借鑒一下，希望對你有幫助
網頁設計教程
<html>文字操作（一）
1、段落 <p>……</p>
在dreamweaver設計界面中，enter（回車）即為另起一段。
2、換行 <br/>
在dreamweaver設計界面中，shift+enter即為另起一段。
3、標題1~6 <h1>……</h1>
標題1最大，依次變小。
4、空格:
Dreamweaver 只允許一次空格，如果需要使用連續空格，則需要設置，或使用；
或使用快捷鍵：ctrl+shift+space（空格鍵）
5、水平線 <hr>
size:水平線的粗細
width:長度
align:對齊方式
<htlm>文字操作（二）
一、幾個文字特殊效果
1、加粗<b></b> <strong></strong>
2、傾斜<i></i> <em></em>
3、上標<sup></sup>（適合用代碼來實現，設計中無法完成）
4、下標<sub></sub>（適合用代碼來實現，設計中無法完成）
隨著css的逐漸普及，文字的效果都更多的通過css來實現，以上的幾個標簽作為了解即可。
二、文字列表
1、無序列表
無序列表有兩個標簽<ul>和<li>
<ul>
<li>CSS教程</li>
<li>DOM教程</li>
<li>XML教程</li>
<li>Flash教程</li>
</ul>
2、有序列表
有序列表有兩個標簽<ol>和<li>
<ol>
<li>CSS教程</li>
<li>DOM教程</li>
<li>XML教程</li>
<li>Flash教程</li>
</ol>
圖片
一、如何獲取圖像
最好的途徑是通過互聯網
二、使用設計界面插入圖像
1、菜單（一個圖片屬性：替換文字）
2、工具欄
3、拖曳
三、圖像格式擴展閱讀：
http://blog.sina.com.cn/s/blog_45ac0d0a010005d8.html
JPEG圖像、GIF圖像、PNG圖像

四、代碼
<img src=" " width=" " height=" " alt=" "/>

一、超級鏈接的基本知識
1、含義：實現網頁之間的跳轉和聯系
2、分類：
絕對鏈接 http://www.baidu.com
相對鏈接在同一站點不同位置之間的鏈接
二、三種常見的超級鏈接
1、文字鏈接<a href="http://www.baidu.com">百度</a>
2、圖像鏈接
3、圖像熱點鏈接
===============
還有不是太常用的鏈接
1、空連接 <a href="#">空連接</a>
2、錨鏈接:在同一頁面的不同位置跳轉
三、鏈接的屬性
鏈接目標 <a href="http://www.baidu.com" target="_blank">百度</a>

表單設計
一、設計界面
1、單元格間距
2、單元格邊距
二、代碼
1、從屬關系：表格由行組成，行由單元格組成。
表格：<table>……</table>
行：<tr>……</tr>
單元格：<td>……</td>
2、<table>標簽的屬性
bgcolor:背景色
cellspacing:表格的單元格間距（間距）
cellpadding:表格的單元格邊距（填充）
文字占據一行<div></div>
文字不佔據一行<span></span>
、html引入css的幾種方法
1、鏈接式
將css代碼寫在一個獨立的文件中，文件的擴展名為.css。然後在html網頁中使用<link/>標簽將外部css文件放在<head></head>之間。舉例：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<link href="tp.css" rel="stylesheet" type="text/css">
</head>
2、嵌入式
將Css代碼寫在<head></head>之間，並且用<style></style>包含起來，如果考慮到兼容性，可以再使用 將css代碼包含其中。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">

</style>
</head>
1．標簽選擇器：
就是網頁元素本身，所有的XHTML框架中的標簽都可以作為CSS樣式的選擇器，如定義段落樣式，我們可以選擇P標簽的名稱，即把P作為選擇器。P{/*定義段落屬性*/}。如果定義了標簽樣式，則整個網頁中使用了該標簽都會應用這個樣式。一般應用在統一文檔的某個元素的顯示樣式中。
2．ID選擇器：
它是唯一的，網頁中不同的元素它的ID是不一樣的。而且一個元素它只能應用一個ID。因為如果我們使用Javascript來控制網頁元素的時候它是通過ID來實現的，在這種情況下就無法正常工作了。它在定義的時候用#開始，它在應用的時候用id=」」。它的名稱由設計者來確定。
3．類選擇：
它的名稱也是由設計者來確定的，它在定義的時候用點號開始，應用的時候用class=「」；它與ID選擇器所不同的是它具有一對多的特性而ID是一對一的特性。也就是說一個類選擇器它可以應用到多個網頁元素中而且一個元素可以應用多個類，一個元素也可以應用兩個類樣式，中間用空格分開，但不能是三個或者更多。在同等條件下，ID具有比class更高的優先權。
1、復雜類選擇器
p.one{color:red}
實例：
<style>
.one{color:red;}
p.two{color:blue;}
</style>
.one可以用於各種標簽；而。two只能用於p標簽。
2、後代選擇器
div p{color:#00FF00}
例子：
<div>
<h1>這是一個標題。</h1>
<p>我是一個兵。</p>
</div>
3、組合選擇器（集體聲明）
p，h1，.one{color:red}
4、通用選擇器
對html文檔的所有元素進行控制。
*{color：red；}
5、偽類選擇器
a:link;hover;visited;active
或者：a.one:link;a#two:link
當用css定義鏈接的各種狀態時，一定要注意其書寫順序，即：:link :visited :hover :active。
如果不按照該順序書寫可能無法達到自己希望的效果。
一、屬性
1.大小 font-size
大小就是字型大小，可以直接填入數字，然後選擇單位。
2.樣式
font-style
設置文字的外觀，包括正常、斜體、偏斜體。
3.行高 line-height
這項設置在網頁製作種很常用。設置行高，可以選擇「正常」，讓計算機自動調整行高，也可以使用數值和單位結合的形式自行設置。需要注意的是，單位應該和文字的單位一致，行高的數值是包括字型大小數值在內的。例如，文字設置為12pt，如果要創建一倍行距，則行高應該為24pt。
4.修飾 font-decoration
文本的特殊樣式：上下劃線、刪除線、閃爍（IE不支持此效果）
5.粗細 font-weight
設置文字的加粗還是變細的效果。
6.顏色 color
設置文字的色彩。
顏色的表示方法常見的有RGB模式、十六進制模式和名稱模式。
7.字體 font-family
設置文字的字體，注意多個字體的選擇。
8.文本對齊 text-align
設置文本的水平對齊方式。這里也不僅僅局限於文字，泛指所包含的內容。
9.文字縮進 text-indent
這是最重要的項目。中文文字的首行縮進就是由它來實現的。首先填入具體的數值，然後選擇單位。文字的縮進和字型大小要保持統一。如字型大小為12px，像創建兩個中文自的縮進效果，文字縮進就應該為18px。
二、屬性值：css中的單位
1、大小單位：px和em
2、顏色單位：red和#00ff00
三、css背景
1、背景色：background-color: （5-1）
2、背景圖片：background-image:url(^);（5-3）
3、背景圖片的重復方式：background-repeat：（5-5）
4、背景圖片的位置：background-position：top right；（30% 70%;水平位置垂直位置）(300px 30px;)（5-8）
5、背景圖片的固定與否：background-attachment：scroll；（fixed；）背景是否與網頁內容一起滾動。（5-10）
fixed：背景不動，內容動；scroll：背景和內容一起滾動
6、背景圖片的綜合樣式：background：blue url(……) no-repeat fixed 5px 10px;
7、列表樣式：list-style：

2、求個人網頁現成模板，製作教程

不建議使用FrontPage，這個軟體是很多年以前的，微軟都已經停止開發和支持這個軟體了

建議使用Dreamweaver，這個是現在最流行的網頁設計軟體，幾乎都用的這個軟體來做網頁的

關於您要的個人網頁模板，這個網上和多，您可以到站長站去下載，或者直接百度網頁搜索html模板。

下載模板後倒入Dreamweaver，點擊窗口拆分，就可以所見所得修改學習了

例如這樣的模板，您可以直接在dw裡面進行編輯哦

Dreamweaver的相關圖文或視頻教程也很多的，您搜索關鍵詞就可以找到很多

夢客吧織夢模板為您解答

望採納謝謝

3、怎麼製作網頁教程

先從最簡單的 HTML 網頁入手；選擇 Dreamweaver 4.0MX Fireworks 4.0 MX Flash 5.0 MX 俗稱三劍客網頁工具。圖象還須 Photoshop 等作為你的網頁製作工具；製作前，粗略地閱讀 Dreamweaver Fireworks 及 Photoshop 教程，了解這幾個軟體到底能做些什麼；製作你的第一個實驗性的網站。資料網上也有的是，如果遇到問題難以解決，請將問題提出，讓更多高手為你解答。

初級階段：應初步掌握三劍客網頁工具的基本操作：策劃和製作你的第一個網站；不斷為你的網站增加內容與功能（例如嘗試將一些 Java Script 小程序添加到你的網頁中）。如果對網頁代碼建站這些知識不太懂，系統的了解跟學習的話，來這個群一起來學習。這個的第一組數字為431，第二組數字為011，第三組數字為879。就是這三組結合起來就可以找到我們了。來到這里每天都有網頁建站方面的課程。互聯網社會，懂技術才是王道，走到哪裡都不用怕。

進階階段：具有一定的網頁製作經驗，製作一般的網頁已經不在話下：根據個人喜好及實際需要，網頁製作的方向，你可以學習一些美術方面的知識；鍛煉自己在網站策劃及信息采輯的技能；嘗試製作其他不同類型的網站，從模仿別人開始，逐漸形成自己的設計風格；熟練操作三劍客網頁工具，並至少能讀懂 HTML 及 JavaScript的簡單語言。好了！這樣，你的網頁製作水平就離高手就不遠了。祝你成功！

然後下面跟你說一下建站的知識。
一、首先，你要為你的網站想一個網址，這個網址必須是未被注冊的。這個網址就是你的網站的入口，最好便於記憶，越短越好。或者以與網站有對應意義的拼音全稱或者簡寫。網站的域名後綴也是我們自己可選的（只要沒有被注冊），常見的域名後綴有.com 、.cn、.com.cn 、.org等。一般建議選擇實力較強的域名提供商。這些知名服務商雖然收費稍微貴一點，但是很穩定。

二、空間伺服器。空間是用來放網站程序文件的，就跟電腦上的磁碟沒什麼兩樣，只不過是放在空間商那裡，24小時聯網。你自己電腦都可以做伺服器，這個沒有什麼神奇的。買空間要根據建站需要，包括使用什麼語言，是否需要資料庫等。建議購買前咨詢空間商客服。

三、網站程序。網站程序是實現網站所有功能的編程語言的集合。目前比較流行的php+mysql ，也有用java、.net 開發的。
大型的商城或門戶需要團隊開發。個人建論壇可以用騰訊的DISCUZ！論壇程序，建博客可以用wordpress或者Z-blog程序。這些開源的建站程序讓做網站就像裝程序一樣簡單。

四、把程序上傳到空間伺服器。程序編寫完成經過調試後，用FTP工具上傳到空間。FTP工具有flashfpt ,8ufpt 。上傳之前你必須已經買好空間了（知道FTP用戶、密碼信息）

五、程序上傳完成後。把域名解析，空間域名綁定，就可以通過網站訪問了。

網頁建站其實是不難的，不過很多新手一開始就有很多具體明確的，有難度的設想，所以才顯得難了。
你首先要明白自己能做什麼，做不了什麼。建議從純靜態的網頁製作學起，這樣壓力不會太大。當你對網頁的HTML代碼都差不多了解的時候，就會感覺輕松很多。不需要程序，建站都有很多開源的程序。不管學什麼都需要用心，都需要執行力。如果你都有，學起來很快。

4、新手建網站教程網站建立怎樣自己製作網頁簡單的

新手建網站，可以是靜態網站，也可以是wordpress之類的動態網站。

一般搭建wordpress網站比較多，搭建過程也不難。

先買好域名和雲伺服器，然後把域名解析到雲伺服器。

再通過手動配置伺服器環境安裝wordpress，或者通過一鍵安裝寶塔面板，再在寶塔後台一鍵部署wordpress就可以了。

參見新手教程：雲伺服器建立個人網站（寶塔面板+wordpress）

5、怎樣製作個人網頁，有教程，簡單點。

具體步驟如下：

1、打開伺服器中網站文件的目錄，假設為D:abcd。

2、新建一個txt文件，文件名改為index.htm。index.htm文件是網站首頁的鏈接，進入你的網站後第一個顯示的就是這個文件上的內容。然後右鍵index.htm—>打開方式—>記事本。

3、現在可以添加html代碼，使得網頁顯示文本。<p></p>是html中段落的標簽，<p>是開始符，</p>是結束符，兩個符號之間的字會顯示在網頁上。在index.htm中添加一行：<p>聲明：這是一個個人網站，網頁里的內容均為站主原創，請勿用於違法行為。</p>；下圖為效果截圖。

4、還可以為網頁添加圖片，圖片的標簽是<img>。假設圖片文件的路徑為D:abcdpic123.jpg，則在index.htm中添加一行：<img src=pic/123.jpg>。下圖為效果截圖。

5、添加鏈接的標簽是<a></a>。在index.htm中添加一行：<a href="https://www.baidu.com">百度，前面是鏈接，這里是顯示的字。</a>下圖為效果截圖，點開藍字，則會跳轉到"百度一下"。

6、完成上述步驟後，即可製作個人網頁。

6、求幾個適合剛從事工作的新手看的網頁設計教程網站或者交流網站

其實網頁設計最重要的是練習設計感，而練習之前首要的任務就是多看一些優秀的作品來引導你的設計思路，站酷中其實也並非全部都是好作品，這只是一個設計師的交流網站，好的壞的作品都會有人上傳，所以你就盡量多看一些好的作品唄，開始就先以模仿為主，而模仿的過程中重點是多做，只有你多多製作才能達到練習的目的；
而學習網頁設計代碼方面（div+css），從我個人角度來說，新手從基礎開始學習並沒有什麼不好，反而基礎會更扎實，但是學習周期會比較長，我個人比較推薦新手了解了一些基本知識之後就直接去看優秀的網頁代碼，而不是自己學一點做一點，我以前自己學習的時候就是直接找一些好的網頁模板進行修改成我設計的界面，前提是我設計的界面布局要跟模板差不多，這樣我就通過各個部分的修改來了解之前各個布局及樣式的意思和作用，有一些不懂的地方就去百度找答案，當把一個模板完全改成自己的界面的時候，網頁設計估計也能初步掌握了，然後自己再半參考性的自己獨立寫代碼，這樣學習的速度是比較快的；
很多人都說學習東西興趣比較重要，但是要有興趣的前提是你必須要搞明白那是什麼東西，很多人搞不懂才會覺得沒興趣，腦子里沒有一個認知思維當然學不會，小時候我們上學也就是這樣一個道理；
我給你推薦一個自學網站和設計網站，希望能幫到你
http://www.divcss5.com/
http://www.uimaker.com/
http://www.lanrentuku.com/

最後給你一個建議，你學習設計的風格建議你往歐美風格走，像網上的一些韓國模板雖然可以參考，但是我個人覺得大部分的韓國模板都不太實用，姑且看看就好，如果你覺得有地方可以借鑒也行，當然，我這里只是建議，別被我的話束縛了思維

導航:首頁 > 萬維百科 > 個人網頁設計教程

個人網頁設計教程

與個人網頁設計教程相關的知識