簡單網頁設計
by 蔡神 寫於 1994年 [email protected]
網頁雖然可以很複雜, 但其實也可以很簡單 :-) 如果你已經習慣用 DreamWeaver 或 FrontPage 等工具做網頁, 那這篇不必看了 :-) 網頁也是文字檔案(text file), 一般只要檔案尾巴取 .htm 或是 .html 就會被當作是網頁。 (1)最簡單的網頁就是以所見即所得的方式呈現的網頁, 也就是你先用文字編輯器打出你要的"樣子", 然後在該檔案最前面加入以下兩列即可: <html><body bgcolor=lightYellow> <pre><b><font color=blue size=4> (2)不過有兩個符號要特別注意: & 和 < 所以在要補上(1)所說的兩列之前請先用文字編輯器(如 notepad 即可)依序做以下兩件事情: (a)用編輯全部更換(replace all)的方式把 & 改為 & (b)用編輯全部更換(replace all)的方式把 < 改為 < 注意以上(a)(b)一定要照順序做! 不過如果你的文章中所有的 & 和 < 兩符號之後都至少有一個空格, 那可以不必做這(a)(b)兩件事! 但是, 通常如果是程式碼, 可能會用到 && 這代表 "且"的符號, 也就是連續兩個 & 顯然中間不可以空格, 那你就一定要做 (a)規定的換掉所有的 & (3)這樣已經是個視覺上看起來不會很難過的網頁(淡黃色底, 藍色四號字, 粗體); 但有時你想強調某段文字, 可考慮把該段文字用 font 標籤夾住, 例如: <font color=red>這會變紅色字體</font>這恢復藍色字體 如果文字要有底色, 加入 style 屬性即可, 例如: <font color=red style="background:yellow">這是紅色字體但黃色底</font> (4)偶而用 <hr> 畫一條橫線, 例如畫一條紅色粗細是兩點的線:<hr color=red size=2>
!!! (注意 2020年後規定須https才可喔!) (7)如果你要凸顯一段落的開始, 可以考慮臨時換 size=5 或 size=6 的紅色字, 甚至該標題用黃色底比較明顯, 例如: <font color=red size=5 style="background:yellow"> 這是紅色五號字黃底 </font> (8)如果你要設定超連結(HyperLink), 可用 <a href="網址"> 與 </a> 夾住一句話, 例如: <a target=_blank href="http://www.edu.tw">點這會連到教育部首頁</a> 你現在看到的這網頁就是這樣做出來的, 可以點按檢視原始檔(View Source)查看! 以下是方便複製去做這篇所講的簡易網頁: 請把滑鼠點這右邊壓下開始往下拖即可複製: <html><body bgcolor=lightYellow> <pre><b><font color=blue size=4> 這裡放你已經修改過 & 和 < 兩個符號的文章 注意要先把 & 改為 & 再把 < 改為 < <font color=red>這會變紅色字體</font>這恢復藍色字體 繼續 ... <font color=red style="background:yellow">這是紅色字體但黃色底</font> <font color=red size=5 style="background:yellow"> 這是紅色五號字黃底 </font> 以下畫一條藍色線, 佔畫面 58%, 靠左: <hr color=blue width=58% align=LEFT> 以下會出現林志玲照片: <img width="258" src="http://www3.365shu.com/images3/wall/20060726/Chiling010.jpg"> 照片寬度調整為 258像素 <font color=red>這會變紅色字體</font>這恢復藍色字體 繼續 ... <font color=red style="background:yellow">這是紅色字體但黃色底</font> 再看看以下這會怎樣: <img width="258" align=RIGHT src="https://il.beauty321.com/gallery/articleIMG/AL_24321.jpg"> 注意主要是加了 ALIGN=RIGHT 還有, 再次提醒, 圖片要先夾檔到你文章, 存檔後再重新編修你文章, 複製圖片網址(捷徑)來用; 或者, 你也可以把圖片上傳到大家可看得到的網站, 例如你的臉書(Facebook)或其他部落格或是網頁空間, 且要記得開放權限給大眾, 然後找出該圖片的網址: 用滑鼠右鍵點該圖片, 選最底下的"內容" (Property), 彈出的窗就可看到網址, 用滑鼠左鍵在該網址快速連點三下, 敲 Ctrl_C 複製即可。 開新窗連到 Google協作平台 去 (需要有 Google 的 GMail 帳號, 沒有就立刻申請一個!) *** 如果 <hr color=red > 已經不 work, 現在要在 <hr 內改這樣描述 style="border:solid 1px red;" 例如 <hr style="border:solid 3px red;"> 這是用以下的 HTML 網頁碼連到 Google 的協作平台取得 Applet <Applet code="ydu.HWApp87.class" archive="week08.jar" codebase="https://sites.google.com/site/abc135246111/" width=568 height=258> </applet> 請注意, Google 自2015年4月已經禁止使用 Java Applet -- 參考: Google Chrome瀏覽器於2015年4月起已經停用了Java Applet外掛(曾經是讓Java紅起來的技術) Top |
大學網站排名 (Ranking Web of Universities)
Migrate Weebly to WordPress: A Step-by-Step Guide
Posted on April 23, 2016 by Tom Ewer in Resources | 17 comments
While Weebly may have suited you when you first launched your website, it may no longer have everything you need for your growing business. In checking out the alternatives for your website, you likely considered moving to WordPress.
Weebly, like many paid platforms, would prefer to keep you as a customer, so moving your website from their platform is not a simple one-click operation, but it can be done by following the steps we outlined above. With a little planning and our instructions, you can have your site moved from Weebly to WordPress in no time.
. . . See https://www.elegantthemes.com/blog/resources/migrating-weebly-to-wordpress-a-step-by-step-guide
Posted on April 23, 2016 by Tom Ewer in Resources | 17 comments
While Weebly may have suited you when you first launched your website, it may no longer have everything you need for your growing business. In checking out the alternatives for your website, you likely considered moving to WordPress.
Weebly, like many paid platforms, would prefer to keep you as a customer, so moving your website from their platform is not a simple one-click operation, but it can be done by following the steps we outlined above. With a little planning and our instructions, you can have your site moved from Weebly to WordPress in no time.
. . . See https://www.elegantthemes.com/blog/resources/migrating-weebly-to-wordpress-a-step-by-step-guide