網路城邦
上一篇 回創作列表 下一篇   字體:
網頁製作筆記
2014/07/20 17:00:51瀏覽3676|回應0|推薦10

給小宥子老師按個讚, 能這麼循序漸進的帶同學進入多變的網頁設計...

現在記錄一下,  快速鍵連結到每天進度

7/17 7/18 7/21 7/22 7/23 7/30

數位科技筆記

 預視 7/17進度圖    

      

前置作業

1. 為了版面相同, 請將工作區設為 - 傳統

   

2. 建立網站資料夾於 C 槽, 即將所有網站資料複製到 C槽根目錄下

   C:\Digital_site

現在開工囉, 首先要新增網站

1. 檔案 -> 管理網站

    

   1.新增網站 -> 2.網站名稱 (以專案名稱為名) 3.選取網站資料夾 (完成後) 

    

   4.確定   5. 完成

    

2. 數位科技(網站) -> 建立 layout.html

   

3. 開啟 layout.html, 建立主要 Div 區塊

  3.1 建立 ID: wrapper

    a. 游標置於 body/body 間

     

    b. (點擊)常用 -> 插入 Div標籤

    

    c. (ID:) wrapper -> 新增 CSS 規則

       (新增CSS規則) 新增樣式表檔 -> 確定

    

    d. (於網站根目錄) 檔案名稱 digital -> 存檔

   

    e. 進入 wrapper 的 CSS 設定

       方框 寬度 760 px

    

       邊框 right(left)  solid-1px-#666 

       (網頁內容兩側增加邊線, 在視覺上有引導作用)

    

    f: 確定後完成

   

      3.2 建立 ID:banner 

    a. 游標置於 wrapper> 和 / div 間 刪去 " id wrapper 的內容放在這裡" 的文字

       

    b. 游標在程式碼中, 按enter , 讓 wrapper> 和 / div 間有空白行

    c. 游標置於 id="wrapper" 下一行

   

    d. 按一下 Tab 鍵, 產生縮排 (方便程式檢視)

     

    e. 常用(面板) -> 插入 Div標籤 -> 

       ID: banner

       新增 CSS 規則 -> 確定

    

    f. 進入 banner 的 CSS 設定

       背景 -> Background-image : images/banner.jpg (預先完成的圖檔 760X12px)

   

       方框 760X120 px -> 確定後完成

    g: 刪除 id "banner" 的內容放在這裡

   

  h: 完成圖

   

  3.3 建立 ID:content

    a. 游標置於 /div> 後, enter。

    

    b. 游標對齊上方 ID:banner 的位置  

    

    c. 常用(面板) -> 插入 Div標籤 -> 

       ID: content

       新增 CSS 規則 -> 確定

    d. CSS 設定

       背景 -> Background-color:#FFF(為了容易區別暫設)

       方框 760X800 px -> 確定 (高度 800 為了容易區別暫設)

    e.  刪除 id "content" 的內容放在這裡  

  3.4 ID content 內 設定 ID:nav, main, ad

    a. 游標置於 content"> 和 / div 間

     

    b. 按一下 Tab 鍵, 產生縮排 (方便程式檢式)

     

    c. 插入 Div標籤 -> 

       ID: nav -> 新增 CSS 規則 -> 確定

    d. 進入 nav 的 CSS 設定

       方框 155 x 200(高度暫用) px float:left -> 確定

     

    ID = nav 完成圖

     

    e. 游標下移後, 再插入div -> ID: main 

    

       CSS 設定

       方框: 435 x 400(高度暫用) px float:left 

       背景: Background-color: 任意色(區別用) -> 確定

    f. 再插入div -> ID: ad

       CSS 設定

       方框: 170 x 300(高度暫用) px float:left 

       背景: Background-color: 任意色(區別用) -> 確定

    g: 目前完成圖

     

  3.5 建立 ID:footer

    a. 游標對齊 content , banner 的起始位置

    

    b. 插入 Div標籤 -> 

       ID: footer -> 新增 CSS 規則 -> 確定

    c. footer 的 CSS 

       背景: Background-image: bg02(5x100px的圖形)

      

       方框 寬度760px clear:both padding:top,bottom 40px

    

 4. 目前完成的程式碼

    

   目前的設計樣式

   

在螢幕上預覽的結果

  

現在開始 7/18 日的課程進度圖

一般我們會習慣不管是多大的螢幕, 網頁內容都能出現在中間, 

在此增加 body 標籤

   

CSS 樣式面板中 -> +(新增CSS標籤) -> 

   背景: background-image : banner_bg

   方框: width: 760 px

         margin -> top, bottom =0 

                        right, left = auto (水平方向置中)

  

此時預覽可見網頁內容置中了

蓋好了數位科技的大樓 (網頁版面) 後, 要開始置放所需物件囉!

