網(wǎng)站建設(shè)基礎(chǔ)教學(xué)_第1頁
網(wǎng)站建設(shè)基礎(chǔ)教學(xué)_第2頁
網(wǎng)站建設(shè)基礎(chǔ)教學(xué)_第3頁
網(wǎng)站建設(shè)基礎(chǔ)教學(xué)_第4頁
網(wǎng)站建設(shè)基礎(chǔ)教學(xué)_第5頁
已閱讀5頁，還剩32頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

HTMLCMSCSS大綱

HTML

HTML的概念HTML(HyperTextMarkupLanguage)是一種超文本標(biāo)記語言HTML使用標(biāo)記標(biāo)簽來描述網(wǎng)頁HTML基本語法及結(jié)構(gòu)新建一個html文件(新建文本文檔之后，把擴展名改為.html)HTML基本結(jié)構(gòu)<html></html>:標(biāo)簽對，<html>是開始標(biāo)簽，標(biāo)志著html文件的開始;</html>是結(jié)束標(biāo)簽，標(biāo)志著html文件的結(jié)束。Html文件包含兩部分：頭部和主體頭部：<head></head>:標(biāo)簽對，代表html文件的頭部，定義網(wǎng)頁的一些信息：網(wǎng)頁標(biāo)題、編碼、規(guī)則、關(guān)鍵詞等等<title></title>：標(biāo)簽對，用來設(shè)置網(wǎng)頁的標(biāo)題，一般寫在head標(biāo)簽中<meta/>:單標(biāo)簽，其中charset屬性用來設(shè)置網(wǎng)頁編碼，一般寫在head標(biāo)簽中Charset=’utf-8’//utf-8編碼格式的一種，是國際通用編碼主體：<body></body>：標(biāo)簽對，代表html文件的主體，盛放網(wǎng)頁內(nèi)容，可以包含文本、超鏈接、圖片等等寫好網(wǎng)頁(html文件)之后，用瀏覽器打開查看網(wǎng)頁效果范例：

HTML標(biāo)簽<p></p>//段落標(biāo)簽,用來劃分段落<br/>//換行標(biāo)簽，起到換行的作用<b></b>//粗體字標(biāo)簽，用來加粗<strong></strong>//表示強調(diào)，強調(diào)的效果是加粗b標(biāo)簽與strong標(biāo)簽的區(qū)別:兩者在瀏覽器中的效果沒有區(qū)別，區(qū)別在于strong里面的內(nèi)容在語義上對搜索引擎起到強調(diào)的作用。h1~h6//標(biāo)題字標(biāo)簽<img/>//圖像標(biāo)簽

src//指定引入圖片的地址/路徑width//設(shè)置圖片的寬度,單位是像素(px)height//設(shè)置圖片的高度,單位是像素(px)title//設(shè)置鼠標(biāo)懸浮圖片時的提示信息alt//設(shè)置鼠標(biāo)懸浮圖片時的替換文本(當(dāng)圖片無法加載或加載失敗時顯示)路徑指文件在計算中的存儲位置路徑是由一組文件夾名稱組成，中間用/分隔，表示文件夾之間的一種相互包含的關(guān)系路徑絕對路徑相對路徑絕對路徑帶有盤符的路徑帶有網(wǎng)址的路徑相對路徑（經(jīng)常用到）定義：不是一個完整的路徑，他們有一個共同的父級文件夾。分三種情況：1.文件同級情況：直接寫文件名稱。2.進(jìn)入下級目錄：使用./3.返回上級目錄：使用../

超鏈接標(biāo)簽<a></a>超鏈接標(biāo)簽Href//指定鏈接地址/路徑(文件或網(wǎng)址)網(wǎng)址路徑：<ahref=“/”>點我跳轉(zhuǎn)到百度</a>html文件路徑：<ahref=“new/newpage.html”>點我跳轉(zhuǎn)到newpage.html頁面</a>target=’_blank’//在新窗口打開頁面Dreamweaver工具Dreamweaver工具：專門用來寫前端(HTML/JS/Jquery)代碼的創(chuàng)建HTML頁面點擊文件-》新建文件HTML中的列表無序列表<ul></ul>//聲明一個無序列表<li></li>//代表列表中的每一項有序列表<ol></ol>//聲明一個有序列表<li></li>//代表列表中的每一項CSS概述：CSS(CascadingStyleSheets)指的是層疊樣式表CSS樣式是HTML屬性的擴展定義了HTML元素在網(wǎng)頁中如何顯示CSS具有自己獨立的語法格式CSS樣式表所解決的問題：實現(xiàn)標(biāo)簽與樣式的分離CSS語法：樣式名:樣式值;//color:#F00;CSS樣式：字體樣式color:#f00;//字體顏色樣式，#f00是顏色十六進(jìn)制值的形式，red是顏色英文單詞形式font-size:100px;//設(shè)置字體尺寸，單位是像素font-weight:900;數(shù)值從100~900，依次加粗font-weight:bold;//bold就是加粗font-style:italic;//設(shè)置字體風(fēng)格(傾斜)font-family:’微軟雅黑’;//設(shè)置字體系列font//設(shè)置字體的一系列屬性樣式值的順序：字體傾斜->字體粗細(xì)->字體大小->字體系列注意：字體大小和字體系列的順序不能變，并且這兩個值必不可少font:italicbold100px'微軟雅黑';//值與值之間用空格隔開font:100px'微軟雅黑';//若要使用font樣式，字體大小和字體系列必須設(shè)置CSS樣式表定義缺點優(yōu)點行內(nèi)樣式表寫在HTML標(biāo)簽style屬性里面的樣式?jīng)]有實現(xiàn)標(biāo)簽與樣式的分離，不能實現(xiàn)代碼的復(fù)用、共享/內(nèi)部樣式表寫在頭部<style></style>標(biāo)簽中的樣式不方便多個頁面之間的代碼維護(hù)，沒有徹底的實現(xiàn)標(biāo)簽與樣式的分離/外部樣式表type="text/css"http://規(guī)定鏈接文件的類型(css文本類型)rel="stylesheet"http://定義所鏈接的文件是一個外部css樣式表href="style.css"http://指定鏈接文件的地址/徹底的實現(xiàn)了標(biāo)簽與樣式的分離行內(nèi)元素與塊級元素

