當前位置:首頁 » 網站資訊 » 個人網站樣式怎麼寫
擴展閱讀
乘飛機平板電腦能拖運嗎 2025-05-20 00:16:01

個人網站樣式怎麼寫

發布時間: 2022-08-27 18:55:39

如何製作個人網站

1 策劃與草圖
2 設計與製做
3 切割與導出
4 編輯與模板
5 動畫與廣告
6 鏈接與上傳

按軟體及長度劃分製做步驟:
1 策劃與草圖
1.1所有網站和其它設計作品的過程都是從策劃開始的。這是最能體現你的才華和創造力的地方。人最大的區別於其它動物的地方就是會思考,會創造,而且唯有這點是難能可貴的!我們必須要在動手打開PS或FW製做界面前就要完成一個網站最最關鍵的策劃部分,它將直接影響
這個網站的成敗與否。一個優秀的網站,不僅做得漂亮,而且要方便瀏覽,可讀性強,簡潔明快!
網站的風格,用色,版式,布局,欄目甚至每個細小的圖標都要經過精雕細琢,深思熟慮。而風格的制定要取決於你所做網站的瀏覽人群和讀者職業背景、文化程度和修養愛好等,只有投其所好才能最大化地產生共鳴;另一方面取決於公司的類型和企業法人的喜好,如果不是要強加入你自己的意志的話,那上述幾點已經制定了網站大致的努力方向了!
1.2本站是商業化的網站面向企業為主,所以我採用簡約風格,亮麗明快的顏色和風格,只要學學平面構成和色彩構成就知道如何按其風格去布置各個元素和內容,以及用何種顏色來營造你要表達的效果了,包括冷暖明暗都是很關鍵的。大面積的中性色不刺眼,而重要的引導視線可以讓亮色來擔當,冬天喜歡暖色夏天喜歡冷色是人之常情,藍色那種給人以信任和科技的底韻是我選擇它的原因,而像橙、黃等促進食慾的顏色更容易受到食品網站的青睞!

1.3本著簡潔科學的分類原則來劃分欄目:首頁 客戶中心 窄告介紹 合作媒體 常見問題 媒體報道 關於我們
欄目如果劃分不好的話,影響框架的調整,後果就是:重頭再來了,郁悶吧?
本網站主要面向濰坊企業,所以要做得本地化,讓人看了感覺親切,而且要做得漂亮,廢話!!
1.4好了,完成上面這些後請拿起筆在紙上按你的創意和設想畫一草圖,盡是具體些,最好精細到每處陰影和描邊!這步很關鍵的說!
1.5本節最後就是准備製做網站時所需要的素材了,包括圖標,LOGO,廣告語,內容介紹等這都是最基本的!

2 設計與製做
2.1如果草圖都已經繪制完美後就可以打開PS或FW開工製做和設計我們的界面了,在這里我使用PS,雖然沒有FW的高效和專業但更加靈活和自由,這是我最喜歡的,也因為用慣了嘛!^^養兵千日用兵一時,平時的練習和學習在這里派上用場了!呵呵!
2.2可以在新建的778*600頁面中先打框架然後再採用逐步細化的方法,還可以採用你自己獨特的手法,比如透明玻璃水晶按鈕等效果來營造特別的風格,要力求簡約和精緻!不要放過每個細節的刻畫,即使是1*1的5%透明度的陰影都會給你的頁面增彩,別以為別人看不見!
2.3最好養成分層的習慣,這樣可以方便分類和編輯,不至於把上百個圖層放在一下層級里搞得一團亂麻,分不清楚。
作為一名優秀的設計師應該有條理,所以請養成分類並為每個圖層命名的習慣,這決不是浪費你的時間!

3 切割與導出
無論是PS還是FW,哪怕是AI做的設計界面,在切割的原則都是一樣的,請遵從以下幾個方面:
3.1首先要按大致的框架切割,如國字型或T字型,注意其完整性
3.2對於要輸入的文字區域、大面積色塊或單獨的圖片以及Flash動畫要單獨切割成非圖片格式的切片以備插入
3.3對於添加內容需要很長的區域要注意其伸縮性切割,若有圖案要保證可以重復排列
3.4在切割時要特別認真和小心,不要空留一行或列的一個象素的間隙,要放大讓切片都對齊,不留空隙
3.5其它如按鈕和空白處等自動生成的切片,以及創建需要改變圖片外觀的切片等
切割完畢後,選擇文件另存為WEB頁命令,導出為HTML文件待DW編輯。

