冰楓論壇

 找回密碼
 立即註冊
查看: 421|回覆: 0

[心得] 網頁設計入門教學

[複製鏈接]

879

主題

1

好友

1237

積分

金牌會員

Rank: 6Rank: 6

UID
64909
帖子
920
主題
879
精華
0
積分
1237
楓幣
56
威望
1235
存款
0
贊助金額
0
推廣
0
GP
0
閱讀權限
70
性別
保密
在線時間
48 小時
註冊時間
2014-6-8
最後登入
2019-6-1

積分勳章 幼兒勳章 性別(女) 懶人勳章 性別(男) 太陽勳章 神手勳章 音樂勳章 2015年紀念勳章 發帖達人 私服達人 instagram紀念勳章 Android勳章 2016年紀念勳章 Android勳章

發表於 2016-12-4 00:03:43 |顯示全部樓層
網頁設計入門的教學網站。用最簡單的文字、最簡單的方式,一步
步教導初學者學會網頁設計,架好自己網站。

我們為什麼要學網頁設計?主要目的,除了自己架設網站外,更重要的是
可以自己維護網站。會架設網站,就會維護網站。

網頁設計入門,其實很容易,大約只要花兩小時,就可學會入門工夫,就
可以架設簡單的網站。但是,網頁設計進階就很難。不過,就一般人來講
,我們只需要架個簡單而實用的網站,並不需要精緻美觀的網站,網站的
內容比美觀更重要。


——————————————————————————–

一‧ 基本概念

A. 三步驟:
在自己電腦中設計(用記事本即可)。設計好後,用瀏覽器看,重覆修改。

用ftp(或ws_ftp)將網頁傳至主機。網頁目錄為www,首頁名稱為index.html。

到搜尋引擎登記。如不登記,可將網址告知親友、學生。
B. 網頁主要是由文字、圖片構成。設計網頁就是將文字、圖片放在適當位置,如同玩
  拼圖遊戲。文字可調整大小、顏色。圖片限用*.gif、*.jpg,每一圖片約5k,不要太
  大。在網頁上可控制圖片大小。注意:文字是網頁的根本。文字語法最多。
C. 第一頁叫首頁–homepage,網頁設計重心在首頁。其他叫網頁–web page。要設計出
  很漂亮的網頁,必須有美工基礎。網頁的內容及維護網頁,比較重要。不要花太多
  時間設計首頁。網頁設計是用HTML語言。





——————————————————————————–

二‧ HTML 基本語法

1. 網頁必備
<html></html>

<head><titile>網頁設計入門教學網站</title></head>

<body></body>

  實例:
   <html>

   <head><titile>網頁設計入門教學網站</title></head>

   <body>

   本站是網頁設計入門的教學網站。用最簡單的文字、最簡單的方式,一步步教導
   初學者學會網頁設計,架好自己網站。

   </body>

   </html>

請注意:當您會寫出文字網頁後,就可參考[ 三‧ ftp (檔案傳輸)使用方法 ],上傳寫好的網頁。



2. 文字位置
< br> 標籤。文字斷句。單獨使用。實例:我們為什麼要學網頁設計?<br>

< p> 標籤。文字分段。單獨使用。實例:我們為什麼要學網頁設計?<p>

< center></center> 標籤。文字置中。
實例:< center>我們為什麼要學網路設計?</center>
< hr> 水平線。單獨使用。用來當分隔線。

3. 控制文字大小、顏色
標籤:<font></font>

屬性:size控制字型大小,1最小,7最大。

屬性:color控制字的顏色,共有約200多色。
實例:<font size=6 color= white>國學全球資訊網</font>



4. 其他:
<blockquote></blockquote> 向右縮排,空出五格空白字元。

<pre></pre> 標籤。以原來編排方式,顯示在螢幕上,但字體會變小。

mailto: 這個指令,可以讓瀏覽網頁的人,寄電子郵件給站長。
用法:<a href="mailto: chwang@mail.ntit.edu.tw" taget="top">寄信給我</a>
特殊字元(要用小寫英文字母)
有些符號,必須用特殊方法來顯示。如:

"   用 &quot;
& 用 &amp;
<  用 &lt;
>  用 &gt;
註解符號 <!–  –>
用法:<!–這是註解,不顯示在網頁中。–>
標號清單與符號清單。