一個標(biāo)簽對構(gòu)成一個元素：<p></p><meta/>塊級元素：div,p,h1~h6<div></div>:div是division的縮寫，意思是區(qū)塊特點：獨占一行,可以設(shè)置寬高作用：主要起到分區(qū)的作用，可以把HTML頁面分成獨立、不同的部分(用div來進(jìn)行網(wǎng)頁布局)行內(nèi)元素：<span></span>，<a></a>特點：不會獨占一行，寬高靠內(nèi)容撐起(不能設(shè)置寬高，即使設(shè)置了也不起作用)塊級元素轉(zhuǎn)為行內(nèi)元素：display:inline;塊級元素轉(zhuǎn)為行內(nèi)元素之后，就具有了行內(nèi)元素的所有特點行內(nèi)元素轉(zhuǎn)為塊級元素:display:block;行內(nèi)元素轉(zhuǎn)為塊級元素之后，就有了塊級元素的所有特點隱藏元素/標(biāo)簽：display:none;CSS屬性寬度屬性：widthwidth:100px;//單位是像素(px)，不加單位沒效果高度屬性：heightheight:200px;//單位是像素(px)，不加單位沒效果邊框?qū)傩?borderborder:1pxsolidred;border:寬度風(fēng)格顏色;//三個值的順序是可以改變的，其中，邊框風(fēng)格必不可少,其他兩個可以省略邊框風(fēng)格：solid//實線dashed//虛線文本屬性

文本修飾text-decoration:none;//去下劃線text-decoration:underline;//加下劃線文本水平對齊方式：text-aligntext-align:right;//右對齊text-align:center;//居中對齊text-align:left;//左對齊行高：line-height（行與行之間的間距）實現(xiàn)文本垂直居中：設(shè)置單詞與單詞之間的間距：word-spacing設(shè)置字母與字母之間的間距：letter-spacing列表樣式：liset-stylelist-style:square;//將列表樣式設(shè)置為方塊list-style:circle;//空心圓list-style:disc;//實心圓(列表默認(rèn)的樣式)list-style:none;//去掉列表默認(rèn)的樣式背景屬性背景顏色：background-colorbackground-color:#fff;background-color:red;背景圖片：background-imagebackground-image:url(圖片地址);設(shè)置背景圖片是否平鋪：background-repeatbackground-repeat:no-repeat;//不平鋪background-repeat:repeat;//平鋪(默認(rèn)值)background-repeat:repeat-x;//沿著x軸水平平鋪background-repeat:repeat-y;//沿著y軸垂直平鋪設(shè)置一系列背景屬性：backgroundbackground:#fff;//設(shè)置背景顏色background:url(圖片地址)no-repeat;CSS盒子模型

外邊距(margin)：盒子到盒子之間的距離(邊框到邊框之間的距離)內(nèi)邊距(padding)：標(biāo)簽中內(nèi)容到邊框之間的距離清除內(nèi)外邊距(一般寫在css文件的最開頭)：頁面布局時，標(biāo)簽有自帶的內(nèi)外邊距，要先清除，否則會影響頁面效果浮動屬性浮動屬性：float原理：浮動的元素可以向左向右浮動，直到它的邊框碰到另一個元素的邊框為止特點：加了浮動的元素，不占據(jù)原來的空間，后面的元素會擠上去float:left;//向左浮動float:right;//向右浮動清除浮動：在含有浮動元素的父級元素上，加overflow:hidden;選擇器命名規(guī)范：(1)不能以數(shù)字或者特殊符號開頭(2)以字母(小寫)開頭，后面可以跟數(shù)字或字母,例：#a1域名、空間(1)域名、空間存在于服務(wù)器上(阿里云、新浪云、百度云)

(2)空間存在于服務(wù)器上，是一個用來存儲網(wǎng)站代碼的倉庫，把做好的網(wǎng)站部署到服務(wù)器空間上(3)域名：就是一個地址，和空間綁定在一起，然后通過域名就能找到空間()Baidu是域名的主體,.com是域名的后綴常見域名后綴的有.com//國際通用域名.cn//中國.net//網(wǎng)絡(luò)公司CMS認(rèn)識CMS(內(nèi)容管理系統(tǒng))CMS是"ContentManagementSystem"的縮寫中文名稱為“網(wǎng)站內(nèi)容管理系統(tǒng)”常見的內(nèi)容管理系統(tǒng)：z-blog,discuz,dedecmsCMS的作用：可以幫助我們快速的搭建網(wǎng)站。（可以通過CMS編輯網(wǎng)站中的內(nèi)容并且發(fā)布，通過系統(tǒng)自有的模板將我們編輯好的網(wǎng)站內(nèi)容自動生成一個頁面）DEDECMS的安裝及使用Dedecms：織夢內(nèi)容管理系統(tǒng)Dedecms官網(wǎng)及下載地址：/Dedecms文件結(jié)構(gòu)：docs是一個存放說明文件的文件夾(用不到)，uploads是dedecms文件的核心文件將uploads文件夾上傳到空間上：登陸新浪云：將uploads.zip文件拖到上傳代碼包的地方在瀏覽器中訪問自己的域名地址：例

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論