我們從 content 的 nav 開始

1. 刪除不必要的文字 (id "nav" 的內容放在這裡)

   

2. 插入連結圖示

  2.1 游標置於 nav> /nav 間

  2.2 常用面版 -> 影像 -> 滑鼠變換影像

       

  2.3 進入滑鼠變換影像頁面, 選擇所需圖形

      原始影像 - 開啟頁面時圖像 (btn_new_off.gif)

      滑鼠變換影像 - 滑鼠移入時圖像 (btn_new_on.gif)

    

  2.4 自動帶入程式, 設計區-出現原始影像

    

  2.5 游標置於 / div 前, 再執行插入 滑鼠變換影像

    

      原始影像 - btn_vaio_off.gif

      滑鼠變換影像 - btn_vaio_on.gif

     

  2.6 同樣方法, 游標置於 / div 前, 滑鼠變換影像 

      原始影像 - btn_route_off.gif

      滑鼠變換影像 - btn_route_on.gif

  2.7 即時模式, 來預視頁面

      原始頁面圖形

      

      滑鼠移入時圖形

     

3. 設定連結

  3.1 新增二個新頁面 index.html, vaio.html 

    

  3.2 設定內部連結 index.html 

      A. 點擊最新產品

      B. 屬性面板 -> 連結指向 index.html

      C. 目標 _self

    

  3.3 設定內部連結 vaio.html

      同 3.2 設定, 選取 VAIO圖形,連結指向 vaio.html

      目標 _self

  3.4 設定外部連結  http://www.sony.com.tw/

      A.(點擊)維修通路商

      B: 連結 -> http://www.sony.com.tw/

      C. 目標: _blank (開新頁面)

    

4. 插入 spry 選單列

  4.1 點擊維修通路查詢圖片後, 將游標移至 / div 前

    

  4.2 spry -> spry 選單列 -> 垂直 -> 確定

   

  4.3 點擊 spry選單列 (藍色區), 出現選單列的屬性面板

   

      4.3.1 修改項目內容為外部連結

        A. 文字: 合作夥伴

        B. 連結: http://www.adobe.com/tw

        C. 目標: _blank (外部連結皆用 blank)

    

      4.3.2 修改項目內容為發送郵件

        A. 文字: 聯絡我們

        B. 連結: mailto:runalee2014@gmail.com

           (mailto: 會開啟 outlook 新郵件)

     

      4.3.3 點擊 + 可增加項目, 同理 - 可移除項目

     

      4.3.4 修改選單列為單層(移除所有副選單)

      4.3.5 完成檔

      

  4.4 修改 spry 選單列的 CSS

      A: ul.MenuBarVertical li  

         方框 width 原 8em -> 155px (=nav width)

      

      

         邊框 原無設定 -> Bottom solid-1px-#ccc

    

      B: ulMenuBarVertical 

         原top, right,bottom, left 皆 solid-1px-#CCC -> 停用邊框 全部設定

    

      C: ul.MenuBarVertical a

         字型 color #333  -> #0099CC

         背景 background-color #EEE    -> #09C

              background-image 無 -> bg02.gif

      D: ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible

         字型 color #FFF  -> #333

         背景 background-color #33C  -> #6633CC

              background-image 無 -> bg02_h.gif(自製圖檔)

5. 範本製作

  5.1 檔案 -> 全部儲存

  5.2 檔案 -> 另存成範本 -> 另存新檔 (digital)

    

      要更新連結嗎? -> 是

    

  5.3 範本檔名 -> digital.dwt 

6. 套用範本

  6.1 開啟 index.html -> (開啟)資源  -> 範本 -> digital -> 套用

    

  6.2 範本帶入 index.html

    

  6.3 設定 index.html 標題 -> 歡迎來到數位科技

    

  6.3 相同步驟將 vaio.html 套用範本

      標題 -> VAIO 系列

7. 範本設定可編輯區

  7.1 回到 digital.dwt -> 刪除 id main中不必要的文字

  

  7.2 游標置於 main'> 之後  -> 常用 -> 範本 -> 可編輯區域

  

      新增可編輯區域 -> c1 -> 確定

   

      程式碼 c1

      設計區 有 c1 符號

   

  7.3 檔案 -> 全部儲存  -> 更新範本檔案

   

8 index.html 編輯 

  8.1 可編輯區 -> 可修改內容

  

  8.2以 chrome 瀏覽

         

      以 IE 瀏覽, 有突兀的藍色框

          

 8.3 新增 CSS 樣式, 取消藍色框

      1. 新增 CSS 樣式 (類別, navitem, digital.css)

         

      2. 邊框 style none

         

  8.4 開啟 digital.dwt

       將顯示不正常的三張連結圖片套用 類別 navitem

           

       檔案 -> 全部儲存

      再以IE 瀏覽 index.html

      和chrome 畫面般, 無藍色外框了

