網(wǎng)頁(yè)設(shè)計(jì)技巧有哪些？web應(yīng)用程序開發(fā)技巧

時(shí)間：2023-09-11 03:42:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-11 03:42:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

網(wǎng)頁(yè)設(shè)計(jì)技巧有哪些？web應(yīng)用程序開發(fā)技巧：ps網(wǎng)頁(yè)設(shè)計(jì)技巧

以下就是ps網(wǎng)頁(yè)設(shè)計(jì)技巧等等的介紹，希望為您帶來(lái)幫助。

1 新建一個(gè)800X600像素的空白背景，顏色模式設(shè)置為RGB模式。RGB模式顏色是由紅色，綠色，藍(lán)色三種顏色相交構(gòu)成，可以更好的顯示網(wǎng)頁(yè)中的色彩內(nèi)容。

2 新建文件，點(diǎn)擊確定，空白文件會(huì)自動(dòng)顯示在軟件中。對(duì)于新建空白文件來(lái)說(shuō)，圖像的寬度和高度的大小要按照等比例進(jìn)行設(shè)計(jì)，也可以不勾選重新定義新像素來(lái)實(shí)現(xiàn)。

3 打開一張車的圖片，移動(dòng)到白色背景畫布中，選擇圓角矩形工具，選擇路徑為了方便轉(zhuǎn)換為選區(qū)，設(shè)置為5個(gè)像素，像素越大，圓角矩形的四個(gè)圓角就是更加的明顯，然后選擇漸變工具，選中系統(tǒng)自帶的黑白漸變，修改黑白漸變的顏色，改為灰白，也可以設(shè)置前景色為灰色，背景色為白色進(jìn)行漸變的填充，然后點(diǎn)擊確定。

4 然后選擇工作路徑，鼠標(biāo)CRL點(diǎn)擊工作路徑，設(shè)置為選區(qū)，選中線性漸變類型，然后畫出漸變的顏色。漸變的方向是從上到下為白色到淺灰色的漸變效果圖。

5 然后選擇修改收縮2個(gè)像素，就是將選區(qū)收縮小2個(gè)像素，變小一些，然后再次從下向上漸變，然后alt快捷鍵復(fù)制2個(gè)，如圖所示，然后找到車的一個(gè)的圖標(biāo)按鈕，然后用磁性套索工具勾勒好，然后鼠標(biāo)左鍵拉動(dòng)到合適位置，然后選擇3個(gè)圖層，然后水平分布，和居中分布對(duì)齊。然后選擇左對(duì)齊分布，分布均勻。分布按鈕是在選擇工具上方的工具欄中，有平均分布對(duì)齊等多個(gè)按鈕。

6 然后再次用鋼筆工具勾畫另外一個(gè)車的圖標(biāo)，然后再用自由變換調(diào)整到合適位置，然后點(diǎn)擊2個(gè)圖層之后，進(jìn)行左對(duì)齊分布。分布到形狀中的最左邊位置即可。

7 再次選擇一個(gè)不同的車的圖標(biāo)設(shè)計(jì)圖片，然后用鋼筆工具進(jìn)行勾畫圖標(biāo)，或者為了方便，可以直接用魔棒工具來(lái)選擇，選中其需要圖形的一部分。

8 然后再次選中圖形，形狀圖形，全部選中相應(yīng)圖層，調(diào)整水平分布和左對(duì)齊分布。當(dāng)分布不均勻，可以按住鼠標(biāo)左鍵自動(dòng)進(jìn)行調(diào)整。

9 所有的圖標(biāo)都自由變換，調(diào)整到合適位置，如圖。按住crl+t來(lái)實(shí)現(xiàn)圖形的自由變換的內(nèi)容。如圖

10 輸入相應(yīng)的文字，文字的顏色設(shè)置為黑色，將其三個(gè)文字圖層，按住shift鍵和左右方向鍵進(jìn)行移動(dòng)調(diào)整來(lái)改變。之后將車的圖片進(jìn)行調(diào)整，便于觀看，文字進(jìn)行排版即可。

提高Web應(yīng)用程序開發(fā)的技巧

1. 自動(dòng)部署

把一個(gè)Web應(yīng)用程序遷移到生產(chǎn)環(huán)境一定要盡可能的簡(jiǎn)單，快捷。為了實(shí)現(xiàn)真正的敏捷性，跟上業(yè)務(wù)發(fā)展的步伐，必須要把Web應(yīng)用程序頻繁地部署到生產(chǎn)環(huán)境才可以，否則，延遲會(huì)跨越開發(fā)周期地堆積起來(lái)。如果把一個(gè)新版本部署到生產(chǎn)環(huán)境需要花費(fèi)兩天的時(shí)間，那么你的生產(chǎn)力會(huì)受到嚴(yán)重的影響。

2. 減少?gòu)?fù)雜性

