關燈 巨大 直達底部
親,雙擊螢幕即可自動滾動
第559章 老闆露一手

一個畫布。

吳振在一旁看了,忍不住說道:

“方總,您這個寬度不止1024了……”

“我知道,這正是我想說的第二點想法。”方揚含笑說道。

接著他將這個畫布的背景設定為淡灰色,然後在畫布中建了一個1024寬度的白色矩形,將其居中。

方揚指了指自己畫的這個形狀說道:

“我剛剛建立的畫布假設就是整個瀏覽器的範圍,而白色的區域則是我們網頁的範圍。老吳,我看了你做的那個網頁,整體效果非常不錯,但是應該還可以更大氣一些。”

說完,方揚也沒有多說什麼,直接操作著電腦,將吳振那個設計稿裡的網頁背景複製了過來,因為那是一個可以無限重複的類似於宣紙的背景,為了表現出效果,方揚直接使用變形工具使這張圖鋪滿整個畫布。

接著方揚又將下面的網頁區塊整體複製了過來,因為只是展示效果無需精確到畫素級別,因此方揚也只是簡單地使用變形工具讓它們佔滿表示網頁範圍的那個矩形框。

最後,方揚才開始處理原來的banner。

吳振設計的banner也是980畫素的,與整個網頁是一樣寬度。這樣看上去一整個網頁就顯得有些死板,一個長條下來,與背景形成了涇渭分明的區隔。

方揚將banner的背景摒棄,直接把那些華夏風的水墨山水全部複製了過去,並且進行了一些微調。

很快方揚就作出了一副簡單的效果圖來。

這是一個類似於“同”字的結構,外面的大框表示整個瀏覽器的範圍,裡面那個小口字則是網頁範圍,banner完全與背景融為一體,沒有明顯的邊界,甚至不少水墨元素都超出了網頁的1024寬度,撐到了外面去,整體看上去立刻就變得大氣而靈動。

方喬在一旁看到方揚簡單的幾個變動,立刻讓網頁變得好看了許多,頗有些化腐朽為神奇的感覺,她也不禁嘖嘖稱奇道:

“方揚,沒看出來啊!原來你還有這一手絕活呢!”

而吳振則認真地看了看網頁效果,他心中也不得不承認方揚這樣的設計確實比以前那個版本看上去要活潑許多,而且相當大氣。

其實在兩三年後,這種設計被廣泛應用於各個網站之中,只不過在現階段還很少有網站會採用罷了,很多人都是第一次見到這樣的設計思路,都不禁為之讚歎不已。

可吳振不光精通介面設計,而且對與html程式碼也很有研究,他在認可方揚設計理念的同時,很快就在心中推演著這樣的效果該如何用程式碼來呈現,想了很久,吳振終於忍不住皺著眉頭猶豫道:

“方總,這樣的設計思路非常棒!可是……想要實現起來似乎有些難度啊!”

吳振說完之後,心中又有些後悔。

方揚是老闆,他能提出如此建設性的設計思路,已經相當不容易了,程式碼實現上有困難,應該自己想方設法解決才對,怎麼能遇到困難就縮頭呢?那人家還要請自己這個員工做什麼?不如什麼事情都自己幹好了。

不過方揚卻並沒有生氣,他知道很多東西說穿了就是一文不值,但是在現階段,在沒有人想到那個辦法之前,卻顯得困難重重,因此他也非常理解。

所以方揚淡淡地笑了笑說道:

“老吳,我直接說說我的思路啊,就不在dw上演示了。首先這個網頁背景實現起來很容易,我注意到了這是一個可以無限重複的規則圖片,我們直接在‘body’當中設定為背景圖片,x軸和y軸重複,自然就鋪滿整個瀏覽器範圍了。”

吳振點了點頭,這個他也已經想到了,並沒有什麼難點,困難的是banner的部分。

方揚很快就說道了這裡,他指了指banner說道:

“這個也很簡單,這裡放一個寬度為1024的div,將banner設定為背景圖片就行了。不過這些水墨山水的元素,你要將畫布設定為透明的,然後切片為png格式,這樣自然就跟你剛剛那個背景圖片融為一體了。”

吳振眼睛一亮,方揚的這個思路其實很簡單,但卻很巧妙,不過自己一下子轉不過來彎罷了,方揚一提點立刻就想明白了其中的道理。

不過他很快又皺了皺眉頭問道:

“方總,還有最頭疼的一點,就是您設計的banner寬度已經超過1024了,而且還跟下面的區塊有所重合,這……這根本不可能實現的呀!”