維修筆記 20170710

舊電腦,DOS系統,IDE hardisk

沒有磁碟機的情況下要如何製作可開機的硬碟?

  1. 將硬碟先掛在D
  2. FDISK
  3. Format D:/s
  4. xcopy c:\*.* d: /s/e

上面的動作未缺將D硬碟的主要分割(primary partition)設為Active,在原有的DOS下只能將第1顆硬碟的主要分割設為Active,除非要用磁碟片開機… (全部丟了…)

後來,用一個作法,到Windows系統上,使用diskpart工具

使用usb硬碟外接裝置將硬碟掛上系統

使用diskpart

  1. select disk 2   (使用list disk檢查硬碟的代號)
  2. select partition 1 (主要分割應該是1)
  3. active (設為啟用)

 

【OpenVPN】 安裝、除錯 重點整理

因為學校架設的防火牆使得在外無法連線辦公室的電腦、主機什麼的,除非要請電算中心設定開放…,因此,動念,把一台可對外的Linux主機設置OpenVPN,提供在學校外時,做為跳板以連線到在學校的主機資源。

OpenVPN可裝在Linux或Windows上,其程式核心係Server端與Client端同體的設計,要做為Server端或Client端,透過設定檔Server.conf或client.ovpn來加以變化。

連線驗證有二種方式:數位憑證與帳號密碼,數位憑證需要產生每一個使用端所需要的憑證(不管是server或client)。

通訊協定:UDP或TCP,一開始建置預設是UDP,但是UDP/1194這個埠一直無法連線,猜測應該是電算中心的防火牆過濾掉(最近學校電算中心弄了一個很奇怪的作法,全學校的網路變成一個NAT架構,通通透過中華電信的NAT網進出網際網路…,搞得網路變得複雜,網路路由邏輯不單純),搞了很久(1天多),換用tcp/1194通了…。

推薦的網路教學:How To Setup and Configure an OpenVPN Server on CentOS 7

server.conf

#################################################
# Sample OpenVPN 2.0 config file for            #
# multi-client server.                          #
#                                               #
# This file is for the server side              #
# of a many-clients <-> one-server              #
# OpenVPN configuration.                        #
#                                               #
# OpenVPN also supports                         #
# single-machine <-> single-machine             #
# configurations (See the Examples page         #
# on the web site for more info).               #
#                                               #
# This config should work on Windows            #
# or Linux/BSD systems.  Remember on            #
# Windows to quote pathnames and use            #
# double backslashes, e.g.:                     #
# "C:\\Program Files\\OpenVPN\\config\\foo.key" #
#                                               #
# Comments are preceded with '#' or ';'         #
#################################################

# Which local IP address should OpenVPN
# listen on? (optional)
;local a.b.c.d
local 192.192.246.126

# Which TCP/UDP port should OpenVPN listen on?
# If you want to run multiple OpenVPN instances
# on the same machine, use a different port
# number for each one.  You will need to
# open up this port on your firewall.
port 1194

# TCP or UDP server?
proto tcp
;proto udp

# "dev tun" will create a routed IP tunnel,
# "dev tap" will create an ethernet tunnel.
# Use "dev tap0" if you are ethernet bridging
# and have precreated a tap0 virtual interface
# and bridged it with your ethernet interface.
# If you want to control access policies
# over the VPN, you must create firewall
# rules for the the TUN/TAP interface.
# On non-Windows systems, you can give
# an explicit unit number, such as tun0.
# On Windows, use "dev-node" for this.
# On most systems, the VPN will not function
# unless you partially or fully disable
# the firewall for the TUN/TAP interface.
;dev tap
dev tun

# Windows needs the TAP-Win32 adapter name
# from the Network Connections panel if you
# have more than one.  On XP SP2 or higher,
# you may need to selectively disable the
# Windows firewall for the TAP adapter.
# Non-Windows systems usually don't need this.
;dev-node MyTap

# SSL/TLS root certificate (ca), certificate
# (cert), and private key (key).  Each client
# and the server must have their own cert and
# key file.  The server and all clients will
# use the same ca file.
#
# See the "easy-rsa" directory for a series
# of scripts for generating RSA certificates
# and private keys.  Remember to use
# a unique Common Name for the server
# and each of the client certificates.
#
# Any X509 key management system can be used.
# OpenVPN can also use a PKCS #12 formatted key file
# (see "pkcs12" directive in man page).
ca ca.crt
cert server.crt
key server.key  # This file should be kept secret

