前,我寫過一個“WordPress的靜態化方法”,使用的是一個名為cos-html-cache的插件實現。
這個插件非常簡潔小巧,直接在原網站上生成首頁和文章頁的html文件,不過,這個插件只支持文章靜態化,不支持頁面、標簽和分類的靜態化,之后也再沒有過更新。
后來,我想到過利用WordPress插件導出全靜態化網站的方法,用這個方法,對于少量文章挺方便,但文章數量一旦多了,就經常出錯。
后來,我看到有人在cos-html-cache插件的基礎上又開發了一個插件,名叫Super Static Cache,我用了一下,發現其BUG較多,但Rewrite模式是可以正常使用的,在這個模式下,可以將首頁、文章頁、單頁、分類頁、Tag頁都生成靜態化文件,并保存在一個名為super-static-cache的目錄下,直接復制這個目錄即可得到一個靜態化網站。
因此,一個更簡單的生成靜態化網站的方法來了,先在網站安裝Super Static Cache,之后運行一個抓取網站的工具,這類工具很多,例如wget、sitemaps生成器之類的,把整個網站抓一遍(wget還能多生成一份),即可在super-static-cache的目錄獲取到網站的靜態化Html文件。
wget在Windows、Linux、Mac都有,用wget下載網站的命令是:
wget -m 網站地址
情介紹
文章目錄
二、網站描述
網站介紹
四、網站演示
TML結構代碼
如何讓學習不再盲目
七、更多干貨
題目
HTML靜態網頁設計作業使用dreamweaver制作,采用DIV+CSS布局,共有多個頁面,首頁使用CSS排版比較豐富,色彩鮮明有活力。頂部導航及底部區域背景色為100%寬度,主體內容區域寬度
一套優質的網頁設計應該包含 (具體可根據個人要求而定)
頁面分為頁頭、菜單導航欄(最好可下拉)、中間內容板塊、頁腳四大部分。
所有頁面相互超鏈接,可到三級頁面,有5-10個頁面組成。
頁面樣式風格統一布局顯示正常,不錯亂,使用Div+Css技術。
菜單美觀、醒目,二級菜單可正常彈出與跳轉。
要有JS特效,如定時切換和手動切換圖片輪播。
頁面中有多媒體元素,如gif、視頻、音樂,表單技術的使用。
頁面清爽、美觀、大方,不雷同。。
不僅要能夠把用戶要求的內容呈現出來,還要滿足布局良好、界面美觀、配色優雅、表現形式多樣等要求。
<h
網站布局方面:計劃采用目前主流的、能兼容各大主流瀏覽器、顯示效果穩定的浮動網頁布局結構。
網站程序方面:計劃采用最新的網頁編程語言HTML5+CSS3+JS程序語言完成網站的功能設計。并確保網站代碼兼容目前市面上所有的主流瀏覽器,已達到打開后就能即時看到網站的效果。
網站素材方面:計劃收集各大平臺好看的圖片素材,并精挑細選適合網頁風格的圖片,然后使用PS做出適合網頁尺寸的圖片。
網站文件方面:網站系統文件種類包含:網頁結構文件、css網頁樣式文件、js網頁特效文件、images網頁圖片文件;
網頁編輯方面:網頁作品代碼簡單,可使用任意HTML編輯軟件(如:Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟件進行運行及修改編輯等操作)。
其中:
(1)html文件包含:其中index.html是首頁、其他html為二級頁面;
(2) css文件包含:css全部頁面樣式,文字滾動, 圖片放大等;
(3) js文件包含:js實現動態輪播特效, 表單提交, 點擊事件等等(個別網頁中運用到js代碼)。
<h
<h
HTML結構代碼
<!--
* @Author: your name
* @Date: 2022-02-16 22:58:33
* @LastEditTime: 2022-02-16 22:58:54
* @LastEditors: your name
* @Description: 打開koroFileHeader查看配置 進行設置:
* @FilePath: 北京黎紅學院 網頁成品4頁面\index.html
CSS樣式代碼
@charset "utf-8";body{ background:#fff;}.head{ width:100%; height:200px; margin:auto; background: url(../images/head_bj.png) top repeat-x #5d644a;}.head_in{ width:930px; height:200px; margin:auto; background: url(../images/head.png) top repeat-x #5d644a;}.head h1{ font-size:56px; line-height:158px; color:#900; text-align:center;}.nav{width:930px; height:40px; border:1px solid #646a52; margin:auto; background:#4c4d3d; }.nav ul{margin:auto;}.nav li{ height:30PX; float:left; padding:5px 20px;}.nav li a{ font-size:24px; color:#ccc; line-height:30px;}.nav li a:hover{ color:#362f2d;}.nav li:hover{ background:#fff}.nav li:hover a{ color:#362f2d;}.center{ text-align:center}.main{ width:100%; height:auto; min-height:500px; margin:auto;}.main_nav{width:940px; height:auto; margin:10px auto;}.main_nav li{ float:left; margin:10px; }.main_con{ width:100%; height:auto; min-height:300px; margin:auto;padding-top:20px; background:#006699;}.main_ad{ width:920px; height:260px; margin:auto; }.main_news{width:900px; height:auto; margin:auto; margin-top:10px; padding-bottom:20px;}.main_news h2{ font-size:26px; line-height:38px; color:#fff;}.main_news p{ font-size:14px; line-height:22px; color:#fff;}.main_news ul{padding-left:20px; }.main_news li{ padding-left:20px;}.main_news li a{ font-size:18px; line-height:32px; color:#fff; }.main_news li a:hover{ font-size:18px; line-height:32px; color:#ffd9b4; }.main_des{width:900px; height:auto; margin:auto; padding-bottom:50px; }.main_des h1{ font-size:28px; line-height:68px; color:#362f2d; text-align:center;}.main_des p{ font-size:16px; line-height:28px; color:#333; text-indent:2em;}.main_zhanshi{width:920px; height:auto; margin:auto;}.main_zhanshi li{ float:left; margin:10px;}.main_zhanshi img{ width:280px; height:200px;}.foot{ width:100%; height:90px; background:#600; margin:auto;text-align:center;}.foot_in{ width:960px; height:90px; padding-top:15px;margin:auto;text-align:center;}.foot_in p{ font-size:16px; line-height:26px; color:#fff; }*{ margin:0; padding:0; font-family:黑體; }.clear{ clear:both;}.fl{ float:left;}.fr{ float:right;}img{ border:none;}a{ text-decoration:none;}a:hover{ text-decoration:none;}li{ list-style-type:none;}.p10{ padding:10px;}.main .main_con .main_news h2 a {color: #FFF;}1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374<h
第一、帶著目標去學習,無論看書報課還是各種線下活動。
首先要明確自己的學習目標是什么,是想解決什么問題,實現怎樣的目標。
第二、學習要建立個人知識體系
知識是學不完的,書籍是浩如煙海的。我們盡情徜徉其中的時候,千萬不要被海水淹死,沒有自我了。在學習過程中,我們會發現每一個知識點都是有她的邊界和背景的,我們要善于歸納整理知識
第三、學到了就要用到
有時,我們一天下來感覺學到了很多干貨,那么我們一定要將這些知識點和實際工作和生活聯系起來。知識和實踐相互聯系靠攏。愛學習是一件好事,但只有會學習的人,才有價值。