校外實習報告

學校：南開科技大學

實習學生：電通二甲李祖嘉

實習地點：嵩贊油封工業股份有限公司

指導小老師：陳易廷

‧ 網站優化

‧ 修改內容

‧ 影片轉檔：Video to GIF、SWF

‧ 心得

內容大綱

網站優化CLOUDS

Content Optimization:內容優化

Layout Optimization:配置優化

Objective Optimization:目的優化

User Interface Optimization:使用者界面優化

Display Optimization: 顯示反應優化

Search Engine Optimization:搜尋引擎優化

網站優化的目的

通過對網站的目錄結構、鏈結結構、網站的各網頁本身結構進行優化，從而使一個經過優化的網站符合標準站點 (W3C標準)，使網頁的表現形式和內容相分離，避免冗長的網站代碼，減小網頁尺寸，便於網站被快速的瀏覽。同時對目錄結構、鏈結結構的優化可以增強網站 的可瀏覽性，將最新、客戶最關心的內容合理的在網站的各頁面加以展現，使其對於搜索引擎更加友好，有利於搜索引擎的抓取，使網站在搜索引擎上的排名得到提升，最終提升網站的銷售能力或宣傳能力。

修改內容

廠內導覽

廠務組織

工安衛規定

照片導覽

廠務部簡報

工安衛影片

廠務首頁

網站導覽影片轉檔

廠務首頁

廠務首頁

字體不同，在畫面上，字會顯得粗細大小不同

廠務首頁將首頁簡化，每個連結做成icon，並加入CSS語法，讓滑鼠移到連結時，會有折角的效果，以及中間的大圖會進行更換

廠務首頁 將原本字體都統一改為新細明體，並加入粗體讓字更明顯，以及更換原本5個icon，讓圖看起來更一致

廠內導覽

舊有按鈕偏小

書籤開啟方式

為新增視窗

廠內導覽

廠內特寫

內容以條列式呈現

不好尋找內容

廠內導覽

將特寫與配置圖掉換位置，讓瀏覽時可以先看到廠區的內容，想看詳細部份，在下拉至廠區的配置圖

廠內導覽

修改後按鈕加大

加入標籤與特效

配置圖更改

加入影像地圖

點選門口圖示

可以連結到該區網頁

廠內導覽

門口圖示點選

可切換逃生路線的配置圖

內容更改回矩陣的方式分成4部分，並增加PDF瀏覽方式

廠內導覽

點選read more可至該廠區瀏覽

PDF檔

廠內導覽（辦公室區域）

背景顏色太花

內容以條列式方式呈現

將每區域都做成一個Button連結

滑鼠移到連結會顯示特效，點下去後可切換到該區域頁面

廠內導覽（辦公室區域）

廠內導覽（辦公室區域）

圖片加入CSS放大效果

廠務組織

點選書籤後可移動到下面頁面的相關資料

廠務組織想看其他部門，需在點選回頁首的按鈕，才能尋找。

廠務組織將各部門放到左邊的框架上，點選後右邊框架會顯示該部門簡介

圖片加入CSS陰影效果

工安衛規定

字體顏色與背景太相近，不好閱讀

工安衛規定

增加橫幅美化外也讓標題更明顯

底色用白，將字體都變更為粗體，規章項目用不同顏色表示，讓閱讀時較清楚明顯

照片導覽內容以條列式排列，如果以後內容一多，會造成頁面過長

照片導覽將內容放在內置框架裡面，如果往後內容變多，也可以只拉動框架卷軸就可，不必拉到整個頁面

增加搜尋引擎功能

照片導覽

打上關鍵字即可搜尋相片導覽的內容

廠務部簡報

簡報為PPT檔

廠務部簡報由於PPT檔需要購買正版的Office才能開啟，因此將檔案轉檔為PDF和PPS，這兩種檔案，可以由網路免費下載閱讀器。

PDF因為不用載到暫存區，所以開啟速度較快，檔案也比較小。

PPS需下載到暫存區，所以開啟檔案速度較慢

工安衛影片

連結顏色跟背景太相近，在瀏覽時會比較不便。

將標題字放大，並把類別做成幾個icon，加入書籤，以及Top圖示可以回到最上層，方便瀏覽

將原本影片，加入縮圖，在瀏覽時方便理解影片內容，縮圖預設皆以國語版影片為主

工安衛影片

Video to GIF製作流程

步驟1

點選桌面freevideotogif檔案進行安裝

安裝完開啟桌面Free Video to GIF Converter圖示

步驟2 點選Browse Video.. 選擇要轉檔的影片按下開啟

步驟3

將Width 和 Height調整到和影片依樣大小

依需求將FPS張數調整，設定好後點選Next

步驟4

選擇Excellent Quality 保持畫質與大小

依影片擷取張數調整FPS，如圖中影片152張，FPS可調整成12或15，太高太慢，會影響圖片流暢性。設定好後點選Make GIF。

步驟5

輸入檔名後，儲存

完成！！

Video to Swf製作流程

步驟1

點選桌面PortalbeImTOO_Video_Converter壓縮檔進行解壓縮

點選PortalbeImTOO_Video_Converter

圖式開啟

步驟2

點選檔案＞添加檔案＞開啟

步驟3

點選預置方案＞選擇圖像和動畫＞SWF＞設定存檔路徑

步驟4

解析度調整成原影片大小＞視訊音訊調整成高品質

點選轉換鈕或Ctrl+F5

步驟5

開啟輸出目錄

完成！！

心得這次非常感謝嵩贊公司與南開科技大學，提供

了我這樣的機會，到這邊來實習，在剛開始收到網頁優化這任務時，其實很陌生，平常雖然看很多網頁的樣式，但實際做起來卻沒那麼簡單，在過程中也發現到瀏覽器的不同也會影響到網頁的呈現，而每當自己感到困惑時，指導小老師都會給出一個方向參考，遇到困難時也會抽空回學校請教老師。讓我在這320個小時內，學習到知識以外，也體

會到職場上的一些經驗，讓我在未來工作領域上能有多一些認識，最後也很榮幸來到貴公司實習，也感謝許多前輩的教導，讓我受益良多。