>即時新聞-熱門

显示标签为“網頁設計”的博文。显示所有博文
显示标签为“網頁設計”的博文。显示所有博文

2009年3月15日星期日

相關色彩網站 - 由大師級的邱老師提供

p相關色彩網站

http://www.iamcal.com/toys/colors/

http://www.toledo-bend.com/colorblind/Ishihara.html

http://www.colorschemer.com/

http://kuler.adobe.com

2009年3月12日星期四

4個步驟 - 申請PHPMYSQL網站空間

大家好 這是由邱老師提供的訊息

我已申請 , 很方便
http://www.hostse.com
以下是測試網站網址
http://alexmysir.hostse.com
這是一間不錯的台北飯店喔

2009年2月18日星期三

網址前的圖示設計

可以玩玩看喔
請於<HEADh與</HEAD>之間加入下列內容
<link rel="icon" href="/lkk.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/lkk.ico" type="image/x-icon" />

當然LKK。ICO請使用繪圖軟體編輯16PX*16PX解析度為72是RGB就可以了

2009年1月14日星期三

HTML 的表格自動換行

網頁班的同學實力真的很好
問了這個問題
請於HTML中加入下列語法可解決問題喔
原HTML內容
<table width='60%'><tbody><tr><td>回覆人</td></tr>
<tr><td>回覆內容</td></tr>
</tbody></table>

設計自動換行

<table width='60%' style='table-layout:fixed' >
<tr ><td>【回覆人】</td></tr>
<tr ><td style='word-WRAP: break-word'>【回覆內容】</td></tr>
</table>


1 於 TABLE中加入 style="table-layout:fixed"
2 於需要自動換行的欄TD 中加入style="word-WRAP: break-word"

解決方案請自行找CSS , HTML語法

2009年1月9日星期五

網站企劃書範本



這昃本人的網站企劃書範本 僅供參考



















網站名稱:
伯昌資訊有限公司商務網
前言:
很高興巨匠電腦舉辦這個活動,讓老師們可以設計心中未來上課教導學生們的網站,我一直認為應該給學生一個真正的商業網站,所以為了這次活動特別服務這家公司,這家公司也很樂意配合。
網頁設計除了美學、動畫、相信所有的網站要的還是實務。因此,本人參加此次活動把主軸放置於實用性,正好許多網頁的學生提出上課需求,也正好應證本人的想法是對的。學生要的也是實用的網頁設計,學生要的也正是巨匠可以給的課程內容。
目標:
本人架設本網站正確的時間是在2008/2/25開始,所以我特別命名「不可能的任務」。因為本網站從申請建置規劃,程式設計,網頁版型到資料測試皆是從零開始打造。而本網站的目標是在電子商務,可以達到線上交易,希望可以成為線上電腦交易的前十名大賣場,雖目前有些機制都在建購中,本網站希望這可以成為巨匠老師大家教導學生實務的方向,也是我們向前邁進的重要目標。
製作理念方法
Ø 緣由
本網站所有的基礎設計都是符合公司這次比賽的要求,從版型到動畫乃至於網頁整合資料庫皆採用上課使用的軟體完成。本網站版型軟體使用FIREWORKS建置 , 動畫部份則使用FLASH , 網頁則由DREAMWEAVER擔任製作,資料庫部份則採用自由軟體PHP MYSQL設計。
為了實現本網站的建置,本人以「伯昌資訊有限公司」的電腦主機為伺服務器,並申請一個固定IP,也有了自己的網域名稱,網址為:http://www.bhi.com.tw/ ,為了教導學生的實戰本人於參加日2008/2/25後的網頁設計課程中,皆請上課學員落實測試。因為「伯昌資訊有限公司」日後經營便以此次參加比賽的內容為其公開的網站,因此,這次的網頁比賽便是讓本網站快速成形的主因,更期待於網頁設計中佔有一席之地,可以為此公司進行網站行銷,這就是本人參加比賽的緣由。
Ø 相關網站
本網站是屬於商業網站,是真正可以讓上課學員了解如何透過網頁設計課程製作出的商業網站,而本網站具有線上採購,留言,以及後台設計的功能。這是為了讓學員在結束課程後,可以能夠擁有真正找到網頁設計工作的能力與實務經驗。
而類似這樣的相關網站相當多,本網站設計希望可以擺脫複雜的商品販售網頁,進而設計上走向較為寬鬆。評審們可以參考的網站,請以下列網站和本網站做一比較。
泓磊科技股份有限公司 : http://www.arcon.com.tw/
D-Link全球營運總部 : http://www.dlinktw.com.tw/
趨勢科技 : http://tw.trendmicro.com/tw/home/
Ø 創意點
「伯昌資訊有限公司」是屬於一般的小型企業公 – 資本額有500萬左右,因此設計上採用簡單明確的網頁設計內容為主,但是又要兼具網站基本的功能,所以,本人於設計過程中與該公司經營者多次討論,網站朝電子商務方向設計,因而有一些功能至今尚未完成。例如:線上銀行SSL的交易,伯昌目前正向銀行交涉中。
除了上述的網站行為目前尚在設計中,本網站大致的幾個創意點如下:
Ø 創意點一:
首頁的商品資訊是由廠商進貨後,內部員工經由員工專區鍵入商品資訊後,即可立即自動更新商品的網頁設計。評審們可以經由下列方式進行測試 。
A 上網下載任意商品圖片(須合法公開的) ,請評審自行儲存檔案。
B 點選 任何一頁的員工專區 , 以「bo002」登入帳號、「111111」登入密碼。
C 點選 商品資訊、點選 新增商品 選項 ,依序輸入商品資料,上傳圖片檔案,點選新增商品鈕, 即可完成廠商日後新增商品的步驟。
D 請返回首頁,重新整理,即可得知首頁網站的商品異動了。

