网页设计与制作项目教程作者陈义文主编项目4任务1课件.pptVIP

项目四 网站首页制作 任务要求 利用Div??CSS进行首页页面整体布局设计。 最终效果 操作提示 ? 在根目录下新建首页文件“index.html”。单击“文件”→“新建”命令，在弹出的“新建文档”对话框中单击“创建”按钮，如图4-2所示，并将该文档保存在根目录中，命名为“index.html”。 操作提示 ? 在“style”文件夹中创建CSS文件“hxd.css”。打开“index.html”文件，切换到“代码”视图，并将刚创建的CSS文件拖动到“index.html”中，在“index.html”代码里会自动添加一行link语句，代码见表4-1。 操作提示 ? 编写“hxd.css”中基础代码，见表4-2。 操作提示 ? 分析网站首页最终效果，可将页面从上到下分为5个部分： 1）页眉top。 2）导航menu。 3）产品图片轮播banner。 4）友情链接link。 5）页脚foot。 操作提示 ? 初步设计首页页面布局。 1）整个网页使用背景图片“indexbg.gif”。 2）网页在浏览器居中显示，整体宽度为“1000px”，白色背景。 3）top部分使用一张背景图片，高度为“100px”。 4）menu部分使用一张背景图片，高度为“37px”，行高为“37px”。此时导航文字会在垂直方向居中。 5）banner部分设置高度为“450px”，超出部分隐藏。