網(wǎng)站制作都有哪些步驟
The website production process simple introduction
1 策劃與草圖
Planning and sketches
2 設計與制做
Design and making
3 切割與導出
Cutting and export
4 編輯與模板
Editing and template
5 動畫與廣告
Animation and advertising
6 鏈接與上傳
Links and upload
按軟件及長度劃分制做步驟:
According to the software and length divided making steps:
1 策劃與草圖
Planning and sketches
1.1所有網(wǎng)站和其它設計作品的過程都是從策劃開始的。這是最能體現(xiàn)你的才華和創(chuàng)造力的地方。人最大的區(qū)別于其它動物的地方就是會思考,會創(chuàng)造,而且唯有這點是難能可貴的!我們必須要在動手打開PS或FW制做界面前就要完成一個網(wǎng)站最最關鍵的策劃部分,它將直接影響
All web sites and other design works from the start of the planning process. This is the most can reflect your talent and creativity of the place. The biggest difference between the people in other animals place is thinking, can create, and only this is valuable. We have to be on hands-on opened PS or FW making industry shall be completed before a key part of the most web site planning, it will directly influence
這個網(wǎng)站的成敗與否。一個優(yōu)秀的網(wǎng)站,不僅做得漂亮,而且要方便瀏覽,可讀性強,簡潔明快!
The success or failure of the website. A good website, not only to do well and to facilitate browsing, readable, concise and lively!
網(wǎng)站的風格,用色,版式,布局,欄目甚至每個細小的圖標都要經(jīng)過精雕細琢,深思熟慮。而風格的制定要取決于你所做網(wǎng)站的瀏覽人群和讀者職業(yè)背景、文化程度和修養(yǎng)愛好等,只有投其所好才能最大化地產(chǎn)生共鳴;另一方面取決于公司的類型和企業(yè)法人的喜好,如果不是要強加入你自己的意志的話,那上述幾點已經(jīng)制定了網(wǎng)站大致的努力方向了!
The website's style, coloring, format, layout, column and even every tiny ICONS are through excelsior, thoughtful. And the formulation of style depends on what you do web browsing the crowd and readers professional background, education and training the hobby, only cast its place to maximize the resonate; On the other hand depends on the type of company of the enterprise as a legal person and be fond of, if it's better to join you will of his own words, that the points above has made the web site the direction of roughly!!!!
1.2本站是商業(yè)化的網(wǎng)站面向企業(yè)為主,所以我采用簡約風格,亮麗明快的顏色和風格,只要學學平面構成和色彩構成就知道如何按其風格去布置各個元素和內(nèi)容,以及用何種顏色來營造你要表達的效果了,包括冷暖明暗都是很關鍵的。大面積的中性色不刺眼,而重要的引導視線可以讓亮色來擔當,冬天喜歡暖色夏天喜歡冷色是人之常情,藍色那種給人以信任和科技的底韻是我選擇它的原因,而像橙、黃等促進食欲的顏色更容易受到食品網(wǎng)站的青睞!
1.2 this site is the website of the commercial enterprises, so I use simple style, bright beautiful and lively color and style, as long as the plane composition and learn color composition knew how to according to the style to decorate each element and content, and with what kind of color to build you want to express the effect, including changes in temperature and light and shade is essential. Large areas of neuter color not dazzling, and important guiding the view can let bright color to bear, winter like warm color summer like cool color is human nature, that give a person with blue trust and technology DE yun is my choice of the causes, and like orange and yellow color of promote appetite more vulnerable to food web site favor!
1.3本著簡潔科學的分類原則來劃分欄目:首頁客戶中心窄告介紹合作媒體常見問題媒體報道關于我們
1.3 in line with concise scientific classification principle to differentiate column: front page customer center against media introduced narrow the common problems in media reports about us
欄目如果劃分不好的話,影響框架的調(diào)整,后果就是:重頭再來了,郁悶吧?
Column if bad word division, the influence of the framework adjustment, the result is: start again, depressed?
本網(wǎng)站主要面向濰坊企業(yè),所以要做得本地化,讓人看了感覺親切,而且要做得漂亮,廢話!!
This web site mainly to weifang enterprise, so to do localization, let a person see the sense kind, and to do well, blah!
1.4好了,完成上面這些后請拿起筆在紙上按你的創(chuàng)意和設想畫一草圖,盡是具體些,最好精細到每處陰影和描邊!這步很關鍵的說!
1.4 good, complete the above, please take up a pen on paper according to your creative ideas and draw a sketch, with some specific, best fine to every place of shadow and stroke! This step is the key!
1.5本節(jié)最后就是準備制做網(wǎng)站時所需要的素材了,包括圖標,LOGO,廣告語,內(nèi)容介紹等這都是最基本的!
1.5 this section is ready to make final web sites need the source material, including ICONS, LOGO, advertising, introduced the content such as is the most basic!
2 設計與制做
Design and making
2.1如果草圖都已經(jīng)繪制完美后就可以打開PS或FW開工制做和設計我們的界面了,在這里我使用PS,雖然沒有FW的高效和專業(yè)但更加靈活和自由,這是我最喜歡的,也因為用慣了嘛!^^養(yǎng)兵千日用兵一時,平時的練習和學習在這里派上用場了!呵呵!
If sketches are drawing perfect after it is opened PS or FW start making and design our interface, here I use PS, although do not have efficient and professional FW but more flexible and free, that is my favorite, but also because of used to! ^ ^ only thing seven years time, the practice and study here come in handy! Ha ha!
2.2可以在新建的778*600頁面中先打框架然后再采用逐步細化的方法,還可以采用你自己獨特的手法,比如透明玻璃水晶按鈕等效果來營造特別的風格,要力求簡約和精致!不要放過每個細節(jié)的刻畫,即使是1*1的5%透明度的陰影都會給你的頁面增彩,別以為別人看不見!
Can on the new 778 * 600 page first dozen framework and then using stepwise refinement of method, still can use your own unique technique, such as transparent glass crystal button to create the special effects such as style, try to be contracted and exquisite! Don't let every detail of characterization, even 1 * 1 5% of the transparency of the shadow will give you increase the page color, don't think that other people can't see!
2.3最好養(yǎng)成分層的習慣,這樣可以方便分類和編輯,不至于把上百個圖層放在一下層級里搞得一團亂麻,分不清楚。
The best form the habit of layered, so that can be easily classification and editing, and not to the levels hundreds of layer on the make a haslong been, points not clear.
作為一名優(yōu)秀的設計師應該有條理,所以請養(yǎng)成分類并為每個圖層命名的習慣,這決不是浪費你的時間!
As an excellent designers should be organized, so please get classification and for each layer of naming habits, this will never be wasting your time!
3 切割與導出
Cutting and export
無論是PS還是FW,哪怕是AI做的設計界面,在切割的原則都是一樣的,請遵從以下幾個方面:
Whether PS or FW, even if it is AI do design interface in the principle of cutting are the same, please follow the following several aspects:
3.1首先要按大致的框架切割,如國字型或T字型,注意其完整性
According to the frame of the first roughly cutting, such as country word or T word, pay attention to their integrity
3.2對于要輸入的文字區(qū)域、大面積色塊或單獨的圖片以及flash動畫要單獨切割成非圖片格式的切片以備插入
Input text to regional, large area color piece or separate pictures and flash animation to separate cutting into the image format slice for insert
3.3對于添加內(nèi)容需要很長的區(qū)域要注意其伸縮性切割,若有圖案要保證可以重復排列
To add content need a long area should pay attention to its flexibility cutting, if there is a design to ensure that the arrangement can be repeated
3.4在切割時要特別認真和小心,不要空留一行或列的一個象素的間隙,要放大讓切片都對齊,不留空隙
In cutting to special earnest and be careful, don't empty kept one row or column of a pixel gap, to enlarge the paraffin sections to align, leaving no space
3.5其它如按鈕和空白處等自動生成的切片,以及創(chuàng)建需要改變圖片外觀的切片等
Other such as buttons and a blank space, automatically generated slice, and create a need to change the image of the look of the slice, etc
切割完畢后,選擇文件另存為WEB頁命令,導出為HTML文件待DW編輯。
After the completion of the cutting, choose file save for WEB page order, export to HTML documents to DW editor.
4 編輯與模板
Editing and template
4.1在DW中打開導出的HTML文件開始編輯,包括大表格居中,設置背景,修改空白可輸入?yún)^(qū)單元格背景為原來切割的圖片等
In the open in DW derived HTML documents to edit, including big form center, set background, modify the blank input area cell background for cutting the original pictures
4.2將編輯完畢的文件添加CSS樣式,包括最基本的TD和ALINK等標簽,然后存為模板DWT文件,并^+alt+v新建可編輯區(qū)域
The editor of the file will add CSS styles, including the most basic TD and ALINK, labels and save as template DWT files, and ^ + Alt + v new can edit area
4.3通過模板新建各個頁面并添加入相應的內(nèi)容
Through the template each page and new added to the corresponding contents
5 動畫與廣告
Animation and advertising
5.1按原來切片所容留的大小制做FL動畫廣告條,使用相應的文字內(nèi)容和廣告語,在FL中新建文件
According to the size of the original slice shelter making FL animation article advertising, use the corresponding text content and advertising, in FL new file
5.2復制粘貼廣告詞到場景中,排版并轉(zhuǎn)換為元件578*104
Copy paste AD copy to the scene, layout and convert to element 578 * 104
5.3添加相應的背景和動畫,調(diào)試節(jié)奏后發(fā)布為SWF文件
Add the corresponding background and animation, debugging promulgated after the rhythm for SWF file
5.4插入到DW中的模板頁并調(diào)整大小后存盤,其它的頁面會自動更新
Insert into the template pages and adjust DW after inventory size, other page is automatically updated
6 鏈接與上傳
Links and upload
6.1重新設置模板頁的導航鏈接,本步驟也可在第四節(jié)完成
Reset template page navigation links, this step also can be finished in the fourth quarter
6.2在本地打開首頁檢查鏈接與文字內(nèi)容直到無錯,確保鏈接可正常訪問
In local open the front page text links and check until no wrong, make sure the links to normal visit
6.3上傳到申請的空間,在域名解析成功后在瀏覽器中瀏覽網(wǎng)上的效果并做相應后期維護!
To apply for space, in the domain name system after the success in the browser on the online effect and do late corresponding maintenance!
本文發(fā)布于北京網(wǎng)站建設公司尚品中國http://taxlienfortunes.com/
建站流程
-
網(wǎng)站需求
-
網(wǎng)站策劃方案
-
頁面設計風格
-
確認交付使用
-
資料錄入優(yōu)化
-
程序設計開發(fā)
-
后續(xù)跟蹤服務
-
聯(lián)系電話
010-60259772
熱門標簽
- 網(wǎng)站建設
- 食品網(wǎng)站建設
- 微信小程序開發(fā)
- 小程序開發(fā)
- 無錫網(wǎng)站建設
- 研究所網(wǎng)站建設
- 沈陽網(wǎng)站建設
- 廊坊網(wǎng)站建設
- 鄭州網(wǎng)站建設
- 婚紗攝影網(wǎng)站建設
- 手機端網(wǎng)站建設
- 高校網(wǎng)站制作
- 天津網(wǎng)站建設
- 教育網(wǎng)站建設
- 品牌網(wǎng)站建設
- 政府網(wǎng)站建設
- 北京網(wǎng)站建設
- 網(wǎng)站設計
- 網(wǎng)站制作
最新文章
推薦新聞
更多行業(yè)-
Dreamweaver如何設置框架的屬性
在Dreamweaver網(wǎng)站制作中,可以通過可視化的方式設置框架或框架...
2015-08-12 -
細說seo優(yōu)化首頁
網(wǎng)站制作公司尚品中國(taxlienfortunes.com):如果想把SE...
2012-07-17 -
[北京網(wǎng)站制作]百度一周七天更新狀況
百度一周七天更新狀況 這里給大家說說百度的大致更新習性吧,如有不準確...
2011-10-24 -
網(wǎng)絡公司價值評估指標體系
網(wǎng)絡公司的價值評估指標體系分為內(nèi)外兩個層次:外部因素和內(nèi)部因素。外部因...
2014-11-10 -
網(wǎng)頁的前期構架
在訪問世界一些知名的Web站點時,都會有這樣的感覺,那就是其組織結構太...
2017-09-27 -
如何辨別虛擬主機空間的好壞
北京網(wǎng)站建設公司尚品中國:想運營好一個網(wǎng)站,首先最重要的是能夠擁有一個...
2012-03-27
預約專業(yè)咨詢顧問溝通!
免責聲明
非常感謝您訪問我們的網(wǎng)站。在您使用本網(wǎng)站之前,請您仔細閱讀本聲明的所有條款。
1、本站部分內(nèi)容來源自網(wǎng)絡,涉及到的部分文章和圖片版權屬于原作者,本站轉(zhuǎn)載僅供大家學習和交流,切勿用于任何商業(yè)活動。
2、本站不承擔用戶因使用這些資源對自己和他人造成任何形式的損失或傷害。
3、本聲明未涉及的問題參見國家有關法律法規(guī),當本聲明與國家法律法規(guī)沖突時,以國家法律法規(guī)為準。
4、如果侵害了您的合法權益,請您及時與我們,我們會在第一時間刪除相關內(nèi)容!
聯(lián)系方式:010-60259772
電子郵件:394588593@qq.com