首頁的商品設計重點在於免除廠商日後維護的問題。

Ø 創意點二:
網頁版型使用率高是為了統一網頁的設計手法,可以讓廠商藉由版型的修改。完成所有頁面的修正。本網站共使用前端網頁版型、後台網頁版型共四種。評審們可以經由下圖了解版型內容
主版型 :






預期遭遇問題和解決方式

目前本網站面臨的問題是網路資訊更新,目前還是以人工更新,正朝向自動更新設計中,而產品的替換須透過廠商告知我們才可以下架商品。
另外人員的培訓,欠缺網頁設計的技術,也沒有網站資料庫的觀念。
以上是本網站的缺點,正在改進中

網站行銷方式

目前本網站行銷的方式是透過電子報,BLOG及討論區的方式進行。目前還是起步期,正朝向日後自動寄發電子報的設計,自動更新BLOG的替換資訊。
Ø 網頁優化
網站的排序確實會影響客人的多寡(網站的排名越前面,愈多客人可以看到,當然來訪的客人就越多),想要增加網站曝光度要多多充實網站的內容,優化網站的關鍵字,多做網站的外部連結,就可以經過搜尋引擎自然排序方式(而非購買關鍵字廣告),達到排名優先的效果。就結果面言,自然排序的廣告效果比付費購買關鍵字廣告的效果為佳,因為一般客人不會有興趣去點選有顏色的關鍵字廣告。

Ø 自行宣傳方式
以電子郵件向認識的人遞名片推銷公司網站,傳遞公司資訊給相關行業及個人認識管道。
在成員個人部落格連結及推介公司。
與同業間交換連結。
Ø 付費廣告
Ø 關鍵字廣告
根據調查,超過85%的網路使用者會使用搜尋引擎查詢他們想要尋找的產品或服務。如果網站能成功的登錄到搜尋引擎,又能被搜尋者查詢到的話,網站人潮將大幅增加,搜尋引擎己經成為網站站主最佳的網路行銷管道。但調查又顯示,大部份的搜尋者只能耐心看完前30筆之內的搜尋結果。排名在前十位的頁面檢索將掠去此關鍵詞查詢訪問量的60-65%;位於11-20排名的頁面檢索將奪得20-25%的訪問量;而排名在21名後的所有頁面檢索只能分享3-4%的訪問量 。