# Diffie hellman parameters.
# Generate your own with:
#   openssl dhparam -out dh2048.pem 2048
dh dh2048.pem

# Network topology
# Should be subnet (addressing via IP)
# unless Windows clients v2.0.9 and lower have to
# be supported (then net30, i.e. a /30 per client)
# Defaults to net30 (not recommended)
;topology subnet

# Configure server mode and supply a VPN subnet
# for OpenVPN to draw client addresses from.
# The server will take 10.8.0.1 for itself,
# the rest will be made available to clients.
# Each client will be able to reach the server
# on 10.8.0.1. Comment this line out if you are
# ethernet bridging. See the man page for more info.
server 10.8.0.0 255.255.255.0

# Maintain a record of client <-> virtual IP address
# associations in this file.  If OpenVPN goes down or
# is restarted, reconnecting clients can be assigned
# the same virtual IP address from the pool that was
# previously assigned.
ifconfig-pool-persist ipp.txt

# Configure server mode for ethernet bridging.
# You must first use your OS's bridging capability
# to bridge the TAP interface with the ethernet
# NIC interface.  Then you must manually set the
# IP/netmask on the bridge interface, here we
# assume 10.8.0.4/255.255.255.0.  Finally we
# must set aside an IP range in this subnet
# (start=10.8.0.50 end=10.8.0.100) to allocate
# to connecting clients.  Leave this line commented
# out unless you are ethernet bridging.
;server-bridge 10.8.0.4 255.255.255.0 10.8.0.50 10.8.0.100

# Configure server mode for ethernet bridging
# using a DHCP-proxy, where clients talk
# to the OpenVPN server-side DHCP server
# to receive their IP address allocation
# and DNS server addresses.  You must first use
# your OS's bridging capability to bridge the TAP
# interface with the ethernet NIC interface.
# Note: this mode only works on clients (such as
# Windows), where the client-side TAP adapter is
# bound to a DHCP client.
;server-bridge

# Push routes to the client to allow it
# to reach other private subnets behind
# the server.  Remember that these
# private subnets will also need
# to know to route the OpenVPN client
# address pool (10.8.0.0/255.255.255.0)
# back to the OpenVPN server.
;push "route 120.107.96.0 255.255.255.0"
;push "route 192.168.20.0 255.255.255.0"

# To assign specific IP addresses to specific
# clients or if a connecting client has a private
# subnet behind it that should also have VPN access,
# use the subdirectory "ccd" for client-specific
# configuration files (see man page for more info).

# EXAMPLE: Suppose the client
# having the certificate common name "Thelonious"
# also has a small subnet behind his connecting
# machine, such as 192.168.40.128/255.255.255.248.
# First, uncomment out these lines:
;client-config-dir ccd
;route 192.168.40.128 255.255.255.248
# Then create a file ccd/Thelonious with this line:
#   iroute 192.168.40.128 255.255.255.248
# This will allow Thelonious' private subnet to
# access the VPN.  This example will only work
# if you are routing, not bridging, i.e. you are
# using "dev tun" and "server" directives.

# EXAMPLE: Suppose you want to give
# Thelonious a fixed VPN IP address of 10.9.0.1.
# First uncomment out these lines:
;client-config-dir ccd
;route 10.9.0.0 255.255.255.252
# Then add this line to ccd/Thelonious:
#   ifconfig-push 10.9.0.1 10.9.0.2

# Suppose that you want to enable different
# firewall access policies for different groups
# of clients.  There are two methods:
# (1) Run multiple OpenVPN daemons, one for each
#     group, and firewall the TUN/TAP interface
#     for each group/daemon appropriately.
# (2) (Advanced) Create a script to dynamically
#     modify the firewall in response to access
#     from different clients.  See man
#     page for more info on learn-address script.
;learn-address ./script

# If enabled, this directive will configure
# all clients to redirect their default
# network gateway through the VPN, causing
# all IP traffic such as web browsing and
# and DNS lookups to go through the VPN
# (The OpenVPN server machine may need to NAT
# or bridge the TUN/TAP interface to the internet
# in order for this to work properly).
;push "redirect-gateway def1 bypass-dhcp"

