文字的应用.ppt

* * * * 網頁設計與製作 第三單元：文字的應用 NordriDesign專業商務簡報設計 授課教師：王漢銘 文字輸入技巧 輸入文字內容 自動換行 當輸入的文字內容超過一行時（指頁面寬度範圍），會自動換行。 手動換行 如果想要讓文字不滿一行就換行，繼續輸入時就要使用「手動換行」。請各位用滑鼠游標點取要「分段」的位置，再按下「Enter」鍵就可進行分段。 如果各位在「換行」的位置處按下「Shift」+「Enter」鍵，就會進行文字換行。 分段及換行的差異 文字輸入的功能 輸入連續的空格 加入日期時間 加入特殊符號 頁面的註解文字 請執行「編輯/偏好設定」指令，在勾選「註解」選項後，就可以在頁面上看到註解的圖示了。 貼入純文字檔：會比較好，不會複製到一堆看不見的程式碼；以Word貼上常會有問題。 加入水平線 * 文字效果設定 由「插入」面板設定文字格式 由「屬性」面板設定文字格式 由「頁面屬性」設定文字格式 請同學看完示範操作後，再進行綀習 網頁影像格式與使用時機 圖檔類型 JPG GIF PNG 顏色 全彩 256色 全彩 GIF動畫 無 有 無 透明圖 無 有 有 「插入面板\常用\影像」。 使用快速鍵，Ctrl+Alt+I。 直接由檔案面板裡拖曳至網頁文件內。 「資源面板\影像\插入」。 插入影像 設定影像屬性 調整影像尺寸 若直接將影像插入到網頁文件中，Dreamweaver會以影像的原寸置入，利用點選影像物件即可發現影像的右下角會出現3個控制點，我們就可利用這三個不同的方位點來控制影像的寬、高。 指定在純文字瀏覽器或設定成手動下載影像的瀏覽器中，會在這個影像位置上出現替代文字。 對於配合視障者使用的瀏覽器，若有語音合成功能，這些文字會被唸出來。 在一些瀏覽器中，當滑過影像時文字也會出現。如有遺失影像的情形發生，替代文字也會顯示。 替代文字 調整影像的亮度和對比設定。 控制銳利化可讓影像更為清晰。 圖像調整 垂直與水平白距離 以像素為單位沿著影像的各邊加入間距。 垂直距離:會沿著影像的頂端和底部加入間距。 水平距離:會沿著影像的左邊和右邊加入間距。 對齊方式、垂直與水平距離 可用來在圖形中設定連結 矩形連結區域工具:用在矩形範圍。 圓形連結區域工具:用在橢圓形範圍。 多邊形連結區域工具:用在不規則範圍。?????? 影像地圖 請同學看完示範操作後，再進行綀習 參考資料 文淵閣工作室（2012）。Dreamweaver CS6網頁製作比你想的簡單。台北市：碁峯資訊。 施威銘研究室（2012）。正確學會Dreamweaver CS6的十六堂課。台北市：旗標。 * Thank you 感謝您的聆聽 * * * * * * * * * * * * * * * * * * * * * * * * * * * * *