Ø 入口網站廣告
google –以搜尋起家 (主要經濟來源--關鍵字收費)
yahoo - 入口網站 (廣告)
msn - 入口網站 (廣告)

gmail.comgoogle、yahoo、msn 這三者的競爭策略有什麼應用? google -- 搜尋,提高電子郵件服務容量 2G,Google Base,Google Videoyahoo -- 提高電子郵件服務容量 1G ,即時通和MSN聯手,知識+ ,自行發展搜尋引擎核心 ,Widget工具,跟進部落格
msn -- 提高電子郵件服務容量 250MB,MSN和即時通聯手, MSN spaces



待續.....................

給網頁設計班的資訊 - 企劃書撰寫

網站名稱
前言
目標
製作理念及方法
緣由
對象分析
相關網站(之前相關的資源)
創意點
預期遭遇問題和解決方式
行銷方式
執行時間和流程
一、工作流程二、進度表

參與人員
一、組織圖二、職權分配

網站規劃
一、網站架構 架構圖二、表現方式三、製作技術四、資料來源
預期成果


結果效果
可參考下列知名網站
http://www.wbsa.com.tw/WBSA世界商務策劃師聯合會台灣辦事處網站裡面有一些企劃教材可以免費下載
http://www.bplan.com.tw/
創新企劃顧問公司

2008年8月4日星期一

DREAMWEAVER - 預留影像

以下回答美女CINDY的問題
1 進入DREAMWEAVER
2 開新檔案 / 插入 / 表格 / 2列4欄 / 設定寬600像素
3 請將第一列合併 / 設定高度400像素
4 設定 第二列高度 120像素 / 每一欄寬 150像素
5 於第二列第一欄到第四欄分 插入 / 影像[寬150 * 高120 像素]
6 選取 第一列第一欄 / 插入 / 影像物件 / 預留影像 / 設定影像名稱(MY) / 設定寬700 , 高400 / 確定
7 選取第一列第一欄的影像
8 視窗 / 行為 / 選取 + / 對調影像 / 設定影像名稱(MY) / 設定瀏灠影像 / 確定
7 選取第一列第二欄的影像
8 視窗 / 行為 / 選取 + / 對調影像 / 設定影像名稱(MY) / 設定瀏灠影像 / 確定
7 選取第一列第三欄的影像
8 視窗 / 行為 / 選取 + / 對調影像 / 設定影像名稱(MY) / 設定瀏灠影像 / 確定
7 選取第一列第四欄的影像
8 視窗 / 行為 / 選取 + / 對調影像 / 設定影像名稱(MY) / 設定瀏灠影像 / 確定

如此就可以完成CINDY的設計了 , 不過圖要事先處理喔

2008年7月20日星期日

DREAMWEAVER小圖變大圖的做法

關於CINDY的問題回答如下
做法有二種
方法一
1 於DREAMWEAVER中 , 開新檔案 / 插入影像[大圖 , 尺吋:800*600]
2 調整圖片大小 [小圖 , 尺吋:100*100 , 小圖失真看不出來]
3 先儲存檔案 / 請設定連結至原圖
4 再儲存檔案 [檔案名稱不可以有中文字喔含路徑 ]


方法二

1 於DREAMWEAVER中 , 開新檔案 / 插入 / 表格[4*4]
2 調整表格大小 [左側3*3 , 執行合併 , 放大圖用]
3 插入 / 影像物件 / 給名稱 [myphoto]
4 於其他位置插入小圖 / 先儲存檔案
5 點選小圖 / 視窗 / 行為 / 設定變換影像
6 設定圖片內容 / 再儲存檔案 [檔案名稱不可以有中文字喔含路徑 ]