07/21 進度

現在開始要編輯 index.html 可編輯區了

1. index 可編輯區中, 置入 swf 

  1.1 刪除 可編輯區中的所有文字, 游標停留在最前端

  1.2 插入 -> swf (swf/sony_hot_pro.swf)

      (如果IE 無法正確顯示 swf , 可先插入 1欄1列的表格, 再置入 swf)

      

  1.3 以 IE 預覽時,會出現 IE已經限制這個網頁執行指令碼或 ActiveX 控制項

      -> 允許被封鎖的內容    

     

    可正常檢視 swf 動畫

      

2. 插入最新消息表格

   預先準備好的記事本, 以 tab 鍵為欄位分格 (main.txt)

  2.1 點選 swf/sony_hot_pro.swf (程式碼也同步選取範圍)

    

  2.2 向右鍵 移一位, 游標置於 swf 檔案後 (即/object 後)

   

  2.3 檔案 -> 滙入 -> 表格式資料

      (索引標籤, 90%, 內距5, 間距2, 邊框2)

    

      表格滙入

     

  2.4 點選表格 屬性面板 -> 對齊 (置中對齊)

    

3. 修改 #main 的 CSS 樣式

  (backgroundd-color -> 無, height -> auto)

          

     修改前頁面

   修改後 

    

index.html 完成囉! 給自己一個掌聲鼓勵一下, 繼續加油!

現在進行 vaio.html ^^

1. 製作巢狀表格

   

  1.1 可編輯區, 插入 表格

   

 表格設定 3X2 435px 內距0, 間距0, 邊框0

     

  1.2 選取第一列(和第三列) -> (屬性) 合併儲存格

   

  完成圖

    

  1.3 第一列 -> 插入影像 (S36TP 435X140 px)

   

  完成圖

    

    第二列左側 -> 插入影像 (vgn_s36tp 200x134px)

   表格寬度:200px 

     

      第三列 -> 插入影像 (zoom.gif 80x20px)

    

        點擊 (zoom.gif)td -> 水平置中, 高30px, 顏色#CCCCCC

   

  1.4 a. 第二列右側 -> 表格 (4x1 .235px 0,0,0)

   

      b. 設定第二側右側 td -> 垂直 靠上對齊

   

      c. 高度設定 33px 設定顏色

   

      d. 表格內置入文字, 並水平置中

   

  1.5 完成圖

   

2. 插入文字簡介 vaio_pro.txt

  2.1 選取 大table -> 右鍵(移一位)

       

    設計區中貼上vaio_pro.txt文字

      

  2.2 插入Div標籤 vaioW 

      新增 CSS規則 

      字型 Font-size small Line-height Color #666

      方框 width 90% Margin: Right,Left auto

  2.3 產品簡介, 效能表現 -> 格式 標題 2

   

      新增 CSS 規則 -> 使用內定複合名稱

      複合: #wrapper #content #main #vaioW h2

    

        字型: Line-height: 2em, color-> #CCC

        區塊: Text-align: center

        背景: #333

      完成圖

   

  2.4 選取產品簡介 -> 編號清單 

   

3. 設定文字內容連結

  3.1 命名錨點: p1

      游標移至 產品簡介前, 

   

    常用 -> 命名錨點 p1

   

      產品簡介前會出現錨點符號, 

      若無顯示,至視覺輔助->勾選隠藏元素 

      (也可從 檢視-> 視覺輔助->隠藏元素)

   

  3.2 效能表現前, 命名錨點 p2

  3.3 選取 產品簡介 連結: #p1 

   

      選取 效能表現 連結: #p2

   

4. 回到最上部設定

  4.1 開啟 digital.dwt

      游標置於 div id =wrapper 之前, 命名錨點: 錨點名稱 home

      wrapper 上方出現錨點圖示

   

      檔案 -> 全部儲存 完成後, 關閉 digital.dwt 檔

  4.2 a. 於產品簡介文結束下方, 插入影像 back.gif(40x20px)

      b. back.gif -> 連結 #home

   

      c. back.gif -> 新增 CSS規則

      d. 類別 .back 方框 padding: left 150 px

                    邊框 none

      e. 選取 back圖示, 類別 .back

   4.3 預覽結果正常後, 複製此段至每段文之最下方

5.整體預覽, main 的介紹文超出 content 高度,

   

  編輯CSS樣式  content: 由800px 變更為 auto

   

就完成了 7/21 的進度了

7/22 進度, 

一. 現在要製作一個 Roll over Image 的頁面

 開新檔 pro_show.html

1. 插入 2X1 610-0-0-0 的表格

   

2. 設定上方td 

   常用 -> 影像 vgn_36tp_1 (600x400px)

   設定影像 ID = pic 

   

