网页开发技术课程设计说明书

《网页开发技术课程设计说明书》由会员分享，可在线阅读，更多相关《网页开发技术课程设计说明书（13页珍藏版）》请在装配图网上搜索。

1、 . . . 网页开发技术课程设计说明书摘 要信息技术是一个划时代的技术革命,它正在对整个社会各方面的发展起着深刻的影响。这个遍地是黄金的互联网里,每一类型的都是富矿,个人也不例外。为了更好地利用网络资源,使我们的信息电子化也为了能与世界各地进行广泛地交流丰富我们的知识和视野。随着社会观念的更新,个人也随之以不可思议的速度出现在Internet之上,很多电脑爱好者根据自己的情况和爱好做出了个人。个人以后就成为了我们个人件,特别是我们在去找工作,就没有必要带厚厚的简历,只要把我们自己的平时维护好。记录了我们平时的学习成绩、个人奖励情况、个人的工作经验还有自己的特长介绍和自己的作品,让人知道我们的

2、网址就把所有的事情办了。随着现代计算机科学的发展,网络已经越来越普及,如今网络已经成为每个人生活的一部分。同时网络也提供了一种很好的信息交换平台,而个人主页是一个可以在网络上展示个人信息的方便手段。本文通过使用Dreamrweaver CS5开发个人。建立了一个以NBA为主要容的信息,供广大网友检索浏览NBA相关信息。关键字: Dreamrweaver；NBA；CSS样式目录一、建设意义和目的3二、规划42.1主题风格41页面整体布局42导航条的设置43正文的框架设置42.2标志52.3特点52.4 工具5三、建设步骤63.1目录结构63.2结构83.3首页93.4.数据页面93.3资讯页面1

3、0四、测试10五、参考文献11六、课程设计总结11一、建设意义和目的网络在中国的发展是非常迅猛的,随着信息网络技术的应用,我们每一个人都感应到了网络给我们的工作、学习、生活等许多方面都带来了更多的方便、快捷,对于人性化的诠释达到了淋漓尽致,企业的经营观念、个人的生活观念都在发生着根本的变化。目前许多政府机关、学校、企事业单位已建立自己的。为了宣传自己和传递信息,建设自己部门的已经是迫切需要。因此,需要通过一个有着界面友好,视觉效果美观,方便易用的来宣传网页,方便他人了解查阅。通过,全面宣传,展示网页的风采与特色,给用户提供需要的容、而且还应该做更多的事情、完成比页面浏览更高层次的需求,例如收集

4、信息,数据存储,数据修改以及数据删除等。二、规划2.1主题风格1页面整体布局首先要考虑整个网页的长和宽,以及长度和宽度之间的比例。本次设计中网页宽1024像素,长由每个部分的容不同而设置。表格三行一列,居中设置,第一行放头图片,第二行是导航栏,第三行主页容,第四行放置和地址等容。2导航条的设置导航栏的设置既是在上面第二行出插入一个一行十三列的表格,容包括首页、动态、健身、文章欣赏等。3正文的框架设置在浏览了很多精美之后,再结合自己的想法,先在草纸上画出了大体的栏目和板块。的整体风格和创意：建立一个清新、朴素的,目的是使浏览者留下映像。2.2标志2.3特点1讨论主题：建立一个关于NBA的,其中有

5、关于NBA赛事、明星、球队等信息。2定位CI形象：最重要的就是与浏览者产生共鸣。于是在网页设计上面,要淡到浏览者最关心的话题。3材料收集,网上搜一些网页背景,FIASH源代码、小图标和一些gif的动画等。2.4 工具Dreamweaver、 Photoshop、Flash、Fireworks等。实现本设计已具备的条件CPU：Intel Pentium4或AMD Athlon 64处理器存：512MB存,推荐使用1GB以上存。硬盘空间：1GB可用硬盘空间用于安装；安装过程中需要额外的可用空间无法安装在可移动闪存设备上。显示器16位显卡,1280800像素的显示分辨率。光盘驱动器： DVD-ROM

6、驱动器。计算机：Microsoft Windows XP带有Service Pack2,推荐Service Pack3；Windows Vista Home Premium、Business、Ultimate或Enterprise带有Service Pack1；或Windows 7。软件：Dreamweaver MX 2004、Photoshop CS3、Flash CS3、Fireworks CS3,使用IIS浏览网页效果。技术资料：使用Dreamweaver MX 2004编写ASP VBScript动态,来确定网页的布局、栏目和板块,编写后台管理的一系列的代码,后面有相关的代码介绍。Ph

7、otoshop CS3用来制作及修改图片,通常与FireworksCS3、Flash CS3结合使用,FireworksCS3只要是用来制作gif格式的动画,而Flash CS3完成动画更完美一些。在编写网页时通常用到JavaScript脚本和VBScript脚本,是为了网页的美观或要实现某种特殊功能,编写代码时可也采用记事本,然后在网页代码相应的位置插入。 三、建设步骤3.1目录结构图1 导航结构图定义站点的操作步骤如下： 1在Dreamweaver 8主窗口中,单击菜单站点新建站点,将弹出如图17-6所示站点定义对话框。在该对话框中先输入站点的名称,然后输入网址,如图17-6所示。接着单击