4 編輯與模板
4.1在DW中打開導出的HTML文件開始編輯,包括大表格居中,設置背景,修改空白可輸入區單元格背景為原來切割的圖片等
4.2將編輯完畢的文件添加CSS樣式,包括最基本的TD和ALINK等標簽,然後存為模板DWT文件,並^+alt+v新建可編輯區域
4.3通過模板新建各個頁面並添加入相應的內容

5 動畫與廣告
5.1按原來切片所容留的大小製做FL動畫廣告條,使用相應的文字內容和廣告語,在FL中新建文件
5.2復制粘貼廣告詞到場景中,排版並轉換為元件578*104
5.3添加相應的背景和動畫,調試節奏後發布為SWF文件
5.4插入到DW中的模板頁並調整大小後存檔,其它的頁面會自動更新

6 鏈接與上傳
6.1重新設置模板頁的導航鏈接,本步驟也可在第四節完成
6.2在本地打開首頁檢查鏈接與文字內容直到無錯,確保鏈接可正常訪問
6.3上傳到申請的空間,在域名解析成功後在瀏覽器中瀏覽網上的效果並做相應後期維護!

Ⅱ 如何自己製作個人網站

1 策劃與草圖
2 設計與製做
3 切割與導出
4 編輯與模板
5 動畫與廣告
6 鏈接與上傳

按軟體及長度劃分製做步驟:
1 策劃與草圖
1.1所有網站和其它設計作品的過程都是從策劃開始的。這是最能體現你的才華和創造力的地方。人最大的區別於其它動物的地方就是會思考,會創造,而且唯有這點是難能可貴的!我們必須要在動手打開PS或FW製做界面前就要完成一個網站最最關鍵的策劃部分,它將直接影響
這個網站的成敗與否。一個優秀的網站,不僅做得漂亮,而且要方便瀏覽,可讀性強,簡潔明快!
網站的風格,用色,版式,布局,欄目甚至每個細小的圖標都要經過精雕細琢,深思熟慮。而風格的制定要取決於你所做網站的瀏覽人群和讀者職業背景、文化程度和修養愛好等,只有投其所好才能最大化地產生共鳴;另一方面取決於公司的類型和企業法人的喜好,如果不是要強加入你自己的意志的話,那上述幾點已經制定了網站大致的努力方向了!
1.2本站是商業化的網站面向企業為主,所以我採用簡約風格,亮麗明快的顏色和風格,只要學學平面構成和色彩構成就知道如何按其風格去布置各個元素和內容,以及用何種顏色來營造你要表達的效果了,包括冷暖明暗都是很關鍵的。大面積的中性色不刺眼,而重要的引導視線可以讓亮色來擔當,冬天喜歡暖色夏天喜歡冷色是人之常情,藍色那種給人以信任和科技的底韻是我選擇它的原因,而像橙、黃等促進食慾的顏色更容易受到食品網站的青睞!

1.3本著簡潔科學的分類原則來劃分欄目:首頁 客戶中心 窄告介紹 合作媒體 常見問題 媒體報道 關於我們
欄目如果劃分不好的話,影響框架的調整,後果就是:重頭再來了,郁悶吧?
本網站主要面向濰坊企業,所以要做得本地化,讓人看了感覺親切,而且要做得漂亮,廢話!!
1.4好了,完成上面這些後請拿起筆在紙上按你的創意和設想畫一草圖,盡是具體些,最好精細到每處陰影和描邊!這步很關鍵的說!
1.5本節最後就是准備製做網站時所需要的素材了,包括圖標,LOGO,廣告語,內容介紹等這都是最基本的!

2 設計與製做
2.1如果草圖都已經繪制完美後就可以打開PS或FW開工製做和設計我們的界面了,在這里我使用PS,雖然沒有FW的高效和專業但更加靈活和自由,這是我最喜歡的,也因為用慣了嘛!^^養兵千日用兵一時,平時的練習和學習在這里派上用場了!呵呵!
2.2可以在新建的778*600頁面中先打框架然後再採用逐步細化的方法,還可以採用你自己獨特的手法,比如透明玻璃水晶按鈕等效果來營造特別的風格,要力求簡約和精緻!不要放過每個細節的刻畫,即使是1*1的5%透明度的陰影都會給你的頁面增彩,別以為別人看不見!
2.3最好養成分層的習慣,這樣可以方便分類和編輯,不至於把上百個圖層放在一下層級里搞得一團亂麻,分不清楚。
作為一名優秀的設計師應該有條理,所以請養成分類並為每個圖層命名的習慣,這決不是浪費你的時間!

