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

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

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

2、的特长介绍和自己的作 品，让人知道我们的网址就把所有的事情办了。随着现代计算机科学的发展，网络已经越来越普及，如今网络 已经成为每个人生活的一部分。同时网络也提供了一种很好的信息交 换平台，而个人主页是一个可以在网络上展示个人信息的方便手段。 本文通过使用Dreamrweaver CS5开发个人网站。建立了一个以 NBA 为主要内容的信息网站，供广大网友检索浏览 NBAffi关信息。关键字：Dreamrweaver; NBA网站；CSS羊式目录一、网站建设意义和目的 3二、网站规划 32.1 网站主题风格 3.（ 1）页面整体布局 3（ 2）导航条的设置 4（ 3）正文的框架设置 42.2 网

3、站标志 4.2.3 网站特点 4.2.4 网站工具 5.三、网站建设步骤 63.1 网站目录结构 6.3.2 网站链接结构 7.3.3 网站首页 8.3.4.数据页面 8.3.3 资讯页面 9.四、网站测试 9五、参考文献 11六、课程设计总结 12一、网站建设意义和目的网络在中国的发展是非常迅猛的， 随着信息网络技术的应用， 我们每一个人 都感应到了网络给我们的工作、 学习、生活等许多方面都带来了更多的方便、 快 捷，对于人性化的诠释达到了淋漓尽致， 企业的经营观念、 个人的生活观念都在 发生着根本的变化。目前许多政府机关、学校、企事业单位已建立自己的网站。 为了宣传自己和传递信息， 建设自

4、己部门的网站已经是迫切需要。 因此，需要通 过一个有着界面友好， 视觉效果美观， 方便易用的网站来宣传网页， 方便他人了 解查阅。通过网站，全面宣传，展示网页的风采与特色，给用户提供需要的内容、而 且还应该做更多的事情、 完成比页面浏览更高层次的需求， 例如收集信息， 数据 存储, 数据修改以及数据删除等。二、网站规划2.1 网站主题风格（1）页面整体布局首先要考虑整个网页的长和宽， 以及长度和宽度之间的比例。 本次设计中网 页宽 1024 像素，长由每个部分的内容不同而设置。表格三行一列，居中设置，第一行放头图片，第二行是导航栏，第三行主页内容，第四行放置版权和地址等 内容。（2）导航条的设

5、置导航栏的设置既是在上面第二行出插入一个一行十三列的表格，内容包括首页、动态、健身、文章欣赏等。（3）正文的框架设置在浏览了很多精美网站之后，再结合自己的想法，先在草纸上画出了大体的 栏目和板块。网站的整体风格和创意：建立一个清新、朴素的网站，目的是使浏 览者留下映像。2.2网站标志2.3网站特点（1 ）讨论网站主题：建立一个关于 NBA的网站，其中有关于NBA赛事、明星、球 队等信息。（2） 定位网站CI形象：网站最重要的就是与浏览者产生共鸣。于是在网页设计 上面，要淡到浏览者最关心的话题。（3） 材料收集，网上搜一些网页背景，FIASH源代码、小图标和一些gif的动 画等。2.4网站工具D

6、reamweave、Photoshop、Flash、Fireworks 等。实现本设计已具备的条件（说明已具备的软硬件设备，包括计算机和软件、相关 技术资料）CPU:Intel Pentium4 或 AMD Athlon 64 处理器内存：512MB内存，推荐使用1GB以上内存。硬盘空间：1GB可用硬盘空间用于安装；安装过程中需要额外的可用空间（无法安装在可 移动闪存设备上）。16位显卡，1280 800像素的显示分辨率。光盘驱动器：DVD-ROM驱动器。计算机：Microsoft Windows XP （带有 Service Pack2，推荐 Service Pack3 ）; Win dow

7、sVista Homeremium Busin ess、Ultimate 或 En terprise （带有 Service Pack1）；或 Windows 7。软件：Dreamweaver MX 2004 Photoshop CS3 Flash CS3、Fireworks CS3，使 用IIS浏览网页效果。技术资料：使用DreamweaverMX2004编写ASP VBScript动态网站，来确定网页的布 局、栏目和板块，编写后台管理的一系列的代码，后面有相关的代码介绍。Photoshop CS3用来制作及修改图片，通常与 FireworksCS3、Flash CS3结合使 用，Firew

8、orksCS3只要是用来制作 gif格式的动画，而 Flash CS3完成动画更 完美一些。在编写网页时通常用到JavaScript脚本和VBScript脚本，是为了网页的美 观或要实现某种特殊功能，编写代码时可也采用记事本，然后在网页代码相应的 位置插入。三、网站建设步骤3.1网站目录结构图1导航结构图定义站点的操作步骤如下：(1) 在Dreamweaver 8主窗口中，单击菜单【站点】【新建站点】，将弹出如 图17-6所示站点定义对话框。在该对话框中先输入站点的名称，然后输入网址， 如图17-6所示。接着单击【下一步】按钮，进入到下一步操作。(2) 选择“否，我不想使用服务器技术”单选按钮

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

