阿杰老師部落格教室 (New)

 (閱讀全文)

有些模版的迴響表單標題的文字位置不是顯示的很正確。也可以用下面的方式來修正哦！

開啟   commentform.template   ，加入紅字部份

<form id="NewComment" action="{$url->getBaseUrl()}/index.php" method="post">
<h3 class="title"><div style="text-align: center;padding-top:20px; ">{$locale->tr("add_comment")}</div></h3>

原本的置頂文章因為是套用選單的樣式，所以寬度太窄了！修改方式如下：

先將  roodo.css   樣式表中的 side 複製一份後，更名為  side01

.side01{
background:#ffffff;
font-size:12px;
text-align:left;
line-height:125%;
padding:10px 0px;
width:570px;  /* 加大寬度 */
}

 (閱讀全文)

如果要對圖的模版，寬度就一定要特別注意！

可以搜尋 gif  jpg 的方式來找到圖檔相關的部份。 

背景部份  (置中)

body {
background: #fff url("back.gif") repeat-y  50% 30px;
text-align: center;
font-family: verdana ,arial ,sans-serif;
color: #505050;
}

PS :    background: #fff url("back.gif") repeat-y  50% 30px;

代表基礎底色為白色  使用背景圖  back.gif  只有Y軸方向重覆  向右50% 顯示(置中)  向下 30 像素。

接著調整主寬度

 div#container {
/*  background: url("conback.gif");  */
background: url("conback.gif")  repeat-y 50%;
margin: 0 auto;

/*  width: 830px */

width: 980px; 
text-align: center;
word-break: break-all;
}

調整文章寬度

 div#content {
float: left;
/* width: 580px; */
width: 700px;
text-align: center;
/*  margin: 5px 195px 100px; */
margin-left: 5px;
}

調整頁頭主圖位置 (置中及指定寬度) 

div#banner {
/*  background: url("head.gif") no-repeat  ; */
background: url("head.gif") no-repeat  50% ;
height: 270px;
width: 980px
}

重新上傳圖檔。

完成收工！ 

[教學] 魔力樹--哈利 萬聖節篇

[教學] photobucket 圖片上傳空間 ＆scrapbook 相片剪貼簿

最近有很多老師問到有關部落格備份的問題！

這次課程中有老師提供了這個軟體　「Zoundry」 離線部落格編輯軟體。　測試一下果然功能強大！　對於新版本的 LifeType 1.2.6 可以非常順利的運作。　不但能上傳圖文，也可以下載之前撰寫的部落格文章。

不過對於之前的版本卻有出現亂碼的情況！

北市教研中心的舊版部落格是採用 LifeType 1.0.6 版 已經修正可以使用 Zoundry !

中文化請將  附件的 兩個 xml 檔拷貝到 bundles資料夾內 !

C:\Program Files\Zoundry Raven\system\bundles

 (閱讀全文)

請參加部落格研習的老師。

按一下底下的「迴響」！

填上　

暱稱: (必要)
電子郵件: 必要)
個人網頁: 　（就是你的部落格網址)
標題: (你的部落格名稱)
迴響驗證: ( 照著打 )
內容: (貼上你的 漫畫造型)

有關頁頭「部落格名稱」及「部落格描述」 的修改。

.blogtitle{
color:#ffffff;
text-align:left;
font-size:21px;
font-weight:bold;
padding:20px 50px 0  50px;
}

.description{
color:#ffffff;
text-align:left;
font-size:12px;
padding:30px 50px  0 50px;
line-height:125%;
}

注意 padding  的參數序順 ：  上  右  下  左

超連結的文字色彩會決定「部落格名稱的色彩」 

.blogtitle  a{
color:#FFFFFF;
text-decoration:underline;
}

準備好若干主圖（最少二張，才看得出隨機更換的效果）

  (閱讀全文)

 頁尾會多出一小段的背景圖，請修改一下 foot.template  

<br clear="all">

</div>   <!-- End of wrapper-->
</div>   <!-- End of blogcontainer-->

<DIV style="CLEAR: both">&nbsp;</DIV>
<DIV id=footer>

<div id="outfooter">

<!--  badbehavior 況態 -->
{$badbehavior->showBB2Status()}
<!--  End of  badbehavior 況態 -->

</div>

</DIV>

<!--  移除
<DIV style="CLEAR: both">&nbsp;</DIV>
-->

</DIV><!-- End of container-->

</BODY>
</HTML>

如果要多一個類似的 CSS 屬性。 可以拷貝貼上後修改名稱。

再將要變化的部份加入！ 

.blogbody{
line-height:130%;
text-align:center;
margin:0;
padding:10px 0 20px 0;
background:#ccff75 url("main.gif")  repeat-y 50%;
}

不要背景圖，並且加上底色。

.blogbody2{
line-height:130%;
text-align:center;
/*  margin:10;  */
margin:10px 50px 20px 50px;
/*  background:#ccff75 url("main.gif")  repeat-y 50%;  */
background:#ccff75;  /* jay */
}

接著就可以到  template 檔中修改使用的樣式。

<DIV class=blogbody2>

<div class="titlebody"> <!-- 標題下圖 -->
<H3 class=title>{$post->getTopic()}</H3>
</div>

.blogbody{
line-height:130%;
text-align:center;
margin:0;
padding:10px 0 20px 0;
background:#ccff75 url("main.gif")  repeat-y 50%;
}

repeat-y   代表背景圖  垂直方向重覆顯示

50%  代表背景圖置中

想要了解任何網頁的設計密祕嗎？

可以安裝這個小工具 - IE Developer Toolbar

按下工具列上的

其中有幾個好用的功能

1. 取色功能 [ Tool > Color Picker ]

2. 尺規功能 [ Tool > Show Ruler ]

3. 顯示 CSS 的 ID 及 Class - [ View > Class and ID Information ]

4.點選找到 CSS

livedoor 並沒有配合的迴響 CSS 。

所以要自行加入

  (閱讀全文)

由於三欄式的語法不太一樣。如果要改成二欄式只要經過適當的修改

  (閱讀全文)