8、下一步按钮,进入到下一步操作。 2选择否,我不想使用服务器技术单选按钮,然后单击下一步按钮,进入到下一步操作。 3选择编辑我的计算机上的本地副本,完成后再上传到服务器推荐单选按钮,接着在下面的文本框中输入站点文件在本地计算机上的存放位置,也可以选择存储位置,然后单击下一步按钮,进入到下一步操作。 4选择连接到远程服务器的方式为FTP,然后分别输入Web服务器的主机名、在服务器上文件的存储位置、FTP用户名、FTP密码等参数,如图17-7所示。然后单击下一步按钮。 5选择否,不启用存回和取出单选按钮,如图17-8所示。接着单击下一步按钮,此时会显示所定义的站点信息。如果发现有误可以单击上一步按钮

9、,返回到上一步操作的对话框中重新修改。如果站点定义信息符合要求,可以单击完成按钮,完成站点的定义。 此时会自动显示文件面板,并且会自动切换到新创建的。3.2结构图1 结构3.3首页图3 首页框架结构图3.4.数据页面图4 数据页面框架结构图3.3资讯页面文本、图像插入、音乐插入、动画多媒体插入页面、表格页面布局、CSS样式、层、框架、模版和库、表单图5 资讯页面框架结构图四、测试测试：一个包含很多,可能会出现错误或断链现象,在发布站点前有必要检查整个站点的,以避免站点发布之后出现无效情形。利用Dreamweaver 8提供的检查可以检查中存在断链、孤立文件等。 检查无误后,可以在浏览器中浏览各

10、个网页,检查文字、图片、是否有误、是否会出现乱码,网页元素定位是否准确,浏览速度和视觉效果是否满意。经过测试、修改、再测试、再修改,反复多次循环,直到各方面都合格方可发布。 3.10 发布 发布就是把网页文件上传到Web服务器,发布之前先必须申请一个主页空间,拥有网页空间的访问域名、FTP用户名和密码。如果主页空间已成功申请,可以先与远程Web服务器进行连接,连接成功后,再通过单击文件面板上的上传文件按钮,往远程Web服务器中上传本地站点,上传成功后,就可以在浏览器中输入正确的网址访问了。整体流程：一、 制作者测试：页面和功能二、 全面测试 三、 发布测试测试的主要方面： 一、功能测试 1、测

11、试 测试所有是否按指示的那样确实到了该的页面 测试所的页面是否存在测试的正确性的工具 2、表单测试 3、Cookies测试 4、设计语言测试 5、数据库测试 二、性能测试：连接速度测试、负荷测试和压力测试1、连接速度测试 2、负载测试 3、压力测试 三、接口测试 1、 服务器接口 2、 外部接口 3、错误处理 四、可用性测试 1、导航测试 2、图形测试 3、容测试 4、整体界面测试 五、兼容性测试 1、平台测试 2、浏览器测试 3、视频测试 4、Modem/连接速率测试 5、打印机测试 6、组合测试 六、安全测试 Web应用系统的安全性测试区域1、 目录设置 2、登录 3、Session 4、

12、日志文件 5、加密 6、安全漏洞 七、代码合法性测试 1、程序代码合法性检查 2、显示代码合法性检查 八、 文档测试：能够测试多种数据库的性能五、参考文献1胡崧. HTML 从入门到精通M.：中国青年,2007. 2选辉.网页设计与制作教程M.：清华大学,2009.3王诚君,振华,郭竑晖,高.Dreamweaver 8 网页设计应用教程M.：清华大 学,2007. 4光明,蕾,余辉.中文Dreamweaver 8 网页设计与实训教程M.：冶金工业出版 社,2006. 5铭建,慧,乔孟丽,康梅娟.网页设计与制作M.东营：中国石油大学,2007. 6祖荫,王云翔,胡耀芳.网页设计与制作教程M.：清

13、华大学,2008. 7雁青,聪. Photoshop 经典作品赏析M.：海洋智慧图书,2002. 7怒涛. Photoshop 平面设计图像处理技法M.：清华大学,2003. 8 笑. Dreamweaver 8,Photoshop CS 2,Flash 8 网页制作实用教程M.：清华大 学,2006. 9强,晓娜,黄艳.JavaScript 从入门到精通M.：清华大学,2008. 六、课程设计总结生活中我每天上网都要接触到网页,原来没有留意过网页的设计,但是经过这段时间的学习了解,现在我打开一个网页都会习惯性的先看看排版、布局和色彩运用,以及里的特效代码。渐渐的我觉得这也没有多神奇了。通过半

14、年的课堂学习,我大体掌握了网页设计的基本方法,例如：1、命名站点或者文件夹的的时候一定要注意,最好用相应的英语或者汉语拼音,要见名知意,如图片文件夹用images,这样可以避免页面调用时不正确的现象发生。2、虽然不同的方法达到的效果看似一样,但实际上产生的HTML代码则完全不同。在这个过程中,我同样认识到网页设计不是一门学科的独秀,而是多种课程的综合,它是Flash、Photoshop等网页软件的综合应用。例如Swftext软件提供了功能齐全的flash制作工具。3、网页设计布局一般为三行一列,主题955600像素,导航栏200像素,声明部分占50-70像素。这样网页设计部较合适,符合人们的审美观。针对我所学的网页设计,网页布局、图形创意等方面都很重要,对于网页设计作为一种视觉语言,特别讲究编排和布局,虽然主页的设计不等同于平面设计,但它们有许多相近之处,版式设计通过文字图形的空间组合,表达出和谐与美。不积跬步,无以至千里,师傅领进门,修行在个人。我已经在老师的指引下迈入了网页设计的大门,在今后的闲余时间继续认真学习制作网页的更多知识以实现自身技能的提高。网页开发技术课程设计题目: NBA信息网 学院: 理学院 专业、年级： 15级信计 : 马强 学号: 1509540125 指导教师: 王岚 时间: 2017 年 秋季 学期13 / 13