互聯(lián)網(wǎng)時代的今天,各種各樣的網(wǎng)頁充斥著我們的生活。只要使用瀏覽器,打開的每一個頁面都可以稱之為網(wǎng)頁。即使使用頭條這樣的APP,其內(nèi)容布局、展示的方法也脫胎于網(wǎng)頁頁面設(shè)計的方法與原則。可以說頁面的概念已經(jīng)遍布我們的信息化世界。
作為蕓蕓眾生中的一員,學(xué)習(xí)網(wǎng)頁制作對我們的事業(yè)、生活有怎樣的幫助呢?
第一,學(xué)習(xí)網(wǎng)頁制作有助于理解網(wǎng)絡(luò)信息的傳播運行機(jī)制,即使通過本課程不能全面了解這些核心機(jī)制,也能為大家鋪墊下繼續(xù)深入學(xué)習(xí)的知識基礎(chǔ)。即使自己不必親自制作網(wǎng)頁,在使用第三方工具時,比如微信公眾號、微信小程序或者其他自動網(wǎng)頁或網(wǎng)站生成工具時也會比沒有基礎(chǔ)的人更快的掌握這些工具。
第二,學(xué)好網(wǎng)頁制作是制作網(wǎng)站的基礎(chǔ),如果您因為事業(yè)需要或者個人愛好打算制作自己的網(wǎng)站或博客,無論是打算使用php還是Java還是Python去構(gòu)建您的網(wǎng)站,精通網(wǎng)頁制作技術(shù)是您的第一塊技術(shù)基石。
第三,如果您打算學(xué)習(xí)網(wǎng)絡(luò)爬蟲來分析一些網(wǎng)絡(luò)數(shù)據(jù),了解網(wǎng)頁頁面構(gòu)成也是必要基礎(chǔ),至少您要知道一個網(wǎng)頁頁面中每個標(biāo)簽中對應(yīng)的是哪些信息,才能有的放矢拿到自己想要的信息。
第四,如果您想學(xué)習(xí)編程,但是缺少相應(yīng)的基礎(chǔ)知識,看不懂復(fù)雜的C語言教學(xué),那么從網(wǎng)頁制作入手嘗試?yán)斫饩幊痰恼Z法也是一個很不錯的選擇。
除此之外,瀏覽器可以做的事情越來越多,比如webgl的出現(xiàn),可以讓我們通過瀏覽器構(gòu)建3d世界,無論是虛擬現(xiàn)實(VR)還是增強現(xiàn)實(AR)都有很多開源免費的解決方案。TensorFlow的JavaScript版本的出現(xiàn),讓我們可以通過結(jié)合瀏覽器學(xué)習(xí)使用人工智能技術(shù),且非常容易實現(xiàn)。
所以,新的一年里,我打算做網(wǎng)頁制作的學(xué)習(xí)教程,讓更多沒有基礎(chǔ)卻對網(wǎng)絡(luò)技術(shù)感興趣的小伙伴能加入進(jìn)來。
簡單來說學(xué)習(xí)網(wǎng)頁制作需要掌握三門技術(shù)。
第一,也是最基礎(chǔ)最核心的內(nèi)容是HTML超文本標(biāo)記語言。大家不必糾結(jié)HTML到底是什么,但是一定要記住它能干什么。HTML通俗來說可以比喻成容器。大家試想,網(wǎng)頁里都有哪些內(nèi)容呢?
一般網(wǎng)頁中都會有文字、圖片、聲音、視頻、表格等內(nèi)容,這些內(nèi)容就是靠HTML中的標(biāo)簽添加進(jìn)頁面的。
所以說HTML這個工具就是個容器,我們使用HTML標(biāo)簽語言為網(wǎng)頁添加所有需要的信息內(nèi)容。
第二,CSS層疊樣式表,這是一個用來裝飾頁面的工具。如果說HTML是個信息容器,那么如何讓這些信息條理清晰的顯示出來呢?那就需要CSS來幫忙了。如下圖所示,這是一個最簡單的頁面,只用到了HTML,里面裝了一個標(biāo)題和一個只有六個字的段落。
為了讓這個頁面看起來美觀些,我們?yōu)槠涮砑觕ss樣式表。添加后如圖所示:
我們可以看出來,CSS讓標(biāo)題文字換了顏色,也居中顯示了,背景也變成了藍(lán)色。
第三,JavaScript,這個工具相比HTML和CSS來講是最難學(xué)習(xí)的,學(xué)習(xí)JavaScript就是在學(xué)習(xí)編程了。它雖然只是個腳本語言,但是用到的知識和其他編程語言相差不大。
那JavaScript能干什么呢?
首先,它能為頁面中添加很多交互效果。舉個例子,我們常見的圖片翻頁、輪播很多就是基于JavaScript腳本實現(xiàn)的。
其次,JavaScript可以為傳統(tǒng)頁面擴(kuò)展出很多新功能,例如結(jié)合three.js我們可以很容易的在頁面中構(gòu)建三維空間,或者實現(xiàn)一些3d游戲或其他三維動態(tài)演示效果。舉個例子(https://renaultespace.littleworkshop.fr/),打開可能略慢。3d展示的汽車廣告是不是很酷!
再次,JavaScript可以以網(wǎng)頁為基礎(chǔ),實現(xiàn)各種各樣的在線小游戲,例如Phaser.js就是目前非常火的一個開源免費網(wǎng)頁游戲制作庫。phaser官網(wǎng):http://phaser.io/
JavaScript為網(wǎng)頁的功能拓展提供了很多可能性,無論是3d顯示還是游戲制作還是未來的人工智能工具,都是由JavaScript都為大家提供了將功能引入到頁面的接口,這也是學(xué)習(xí)難度比較大的原因。不過只要堅持下去一定能學(xué)通的!
網(wǎng)頁是指我們看到的單個頁面。這些頁面分為靜態(tài)頁面和動態(tài)頁面兩種。靜態(tài)頁面指的是不能與服務(wù)器進(jìn)行數(shù)據(jù)交互的頁面,顧名思義動態(tài)頁面指的是可以與服務(wù)器進(jìn)行數(shù)據(jù)交互的頁面,這一點大家不必糾結(jié)。
簡單來說,靜態(tài)頁面寫好后什么樣就是什么樣,誰打開都是事先編輯好的內(nèi)容,而動態(tài)頁面寫好后會隨著不同的訪問變換不同數(shù)據(jù),動態(tài)頁面更像是一個頁面模板,隨時套用不同信息。
大部分網(wǎng)站中的頁面都是動態(tài)頁面。
如果使用靜態(tài)頁面做網(wǎng)站會出現(xiàn)什么問題呢?如果您有300篇博客文章,那您就要做300個靜態(tài)頁面來顯示,大型資訊網(wǎng)站信息量更加龐大,如果都用靜態(tài)頁面來做,占用的服務(wù)器空間也是龐大到不可想象。
網(wǎng)站中的動態(tài)頁面就解決了這個問題,例如一個簡單的網(wǎng)站我們只需一個主頁、文章頁、搜索頁基本上就可以了,這些頁面中沒有具體內(nèi)容,我們稱之為模板。當(dāng)您打開后,顯示的內(nèi)容都是在數(shù)據(jù)庫中調(diào)出的。這樣,一個數(shù)據(jù)庫用來存儲壓縮過的精簡信息,這些信息通過不同頁面模板顯示在用戶面前就成為網(wǎng)站的基本運行模式。
例如在靜態(tài)頁面中顯示文字字?jǐn)?shù)的代碼是這樣
<p>300字</p>
如果使用以php編寫的WordPress網(wǎng)站框架來動態(tài)顯示文章字?jǐn)?shù)就是這樣
<p><?php echo zm_count_words($text); ?></p>
<?php echo zm_count_words($text); ?>這條語句可以調(diào)取數(shù)據(jù)庫中文章字?jǐn)?shù)的記錄并顯示出來。這也我們通過這一條語句就可以顯示不同文章的字?jǐn)?shù)了。
無論是靜態(tài)頁面還是動態(tài)頁面,他們的核心內(nèi)容都是一樣的,HTML,CSS,JavaScript都是必修知識。只是靜態(tài)頁面在HTML中插入信息,而動態(tài)頁面插入的是調(diào)取數(shù)據(jù)庫信息的語句。
因此,我們這個教程看起來是在做靜態(tài)頁面,但是我們學(xué)習(xí)的也是制作網(wǎng)站的基礎(chǔ)知識。
第一,可以寫出靜態(tài)頁面。
第二,有能力讀懂他人寫好的頁面代碼。
第三,為繼續(xù)深入學(xué)習(xí)網(wǎng)站制作或更為炫酷的頁面制作打下基礎(chǔ)。
第四,掌握編程基礎(chǔ),至少是基于JavaScript的。
我是大魚,致力于數(shù)字藝術(shù)技術(shù)分享!歡迎大家關(guān)注!祝愿大家2020年學(xué)有所成!
HTML是什么?——零基礎(chǔ)自學(xué)網(wǎng)頁制作
第一個HTML頁面如何寫?——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML頁面中head標(biāo)簽有啥用?——零基礎(chǔ)自學(xué)網(wǎng)頁制作
初識meta標(biāo)簽與SEO——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML中的元素使用方法1——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML中的元素使用方法2——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML元素中的屬性1——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML元素中的屬性2(路徑詳解)——零基礎(chǔ)自學(xué)網(wǎng)頁制作
使用HTML添加表格1(基本元素)——零基礎(chǔ)自學(xué)網(wǎng)頁制作
使用HTML添加表格2(表格頭部與腳部)——零基礎(chǔ)自學(xué)網(wǎng)頁制作
使用HTML添加表格3(間距與顏色)——零基礎(chǔ)自學(xué)網(wǎng)頁制作
使用HTML添加表格4(行顏色與表格嵌套)——零基礎(chǔ)自學(xué)網(wǎng)頁制作
16進(jìn)制顏色表示與RGB色彩模型——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML中的塊級元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作
初識HTML中的<div>塊元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作
在HTML頁面中嵌入其他頁面的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作
封閉在家學(xué)網(wǎng)頁制作!為頁面嵌入PDF文件——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單元素初識1——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單元素初識2——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單3(下拉列表、多行文字輸入)——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單4(form的action、method屬性)——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML列表制作講解——零基礎(chǔ)自學(xué)網(wǎng)頁制作
為HTML頁面添加視頻、音頻的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作
音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML中使用<a>標(biāo)簽實現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學(xué)網(wǎng)頁制作
shenlan-ui (UI根目錄)
|--src (核心樣式代碼)
| |--shenlan-ui.css (UI的主樣式文件)
| |--common.css (公共樣式文件)
| |--reset.css (CSS-Reset文件)
| |--layout.css (組件文件:圖標(biāo)樣式)
| |--... (其他組件文件)
|
|--demo (演示文件目錄)
|--layout.html (布局樣式文件)
|--... (其他組件的樣式文件)
rc/reset.css
/*
* @Author: xutao
* @Date: 2019-04-12 10:06:29
* @Last Modified by: xutao
* @Last Modified time: 2019-04-29 16:37:40
*/
/* 去掉所有元素的內(nèi)外邊距 */
html, body, div, span,
h1, h2, h3, h4, h5, h6, p, pre,
a, img, ul, li, form, label, input,
table, tbody, tfoot, thead, tr, th, td,
audio, video {
margin: 0;
padding: 0;
}
/* 統(tǒng)一全局字體 */
body {
font-family: -apple-system-font,BlinkMacSystemFont,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei UI","Microsoft YaHei",Arial,sans-serif
}
/* 列表元素去掉默認(rèn)的列表樣式 */
ol, ul {
list-style: none;
}
/* Table元素的邊框折疊 */
table {
border-collapse: collapse;
border-spacing: 0;
}
/* 去掉默認(rèn)的下劃線 */
a{
text-decoration: none;
}
/* 去掉input自帶的邊緣效果和背景顏色 */
input{
outline: none;
background: none;
}
/src/common.css
1 區(qū)分屏幕寬度的方式
/* 屏幕寬度小于340px時的樣式 */
@media (max-width: 340px){ /* 樣式1 */ }
/* 屏幕寬度在340px至410px時的樣式 */
@media (min-width: 340px) and (max-width: 410px){ /* 樣式2 */ }
/* 屏幕寬度大于410px時的樣式 */
@media (min-width: 410px){ /* 樣式3 */ }
精簡樣式:
/* 屏幕寬度在340px至410px時的樣式 */
/* 樣式2 */
/* 屏幕寬度小于340px時的樣式 */
@media (max-width: 340px){ /* 樣式1 */ }
/* 屏幕寬度大于410px時的樣式 */
@media (min-width: 410px){ /* 樣式3 */ }
這樣屏幕適配的框架就完成了
2 元素尺寸的指定
/* 屏幕寬度在340px至410px時,基準(zhǔn)尺寸使用20px */
html{
font-size: 20px;
}
/* 屏幕寬度小于340px時,基準(zhǔn)尺寸使用18px */
@media (max-width: 340px){
html{
font-size: 18px;
}
}
/* 屏幕寬度大于410px時,基準(zhǔn)尺寸使用22px */
@media (min-width: 410px){
html{
font-size: 22px;
}
}
3 按比例劃分屏幕
最終common.css樣式
/*
* @Author: xutao
* @Date: 2019-06-20 22:16:01
* @Last Modified by: xutao
* @Last Modified time: 2019-06-20 23:03:17
*/
/* 屏幕寬度在340px至410px時,基準(zhǔn)尺寸使用20px */
html{
font-size: 20px;
}
/* 屏幕寬度小于340px時,基準(zhǔn)尺寸使用18px */
@media (max-width: 340px){
html{
font-size: 18px;
}
}
/* 屏幕寬度大于410px時,基準(zhǔn)尺寸使用22px */
@media (min-width: 410px){
html{
font-size: 22px;
}
}
src/shenlan-ui.css
目前, 我們只有/src/reset.css和/src/common.css這兩個文件, 所以集成的時候只需要把這兩個文件引入即可。
x0列表的類型
定義列表 dl
無序列表 ul
目錄列表 dir
菜單列表 menu
有序列表 ol
例子:<dt>名稱部分<dd>解釋說明,兩個都在<dl>里面
插入無序列表<ul>
例子:<ul>之間使用<li></li>標(biāo)記列表項值
插入目錄列表<dir>
效果跟<ul>那個是一樣的。
插入菜單列表<menu>:
插入有序列表<ol>
列表的主要操作就講到這里。是不是很簡單呢??
*請認(rèn)真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。