32静态网页设计 软件开发技术项目实践.ppt

相关知识 假定某个网站的主页分为以下几块： 标题区（header），显示网站标志、网站名称等。 导航区（navigation），指示不同网页的层次关系，便于用户快速转到某个网页。 主功能区（content）。 页脚（footer），显示网站版权和有关法律声明等。 此时可以采用div元素定义这些结构，例如： div id=header/div div id=navigation/div div id=content/div div id=footer/div 相关知识 （2）定义每块的样式 定义了网页的结构，接下来就可以定义样式了。div块的位置以及宽度和高度可以在【设计】模式下确定，而其他样式则可以在CSS文件中指定，如颜色、字体、边框、背景、图片、链接以及对齐方式等，一般利用样式生成器进行这些设置。 对于上面的结构，可以在style1.css中定义下面的样式规则： 相关知识 整个页面都相同的样式可以定义在body内，不同的样式则分别定义在各自的块内。除此之外，还可以定义针对某一块的样式。例如希望navigation内的超链接样式和content块内的超链接样式不一样，则可以用下面的形式分别定义： 相关知识 （3）页面布局 结构和样式确定后，就可以考虑如何布局了。 利用CSS中的float属性可以进行多列布局，在样式生成器的【布局】选项卡中可以设置任何元素的float属性（流控制），此属性确定了其他内容如何环绕被控制的元素，可选项有【边上不允许文本】、【靠右】或【靠左】，浮动效果可以参考在样式生成器中选择设置时其左边的小示意图。例如，有3个div块，其id属性分别为div1、div2、div3，则可以 将3个div块的float属性均设置为left，就可以将div2放在div1的右边，div3放在div2的右边。 相关知识 也可以利用float属性控制是否允许对象在页面上浮动（clear）。可选项有“任何一边”（对象可以在页面的左边或右边浮动）、“仅右边”（对象只能在页面的右边浮动）、“仅左边”（对象只能在页面的左边浮动）或“不允许”（对象不能在页面上浮动）。 当元素块的内容溢出时，即元素所包含的内容超过元素所定义的高度和宽度所能容纳的内容时，可以通过overflow属性控制是显示滚动条还是自动扩展被控元素的大小使其自动适应内容，或者干脆不显示溢出元素。 任务实施 1．使用div进行页面定位 《网络考试系统》后台管理页面效果如图3-17所示，整个页面分为顶部（Top）、左侧导航区（left）、右侧内容区（Content）和底部（footer）。使用div对其进行布局，其代码如下： 任务实施 图3-17 后台管理页面 任务实施 2．定义CSS样式表 （1）新建样式表文件Style.css。 （2）定义后台管理页面中所涉及的样式，代码如下： 任务实施 （3）添加CCS文件的引用，在后台管理页面的head标签中使用如下代码： 3．完善页面 除了基本的布局外，后台管理页面还需要一些其他的设计，其【源】视图代码见教材。 任务实施 （3）添加CCS文件的引用，在后台管理页面的head标签中使用如下代码： 3．完善页面 除了基本的布局外，后台管理页面还需要一些其他的设计，其【源】视图代码见教材。对应的CSS样式代码如下： 任务考核 本任务中要求完成《网络考试系统》的页面布局与设计，根据页面设计的合理性和美观性进行考核，同时要考虑页面布局的维护性。表3-2为本任务考核标准。 小结与课堂延伸 本任务主要介绍了页面布局的基本设计思想，以及利用CSS进行样式控制的基本方法和技巧。这部分内容是进行网页设计的基础，希望读者能够很好地理解和掌握。 小结 课堂 延伸 （1）自制XHTML标记速查手册。 （2）自制CSS样式速查手册。 学习情境三 ：《网络考试系统》功能实现 工作任务：静态网页设计 ASP.NET软件开发技术项目实践 任务描述 掌握XHTML语言 掌握CSS样式表 任务目标 知识目标 能力目标 每一个网站都需要进行页面的布局，用户看到的每一个页面都需要编写相应的XHTML语言（或者是HTML语言）进行布局，然后在布局好的页面的基础上进行相应功能程序的编写，页面布局的好坏直接影响到用户对使用该系统或者网站的整体感受。 掌握进行页面布局的方法 相关知识 1．XHTML语言 1）XHTML语言简介 XHTML是The Extensible HyperText Markup Language（可扩展超文本标识语言）的缩写。HTM