项目二 使用表格布局页面(12)

《项目二 使用表格布局页面(12)》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、项目二使用表格布局页面表格是制作网页的灵魂，在实际应用中，表格排版的地位不可动摇。浏览网站，会发现几乎所有的网页都要或多或少地使用表格。可以说，如果不能很好的掌握表格，就等于没有学好网页的制作。创建幼婴教育网站页面2.1项目背景婴幼儿类网站通常是一些教育机构来制作，目的主要是为了广大婴幼儿父母提供儿童教育的相关信息，推广所需要的一些活动，此类网站在页面视觉效果上一定要给人以充满活力的感觉，内容上要主次分明，所做出来的页面才能引起浏览者的关心和注意。项目任务完成幼婴教育网站页面的制作项目分析在制作幼婴教育网站的时候，页面着重表现

2、自由安定的感觉，应用很简单常见的页面布局，简单地处理网页中的文本和图像，使整个页面条理很清楚。色颜应用：在本案例中，以纯白色为底色，给人种清爽、柔和的感觉，页面顶端以绿色草坪作底，衬出新生婴儿般朝气。设计构思：在页面的设计上，本案例采用了居中的布局方式，为页面充分留出余白，应用人的初始印象深度不同将网站LOGO放在最能加深初使记忆的页面左上角，使网站的形象深深的留在浏览者的心中，效果如图2-1所示。图2-1页面效果设计师提示：为了使网页获得最佳的视觉传达效果，使设计制作的网站真正成为可读性强并且形式新颖的信息载体，在设计制作时

3、就必须考虑人的视觉流程。人们在阅读某种信息时，视觉总有一种自然的流动习惯，即先看什么，后看什么，再看什么。人在阅读过程中，视觉有一种自然的流动习惯，一般是从上到下，从左到右，从点到线，而这种视觉习惯都是受到人的视觉因素所影响的。所以在网页设计制作过程中，通常都会将突出和重点的信息放置于页面的左上方，依次排列页面的信息。在网页设计制作过程中，应该灵活合理的动用视觉流程，使网页中的信息能够有效的传达。技能分析：表格是用于在HTML页面上显示表格式数据以及对文本和图像进行布局的强有力工具。表格由一行或多行组成，每行又由一个或多个单元

4、格组成。可以说，表格是Dreamweaver页面排版的核心。一个良好的网页构成应该以表格为基础，允许搭配其他的辅助排版工具，使网页达到最佳的设计效果。项目实施制作并编辑表格是制作网页最为基本的操作之一。由于浏览器的形状与表格均为矩形形状，因此分割画面时表格是最为合适的方式。在页面中使用表格，主要分为制作表格、设置表格属性、利用表格布局网页等几大部分，掌握好这些应用，就可以随心所欲地在网页中应用表格，制作出美观实用的网页，另外，灵活使用表格的背景，框线等属性可以得到更加美观的效果。2.1.1页面的制作步骤1页面顶部的制作01执行

5、“文件”→“新建”命令，新建一个空白的HTML文档，执行“文件”→“保存”菜单命令，保存页面为“CD源文件项目二index.html”。02单击“CSS样式”面板上的“附加样式表”按钮，弹出“附加外部样式表”对话框，单击“浏览”按钮，选择到需要的外部CSS样式表文件“CD源文件项目二stylestyle.css”，单击“确定”按钮，完成“链接外部样式表”对话框，执行“文件”→“保存”命令，保存页面。操作提示：在制作页面之前，首先要设置“页面属性”对话框对页面进行整体控制，还需要考虑页面与浏览器边框的距离，通常情况

6、下，页面都是与浏览器边框靠在一起的，这就需要在“页面属性”对话框中将页面边距都设置为0，DreamweaverCS4中的“页面属性”对话框中设置的页面属性也可以选择写在HTML代码中还是写在CSS样式表中，在本实例中将它写在CSS样式表中，链接外部样式表直接应用。经验提示：CSS样式表一般位于HTML文件的头部，即与标记内，并且以结束，在body中实现主要是在标记中引用如：内容<

7、/font>这样的写法虽然直观，但是无法体现出层叠样式表的优势，因此并不推荐使用。CSS的定义既可以在HTML文档内部，也可以单独成立文件。例如，如下代码显示为调用外部样式表：03单击“插入”面板上的“表格”按钮，在工作区插入一个2行1列，“表格宽度”为100%，“单元格间距”、“单元格边距”、“边框粗细”均为0的表格，效果如图2-2所示。图2-2插入表格04单击“CSS样式”面板上的“新建CSS规则”按钮，弹出

8、“新建CSS规则”对话框，设置如图2-3所示，单击“确定”按钮，弹出“CSS规则定义”对话框，设置如图2-4所示。图2-3“新建CSS规则”对话框图2-4“bg01”样式设置操作提示：类名称必须以“.”开头，并且可以包含任何字母和数字组合。如果没有输入开头的句点，Dreamw