3 切割與導出
無論是PS還是FW,哪怕是AI做的設計界面,在切割的原則都是一樣的,請遵從以下幾個方面:
3.1首先要按大致的框架切割,如國字型或T字型,注意其完整性
3.2對於要輸入的文字區域、大面積色塊或單獨的圖片以及Flash動畫要單獨切割成非圖片格式的切片以備插入
3.3對於添加內容需要很長的區域要注意其伸縮性切割,若有圖案要保證可以重復排列
3.4在切割時要特別認真和小心,不要空留一行或列的一個象素的間隙,要放大讓切片都對齊,不留空隙
3.5其它如按鈕和空白處等自動生成的切片,以及創建需要改變圖片外觀的切片等
切割完畢後,選擇文件另存為WEB頁命令,導出為HTML文件待DW編輯。

4 編輯與模板
4.1在DW中打開導出的HTML文件開始編輯,包括大表格居中,設置背景,修改空白可輸入區單元格背景為原來切割的圖片等
4.2將編輯完畢的文件添加CSS樣式,包括最基本的TD和ALINK等標簽,然後存為模板DWT文件,並^+alt+v新建可編輯區域
4.3通過模板新建各個頁面並添加入相應的內容

5 動畫與廣告
5.1按原來切片所容留的大小製做FL動畫廣告條,使用相應的文字內容和廣告語,在FL中新建文件
5.2復制粘貼廣告詞到場景中,排版並轉換為元件578*104
5.3添加相應的背景和動畫,調試節奏後發布為SWF文件
5.4插入到DW中的模板頁並調整大小後存檔,其它的頁面會自動更新

6 鏈接與上傳
6.1重新設置模板頁的導航鏈接,本步驟也可在第四節完成
6.2在本地打開首頁檢查鏈接與文字內容直到無錯,確保鏈接可正常訪問
6.3上傳到申請的空間,在域名解析成功後在瀏覽器中瀏覽網上的效果並做相應後期維護

Ⅲ 個人資料裡面的網站怎麼

如果你有個人網站的話,就寫上你的個人網站,如果你有博客的話,就寫上你的博客,或者寫上你的QQ空間的網址,總之就是和你有關系的網站。

Ⅳ 怎麼製作個人網站

一、自己做。會編程,自己寫代碼做網站。不過既然這么問,應該是不會寫,但可以學,自學或者參加培訓班。編碼好了,還需要買空間、域名。
二、找設計。任何事情都可以用鈔票解決。找專業的網路公司來製作。不過既然這么問,應該是沒打算這方面的開支。
三、找朋友。一個好漢三個幫。自己身邊朋友沒有,可以托朋友找他的朋友。地球上所有人的關系都超不過六度,即是人託人6次可達。但關系有遠近,人情有親疏,找到樂意免費幫忙的可也不容易。
四、使用自助建站系統。會打字就能做一個簡單的網站。費用也不高,這類系統很多,網上可以找。
五、下載源碼搭建。有些源碼網站,還有很多開源系統,提供很多成品案例。有很多提供下載。下載源碼中一般也有安裝指導文件。照葫蘆畫瓢也能搭建一個。缺點是不會代碼,想修改個樣子難。
六、使用個人博客,如新浪博客、騰訊博客等。系統是現成的,固定的,就是發文章就可以。還可以進行簡單的空間裝修。

Ⅳ 如何製作一個簡單的個人網站(網頁設計課程需要的作業)需要兩個樣本

建站系統可以幫到你,自己去下載一個,有免費的,如:PageAdmin網站管理系統、wordpress系統、帝國軟體、動易系統,這些都是比較常用的。

Ⅵ 個人網站的製作技巧

1、靈活運用樣式

熟悉網頁設計的網友就知道,調用Style的方法很多,我們可以單擊滑鼠右鍵選擇Custon Style來調用Style標准,也可以在狀態欄中的元素列表上單擊右鍵來調用Style。雖然不同的方法達到的效果看似一樣,但實際上產生的HTML代碼則完全不同。比如用Custon Style來調用Style標准,在網頁代碼中就生成一個〈span〉標簽,這樣的標簽一多就會使文件十分臃腫而且影響瀏覽器的解析速度,所以我們應盡量使用狀態欄中的元素列表來調用Style。

