內部連結
外部連結
電子郵件連結
錨點連結
外部連結
電子郵件連結
錨點連結
之前做好了範本~這次要正式弄個網頁了
首先要套用先前的範本作新網頁有三種方法不過大同小異(看得懂中文根本沒差)
總之選檔案--新增文件--空白範本的頁面---選好範本---建立即可
(ps.請記得勾選當範本改變後更新頁面以方便統一調整)
之後請新增三個頁面改好標題!分別儲存成三個檔案(檔名請務必記得要是英文)
標題:檔名
首頁:index
關於此站:about
問卷調查:form
首先要套用先前的範本作新網頁有三種方法不過大同小異(看得懂中文根本沒差)
總之選檔案--新增文件--空白範本的頁面---選好範本---建立即可
(ps.請記得勾選當範本改變後更新頁面以方便統一調整)
之後請新增三個頁面改好標題!分別儲存成三個檔案(檔名請務必記得要是英文)
標題:檔名
首頁:index
關於此站:about
問卷調查:form
之後觀察一下原始碼大致長這樣
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/output01.dwt" codeOutsideHTMLIsLocked="false" -->
<head>檔頭
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />檔頭標籤
<style type="text/css">
此為css
</style>
<script type="text/javescript">
此為javescript
</script>
</head>
<body>
細部
</body>
</html>
重點就是有開始必定要有結束~
而那第一行代表的是網頁的文件類型不可刪請務必進行標準化!
(可以前往http://www.w3.org/檢測)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/output01.dwt" codeOutsideHTMLIsLocked="false" -->
<head>檔頭
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />檔頭標籤
<style type="text/css">
此為css
</style>
<script type="text/javescript">
此為javescript
</script>
</head>
<body>
細部
</body>
</html>
重點就是有開始必定要有結束~
而那第一行代表的是網頁的文件類型不可刪請務必進行標準化!
(可以前往http://www.w3.org/檢測)
另外關於打字時換行請特別注意
請務必使用Enter(<p> </p>)段落標籤而不是shift + Enter(<br/>) 斷行標籤
後者並不符合網頁標準化(哇勒我之前超愛用XD)
請務必使用Enter(<p> </p>)段落標籤而不是shift + Enter(<br/>) 斷行標籤
後者並不符合網頁標準化(哇勒我之前超愛用XD)
複製貼上時可以選擇貼上特殊效果來調整(.....為啥突然講這個抄別人網頁不太好吧)
最後是本堂重點~超連結~
第一種:內部連結(就是連自己的網站裡面的某個網頁)
按插入--超連結
文字就是顯示的文字
連結(內部)請點選旁邊的資料夾選取目標網頁檔
另外此區的標題!是指製作無障礙網站時必備給讀字機使用讓盲人聽網頁用的(= =)
第一種:內部連結(就是連自己的網站裡面的某個網頁)
按插入--超連結
文字就是顯示的文字
連結(內部)請點選旁邊的資料夾選取目標網頁檔
另外此區的標題!是指製作無障礙網站時必備給讀字機使用讓盲人聽網頁用的(= =)
外部連結大同小異
差異是連結網址時必須打上通訊協定(http://)(就是打上完整網址啦)
差異是連結網址時必須打上通訊協定(http://)(就是打上完整網址啦)
之後是插入電子郵件的連結(個人認為還滿雞肋的東西)
按插入電子郵件連結
文字一樣是顯示出來的文字(不打則顯示信箱)
電子郵件就打信箱囉
之後會發現按下那連結文字下方一樣會有連結跟標題(為了無障礙一樣要自己補打)
而跟一般連結不同它是長這樣
mailto:xxx@xxx
按插入電子郵件連結
文字一樣是顯示出來的文字(不打則顯示信箱)
電子郵件就打信箱囉
之後會發現按下那連結文字下方一樣會有連結跟標題(為了無障礙一樣要自己補打)
而跟一般連結不同它是長這樣
mailto:xxx@xxx
之後有人按下後就會跑出這我從頭到尾沒用過得郵件程式XD(我又沒去上班過不可能有郵件伺服器吧)
如果想在別人按下時自動輸入主旨,副本之類的(注意不支援中文)
請在連結mailto:xxx@xxx後方加入
?subject=主旨內容
?cc=ccc@ccc (副本)
?bcc=ccc@ccc (密件副本)
?body=信件開頭的內容
如果想設定多項時以&連接(?只有第一個會出現)
例:mailto:[email protected]?subject=主旨內容&cc=ccc@ccc&body=信件開頭的內容
(不過現在人用gmail就用不到勒除非用pop5那種東東)
如果想在別人按下時自動輸入主旨,副本之類的(注意不支援中文)
請在連結mailto:xxx@xxx後方加入
?subject=主旨內容
?cc=ccc@ccc (副本)
?bcc=ccc@ccc (密件副本)
?body=信件開頭的內容
如果想設定多項時以&連接(?只有第一個會出現)
例:mailto:[email protected]?subject=主旨內容&cc=ccc@ccc&body=信件開頭的內容
(不過現在人用gmail就用不到勒除非用pop5那種東東)
最後一種連結方式--錨點連結
是很常見不過名稱我倒是第一次聽但是對一個網頁就有很多資料時很實用的東西
簡單來說就是預先在網頁的某行設定錨點~
然後超連結到錨點讓那行跳到視窗最上面(就是大部分網站的Q&A啦)
使用方法是~選好某行後(行前行後無所謂反正是同一行)
按插入--命名錨點
之後打上名稱(請盡量使用英文開頭無中文)
是很常見不過名稱我倒是第一次聽但是對一個網頁就有很多資料時很實用的東西
簡單來說就是預先在網頁的某行設定錨點~
然後超連結到錨點讓那行跳到視窗最上面(就是大部分網站的Q&A啦)
使用方法是~選好某行後(行前行後無所謂反正是同一行)
按插入--命名錨點
之後打上名稱(請盡量使用英文開頭無中文)
之後一樣使用插入--超連結
跟上面得差異是這次連結這邊請問黃色箭號選擇想連去的錨點名稱(標題還是要打)
即可
PS.教課時錨點的實例是用在關於此站那邊~滿長的文章也是講師提供的
跟上面得差異是這次連結這邊請問黃色箭號選擇想連去的錨點名稱(標題還是要打)
即可
PS.教課時錨點的實例是用在關於此站那邊~滿長的文章也是講師提供的
之後差不多設定好了~就請按下文件列上那顆地球選個瀏覽器測試吧
(雖然我很不甘願不過目前IE全部版本還是最多人用所以要測囧另外想新增測試瀏覽器只要按編輯瀏覽器清單即可)
(雖然我很不甘願不過目前IE全部版本還是最多人用所以要測囧另外想新增測試瀏覽器只要按編輯瀏覽器清單即可)
測試中~
(說歸說我當然還是用我可愛的狐狐測試囉)
順便說一下~這邊看到的測試首頁~就是設定網頁時設的標題!
而那個黃色框框顯示的文字~是無障礙網站讀字機會念出來的字(注意如果是單字都會一個字母一個字母念囧)
~是設定超連結時設定的標題!
而連結的顏色~選過連結的顏色~滑鼠滑入時才會顯示底線~是上堂製作範本設定的CSS
而這時顯示的網址當然是當初設定的本機位置囉
PS.這火狐佈景是我自製的~一開始去抓的火狐不會這麼漂亮XDDD
(說歸說我當然還是用我可愛的狐狐測試囉)
順便說一下~這邊看到的測試首頁~就是設定網頁時設的標題!
而那個黃色框框顯示的文字~是無障礙網站讀字機會念出來的字(注意如果是單字都會一個字母一個字母念囧)
~是設定超連結時設定的標題!
而連結的顏色~選過連結的顏色~滑鼠滑入時才會顯示底線~是上堂製作範本設定的CSS
而這時顯示的網址當然是當初設定的本機位置囉
PS.這火狐佈景是我自製的~一開始去抓的火狐不會這麼漂亮XDDD
以上~本堂終了
本次今日事今日畢達成!
另外我確定蘿莉是來亂的~上課時間請修正為7~10點多(= =|||)
而這次講得東西其實跟上次比多了不少(所以搞不好我有忘了啥)
我也太好運了點偏偏就我那台壞掉害我範本重做(花費時間10分鐘XD)
.......我重做範本在追新進度速度都比某些人快囧(我每天碰電腦果然很熟)
﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍
已經有三個人問我去上課有學到東西嗎?
那個.......我很弱好嗎?(當然啦別拿我跟你自己比)
我的確是Google自學狂也的確有自信不上課直接弄出看起來差不多的網頁
純自high是不需要去上課但網頁不是自己看爽的(這是教上班族找工作的)
優化、標準化我當然聽過但直接去聽取目前在接case的人的經驗比較快吧
而且我這嚴重實用主義只要功用一樣100行程式寫成1500行我也不會介意呦
另外我確定蘿莉是來亂的~上課時間請修正為7~10點多(= =|||)
而這次講得東西其實跟上次比多了不少(所以搞不好我有忘了啥)
我也太好運了點偏偏就我那台壞掉害我範本重做(花費時間10分鐘XD)
.......我重做範本在追新進度速度都比某些人快囧(我每天碰電腦果然很熟)
﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍
已經有三個人問我去上課有學到東西嗎?
那個.......我很弱好嗎?(當然啦別拿我跟你自己比)
我的確是Google自學狂也的確有自信不上課直接弄出看起來差不多的網頁
純自high是不需要去上課但網頁不是自己看爽的(這是教上班族找工作的)
優化、標準化我當然聽過但直接去聽取目前在接case的人的經驗比較快吧
而且我這嚴重實用主義只要功用一樣100行程式寫成1500行我也不會介意呦