# Certain Windows-specific network settings
# can be pushed to clients, such as DNS
# or WINS server addresses.  CAVEAT:
# http://openvpn.net/faq.html#dhcpcaveats
# The addresses below refer to the public
# DNS servers provided by opendns.com.
;push "dhcp-option DNS 208.67.222.222"
;push "dhcp-option DNS 208.67.220.220"

push "dhcp-option DNS 8.8.8.8"
push "dhcp-option DNS 8.8.4.4"

# Uncomment this directive to allow different
# clients to be able to "see" each other.
# By default, clients will only see the server.
# To force clients to only see the server, you
# will also need to appropriately firewall the
# server's TUN/TAP interface.
;client-to-client

# Uncomment this directive if multiple clients
# might connect with the same certificate/key
# files or common names.  This is recommended
# only for testing purposes.  For production use,
# each client should have its own certificate/key
# pair.
#
# IF YOU HAVE NOT GENERATED INDIVIDUAL
# CERTIFICATE/KEY PAIRS FOR EACH CLIENT,
# EACH HAVING ITS OWN UNIQUE "COMMON NAME",
# UNCOMMENT THIS LINE OUT.
;duplicate-cn

# The keepalive directive causes ping-like
# messages to be sent back and forth over
# the link so that each side knows when
# the other side has gone down.
# Ping every 10 seconds, assume that remote
# peer is down if no ping received during
# a 120 second time period.
keepalive 10 120

# For extra security beyond that provided
# by SSL/TLS, create an "HMAC firewall"
# to help block DoS attacks and UDP port flooding.
#
# Generate with:
#   openvpn --genkey --secret ta.key
#
# The server and each client must have
# a copy of this key.
# The second parameter should be '0'
# on the server and '1' on the clients.
;tls-auth ta.key 0 # This file is secret

# Select a cryptographic cipher.
# This config item must be copied to
# the client config file as well.
# Note that 2.4 client/server will automatically
# negotiate AES-256-GCM in TLS mode.
# See also the ncp-cipher option in the manpage
cipher AES-256-CBC

# Enable compression on the VPN link and push the
# option to the client (2.4+ only, for earlier
# versions see below)
;compress lz4-v2
;push "compress lz4-v2"

# For compression compatible with older clients use comp-lzo
# If you enable it here, you must also
# enable it in the client config file.
;comp-lzo

# The maximum number of concurrently connected
# clients we want to allow.
;max-clients 100

# It's a good idea to reduce the OpenVPN
# daemon's privileges after initialization.
#
# You can uncomment this out on
# non-Windows systems.
user nobody
group nobody

# The persist options will try to avoid
# accessing certain resources on restart
# that may no longer be accessible because
# of the privilege downgrade.
persist-key
persist-tun

# Output a short status file showing
# current connections, truncated
# and rewritten every minute.
status openvpn-status.log

# By default, log messages will go to the syslog (or
# on Windows, if running as a service, they will go to
# the "\Program Files\OpenVPN\log" directory).
# Use log or log-append to override this default.
# "log" will truncate the log file on OpenVPN startup,
# while "log-append" will append to it.  Use one
# or the other (but not both).
log         openvpn.log
;log-append  openvpn.log

# Set the appropriate level of log
# file verbosity.
#
# 0 is silent, except for fatal errors
# 4 is reasonable for general usage
# 5 and 6 can help to debug connection problems
# 9 is extremely verbose
verb 3

# Silence repeating messages.  At most 20
# sequential messages of the same message
# category will be output to the log.
;mute 20

# Notify the client that when the server restarts so it
# can automatically reconnect.
;explicit-exit-notify 1

client.ovpn

client
dev tun
proto tcp
remote VPN_SERVER_IP  1194
resolv-retry infinite
persist-key
persist-tun
verb 3

ca "C:\\Users\\Wells\\OpenVPN\\ca.crt"
cert "C:\\Users\\Wells\\OpenVPN\\client.crt"
key "C:\\Users\\Wells\\OpenVPN\\client.key"

路由、防火牆等除錯指令

Linux

  • nmap
    • nmap –min-parallelism 100 -sT -sU localhost
  • netstat

Windows

  • ipconfig
  • route print

網頁前端工程師的學習路徑

 

Learn How To Become a Front-End Web Developer From Scratch

HTML Basics

