网页设计与制作报告中的相关内容的表达方式的参考

以下内容只是一个示范，不要千篇一律，完全还有很多其他方法，根据你自己的网站来写。网页设计与制作报告中的有关内容的表达方式的参考（以湖南人文科技学院网站为例）：1、网站页面组织结构图学校介绍学校介绍湖南人文科技学院网站湖南人文科技学院网站院系设置管理结构院系设置管理结构 人事处人事处科研处图1：网站页面组织图1：网站页面组织结构图2、网站文件夹目录规划可以使用如下方法来描述网站文件夹目录的规划，并进行相关说明，即文件夹用来组织存放什么样的文件或文件夹，如math文件夹用来对数学系网页的相关文件和文件夹进行组织管理，images用来存放图片文件。方法1：图2：网站文件夹目录结构图图2：网站文件夹目录结构图方法2：hnuhsthnuhstdatacssimagesmathenglishindex.htmlall.csshome_top.jpga.jpg......图2：网站文件夹目录结构图图2：网站文件夹目录结构图3、网站首页布局网页布局描述可以分为三步：第一步：整体布局第二步：各DIV和各标签的CSS描述第三步：对每个模块进行设计和实现如：网页使用CSS+DIV技术布局与定位（1）首页分为5个DIV区，其整体布局如图3，分别为：①banner（广告区）：用来显示横幅广告等；②nav（导航区）：使用菜单（或其它）用来引导用户浏览网站；③left（左区）：用来显示最新新闻、通知等链接信息；④main（主区）：用来显示网页主要内容；⑤footer（脚区）：用来显示版权、单位等信息。（要根据你自己的布局情况来写，另外对于网页整体布局最好不要使用表格布局，但在某些div中可以嵌套表格）bannernavleftmainfooter图3：网站首页整体布局图图3：网站首页整体布局图（2）首页的各种标签、各种DIV的CSS定义如下（有必要在比较重要的地方或者某些由你自己命名的相关名字处或你认为他人在理解上有困难的地方做注释）：（以下内容只是举个例子，千万不要抄哦，否则后果很严重）body{ background-color:#CCE8A7; background-attachment:fixed; background-image:url(sample/bg.jpg); background-repeat:repeat-x; margin:0px; padding:0px; text-align:center;}#container{ text-align:left; position:relative; width:900px; margin:0auto;}#containera:link,#containera:visited{ text-decoration:none; color:#000000;}#banner{ background-image:url(sample/top.jpg); background-repeat:no-repeat; background-position:center; height:300px;}#bannerobject{ margin:0px0px0px210px;}#nav{ margin:0px; padding:0px;}#navul{ list-style-type:none; position:absolute; top:240px; width:527px;}#navli{ float:left; text-align:left; padding:0px10px0px10px;}#left{ background-color:#CCE8A7; width:250px; float:left;}#login{ background-image:url(sample/login.jpg); background-repeat:no-repeat; padding:50px0px0px0px;}#main{ background-color:#CCE8A7; float:left; width:650px;}#latest{ background-color:#CCE8A7; background:url(sample/tuijian.jpg)no-repeat; padding:50px0px0px0px;}#latestul{ padding:0px0px0px250px;}#leftpic{ padding:0px0px5px0px; float:left;}#leftpicimg{ height:136px; width:200px; margin:0px10px5px10px; filter:Alpha(Opacity=30,FinishOpacity=100,Style=1);}#list{ background:url(sample/sheying.jpg)no-repeat; padding:30px0px10px0px; clear:both;}#main#listimg{ height:150px; width:135px; margin:0px10px5px5px;}#main#listul{ list-style-type:none; padding:3px5px3px5px;}#main#listli{ text-align:center; float:left; margin:0px0px10px0px;}#footer{ text-align:center; clear:both; margin:0px; padding:0px;}（3）首页整体效果如图4：图4：网站首页整体效果图图4：网站首页