10、返回到上一步操作的对话框中重新修改。 如果站点定义信息符合要求，可 以单击【完成】按钮，完成站点的定义。此时会自动显示“文件”面板，并且会自动切换到新创建的网站3.2网站链接结构审塔 w图1链接结构3.3网站首页图3首页框架结构图3.4.数据页面logo联題心式畧人室礎1側*人图4数据页面框架结构图3.3资讯页面（文本、图像插入、音乐插入、动画多媒体插入页面链接、表格页面 布局、CSS羊式、层、框架、模版和库、表单）logo惡亦导Aft栏室吋京讯ARC HIVB图5资讯页面框架结构图四、网站测试测试网站：一个网站包含很多链接，可能会出现链接错误或断链现象，在 发布站点前有必要检查整个站点的链接

11、，以避免站点发布之后出现无效链接情 形。利用Dreamweaver 8提供的“检查链接”可以检查网站中存在断链、孤立文 件等。 链接检查无误后，可以在浏览器中浏览各个网页，检查文字、图片、链 接是否有误、是否会出现乱码，网页元素定位是否准确，浏览速度和视觉效果 是否满意。经过测试、修改、再测试、再修改，反复多次循环，直到各方面都合 格方可发布网站。3.10发布网站发布网站就是把网页文件上传到 Web服务器，发布网站之前先必须申请一个主页空间，拥有网页空间的访问域名、FTP用户名和密码。如果主页空间已成功申请，可以先与远程Web服务器进行连接，连接成功后，再通过单击“文件”面板上的【上传文件】按

12、钮，往远程 Web服务器中上传本地站点，上传成功后，就可以在浏览器中输入正确的网址访问网站网站整体流程：一、制作者测试：页面和功能二、全面测试三、发布测试测试的主要方面：一、功能测试1、链接测试 测试所有链接是否按指示的那样确实链接到了该链接的页面 测试所链接的页面是否存在测试链接的正确性的工具2、表单测试3、Cookies 测试4、设计语言测试5、数据库测试二、性能测试：连接速度测试、负荷测试 (Load) 和压力测试 (Stress)1、连接速度测试2、负载测试3、压力测试三、接口测试1、服务器接口2、外部接口3、错误处理四、可用性测试1、导航测试2、图形测试3、内容测试4、整体界面测试五

13、、兼容性测试1、平台测试2、浏览器测试3、视频测试4、Modem连接速率测试5、打印机测试6、组合测试六、安全测试Web应用系统的安全性测试区域1、目录设置2、登录3、Session4、日志文件5、加密6、安全漏洞七、代码合法性测试1、程序代码合法性检查2、显示代码合法性检查八、文档测试：能够测试多种数据库的性能五、参考文献1 胡崧.HTML从入门到精通M.北京：中国青年出版社，2007.2 杨选辉.网页设计与制作教程M.北京：清华大学出版社，2009.3 王诚君，刘振华，郭竑晖，高中山.Dreamweaver 8网页设计应用教程M.北京: 清华大 学出版社， 2007.4 李光明，曹蕾，余辉

14、.中文Dreamweaver 8网页设计与实训教程M.北京：冶 金工业出版社，2006.赵铭建，赵慧，乔孟丽，康梅娟.网页设计与制作M.东营：中国石油大学出版 社，2007.赵祖荫，王云翔，胡耀芳.网页设计与制作教程M.北京：清华大学出版社，2008.7 曹雁青，杨聪.Photoshop经典作品赏析M.北京：北京海洋智慧图书有限公 司，2002.7 张怒涛.Photoshop平面设计图像处理技法M.北京：清华大学出版社，2003.8 陈笑.Dreamweaver 8 Photoshop CS 2 Flash 8 网页制作实用教程M.北京： 清华大 学出版社，2006.9 孙强，李晓娜，黄艳.J

15、avaScript从入门到精通M.北京：清华大学出版社，2008.六、课程设计总结生活中我每天上网都要接触到网页， 原来没有留意过网页的设计，但是经过 这段时间的学习了解，现在我打开一个网页都会习惯性的先看看排版、 布局和色 彩运用，以及网站里的特效代码。渐渐的我觉得这也没有多神奇了。通过半年的课堂学习，我大体掌握了网页设计的基本方法，例如：1、命名站点或者文件夹的的时候一定要注意，最好用相应的英语或者汉语拼音，要见名知意，如图片文件夹用images，这样可以避免页面调用时不正确的现象发生。2、 虽然不同的方法达到的效果看似一样，但实际上产生的HTML弋码则完全不同。在这个过程中，我同样认识到

16、网页设计不是一门学科的独秀，而是多种课程的综 合，它是Flash、Photoshop等网页软件的综合应用。例如 Swftext软件提供了 功能齐全的flash制作工具。3、网页设计布局一般为三行一列，主题 955X600 像素，导航栏200像素，版权声明部分占50-70像素。这样网页设计部较合适， 符合人们的审美观。针对我所学的网页设计，网页布局、图形创意等方面都很重要，对于网页设 计作为一种视觉语言，特别讲究编排和布局，虽然主页的设计不等同于，但它们 有许多相近之处，版式设计通过文字图形的空间组合， 表达出和谐与美。不积跬 步，无以至千里，师傅领进门，修行在个人。我已经在老师的指引下迈入了网页 设计的大门，在今后的闲余时间继续认真学习制作网页的更多知识以实现自身技 能的提高。网页开发技术课程设计题目:NBA信息网学院:理学院专业、年级：15级信计姓名:马强学号:1509540125指导教师:王岚时间:2017年秋季学期