1. HTML Basics
2. What is HTML
3. The Basic Structure of a WebPage
4. How To Add Text To a WebPage
5. How To Add a Image To Your Website
6. How To Link Web Pages Together
7. How To Create a List
8. Your Final Project For This Section

CSS Basics

9. What is CSS?
10. How To Link an External Style Sheet
11. Working With CSS Classes and ID’s
12. Your CSS Project For This Section
13. Solution To The CSS Class Project

How To Create Your Very First Website With HTML and CSS

14. Create a Basic Webpage With HTML and CSS
15. Working With Coding Editors
16. Creating a Wire frame For Our Website
17. The Basic Structure of a Webpage
18. HTML Content Containers
19. Creating Our Websites Navigation
20. Building Our Portfolio Page
21. Adding Images To Our Portfolio Page
22. Building Out Our Footer
23. Getting Started With CSS
24. External and Internal CSS
25. Working With ID Selectors
26. Centering Our Websites Wrapper
27. Taking a Mobile Friendly Approach To Web Development
28. Styling Our Website With Colour
29. Working With CSS Classes
30. Adding Comments in CSS
31. Adding Fonts To Our Website
32. Styling Our Portfolio Page
33. Creating a Horizontal Navigation
34. Fixing Up Our Footer and Navigation
35. Creating Our About Page
36. Styling Our About Page
37. Create a Contact Page
38. Creating Our Blog Page
39. Creating Our Portfolio Page
40. Adding a Grid To Our Portfolio Page
41. Final Adjustments To Our About Page
42. Final Adjustments To Our Header and Footer
43. Finishing Up Our Portfolio Page
44. Finding a Domain Name For Your Website
45. Finding a Webhost
46. Connecting Your Domain Name and Web Hosting Account

JavaScript Basics

47. Introductory
48. Creating Your Very First JavaScript Program
49. Examples of JavaScript On The Web
50. How To Link An External JavaScript File To An HTML Document
51. Working With The JavaScript Console
52. The JavaScript Console Challenge
53. JavaScript Console Challenge Solution
54. What is a JavaScript Variable?
55. How To Assign Names To Your Variables
56. An Introduction To Strings and Numbers
57. How To Capture Input From a User
58. Combining Strings Together
59. Working With Strings In Further Detail
60. The Variable Coding Challenge
61. The Variable Coding Challenge Solution
62. What Are Numbers
63. How We Do Math In JavaScript
64. Working With The Math Object
65. The Numbers Challenge
66. Solution To The Numbers Challenge
67. What Are Conditional Statements
68. Working With Comparison Operators
69. Working With Booleans
70. Comments In JavaScript
71. Combining Multiple Tests Into a Single Condition
72. Working With Conditional Statements Challenge
73. Working With Conditional Statements Challenge Solution
74. What are JavaScript Functions?
75. How To Return a Value From a Function
76. Giving Information To a Function
77. The Variable Scope
78. Working With Functions Challenge
79. Working With Functions Challenge Solution
80. Introductory To JavaScript Loops
81. Working Further With While Loops
82. Do While Loops
83. Working With For Loops
84. How To Break Out of a Loop
85. The JavaScript Loop Challenge
86. Solution To The JavaScript Loop Challenge
87. Working With JavaScript Arrays
88. How To Access Items In An Array
89. How To Add Items To An Array
90. How To Remove Items From an Array

WordPress Basics

91. What is WordPress
92. Self-Hosted or WordPress.com
93. Setting up Your Domain Name and Hosting Accounts
94. Setting Up your Nameservers
95. How To Install WordPress In Less Than 5 Minutes
96. Introductory To The WordPress Dashboard
97. How To Change your Site Title and Description
98. How To Create Posts and Pages
99. How To Add Images Into Your Posts
100. How To Add Video Content To Your Posts
101. How To Correctly Format Your Posts and Pages
102. How To Set-up Your Websites Navigation
103. How To Change Your Homepage Layout
104. Discussion Settings
105. How To Disable Comments In WordPress
106. How To Customize a WordPress Theme
107. How To Add a Featured Posts Thumbnail
108. Genesis and Canvas Theme Frameworks
109. WordPress Widgets
110. How To Add Users To Your Website
111. What is a WordPress Plugin?
112. A List of Common WordPress Plugins
113. How To Install and Setup WP Super Cache
114. How To Duplicate a Page or Post
115. How To Generate a Google XML Sitemap
116. How To Set-up and Install a MailChimp Sign-up Form
117. How To Add a Forum To a WordPress Website
118. HelloBar WordPress Plugin Review and Tutorial
119. How To Install and Activate BackupWordpress
120. How To Update WordPress, Themes, and Plugins
121. How To Install Google Analytics on a WordPress Website
122. How To Install Askimet Spam Protection WordPress Plugin
123. Canvas Theme Framework Review
124. How To Add a Custom Menu To The Genesis WordPress Theme