註 : 這是行為設計的方法喔

2008年3月8日星期六

請大 - 網頁色彩或其他建議

這個網站 是全新的設計
首頁的圖片是由資料庫來的
廠商增加產品 圖片會自動帶出
目前只放4張 因為我要測試
其他部份同學們可以幫我測試喔
員工專區 - 我沒有開放
您可以測試留言 建議 其他的結構或色彩
謝謝大家 - 這個網站是朝電子商務方向設計
日後會再改進其他功能
網址 : WWW.BHI.COM.TW

2008年3月4日星期二

HTML的語法一

<img>
在<img>裡面,有一些屬性 
屬性 說明 
border 邊界框的大小,單位為圖素。
alt 圖形的替換文字顯示,若圖片存在,則為說明文字。
src 卻指定圖檔的路徑及名稱,src是source之縮寫。
align 圖片與說明文字對齊
vspace 設定文字與圖片的上下間隔
hspace 設定文字與圖片的左右間隔
top 將圖片與說明文字與圖片上方對齊。
middle 與圖片中間對齊。
bottom 與圖片底部對齊。(預設)
表格 <table></table>
列 : <tr></ tr>
欄 : <td>1</td><td>2<td>3
超連結
< A 內容> 電腦 </A>
內容 : 
郵件連結:A Href="mailto:LISA.ALEX@MSA.HINET.NET"
BBS連結 :A Href="telnet://203.72.66.7"
FTP連結 :A Href="ftp://FTP.HINET.NET"
NEWS連結:A Href="news://news.edu.tw"
Gopher連結:A Href="gopher://gopher.edu.tw"
檔案連結:A Href=http://myalex.hinet.net/a.zip
序列設計

符號
<ul>
<li>電腦
<li>電腦
<li>電腦
</ul>
編號
<ol>
<li>電腦
<li>電腦
<li>電腦
</ol>

背景
<body background="圖片完整路徑">
<body bgcolor=#rrggbb>
標題字
< hn n=1~6 align="left,center,right" >文字</hn>預設align=left

HTML的語法

HTML文件分為三個區塊: 
1. <HTML>  ….. </HTML> 
      宣告此份文件為HTML文件,讓瀏覽器能判定之 
2. <HEAD>   ….  </HEAD> 
      標題區塊,定義文件的標題、網址及文件本身的定義 
3. <BODY>   ….  </BODY> 
       文件的主體,實際內容存放於此
文字的標記: 

• <b> </b>:加粗 
• <i> </i>:變斜體字 : 
• < blink >< /blink >閃爍
• <u> </u>:加底線 
• < strike >文字< /strike >刪除線
• < sup >文字< /sup > 上標
•  < sub >文字< /sub > 下標
•  < tt >文字< /tt >打字機字體

• <font size=6 color=red face="標楷體">什麼效果? </font> 
排版標籤

< Br > 斷行標籤
< P > 分段標籤

< P Align="對齊方式" > 文字對齊設定 文字靠右Align="Ritht"、靠左Align="Left"及置中Align="Center"
< Pre > 要保留的格式 < /Pre > 保留原來排版格式標籤
< Hr > 水平線標籤
< BlockQuote > 要縮排的文字 < /BlockQuote > 縮排標籤
< Div > 區塊 < /Div < 區塊標籤\
< Span > 文字 < /Span > 區塊不斷行標籤

2008年2月22日星期五

網頁設計 - 滑控制走或停

<marquee direction="left" scrollamount="5" scrolldelay="100" loop="ture" width="460" height="400"onmouseover="stop()" onmouseout="start()">
您的文章或圖片
</marquee>

2008年2月19日星期二

網頁設計範本

這個網站不錯喔
http://www.website-solution.net/templateshop/templates2.html?category=34

