加入我的最愛  |   設定為首頁  |   圖片上載  論壇音樂模式    非音樂模式   
 
I-See 論壇

I-See 論壇 註冊 登錄 會員 勳章中心 MSN宣傳系統 虛擬形象 音樂盒中心 隨機圖片中心 Flash 遊戲 會員相冊 新手手冊 娛樂設施 幫助 簡體中文 界面風格




 發新回覆
發新主題 發新投票
標題: 網頁編輯技巧入門
載入中 ...
Akaisha_Oki
吹水老手
Rank: 4


榮譽勳章
 勳章名稱:I-See一年章
勳章介紹:註冊天數滿365天    勳章名稱:I-See兩年章
勳章介紹:註冊天數滿730天    勳章名稱:I-See三年章
勳章介紹:註冊天數滿1095天    勳章名稱:I-See四年章
勳章介紹:註冊天數滿1460天    勳章名稱:I-See五年章
勳章介紹:註冊天數滿1825天  

會員編號 11551
精華 3
積分 10306
帖子 6767
威望 0 點
I-See幣 2055 錢
GAME幣 270 個
MSN宣傳 0 次
性別  女
配偶 未婚
閱讀權限 100
註冊 2005-6-16
註冊天數 6861
狀態 離線
  只顯示 Akaisha_Oki 的帖子
發表於 2011-6-18 07:38 PM  資料  主頁 短消息  加為好友 
網頁編輯技巧入門

∼前言∼
製作網頁其實沒有想像中的難,只是需要花些時間。若是你只要一個簡單的網頁,那麼看看每頁最後的FrontPage部份就夠了,若想學多一點,還是好好鑽研一下各個標籤語法吧!希望在不久的將來可以看到每個人都有屬於自己的網頁。

∼工具∼
1.網頁製作軟體
FrontPage Express:
這是微軟出的,只要灌IE就會內附,介面跟WORD差不多,換句話說:只要會用WORD就一定會用,屬於所見即得類(邊做可邊看到成果),我想是最容易取得以及最適合新手的軟體了。
Microsoft Frontage 2000:
這是微軟目前最新的應用軟體,有很多不錯新的功能,使用方法上者差不多,只是更體貼我們使用者。如果你不是新手或是已經使用過電腦者可考慮使用此程式。

2.影像製作軟體
PhotoImpact:
適合剛學習影像製作的人使用,雖然沒有其他軟體專業,但在WEB的配合度方面絕對是不二選擇。
GIF animator:
製作動畫的最佳工具,附有多種動畫特效。
Smart Saver:
可以去除多餘的像素來將圖片瘦身。
ACDSee:
最佳,最快速的圖片瀏覽軟體,也最普遍。

3.其他相關軟體
Internet Explorer:
瀏覽器,用來觀看完成的網頁。建議IE5也可以利用IE,上傳自己的網頁,使用方法就是在輸入網址的地方輸入ftp://帳號:密碼@上傳主機
FTP:
將做好的網頁上傳到自己的網頁空間中。



基本HTML:

一、首先一開始需準備的東西:
記事本(或其他 HTML編輯器)

二、什麼是HTML

各位網路衝浪者(WWWSufer)在逛遍世界大大小小的WWW站,
看過成千上萬形形色色的首頁(Home Page)後,是不是也正摩拳
擦掌的想自己做出自己的首頁,讓大家看看。也許你只是想趕上
這一波熱潮,做成一個漂亮的首頁,讓來自世界各地的網有進一
步認識你,那你就要學怎麼做Home Page了。

三、宣告為HTML文件:

首先,你要先打上下面語法,然後儲存為*.html或*.htm,其語法為:

<HTML>               <!--HTML的開頭-->

<HEAD>               <!--文件的資訊或標題-->

<title>   </title>  <!--網頁的標題-->

</HEAD>              <!--文件資訊的結束-->

<BODY>               <!--編輯區的開頭-->



</BODY>              <!--編輯區的結束-->

</HTML>              <!--HTML的結束-->


四、如何製作HTML文件:

HTML 的製作流程沒啥大步了的,可能就像您在寫文章一樣,其
過程大致如下:

規劃文件內容→編輯文件→用瀏覽器預先觀看之(不滿意在回去
修改)→申請空間→自己在網路上測試之→公布你的網頁