Bootstrap 4 Basics

125. Let’s Create a Simple Landing Page With Bootstrap 4
126. How To Install and Set-up Bootstrap 4
127. Introducing The Jumbotron Component
128. How To Create a Sign-up Form
129. Adding Basic Information To Our Website
130. Styling and Final Touches

Creating an E-commerce Store With Shopify

131. What This Section Will Be Covering
132. What is Shopify?
133. Getting Started With Shopify
134. Configuring Basic Account Settings
135. How To Publish Posts and Pages
136. How To Add Products To Your Store
137. Picking a Theme For Your Store
138. How To Setup Your Websites Navigation Menus
139. Customizing Your Shopify Stores Theme
140. How To Add Discounts To Your Store
141. How To Buy and Connect a Domain Name
142. Introductory To Shopify Apps
143. Conclusion

AUTODESK FUSION 360 教學


Fusion 360 電子書(資料來源/擁有者:AutodeskEducationTaiwan)

第一次玩3D 設計就上手 – Fusion 360 錦囊妙計  電子書練習題下載 (若下載失效…,備份在雲端硬碟)

Autodesk 官方教學文件

Fusion 360影音教學

CSS 教學 從 HTML + CSS開始

本文主要參考: http://www.w3.org/Style/Examples/011/firstcss.en.html

這個簡短的教學提供給那些想要學習CSS,卻從來沒有使用過CSS樣式的學習者,這個教學沒有太多的CSS介紹,僅僅介紹如何建立一個HTML文件加上一個CSS樣式文件,以及學習如何讓它們整合在一起。

在這個教學之後,你可以進一步地找一些教學及資料,給未來的網頁加上更多的HTML和CSS文件。

在未來,你可以使用專用的HTML 或 CSS 編輯器,幫助你設計複雜的網站。

在完成這個學習的最後,你將會製作出如下的一個HTML文件:

這個網頁只是為了學習網頁的建立與樣式的設定,不是一個完整有設計感的網頁,要多看一些好的設計,找一些富有設計感的模版來學習建置網頁。
【第一步:撰寫HTML】

在這個教學,我們只使用最簡單的文字編輯工具,例如,在Windows裡的Notepad (記事本),在Mac上的TextEdit ,或是在KDE裏的KEdit。我們的目的是要了解網頁背後的運作基礎與原理,一旦建立了相關概念,就可以進階到更高級的工具,如Style Master,Dreamweaver或GoLive。

目前,學習你的第一個CSS樣式時,不要因為使用太多的進階功能而分心。

第一步打開你的文字編輯器,在一個空的窗口開始,輸入以下的內容:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>我的第一個樣式頁面</title>
</head>
<body>
  <!-- 目錄 -->
  <ul class="navbar">
    <li><a href="index.html">首頁</a>
    <li><a href="musings.html">我思我在</a>
    <li><a href="town.html">我的家鄉</a>
    <li><a href="links.html">連接</a>
  </ul>
  <!-- 主要內容 -->
  <h1>我的第一個樣式頁面</h1>
  <p>歡迎來到我的樣式頁面!
  <p>這個網頁沒有圖片, 不過至少有CSS樣式、有超連結, 只是沒有所有的網頁元素…
  <p>這個網頁應該有更多的HTML元素,只是現在,我不知道要給你們什麼…
  <address>
    弘光科技大學 資訊管理系 <br>
    臺中市臺灣大道1段100號
  </address>
</body>
</html>

你直接從複製(copy)上面的內容,並以貼上(paste)的方式,將資料填入編輯器中:

儲存時,請以文字的方式進行存檔(整個教學完成後會有數個檔案):

注意一:當你使用記事本儲存檔案時,若最後的副檔名是txt,請將其去掉,網頁檔案的副檔名為htm或html。

