项目4 网站前端页面设计
2020-02-27 138浏览
- 1.项项目目44 网网站站前前端端页页面面设设计计 《 ASP.NET 动态网页设计项目教程》 主编：郭建东
- 2.教学目标
- 3.• 网站的前端设计一般根据被认可了的美工设计师或 UI 设计师设计的页面效果图进行图片的切片，再根据切 片后的图片素材，结合相关网页制作技术完成网页的 前端设计。目前流行的网页前端设计方法主要是 CSS+ DIV ，采用 Div 布局，结构重构性强，能体现样式和 结构相分离，加载速度快，容易被搜索引擎抓取，采 用 CSS 样式进行布局，方便进行页面的维护与修改。
- 4.任务 1 CSS+DIV 布局网站 1 页面 任务描述： • 本任务根据所给的图片素材及网页效果图完成一个企 业网站的主页面和内容页面的前端页面设计，要求使 用 CSS+DIV 技术进行页面设计。
- 5.1.1 关键知识：使用 CSS+DIV 布局页面
- 6.1.2.1 建立网站 1 主页面 一、建立网站及相关文件 二、公共样式设计 三、总容器层设计 四、页眉设计 五、内容区容器层设计 六、左侧栏设计 七、右侧栏设计 八、页脚设计 九、运行效果
- 7.1.2.1 建立网站 1 主页面
- 8.1.2.2 建立网站 1 内容页面 • 内容页与图 4-1 主页面比较，主要是右侧栏内容区显示内容不相 同步骤见教材任务实施
- 9.任务 2 CSS+DIV 布局网站 2 页面 任务描述： • 任务 1 中完成了一个企业网站的主页面和内容页的设 计，实际网站的布局多种多样，本任务继续介绍另一 个网站的前端页面设计过程。根据所给图片素材及页 面效果图，完成图 4-3 所示企业网站主页面和图 4-14 内容页面的前端设计。
- 10.2.1 关键知识：网站 2 前端页面设计及导 航设计 • 根据所给图片素材进行网页前端页面设计，本节内容 采根据静态网页的基础知识完成页面制作，使用 CSS+ DIV 布局网站 2 主页面和内容页面。 • 导航设置：导航除了项目 3 中的 CSS+DIV 和通过控件 实现方式外，本节介绍通过图片背景 + 文字形式进行 导航功能的实现，以椭圆图为背景，在椭圆背景图上 添加文字并设置文字链接的方式设计导航，当鼠标经 过背景图时背景图及文字均发生变化，需要编写导航 链接样式和鼠标经过样式代码。
- 11.2.2.1 建立网站 2 主页面 • 步骤见教材任务实施
- 12.2.2.1 建立网站 2 主页面 一、创建图片文件夹及网页文件 二、总容器层设计 三、页眉设计 四、整体内容区容器层设计 五、左侧栏设计 六、右侧栏设计 七、页脚设计 八、运行效果
- 13.2.2.2 建立网站 2 内容页面 • 步骤见教材任务实施
- 14.任务 3 母版页布局网站 2 页面 任务描述： • 分析二个网站的主页面和内容页面，会发现网站主 页面和内容页之间存在着布局相同内容相同的部分， 为了提高开发效率，可将一个网站中各网页的相同部 分设计在母版页中，然后普通的窗体页面应用母版页 ，可快速完成网站页面的设计。本任务以网站 2 为例 ，创建一个母版页，并应用到 web 页面中。
- 15.3.1 关键知识：母版页概念 • 母版页是一个网页模版，可以将母版页的风格应用到 多个网页中。在 Web 应用程序创建母版页（ Maste r ）页面，像普通页面一样设计完母版页，并在母版 页中需要添加一个或多个 ContentPlaceHolder 控件， 该控件占位空间是应用了母版页的普通网页中的可编 辑区，在编辑区中放置不同的网页内容，可快速完成 风格一致的内容页面的制作。 • 创建并设计完母版页后，在创建 web 窗体页面时勾选 上母版页，即可创建基于母版页的网页，运行时， AS P.NET 会自动地将两个页面进行整合，显示给用户。
- 16.3.2 任务实施：网站 2 母版页设计及应用 步骤见教材任务实施