首先,你必須想好你的網頁要放哪些東西,大致上在做什麼,譬
如我的網頁是個人首頁,專供下載軟體的網站,還有那邊要放上
圖片,那邊要放表格.....等等。

六、HTML標籤:

HTML標籤沒有大小寫之分,例如:
<body>跟<BODY>跟 <BoDy>的效果都是一樣的。
HTML標籤有很多種類行的,例如:
□前後包夾型:這種類型必須成雙成對的出現,例如在文件中的
<BODY標籤,在稍後就必須在有一個 </BODY>的標籤至於
在這標籤內的文自救會被加上此標籤的效果。成對出現者,第
二個標籤就要加上一個斜線"/"。

□單槍匹馬型:這種標籤只需出現一次,像是 <BR>或 <IMG>等
等,以後會介紹到。

七、HTML初步:

1.一個最簡單的HTML文件:
既然HTML只是普通的文字檔,那麼最陽春的HTML文件可以說是
一個普通的,不含任何標籤的文字檔了。用記事本或席他編輯器
在<BODY>中輸入下列文字:


一個陽春的HTML文件

則存檔再瀏覽就會出現:

一個陽春的HTML文件

簡單吧?

2.文件標題
哪些資訊我們可以放在<HEAD>標籤中呢?有一個我們最常用的,那就
是文件標題,這個標籤理所輸入的文字,會顯示在瀏覽器的視窗
標題上,例如:

其語法為<title>您的文件標題</title>
若我們未指定視窗標題的話,瀏覽器則會依此文件的路徑(例如
遊客無法瀏覽此圖片或下載點,請先註冊或登入會員。, 或是file:///c:/win98/desktop/index.htm
index.htm等等)做為視窗標題。

3.簡單的格式變化:
□<BR>--換行
<BR>是讓您指定換行的標籤,只要在您希望換行的地方(通常是一行的
最後面)加上<BR>標籤,則瀏覽器就會先換行,再顯示後續的
文字,例如:

<BODY>                          俠客的家
俠客的家<BR>      →→→→      俠客製作
俠客製作
</BODY>

□<P>--分段
每一個標籤是分隔不同段落用的。所謂分段就是說,除了分行外
,瀏覽器還會多一行空白,在接著顯示後面的文字。例如:

俠客的家<P>                 俠客的家
俠客製作<BR>      →→→→
在台南縣                    俠客製作
                            在台南縣
□<PRE>--使用原有排列
如果您希望瀏覽器能依文字在編輯程式中的排列情形來顯示,可
將這些文字前後加上<PRE>.....</PRE>的標籤,這樣文字就不會擠
成一團了,你也不用加上換行標籤了。例如:

<PRE>
白日   依山盡,黃河   入海流。
欲   窮千里目,更上一層   樓。
</PRE>
↓↓↓↓↓↓↓
白日   依山盡,黃河   入海流。
欲   窮千里目,更上一層   樓。

□<HR>--加上分隔線
在很多 Home Page 上我們可以看到為了使文件內容更清晰,
都會用一條橫線(Horizon Ruler),分隔文件中不同的段落,使得段落更為分明。
只需在要坐上分隔線的地方加上<HR>標籤,在顯示時,
此處就會出現一條分隔線。例如:
<BODY>
李白的詩
<HR>
床前明月光<BR>
疑視地上霜<BR>
舉頭望明月<BR>
低頭思故鄉<BR>
<HR>
取自唐詩三百首
</BODY>
↓↓↓↓↓↓↓



--------------------------------------------------------------------------------

床前明月光
疑視地上霜
舉頭望明月
低頭思故鄉



--------------------------------------------------------------------------------

取自唐詩三百首

當然,不同的瀏覽器所縣市的分隔線會長得不太一樣,
另外在學會了使用圖形後,您也可考慮用自己畫的線條來做段落的分隔線。

八、標題文字:

學會如何安排簡單的段落格事後,我們現在要看看如何改變文件中的問字顯示效果
在 HTML 標籤中用於文字顯示的非常多,這裡先從最簡單、最常用的標題介紹起。

