网页设计与制作教学课件作者HTML+CSS+JavaScript张洪斌教学资源KC11120100011_设计文档课件.doc

《课程案例 ——案例 图4-1 网站div结构布局示意图 4.2效果图分析 本例中通过一个实例讲解一个二级页面的制作方法，其他页面的制作可以参照类似的方法。其中站点首页的效果如图4-2所示。 图4-2 网站首页效果图 一个二级页面的效果如图4-3所示。 图4-3站点二级页面的效果图 从图4-1和图4-2可以看出，首页和二级页面的头部、左侧和底部是相同的，右侧部分的宽度和样式是相同的，区别在于内容不同。 4.2.1首页效果图的分析 从图4-1可以看出，此时首页在纵向可以分为3个部分：头部（包括logo部分和导航）、内容部分和底部。其中中间部分可以分为两部分：左侧的公告热点信息等、右侧的关于我们、新闻列表和相关连接部分。 4.2.2二级页面的分析 二级页面和首页的结构基本相同，其中的区别在于右侧的内容此时为新闻列表。 4.3效果图切片 分析完网页后，就要进行效果图切片了。同样要注意文本的隐藏、切片的选择和保存格式等几个方面。下面进行详细讲解。 在制作切片时，首先要区分页面内容与修饰的部分，然后分析出那些修饰部分是可以用CSS代码实现的，那些部分是可以用背景图片来实现的，那些是需要知道详细宽的。在制作切图时，首先把影响背景的文本内容去掉，同时尽量减少图片文件的数量。制作好的效果图如4-5所示。 图4-5首页效果图的切片 从图4-3的切片看出，用做背景的图片包括头部背景、导航背景、主题背景、底部背景、分类图标，其他的图片内容图片。切好图后，将切片保存到磁盘相应的位置。因为实例中二级页面内容部分没有新的图片，所有可以不进行切图操作了。新建一个站点，然后将使用的图片放入images文件夹里。 4.4制作站点首页头部 做好站点工作准备后，就可以开始制作网页页面了。同前面章节的实例制作一样，首页头部也要分成几个部分进行制作。下面分别进行讲解。 4.4.1 首页头部的信息和基础样式的制作 首先建立index.html 页面，保存网页到文件夹中。下面介绍制作链接的样式文件。 制作链接外部样式文件 1）点击“文件”→“新建”命令，新建一个css文件。 2）点击“文件”→“另存为”命令，将新建的css文件保存在style文件夹中，命名为main.css。 3）单击“窗口”→“css样式”命令，打开css控制面板，如图4-6所示。单击css控制面板顶端右侧的按钮，打开下拉子菜单，如图4-7所示。 4）单击“附加样式表”命令，进入“链接外部样式表”对话框，选择制作的main.css文件（注：图4-4中的按钮也可以实现“附加样式表”功能），如图4-8所示。 图4-6 CSS控制面板 图4-7 CSS控制面板子菜单 图 4-8 “链接外部样式表”对话框 单击“确定”按钮，制作好链接的外部样式。在代码视图中，在代码视图中，对应的代码如下： link href=”style/main.css” rel=”stylesheet” type=”text/css”/ 设置页面属性 1）单击“修改”→“页面属性”命令，进入“页面属性”对话框，如图4-9所示。页面属性有5个分类，其中常用的是定义页面的外观、链接、标题、标题/编码。在实例中，所选的外观属性参数如图4-10所示。 图 4-9 “页面属性”对话框 图4-10 关于外观的设置 2）在本实例中所选用的链接属性参数如图4-11所示。标题是指页面中h1~h6的标题元素的样式，如果页面中不需要，可以不设置相关属性。 3）标题/编码是指页面的标题，默认的设置是“无标题文档”，所以要重新定义页面标题。关于编码，中文常用的是gb2312的编码，也是页面默认的编码。其具体的参数设置如图4-12所示。 图4-11 链接的参数设置 图4-12标题/编码的参数设置 4）点击“确定”按钮，这样页面的属性就是定义完了。不过此时定义页面属性所产生的CSS代码会显示在页面header 元素中，其在代码视图中显示的代码如下： style type=text/css !-- body,td,th { font-family: 宋体; font-size: 12px; color: #dddddd; } body { background-color: #044cba; margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; } a { font-size: 12px; } a:link { text-decoration: none; } a:visited { text-decoration: none