网页课程设计与报告.docVIP

网页课程设计与报告 华东交通大学理工学院课程设计报告 存档资料 成绩：　 华东交通大学理工学院 课 程 设 计 报 告 书 所属课程名称 网页设计与制作课程设计 题 目 　　 网站首页　　　　　　　 　　　 　　　 分 院 　　电 信 分 院 　　 　 专业班级 信息管理与信息系统1班 学　　号 201002104501XX 　 　　　　 　　 　 学生姓名 何XX　 　　　　 　　　 指导教师 程志平 　　　 2012年 - PAGE 1 - 第一章 绪论 1、网站设计的目 本学期通过对《网页设计与制作》的学习，让我了解到了如何让设计网页，以及一些基础的网页设计的知识和对Dreamweaver软件的基础应用，学习到了运用一些基本的网页设计工具和原则来制作和美观网页。比如PS，背景图片，文字，超链接，布局，框架，多媒体等等。 通过这次设计，进一步的提高了我的网站设计能力和动手能力，更加全面的巩固了我在课堂上学到的知识，掌握了网站设计的一些方法和步骤，了解了网站的基本结构，熟悉了规范和标准。 2、网站的主题 主题：某企业网站首页 3、网站规划 我设计网页的布局，整体上我借鉴了一些公企业网站，我才用了其中的一些布局，分块。而我主要采用了布局模式，div+css来设计，背景图片，然后再插入超链接，图片等等，这样就形成了整个网页的布局设 第二章 网页整体设计 1、创建HTML 首先打开DW软件建立一个站点，我取名为homework，如下图2-1 图2-1 站点建好后，还需要在产点里创建一些文件夹，用于存放东西。将CSS放在CSS文件夹里，图片放在images里，js存放java脚本。如图2-2 图2-2 然后利用所学的知识，开始进行大体的页面布局。布局的方式使用CSS+DIV进行如下图2-3： 源代码： div id=container div id=header此处显示 id header 的内容/div div id=nav此处显示 id nav 的内容/div div id=maincontent div id=main此处显示 id main 的内容/div div id=side此处显示 id side 的内容/div /div div id=footer此处显示 id footer 的内容/div/div 图2-3 2、创建CSS文件 创建一个外联的层叠样式表，将CSS代码写如下： /*body*/ #container { width:900px; margin:0 auto;} /*header*/ #header { height:70px; background:#CCFFCC; margin-bottom:8px;} #nav { height:30px; background:#CCFFCC; margin-bottom:8px;} /*main*/ #maincontent { margin-bottom:8px;} #main { float:left; width:664px; height:500px; background:#FFFF99;} #side { float:right; width:228px; height:500px; background:#FFCC99;} /*footer*/ #footer { height:70px; background:#CCFFCC;} 第三章 网页详细设计 1、头部的和导航栏设计 头部：分为两部分，一个是logo（3-1）靠左侧显示，一个是搜索（3-2）靠右侧显示，那么布局时插入两个div，一个向左浮动，一个向右浮动的方式来完成。另外还有很多种实现方法，比如logo用h1标签，搜索用span，或者把logo做为背景图片也是可以的，不管采用哪种方法，要根据页面的需求选用一种最合理的方法。如果要在logo加上链接的话，那么就不能用背景图片的方法了。 产品搜索 图3-1 图3-2 用如下代码实现： div id=header div id=logoimg src=images/logo.gif width=181 height