個(gè)人網(wǎng)站制作過(guò)程
個(gè)人網(wǎng)站制作流程一、站建設(shè)方案書的內(nèi)容個(gè)人網(wǎng)站建設(shè)方案書是將個(gè)人網(wǎng)站建設(shè)成為一個(gè)優(yōu)質(zhì)網(wǎng)站首先要考慮,網(wǎng)站建設(shè)方案能反應(yīng)出網(wǎng)站的建設(shè)構(gòu)想,初步形態(tài)及網(wǎng)站推廣計(jì)劃。個(gè)人網(wǎng)站建設(shè)方案適合個(gè)體戶和中小型企業(yè),
個(gè)人網(wǎng)站制作流程
一、站建設(shè)方案書的內(nèi)容
個(gè)人網(wǎng)站建設(shè)方案書是將個(gè)人網(wǎng)站建設(shè)成為一個(gè)優(yōu)質(zhì)網(wǎng)站首先要考慮,網(wǎng)站建設(shè)方案能反應(yīng)出網(wǎng)站的建設(shè)構(gòu)想,初步形態(tài)及網(wǎng)站推廣計(jì)劃。個(gè)人網(wǎng)站建設(shè)方案適合個(gè)體戶和中小型企業(yè),它有自己獨(dú)特的風(fēng)格設(shè)計(jì)。風(fēng)格設(shè)計(jì)主要體現(xiàn)在本人個(gè)性特點(diǎn)的凸顯,分析. 策劃并制定出一套適合自身的網(wǎng)站建設(shè)的設(shè)計(jì)風(fēng)格方案。設(shè)計(jì)首頁(yè)要明確主次,主要的可放在顯要位置、加粗或變顏色等,再列出最吸引瀏覽者的信息以及內(nèi)容,用最精煉的語(yǔ)言表達(dá)出瀏覽者想了解的信息。
二、建站目的及功能定位
對(duì)于個(gè)人網(wǎng)站建設(shè)前期的定位是相當(dāng)重要,你必須了解你做這個(gè)網(wǎng)站的目的,是為了宣傳自己還是展示自己的愛(ài)好,本人感覺(jué)最好是定位在自己感興趣或者自己工作的行業(yè)中,這樣自己可能會(huì)對(duì)所確定的主題行業(yè)了解的更多些,很多人在建站初期總是喜歡在主頁(yè)里堆積大量感興趣的內(nèi)容,但個(gè)人的精力總是有限的,因?yàn)闊o(wú)力維護(hù)而導(dǎo)致站點(diǎn)更新緩慢、內(nèi)容匱乏,與其這樣,不如選定一個(gè)主題做出自己的風(fēng)格,不求大而全,但求小而精。
三、網(wǎng)站主要內(nèi)容介紹:
1. 構(gòu)成網(wǎng)頁(yè)的基本要素
1.1文字(標(biāo)題、字號(hào)、字型... )
1.2 圖形(網(wǎng)頁(yè)上經(jīng)常使用的圖片格式:jpg 、jpeg 、Gif 、Swf... )
1.3. 交互功能(菜單按鈕、鏈接、表單、數(shù)據(jù)交換... )
超文本標(biāo)識(shí)語(yǔ)言(HTML )
HTML (Hypertext Markup Language)是一種專門用于Web 頁(yè)制作的編程語(yǔ)言,用來(lái)描述超文本各個(gè)部分的內(nèi)容,告訴瀏覽器如何顯示文本,怎樣生成與別的文本或圖像的鏈接點(diǎn)。 在HTML 中,所有的標(biāo)記符都用尖括號(hào)括起來(lái)。
例如,表示HTML 標(biāo)記符。絕大多數(shù)標(biāo)記符都是成對(duì)出現(xiàn)的,包括開始標(biāo)記符和結(jié)束標(biāo)記符。
如:…</HTML> .
HTML 文檔的基本結(jié)構(gòu)
一個(gè)典型的HTML 文本的基本結(jié)構(gòu)形式如下:
</HEAD>
</HTML>
2制作及美化的基本工具
2.11.超文本標(biāo)識(shí)語(yǔ)言(HTML )
編輯工具:editplus 、dreamweaver 、記事本、FrontPage 、
2.2.頁(yè)面設(shè)計(jì)及美化工具
使用工具:所有可制作平面的軟件
推薦使用Photoshop 、FireWorks 、Flash
3、網(wǎng)頁(yè)制作的基本步驟
,3.1、整體規(guī)劃
需要完成的規(guī)劃:網(wǎng)站主題、風(fēng)格、頁(yè)面元素、邏輯結(jié)構(gòu)等
3.2、資料收集
收集內(nèi)容:
a 、跟主題相關(guān)的文字圖片資料
b 、一些優(yōu)秀的頁(yè)面風(fēng)格
c 、下載一些你喜歡的交互頁(yè)面
d 、開放的源代碼
3.3、偽界面設(shè)計(jì)
根據(jù)事先規(guī)劃的結(jié)構(gòu),在平面軟件里設(shè)計(jì)你想要的最終效果,利用平面圖片的形式先展示一次,設(shè)計(jì)時(shí)要注意宜人性、人機(jī)、心理等各方面因素
3.4、代碼轉(zhuǎn)換及交互添加
把平面的偽界面轉(zhuǎn)化為HTML 代碼,添加相應(yīng)的交互功能Js 、按紐、表單,以及一些與數(shù)據(jù)庫(kù)相連接的代碼。
3.5、測(cè)試網(wǎng)頁(yè)兼容性
你可以不必嚴(yán)格按照W3C 標(biāo)準(zhǔn)來(lái)制作頁(yè)面,但是你必須保證讓所有現(xiàn)有的瀏覽器能比較好的展示你的作品。
3.6、發(fā)布站點(diǎn)
測(cè)試完畢,符合你的要求,當(dāng)然就可以開始發(fā)布你的網(wǎng)站了,發(fā)布的服務(wù)器可以是遠(yuǎn)程,也可以是本地,各個(gè)語(yǔ)言有各自的相應(yīng)的服務(wù)器,比如ASP ,就應(yīng)該對(duì)應(yīng)的是ASP 服務(wù)器,上傳可利用遠(yuǎn)程FTP 工具。
4、界面設(shè)計(jì)及交互研究探討
4.1、導(dǎo)航欄設(shè)計(jì)
導(dǎo)航要素設(shè)計(jì)的好壞決定著用戶是否能方便使用網(wǎng)站導(dǎo)航要素要設(shè)計(jì)的直接而明確,并最大限度為用戶的方便考慮。
4.2、網(wǎng)頁(yè)布局
網(wǎng)頁(yè)的布局是整個(gè)界面的核心,這里體現(xiàn)了一切以用戶為中心、以及制作者如何與欣賞著溝通的思想在里面,你必須知道自己要傳達(dá)什么樣的信息,別人使用起來(lái)合適不,字體的大小、型號(hào)、字間距、行間距,以及配色所有的一切都在這個(gè)階段完成,所以如何表現(xiàn)功能以及美感就是你研究的重點(diǎn)。
PS:布局之前要緊密連接你網(wǎng)站的主題,要注意把握整體風(fēng)格,你可以事先在紙上勾畫草圖,利用你習(xí)慣的元素來(lái)表現(xiàn)你想要的效果
網(wǎng)頁(yè)布局--主要構(gòu)成原則
醒目性:指用戶把注意力集中到你誘導(dǎo)起瀏覽的部分和內(nèi)容
可讀性:指網(wǎng)站的內(nèi)容讓人容易讀懂
明快性:指準(zhǔn)確、快速轉(zhuǎn)達(dá)網(wǎng)站的構(gòu)成內(nèi)容
造型性:維持整體外型上的穩(wěn)定感和均衡性
創(chuàng)造性:有鮮明個(gè)性,創(chuàng)意是必不可少的
布局的構(gòu)成原則上是:統(tǒng)一、協(xié)調(diào)、流動(dòng)、強(qiáng)調(diào)、均衡
4.3、交互研究
我這邊的交互主要集中在人機(jī)操作方面,研究用戶瀏覽網(wǎng)站心理我個(gè)人認(rèn)為一個(gè)成功的個(gè)人主頁(yè),單純的美觀是不夠的,重要的是宜人性方面應(yīng)該注重,喜歡Google 、Douban 就居于這。
5、實(shí)例制作演示(略)
,5.1、頁(yè)面制作整體規(guī)劃
對(duì)象:一個(gè)打印商業(yè)宣傳主頁(yè)
格調(diào):活潑,色彩,簡(jiǎn)單,大方
5.2、資料收集
a 、商標(biāo)、網(wǎng)址、公司宣傳冊(cè)、了解企業(yè)文化,了解負(fù)責(zé)人的品位、他們的案例、跟負(fù)責(zé)人溝通掌握信息
b 、網(wǎng)上下載相似印刷行業(yè)的公司主頁(yè),了解現(xiàn)有行業(yè)的的一些設(shè)計(jì)特點(diǎn)
c 、下載一些色彩比較華麗的圖片,或跟印刷相關(guān)連的圖片
d 、如果你自己不會(huì)動(dòng)態(tài)語(yǔ)言,下載一個(gè)滿足你功能的新聞發(fā)布系統(tǒng)和留言源碼
5.3、偽界面設(shè)計(jì)
a 、在PS 設(shè)計(jì)偽界面
b 、切片工具對(duì)整體進(jìn)行合理的分割
注意點(diǎn):隱藏你要通過(guò)輸入的文字,分割時(shí)要保持他的整體意義,盡量讓每一部分是完整的,注意一些交互上操作。
c 、導(dǎo)成WEB 格式-直接導(dǎo)成HTML 格式—步驟:
1、. 點(diǎn)擊文件存儲(chǔ)為WEB 文件格式
2、在界面里面調(diào)整理想?yún)?shù)
3、導(dǎo)出保存PS 能自動(dòng)生成一些HTML 代碼,但是他不是很標(biāo)準(zhǔn),你必須在Dreamweave 里面進(jìn)行加工
d 、在Dreamweave 里面進(jìn)行代碼加工
具體步驟:
1、先修改標(biāo)題
2、修改頁(yè)面屬性:背景顏色、背景圖片.....
3、把頁(yè)面調(diào)整為布局格式(這個(gè)可以按照自己習(xí)慣來(lái)設(shè)置,有標(biāo)準(zhǔn)的表格方式,也有布局類型)
5.4、把要添加文字的圖片轉(zhuǎn)化為背景形式
a 、找到對(duì)應(yīng)圖片路徑
b 、拷貝路徑后刪除圖片
c 、轉(zhuǎn)化為標(biāo)準(zhǔn)形式
d 、把路徑粘貼到背景屬性上
e 、回到布局界面
5.5、添加具體文字連接設(shè)置等操作
5.6、CSS 設(shè)置
5.7、修整代碼,發(fā)布預(yù)覽按F12即可預(yù)覽效果
4、測(cè)試網(wǎng)頁(yè)兼容性
按照你設(shè)計(jì)時(shí)的對(duì)象, 根據(jù)IE 版本以及瀏覽器的不同,調(diào)整理想的效果,但是大部分出現(xiàn)問(wèn)題的是JSVB等代碼,如果只是單純靜態(tài)圖片,基本不會(huì)有很大的差別,推選大家盡量往W3C 標(biāo)準(zhǔn)靠
5、發(fā)布站點(diǎn)
購(gòu)買自己的空間域名,其實(shí)事先就應(yīng)該購(gòu)買的,利用FTP 上傳軟件,把你的頁(yè)面上傳到你的網(wǎng)上服務(wù)器上推薦一款FTP 上傳工具
四,具體設(shè)計(jì)過(guò)程
,個(gè)人在設(shè)計(jì)時(shí)考慮的多為個(gè)人的興趣喜好,而不注重商業(yè)的展示。內(nèi)容以反映個(gè)人為中心,從而使個(gè)人網(wǎng)站真正的成為展示自己的網(wǎng)絡(luò)名片。 在網(wǎng)頁(yè)制作中,我借鑒了韓國(guó)個(gè)人網(wǎng)站的設(shè)計(jì)風(fēng)格,著重于給瀏覽者以強(qiáng)烈的視覺(jué)沖擊。運(yùn)用了photoshop 和fireworks 強(qiáng)大的圖像制作和處理能力。進(jìn)行了大量的圖片制作,從而給人以強(qiáng)烈的美感。并利用Flash 進(jìn)行片頭動(dòng)畫的制作,給予瀏覽者一種強(qiáng)烈的時(shí)代動(dòng)感。整個(gè)網(wǎng)站的架構(gòu)是由Dreamwave 完成的。
、在這次課業(yè)中我制作了關(guān)于自己的網(wǎng)頁(yè),下面介紹下制作過(guò)程。首先使用Dreamweaver8來(lái)創(chuàng)建站點(diǎn)。打開Dreamweaver8軟件,執(zhí)行站點(diǎn)- 站點(diǎn)管理命令,在彈出的站點(diǎn)管理對(duì)話框中選擇新建,然后創(chuàng)建站點(diǎn)存放到我的文檔,然后設(shè)置地址為www.maqunchao.com 。站點(diǎn)創(chuàng)建完成后,在Dreamweaver8軟件右側(cè)就會(huì)出現(xiàn)站點(diǎn)資源列表,然后我分別建立了images 、Scripts 、和若干子文件,主要用于存放主網(wǎng)站架構(gòu)圖片、音樂(lè)、日志鏈接模塊素材、網(wǎng)絡(luò)模塊素材、照片匣子模塊素材。
要領(lǐng)一:確定網(wǎng)站主題
做網(wǎng)站,首先必須要解決的就是網(wǎng)站內(nèi)容問(wèn)題,即確定網(wǎng)站的主題。興趣是制作網(wǎng)站的動(dòng)力,沒(méi)有創(chuàng)作熱情,很難設(shè)計(jì)制作出優(yōu)秀的作品。 對(duì)于內(nèi)容主題的選擇,要做到小而精,主題定位要小,內(nèi)容要精。不要去試圖制作一個(gè)包羅萬(wàn)象的站點(diǎn),這往往會(huì)失去網(wǎng)站的特色,也會(huì)帶來(lái)高強(qiáng)度的勞動(dòng),給網(wǎng)站的及時(shí)更新帶來(lái)困難。記住:在互聯(lián)網(wǎng)上只有第一,沒(méi)有第二!
要領(lǐng)二:選擇好域名
域名是網(wǎng)站在互聯(lián)網(wǎng)上的名字。一個(gè)非產(chǎn)品推銷的純信息服務(wù)網(wǎng)站,其所有建設(shè)的價(jià)值,都凝結(jié)在其網(wǎng)站域名之上。失去這個(gè)域名,所有前期工作就將全部落空。 要把域名起得形象、簡(jiǎn)單、易記。
要領(lǐng)三:掌握建網(wǎng)工具
網(wǎng)絡(luò)技術(shù)的發(fā)展帶動(dòng)了軟件業(yè)的發(fā)展,所以用于制作Web 頁(yè)面的工具軟件也越來(lái)越豐富。從最基本的HTML 編輯器到現(xiàn)在非常流行的Flash 互動(dòng)網(wǎng)頁(yè)制作工具,各種各樣的Web 頁(yè)面制作工具。
要領(lǐng)四:確定網(wǎng)站界面
界面就是網(wǎng)站給瀏覽者的第一印象,往往決定著網(wǎng)站的可看性,在確定網(wǎng)站的界面時(shí)要注意以下三點(diǎn):
①欄目與板塊編排
②目錄結(jié)構(gòu)與鏈接結(jié)構(gòu)
③進(jìn)行形象設(shè)計(jì)
要領(lǐng)五:確定網(wǎng)站風(fēng)格
“風(fēng)格”是抽象的,是指站點(diǎn)的整體形象給瀏覽者的綜合感受。這個(gè)“整體形象”包括站點(diǎn)的CI (標(biāo)志,色彩,字體,標(biāo)語(yǔ))、版面布局、瀏覽方式、交互性、文字、語(yǔ)氣、內(nèi)容價(jià)值等等
,諸多因素,網(wǎng)站可以是平易近人的、生動(dòng)活潑的也可以是專業(yè)嚴(yán)肅的。不管是色彩、技術(shù)、文字、布局,還是交互方式,只要你能由此讓瀏覽者明確分辨出這是你網(wǎng)站獨(dú)有的,這就形成了網(wǎng)站的“風(fēng)格”。 風(fēng)格是有人性的,通過(guò)網(wǎng)站的色彩、技術(shù)、文字、布局、交互方式可以概括出一個(gè)站點(diǎn)的個(gè)性:是粗獷豪放的,還是清新秀麗的;是溫文儒雅的,還是執(zhí)著熱情的;是活潑易變的,還是墨守成規(guī)的。 總之,有風(fēng)格的網(wǎng)站與普通網(wǎng)站的區(qū)別在于:在普通網(wǎng)站上你看到的只是堆砌在一起的信息,你只能用理性的感受來(lái)描述,比如信息量多少,瀏覽速度快慢等;在有風(fēng)格的網(wǎng)站上你可以獲得除內(nèi)容之外的更感性的認(rèn)識(shí),比如站點(diǎn)的品位,對(duì)瀏覽者的態(tài)度等。
要領(lǐng)六:有創(chuàng)意的內(nèi)容選擇
好的內(nèi)容選擇需要有好的創(chuàng)意,作為網(wǎng)頁(yè)設(shè)計(jì)制作者,最苦惱的就是沒(méi)有好的內(nèi)容創(chuàng)意。網(wǎng)絡(luò)上的最多的創(chuàng)意即是來(lái)自于虛擬同現(xiàn)實(shí)的結(jié)合。創(chuàng)意的目的是為了更好的宣傳與推廣網(wǎng)站,如果創(chuàng)意很好,卻對(duì)網(wǎng)站發(fā)展毫無(wú)意義,那么,網(wǎng)站設(shè)計(jì)制作者也應(yīng)當(dāng)放棄這個(gè)創(chuàng)意。另外,主頁(yè)內(nèi)容是網(wǎng)站的根本之所在,如果內(nèi)容空洞,即使頁(yè)面制作地再怎樣精美,仍然不會(huì)有多少用戶。從根本上說(shuō),網(wǎng)站內(nèi)容仍然左右著網(wǎng)站流量,內(nèi)容為王(Content Is King)依然是個(gè)人網(wǎng)站成功的關(guān)鍵。
要領(lǐng)七:推廣自己的網(wǎng)站
網(wǎng)站的推廣有以下幾種方式:
(1)搜索引擎注冊(cè)與搜索目錄登錄技巧
(2)廣告交換技巧
(3)目標(biāo)電子郵件推廣
要領(lǐng)八:支撐網(wǎng)站日常運(yùn)行
通常來(lái)說(shuō),個(gè)人網(wǎng)站獲取資金通常有以下兩個(gè)渠道:
(1)銷售網(wǎng)站的廣告位
(2)與大型網(wǎng)站合作
五、總結(jié)語(yǔ)
在整個(gè)的學(xué)習(xí)過(guò)程中,我學(xué)習(xí)了Flash 、Dreamwave 、Fireworks 、Html 語(yǔ)言、IIS 、網(wǎng)站建設(shè)的基本思想等重要內(nèi)容。到現(xiàn)在為止,我還是很慶幸能夠?qū)W到這么多的內(nèi)容。整個(gè)網(wǎng)站的制作是我一個(gè)人完成的。雖然整個(gè)網(wǎng)頁(yè)的結(jié)構(gòu)還有很多不足,還有一些板塊沒(méi)有開通,但是我的確能夠感到在我制作過(guò)程中技能的提高。整個(gè)網(wǎng)站的不足我想是沒(méi)有使用到一些動(dòng)態(tài)網(wǎng)頁(yè)的知識(shí),使得日后網(wǎng)站的維護(hù)較為繁雜。希望明年可以選到動(dòng)態(tài)網(wǎng)站的課程,從而彌補(bǔ)自己在動(dòng)態(tài)網(wǎng)絡(luò)語(yǔ)言方面的不足。