网页制作课程设计.doc

湖南工学院南校区经济与管理系电子商务网页制作课程设计课题名称： 网页制作课程设计 系 别： 经济管理系 专 业： 电子商务 姓 名： 全云杉 班级学号： 电商1003班 04号 指导老师： 李兴旺 完成时间： 2011年12月 湖南工学院2011年12月3.1页面布局设计6目录1、课程设计的目的与要求3 2、站点规划42.1需求分析42.2站点的创建及结构分析42.3网站风格分析52.4组织素材63、网站设计63.2素材处理 6四、网页制作74.1 首页制作 74.2 目录（标题）页制作一二级页面制作74.3 内容（文章）页制作一三级页面制作7五、网页测试、发布与维护85.1网页测试5.2网站发布于维护 8六、设计过程中遇到的问题及解决的办法 9七、设计感想9八、参考文献10九、致谢11一、课程设计的目的与要求通过实践更好地掌握网页制作知识，提到自己的动手能力。使学生掌握HTML语言的语法结构，能够使用HTML语言编写静态网页，控制网页中的文字，图片，超级链接，表格，表单，框架等，能够使用HTML语言实现移动的文字，制作多媒体页面，能够读懂复杂网页的源代码。熟练使用网页设计工具Frontpage、Dreamweaver MX，能够使用Dreamweaver MX设计网页的框架，进行表格布局，导航条，设置文字，图片，超级链接，滚动文字，弹出窗口的属性，能够使用Dreamweaver MX设计出比较复杂的网页，建立小型网站。熟悉Flash MX的绘图，帧，层，属性面板的使用，能够使用Flash MX制作简单的动画，设计网页的FLASH标题。掌握基于WEB的数据库应用，理解在B/S模式下网页如何同数据库之间建立联系，重点了解基于IDC和ASP两种方式以及各自的原理和运行环境，学会使用ASP的基本语法、内建对象、内建组件以及ASP访问数据库的方法，能够读懂并修改大型动态网站（ASP网站）的代码。 要求做到主题鲜明、内容充实；颜色清新、舒适、结构合理；导航清楚、栏目合理、层次分明、使用方便。学会设计和制作网站，包括完成设计报告，了解网站的软、硬件平台，会发布和维护一个实际的网站，熟练网页制作及相关工具（Adobe Photoshop，Macromedia DreamWeaver MX 2004，Macromedia Flash MX，Macromedia FireWorks MX）的使用，掌握Adobe Photoshop，Macromedia DreamWeaver MX，Macromedia Flash MX，Macromedia FireWorks MX软件的使用技巧，掌握相关行业的相关标准。设计10个页面以上。内含：用户注册，登录系统，留言系统、统计在线人数，设为首页、加为收藏等动态网页内容。二、站点规划2.1 需求分析网站的总体规划，是从总体上对网站的架构进行整体规划。因为只有这样，才能在网站的制作与维护中对网站的功能有一个清晰的把握。此外，做好网站规划，会对网站以后的功能扩展起到事半功倍的作用互联网丰富多彩，这些信息大多通过网页与用户进行交互。网页的实现形式多种多样，无论是短小精悍的个人主页，还是结构清晰、信息丰富的大型网站，网站的需求分析和规划设计都要放在第一步，因为它直接关系到网站的功能是否完善，质量是否能够达到保证。2.2 站点结构分析创建站点： 步骤1 进入Dreamweaver 8工作界面后，选择“站点”/“新建站点”命令弹出“未命名站点1的站点定义为”对话框。步骤2 在该对话框中的“基本”选项卡中的“ 您打算为您的站点起什么名字？”文本框中输入 hyfu步骤2 单击“下一步”按钮，在弹出的对话框中选中“是，我想使用服务器技术”，在“哪种种服务器技术？”下拉列表中选择“ASP VBScript”。步骤3 单击“下一步”按钮，在弹出的对话框中选择在开发过程中如何使用文件，这里选中“在本地进行编辑和测试”，在“你将把文件存储在计算机上的什么位置？”文本框中输入F: index步骤4 在弹出的对话框的“您应该使用什么URL来浏览站点的根目录？”中输入http:/localhost/index/ ,输完后，单击“测试URL”按钮。如果这时它提醒你URL前缀测试成功，点击“确定”按钮，你就可以进入下一步了，否则的话，你再按照前面的步骤检查站点出现的问题。步骤5 单击“下一步”按钮，在对话框中选择“否”。步骤6 单击“下一步”按钮，点击“完成”按钮即可完成本地站点的创建，这时，创建的站点就显示在“文件”面板中了2.3 网站风格分析“风格”是指站点的整体形象给浏览者的综合感受。这个“整体形象”包括站点的CI（标志，色彩，字体，标语）、版面布局、浏览方式、交互性、文字、语气、内容价值等等诸多因素。风格是有人性的，不管是色彩、技术、文字、布局，还是交互方式，只要能由此让浏览者明确分辨出这是本网站独有的，这就形成了网站的“风格”。一般都要求：清纯简洁，主题鲜明，内容编排得当合理、有一定的艺术感，美观、实用，相关链接正常，能体现网站的基本功能，可以从以下几个方面来为网站设计一个独特的风格。（1）网站标志（LOGO）LOGO是指网站的标志，标志可以是中文、英文字母，也可以是符号、图案等。标志的设计创意应当来自网站的名称和内容。比如：网站内有代表性的人物、动物、植物，可以用它们作为设计的蓝本，加以卡通化或者艺术化；专业网站可以以本专业有代表的物品作为标志。最常用和最简单的方式是用自己网站的英文名称作标志，采用不同的字体、字母的变形、字母的组合可以很容易制作好自己的标志。（2）网站色彩网站给人的第一印象来自视觉冲击，不同的色彩搭配产生不同的效果，并可能影响到访问者的情绪。颜色搭配是体现风格的关键。“标准色彩”是指能体现网站形象和延伸内涵的色彩，要用于网站的标志、标题、主菜单和主色块，给人以整体统一的感觉。至于其它色彩也可以使用，但应当只是作为点缀和衬托，绝不能喧宾夺主。例如IBM的深蓝色，肯德基的红色条型。一般来说，一个网站的标准色彩不超过3种，太多则让人眼花缭乱。适合于网页标准色的颜色有：蓝色，黄/橙色，黑/灰/白色三大系列色。一般以白色和黑色的背景网页最好做，颜色搭配最方便；亮色与暗色配合，最容易突出画面，如黑与白，红与黑，黄与紫；而近似的颜色的搭配，能给一种柔和的感觉，如墨蓝与淡蓝，深绿与浅绿。最好能给主页定一个主色调，不要搞得花花绿绿的。（3）设计网站字体和标准色彩一样，标准字体是指用于标志、标题、主菜单的特有字体。一般网页默认的字体是宋体。为了体现站点的“与众不同”和特有风格，可以根据需要选择一些特别字体。制作者可以根据自己网站所表达的内涵，选择更贴切的字体。需要说明的是：使用非默认字体只能用图片的形式，因为很可能浏览者的计算机里没有安装特别字体，他看到的只能是乱码，那么辛苦的设计制作便付之东流了。 （4）使用精炼有效的语言现代生活节奏加快，人们往往没有时间看大块文章。为了节约时间，在单位时间内获取最大量的信息，人们需要精练的信息，即信息精品，要用信息语言来表达信息内容。所谓信息语言是指以下公式：信息=基本事实数据描述专家观点。信息语言摒弃一切广告性词句、文学性修饰词句，不欢迎一切关于意义、重要性的过分渲染。尽量采用数字说话，欢迎定量描述，反对过多的定性描述，特别是无法形成准确概念的定性描述。用信息语言描述，任何信息都应该有出处，有时间，分类准确。当然，应当满足信息的时效性、准确性、完整性、精练性等固有的特点。在此特别注意的是，不要出现错别字、病句。（5）设计网站宣传语网站的宣传语也可以说是网站的精神、主题与中心，或者是网站的目标，用一句话或者一个词来高度概括。用富有气势的话或词语来概括网站，进行对外宣传，可以收到比较好的结果。2.4 组织素材（1）文字：下载或自己输入，还可以自己制作动态的艺术字（2）图片：包括静态和动态的图片，可以从别处拷贝，粘贴。或用Photoshop自己制作。（3）链接资源的网址三、网站设计3.1 定义站点Web站点是一组具有如相关主题、类似的设计、链接文档和资源。Dream weaver MX 2004是一个站点创建和管理工具，使用它不仅可以创建单独的文档，还可以创建完整的 Web 站点。创建 Web 站点的第一步是规划。为了达到最佳效果在创建任何 Web 站点页面之前，应对站点的结构进行设计和规划。决定要创建多少页，每页上显示什么内容，页面布局的外观以及页是如何互相连接起来的。3.2 页面布局设计网页的布局设计，就是指网页中图像和文字之间的位置关系，简单来说也可以称之为网页排版。网页布局设计最重要的目的就是传达信息。一个并不能阅读的网页只能变成一个无用的链接。分割、组织和传达信息并且使网页易于阅读、界面具有亲和力和可用性是网页设计师应有的职责，只有这样，浏览者才有更好的机会找出吸引他的东西。可以通过框架、表格、层来进行布局。3.3 导航条设计由首页、珍珠、钻石、红蓝珠宝、留言板和珠宝玉石的佩戴及保养组成3.4 素材处理首页素材的采集：我们这里所说的素材，包括制作首页所需的文字、图片、动画甚至声音、影像等多媒体文件，这是制作图文并茂的网页所不可缺少的点缀。 文字资料的采集：主要是自己编写或是通过对报刊杂志和光盘等传统媒体及网络，获取与首页主题有关的资料，加以整理及编辑。图片资料的采集：在页面中嵌入适量的图片，可以让页面更为吸引人。我们一般可以根据首页的主题选择合适的素材库光盘，或是直接从internet获取。 其他资料的采集：为了增加网站表现力，可以在页面内适度加上音乐（建议使用midi格式，体积较小，便于传输）、视频文件，或者是java以点缀页面。但切记不可滥用，以免影响主页的浏览速度。然后将采集下来的图片用Photoshop进行美化加工。四、网页制作4.1 首页制作首先，创建一个模板，对齐进行表格布局，在页面插入一个四行一列的表格，在第一行插入标志图片，在第二行插入导航条，首页，珍珠，钻石，翡翠，红蓝宝石，留言板，珠宝玉石的佩戴及保养，第三行插入可编辑区域，第四行插入图片和相应文字内容，保存模板即可。4.2 目录（标题）页制作一二级页面制作单击已创建好的模板，选择从模板新建文件，在首页的可编辑区域中插入表格，在表格中插入珠宝的类型，样式的图片（如项链，戒指，手链，挂件，耳环，耳钉等），输入相应的文字加以解释说明，再合适的地方插入表单，设置会员登录区，使首页看上去主题鲜明、内容充实；颜色清新、舒适、结构合理；导航清楚、栏目合理、层次分明、使用方便。4.3 内容（文章）页制作一三级页面制作 将事先收集的图片文字进行排版，在合适的地方添加内容。将创建好的页面进行超链接，对导航条进行修改，在该对话框中将导航条一一进行链接即可。五、网页测试、发布与维护5.1 站点整理按栏目整理网站的资料：不仅方便制作工作，提高制作效率，也可以避免网站内容散乱，丧失针对性。按栏目整理资料可使您准备及时发现网站内容的缺失及保持网站结构的平衡。 资料要清晰完整，按栏目名称相应建立文件夹,每一个文件夹内放相应的文字及图片资料。5.2 网页测试将制作好的页面进行预览测试在对网页进行调试的时候，发现了一个严重的问题！由于网页是用表格进行布局的，我们在自己的电脑上运行后的样子和在机房运行后的样子出现了差别。经过仔细研究，发现是分辨率的不同引起的！我们自己的电脑上的分辨率比机房里的电脑设置的分辨率要高，所以在机房里打开网页后就感觉有点不正常！后来，我们把机房电脑的分辨率设置与自己电脑一样的分辨率，就达到了同样的效果。但是这是个治标不治本的办法，我们觉得要彻底解决这个问题，应该要用到DIVCSS的网页布局，由于我们尚未得掌握此项技术，所以这个问题也只能暂时治标了。主页的测试主要包括三方面的测试：一个是测试页面的html语法合法性，以保证技术上的正确性。一般采用工具软件，如html.validator等，都可以对页面进行快速而准确地测试，有的软件还能给你提出修改的方法和建议；一个是测试页面浏览的兼容性，以确保页面在使用不同的浏览器浏览时都能正常显示，我们可以借助工具软件browser来完成这项测试（dream weaver提供页面在ie和navigator的预览功能）；最后一个是测试主页的链接是否正常，是否存在断链。5.3 站点发布与维护首页的制作和维护，并不是一件一劳永逸的事，不断的更新和长期的维护才能使你的个人主页具有生命力。在主页的更新和维护中，应注意保持原有主页结构和风格的一致，特别是页面风格的一致，最有效的方法就是充分利用html编辑软件提供的模板功能，创建一套随时可供调用的页面模板，简化页面更新和维护的工作量。（1）在本地计算机中打开IIS，选中“默认网站”并右击，选择“属性”选项，打开“默认网站属性”对话框。分别在“网站”、“主目录”、“文档”选项卡上进行设置,IP地址设置为“完全未分配”、本地路径为“F:yang”、默认文档为“index.html”置于序列顶部。（2）关闭IIS服务器设置窗口。打开浏览器，并在地址栏中输入本地计算机的地址http：/local host，测试浏览器显示该网页。（3）在dream weaver CS3中提供了站点上传的功能，利用这个功能进行站点上传。（4）站点上传完成后，本地站点结构已完整地复制到左侧的“远端站点”窗口中了。当然也可以在网上申请免费网络空间，将网站上传到所申请的网络空间上发布。（5）网站发布已成功。六、设计过程中遇到的问题及解决的办法在本次网页设计中，我不仅学到了很多关于网页设计方面的知识，也从中学会了关于网络、编程等方面的知识。我从最初开始运用FrontPage设计网页，到后来运用Dreamweaver、Photo shop等网软件设计网页，完善网页。还掌握了在网页中添加了flash动画，在这个过程中，我通过自学教材、上网查询，学习了Dreamweaver、Photoshop等网页软件的应用，学会了管理、维护自己的站点，以及一些简单动画、控件的制作等等。在设计过程中也出现了很多的问题，但通过看书，上网查询，请教老师等方式，不断的学习、解决、提高，设计出的网页不论是外观还是内容，都在不断的进步、改善。可以说在自己动手，不断实践的过程中，网页设计水平得到了很大的提高。此次网页设计涉及到html ,javascript,css等编程语言技术方面的知识，我们意识到只有综合运用多种知识，才能设计出动感十足，富于个性的web页面，才能全面展现互联网这一新型媒体的独特魅力和超强功能。通过这次设计，我发现一个很普遍的问题：我们往往是眼高手低，学习这些知识时觉得它就是小菜一桩，但现在真的验证了“看花容易绣花难” 这句话，当我们着手实践时就不像我们想象中的那么简单了，每一个细节都需要注意，稍有不慎页面就在预览中变了样，因此更需要我们细心和耐心地去完成，也就两个字概括认真，只有认真对待才会从骨子里学到东西，才学到心里去了。七、设计感想网上购物系统无论是在开发过程中，还是建成后的日常维护过程中，都需要进行严格的检测，以保证购物系统的服务质量。 网上购物系统首先要把握好商品质量和宣传内容环节，其次要经常对其服务功能进行检测，第三，网上购物系统服务要注重产品的配送。快速迅捷的配送系统能保证用户购买的商品及时送达，在用户心目中树立良好的企业形象，增强用户对网上购物的信心。随着网上购物系统技术的日趋成熟、网上购物的优势日趋明显，会有更多的人参与到网上购物的浪潮中来，人类最终将迎接电子商务时代的来临。目前基于该模式的系统处于尝试运行阶段,还存在许多问题与不足,如安全性能还不完善,缺少网上支付认证加密系统等。因此在今后的工作里,这些功能与技术还需要加以提高和实现。通过这次实践，我更切身的体会到一个网站的建设是需要具备多种知识，掌握多种技巧才能实现的。一个好的网站的建设更要开发者具备独特的创意、协调的美工。而开发者在制作工作的熟悉以及相关语言的精通这两方面的能力更是至关重要的。对于我本人，在网站制作这一块还存在很多的不足之处，只能通过以后不断努力来提升自己的水平。但是，通过这段时间对此网站的探索和制作，我巩固了我的专业知识和专业技能，我对的电子商务这一专业的