一個(gè)應(yīng)用程序越復(fù)雜，改變它就越困難。解決方案是什么?當(dāng)發(fā)現(xiàn)一個(gè)系統(tǒng)規(guī)模太大的時(shí)候，把這個(gè)系統(tǒng)分成幾個(gè)更小的子系統(tǒng)。但是，要完成這個(gè)任務(wù)，需要這樣一種技術(shù)：既可以幫助你理解復(fù)雜的系統(tǒng)，又可以幫助開發(fā)團(tuán)隊(duì)把系統(tǒng)分成多個(gè)更容易管理的組件。

3. 從第一天起，就以生產(chǎn)為目標(biāo)

對(duì)于一個(gè)時(shí)間緊迫的業(yè)務(wù)問(wèn)題來(lái)說(shuō)，制定一個(gè)快速的解決方案，以后再修改這個(gè)應(yīng)用程序，讓它適應(yīng)生產(chǎn)環(huán)境，是十分具有誘惑力的。這似乎看起來(lái)很敏捷，但是，在現(xiàn)實(shí)中，監(jiān)控，可擴(kuò)展性，日志，用戶管理等都是不可忽略的事情。理想的解決方案是在一個(gè)可以讓你理所當(dāng)然地獲得這些功能的平臺(tái)上構(gòu)建這個(gè)Web應(yīng)用程序。

4. 影響分析

要快速地進(jìn)行改變，團(tuán)隊(duì)需要確定這些改變不會(huì)破壞已經(jīng)完成的工作。通過(guò)以下三個(gè)步驟，這個(gè)問(wèn)題會(huì)被最小化：首先，在開發(fā)過(guò)程中，使用影響分析工具：如果一個(gè)數(shù)據(jù)庫(kù)的變更會(huì)破壞業(yè)務(wù)邏輯，那么這個(gè)工具需要馬上顯示出來(lái)。其次，進(jìn)行回歸測(cè)試。最后，確保變更的影響可以被度量，尤其是把生產(chǎn)性的數(shù)據(jù)放到生產(chǎn)性的服務(wù)器中的時(shí)候。

5. 在知識(shí)傳遞方面進(jìn)行投資

人員離職，由不同的團(tuán)隊(duì)負(fù)責(zé)開發(fā)和維護(hù)，或者必須把團(tuán)隊(duì)重新分配到不同的項(xiàng)目中，這些都是需要在知識(shí)傳遞方面進(jìn)行投資的理由。但是，不要把知識(shí)傳遞的重?fù)?dān)壓在開發(fā)者的肩上。文檔是無(wú)法滿足這方面的需求的，走查代碼比較緩慢，而且也比較困難。應(yīng)該使用領(lǐng)域特定語(yǔ)言或可視化的語(yǔ)言，把這個(gè)工具交給工具來(lái)完成。

6. 靈活控制

在面對(duì)需要兩天才能批準(zhǔn)遷移到生產(chǎn)環(huán)境的官僚化流程的時(shí)候，只需要10秒鐘的部署流程的優(yōu)勢(shì)徹底喪失了。要實(shí)現(xiàn)真正的靈活性，有兩件事情是必需的：全面問(wèn)責(zé)制——如果問(wèn)題發(fā)生的時(shí)候，知道應(yīng)該向誰(shuí)尋求幫助;最重要的是，可以回滾一個(gè)不太成功的部署。

7. 和項(xiàng)目干系人進(jìn)行合作

越早獲得項(xiàng)目干系人的反饋，Web應(yīng)用程序開發(fā)就會(huì)越早走上正軌。如果方向錯(cuò)誤的話，開發(fā)速度再快也沒(méi)有意義?？紤]到這一點(diǎn)，項(xiàng)目干系人可以很容易地提供關(guān)于他們想看到哪些改進(jìn)的反饋是至關(guān)重要的。

看起來(lái)好像有很多工作需要做

的確——這些步驟都不是一觸而就的(但是，比起獨(dú)角獸飼養(yǎng)場(chǎng)來(lái)說(shuō)，它們要更容易一些)!但是，通過(guò)這些技巧，開發(fā)團(tuán)隊(duì)的生產(chǎn)力會(huì)得到顯著的提高。

網(wǎng)頁(yè)制作常見問(wèn)題

1.超鏈接訪問(wèn)過(guò)后hover樣式就不出現(xiàn)的問(wèn)題

被點(diǎn)擊訪問(wèn)過(guò)的超鏈接樣式不在具有hover和active了, 解決方法是改變CSS屬性的排列順序: L-V-H-A

ps：好在自己一開始書寫時(shí)就沒(méi)有把這四種樣式寫全過(guò)，我只寫 a:link ，a:hover ，一直也沒(méi)出現(xiàn)什么問(wèn)題，后來(lái)發(fā)現(xiàn)ie6下a:visited 和 ff下的顏色不一致，這才發(fā)現(xiàn)這一個(gè)問(wèn)題?？磥?lái)沒(méi)有問(wèn)題也不代表書寫正確。

