专题一html和css基础应用

《专题一html和css基础应用》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、湖南大学心理健康与生涯发展培训中心专题一HTML和CSS基础应用演练目标：l了解HTML、CSS在网页设计中的作用l掌握html中常见标签和css常用属性l掌握phpstorm等开发工具的安装和使用l运用div+css等技术开发一个个人网页内容说明：l本章主要安装相关软件，搭建好开发环境，为后续内容提供工具支持，能够使用软件进行网页编写。完成个人网站首页的制作，掌握html和css的基本用法以及做出一个网页完整的流程。l该部分适合以前没有网页开发经验的人群。如果你已经非常熟练的掌握了这些知识，可以跳过这一章。45湖南大学心理健康与生涯发展

2、培训中心目录专题一HTML和CSS基础应用11.1网页编写工具（phpstorm）的安装31.1.1phpstorm简介31.1.2phpstorm安装31.1.3phpstorm的配置71.1.4编写html91.2个人网站首页的制作121.2.1建立站点121.2.2结构分析121.2.3搭建框架141.2.4布局页面—头部和导航211.2.5布局页面——侧边栏251.2.6布局页面——主体部分311.2.7底部和细节调整401.3FAQS421.3.1相对路径和相对于根目录路径421.3.2常用html标签421.3.3常用css属

3、性431.4课后作业441.4.1作业一441.4.2作业二451.4.3作业三4645湖南大学心理健康与生涯发展培训中心1.1网页编写工具（phpstorm）的安装安装配置phpstorm，并发布包含hello.html页面，本教程以后所有的代码都将使用phpstorm进行编辑。检查点：可以通过phpstorm编写网页并在浏览器中进行预览。1.1.1phpstorm简介phpStorm是一个轻量级的和智能的PHPIDE，包括HTML/CSS编辑器，JavaScript编辑器，并全面支持PHP。提供智能代码完成功能，快速导航，错误检查，运

4、行单元测试，或提供可视化的调试。赶快try一下吧！1.1.2phpstorm安装点击软件工具中的PhpStorm-3.0.3.exe，点击next，之后点击IAgree：45湖南大学心理健康与生涯发展培训中心点击Browse…可以改变安装路径，然后点击next进行下一步安装：点击next：45湖南大学心理健康与生涯发展培训中心点击install进行安装：安装完成，点击phpstorm图标，启动程序：45湖南大学心理健康与生涯发展培训中心Username输入：hnutrainLicenseKey输入：54131-1204201000000Y

5、KHrHz7jPqQdPimEapj5TXtjRaqd6aFZdmoHsw9hAvwFkJI1BY4e5"NK7ZUH6AwgUIbHHgt36pxHpD6ApusiS点击Ok，注册完成：45湖南大学心理健康与生涯发展培训中心1.1.3phpstorm的配置导入配置文件，配置文件包括字体，颜色，自动提示等信息。选择settings.jar所在路径，导入settings.jar。在软件工具中已经提供了配置好的settings.jar：45湖南大学心理健康与生涯发展培训中心点击ok，重新启动phpstorm，完成配置。1.1.4编写html点

6、击File，NewProject：指定project的名称和project在电脑上的位置，点击OK：点击ThisWindow，说明在当前窗口打开项目：45湖南大学心理健康与生涯发展培训中心右键点击hello项目：指定html文件名称：45湖南大学心理健康与生涯发展培训中心自动生成的html代码在body和之间加上“hello，world！”Ctrl+s保存文件，右键点击编辑区域,选择OpeninBrowser在浏览器中查看：45湖南大学心理健康与生涯发展培训中心1.2个人网站首页的制作本章节将带领大家制作完成个人网站的首页，

7、掌握HTML和CSS的基本用法。本专题分为如下七部分：1)建立站点2)结构分析3)搭建框架4)布局页面——头部和导航5)布局页面——侧边栏6)布局页面——主体部分7)底部和细节调整1.2.1建立站点TIPS：文件名要见名知意，方面你进行网页开发和日后维护，否则以后你想要改一张图片岂不是很麻烦？你的网站文件岂不是也很凌乱？在F盘建立一个personpage文件夹，然后在目录下新建images文件夹、css文件夹。把各类文件分别存放起来，images目录下存放网站所需要的图片，css目录下存放网站的样式表。1.2.2结构分析创建完站点后，就需

8、要对页面结构进行分析了，根据效果图，分析页面分为几大块，该怎么布局更合理。下面这个图是一个个人网站的模板，虽然不怎么好看，但目的是把前边学的东西全都给串起来，让大家掌握各种情况的处理方法，先看