網路城邦
回本城市首頁 音樂故事
市長: 傻傻  副市長: 小帥哥~女人可以這樣過日子 Nan◎v◎
加入本城市推薦本城市加入我的最愛訂閱最新文章
udn城市人文藝術音樂【音樂故事】城市/討論區/
討論區圖文編輯學語法 字體:
看回應文章  上一個討論主題 回文章列表 下一個討論主題
HTML代碼(入門) 實際應用講解
 瀏覽2,513|回應2推薦3

傻傻
等級:8
留言加入好友
文章推薦人 (3)

子非魚
珂岩
Shiao Amy

HTML代碼實際應用講解(入門)

一張完整的HTML帖子應該具備:背景+文章+插圖+音樂

一:背景
原代碼如下:
<TABLE align=center background="背景圖片網址" border=10 cellSpacing=2 borderColor=#841A00 width=500><TBODY><TR><TD>
帖子的內容(文章+插圖+音樂)
</TD></TR></TBODY></TABLE>

注意:前邊用了多少<table......><tr><td>後面就要有多少</td></tr></table>收尾。多收和少收都會出錯哦!

常用的參數設定及注解:
<table width="400" border="10" cellspacing="2" cellpadding="2" align="CENTER" valign="TOP" background="圖片網址" bgcolor="#0000FF" bordercolor="#CF0000" bordercolorlight="#00FF00" bordercolordark="#00FFFF">

width="400"           表格寬度,接受絕對值(如 500)及相對值(如 80%)
border="10"            表格邊框的厚度
cellspacing="2"       表格格線的厚度
cellPadding=5       表格格線內厚度
align="CENTER"      表格的擺放位置(水準),可選值為:左: left, 右: right,居中: center
valign="TOP"           表格內內容的對齊方式(垂直)
                                    可選值為: top, middle, bottom。   
background="背景圖片網址" 表格的背景圖片,與 bgcolor 不要同用。
bgcolor="#0000FF"  表格的底色,與 background 不要同用
bordercolor="#CF0000"              表格邊框顏色
bordercolorlight="#00FF00"      表格邊框向光部分的顏色
bordercolordark="#00FFFF"      表格邊框背光部分的顏色,使用 bordercolorlight 或bordercolordark 時 bordercolor 將會失效。


舉例:


朋友˙您好嗎!


代碼如下:
<TABLE align=center background="背景圖片網址" border=10 cellSpacing=12 borderColor=#841A00 width=500 height=200><TBODY><TR><TD>
<P align=center><FONT color=ff0000 face=標楷體 size=6>朋友˙您好嗎! </FONT></P>
</TD></TR></TBODY></TABLE>


圖片上面加 flash 語法

 <TABLE cellSpacing=3 cellPadding=3 width=圖片寬度  bordercolor=660000 background=圖片網址  border=18>
<TBODY>
<TR>
<TD><EMBED align=right src=動畫網址 width=動畫寬度 height=動畫高度 type=application/octet-stream wmode="transparent" quality="high" ;;></TD></TR></TBODY></TABLE>

這是基本型語法,只是相片上面加動畫,如果圖片要加框,框要多寬要什麼顏色要幾層框,就靠個人需要去變化了

模糊效果設定語法

<table style="WIDTH: 600px; HEIGHT: 448px" cellspacing="1" cellpadding="0" width="600" align="center" border="5"><tbody><tr>
<td style="FILTER: Alpha(opacity=100,style=3)" width="600" background="圖片網址" height="450">
<embed src="動畫網址" width="500" height="370" type="application/x-shockwave-flash" wmode="transparent" quality="high">
</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

FILTER: Alpha(opacity=100,style=3)

數值可從1到3..各有不同變化

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

貼圖基礎代碼  <img src="圖片位址" width=500>

二、加邊框
1、普通黑色邊框(默認)
<img src="圖片位址" width=500 border=12>

2、簡單的CSS裝飾框

顏色框
<img src="圖片位址" width=500 style="border:12px #8B1A1A solid">


虛線框
<img src="圖片位址" width=500 style="border:12px #8B1A1A dashed">

圓點框
<img src="圖片位址" width=500 style="border:12px #8B1A1A dotted">



雙線框
<img src="圖片位址" width=500 style="border:12px #8B1A1A double">


凹線框
<img src="圖片位址" width=500 style="border:12px #8B1A1A groove">

凸線框
<img src="圖片位址" width=500 style="border:12px #8B1A1A ridge">

內凹框
<img src="圖片位址" width=500 style="border:12px #8B1A1A inset">


外凸框
<img src="圖片位址" width=500 style="border:12px #8B1A1A outset">


......................................................................................................................

另外還有下面這個,則是另外一種圖片上直接加字的範例,並不適用本篇所介紹的語法的編輯~

 我看起來是不是有點緊張
我笑的臉是不是有點勉強
我做的事是不是有點輕狂
我說的謊是不是有點荒唐

我知道也許可以欺騙自己
但終究無法忘記憂傷

也不能抑制那一直生成的...



~ 遺憾 ~

合成



本文於 修改第 4 次
回應 回應給此人 推薦文章 列印 加入我的文摘

 回應文章
謝謝
    回應給: 珂岩(kbsyn719) 推薦0


傻傻
等級:8
留言加入好友

 

謝謝珂岩葛格為傻傻製作的圖...

好感動喔 ~ 聽說弄到很晚

嗚..... ,真是謝謝......這樣就不會再說遺憾了

回應 回應給此人 推薦文章 列印 加入我的文摘
引用網址:https://city.udn.com/forum/trackback.jsp?no=54820&aid=1884020
這個要把圖和文分離出來
    回應給: 珂岩(kbsyn719) 推薦0


小帥哥~女人可以這樣過日子
等級:8
留言加入好友

 
好像是件不可能的任務
應該是先有了圖
文是後製貼上的吧
回應 回應給此人 推薦文章 列印 加入我的文摘
引用網址:https://city.udn.com/forum/trackback.jsp?no=54820&aid=1883974