我會寫這一篇就是想要說所謂的速成大概就只能到上一篇為止了
因為學到上一篇的放格子祕技
所以我的網頁終於排版完成……
這是我做的活動首頁，用google chrome看到的結果，上面的圖都是借別人的圖或是自己先隨便做做的，所以下面其實根本沒有贊助，但是我們中心的小姐說我們還可以再放什麼圖片之類的
寫網頁就像是寫程式一樣
你永遠不知道會遇到什麼bug
所以問題又出現了
我不知道為什麼IE瀏覽器在圖片增加超連結的時候外圍會增加框線
但是google chrome卻沒有發生這個問題
這是用IE開的結果，完全不知道為什麼會有框阿!!!!!!!!
QAQ
QAQ
QAQ
這個問題困擾我兩天
最後還是請教google大神解答→http://dreamweaver.com.tw/index.php?fid=3&viewtopic=4983
原來原因是因為<img>會繼承<a>標籤
所以我們在css裡面加上消除標籤的設定
a img {
border-style:none;
}
然後我的任務就暫時告一段落
我現在可以理解網頁設計跟美工設計分開的感覺了
由於美工設計的人不是我
(雖然有點難過，可是我不像設計系的這麼會畫圖，肯定會畫很久)
所以我必須要跟他討論
其實這應該是我前面說的設計網頁的第二步
不過因為這個活動網頁中心小姐一直跟我說「沒關係，我們只要有60分就好了!!」
中心小姐相信我的設計
所以就讓我先做了
然後………………………………
然後………………………………
然後………………………………
這是最後我交出的網頁
等美工設計的人設計完之後，我的心就碎了………
……
總之，就是跟我想的完全不一樣
經過這件事情之後，再度的覺得圖片對網頁來說真的很重要
但是這是工作，並不能照著我的喜好設計
不管我喜歡不喜歡，我還是要負責把網頁設計好
畢竟現在我是因為需要這份薪水而不是自己興趣
於是我開始照著美工設計者跟中心小姐的要求修改網頁
首先他們要求我希望可以讓滑鼠在連結的圖片上換圖片
剛開始是希望可以用淡出淡入的方式換圖片
但是我查過很多都是需要用到javascript的語法
我真的不會寫阿QAQ!!!!!
就算照著程式碼複製貼上
也會不知道為什麼突然會有什麼瀏覽器沒有反應(明明上面說可以支援喔!!)
所以最後宣告放棄
進而轉向只要可以換圖片就好
於是
我找到了這個網頁
http://blog.cscworm.net/?p=1226
<img title="圖片標題" onclick="window.open('網址')" onmouseover="this.src='圖片2路徑(滑鼠滑過去的圖片)'" onmouseout="this.src='圖片1路徑(滑鼠移出後的圖案)'" src="圖片1路徑(一開始顯示的圖案)" />
可是這個語法打開網頁的方式是會另外再開一個視窗的window.open('網址')，所以我就需要去找怎麼樣才可以在同一個視窗打開
http://stackoverflow.com/questions/16130871/how-do-i-open-a-link-in-the-same-window-and-tab-using-the-onclick-event
<img title="圖片標題" onclick="window.location.href='網址'" onmouseover="this.src='圖片2路徑(滑鼠滑過去的圖片)'" onmouseout="this.src='圖片1路徑(滑鼠移出後的圖案)'" src="圖片1路徑(一開始顯示的圖案)" />
後來就找到原來可以用window.location.href='網址'
找到之後整個就很高興
開始打開各種瀏覽器測試也沒問題(其實才測3種拉…IE(10, 11), Google Chrome, Mozilla Firefox 33.1 )
本來我以為這樣就沒事情了
結果!!
中心小姐跟我說用IE8是看不到圖片的
頓時我晴天霹靂
於是我又開始找應該要怎麼樣才可以顯示圖片
這一次我花了一個禮拜的時間
連証明這個語法可以用在IE8的網頁都找到了
http://yudans.net/javascript/index.php?action=code&z=4&num=1
Internet Explorer 6.0
Internet Explorer 7.0
Internet Explorer 8.0
Mozilla Firefox 2.0
Mozilla Firefox 3.0
Google Chrome
Safari 3.1
Opera 9.5
還是無解，可是心中卻冒出了一個疑問……
後來我沒辦法，又開始嘗試javascript
在一次嘗試之中，我需要修改圖片
因為我沒有photoshop
所以我打開了photoimpact x3
這時候卻跳出這個訊息
然後我才突然發現原來就算附檔名一樣
檔案資訊還是可能有那麼一點不同的
這個發現讓我更確定心中的疑問
開始google找答案
最後真的給我找到了
http://www.popo.tw/books/27449/articles/3471775?page=5
這個網頁裡面有一個人有提到 :
如果書封變叉燒包，那有可能是你沒將圖設為RGB唷，有些電腦無法看到CMYK色彩的圖。
於是
我將圖片另存為RBG的檔案格式
再度請中心小姐幫我看一下網頁
終於!!圖片看得到了!!!!!!!
QAQ!!!
是圖!!!!
是圖的問題阿!!!!
我們在處理問題的時候總是不會先懷疑別人而是懷疑自己
結果反而敗在這一點上面阿……
後來，我們真的把網頁掛上去了
因為東西都沒有問題了
只是一些細部內容排版的問題
例如文字怎麼擺放，文字的顏色等等
不過我們的確還是發現一個問題
那就是我們的footer頁尾的內容有點多
中心小姐希望字可以再小一點
讓內容可以縮成兩行
由於我本來就已經設定字體大小是11px了
所以覺得不妥想說改好馬上給小姐看讓她打消這個念頭
結果沒想到改好之後打開google瀏覽器一看竟然還是一樣
這讓我們兩個都非常驚訝
然後我又開了其他的瀏覽器但是卻是真的有縮小
原來google瀏覽器的字體大小最小只能顯示12px
(因為我原本設定的11px跟12px大小只差一點，沒有馬上就發現)
所以我又再去找了解決的方法
http://blog.xuite.net/vexed/tech/59449347-Chrome+font-size+%E5%B0%8F%E6%96%BC+12px
找了發現google瀏覽器新版已經不支援舊版的寫法了
現在這一個解決方法也不知道未來哪天這種寫法google更新之後就不能用了
在要設定的CSS裡面加入這兩行
-webkit-transform : scale(0.91);/*Chrome 最小字形 12px 限制*/
-o-transform : scale(1);/*支援 Opera 需求*/
我的頁尾CSS加進去後就變這樣 :
#FOOTER h2, #FOOTER p {
font-size: 11px;
-webkit-transform : scale(0.91);/*Chrome 最小字形 12px 限制*/
-o-transform : scale(1);/*支援 Opera 需求*/
padding:1px 10px;
font-family: Calibri,Arial;
color: #FFFFFF;
text-align:center;
margin:2px auto;
}
但是這種寫法只是改變字的顯示百分比
是沒有辦法達到排版的效果的
也就是說
原本我們想要藉由字的變小讓內容可以從三行縮成兩行
但是用這種方式就算字變小了
內容也不會減少縮排
所以我後來也沒辦法
只好用比較纖細的英文字體代替
我用的是Microsoft office裡面的Calibri
只是如果對方的電腦沒有這個字體
那麼我也沒辦法了……(攤手)
請先 登入 以發表留言。