专题一html和css基础应用.docxVIP

专题一HTML和CSS基础应用 ———————————————————————————————— 作者： ———————————————————————————————— 日期： 专题一 HTML和CSS根底应用 演练目标：了解HTML、CSS在网页设计中的作用 演练目标： 了解HTML、CSS在网页设计中的作用 掌握html中常见标签和css常用属性 掌握phpstorm等开发工具的安装和使用 运用div+css等技术开发一个个人网页 内容说明： 本章主要安装相关软件，搭建好开发环境，为后续内容提供工具支持，能够使用软件进展网页编写。完成个人网站首页的制作，掌握html和css的根本用法以及做出一个网页完整的流程。 该局部适合以前没有网页开发经历的人群。如果你已经非常熟练的掌握了这些知识，可以跳过这一章。 目录 TOC \o 1-3 \h \z \u 专题一 HTML和CSS根底应用 1 1.1 网页编写工具〔phpstorm〕的安装 3 1.1.1 phpstorm简介 3 1.1.2 phpstorm安装 3 1.1.3 phpstorm的配置 7 1.1.4 编写html 9 1.2 个人网站首页的制作 12 1.2.1 建立站点 12 1.2.2 构造分析 12 1.2.3 搭建框架 14 1.2.4 布局页面—头部和导航 21 1.2.5 布局页面——侧边栏 25 1.2.6 布局页面——主体局部 31 底部和细节调整 40 42 1.3.1 相对路径和相对于根目录路径 42 常用html标签 42 1.3.3 常用css属性 43 1.4 课后作业 44 作业一 44 1.4.2 作业二 45 作业三 46 网页编写工具〔phpstorm〕的安装 安装配置phpstorm，并发布包含页面，本教程以后所有的代码都将使用phpstorm进展编辑。 检查点：可以通过phpstorm编写网页并在浏览器中进展预览。 phpstorm简介 phpStorm是一个轻量级的和智能的PHP IDE，包括HTML / CSS编辑器，JavaScript编辑器，并全面支持PHP。提供智能代码完成功能，快速导航，错误检查，运行单元测试，或提供可视化的调试。 赶快try一下吧！ 1.1.2 phpstorm安装 点击软件工具中的，点击next，之后点击I Agree： 点击Browse…可以改变安装路径，然后点击next进展下一步安装： 点击next： 点击install进展安装： 安装完成，点击phpstorm图标，启动程序： Username输入： hnutrain License Key输入： 5413100000YKHrHz7jPqQdPimEapj5TXtjR aqd6aFZdmoHsw9hAvwFkJI1BY4e5N K7ZUH6AwgUIbHHgt36pxHpD6ApusiS 点击Ok，注册完成： 1.1.3 phpstorm的配置 导入配置文件，配置文件包括字体，颜色，自动提示等信息。 选择settings.jar 所在路径，导入。在软件工具中已经提供了配置好的： 点击ok，重新启动phpstorm，完成配置。 1.1.4 编写html 点击File，New Project ： 指定project的名称和project在电脑上的位置，点击OK： 点击This Window，说明在当前窗口翻开工程： 右键点击hello工程： 指定html文件名称： 自动生成的html代码 自动生成的html代码 在body和/body之间加上“hello，world！〞 Ctrl+s保存文件，右键点击编辑区域,选择Open in Browser 在浏览器中查看： 个人网站首页的制作 本章节将带着大家制作完成个人网站的首页，掌握HTML和CSS的根本用法。本专题分为如下七局部： 建立站点 构造分析 搭建框架 布局页面——头部和导航 布局页面——侧边栏 布局页面——主体局部 底部和细节调整 建立站点 TIPS：文件名要见名知意，方面你进展网页开发和日后维护，否那么以后你想要改一张图片岂不是很麻烦？你的网站文件岂不是也很凌乱？在F盘建立一个personpage文件夹，然后在目录下新建images文件夹、css文件夹。把各类文件分别存放起来，images TIPS：文件名要见名知意，方面你进展网页开发和日后维护，否那么以后你想要改一张图片岂不是很麻烦？你的网站文件岂不是也很凌乱？ 1.2.2 构造分析 创立完站点后，就需要对页面构