輸入您的搜尋字詞
提交搜尋表單
gforce付費手機遊戲報報
.
免費遊戲房
.
可愛包子動畫圖庫
.
logo交換登錄
gforce付費手機遊戲下載
.
免費線上遊戲房
.
msn表情小圖示
.
9w2u討論區
加入我的最愛
HOME 回首頁
.網頁設計接案業務
.加入GForce手機娛樂聯盟
.基礎HTML教學
.CSS樣式表教學
.基礎JAVASCRIPT教學
.JAVASCRIPT收集
.自製ASP程式下載
.色彩英文名對照
.16進位色碼對照一
.16進位色碼對照二
.可愛包子動畫圖庫
.MSN表情小圖示下載
.9W2U-1024X768桌布下載
.GForce付費手機遊戲
.免費遊戲房
.免費線上遊戲房
.免費檔案報報
.免費資源報報
.網站漫遊報報
.多國語言字母發音表
因網友留言內容
含成人色情內容
討論區即時停止運作
不便之處敬請見諒
● LOGO交換登錄
● 和我們連絡
9W個人設計工作室
友站及其它連結
基礎HTML教學
Hyper Markup Language
01 HTML簡介
10 分割畫面(Frameset)
02 HTML文件的基本架構及指令
11 超鏈結(Hyper Link)
03 製作第一份HTML文件
12 拋錨(Anchor)
04 網頁背景(Background)
13 表單(Form)
05 控制標題字元大小及字型指令
14 跑馬燈
Internet Exploer專用
06 使用CSS控制字元屬性
15 文字編排
07 表格的運用(Table)
16 Meta 指令運用
08 清單(List)
17 標註指令列表
09 加入圖片
18 其他
09、加入圖片
加入圖片的簡單語法如下:
<IMG SRC="圖檔位址">說明文字
圖檔位址所代表的是圖檔案的 URL,其 URL 的語法與 HREF 中連結的語法一樣,圖檔格式是 GIF 的話,其副檔名須 是 .gif;是 JPEG 的話,其副檔名須是 .jpg或是 .jpeg
對齊方式如下:
top : 對齊整行最頂端排列。
texttop : 對齊文字部份最頂端排列。
middle : 對齊文字中間排列。
absmiddle : 物件的中間線對齊整列的中間線。
baseline : 對齊文字底線排列,此為預設的對齊方式。
bottom : 對齊文字底線排列,與baseline相同。
absbottom : 對齊整行最底端排列。
left : 圖片在文字左邊。
right : 圖片在文字右邊。
<IMG SRC="cy_ball.gif">這是一個圓球喲
結果:
這是一個圓球喲
我們可加上border的屬性來設定圖片的邊框粗細,例如:
<IMG SRC="cy_ball.gif" border=2>這是一個加了框的圓球喲
結果:
這是一個圓球喲
加上align的屬性則可調整圖片和說明文字的排列方式;
<IMG SRC="cy_ball.gif" align=left>圖片在左,說明文字在右
<IMG SRC="cy_ball.gif" align=right>圖片在右,說明文字在左
結果:
圖片在左,說明文字在右
圖片在右,說明文字在左
若訪客將瀏覽器的顯示圖片選項給關閉,則訪客將看不到圖片內容,此時我們可加上ALT屬性在圖片位置顯示文字說明,如下例子。
<IMG SRC="cy_ball.gif" alt="這是一顆圓球">這是圓球
結果:
這是圓球
加上width和height屬性可設定圖檔大小,例如:
<img src="book.gif" border=0 width=282 height=62>
加上了這個屬性可讓瀏灠器先預算出圖片的放置空間大小,而不必等到每張圖片都得從主機傳輸過來後才能排版,如此可以加速顯示速度。
結果:
圖文排列、對齊方式
:
文字靠下
<IMG SRC="../homepage/graph/xxxxx.jpg" ALIGN="bottom">
文字靠中
<IMG SRC="../homepage/graph/xxxxx.jpg" ALIGN="middle">
文字靠上
<IMG SRC="../homepage/graph/xxxxx.jpg" ALIGN="top">
圖片靠左
<IMG SRC="../homepage/graph/xxxxx.jpg" ALIGN="left">
圖片靠右
<IMG SRC="../homepage/graph/xxxxx.jpg" ALIGN="right">
設定圖文間隔
<IMG SRC="../homepage/graph/xxxxx.jpg" VSPACE="20" HSPACE="50" ALIGN="left">
圖片連結:
<A HREF="http://..........." TARGET="_new"><IMG SRC="圖檔位址">說明文字</A>
<a href="http://www.9w2u.com/"
TARGET="_blank"
><img src="http://www.9w2u.com/images/Main_01.gif" width="253" height="69" border="0">9W個人設計工作室</a>
顯示結果:
9W個人設計工作室
本站內容屬私人所有 請勿任易轉載 如須轉載 請通知本站
本站所鏈結標題及鍊結內容 皆歸原權利人所有
網站內容如有任何侵權 亦請通知本站刪除 謝謝!
Power by
9 Walker Studio
本站內容屬私人所有 請勿任易轉載 如須轉載請通知本站