2.IE6的雙倍邊距BUG

浮動(dòng)后本來(lái)外邊距10px,但I(xiàn)E解釋為20px,解決辦法是加上display:inline

ps：剛開始接觸這一工作的時(shí)候真的是不知道怎么回事，還以為是各個(gè)瀏覽器之間的解釋不同，制作的時(shí)候只能小心意義的以ie6的寬度來(lái)定義，可惜ff 和ie經(jīng)常預(yù)覽效果不一致，被某些人抓住不放，當(dāng)時(shí)很是氣氛和郁悶，一氣之下瘋狂百度和谷歌，可惜那時(shí)候抓不住關(guān)鍵詞，走了不少?gòu)澛凡耪业絾?wèn)題答案，好在現(xiàn)在解決了。Y(^_^)Y

3.為什么FF下文本無(wú)法撐開容器的高度

標(biāo)準(zhǔn)瀏覽器中固定高度值的容器是不會(huì)象IE6里那樣被撐開的,那我又想固定高度，又想能被撐開需要怎樣設(shè)置呢?辦法就是去掉he ight設(shè)置min-height:200px; 這里為了照顧不認(rèn)識(shí)min-height的IE6 可以這樣定義：

div { height:auto!important; height:200px; min-height:200px; }

4.為什么web標(biāo)準(zhǔn)中IE無(wú)法設(shè)置滾動(dòng)條顏色了

解決辦法是將body換成 html

ps: 當(dāng)時(shí)被要求要重新定義滾動(dòng)條的時(shí)候，我查到了兩個(gè)方法，一種如上，一種是js仿制滾動(dòng)條，我應(yīng)用的是上面的這種，但是發(fā)現(xiàn)不兼容IE，后來(lái)不了了之了，再后來(lái)偶然間才發(fā)現(xiàn)了這個(gè)解決辦法。

5.為什么無(wú)法定義1px左右高度的容器

IE6下這個(gè)問(wèn)題是因?yàn)槟J(rèn)的行高造成的，解決的方法也有很多，例如：overflow:hidden | zoom:0.08 | line-height:1px

6.怎么樣才能讓層顯示在FLASH之上呢

解決的辦法是給FLASH設(shè)置透明

7.怎樣使一個(gè)層垂直居中于瀏覽器中

這里使用百分比絕對(duì)定位，與外補(bǔ)丁負(fù)值的方法，負(fù)值的大小為其自身寬度高度除以二

ps:margin的值就是div寬度的1/2;

在網(wǎng)頁(yè)上顯示日期的兩種方法

在上網(wǎng)的時(shí)候，經(jīng)常會(huì)在一些網(wǎng)頁(yè)上看到當(dāng)前的日期，如“今天是×年×月×日星期×”等字樣。為了顯示系統(tǒng)當(dāng)前的日期，一般采用腳本語(yǔ)言VBScript或javascript，兩種語(yǔ)言有其各自的特點(diǎn)，特別在網(wǎng)頁(yè)教學(xué)中，通過(guò)這兩種語(yǔ)言的運(yùn)用和對(duì)比，能達(dá)到較好的教學(xué)效果，現(xiàn)分別介紹它們的設(shè)計(jì)過(guò)程。

一、采用VBScript腳本語(yǔ)言

用VBScript腳本語(yǔ)言來(lái)顯示系統(tǒng)當(dāng)前的日期，通常使用其內(nèi)部提供的日期和時(shí)間函數(shù):

Date——返回系統(tǒng)日期

Weekday(x)——返回日期x是星期幾

Year(x)——返回日期x的年份

Month(x)——返回日期x的月份

Day(x)——返回日期x的日期

二、采用javascript腳本語(yǔ)言

用javascript腳本語(yǔ)言來(lái)顯示系統(tǒng)當(dāng)前的日期，通常使用其內(nèi)部提供的Date對(duì)象，該對(duì)象可以用來(lái)處理有關(guān)日期和時(shí)間的操作。利用Date對(duì)象中以下幾個(gè)方法來(lái)顯示日期:

getDate()——獲得當(dāng)前的日期

getDay()——獲得當(dāng)前的星期

getMonth()——獲得當(dāng)前的月份

getYear()——獲得當(dāng)前的年份

設(shè)計(jì)時(shí)進(jìn)入HTML編輯方式，在需要顯示日期的位置插入如下代碼:

以上兩種方法都能顯示系統(tǒng)當(dāng)前的日期，它們各具特色，各有所長(zhǎng)。很顯然，VBScript和javascript腳本語(yǔ)言在格式上有明顯的差別，初學(xué)者很容易將它們混淆，造成程序在格式上的嚴(yán)重錯(cuò)誤。