注意二:在開始進行這個學習時,請在目錄建一個目錄用來儲存所有的檔案,以我為例,我在D槽中建了一個myWebPage目錄。

上面HTML文件的第一行宣告HTML的類型(DOCTYPE 意思是文件類型)。在這個案例中,它是HTML 4.01 版本。

在<和>裡的單詞叫標籤,像你看能到的,這文件包含<html> 和 </html> 標籤,表示一個html文件的開始與結束。

<head> 和</head>為html文件的檔頭定義標籤,目前,它包含了這個html文件的標題,之後我們會在這裡加上CSS樣式設定。

<body>是文件文本,原則上,<!– 和–>為html文件的註解。

<ul>標籤是“無序列表”,意謂沒有編號的列表。 <li> 是“列表項目”。

<p> 是“文字段落”。

<a> 是超連結。

注意:HTML不難,不過就是一組標籤的定義,同學可以在網路找到許多的html教學,例:HTML 簡介與應用

注意,本案例並沒下“li”和“p”結束元素,在HTML裡(但不是在XHTML 裡),允許忽略</li>和</p>標籤,只是為了使得文本稍微容易閱讀一點,你可以加上它們,如果你喜歡的話。

現在從檔案選單裡將這個html文件儲存為index.html,先不要關掉記事本編輯器,我們還會需要它。

接下來,我們使用瀏覽器裡打開“index.html”文件。

目前頁面看起來非常單調,沒有任何的設計元素……

【第二步:為網頁加些色彩】

我們從內嵌在HTML 文件裡的樣式開始,之後,我們會把CSS樣式 放進獨立的文件裡,獨立的css文件是一個比較好的作法,對比於混合CSS的HTML文件,它讓相同的樣式使用起來更簡單,你只需要編寫樣式一遍,就可以讓所有的HTML文件來使用CSS樣式。