無障礙網頁設計

我最近對這個議題相當有興趣 , 也符合Macromedia Dreamweaver和Flash上課教學,因此我會加入製作符合無障礙網頁的資訊:
日本富士公司的ColorSelector(色彩選擇器),能幫助選擇良好的前景與背景色,避免選用不利於色盲患者辨別的顏色。
專有名詞:
cataract(白內障)
protanopia(紅色盲)
deuteranopia(綠色盲)
tritanopia(藍色盲)
日本富士公司的ColorDoctor(色彩醫生),能模擬視障患者見到的色彩。
Flash檢測程式(SWFObject),取代Macromedia Flash和Dreamweaver預設在網頁中嵌入Flash影片的方式,能判斷用戶端是否有安裝Flash外掛程式,並且嵌入適當的說明文字。
螢幕朗讀程式的模擬器(需要安裝Shockwave外掛程式),讀者可以從這個模擬器體驗視障人士如何瀏覽網頁。

參考資料來源的網站 : http://swf.com.tw/

2008年2月17日星期日

無障礙網頁的設計注意事項

以下是個人多年寫網頁的心得 , 想必是許多網頁設計者都有的報告內容
我稍做整理與您分享
1 . 網頁表格用部份
表格少用巢狀表格(最多二層)
  表格的標題最好不要超過二行
表格的HTML語法少用 TH 多用TR

2. 其他網頁的注意事項
使用 CSS 樣式表一定要確定可以用喔
 頁框的檔案來源不可以是動態網頁(ASP,PHP)
設計網頁物件使用事件行為時,以滑鼠操作制要減少次數喔

3. 網頁圖層與樣式的問題
 少用DIV圖形影像的方式呈現網頁內容
 在DOCTYPE標籤中,使用標準規範的敘述以識別HTML版本類型
  多使用共用樣式設計網頁排版與套用網頁內容
不要使用非絕對尺寸(如像素) 的設定
  網頁的header標籤少用CALL不明指令

4 其他注意事項
建議少用保嵌入式 , 多用連結(連結可共用)
對所有網頁內容元素,最好有滑鼠以外的操作方式(無障礙)
網頁連結少用開新視窗的技巧(除非是別人網站)
連續的連結文字不用空白字元做間隔 (排版不易對齊)
可使用metadata標籤來記載網頁資訊
網頁一定要有標題
要加入網頁導覽設計
可設計網頁內容搜尋
網頁語系的使用少用ASCII
 

無障礙網頁設計準則

以下資料來源 : http://www.lcjh.tpc.edu.tw/Net-history/enable.htm
對於網頁開發人員在設計網頁時應該依循的作業方式和考量原則。
以下簡略說明 : 無障礙網頁設計準則
一、無障礙網頁可及性設計原則
  網頁開發人員在規劃網站的架構、資源內容的整理和呈現的處理、網頁相關技術的取捨等相關因素時,應該依循下列四個無障礙網頁可及性設計原則。
原則一:多媒體相關資訊的可及性  
原則二:網頁結構和呈現處理的可及性
原則三:網頁開發和輸出入裝置相關技術處理的可及性
原則四:網站瀏覽機制的可及性
二、無障礙網頁設計程序
步驟一:網站規劃階段
步驟二:網站設計階段
步驟三:網站檢測階段
步驟四:網頁認證階段

2008年2月14日星期四

網頁設計 - 水中倒影(DREAMWEAVER)