這個標題並非瀏覽器視窗左上角所顯示的標題(用<title>定義的),
而是平常在文章中,像章節名稱之類的標題。設定標題的標籤共有六個,分別是
<H1>、<H2>.....、至<H6> ,數字愈大標題所顯示的文字愈小:

<H1>李白的詩</H1>
<H2>靜夜思</H2>
<HR>
床前明月光<BR>
疑視地上霜<BR>
舉頭望明月<BR>
低頭思故鄉
↓↓↓↓↓↓↓


李白的詩
靜夜思

--------------------------------------------------------------------------------

床前明月光
疑視地上霜
舉頭望明月
低頭思故鄉



九、文字的排列 - 對齊方向:

基本上,在瀏覽器中文字都是由左一直顯示到右,每一行都是向左對齊的。
如果您希望文字改成向中或向右對齊,可在段落標籤<P>中加入屬性來設定

千面介紹標籤的使用時只是在"<>"中加入標前的名稱而已,
其實有些標籤還有很多屬性(Attribute)可供我們選用、設定。
加入屬行時的標籤格式如下:

<標籤名稱 屬性1=屬性值 屬性2=屬性值 屬性3=....> 例如:

<IMG SRC=logo.gif border=0 alt=俠客資源網>

□<P ALIGH>--設定對齊方向
<P>標籤有個ALIGH屬性就是用來設定文字對齊的方向,可設定的值
有LEFT(向左對齊,這是預設值)、CENTER(向中對齊)、RIGHT(向右對齊)
三種。瀏覽器會將<P ALIGH=...>之後的文字以所設的對齊方式顯示,例如:

<P ALIGN =RIGHT>這段文字會對齊視窗的右邊
<P ALIGN =CENTER>這段文字會對齊視窗的中間
<P ALIGN =LEFT>這段文字會對齊視窗的左邊
↓↓↓↓↓↓↓


這段文字會對齊視窗的右邊

這段文字會對齊視窗的中間

這段文字會對齊視窗的左邊

注意,一旦設定了某種對齊方式後,例如設定了向右對齊,除非出現另一個
<P ALIGN=...>改變其他對齊方向,或是</P>,否則文件種所有文字都是向右對齊的
或是遇到<HR>、<H1>標籤時,文字的對齊方向才會設回預設的向左對齊。

□<CENTER>--向中對齊
另外還有一個對齊中央的標籤<CENTER>,其效果也是讓所有的文字向中間對齊。
而且在<CENTER>間的文字,不會因<H?>或<HR>的出現而變回預設的向右對齊。


基本標籤 :

學習:
∼基本文件標籤語法∼

<HTML></HTML>  <HEAD></HEAD>
<title></title>  <BODY></BODY>


解說:

  在每頁HTML文件中,都有這四組基本標籤(框架格式例外,在框架標籤會說明),為什麼說四組呢?

  因為大部分的標籤都是兩兩一組,只是多加一個  /  而已。讓我們先來看這四組基本標籤:

<HTML></HTML>
這一組標籤是告訴瀏覽器說:我是一份HTML文件!包在網頁的最上下兩端,將所有的原始碼都包起來。



<HEAD></HEAD>
在這個標籤中主要包括了 title 標籤以及 JAVA Script 的內容。關於 JAVA,在進階篇會提到,這裡先不討論,所以只要列出來就可以了。



<title></title>
這個標籤就是當網頁開啟時,瀏覽器上方藍色部分出現的標題。現在你看到這頁的標題應該是吳克禮的網頁,而且也影響到當別人將網頁加入我的最愛時的名稱。



<BODY></BODY>
這個標籤包含的就是網頁的內容,除了以上三組標籤外,其它的標籤都要寫在這組標籤內。

範例:

請留意<HTML> <HEAD> <title> <title> </HEAD> <BODY> </BODY> </HTML> 的次序

∼標籤範例∼

<HTML>
 <HEAD>
  <title>鄭立德的網頁<title>
 </HEAD>
   <BODY>
   BODY之間為主要語法所在,文字也是打在這之中
   </BODY>
</HTML>


使用 FrontPage 做法

FrontPage Express的路徑在C:/ Program Files / FrontPage Express / BIN / FPXPRESS.exe。