產生空白字元的三種方法。
5. 網頁背景
背景顏色 <body bgcolor=green> 背景預設顏色是灰色。

讀入背景圖片 <body background="/~chwang/gif-new/bg/bk509.gif">

text 指定文字顏色。文字預設顏色是黑色。

link 指定超連結顏色

vlink 指定已連結過的網站,超連結顏色。
實例:

<body background="/~chwang/gif-new/bg/bk509.gif" text="#000080″ link=red
vlink=darkred>
如何調出喜歡的顏色?

色彩表,請參看: (交大計算機中心) Color Name and Value
6. 讀入圖片 — 影像標籤
標籤:
實例:


屬性: align=right(靠右對齊) or left(靠左對齊) or center(圖片置中)

屬性: heigh 圖片高度

屬性: width 圖片寬度

屬性: hspace 圖片上下空白距離

屬性: vspace 圖片左右空白距離

屬性: alt="圖片"
alt 說明:有些人的數據機速度較慢,有時網路會塞車,影響讀圖片速度,甚至
讀不出圖片。如能加上alt="這是某圖片",說明圖片內容。雖然沒讀出圖片,也
以知道是什麼圖片。如還是想讀出圖片,可將滑鼠移到圖片上,按滑鼠右鍵,
選" 檢視影像 “,就可看到圖片。
屬性: border 圖片四周框線。border=0時,圖片四周無框線。
實例:
7.連結網站
<a></a> 連結標籤。顏色預設為藍色,連結過的顏色預設為紫色。調整方法,參
看 5. 網頁背景。

屬性:href 放在 <a> 中。
用法:<a href="網站位址">這裏放連結的網站名稱</a>
屬性:target="_top" 將被連結網頁,展現在原來視窗。

屬性:target="_blank" 將被連結網頁,展現在新視窗。
實例:

<a href="http://web.ntit.edu.tw/~chwang/door/homepage.htm" target="_top">網頁設計入
門網站</a>

說明一:

網網相連,是網際網路特色。但當我們連結別人網站時,最好將被連結的網站,
展現在原來視窗(全螢幕 ),或展現在新視窗。不要將被連結網站,放在自己網站
的框架(第12,會介紹框架用法 )中,以免瀏覽者誤認被連結網站,是我們網站的
一部份。

說明二:

當我們設計網頁,想連結電腦硬碟中其他網頁時,只要打<a href="test.htm">連結
test.htm</a> ,就可連結硬碟中 test.htm(所設計的網頁和硬碟中被連結的網頁,必
須放在同一目錄)。

當我們要把網頁上傳到電腦主機時(上傳方法,下節會介紹),必須先將網頁原
始碼修改成:

<a href="/~chwang/test.htm">連結 test.htm</a>

test.htm要放在chwang帳號,www目錄中。
用 name 跳回目錄。
8.表格標籤
<table></table> 表格標籤

<tr></tr> = table row 表格列。放在<table></table>中。

<caption></caption> 標題標籤。在表格最上方外面,加上表格標題。也可用 <caption align="bottom">,將標題放在表格最下方。

<th></th> = table headings 抬頭欄,粗線條字型。<tr></tr>中。

<td></td> = table data 表格資料欄。放在<tr></tr>中。

屬性:border 表格框線。內定 border=1。border=0 時,表格框線取消。

屬性:水平對齊 align=right(靠右對齊) or left(靠左對齊) or center(對齊中間)

屬性:colspan 表格欄位垂直展開
實例一:

<table border=0>

<tr><th>抬頭欄</th></tr>

<tr><td>表格資料欄</td></tr>

</table>
實例二:

<center>
<table border=1>
<tr>
<th colspan=5>學生國文成績</th>
</tr><tr>
<td>姓名</td>
<td>平時成績</td>
<td>期中考成績</td>
<td>期末考成績</td>
<td>學期成績</td>
</tr><tr>
<td>張三</td>
<td align=center>80</td>
<td align=center>80</td>
<td align=center>80</td>
<td align=center>80</td>
</tr><tr>
<td>李四</td>
<td align=center>90</td>
<td align=center>90</td>
<td align=center>90</td>
<td align=center>90</td>
<tr>
</table>
</center>

實例二執行:
學生國文成績
姓名 平時成績 期中考成績 期末考成績 學期成績
張三 80 80 80 80
李四 90 90 90 90
9.框架標籤
</frameset></frameset> 框架標籤