今天想到以前的設計 , 試試DREAMWEAVER的功能您可以使用下列步驟完成圖片的水中倒影
1 插入您的圖片 , 給予圖片命名(MYWATER) , 名稱可以自訂
2 按鍵盤SHIFT + ENTER(換行不換段落)
3 切換至程式碼 , 加入下列程式
<script language="JavaScript">
function myshow(){
setInterval("mdiv.filters.wave.phase+=10",100);


if (document.all){
document.write('<img id=mdiv src="'+document.all.mywater.src+'" style="filter:wave(strength=3,freq=3,phase=0,lightstrength=30) blur() flipv()">')
window.onload=myshow


</script>
4 儲存檔案 / 按F12瀏灠結果

網頁設計 - 調整字型大小(無障礙)

終於讓我找到方法了 - 研究一個晚上的JAVASCRIPT 搭配CSS就可以做到了
請依下列步驟執行 (如複製下列語法者 , 請注意自行將全型轉半型即可運作)
1 開啟您已設計好的網頁 ,並進入程式碼編輯畫面
2 於</TITLE>之後加入下列CSS語法
<style type="text/css">
<!--
.mybig{font-size:24px}
.mymil{font-size:14px}
.mysmall{font-size:10px}
-->
</style>
3 於CSS之後再加入下列 JAVA SCRIPT 語法
<script language="javascript">
function small(mysize)
{
if(mysize=="mybig")
{document.all.myfont.className="mybig"}
if(mysize=="mymil")
{document.all.myfont.className="mymil"}
if(mysize=="mysmall")
{document.all.myfont.className="mysmall"}
}
</script>
4 於<body>之後加入下列更改字型的連結內容
<a href="#" onClick="small('mybig')">大字</a><a href="#" onClick="small('mymil')">中字</a><a href="#" onClick="small('mysmall')">小字</a>
5 請於所有要變動的文字前加入下列HTML語法
<div id="myfont">
您的文章內容
</div>
  

2008年2月5日星期二

網頁設計 - 防拷設計

這個方法是採用WINDOWS內建EVEN的技巧 , 供大家參考
不能選範圍 , 滑鼠右鍵也失效 , 也不可以儲存檔案
無間學到的
1 利用網頁設計軟體 設計您的美麗網頁
2 切換到可以編輯HTML的程式設計畫面
3 於 <HTML>之上方加入下列語法

<body ONDRAGSTART="window.event.returnValue=false" ONCONTEXTMENU="window.event.returnValue=false" onSelectStart="event.returnValue=false" >
<HTML>
<HEAD>
<TITLE>ALEX BLOG</TITLE>

</HEAD>
<BODY >
妹咕學習網
</body>
</html>

註 : 記得只有<html>之前的內容喔 , 要複製請轉成半型再進行貼上

2008年1月28日星期一

網頁圖文防止被複製的方法

這問題是一位學生問的
個人認為有三種以上的方式
1 設定按滑鼠的功能
2 設定圖文的格式為FLASH
3 製作浮水印

1 設定按滑鼠右鍵的功能 , 請複製下列程式 , 即可完成這個問題
程式如下 : 程式來源網站百寶箱(DOB.TNC.EDU.TW)
<script language="JavaScript1.1"> 
<!--
function right(e) { 
if (navigator.appName =='Netscape'&& 
(e.which ==3|| e.which ==2)) 
return false; 
else if (navigator.appName == 'Microsoft Internet Explorer' && 
(event.button == 2|| event.button ==3)) { 
alert("哈哈哈!你完了...")
var x = Math.round(Math.random()*100)
for(i=x; i>0; i--){
alert("上帝處罰你要再按 " + i + " 次滑鼠才能結束")}
alert("上帝的處罰結束")
alert("下次不要亂按右鍵,知道嗎?")

return false; 
} 
return true; 
} 
document.onmousedown=right; 
if (document.layers) window.captureEvents(Event.MOUSEDOWN); window.onmousedown=right; 
-->

2 請將設計好的文字或圖片 , 使用FLASH轉存成SWF格式 , 或者PDF檔設定防複製也可以唷
3 利用任何影像軟體 , 在圖片上增加大型文字圖層 / 設定半透明度 , 這樣別人想複製
圖片也都沒有興趣了

 
妹咕數位學園歡迎網友們來信指教 妹咕信箱