Embedded Files
Web Server 按裝與環境設定：
PHP 在本機運行之前，需要事先按裝 Web Server，目前 XAMPP 是最流行的 PHP 開發環境套件，XAMPP 是完全免費且易於安裝的 Apache 發行版本，其中包含 Apache、 MariaDB、PHP (AMP) 和 Perl。
XAMPP 下載網址： https://www.apachefriends.org/，下載選擇 XAMPP for Windows (latest version：portable)。
請將下載的 XAMPP 檔案在 D 磁碟區解壓縮，解壓完成以後將 XAMPP 目錄剪貼到 D 磁碟之根目錄下即可啟動 XAMPP 伺服器。
如果 XAMPP 有移植到其它的 PC 或更換路徑，請在第一次啟動前先執行一次 setup_xampp.bat (這很重要! ** 3)。
啟動 XAMPP 伺服器執行xampp-control.exe，接著 Start Apache & MySQL ，如下圖所示。
然後，開啟Browser輸入網址：localhost，並進入 phpMyAdmin，設置密碼。
使用者帳號之密碼設定：使用者帳號 / root的編輯權限 / 更改密碼。
更改密碼完成以後，進入xampp / phpMyAdmin資料夾中，編輯「config.inc.php」
之「$cfg[‘Servers’] [$i] [‘password’]」的設定。
MS Expression Web 4 按裝：
MS Expression Web 4 提供了生成高質量與基於標準的網站所需的工具，內置對當今 Web 標準的動支持，完善的 CSS 設計功能以及可視化診斷工具。 User 可以使用 PHP、HTML、CSS、JavaScript、ASP.NET 來輕鬆地創建和維護網站，所以這學期的 PHP 基礎程式設計的軟體 開發工具是以 MS eWeb 4 為主 。例如：我們將在下週的課堂中，可以使用 eWeb 4 運行本章案例「HTML5 - RWD」程式並且在程式中使用 Link CSS 的方式來呈現出響應式網頁設計 (Responsive Web Design) 的瀏覽介面。
網頁技術演進：
HTML (Hypertext Markup Language) 以純文字格式為基礎，可讓任何一個文字編輯器處理，最初僅有少量標記（Tag）而易於掌握運用。
網頁規格發展至 4.01 版本時，網頁可以外掛 Adobe Flash、Microsoft Silverlight 所設計的動畫元件，對於沒有安裝外掛程式的瀏覽器而言就會造成無法瀏覽。同時，也沒有可用的影音播放 Tag。
網頁規格發展至 HTML5 版本時， 提供 區塊Tag、影音播放Tag等，也針對 HTML4 進行了 Tag 的簡化與汰換 。
規劃網頁區塊：
HTML5 文件結構暨常用的容器標籤元素：
<header> ：定義網頁的大標頭，指網頁的上方區域。
<nav>：放置網頁的選單、導覽。
<section>：通常將段落資料放置在此元素內。
<article>：自訂的區塊， 例如 ：一篇文章的版面區塊。
<aside>：側邊版面區塊，例如：放置文章列表、廣告等版面區塊。
<footer>：使用於網頁的頁尾，通常放置網站版權資訊、相關連結等。
<mark>：內容 加上網底 (強調)。
<time>：顯示日期時間。
<video>、<audio>：影音播放標籤元素。
<title>：網頁的大標題標籤元素。
<div> ：區塊容器標籤元素。
<ul>< li>：項目標籤元素。
<h1>：標題文字 標籤元素 (i.e., h1 ~ h6 標題語法)。
<p>：一段文字段落標籤元素。
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>網頁的大標題</title> <link href="style.css" rel="stylesheet"></head><body><header> <h1>H1 標題文字 (in Header) </h1> <p id="mcy">這裡是一段文字段落區域 (in Header) <p></header><div class="row"> <nav class="col-25 col-s-25 menu"> <ul> <li>項目標籤 1</li> <li>項目標籤 2</li> <li>項目標籤 3</li> <li>項目標籤 4</li> </ul> </nav> <article class="col-50 col-s-75"> <h1>H1 標題文字 (in Article) </h1> <p id="mcb">一段文字段落 (in Article)</p> </article> <div class="col-25 col-s-100"> <aside> <h2>H2 標題文字 (in Aside 1)</h2> <p id="mcr">一段文字段落 (in Aside 1)</p> <h2>H2 標題文字 (in Aside 2)</h2> <p id="mcr">一段文字段落 (in Aside 2)</p> <h2>H2 標題文字 (in Aside 3)</h2> <p id="mcr">一段文字段落 (in Aside 3)</p> </aside> </div></div> <footer> <p>網站版權資訊、相關連結區域</p></footer></body></html>
/* style.css <style> */* { /* 確定padding和border (內距和邊框) 不會增加元素本身的寬度 */ box-sizing: border-box;}.row::after { /* 在row下面增加空行內容 */ content:""; clear:left; display:table;}[class*="col-"] { /* 所有欄位的樣式設定 */ float: left; padding:10px; width: 100%;}/* 預設是Mobile螢幕 *//* 以下是平板螢幕的@Media */@media only screen and (min-width: 481px) { .col-s-25 {width: 25%;} /* nav 欄位使用 */ .col-s-75 {width: 75%;} /* article 欄位使用 */ .col-s-100 {width: 100%;} /* aside 欄位使用 */}/* 以下是PC螢幕的@Media */@media only screen and (min-width: 769px) { .col-25 {width: 25%;} /* nav 和 aside 欄位使用 */ .col-50 {width: 50%;} /* article 欄位使用 */} html { /* 設計HTML字型的CSS */ font-family:PMingLiU, DFKai-sb, Microsoft JhengHei;}header { /* 設計header標題區CSS */ background-color: blue; color:#fff; padding:15px;}.menu ul { /* 表格的ul樣式CSS */ margin: 10; padding: 10; list-style-type:none; }.menu li { /* 表格的li樣式CSS */ background-color: pink; color:#000; padding:10px; margin-bottom:10px; box-shadow:gray 5px 5px 5px;}.menu li:hover { background-color: green; color:#fff; }aside { /* aside區的CSS */ background-color: yellow; color:#000; padding:15px; text-align:center; font-size:15px; box-shadow: gray 5px 5px 5px;}footer { /* 設計footer註腳區CSS */ background-color:lightgray; color:#000; text-align:center; font-size:18px; padding:15px;}img { max-width: 100%; height: auto;}#img { max-width: 50%; height: 200 px;}p#mcy {color:#fff; font-size: 20px;}p#mcb {color:brown; font-weight: bold;}p#mcr {color:red;}/* </style> */
上機操作：請練習 Web Server 按裝與環境設定、MS Expression Web 4 按裝與規劃網頁區塊。
Report abuse