专题一HTML和CSS基础应用.docx

湖南大学心理健康与生涯发展培训中心专题一 HTML和CSS基础应用演练目标：l 了解HTML、CSS在网页设计中的作用l 掌握html中常见标签和css常用属性l 掌握phpstorm等开发工具的安装和使用l 运用div+css等技术开发一个个人网页内容说明：l 本章主要安装相关软件，搭建好开发环境，为后续内容提供工具支持，能够使用软件进行网页编写。完成个人网站首页的制作，掌握html和css的基本用法以及做出一个网页完整的流程。l 该部分适合以前没有网页开发经验的人群。如果你已经非常熟练的掌握了这些知识，可以跳过这一章。目录专题一 HTML和CSS基础应用11.1 网页编写工具（phpstorm）的安装31.1.1 phpstorm简介31.1.2 phpstorm安装31.1.3 phpstorm的配置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属性431.4 课后作业441.4.1作业一441.4.2 作业二451.4.3作业三461.1 网页编写工具（phpstorm）的安装安装配置phpstorm，并发布包含hello.html页面，本教程以后所有的代码都将使用phpstorm进行编辑。检查点：可以通过phpstorm编写网页并在浏览器中进行预览。1.1.1 phpstorm简介phpStorm是一个轻量级的和智能的PHP IDE，包括HTML / CSS编辑器，JavaScript编辑器，并全面支持PHP。提供智能代码完成功能，快速导航，错误检查，运行单元测试，或提供可视化的调试。赶快try一下吧！1.1.2 phpstorm安装点击软件工具中的PhpStorm-3.0.3.exe，点击next，之后点击I Agree：点击Browse可以改变安装路径，然后点击next进行下一步安装：点击next：点击install进行安装：安装完成，点击phpstorm图标，启动程序：Username输入：hnutrainLicense Key输入：54131-1204201000000YKHrHz7jPqQdPimEapj5TXtjRaqd6aFZdmoHsw9hAvwFkJI1BY4e5NK7ZUH6AwgUIbHHgt36pxHpD6ApusiS点击Ok，注册完成：1.1.3 phpstorm的配置导入配置文件，配置文件包括字体，颜色，自动提示等信息。选择settings.jar 所在路径，导入settings.jar。在软件工具中已经提供了配置好的settings.jar：点击ok，重新启动phpstorm，完成配置。1.1.4 编写html点击File，New Project ：指定project的名称和project在电脑上的位置，点击OK：点击This Window，说明在当前窗口打开项目：右键点击hello项目：指定html文件名称：自动生成的html代码在body和之间加上“hello，world！”Ctrl+s保存文件，右键点击编辑区域,选择Open in Browser在浏览器中查看：1.2 个人网站首页的制作本章节将带领大家制作完成个人网站的首页，掌握HTML和CSS的基本用法。本专题分为如下七部分：1) 建立站点 2) 结构分析 3) 搭建框架 4) 布局页面头部和导航 5) 布局页面侧边栏 6) 布局页面主体部分 7) 底部和细节调整 1.2.1 建立站点TIPS：文件名要见名知意，方面你进行网页开发和日后维护，否则以后你想要改一张图片岂不是很麻烦？你的网站文件岂不是也很凌乱？在F盘建立一个personpage文件夹，然后在目录下新建images文件夹、css文件夹。把各类文件分别存放起来，images目录下存放网站所需要的图片，css目录下存放网站的样式表。1.2.2 结构分析创建完站点后，就需要对页面结构进行分析了，根据效果图，分析页面分为几大块，该怎么布局更合理。下面这个图是一个个人网站的模板，虽然不怎么好看，但目的是把前边学的东西全都给串起来，让大家掌握各种情况的处理方法，先看下效果图及在网页中显示的样式。纵观大局，肢解页面化整为零从图中可以看出整个页面分为头部区域、导航区域、主体部分和底部，其中主体部分又分为左右两列，整个页面居中显示。 看明白了这点，下边的框架就好搭建了。整体框架结果图如下：1.2.3 搭建框架首先用phpstorm打开网站，点击open Directory：选择personpage：选择This window，代表在当前编辑器窗口打开网站：右键点击personpage项目，创建html文件：Phpstorm自动生成index.html：为了支持中文，需要声明编码，在之间声明如下：把骨架先搭建起来，然后一步一步得去填充内容，化整为零在与之间搭建好总体框架，代码如下：此处显示 id header 的内容此处显示 id nav 的内容 此处显示 id main 的内容 此处显示 id side 的内容此处显示 id footer 的内容从上边的效果图分析得知，整个网页是居中浏览器显示的，按照这样的写法需要把以上的header、nav、maincontent、footer都设置宽度并居中，这样做起来很麻烦，所以再在这些标签外增加一下父标签，设置这个父标签宽度并居中后，是不是所有的标签都居中了呢。增加后的代码如下：此处显示 id header 的内容此处显示 id nav 的内容 此处显示 id main 的内容 此处显示 id side 的内容此处显示 id footer 的内容页面预览：整体宽度为900px，main部的宽度为664px，side宽度为228px。把这三个基本的宽度测量后，下面就可以写css代码了。由于本实例是按照实际当中应用来做的，所以css样式表就最好写在单独文件里了，不要再写在文件内部了，这样可以利用代码的重用性，减少很多劳动强度。我可以被多个html文件引用，可以减少劳动强度，如果要改变所有网页的样式，只需要修改我就可以了，便于维护2.htmlLayout.css1.html3.html下面就新建一个css样式表文件：创建后保存在css文件夹中并命名为layout.css，保存后先设置全局的样式，而后写每一块单独的样式，全局样式代码如下：bodymargin:0 auto; font-size:12px; font-family:Verdana; line-height:1.5;ul,dl,dd,h1,h2,h3,h4,h5,h6,form,p padding:0; margin:0;ul list-style:none;img border:0px;a color:#05a; text-decoration:none;a:hover color:#f00;全局的样式定义完后，下面定义以上几大块的样式，先设置下#containerr的样式如下：Margin:按照顺时针的方向来声明属性值，也就是按照上-右-下-左的方向。关于这些属性还有另一个更加简单的写法，看看属性中上和下、左和右是否值是相等的，如果是那么就可以进一步优化了，你可以省略掉后两个值，剩下的两个值前者指上下，后者指左右.如margin:0 10px 0 10px;可以简写为margin:0 10px; 指左右的值为10px，上下的值为0；Margin：0 auto；代表上下边为0，浏览器自动适应屏幕居中因为0代表上下，auto代表左右.#container width:900px; margin:0 auto;layout.css文件：预览下index.html，发现并没有改变，这是为什么呢？因为刚定义的样式表没有和html文件关联，所以设置的样式当然不能对它生效了。在index.html文件的之间添加代码如下，说明引入当前文件夹中css文件夹下的。你知道html引入css的四种方法吗？index.html文件：如果已经是宽度为900px并居中，说明样式和文件关联好了。这就是为什么要定义一个站点了，因为许多文件要关联在一起才能构成一个完整的网页，所以要把它们放在一起，才能让这个页面找到和它相关的文件在哪里。下面设置内部几大块的样式，为了便于观察，我们把部分块设置了背景色。在layout.css文件中代码如下：Footer与header，nav，main是同一级的，显示在main的下面，占据一整行Main和side都包含在maincontent中，但是main和side都设置了宽度，且main和side的宽度之和小于900px，main是靠在左边，side是靠在右边，所以他们可以显示在同一行，这就是两列排版。没有定义div的宽度，则其宽度是其上一层div的宽度。由于header和nav都包含在container中，所以他们的宽度是container的宽度900px；div默认在父容器中占据一行，同级别的div将显示在其下一行，可以看做被块级元素挤下去的。所以显示的结果就是header在上面，nav在下面。/*header*/#header height:70px; background:#CCFFCC; margin-bottom:8px;#nav height:30px; background:#CCFFCC; margin-bottom:8px; /*main*/#maincontent margin-bottom:8px;#main float:left; width:664px; height:500px; background:#FFFF99;#side float:right; width:228px; height:500px; background:#FFCC99; /*footer*/#footer height:70px; background:#CCFFCC;预览效果图：现在预览一下：在IE6下#maincontent的底部外边距并没有生效，而在IE8下，#footer干脆跑到#maincontent的下边了，这又是怎么回事呢？如果一个容器内的元素都浮动的话，那么它的高度将不会去适应内部元素的高度。解决办法是在“#maincontent”增加 “overflow:auto; zoom:1;”，这样就可以让它自动适应内部元素的高度了。预览效果图：1.2.4 布局页面头部和导航有了上边的基础，下面的任务就是要利用html和css制作完成一个完整的网页了。先从头部开始，就像盖房子一样，整体结构已经出来了，下面就需要填砖分割空间了。 头部先分析下头部：分为两部分，一个是logo靠左侧显示，一个是搜索靠右侧显示，那么布局时插入两个div，一个向左浮动，一个向右浮动的方式来完成。另外还有很多种实现方法，比如logo用h1标签，搜索用span，或者把logo做为背景图片也是可以的，不管采用哪种方法，要根据页面的需求选用一种最合理的方法。index.html文件代码：此处显示 id logo 的内容此处显示 id search 的内容预览效果：先在header里插入以上两块元素。然后分别插入相应的内容，在logo里插入我们事先切割好的logo图片，在search里插入一个表单，一个文本框和一个按钮。index.html文件：预览效果：在layout.css中对logo进行定义：#logo float:left; margin-top:18px;#search float:right; margin-top:30px;预览效果：这两项的位置已经差不多了。预览你会发现，搜索框和按钮跟效果图中的不一样，这是因为我们还没对它设置样式，接下来把文本框增加一个class为inp_srh样式，按钮增加btn_srh的样式，然后定义这两个样式的属性。按钮，输入框等也是可以有背景图片，边框颜色等属性的，background 简写属性在一个声明中设置所有的背景属性btn_srh就是应用背景图像来实现的，说明一点这里的border的值为none指的是无边框，cursor定义鼠标样式为手形。 text-indent:-999em这个属性许多同学可能不理解是干什么用的了，它的作用相当于word中的首行缩进，这里设置成-999，意思是向左侧缩进-999em，这样是不是就看不到文字啦，所以它的作用是将按钮上的文字隐藏，当然也可以在html代码中插入空格代替文字。这些设置完后，把最初搭建框架时设置的header的背景色和底部外边距给去掉吧。页面预览：至此，头部制作已经完成，下面开始制作导航。 导航分析一下，导航分为一级导航和二级导航，所以需要在nav下再插入nav_main和nav_son两个块元素。红色部分代表nav_main是一级导航，蓝色部分代表nav_son，是二级导航： 首页 日志 电影 相册 音乐 我的收藏 关于我 HTML CSS PHP MYSQL 分析一下上图的导航部分：（1）两端的圆角；（2）鼠标划过状态和当前栏目状态宽度应该随着字数的多少而改变；（3）二级导航有鼠标划过时的状态。分析完之后，就需要把需要的图片整合到一张图片上了。先设置nav的高度及背景图片样式。#nav height:66px; background:url(./images/nav_bg.gif) 0 0 repeat-x; margin-bottom:8px;.nav_main height:36px; overflow:hidden;.nav_main ul li float:left; font-size:14px; font-weight:bold; margin:5px 5px 0 5px;.nav_main ul li a float:left; display:block; height:26px; line-height:26px; color:#fff; padding-left:20px;.nav_main ul li a span display:block; padding-right:20px;.nav_main ul li a:hover background:url(./images/nav_bg.gif) 0 -163px no-repeat;.nav_main ul li a:hover span background:url(./images/nav_bg.gif) right -163px no-repeat;.nav_main ul li a#nav_currentheight:31px; line-height:31px;background:url(./images/nav_bg.gif)0 -132px no-repeat; color:#646464;.nav_main ul li a#nav_current span height:31px; background:url(./images/nav_bg.gif) right -132px no-repeat;.nav_son height:30px;.nav_son ul li float:left; margin-top:4px;.nav_son ul li a display:block; width:78px; height:22px; line-height:22px; text-align:center; color:#6e6e6e;.nav_son ul li a:hover background:url(./images/nav_bg.gif) 0 -198px no-repeat;一级菜单和二级菜单预览效果：但还有最后一步就是两端的圆角没实现，实现圆角的方法也不复杂，只需再增加两行代码和两个样式即可。在nav下nav_main之前增加如下两行代码：然后用样式表定义一个左侧的圆角，一个右侧的圆角。css样式如下：预览效果：1.2.5 布局页面侧边栏 效果预览：侧边栏可以共用一个样式，下面就先做一个通用的，插入如下html代码：定义侧边栏的样式如下：效果预览： 业务领域先看下业务领域部分，内容分为三部分，可以用ul、li列表的形式实现，前边的图标用背景图片来实现，可以在li上设置背景图片，但这样麻烦一点，每个都需要设置，而且还得定位，有个更简便的方法是定义ul的背景图片，重新写入业务领域处的html代码。将上面代码替换为如下代码： 业务领域 电子器材： 耳机批发 | 摄像头批发 光盘刻录： 系统盘 | 游戏盘 电信推广： 电话安装 | 宽带连接 页面预览：然后为ul加上背景，设置样式：细心的用户已发现，这里的class后跟了两个样式名称，说明一个元素是可以定义多个样式的，中间用空格分开。一个好的代码布局，不管以后怎么改风格，只用改样式表，而不用去改html代码，这才真正做到两者分离了。给第三个li定义了一个product3样式，然后在样式表中定义它的底部边框为无，因为前边定义li的底边框为1px的虚线，而最后一个不需要，所以单独定义个样式把它取消掉。 留言回复“业务领域”完成后，下边该“留言回复”了。“留言回复”部分都是一问一答的形式，问答各采用不同的图标，而且问的文字加粗了。所以这部分采用dl、dt、dd的形式来完成。定义列表定义列表中的项目定义列表中项目的描述重新写入留言回复处的代码，将上面代码替换为如下代码 留言回复 html好学吗？ jsp/asp 三种其中之一. 怎样学习html？ 多动手，多联系，多提问. 什么是php？ PHP，是英文超级文本标记语言的简称，可用于多领域. 在layout.css中添加样式定义 页面预览：我们发现页面出现了错乱，由于出现了滑动条，说明是右边区域超过了定义的height的原因。我们在css中定义side高度为560px，现在高度超过了560px。解决方法：将height：560px 去掉，这样div就根据内容的高度而自动改变。页面预览：联系方式留言回复完成以后，就只剩下“联系方式”，重新写入联系方式部分代码将上述代码替换为 联系方式 湖南，长沙 telmail:554651151 湖南大学天马公寓二区七栋 邮编：410082 页面预览：把side部分的背景颜色去掉到现在，右边栏目均已完成。1.2.6 布局页面主体部分 主体部分可以分三大部分，顶部是幻灯和博客文章，中间是图片列表，下边是左右两块，先来布局主体部分的顶部。顶部实际上还是个左右两列布局。在id=“main”部分对页面进行布局重新写入id=“main”部分的代码将上述代码替换为 #index_top height:255px; overflow:hidden; margin-bottom:8px;#pic float:left; width:269px;#hot_newsfloat:right;width:358px;height:225px;padding:15px; background:url(./images/hot_bg.gif) 0 0 no-repeat;#index_box margin-bottom:8px;.box width:326px; float:left; border:1px solid #dbdbdb;.box1 float:right;在layout.css中定义样式页面预览：页面调试小技巧：将div的边框设为可见的，即 就可以看到div在页面上的长宽和位置，确定div布局没有问题以后，即可将border:1px solid black;去掉。 如果看到的是一条黑线，说明没有设置高度，可以设置一个随意高度，看布局是否符合要求。注意：高度大多数情况下是为了看效果，之后可将高度属性去掉，div会随着内容的增加而自动调整高度。 pic部分常见网站的幻灯是怎么实现的？将的style去掉，将以下js代码拷入的下面 linkarr = new Array(); picarr = new Array(); textarr = new Array(); var swf_width=269; var swf_height=210; var files = images/pic0.jpg|images/pic1.jpg|images/pic2.jpg|images/pic3.jpg; var links = #|#|#|#; var texts = ; for(i=1;ipicarr.length;i+) if(files=) files = picarri; else files += |+picarri; for(i=1;ilinkarr.length;i+) if(links=) links = linkarri; else links += |+linkarri; for(i=1;itextarr.length;i+) if(texts=) texts = textarri; else texts += |+textarri; document.write(); document.write(); document.write(); document.write(); document.write(); document.write(); 原理就是在html中引入images下的indexpic.swf，然后使用indexpic.swf载入images文件夹下的pic0.jpg，pic1.jpg，pic2.jpg，pic3.jpg，循环播放，效果预览：在图片播放器的下面加上一个div，div中的内容是图片新闻，然后让文本居中显示即可。在下面添加 图片新闻至此，pic部分就做完了。 hot_news 少年黑客领走 Chrome 第二笔六万美元奖金 继被一名俄罗斯学生在2分钟内绕过沙盒被破解之 后，Chrome浏览器再次破相，这次得手的是一位代号为PinkiePie的少年黑客 9-22现在就开始使用HTML5的十大原因 9-22HTML元素的ID和Name属性的区别 9-22维基百科已经彻底告别GoDaddy 9-22DIV+CSS实现放大镜效果的分页样式 9-22javascript为FF设置首页 9-22复制到系统剪贴板之IE,ff兼容版 在下面插入以下html代码效果预览：#news_top border-bottom:1px dotted #ccc; padding-bottom:8px;#news_top h1 font-size:18px; line-height:2.2; font-family:microsoft yahei; color:#444;#news_top p color:#999;#news_list padding-top:6px;#news_list ul li background:url(./images/icon.gif) 0 -300px no-repeat; padding-left:20px; line-height:1.9;#news_list ul li span float:right; color:#579f11;在layout.css中定义样式：效果预览：至此，hot_news就做完了。 index_pic首先去掉边框和高度的样式定义 我的照片 我的照片 我的照片 我的照片 我的照片 我的照片 我的照片 我的照片 我的照片 我的照片 在下面添加如下html代码#index_pic border:1px solid #dbdbdb; margin-bottom:8px;#index_pic h2 height:28px; background:url(./images/box_tit_bg.gif) 0 0; border-bottom:1px solid #dbdbdb; overflow:hidden;#index_pic h2 span display:block; height:25px; background:url(./images/mypic_title.gif) 12px 6px no-repeat;#index_pic ul padding:0 0 15px 0; overflow:auto; zoom:1;#index_pic ul li width:107px; float:left; margin:15px 0 0px 21px; display:inline; text-align:center;#index_pic ul li a display:block;#index_pic ul li img margin-bottom:3px;在layout.css中添加样式表：效果预览： index_box首先将index_box , box, bo