第1次课后作业-20140311布置.docVIP

第1次课后作业：HTML和CSS 1. 作业目的 对手工创建页面有一个比较全面的认识； 掌握用CSS控制页面的基本原理； 掌握用CSS实现一些效果的技术； 2. 作业内容 作业1. 体验CSS 完全通过手工编写代码的方式完成一个网页的制作，该HTML页面的最终效果如图1所示： 图1. 体验CSS 作业2. 首字放大和文字环绕 完全通过手工编写代码的方式完成一个网页的制作，该HTML页面的最终效果如图2所示： 图2. 首字放大和文字环绕 3. 作业指导 作业1. 体验CSS 首先建立HTML文件，构建最简单的页面框架。其内容包括标题和正文部分，每一个部分又分别处于不同的模块中，创建完成后保存为03-01.html文件。参考源代码如下： !--03-01.html-- html headtitle体验CSS/title/head body h1互联网发展的起源/h1 p1969年，为了保障通信联络，美国国防部高级研究计划署ARPA资助建立了世界上第一个分组交换试验网ARPANET，连接美国四个大学。ARPANET的建成和不断发展标志着计算机网络发展的新纪元。/p p20世纪70年代末到80年代初，计算机网络蓬勃发展，各种各样的计算机网络应运而生，如MILNET、USENET、BITNET、CSNET等，在网络的规模和数量上都得到了很大的发展。一系列网络的建设，产生了不同网络之间互联的需求，并最终导致了TCP/IP协议的诞生。/p /body /html 使用img标记，在标题下正文上，单起一段插入图片cup.gif，注意图片为左对齐，完成后保存为03-02.html，参考源代码如下： !--03-01.html-- html headtitle体验CSS/title/head body h1互联网发展的起源/h1 img src=cup.gif width=128 height=128 / p……部分代码省略……/p p……部分代码省略……/p /body /html 对标题的样式进行修改，使用蓝色背景的白色文字使标题更醒目。另外，这里将标题居中显示，并且与正文有一定距离，再通过修改标题的背景色达到进一步突出的目的。完成后保存为03-03.html，参考源代码如下： html head title体验CSS/title style h1{ color:white; /* 文字颜色*/ background-color:#0000FF; /* 背景色 */ text-align:center; /* 居中 */ padding:15px; /* 边距 */ } /style /head body h1互联网发展的起源/h1 img src=cup.gif width=128 height=128 / p……部分代码省略……/p p……部分代码省略……/p /body 接下来对图片添加样式，在style与/style标记之间加入如下代码： img { float:left; border:1px #9999CC dashed; margin:5px; } 完成后保存为03-04.html。 下面设置正文部分，可以控制文字的大小、排列的疏密等属性，整体上可达到更加协调的效果。加入如下代码到style与/style标记之间，完成后保存为03-05.html： p { font-size:14px; text-indent:2em; line-height:1.5; padding:5px; } 接下来对页面整体进行设置，对body标记设置样式，消除网页内容与浏览器窗口边界之间的空白，并设置浅色的背景色。加入如下代码到style与/style标记之间，完成后保存为03-06.html。 body { margin:0px; background-color:#CCCCFF; } 分别给两个段落的p标记设置一个id属性，属性值命名为p1和p2。然后在CSS部分设置如下规则，完成后保存为03-07.html： #p1 { border-right:3px red double; } #p2 { border-right:3px orange double; } 至此，本作业完成，03-07.html为最终结果。 作业2. 首字放大和文字环绕 首字放大是通过span/span标签实现的，为span标签设置float:left样式，字体大小为60px，字体为黑体，margin:0px;，padding-right:5px。 文字环绕通过将img标签设置为向右浮动即可。 body的背景颜色为#EAECDF，margin和padding均为0px。 对段落文字进行格