3. 下方td -> 插入 表格 1x5 600px 0 0 5

   

   選取小table 五個儲存格 寬度 20%

   

4. 小table 第1,2,3 個儲存格

   滑鼠變換影像

   原始影像, 滑鼠變換影像皆為同一張圖,

   分別 插入 -> 影像 vgn-36tp_2_s.jpg,vgn-36tp_3_s.jpg,vgn-36tp_4_s.jpg

      

5. 3小圖 -> 新增 CSS 樣式

   類別 imgSborder 邊框 border solid 1px #6CF

   完成圖

   

6. Roll over Image

  6.1 開啟面板  標籤檢視窗 -> 行為

   

  6.2 點選小圖 -> (行為面板) 調換影像

   

  6.3 影像 -> pic 

      設定原始檔為: 小圖100x67px放大的圖樣

                    vgn-s36tp_2.jpg - 600x400px

   

  完成圖

   

  當滑鼠移入小圖時 #pic 變為小圖的放大圖

   

7. 輸入標題 -> 本週最潮商品

8. 完成了, 儲存備用

二. 回到 vaio.html

1. 點擊 zoom.gif 設定假性超連結 (#)

   (僅要示意滑鼠移入時有連結符號)

   

2. zoom.gif -> 行為面格 +  

   

 -> 開啟瀏覽視窗 (設定開啟視窗為 610x500)

   

   完成圖

  

3. 預覽 

   點擊 zoom 圖, 可開啟 "本週最潮頁面"

  

三. 編輯 digital的 ad 區塊

1. 插入表格 6x1 100% 0 0 0

   

2. 第 3, 5 格打上文字 (td 高度 40px 水平置中)

   

3. 4, 6 格插入 swf, 水平置中

4. 編輯 #ad CSS 樣式

   

5. 編修表格樣式

    

0723 

一. 製作各地通路商的服務據點

1. 開新檔案 routeT1.html

   檔案 -> 滙入 -> 滙入表格式資料

   

2. 美化表格, 修改背景顏色

      

3. title 台北區維修據點

3. 依序完成 routeT2.html, routeT3.html

二. 影像地圖

1. 開新檔案 route.html, 套用 digital.dwt

2. 插入表格 1列1欄 100% 0 0 0 水平置中

3. 影像地圖

  3.1 點擊地圖 -> 屬性出現 地圖

      地圖標示法可用長方形, 圓形, 或多邊形來圈選範圍

   

  3.2 製作北區選取範圍

      使用多邊形 -> 圈選地圖範圍 -> 結束時請點擊小黑圖示後, 再至空白處單點一下, 結束點選範圍

   

  3.3 同樣步驟製作 台中, 台南 範圍

  3.4 點選台北區地圖 -> 行為 + -> 開啟瀏覽器視窗

   

      routeT1.html  230x250 (捲軸寬 20px)

   

  3.5 on mouse over 修改為 on Click

         

4. 預覽 -> 點擊台北影像地圖範圍時會開始維修據點的分頁

   

三. 設定維修通路商連結

開啟 digital.dwt, 將維修通路商設定連結 route.html

   

檔案 -> 全部儲存

0730版面切片範例

1. 開啟檔案時, 原檔案有參考線和切片時

   檢視 -> 清除參考線 (清除切片)

 

2. 儲存body_bg (底色固定, 可切一長條當 body)

 2.1 拉一垂直參考線

 2.2 切片工具

 2.3 自參考線建立切片

 2.4 檔案 -> 儲存為網頁用 

     切片選取工具 -> 選取要存儲的圖片 -> 選擇檔案格式、品質

     選擇網站資料夾 -> 檔名 body_bg.jpg

                       格式 (僅影像)

                       切片: 選取的切片

3.儲存 logo.png

 3.1 建立切割logo的參考線

 3.2 切片 -> 自參考建立切片 

 3.3 logo須為透明色, 關閉底色與 background 圖層

 3.4 檔案 -> 儲存為網頁用 

     切片選取工具 -> 選取要存儲的圖片 ->  png24(透明底) -> 儲存 logo.png

4.儲存 nav 圖形

 4.1 nav 粉紅外框拉出參考線

 

 4.2 關閉文字圖層

 4.3 切片 -> 自參考建立切片 

     檔案 -> 儲存為網頁用 

     切片選取工具 -> 選取要存儲的圖片 ->  png24(透明底) -> 儲存 nav.png

5. 儲存 nav 上方框

 5.1 拉出4條參考線, 左右兩邊由透明框靠白邊拉出參考線, 

   

 5.2 有透明部份的圖檔, 皆存 png!

 

( 知識學習檔案分享 )
回應 推薦文章 列印 加入我的文摘
上一篇 回創作列表 下一篇

引用
引用網址:https://classic-blog.udn.com/article/trackback.jsp?uid=runa2012&aid=15246795