《环保》课程设计.docVIP

目录 设计主题…………………………………………………………………1 设计思路…………………………………………………………………1 设计过程概要……………………………………………………………1 详细设计方案……………………………………………………………1 4.1构思……………………………………………………………………2 4.2页面制作………………………………………………………………4 4.3按照上述方法分别作出其他的页面…………………………………10 4.4检查每个页面的浏览效果……………………………………………11 5、总结与体会………………………………………………………………11网站《环保》 设计主题 《环保》 设计思路 人类在经过漫长的奋斗历程后,在改造自然和发展社会经济方面取得了辉煌的业绩,与此同时,生态破坏与环境污染,对人类的生存和发展已构成了现实威胁。保护和改善生态环境,实现人类社会的持续发展,是全人类紧迫而艰巨的任务。因此,环境保护与实现可持续发展,是的任务。保护环境是实现可持续发展的前提,也只有实现了可持续发展,生态环境才能真正得到有效的保护,保护生态环境,确保人与自然的和谐,是经济能够得到进一步发展的前提,也是人类文明得以延续的保证。about.html”、 “blog.html”、 “donate.html”、“gallery.html”、“programs.html”。 四、详细设计过程 4.1构思 1．第一步就是构思，构思好了，需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来， 图4.1 2.根据构思图来规划一下页面的布局，图片大致分为以下几个部分： 1)顶部部分，其中又包括了LOGO、和图片；2)内容部分又可分为侧边栏、主体内容；3)底部，包括一些版权信息。 根据上图，画一个实际的页面布局图，说明一下层的嵌套关系DIV结构如下：│body {} /*这是一个HTML元素，具体我就不说明了*/└#Container {} /*页面层容器*/#Header {} /*页面头部*/#PageBody {} /*页面主体*/│ ├#Sidebar {} /*侧边栏*/│ └#MainBody {} /*主体内容*/└#Footer {} /*页面底部*/ 页面布局与规划已经完成，接下来开始书写HTML代码和CSS启动Dreamweaver CS3 2.创建站点 （1）单击“Dreamweaver站点”,出现“站点定义”对话框如果对话框显示的是“高级”选项卡，则单击“基本”出现“站点定义向导”的第一个界面，要求您为站点输入一个名称。在文本框中，输入一名称单击“下一步”出现下一个界面，询问您是否要使用服务器技术选择“否使用服务器技术”选项单击“下一步”出现下一个界面，询问您要如何使用您的文件选择标有“编辑我的计算机上的本地副本，完成后再上传到服务器”的选项单击单击“下一步”单击“完成”为了制作方便，先打开资源管理器，把要使用的图片images文件夹内进入页面编辑设计视图状态给页面头部分加入一个背景图片.header { background:url(../images/bg-header.jpg) repeat-x; height:125px; } .header div { margin:0 auto; overflow:hidden; padding:0 10px; position:relative; width:940px; } .header div a#logo { float:left; left:8px; position:absolute; top:44px; } .header div div { float:right; margin:0; padding:0; position:static; width:475px; } .header div div a { display:block; float:right; margin:0 19px 0 0; width:201px; height:58px; background:url(../images/interface.png) no-repeat 0 -67px; text-indent:-99999px; } .header div div a:hover { background:url(../images/interface.png) no-repeat 0 -126px; } .header div div ul { clear:both; list-style:none; m