資源描述:
《專題一html和css基礎(chǔ)應(yīng)用》由會(huì)員上傳分享,免費(fèi)在線閱讀,更多相關(guān)內(nèi)容在教育資源-天天文庫(kù)。
1、湖南大學(xué)心理健康與生涯發(fā)展培訓(xùn)中心專題一HTML和CSS基礎(chǔ)應(yīng)用演練目標(biāo):l了解HTML、CSS在網(wǎng)頁(yè)設(shè)計(jì)中的作用l掌握html中常見(jiàn)標(biāo)簽和css常用屬性l掌握phpstorm等開(kāi)發(fā)工具的安裝和使用l運(yùn)用div+css等技術(shù)開(kāi)發(fā)一個(gè)個(gè)人網(wǎng)頁(yè)內(nèi)容說(shuō)明:l本章主要安裝相關(guān)軟件,搭建好開(kāi)發(fā)環(huán)境,為后續(xù)內(nèi)容提供工具支持,能夠使用軟件進(jìn)行網(wǎng)頁(yè)編寫。完成個(gè)人網(wǎng)站首頁(yè)的制作,掌握html和css的基本用法以及做出一個(gè)網(wǎng)頁(yè)完整的流程。l該部分適合以前沒(méi)有網(wǎng)頁(yè)開(kāi)發(fā)經(jīng)驗(yàn)的人群。如果你已經(jīng)非常熟練的掌握了這些知識(shí),可以跳過(guò)這一章。45湖南大學(xué)心理健康與生涯發(fā)展
2、培訓(xùn)中心目錄專題一HTML和CSS基礎(chǔ)應(yīng)用11.1網(wǎng)頁(yè)編寫工具(phpstorm)的安裝31.1.1phpstorm簡(jiǎn)介31.1.2phpstorm安裝31.1.3phpstorm的配置71.1.4編寫html91.2個(gè)人網(wǎng)站首頁(yè)的制作121.2.1建立站點(diǎn)121.2.2結(jié)構(gòu)分析121.2.3搭建框架141.2.4布局頁(yè)面—頭部和導(dǎo)航211.2.5布局頁(yè)面——側(cè)邊欄251.2.6布局頁(yè)面——主體部分311.2.7底部和細(xì)節(jié)調(diào)整401.3FAQS421.3.1相對(duì)路徑和相對(duì)于根目錄路徑421.3.2常用html標(biāo)簽421.3.3常用css屬
3、性431.4課后作業(yè)441.4.1作業(yè)一441.4.2作業(yè)二451.4.3作業(yè)三4645湖南大學(xué)心理健康與生涯發(fā)展培訓(xùn)中心1.1網(wǎng)頁(yè)編寫工具(phpstorm)的安裝安裝配置phpstorm,并發(fā)布包含hello.html頁(yè)面,本教程以后所有的代碼都將使用phpstorm進(jìn)行編輯。檢查點(diǎn):可以通過(guò)phpstorm編寫網(wǎng)頁(yè)并在瀏覽器中進(jìn)行預(yù)覽。1.1.1phpstorm簡(jiǎn)介phpStorm是一個(gè)輕量級(jí)的和智能的PHPIDE,包括HTML/CSS編輯器,JavaScript編輯器,并全面支持PHP。提供智能代碼完成功能,快速導(dǎo)航,錯(cuò)誤檢查,運(yùn)
4、行單元測(cè)試,或提供可視化的調(diào)試。趕快try一下吧!1.1.2phpstorm安裝點(diǎn)擊軟件工具中的PhpStorm-3.0.3.exe,點(diǎn)擊next,之后點(diǎn)擊IAgree:45湖南大學(xué)心理健康與生涯發(fā)展培訓(xùn)中心點(diǎn)擊Browse…可以改變安裝路徑,然后點(diǎn)擊next進(jìn)行下一步安裝:點(diǎn)擊next:45湖南大學(xué)心理健康與生涯發(fā)展培訓(xùn)中心點(diǎn)擊install進(jìn)行安裝:安裝完成,點(diǎn)擊phpstorm圖標(biāo),啟動(dòng)程序:45湖南大學(xué)心理健康與生涯發(fā)展培訓(xùn)中心Username輸入:hnutrainLicenseKey輸入:54131-1204201000000Y
5、KHrHz7jPqQdPimEapj5TXtjRaqd6aFZdmoHsw9hAvwFkJI1BY4e5"NK7ZUH6AwgUIbHHgt36pxHpD6ApusiS點(diǎn)擊Ok,注冊(cè)完成:45湖南大學(xué)心理健康與生涯發(fā)展培訓(xùn)中心1.1.3phpstorm的配置導(dǎo)入配置文件,配置文件包括字體,顏色,自動(dòng)提示等信息。選擇settings.jar所在路徑,導(dǎo)入settings.jar。在軟件工具中已經(jīng)提供了配置好的settings.jar:45湖南大學(xué)心理健康與生涯發(fā)展培訓(xùn)中心點(diǎn)擊ok,重新啟動(dòng)phpstorm,完成配置。1.1.4編寫html點(diǎn)
6、擊File,NewProject:指定project的名稱和project在電腦上的位置,點(diǎn)擊OK:點(diǎn)擊ThisWindow,說(shuō)明在當(dāng)前窗口打開(kāi)項(xiàng)目:45湖南大學(xué)心理健康與生涯發(fā)展培訓(xùn)中心右鍵點(diǎn)擊hello項(xiàng)目:指定html文件名稱:45湖南大學(xué)心理健康與生涯發(fā)展培訓(xùn)中心自動(dòng)生成的html代碼在body和