北京化工大学北方学院.docx

北京化工大学北方学院.docx北京化工大学北方学院课程设计报告课程名称 应用软件实践 设计题目用DIV+CSS网页布局来设计一个商务类网站主页专业、班级 计科0803 学号 080202076 姓名 秦延凯 指导教师 段雪丽 设计时间 201195——、 引言(简要说明设计题目的目的、意义、内容、主要任务等)应用软件实践:用DIV+CSS网页布局来设计一个商务类网站主页商务网站是指一个企业、机构或公司在互联网上建立的站点,该站点主要是宣传企业形象,发布产品信息、宣传经济法规、提供商业服务。DIV+CSS是网站标准(或称“WEB标准”)中常用术语之一,div+css是一种网页的布局方法,这一种网页布局方法有别于传统的HTML网页设计语言中的表格(table)定位方式,可实现网页页面内容与表现相分离。CSS的极大优势表现在简洁的代码,对于一个大型网站来说,可以节省大量带宽。Dreamweaver可以用最快速的方式将Fireworks,FreeHand,或Photoshop等档案移至网页上。使用检色吸管工具选择荧幕上的颜色可设定最接近的网页安全色。对于选单,快捷键与格式控制,都只要一个简单步骤便可完成。Dreamweaver能与您喜爱的设计工具,如PlaybackFlash,Shockwave和***模组等搭配,不需离开Dreamweaver便可完成,整体运用流程口然顺畅。除此之外,只要单击便可使Dreamweaver自动开启Firework或Photoshop来进行编辑与设定图档的最佳化。利用Dreamweaver工具设计一个商务类网站主页,要想做出精美的网页一定要用到CSS。层叠样式表(CSS)是一系列格式规则,它们控制网页内容的外观。CSS样式使您可以控制许多仅使用HTML无法控制的属性。二、 正文(课程设计的主要内容,包括实验与观测方法和结果、仪器设备、计算方法、编程原理、数据处理、设计说明与依据、加工整理和图表、形成的论点和导出的结论等。正文内容必须实事求是、客观真切、准确完备、合乎逻辑、层次分明、语言流畅、结构严谨,符合各学科、专业的有关要求。)设计一个网页,首先要知道其结构以及方法,需要分析你的内容块,以及每块内容服务的FI的,然后再根据这些内容目的建立起相应的HTML结构,得到类似这样的儿块:标志和站点名称主页面内容站点导航(主菜单)子菜单搜索框功能区(例如购物车、收银台)页脚(版权和有关法律声明)我们通常采用DIV元素来将这些结构定义出来,类似这样:<divid=,,header></div><divid=,,content,,></div><divid=//globalnavz,></div><divid=z/subnav></div><clivid二〃search"〉</div><divid二"shop"></div><divid=/zfooterz,></div>这不是布局,是结构。这是一个对内容块的语义说明。当你理解了你的结构,就可以加对应的ID在DIV上。DIV容器中可以包含任何内容块,也可以嵌套另一个DIVo内容块可以包含任意的HTML元素…标题、段落、图片、表格、列表等等。ID的名称是控制某一内容块的手段,通过给这个内容块套上DIV并加上唯一的id,你就可以用CSS选择器来精确定义每一个页面元素的外观表现,包括标题、列表、图片、链接或者段落等等。例如你为#header写一个CSS规则,就可以完全不同于Content里的图片规则。嵌套的DIV元素允许你定义更多的CSS规则来控制表现,例如:你可以^#navcontainer一个规则让列表居右,再给#globalnav一个规则让列表居左,而给#subnav的list另一个完全不同的表现。部分层的说明:MARGIN是指层的边框以外留的空白,用于页边距或者与其它层制造一个间距。〃10px10px10px10px〃分别代表〃上右下左〃(顺时针方向)四个边距,如果都一样,可以缩写成"MARGIN:10px;\如果边距为零,要写成"MARGIN:Opx/oPADDING是指层的边框到层的内容之间的空白。和margin-样,分别指定上右下左边框到内容的距离。如果都一样,可以缩写成•'PADDING:Opx-。单独指定左边可以写成"PADDING-LEFT:Opx;n0PADDING是透明元素,不能定义颜色。BORDER是指层的边框,”BORDER-RIGHT:#CCC2pxsolid;”Cn,宽度为”2px“,样式为“solid"直线。如果要虚线样式可以用dotted"oBACKGROUND是定义层的背景。分2级定义,先定义图片背景,采用"url(../images/bglogo,gif)"来指定背景图片路径;其次定义背景色“#FEFEFE"。"no-repe