Category: 網頁設計範例

網頁的組成 HTML網頁的具體內容和結構 CSS網頁的樣式（美化網頁最重要的一塊） JavaScript網頁的交互效果，比如對用戶鼠標事件作出響應什麼是HTML HTML的全稱是HyperTextMarkupLanguage，超文本標記語言其實它就是文本，由瀏覽器負責將它解析成具體的網頁內容跟XML類似，HTML由N個標籤（節點、元素、標記）組成 HTML語法非常鬆散常見的HTML標籤標題：h1,h2,h3,h4,h5… 段落：p 換行：br 容器：div,span（用來容納其他標籤）表格：table,tr,td 列表：ul,ol,li 圖片：img 表單：input 鏈接：a 推薦開發工具VSCODE、dreamweawer、flash、fireworks；WebStorm. HTML運行效果什麼是CSS CSS的全稱是Cascading Style Sheets,層疊樣式表它用來控制HTML標籤的樣式，在美化網頁中起到非常重要的作用 CSS的編寫格式是鍵值對形式的，比如color : redbackground-color : bluefont-size : 20px冒號左邊的是屬性名，冒號右邊的是屬性值 CSS三種書寫方式行內樣式：（內聯樣式）直接在標籤的style屬性中書寫內頁樣式：在本網頁的style標籤中書寫外部樣式：在單獨的CSS文件中書寫，然後在網頁中用link標籤引用test.css CSS選擇器選擇器的作用選擇對應的標籤，為之添加樣式標籤選擇器根據標籤名找到標籤類選擇器標籤可以有多個類id選擇器 id是唯一的，不能一樣選擇器組合中間不留空格，粘在一起後代選擇器中間一個空格，不管嵌套多少層相鄰兄弟選擇器屬性選擇器偽類屬性描述 :active 向被啟動的元素添加樣式 :focus 向擁有鍵盤輸入焦點的元素添加樣式 :hover 當滑鼠懸浮在元素上方時，向元素添加樣式 :link 向未被訪問的鏈接添加樣式 :visited 向已被訪問的鏈接添加樣式 […]

網頁設計範例

php與html的關係說明（含示例代碼及圖示）

php是一種後端程式語言，html內容寫好就不會變化，所以才需要PHP這種腳本證言，生成動態內容（亦稱動態頁面）。動態頁面里的PHP代碼是要經過服務器解釋執行，然後將HTML傳給瀏覽器。服務器執行php的文件一般為php後綴，例如about.php PHP最終是要生成HTML給瀏覽器，瀏覽器才能顯示頁面，所以用其他腳本程式語言也可以寫後端，例如C, asp.net, java等。下圖清楚顯示PHP在服務器執行後輸出到瀏覽器html的過程：找到 index.php 解釋執行indexphp 代碼，生成HTML內容將HTML內容返回瀏覽器 1.完全用php輸出html標籤的方法示例如下： 2.利用HTML混合php減少代碼量（文件後綴需為php）示例代碼如下：以上就是php與html的關係說明，希望能夠讓入門的朋友少走彎路！

PHP ZipArchive壓縮資料夾教學（源碼講解）

用php壓縮資料夾是日常工作的一部分，下面以真實源碼講解 php運行環境要已經安裝zip擴展哦以上就是PHP ZipArchive壓縮資料夾教學，如有不清楚的請留言。

免費開發模板Bootstrap介紹

2021年9月1日