執行後看到一個類似WORD的視窗,感覺很親切吧!我們先在空白處打上BODY之間為主要語法所在,文字也是打在這之中這句話,接著到檔案/畫面內容/一般的標題中打入德德哥的網頁,就完成以上範例啦!

接著就要存檔了,先在C槽中建立一個我的網頁的資料夾。然後選檔案/儲存檔案/存成檔案,把檔案命名為index.htm存在剛建的我的網頁資料夾中就好。先說明幾個觀念:

建立我的網頁資料夾的目的是:將來網站中的所有檔案都要放在這個資料夾中,以利編輯。為什麼呢?一來好找,二來牽涉到絕對路徑以及相對路徑的問題。



首頁最好命名為 index.htm,因為瀏覽器會自動搜索網站中 index.htm 這個檔案。然而我們數學系要把它設定為 Welcome.html(小心大小寫)。因為我們數學系的系統會自動讀取這個檔案(另外記得要把這放在Html的資料夾之中)。



字體標籤 :

字體標籤分為四部份:

在字體標籤裡,對於文字的格式也有很多變化,如粗體、斜體...etc,
也定義了一些現成的格式供編者使用,如『格式化』、『變數』...etc。
但極少使用,故不多加說明。此外還可使用其他字型,如:少女字、浪漫體...etc。
但先決條件是別人電腦也要有該字型!
語法是<font face="細明體">。
還有現在<B>粗體標籤
多用<strong>加強標籤替換。


背景標籤:

∼標籤語法∼

<bodybgcolor="#FFFFFF" background="圖片路徑" bgproperties="fixed" text="#000000"link="#0000FF" vlink="FF00FF" alink="FF0000" >

解說

bgcolor:
背景顏色的設定:使用 bgcolor。

在 <body> 標籤中加入:<body bgcolor="#000000">

同樣的,背景顏色也是跟文字顏色的設定方法相同,使用十六進位(00∼ff)設定背景顏色。

當開啟畫面時,若背景圖案還沒傳輸完之前,就會先顯現背景顏色,所以總比一片灰灰的好看多了吧!



background:
背景圖片的設定:使用 background。可以用 jpg (jpeg) 或 gif 格式的圖檔。

在 <body> 標籤中加入:<body background="/目錄/檔名.gif">

這樣就可以把圖片當作是背景了!



bgproperties:
浮水印效果。
捲動畫面時,背景圖像固定不動(只能在IE中顯示)
我們一般都只有設定 bgcolor 和 background 這兩個參數,其它就算不寫,瀏覽器也會以預設值來判斷。



text:
設定文字顏色,也就是說,若沒有特別去設定文字顏色的話,瀏覽器就會自動顯現您所設定的顏色。



link:
設定「連結前」的顏色。



vlink:
設定「按下連結」的顏色,也就是當滑鼠按下連結的瞬間所呈現的顏色。



alink:
設定「連結後」的顏色。也就是如果該連結已經有被按過了,那麼就會呈現的顏色。是為了讓使用者容易識別到底有哪些連結去過了。



圖片標籤 :

∼標籤語法∼

<img src="圖片路徑" alt="替代文字" align="left" border="0" hspace="2" vspace="2" height="25" width="150">

解說

圖片的插入:使用 <img> 標籤
例如我們要插入一個圖片就打入:<img src="/目錄/檔名.gif">
這樣,就可以把圖片放在網頁中了。

另外,<img> 標籤還有一些屬性,可更改圖片的位置、大小、替換文字、圖片間的間隔。

<img src="圖片路徑">:
顯示圖片最基本的方法。
有一點要注意的就是:圖檔檔名大小寫要注意是否和原始碼相同。
因為在硬碟中,不論檔名是大小寫,都能正常顯示。
但傳上了網路之後,大小寫不同可是代表不同的檔案。尤其是副檔名最會出錯!

[ 本帖最後由 妃 於 2011-6-18 07:40 PM 編輯 ]

I-See Forum @ All rights reserved.
頂部
載入中 ...
 發新回覆
發新主題 發新投票


載入中 ...


當前時區 GMT+8, 現在時間是 2024-3-29 04:40 PM

  Powered by Discuz!  © Comsenz Inc.
Processed in 0.026568 second(s), 7 queries , Gzip enabled

清除 Cookies - 聯繫我們 - I-See 論壇 - Archiver - WAP