2、活用Format Table命令

在復雜的網頁設計中,表格的應用是最多的,因為利用表格可以自由地控制文本和圖象在網頁上出現的具體位置,從而使整個網頁看上去緊湊統一。Dreamweaver在這方面也不甘落後,我們可以使用其中的「Format Table」(格式化表格)命令來快速地對表格應用預先設計好的樣式。要使用預先設計好的樣式,先將游標置於表格的任意一個單元格內,再選擇「Command」→「Format Table」命令, 在隨後出現的對話框中,從左邊的列表中選擇一個設計方案。按「Apply」 鍵來查看效果,如果不滿意的話,還可以重新設置或者修改部分參數的值,如邊界粗細,背景顏色等等。

3、同時鏈接到兩個網頁

我們都知道超級鏈接一次只能連到一個頁面。如果我們要想一次在不同的框架頁中打開文檔,可以使用「Go To URL」JavaScript 行為。打開一個有框架的網頁,選擇文字或圖象,然後從行為面板中選擇「Go To URL」。我們會注意到Dreamweaver會在「Go To URL」對話框中顯示所有可用的框架。選擇其中一個我們想鏈接的框架並輸入相應的URL後再選擇另一個框架並輸入另一個URL。

4、不給文件起中文名稱

大家在製作好了網頁後,通常會給網頁起一個具有代表性的中文名稱,一來能使人一看文件名就能大概了解文件所包含的內容,二來能夠方便各個超級鏈接之間的相互調用。但如果你在Dreamweaver中這樣做,就會發現Dreamweaver對中文文件名支持得不是太好,經常會有頁面調用不正確的現象發生,所以我們以後在Dreamweaver中保存網頁的時候,盡量用英文或者數字作為文件名稱,這樣就可以避免上面的出錯現象。

5、巧妙設置字體解析度

我們在製作網頁的時候,經常有這種體會,那就是製作好的網頁在本地計算機上瀏覽時很正常,但在另外一台計算機上瀏覽時發現原本漂亮的網頁變得歪歪扭扭了,這是為什麼呢?原來各個計算機的解析度要使你的主頁在不同的解析度下都能正常顯示,在 Dreamweaver中得到了較好的解決。在文檔窗口的右下角,Dreamweaver 顯示當前文檔被設計成的解析度大小。單擊哪個數字,在彈出式菜單中可以為當前的頁面指定顯示解析度,通過修改可以使你的主頁更具靈活性。使不同解析度的顯示器都能較好地顯示。

6、巧妙隱藏標簽

如果在網頁中插入了不可見的元素時,Dreamweaver會自動在頁面上添加一個與之相應的元素標簽,以便於我們選擇不可見元素。但這並不全是件好事,比如我們在一個有很多層的頁面中的第一行便插入一個表格,就會發現由於首行排列了太多的層元素標簽而使得表格自動退到了頁面的第二行,雖然在瀏覽時並不影響效果,但這確確實實會阻礙我們的工作。所以當我們覺得某個元素標簽礙手礙腳時,就索性將之屏蔽掉。方法是按Ctrl+U打開Preferences面板,在Category中選中Invisibel Elements,在面板的右邊將會出現所有的元素標簽。只要將不需要的元素標簽前的勾去掉,以後它就保證不會再出現了。

7、善用拖放技巧

我們在使用Dreamweaver編輯網頁的時候,經常需要插入一些圖象什麼的,假設要插入的圖象很多,按照常規方法來操作就顯得非常麻煩。我們可以利用拖放技巧來很好地解決這個問題。首先我們把Dreamweaver的操作窗口變成活動窗口,以騰出空間來顯示Explorer窗口,找到要插入的圖象文件後,把它們一一用滑鼠拖動到網頁的適當部位,Dreamweaver將自動把這些圖象的url添加到文件的HTML代碼中,當然這里要求被拖動的圖象文件必須是gif、jpg等web圖象格式的文件。對於已經在網頁中的圖象也是一樣,直接拖過來就可以了。但如果被拖動的圖象上有超級鏈接,就不可以再使用拖動技術了,因為那時拖過來的僅僅是超級鏈接地址。