Bootstrap 是一個提供快速開發 Web應用程式和網站的前端框架，它已經為不同設備做了很多適配的工作，您只要按它的要求編寫html與css就可以自動適應不同設計，就是我們常常說的responsive webdesign或者自適應網頁設計。在現代 Web 開發中，有一些所有的 Web 項目中都需要的功能，或者稱為組件/模塊。Bootstrap 為您提供了所有這些基本的組件 – 網格（Grid）、排版（Typography）、（表格）Tables、（表單）Forms、（按鈕）Buttons 和（自適應）Responsiveness。此外，還有大量其他能夠復用的前端組件，比如（下拉框）Dropdowns、（導航欄）Navigation、（模態彈出框）Modals、（字模）Typehead、（分頁）Pagination、（輪播圖片）Carousal、（麵包屑）Breadcrumb、（標籤塊）Tab、（縮略圖）Thumbnails、（大標題）Headers 等等。有了這些，你可以搭建一個 Web 項目，並讓它運行地更快速更輕鬆。此外，由於整個框架是基於模塊的，您可以通過您自己的 CSS 位，甚至是項目開始後的一個大整改，來進行自定義。上述說明太官方，一般人不好理解，我來簡化一下：Bootstrap是一個做網頁設計的框架（目前最流行的WEB前端框架之一），就是說你只需要寫HTML標籤調用它的類（class）你就可以很快速的做一個精美實用的網頁，你不用擔心不同設備的兼容問題，提供了很多樣式供你選擇！比如你需要做一個網站的文本顯示，你自己寫的話你需要寫很多代碼，但是如果你使用bootstrap框架來寫的話，只需要寫好HTML標籤然後調用類名就可以了！代碼展示如下：作用：用它提供的樣式和組件快速寫網站你只需要引用一些定義好的類，也就是class名字，就可以創建出已經有非常漂亮的樣式的網頁，而且支持自適應，是一個很不錯的框架。簡而言之：你只需要瞭解相關的class、標籤名稱等所代表的意思，然後在構建頁面的時候，導入bootstrap的JS、css等，它就會去表現相應的效果出來。

mailto 語法和常見用法

2021年8月26日

mailto 眾所周知是html中發送電子郵件的代碼，基本寫法： mailto語法表格：功能關鍵詞功能詳解用法舉例郵箱地址 mailto: 瀏覽器會調用默認客戶端電子郵箱程式，例如outlook, Mailbird Thunderbird等，並在收件人自動填入收件人地址 <a href=”mailto: cs@web4theme.com”>聯繫我</a> 抄送地址 cc= 在收件人地址後面用cc=地址，可填寫抄送地址 <a href=”mailto: cs@web4theme.com?cc=alex@web4theme.com”>聯繫我</a> 密件抄送地址 bcc= 在收件人地址後面用bcc=地址，可填寫抄送地址 <a href=”mailto: cs@web4theme.com?bcc=alex@web4theme.com”>聯繫我</a> 多個收件人、抄送、密件抄送人 ; 用分號隔開多個收件人的地址，可實現發送給多個收件人效果 <a href=”mailto: cs@web4theme.com;alex@web4theme.com”>聯繫我</a> 郵件主題 subject= 用subject=預置郵件主題 <a href=”mailto: cs@web4theme.com?subject=今天天氣好不好？”>聯繫我</a> 郵件內容 body 用body=預置郵件內容 <a href=”mailto: cs@web4theme.com?body=歡迎一起學習網頁設計”>聯繫我</a> mailto完整語法及用途注意：如果mailto後面要有多個參數的話，第一個參數必須以「?」開頭，後面的參數每一個都以”&”分隔。明白它的語法就可以寫出不一樣的代碼，實現相同的功能，例如：

HTML網頁設計範例-左圖右字

2021年8月22日

在做頁面開發的時候，有很多的排版方式，如果用代碼將其一一實現，那就需要點耐心了，今天我們使用代碼來做個圖文排版的頁面，左側是圖片區，右側是文字解釋區。這是很常見的排版，最終效果圖如下：首先先準備圖片素材和文字語言，在body中的手工輸入基本的HTML結構，如下： HTML文件名為 index.html ，相片是從網上找的免費相片，放在index.html 所在的文件夾即可。現時預覽是這樣的：開始添加CSS樣式修飾，指定圖片與文字位置。最外面的大框添加寬度居中；下面的圖片和文字設置現在的圖文是這樣排版，如圖想要將圖文左右排版，主要是定位或者浮動，對圖片塊和文字塊都添加了浮動效果後，如圖，添加浮動後，文字部分因為文字太長超出了他所用那的範圍，所以被擠到到了下行的右側，加個overflow: hidden就正常同時將文字區域設置下寬度，不讓他超過最大範圍就行了，示例設置為width: 430px 然後再預覽效果圖，加些padding調整一下左右空間，感覺就好看多了。完整代碼如下：彩蛋我感覺看到這裏的都已經很認真學習，所以我在這個html範例上再加多了文字圍繞文字的例子，如果有心學習，可以在這裏看頁面代碼（右鍵選擇查看源碼可看到頁面源碼，在相片右鍵點擊可選擇下載到本地，將頁面源碼與相片放在相同位置，就可以用chrome直接預覽），效果如下：