网页设计报告

电商2班201341440222李彪-1-网页设计报告姓名：李彪学号：201341440222班级：13级电子商务2班电商2班201341440222李彪-2-目录一、设计目的二、课程设计题目及描述.1．设计要求2．描述三、网站设计思想四、网站设计思想和详细设计分析1．网站整体结构规划思想2．主页设计思想与代码分析3．子页设计思想与代码分析3.1子页——关于学校3.2子页——学校新闻3.3子页——学院活动3.4子页——院系设置3.5子页——人才招聘五、设计总结1.心得体会2.展望电商2班201341440222李彪-3-一、设计目的随着网络技术的发展与互联网的普及，网站建设与网页制作越来越成为各行各业以及个人宣传自己的有利工具，网站在当今时代被越来越多的人用来宣传。1、通过综合实训进一步巩固、深化和加强我们的理论知识与专业技能。掌握规划动态网站的内容结构、目录结构、连接结构的方法，让我们熟练掌握动态网页制作软件和基本操作和使用技能，页面的整体控制和头部设置的方法。2、运用Dreamweaver完成网站建设任务的方法，能独立设计一个内容完整、技术运用得当的网站；3、在网页设计的实践中培养分析问题、解决问题的能力，培养协作、交流的能力，培养创新能力和团队意识；4、作为学生学习这门课程的阶段性总结，使学生复习、巩固所学过的理论，并予以适当的深化，进一步训练我们的基本技能。二、课程设计题目及描述动态网站的课程设计要求网站的风格要与所建网站的主题相协调，而且还要突出独特之处，充分体现网站的价值，既要追求人性化也要具有个性化的特点。本人这次设计的是校园网站。1．设计要求（1）整个课程设计的各个环节都要求自己动手，认真完成网站设计与制作；（2）确定的网站主题应大小适中、内容健康、具有时代气息，具有一定的代表性；（3）网站提供的信息应与网站主题相符合；（4）网站LOGO与网页风格应该协调一致，网站结构应层次分明，内容重点突出；（5）对课程设计进行总结，撰写课程设计报告；（6）设计时限为1个星期。2．描述电商2班201341440222李彪-4-我本次主要是设计的以学校网站为主题的网页，针对学校的布局及发展做了介绍。三、设计思想1.在设计中主要用的技术利用Dreamweavercs5、Photoshopcs5、Flash5.0制作一个关于学校简介的网站，利用表格、行为、层和链接等网页设计技术设计页面。2.网页主要的页面分本网站以新加坡旅游为素材，主要讲解了与学校相关的内容。首页设整体介绍，子页面设5个栏目。具体结构如图1.1所示。首页关于学校学校新闻学院活动院系设置人才招聘三、网页详细设计分析3.1建立布局在这次的网页设计中用到大量的布局，所以怎么样建立布局是关键。Dreamweavercs3是大多数人设计网页的称手兵器，也是众多入门者的捷径。特别是其在布局方面的出色表现，更受青睐。大家都知道，没有表格的帮助，很难组织出一个协调合理的页面。1.点击“ALT+F6”键，进入布局模式，插入布局表格。建立一个大概的布局。2.使用背景图片：选中该项，按浏览可以插入一幅准备好的图片作为表格的背景，因为图片是以平铺的形式作为表格背景，所以表格大小和图片尺寸都要控制好。3.2网页中的图像图像传输是的真正魅力所在，它与文字相比具有显著的优点：一是直观，人眼观看图像时接受信息的速度远远超过观看文字时接受信息的速度；二是能更电商2班201341440222李彪-5-清楚地表达细节内容。正是由于这些优点，所以在进行网页设计时图像很受欢迎。如果网页做得像一幅风景画，浏览者一定会流连忘返（如果图片很大，效果会适得其反）。图像文件的格式有几十种，如GIF、JPEG、BMP、EPS、PCX、PNG、FAS、TGA、TIFF、WMF等，现在InternetExplorer和Netscape支持的、最常用的图像格式是GIF、JPEG和BMP。3.2.1在网页中插入图像利用Dreamweavercs3可以方便地在网页中插入图像，还可以设置图像边框、大小、和位置，并且可以直接对图像进行编辑。在网页中加入图像的操作非常简单：1.新建一个空白网页，把光标定位在网页的开始位置。2.打开“工具”菜单，选择“图片”菜单项，在子菜单中选择“来自文件”菜单项，或者单击工具栏中的图片工具图标，弹出一个“图片”对话框。3.在此对话框中单击“浏览”按钮，出现一个“选择文件”对话框。4.在“选择文件”对话框的文件列表中选择某个图像文件，然后单击“确定”按钮，或直接双击该图像文件，该图像即被加入到网页中。在网页中插入图像后我们就可以对图像的各种属性进行设置了。3.2.2图像的各种属性设置1.选中所插入的图片，单击鼠标右键，弹出一个快捷菜单，在菜单中选择“图片属性”菜单项，出现一个“图片属性”对话框.2.打开“外观”选项卡。(1)设定图像边框粗细：在“外观”选项卡的“布局”栏里可以根据需要定义图像的边框，也可以定义边框值为“0”，即无边框。(2)设置图像环绕方式：一般情况下一幅图像只能与一行文字处在同一高度，但有时需要将图像和文字分开，且两者互不影响。比如在网页左边插入一幅图像，要求右边的文字就像没有图像时可以多行输入，这就要通过设置图像的环绕方式来实现。在网页中图像的环绕方式有两种：①左环绕：图像在左边，文本在图像的右边进行环绕。②右环绕：图像在右边，文本在图像的左边进行环绕。在“外观”选项卡的“布局”栏中打开“对齐方式”下拉列表框，选择“左”选项，电商2班201341440222李彪-6-并单击“确定”按钮，图像就被设置为左环绕方式，同样，如果选“右”，图像就被设置为右环绕方式。(3)编辑图像大小：在Dreamweavercs5中，当在网页中加入一幅图像后，图像大小默认设置为其原来的大小，如果加入的图像太大或太小，或有其他特别需要，就得调整图像的大小。调整图像大小非常简单灵活，只要你选中加入的图像，用鼠标左键拖动图像边框，可任意调整图像的宽度和高度直到达到你满意的尺寸。(4)设置图像缩放比例：网页设计的一个重要原则就是网页的兼容性，对于不同的浏览器或者不同的分辨率，不管是800×600的窗口，还是1024×768的窗口，网页都要能正常的显示。设置图像缩放比例就是将图像设置为大小可以按比例变化，与浏览器的大小成一固定比例，这样在不同大小的浏览器窗口里图像都能正常的显示外观。设置图像缩放比例的步骤如下：1.选中网页中的图像，单击鼠标右键，在弹出的快捷菜单里，选择“图像属性”菜单项，弹出一个“图像属性”对话框.2.在“大小”栏中选中“指定大小”复选框，同时选中“宽度”和“高度”下面的“百分比”单选按钮，然后在“宽度”和“高度”栏里输入想显示的比例，单击“确定”完成设置。外还可以在“外观”选项卡的“水平间距”和“垂直间距”栏里进行设置，水平间距是指图像与周围元素在水平方向的间距，以象素为单位；垂直间距指图像与周围元素在垂直方向的间距。3.2.3怎样编辑网页中的图像在Dreamweavercs3中，可以使用“图片”工具栏中的各种工具对网页中的图像进行编辑，编辑功能主要有：图像旋转和翻转、剪裁、图像淡化、凹凸效果等等。另外，为了使图片更符合要求，我们还在photoshopcs3中队所用的图片进行了处理，使得图片看起来更加精细美观，符合我们的主题要求。3.2.4使用背景图像电商2班201341440222李彪-7-使用背景图像与使用背景色不同，使用背景色只将网页的背景用某种颜色填充，而使用背景图像则是将网页的背景用图像平铺。这样做可以使制作的网页更美观好看。网页中使用背景图像的具体步骤如下：1.新建一个空白网页。2.单击鼠标右键，弹出的快捷菜单里选“网页属性”，弹出“网页属性”对话框.3.开“背景”选项卡。4.在“背景”选项卡的“格式”栏中选中“背景图片”复选框，然后单击下面的“浏览”按钮，出现一个“选择背景图片”对话框。5.在“选择背景图像”对话框中单击“浏览文件”按钮，出现一个“选择文件”对话框。6.在“选择文件”对话框的文件列表中选择图像文件，单击“确定”按钮。这样，所选图片将作为整个网页的背景，如果在第4步时同时选中“水印”复选框，背景图片将显示为特殊的水印效果，当网页滚动时，背景不动，只有网页内容滚动，产生一种透明层的效果，非常吸引人。3.2.5插入flash动画关于Flash视频使用Dreamweaver中的“插入Flash视频”命令，可将Flash视频内容插入Web页面，而无需使用Flash创作工具。该命令可以插入Flash组件；当您在浏览器中3.2.6设置鼠标经过图片，进行图片交互再插入图片的下拉菜单中有一项是“鼠标经过”，点击这一项，会弹出一查看它时，它显示所选择的Flash视频内容以及一组播放控件。个对话框，在对话框中可以设置鼠标经过前的图片和经过时的图片，选择“确定”即可。3.2.7设置链接选中图片或者文字，在下面的链接属性中输入所要连接到的地址，同时，下方的目标属性被激活，输入blank设置成在新窗口中打开网页。我们设置电商2班201341440222李彪-8-了链接本站点的网页页面，同时也连接了外网，使得大家访问页面时能够查询更多详细的信息，方便用户查询。四、1.网站首页效果图如下：2.主页设计思想主页依照合理、简约、美观的概念去整体布局，思路清晰，简单明了。让用户一进入主页就有种宾至如归的感觉。这部分的代码如下!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN=电商2班201341440222李彪-9-headmetahttp-equiv=Content-Typecontent=text/html;charset=utf-8/title阜阳师范学院/titlelinkhref=css/style.cssrel=stylesheettype=text/css/scriptsrc=js/setHomeSetFav.jstype=text/jscriptcharset=gb2312/scriptscriptsrc=js/myfocus-2.0.1.min.jstype=text/javascript/scriptscriptsrc=js/mf-pattern/mF_YSlider.jstype=text/javascript/scriptlinkhref=js/mf-pattern/mF_YSlider.cssrel=stylesheettype=text/css/scripttype=text/javascriptmyFocus.set({id:'picBox'})functiontext(){alert('Welcometo阜阳师范学院！');}/script/headbodydivid=topdivclass=top_contentullionclick=text()ahref=#联系我们/a/lilionclick=text()ahref=#加入收藏/a/li电商2班201341440222李彪-10-lionclick=text()ahref=#设为首页/a/li/ul/div/div!--top结束--divclass=wrapdivclass=logodivclass=logo_leftimgsrc=imaegs/logo.jpgalt=阜阳师范学院//divdivclass=logo_rightimgsrc=imaegs/tel.jpgalt=服务热线/24小时服务热线：spanclass=tel[phone]/span/div