如何設計一個簡單的網站首頁
- 2019 年 11 月 27 日
- 筆記
歡迎點擊「演算法與編程之美」↑關注我們！
本文首發於微信公眾號："演算法與編程之美"，歡迎關注，及時了解更多此系列文章。
問題描述
網站首頁是一個網站的入口網頁。對於一個網站的了解往往是通過他的首頁。首頁的主要作用就是引導互聯網用戶瀏覽網站其他部分的內容。網站首頁上展現的這部分內容一般被認為是一個目錄性質的內容。首頁的作用是一個網站內容的匯總和索引，在首頁上有很多圖標和鏈接，欄目也比較多，就像以一個住宅的大門一樣，由此通往各個模組，首頁是網站必需的，不可或缺的。
解決方案
設計網頁的時候我們需要考慮很多因素。首先我們需要知道網頁上應該包含哪些內容。對於大部分網頁上必須有的就是導航欄。當然關於本網站的相關資訊即文字和圖片這也當然必須有。此外我們還可以根據情況及網頁設計需求考慮對於本網頁的設計我們是否需要分欄。
網頁設計框架有很多種，具體使用哪種就要結合網站需要，進行選擇了。（現在的網頁差不多都採用分列布局，常見的有單列布局、雙列布局、三列布局和混合布局，超過三列的布局很少見。）本次網頁的布局如下圖所示：
圖2.1網頁布局
在這之後，我們還要考慮網頁的主色調等等問題。之後，我們就可以用簡單的程式碼將網頁包含的相關資訊顯示出來。但此時因為沒有設置css樣式，所以此時網頁顯示出來的效果，我們可以看到並不好看。程式碼如下
div id="top_bg"> <div id="container"> <div id="header"> <div id="header_logo">光影世界環保社區<span>[保護環境，從我做起]</span></div> <div id="header_bottom"> <div id="menu"> <ul> <li><a href="#">團隊簡歷</a></li> <li><a href="#">環境監測</a></li> <li><a href="#">環境報告</a></li> <li><a href="#">環境常識</a></li> <li><a href="#">交流合作</a></li> </ul> </div> </div> </div> <div id="content"> <div id="content_left"> <div id="section"> <div id="section_1_top">用戶登錄</div> <div id="section_1_mid"> <div id="myform"> <from action="" method="post"> <div class="frm_cont username">用戶名： <label for="username"></label> <input type="text" name="username" id="username" /> </div> <div class="frm_cont password">密 碼： <label for="password"></label> <input type="password" name="password" id="password" /> </div> </br> <div text-align:center> <input type="submit" name="button1" id="button1" value="登錄" /> <input type="button" name="button2" id="button2" value="註冊" /> </div> </from> </div> </div> <div id="section_1_bottom"></div> </div> <div id="section2"> <div id="section_2_top">新聞頻道</div> <div id="section_2_mid"> <ul> <li><a href="#" target="_blank">美洲鱷的保護環境日益改善</a></li> <li><a href="#" target="_parent">光影世界頒發環境天使大使</a></li> <li><a href="#" target="_blank">四屆環保組織到中國四川考察</a></li> <li><a href="#" target="_blank">低碳生活離我們的生活遠嗎？</a></li> </ul> </div> <div id="section_2_bottom"> </div> </div> </div> <div id="content_right"> <div> <h1>挑戰與職責</h1> <p>那麼的市場上了馬車哦啊女款可惜那時快</p> <p>那麼的市場上了馬車哦啊女款可惜那時快......(此處省略文字)</p> <p>那麼的市場上了馬車哦啊女款可惜那時快......(此處省略文字)</p> </div> <div> <h1>動物世界</h1> <a href="#"><img src="img/thumb_1.jpg" width="108" height="108" /></a> <a href="#"><img src="img/thumb_2.jpg" width="108" height="108" /></a> <a href="#"><img src="img/thumb_3.jpg" width="108" height="108" /></a> <a href="#"><img src="img/thumb_4.jpg" width="108" height="108" /></a> </div> </div></div></div></div> </div> <div id="footer">Copyright©2017 光影世界環保社區 ALL Right Reserved</div> </div>
|
|
|---|
圖2.2初步顯示效果
要讓網頁變得好看，我們就需要設置css樣式。（本次我們使用外聯樣式。）設置樣式就包括字體樣式，顏色，圖片大小，邊框等等。（常見的盒子模型當然不能忽略。）
*{ body{ background: #232524; margin: 0; padding: 0; font-family: "宋體",arial,helvetica,sans-serif; font-size: 12PX; line-height: 1.5em; width: 100%; } a:link,a:visited{ color: #069; text-decoration: underline; } a:active,a:hover{ color: #990000; text-decoration: none; } #top_bg{ width: 100%; background: #7bdaae url(../img/top_bg.jpg)repeat-x; height: 830px; } #container{ width: 900px; margin: 0 auto; } #header{ width: 100%; height: 280px; } #header_logo{ float: left; display: inline; width: 500px; height: 20px; font-family: tahoma,geneva,sans-serif; font-size: 20px; font-weight: bold; color: #678275; margin: 28px 0 0 15px; padding: 0; } #header_logo span{ margin-left: 10px; font-size: 11pz; font-weight: normal; color: #000; } #header_bottom{ float: left; width: 873px; height: 216px; background: url(../img/header_bottom_bg.png)no-repeat; margin: 15px 0 015px; } #menu{ float: left; width: 465px; height: 29px; margin: 170px 0 0 23px; display: inline; padding: 0; } #menu ul{ list-style: none; display: inline; } #menu ul li{ float: left; padding-left: 20px; padding-top: 5px; } #menu ul li a{ font-family: "黑體"; font-size: 16px; color: #393; text-decoration: none; } #menu ul li a:hover{ color: #fff; background: #396; } #content{ overflow: auto; margin: 15px; padding: 0; } #content_left{ float: left; width: 250px; margin: 0 0 0 10px; padding: 0; } #section{ margin: 0 0 15px 0; padding: 0; } #section_1_top{ width: 176px; height: 36px; font-family: "黑體"; font-weight:bold ; font-size: 14px; color: #276b45; background: url(../img/section_1_top_bg.jpg)no-repeat; margin: 0px; padding: 15px 0 0 70px; } #section_1_mid{ width: 217px; background: url(../img/section_1_mid_bg.jpg)repeat-y; margin: 0; padding: 5px 15px; } #section_1_mid.myform{ margin: 0; padding: 0; } .myform.frm_cont{ margin-bottom:8px ; } .myform.username input,.myform.password input{ width: 120px; height: 18px; padding: 2px 0px 2px 15px; border: solid 1px #aacfe4; } .btns{ text-align: center; } #section_1_bottom{ width: 246px; height: 17px; background: url(../img/section_1_bottom_bg.jpg)no-repeat; } #section2{ margin: 0 0 15px 0; padding: 0; } #section_2_top{ width: 176px; height: 42px; font-family: "黑體"; font-weight: bold; font-size: 14px; color: #276b45; background: url(../img/section_2_top_bg.jpg)no-repeat; margin: 0; padding: 15px 0 0 70px; } #section_2_mid{ width: 246px; background: url(../img/section_2_mid_bg.jpg)repeat-y; margin: 0; padding: 5px 0; } #section_2_mid ul{ list-style: none; margin: 0 20px; padding: 0; } #section_2_mid li{ border-bottom: 1px dotted #fff; margin: 0; padding: 5px; } #section_2_mid li a{ color: #fff; text-decoration: none; } #section_2_mid li a:hover{ color: #363; text-decoration: none; } #section_2_bottom{ width: 246px; height: 18px; background: url(../img/section_2_bottom_bg.jpg)no-repeat; } #content_right{ float: right; width: 580px; padding: 10px; } .post{ padding: 5px; } .post h1{ font-family: tahoma; font-size: 18px; color: #588970; margin: 0 0 15px 0; padding: 0; } .post p{ font-family: arial; font-size: 12px; color: #46574d; text-align: justify; margin: 0 0 15px 0; padding: 0; } .post img{ margin: 0 0 0 25px; padding: 0; border: 1px solid #333; } #footer{ font-size: 12px; color: #7bdaae; text-align: center; }
|
|
|---|
最終的效果圖如下：
圖2.2效果圖
結語
這裡需要注意的就是雖然你可以在你的HTML中使用特殊的字體，但是你不可能預測訪問者在他們的電腦上將看到什麼。在你的電腦里看起來相當好的頁面，在另一個不同的平台上看起來可能非常糟糕。一些網站設計員喜歡使用來定義特性，這雖然允許你使用特殊的字體，但是仍需要一些變通的方法，以免你所選擇的字體在訪問者的電腦上不能顯示。所以在設計網頁時一定要考慮瀏覽器的兼容性問題。
END
實習編輯 | 王楠嵐
責 編 | 劉 連
where2go 團隊
微訊號：演算法與編程之美
