Web前端开发任务式教程（HTML5+CSS3）（微课版） 课件模块10 网站设计综合实训.pptx

;网站设计综合实训;网站设计综合实训;1.需求分析

参考华为官网首页顶部导航主菜单，设计网页主菜单，显示效果如图10-2所示，版心宽度为1200px。

1）图10-2a是菜单初始显示效果，仅显示基本菜单项。

2）图10-2b是当鼠标悬停于“在线购买”菜单项时的显示效果，菜单项下面出现红色下划指示线，同时弹出了下拉菜单项。

3）图10-2c是当鼠标悬停于“个人及家庭产品”菜单项时的显示效果，菜单项下面出现红色下划指示线，同时下拉显示菜单项内容。

4）公司徽标菜单项没有鼠标悬停效果。当鼠标悬停于其他菜单项时，为菜单项添加背景颜色，突出显示菜单项。;网站设计综合实训;网站设计综合实训;网站设计综合实训;网站设计综合实训;网站设计综合实训;轮播图轮播若干张广告图像，需求与任务8.3类似，较任务8.3仅多一个功能，即在广告图像上叠加了一个“了解更多”超链接按钮，当鼠标悬停于“了解更多”超链接按钮时背景颜色变为红色，单击后可以链接到显示更多信息的网页。

轮播图整体实现可以参考任务8.3，“了解更多”超链接按钮与轮播图位置指示一样，使用子绝父相定位中的子元素绝对定位，使其位于广告图像的指定位置，背景颜色变化效果与10.2.2节帮助菜单按钮的背景颜色变化实现技术一样，使用鼠标悬停伪类结合背景属性完成。;网站设计综合实训;网站设计综合实训;网站设计综合实训;中分广告仅是背景与文字的组合，使用了按钮的背景效果，可以参考帮助菜单的按钮背景效果实现。文字内容的位置特殊，可以通过定位或设置边距值实现。;网站前端设计应从规划开始，首先应该规划网站首页的总体布局，包括确定是否使用版心及版心宽度。其次应注意网页模块的划分，在华为首页设计中，从大的角度分为内容和菜单两个模块，将内容模块又进一步细分为广告、推荐信息等9个模块，各个模块单独开发，既符合模块化设计的思想，又能方便网页的调试。最后应将模块进行整合，整合时需要注意CSS选择器的命名，解决冲突的一种方式是给每一个模块的选择器加模块名前缀名。

网站对美观度要求较高，开始设计之前就要充分收集素材，按总体设计要求???理素材资源的尺寸，确保素材符合总体设计要求。;