<frame> 框架內容。放在</frameset></frameset>中。

屬性:rows 設定列數、列高

屬性:cols 設定垂直框架、寬度

屬性:src 指向要放在框架中的 htm 檔、連結網站的網址

屬性:marginwidth 框架左右邊界寬度

屬性:marginheight 框架上下邊界寬度

屬性:scrolling 設定框架中捲動軸。可選 yes、no、auto,預設值是 auto。

屬性:border 設定框架邊框厚度
實例一:

<html>

<head><title>國學全球資訊網</title></head>

<frameset rows="18%,68%,14%">

<frame src="c0.htm" marginheight=0>

<frame src="c1.htm" marginheight=0>

<frame src="c2.htm" marginheight=0>

</frameset>

</html>


——————————————————————————–

實例二:

<html>

<head><title>東沅書局全球資訊網</title></head>

<frameset rows="18%,82%">

<frame src="store0.htm" scrolling="no" marginheight=0 border=0>

<frameset cols="22%,78%">

<frame src="store2.htm" scrolling="no" border=0>

<frame src="store1.htm" border=0>

</frameser>

</frameset>

</frameset>

</html>

——————————————————————————–

三‧ ftp (檔案傳輸)使用方法
跳到 ms-dos

進入傳檔目錄。 cd 目錄名

ftp mail.ntit.edu.tw

輸入帳號名稱、密碼

mkdir www

cd www

put index.html
(如果一次要傳多個檔案,用mput *.*)
dir 確定是否傳輸成功

quit
注意:

大型電腦主機,大都用 unix 作業系統。 unix 作業系統,大、小寫不同,要特別
注意檔名。檔名最好統一用小寫。



新增 — 最簡單的檔案傳輸方法(以本校為例)

1.打開ie.
2.網址列輸入 ftp://web.ntit.edu.tw
3.輸入使用者名稱.密碼.按登入.
4.在www上快速按兩下.進入資料夾.
5.滑鼠移到檔案上.按右鍵.用複製.貼上.來上傳或下載檔案.


——————————————————————————–

四‧ ws_ftp 設定及使用方法
下面 1 – 10 是設定方法,在第一次使用 ws-ftp 時,需先設定好。

Profile Name 輸入:web.ntit.edu.tw

Host Name/Address 輸入:web.ntit.edu.tw

Host Type 選擇:Automatic detect

Anonymous 勿打勾

User Id 輸入:chwang

password:******

Save Pwd 請打勾

選第二項 Startup

Inital Remote Host Directory 輸入:/home/users/chwang/www

Intial Local Directory 輸入:c:www
下面 11 – 14 是使用方法。 ws_ftp 的使用方法非常簡單。
左邊 Local System 是自己電腦目錄,右邊 Romote System 是電腦主機目錄。

要傳檔時,只要將滑鼠移到檔案上,快速按兩下,檔案就會從左邊傳到右邊,或
從右邊傳到左邊。如要傳輸多個檔案,則先拖曳滑鼠將要傳的檔案反白,然後按
中間箭頭,就可將檔案傳輸過去。

比較常用到的部份,簡單介紹如下:
Chgdir 切換目錄

Mkdir 造新目錄

Rename 改檔名

Delete 刪除檔案

Refresh 更新檔案。檔案修改、存檔後,要再上傳檔案,需先按 Refresh 更新。

Connect 斷線後,按 Connect ,再連接主機。
Ascii、Binary、Auto 三選項,只要選 Binary ( 二進位傳檔 ) 就行了。

[發帖際遇]: appboy 正確回答議員「陳彥伯」的「肚臍」提問,因而獲得獎勵 1 楓幣. 幸運榜 / 衰神榜
您需要登入後才可以回帖 登入 | 立即註冊

正在連接伺服器...
打開冰楓聊天室
廣告刊登意見回饋關於我們職位招聘

Copyright © 2011-2019 冰楓論壇, All rights reserved

免責聲明:本網站是以即時上載留言的方式運作,本站對所有留言的真實性、完整性及立場等,不負任何法律責任。

而一切留言之言論只代表留言者個人意見,並非本網站之立場,用戶不應信賴內容,並應自行判斷內容之真實性。

小黑屋|意見反饋|手機版|Archiver|冰楓論壇

GMT+8, 2019-7-23 17:09

APP Store下載 Play Store下載
回頂部