CSS樣式是透過添加一個<style>元素在HTML文件的表頭中,加入下面的五行來定義<body>區塊的前景與背景顏色。

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN”>
<html>
<head>
  <title>我的第一個樣式頁面</title>
  <style type="text/css">
    body {
      color: purple;
      background-color: #d8da3d }
   </style>
</head>

第一行說的是,這是一個樣式表,並且它是用CSS (“text/css”)編寫的。第二行說的是,我們為“body” 元素添加了樣式。第三行設定了文本的顏色是紫色,接下来一行設定了背景是一種帶綠的黃色。

注意:CSS樣式的撰寫規則如下,每條規則有三個部分:

  1. 選擇器(在案例裡:“body”),告訴瀏覽器HTML文件的哪個部分受規則影響了;
  2. 屬性(在示案裡:’color”和’background-color’都是屬性),規定了佈局的什麼方面被設置了;
  3. (’purple’和’#d8da3d’ )給出了樣式屬性的值。

兩個屬性的設置,可以分別獨立撰寫:

body { color: purple }
body { background-color: #d8da3d }

 

現在儲存文件,回到瀏覽器,按下“更新”鍵,觀察網頁變化情形,網頁應該有了色彩。除了頂端的連接列表,網頁文件應該是帶有泛綠的黃色背景的紫色文件。

注意:在CSS裡顏色有多種方法來規定。此案例展示了它們的兩種方法:色彩名稱(“purple” )和色彩十六進制編碼(“#d8da3d” )。色彩的名稱大約有140種,而十六進制代碼有超過16,000,000種顏色。我們可以到底下網頁去取得顏色名稱與編碼

【第三步:指定字型】

另外一件容易做的事情是為頁面多種元素的字體製造一些區別,可以透過body來設定文本的字體,而且透過h1 來設定標題1的字體,底下的案例,是中文字體的設定,字體可以使用列表的方式,瀏覽器會視平台可用的字體,由左到右來選定可以套用的字體。

也就是說,由於不能確定你的讀者電腦上用的是什麼字體,我們添加字體的替代方案:如果沒有Georgia,Times New Roman 或Times 也可以,如果所有的都不行,瀏覽器會使用任何襯線字體,如果沒有Helvetica字體,瀏覽器會選取在形狀上是很相似的Geneva,Arial 和sunSans-Regular,如果沒有這些字體,瀏覽器會選擇任何其它無襯線的字體。

參考:

在文件裏加上底下關於字體的CSS設定:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
    body {
      font-family: 'cwTeXHei', 'Noto Sans TC', Arial, "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", "微軟正黑體", "Microsoft JhengHei", sans-serif;
      color: purple;
      background-color: #d8da3d }
    h1 {
      font-family: 'cwTeXHei', 'Noto Sans TC', Arial, "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", "微軟正黑體", "Microsoft JhengHei", sans-serif;}
  </style>
</head>

<body>
以下略

再次儲存文件,並在瀏覽器按“更新”,現在網頁的字體已經擺脫不好看的細明體了。


【第四步:加上一個導覽列】
在HTML 頁面頂部的列表是為了建立一個導覽選單。許多網站有些目錄分類在頂部或是在頁面的邊上,我們把它放在左邊。

導覽選單已經定義在HTML 頁面裡,就是一開始在頂部的<ul>列表,目前連結尚未完整,我們的“網站”到現在為止只有一個頁面,之後我們要把所有連結對應的網頁加上來。

我們要把列表移到左邊去,然後把其它的內文稍微右移,來調整整個網頁的空間,我們要使用的CSS屬性’padding-left’(移動文本主體)和’position’、’left ‘和’top’(移動選單)。

還有其它的方法來做到這一點,例如:“column”或“layout” 。

參考:

在這個編輯器窗口,在HTML文件裡添加以下的行:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
    body {
      padding-left: 11em;
      font-family: 'cwTeXHei', 'Noto Sans TC', Arial, "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", "微軟正黑體", "Microsoft JhengHei", sans-serif;
      color: purple;
      background-color: #d8da3d }
    ul.navbar {
      position: absolute;
      top: 2em;
      left: 1em;
      width: 9em }
    h1 {
      font-family: 'cwTeXHei', 'Noto Sans TC', Arial, "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", "微軟正黑體", "Microsoft JhengHei", sans-serif;}
  </style>
</head>
<body>

以下略

如果你再次保存文件,在瀏覽器裡刷新它,你現在就可以得到主要文本左邊的鏈接列表了。已經看起來更加有意思了,是不是?


主要本文被移到了右邊,現在鏈接列表在它的左邊,而不是在頂部了。

注意:’position: absolute’說明ul 元素的定位獨立於或早或晚在文件中出現的任何文本,而”left’和’top’標明了在什麼位置。在這個情況中,從視窗頂部起2em,左邊起1em。

‘2em’表示2倍當前字體的大小。例如,如果選單用一個12點的字體顯示,那麼2em就是24點。 em在CSS裡是非常有用的一個單位,因為它能自動適應讀者可能使用的字體。許多瀏覽器有一個加大或是減少字體大小的選單:你可以試一試,看看當字體加大了選單如何在大小方面加大,如果我們換做使用一個像素大小,情況就不會是這樣了。

【第五步:設計超連結樣式】

導覽選單依然看起來只像個列表,而不像選單。讓我們給它添加一些樣式。我們會移除列表項目符號,再把項目移到左邊,項目符號的位置。我們還會給每個項目它們自己的白色背景和黑色框框。(為什麼?沒有特殊的原因,只是因為我們能夠這樣做。)

我們也沒有說明鏈接的顏色應該是什麼,所以,讓我們也加上:藍色顯示用戶沒有看過的鏈接,紫色顯示已經訪問過的鏈接:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
    body {
      padding-left: 11em;
      font-family: 'cwTeXHei', 'Noto Sans TC', Arial, "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", "微軟正黑體", "Microsoft JhengHei", sans-serif;
      color: purple;
      background-color: #d8da3d }
    h1 {
      font-family: 'cwTeXHei', 'Noto Sans TC', Arial, "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", "微軟正黑體", "Microsoft JhengHei", sans-serif;}
    ul.navbar {
      list-style-type: none;
      padding: 0;
      margin: 0;
      position: absolute;
      top: 2em;
      left: 1em;
      width: 9em }
    ul.navbar li {
      background: white;
      margin: 0.5em 0;
      padding: 0.3em;
      border-right: 1em solid black }   
    ul.navbar a {
      text-decoration: none }
      a:link {
      color: blue }
      a:visited {
      color: purple }
  </style>
</head>
<body>

以下略

注意:按慣例來說,瀏覽器用下標線和顏色來顯示超鏈接。通常,使用類似我們在這裡規定的顏色:藍色顯示你還沒有訪問過的鏈接頁面(或是很久之前訪問過的),紫色顯示你已經看過的。

在HTML 裡,超鏈接是用<a>元素創建的,所以要規定顏色,我們需要添加“a”的樣式規則。為了區分已經訪問過的和沒有訪問過的鏈接,CSS提供了兩個“假類”(:link 和:visited) 。它們稱為“假類 pseudo-classes”以區別那些類別的屬性,在我們的案例裡,指定ul的類別屬性:class= “navbar”

【第六步:加上一個水平線】

接下來添加的樣式是用來把文本跟底端簽名分開的一個水平線規則。我們會使用’border-top’在<address>元素上面來添加一條線:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
    body {
      padding-left: 11em;
      font-family: 'cwTeXHei', 'Noto Sans TC', Arial, "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", "微軟正黑體", "Microsoft JhengHei", sans-serif; 
      color: purple;
      background-color: #d8da3d }
    ul.navbar {
      list-style-type: none;
      padding: 0;
      margin: 0;
      position: absolute;
      top: 2em;
      left: 1em;
      width: 9em }
    h1 {
      font-family: 'cwTeXHei', 'Noto Sans TC', Arial, "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", "微軟正黑體", "Microsoft JhengHei", sans-serif;}
      ul.navbar li {
      background: white;
      margin: 0.5em 0;
      padding: 0.3em;
      border-right: 1em solid black }
    ul.navbar a {
      text-decoration: none }
      a:link {
      color: blue }
      a:visited {
      color: purple }
    address {
      margin-top: 1em;
      padding-top: 1em;
      border-top: thin dotted }
  </style>
</head>

<body>

以下略

現在我們的樣式完成了。接下來,讓我們看看如何把樣式表放進單獨的文件裡,如此以來其它的頁面能分享同樣的樣式。


【第七步:將樣式設定放在另一個獨立的檔案】

我們現在有一個嵌入樣式CSS的HTML 文件,只是如果我們的網站發展了,我們肯定會要許多頁面分享相同的樣式,有一個比複製樣式表到每個頁面更好的辦法:我們把樣式放進單獨的文件,使用所有的頁面都可以參考它。

要製作樣式表文件,我們需要建立另一個空的文件,從HTML 文件中複製在<style>元素裡的內容,記得不要複製<style>和</style>這2個標籤,它們屬於HTML ,不屬於CSS。在新的記事本應該有完整的樣式:

文件必須確保與index.html文件在同一個目錄裡,上面的樣式檔案儲存為“mystyle.css”。

現在回到編輯indexl.html的HTML記事本視窗,移除從<style>標籤開始到包括</style>標籤的所有內容,再用<link>元素替換它,如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>我的第一個樣式頁面</title>
  <link rel="stylesheet" href="mystyle.css">
</head>
以下略

這會告訴瀏覽器在目錄中找到叫“mystyle.css”的樣式表。

【第八步:產生所有的連結檔案】
接下來,請產生底下三個網頁,好讓導覽連結能夠正確地切換到各個網頁:

  • musings.html
  • town.html
  • links.html

【第九步:將網頁檔案放在網站空間】

目前,我們所有的作業都是在自己的電腦上,所以瀏覽器是以file:///方式來打開網頁檔案,而不是以http://的型式,要讓所有的人可以從網際網路上來存取你的網站,你必須要有一個可以在網際網路上任意存取的網站空間,並把所有網頁的檔案上傳到網站:

  1. 自行架站,在家或在學校或在機關或在…
  2. 我的學生可以由我提供網站空間。
  3. 免費的虛擬主機 (virtual host),比較容易,可參考各家提出的方式,將網站上傳到申請的免費虛擬空間。
  4. 虛擬伺服器 (virtual private server)
  5. google 雲端主機

【HTML/CSS產生器】

在這個教學之後,你可以利用在網路上的HTML/CSS產生器工具來是快速產生需要HTML/CSS碼,try it now!

【參考資料】

PLC sources

【PLC Standards]

【Documents】

【Listing of Open Source Ladder editors】

Ladder Logic Simulator

【HAL】

【Production Editors】

【CNC】

【plc peripheral】

 

【PLC-based Motion/Motor Controller】

PLC-based vs. proprietary robotic controls