项目4 网站前端页面设计

  • 588 浏览

大头老爹

2018/04/22 发布于 编程 分类

文字内容
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 母版页设计及应用 步骤见教材任务实施