网页布局.doc

项目名称： 网页布局适用专业：计算机项目学时：共4个任务7课时 项目执教：唐菊、王海清、张红彬、章朝晖项目背景：本项目讲解了页面组成、页面尺寸、页面的布局、表格的应用、AP Div的应用等知识点。项目描述：包括4个任务：任务1 网页布局欣赏；任务2 制作“个人简历”；任务3 制作“个人网站”首页；任务4 项目实训 “干旱使我们更加珍惜水资源 ”；项目目标：（1）基本了解：页面的组成部分，表格的应用，AP Div的应用。（2）熟练掌握：应用AP Div布局网页。（3）重点掌握：页面属性设置、利用嵌套表格布局网页。（4）学习者能应用表格和AP Div布局网站，并通过比较两种网页制作方法的优缺点来掌握网页布局。项目素材：“素材”文件夹。项目展示： 项目过程：任务1 网页布局欣赏任务学时：1课时任务分析：网站设计是否美观，直接影响到客户对网站的第一感觉。网页布局设 计就是在页面内对组成网页的基本元素进行合理地组织安排，使网页便于阅读和理解，看起来美观、清晰。在欣赏网页时，可从页面尺寸、页面组成、页面元素的分布方式等几方面分析 。操作要点：一、网页知识建构 (1) 页面尺寸 由于访问者计算机配置的不同，浏览网页时的显示模式也会有所区别。目前使用较多的分辨率是（1024768）像素和（12801024）像素两种，所以网页设计时，做页面要注意的就是显示器的分辨率的宽。现在常用的是宽度范围在918-980px，这个宽度在1024以上分辨率都会完全显示，不会出现左右滚动条。 (2)页面组成 页面一般由页头、网页标志、导航图、内容板块和页脚等组成。 页头：又称为页眉，它的作用是定义页面的主题，如一个站点的名字等。这样，访问者能很快知道这个站点是什么内容。页头是整个页面设计的关键，它将涉及下面的更多设计和整个页面的协调性。页头常用来放置站点名字的图片和公司标志以及旗帜广告。o 网页标志：是一个网站的特色和内涵的集中体现 。o 导航栏：它的任务是帮助浏览者在站点内快捷地查找到需要的信息。 o 内容板块：它是页面的主体，常常会根据内容划分为多个栏目，每个栏o 目中放置相应内容的标题或摘要，可以包括文字、图像等。页面的内容o 是网站的根本，所以，对于内容板块应该合理安排，精心设计。o 页脚：指页面最下面的一部分，通常放置版权信息、联系方式等。技巧提示网站在推广时候，往往会含有一些广告信息，这些信息也是以图片或是文字的方式出现在页面的内容板块内，在插入广告时要注意适量，过多就会影响网页的内容。(3)页面布局 常见的页面布局分为上下型、左右型、混合型。 上下型：在上下型结构的页面中，上面是导航栏，下面是具体内容，如案例中的图1。 左右型：这种结构中，页面的左边是目录，右边是导航栏，下面是具体内容，如图2. 混合型：这种布局是上下型和左右型的组合，如图3，通常所见到的页面布局大多都属于混合型布局。二、知识链接 1、表格表格是网页设计中极为有用的设计工具，它为网页带来了结构的概念，利用表格来组织网页内容，可以设计出布局合理、结构协调的网页，表格使网页上各个元素排列井然有序。现在很多大型网站的主页都是用表格来进行布局的，网站设计者们已经把表格当做页面布局最有力的工具之一。 2、网页布局网页布局是指网页的结构形式，它是网页设计和制作的基础，通常在确定网站主题和栏目以后进行布局，目的是对网页内容进行精确定位。常用的网页布局方法有三种：表格、AP元素、框架。表格是网页布局中最直接、最基本的方式，是网页元素插入网页中最有效的、定位最准确的一种制作方法，但是当网页中运用了过多的表格时，页面下载的速度会受到影响。AP元素是最灵活的一种布局方式，可以随意定位对象，还可以重叠和隐藏。框架可以将网页分成多个相互独立的区域，通过不同的对象防止到不同的页面中进行处理来实现布局。三、任务小结本任务通过欣赏学习网页布局的三种模式，使学习者明白怎样布局网页、对网页的组成有大概的了解。任务2 “个人简历”表格的应用任务学时：2课时任务展示：任务分析：通过学习表格的应用，掌握基本的网页布局。赵四马上要毕业了，为了早日能找到一份适合自己的工作，他准备在网上发布一份个人简历介绍自己。怎么才能制作好一份个人简历的网页呢？思路如下：1 插入表格；2 插入图像及背景颜色；3 嵌套表格；4 插入文本 项目要点：1、 掌握创建表格及设置的方法。2、 掌握插入文本的方法。3、 掌握插入图像及背景颜色的方法。 操作要点：一、 知识要点1.网页设计中表格的用途： 在页面上显示表格数据。可以在网页中直接显示表格数据。当网页中有大量数据文字信息时，使用表格显示就清晰很多。例如：企业销售业绩单、新闻列表、职工通讯录等。 使用表格进行布局。可以通过设置表格的宽度、高度、比 例等属性对页面元素进行控制，做到精确布局网页上的元素。在HTML语言中，表格标签用表示，表格元素标签位于和之间。行标签为,单元格标签为，在“代码”视中，有效的利用HTML语言，可以更加精确的布局网页页面。2. 表格元素的选择 (1) 表格的选择。方法一：鼠标指向表格右框线或下框线，当指针变向双向箭头时单击鼠标左键。方法二：将光标置于表格中任意位置，在状态栏中单击标签。(2) 行的选择。单行的选择：用鼠标指向要选择行的左边线，当指针变成黑色右向箭头时单击鼠标左键。连续多行的选择：选择一行后，拖动鼠标选择多行。不连续多行的选择：按住“Ctrl”键，分别选择各行。（3）列的选择。单列的选择：用鼠标指向要选择列的上边线，当指针变成黑色向下箭头时单击鼠标左键。连续多列的选择：选择一列后，拖动鼠标选择多列。不连续多列的选择：按住“Ctrl”键，分别选择各列。（4）单元格的选择。单个单元格的选择：按住“Ctrl”键，用鼠标左键单击单元格。连续单元格的选择：按下鼠标左键在表格中拖动，选择鼠标指划过的矩形区域中的单元格。不连续单元格的选择：按住“Ctrl”键，用鼠标左键依次单击各单元格。3.改变表格大小方法一：首先选择表格（选定的表格带有粗黑的外边框，在下边中点右边中点和右下角分别显示控制柄），用鼠标拖动控制柄调整表格大小。 方法二：选择表格，在表格属性面板中输入表格高度和宽度的数值。 4.行高和列宽的调整 列宽的调整如下。方法一：拖动要更改的列的右边线（相邻列的宽度也更改了，表格的总宽度不变）。若按下“Shift”键后再拖动可以保持其他列宽不受影响。方法二：选择列，在属性面板中指定宽度。行高的调整如下。 方法一：拖动要更改的行的下边线。 方法二：选择行，在属性面板中指定高度。5.行、列的添加与删除（1）行或列的插入。 用鼠标指向某单元格，然后右击，在弹出的快捷菜单中选择“表格”“插入行”或“表 格”“插入列”命令。可在当前光标所在行或列的位置插入一行或一列。 将光标定位在末行的最后一个单元格中，按“Tab”键可在表格的最下面添加一行。（2）行或列的删除。 用鼠标指向某单元格，单击右键，在弹出的快捷菜单中选择“表格”“删除行”或“表 格”“删除列”命令，可删除当前光标所在的行或列。6.删除表格。方法：选中表格，按“Delete”键，或者选择“编辑”“清除”命令。7.嵌套表格 嵌套表格是在表格或单元格内插入表格，简而言之，就是表格中的表格，可以像格式化任何其它表格那样修改嵌套表格。但是嵌套表格的宽度不能超过其所在表格或单元格的宽度。二、 操作步骤步骤一 新建网页文件1、 建立空白页面启动DW CS5，选择文件菜单新建命令，在出现的新建文档对话框中选择空白页，也米娜类型选择HTML，布局选择无，单击右下角创建按钮，建立空白页面。2、 设置页面属性、单击网页下方的属性按钮中的页面属性按钮，弹出页面属性对话框中设置左右上下边距为0，单击确定按钮，返回设计视图。 步骤二 创建表格布局网页1、 插入表格选择插入表格菜单表格命令，在弹出的表格对话框中，将行数设置为10，列数设置为1，表格的宽度设置为800像素，边框粗细、单元格边距、单元格间距设置为0。2、 设置表格属性单击确定按钮，在文档中生成一个10行1列的表格，单击属性面板中将表格的对齐方式设置为居中对齐。3、 设置单元格属性将光标移到表格第一行第一列中，输入个人简历，单击属性面板中单元格水平对齐方式为居中对齐，垂直对齐为居中，高度为25，字体大小为24，粗体，背景颜色为#99CCFF。4、 输入文字将光标移动到表格第二行的单元格中，输入文字内容为“基本资料”。5、 插入嵌套表格将光标移动到第三行的单元格中，单击“插入”工具栏“常用”面板中插入表格，插入一个6行5列的表格，表格宽度设置为100，在表格宽度右侧的边框中选择百分比，边框粗细设置为1。6、 在嵌套表格中输入信息在嵌套表格中输入文字信息，参考表格中的内容输入，在第三行右侧单元格中插入“素材库项目33.2images”中的图像“zhangpian.jpeg”，设置插入图像的大小，宽为260，高为122。7、 完成个人简历其他信息按上述方法完成“个人特长”、“所获奖励”、“就业意向”等栏目具体内容的制作，最终完成个人简历制作。步骤3 预览网页1. 选择“文件菜单”命令，在弹出的“另存为”对话框中，选择文件保存的路径“E：网页制作”，文件名为“jianli.html”，保存格式为“.html”，点击保存按钮来保存网页。2. 按F12预览网页。三、 任务小结本任务是通过使用表格布局网页，让学习者通过完成任务掌握如何插入及编辑嵌套表格、设置文字属性和表格属性、在表格中插入图片等知识点。在设计网页中，会经常用到该知识点，因此学习者必须要熟练掌握以及应用。任务3 制作“网易相册”层的应用 任务学时：2课时任务展示： 任务分析： 上节我们学习了利用表格进行网页布局方法，这节课我们学习利用层来 进行布局网页 。重点提示：1、 本任务是利用层进行布局网页，使学习者掌握层布局的运用。2、 掌握AP元素属性的设置、在AP元素中插入图像。操作要点：一、知识建构 1、AP元素（绝对定位元素），是一种HTML网页元素，一般称为“层”。即网页内容的 容器，包含文本、图像和其它任何可以在HTML文档正文中放入的内容。可以精确定位在网 页的任何地方。在Dreamweaver cs5中，系统使用DIV标记和CSS技术来实现AP层对象的效果，所以也称为绝对定位的DIV标记。 2、“AP元素”面板所有AP元素都将在“AP元素”面板中显示。 （1）AP元素的隐藏和显示：单击AP元素面板列表的左边，可以打开或关闭眼睛。眼睛睁开和关闭表示AP元素的显示和隐藏。 （2）多个AP元素的选择：按下“Shift”键并单击AP元素面板上多个AP元素的名称。 （3）Z轴：即z轴值，决定了重叠时AP元素的位置，可在面板中更改。例如：z轴值为4的AP元素在z轴值为3的AP元素的上面，改变z轴值就可以改变AP元素的重叠顺序。 （4）防止重叠：选中时页面中的AP元素无法重叠。二、操作步骤步骤一 创建站点和网页文件1、 启动DW CS52、 选择文件新建命令，在出现的新建文档对话框中选择空白页，页面类型选择HTML,布局选择 “无”，单击 “创建” 按钮，建立空白页面。3、 选着 “文件” “保存”命令，在弹出的“另存为”对话框中，将网页名保存为“D：wangyexiangce.html”。4、 选着“窗口”“属性”命令，打开属性面板，单击“页面属性”按钮，在打开的“页面属性”对话框中，设置“页面字体”“大小”和“文本颜色”分别为“宋体”、14px”和“#FFF”。5、 单击“保存”按钮保存网页，完成新建网页及保存网页设置。步骤二 用AP元素布局网页1 、选择窗口插入命令，在弹出的插入工具栏中，选择布局选项，单击布局面板中的“绘制AP Div”按钮。2、在网页中拖出矩形区域，绘制一个AP元素。3、单击AP元素的边框选中AP元素，打开AP元素属性面板，设置AP元素的大小，在左和上文本框中输入“0px”，在宽文本框中输入“850px”，在高文本框中输入“600px”。4、单击布局面板中的“绘制AP Div”按钮，在apDiv1内的顶部插入apDiv2，设置apDiv2的高位31px，背景颜色为“#333333”.5、将光标定位在apDiv2内，选择插入图像命令，插入图像“素材库项目33.2imagelogo.jpg”，调整图片的大小与apDiv2高度一致。6、在布局面板中单击绘制AP Div按钮，在网页中分别插入3个AP元素，分别插入“素材库项目33.2images”中的“01.jpg”、“02.jpg”、“03.jpg”，宽度分别设置为560px、290px、850px。7、在apDiv1内的底部再绘制一个AP，并输入文字“关于网易”、“相册官方微博”、“常见问题”、“客户意见”、“隐私政策”、“网易公司版权所有”等内容，并调整字体居中对齐。步骤三 保存网页按F12键弹出是否保存网页对话框，单击是保存并预览网页。三、任务小结 本任务通过AP元素的学习，使学习者学会利用层进行网页的布局。在制作页面时需要认真设计、准备好素材图片及文字等相关素材，然后进行布局。表格和AP元素相互结合来进行网站布局，以达到满意的网页效果。任务4 项目实训 干旱使我们更加珍惜水资源 任务学时：2课时任务展示：任务分析：围绕本节所学知识，依据“素材库项目3实训images”文件夹中的文件，设计一个网站