《信息管理与信息系统课程设计报告.docx》由会员分享，可在线阅读，更多相关《信息管理与信息系统课程设计报告.docx（19页珍藏版）》请在三一办公上搜索。
1、西安电子科技大学课程设计报告信息管理与信息系统（理）学号： 姓名： 班级： 学期：2009至2010学年 1 学期目录引言2. 设计中考虑的问题3. 使用工具3. Dreamweaver8简介3. 网页结构4. 站点的定义与创建5. 超链接的介绍9. 文字的链接10. 图片的链接11. 层的插入与应用11层的插入11层的应用12. 视频及音频的插入14. 网页界面实例161 主页162 All star163 Jack Purcell174 One star175 靓品推荐17. 个人体会17. 参考文献18引言在Internet飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道
2、，他在人们政治、经济、文化、科学、生活等各个方面发挥着重要的作用。因此网站建设在Internet应用上的地位显而易见，它已经成为政府、企事业单位信息化建设中的重要组成部分，从而备受人们的重视。我这次开发的是一个公司产品宣传的网页。Converse作为一个有悠久历史的运动品牌，如今已经是一个家喻户晓的大品牌。1908年由美国摩尔匡威于麻省春田市创办了篮球鞋的专业制造厂，CONVER ALL SATAR于是就诞生了。1917年正式推出了ALL START帆布鞋，以其狂放不羁的设计，风靡全球一炮而红。1923年以具有运动天赋和口才的篮球明星CHVCK TAYLOR的亲笔签名成为著名商标。集复古、流行
3、、环保于一身的ALL START帆布鞋，是美国文化的精神象征，以其随心所欲，自由自在没有约束的穿着形态，更成为追求自我时尚的青年人的忠实排挡。在中国市场，现在上市的有ALL STARCHUCK TAYLOR （全明星经典帆布鞋）、JACK PURCELL（开口笑）、ONE STAR(古典帆布鞋)三大系列。因此本网页介绍了国内市场上的三种系列的Converse，与几款最新的靓品。创建本站的实用工具主要为：Dreamweaver、Photoshop、Fireworks等，部分建站素材来源于网络。由于我们对网页设计也只是初步学习，从来没有用它开发过一个具体项目，所以我在开发本网站过程中是要不断的翻阅
4、一些书籍以及观看教学视频来丰富我的这方面只是。有时也有很多困难是个人多无法解决的，在此我很感谢老师和同学，是他们在我最需要帮助时给了我指导。网页的实现过程一HTML语言为主，也使用了少量的Java代码。关键词网页设计 HTML语言 Dreamweaver Photoshop.设计中考虑的问题1. 用户第一次进来，将给他的感觉是什么？频道导航，位置导航，社会导航，页面布局，页面风格，页面视觉效果，内容密集度，页面的文字的提示性。2要呈现给他的内容是什么？是不是他想要的？用户最想看到的内容是什么，他来到这里最关注的内容是什么，我们能不能第一时间满足他，要素：如标题，图片，内容，联系方式，用户对信息
5、的赞贬度，评价。3. 要提供给他的核心服务是什么？用户进来后，我们提供的核心服务是什么？信息可比性服务、翻译服务、信息地图服务、音乐试听服务还是其他服务?4. 页面信息构架的内容推荐性是不是合理？网页是借自己的牌坊，宣传自己的内容获得流量转换或广告的收益。在页面信息构架的内容可推荐性设计上，我们以怎样的方式去推荐内容，强制性模块内容推荐，还是内容相关性匹配推荐？拿什么样的页面位置去更好的推荐？5. 页面信息构架的功能互动性设计是不是可用？互动性、交互性设计，可以很友好的和用户建立其沟通，包括交互方式、交互效果、交互提醒、流量诱导，以及网站的交互信息的输出等影响着用户对网站的活跃度认识、参与的积
6、极性。. 使用工具开发中用到的工具和技术简单介绍如下：采用Dreamweaver为开发软件，css样式，超级链接，并用fireworks做简单的图形编辑，运用Photoshop来后期制作。. Dreamweaver8简介Dreamweaver8简介Dreamweaver是Macromedia公司的出品的一款“所见即所得”的网页编辑工具。与 Frontpage不同，Deamweaver采用的是Mac机浮动面版的设计风格，对于初学者来说可能会感到不适应。但当你习惯了其操作方式后，就会发现Dreamweaver的直观性与高效性是Frontpage所无法比拟的。Dreamweaver对于DHTML（动
7、态网页）的支持特别好，可以轻而易举地做出很多眩目的互动页面特效。插件式的程序设计使得其功能可以无限的扩展。Dreamweaver与Flash、Fireworks 并称为 Macromedia的网页制作三剑客，由于是同一公司的产品，因而在功能上有着一个非常紧密的结合。因此，说Dreamweaver是高级网页制作的首选并不为过。 Dreamweaver最新的版本为:Dreamweaver 8。. 网页结构首页All StarJack PurcellOne Star靓品推荐. 站点的定义与创建在正式开始制作网页之前，最好先定义一个新网站，这是为了更好地利用站点窗口对站点文件进行管理。定义方法方法一：
8、在站点窗口的下拉菜单选择最后一项编辑站点，如下图。此时会弹出一个新的对话框，点击“新建”按钮就可以定义一个新网站，如果日后需要对旧有网站重新定义，可以在左边的网站列表中选中你需要重新定义的网站，然后点击“编辑”按钮便可。方法二：选择菜单“站点”“新建站点”选项。（如图所示） 在接着看到的对话框中，要进行以下简单的设置： 网站名称：为你的网站起一个名字，这个名字只起着识别的作用，与网站发布后真实的名字无关。 如果不需要什么特殊的服务器技术，就选“否”这项。 本地根目录：设置网站在本地硬盘的位置，点击后面的文件夹图标可以选择硬盘的任意目录作为存放网站文件的目录； 可以任意选择你想要将文件存储在服务
9、器上的位置，方法同上一步本地根目录的建立相同。 选择默认的状态即可。 完成后，回到站点窗口，就可以看到如下类似的画面： 可以看到，“我的网站”的名称已经出现在站点窗口了，因为是新建的一个站点，所在在本地目录看到的一片空白。站点定义完毕之后，就可以正式制作属于你自己的网页了。. 超链接的介绍按照链接路径的不同,网页中超链接一般分为以下3种类型: 内部链接,锚点链接和外部链接。 如果按照使用对象的不同，网页中的链接又可以分为：文本超链接，图像超链接，E-mail链接，锚点链接，多媒体文件链接，空链接等。 超链接是一种对象，它以特殊编码的文本或图形的形式来实现链接，如果单击该链接，则相当于指示浏览器
10、移至同一网页内的某个位置，或打开一个新的网页，或打开某一个新的WWW网站中的网页。 网页上的超链接一般分为三种：一种是绝对URL的超链接。URL（Uniform Resource Locator）就是统一资源定位符，简单地讲就是网络上的一个站点、网页的完整路径，如；第二种是相对URL的超链接。如将自己网页上的某一段文字或某标题链接到同一网站的其他网页上面去；还有一种称为同一网页的超链接，这种超链接又叫做书签。 超链接还可以分为动态超连接和静态超连接。动态超连接指的是可以通过改变HTML代码来实现动态变化的超链接，例如我们可以实现将鼠标移动到某个文字链接上，文字就会象动画一样动起来或改变颜色的效
11、果，也可以实现鼠标移到图片上图片就产生反色或朦胧等等的效果。而静态超链接，顾名思义，就是没有动态效果的超链接。 在网页中，一般文字上的超链接都是蓝色（当然，用户也可以自己设置成其他颜色），文字下面有一条下划线。当移动鼠标指针到该超链接上时，鼠标指针就会变成一只手的形状，这时候用鼠标左键单击，就可以直接跳到与这个超链接相连接的网页或WWW网站上去。如果用户已经浏览过某个超链接，这个超链接的文本颜色就会发生改变（默认为紫色）。只有图像的超链接访问后颜色不会发生变化。文字的链接在属性面板的Link一项，填写链接地址，当浏览者点击该链接的时候，浏览器就回跳转到该页面。 如果你希望该页面是在一个新窗口打
12、开，可以在Target中选择“_balnk”。如果要链接到网站内的文件，可以点击 ：上图中，我们是将文字链接到“all star.html”这个文件，特别注意的是最底的“相对于”的选项，意思是选择相对路径的形式，默认是“文档”，也可以选择“站点根目录”，区别在于，“文档”是指相对路径是从本页开始计算，而“站点根目录”是从根目录开始计算（即“/”）另外，如果使用“站点根目录”的模式做成的链接，在本地硬盘直接打开页面浏览通常会出错，但在Dreamweaver的预浏模式和上传上服务器后，都不会有问题。文字链接代码：输入的文字图片的链接图片链接的建立过程与文字链接相似，就不多作介绍了。但特别要提出的是
13、，某些图片，在加上链接后，会出现一个蓝色的边框，要将边框去掉，将Border设为0即可。图片链接代码：. 层的插入与应用层的插入层（Layer）是一种 HTML 页面元素，您可以将它定位在页面上的任意位置。层可以包含文本、图像或其它 HTML 文档。层的出现使网页从二维平面拓展到三维。可以使页面上元素进行重叠和复杂的布局。打开Dreamweaver后，找到菜单栏处的“插入”，然后点开下拉菜单，选择布局对象，插入层即可，如图所以黄蓝色的框架就是一个层的插入。层的应用一个页面中可以画出很多的层，这些层都会列在层面板中。层之间也可以相互重叠。层面板可以通过菜单窗口菜单选“层”打开。这里我们需要对几个
14、概念进行解释。层有隐藏和显示的属性。这是层的一个重要属性和以后说到的行为相结合就变成了重要的参数。单击层面板列表的左边，可以打开关闭眼睛。眼睛挣开和关闭表示层的显示和隐藏。层还有一个概念就是层数，层数决定了重叠时哪个层在上面哪个层在下面。比如层数为的层在层数为的层的上面。改变层数就可以改变层的重叠顺序。层面板上面还有一个参数就是防止层重叠。一旦选中，页面中层就无法重叠了。层还有一种父子关系也就是隶属关系。在层面板中是这样表示的。图中Layer2挂在Layer1的下面。Layer1为父层，Layer2为子层。在页面中拖动Layer1，Layer2也跟着动起来。因为他们已经链在一起了，并且Laye
15、r2隶属于Layer1。父层移动会影响到子层。移动layer2层，Layer1层不动。也就是子层不会影响到父层。要建立这样的一种隶属关系方法很简单。在层面板中按Ctrl键将子层拖拽到父层即可。由于层在网页布局上非常方便，所以，一些人可能不喜欢使用表格或“布局”模式来创建自己的页面，而是喜欢通过层来进行设计。Dreamweaver8可以使用层来创建自己的布局，然后将它们转换为表格。 在转换为表格之前，请确保层没有重叠。请执行以下操作：选择“修改”“转换”“层到表格”。即可显示“转换层为表格”对话框。选择所需的选项。单击“确定”。 选择所需的选项。单击“确定”。. 视频及音频的插入. 视频的插入关
16、于 Flash 视频 使用 Dreamweaver 中的“插入 Flash 视频”命令，可将 Flash 视频内容插入 Web 页面，而无需使用 Flash 创作工具。该命令可以插入 Flash 组件；当您在浏览器中查看它时，它显示您选择的 Flash 视频内容以及一组播放控件。“插入 Flash 视频”命令提供以下选项，用于将视频内容发送给站点访问者： 累进式下载视频将 Flash 视频 (FLV) 文件下载到站点访问者的硬盘上，然后播放。但是，与传统的“下载并播放”视频传送方法不同，累进式下载允许在下载完成之前就开始播放视频文件。 流视频将 Flash 视频内容进行流处理并立即在 Web
17、页面中播放。若要在 Web 页面中启用流视频，您必须具有对 Macromedia Flash Communication Server 的访问权限，这是唯一可对 Flash 视频内容进行流处理的服务器。 在 URL 文本框中，指定广告ConverseMyDriveThru.flv 文件的相对路径，方法是单击“浏览”，浏览至广告ConverseMyDriveThru.flv 文件（位于站点的广告ConverseMyDriveThru 根文件夹中），并选择该 FLV 文件。 从“外观”弹出式菜单中选择 Halo Skin 2。 所选外观的预览会出现在“外观”弹出式菜单下方。“外观”选项指定将包含
18、Flash 视频内容的 Flash 视频组件的外观。 在“宽度”和“高度”文本框中，执行以下操作： 在“宽度”文本框中，键入 180。 在“高度”文本框中，键入 135 ，然后按 Enter 键。单击“检测大小”以确定 FLV 文件的准确宽度和高度。但是，有时 Dreamweaver 无法确定 FLV 文件的尺寸大小。在这种情况下，必须手动输入宽度和高度值。 “宽度”和“高度”文本框中的值以像素为单位指定 FLV 文件的宽度和高度。可以任意调整这些值以更改 Web 页面上的 Flash 视频的大小。增加视频的尺寸时，视频的图片品质通常会下降。 “包括外观”是 FLV 文件的宽度和高度与所选外观
19、的宽度和高度的加和。 其余选项保留默认的选择值： 限制高宽比保持 Flash 视频组件的宽度和高度之间的高宽比不变。默认情况下会选择此选项。 自动播放指定在 Web 页面打开时是否播放视频。默认情况下取消选择该选项。 自动重新播放指定播放控件在视频播放完之后是否返回起始位置。默认情况下取消选择该选项。 单击“确定”关闭对话框并将 Flash 视频内容添加到 Web 页面。 “插入 Flash 视频”命令生成一个视频播放器 SWF 文件和一个外观 SWF 文件，它们用于在 Web 页面上显示 Flash 视频内容。（您可能需要单击“文件”面板中的“刷新”按钮来查看新的文件。）这些文件与 Flas
20、h 视频内容（在此情况下，为 cafe_townsend 根文件夹）所添加到的 HTML 文件存储在同一目录中。当您上传包含 Flash 视频内容的 HTML 页面时，Dreamweaver 将这些文件作为相关文件上传（只要单击“要上传相关文件？”对话框中的“是”）。 保存该页，然后可以测试下效果。. 音频的插入在网页中添加背景音乐主要以mp3、wma、midi类型的音乐文件。在“设计”视图中，将插入点放置在您要嵌入文件的地方，然后执行以下操作之一： 在“插入”栏的“常用”类别中，单击“媒体”按钮，然后选择“插件”图标。 选择“插入”“媒体”“插件”。制作完成，点击F12听听效果吧。. 网页界
21、面实例1. 主页2. all star. Jack Purcell. one star.靓品推荐个人体会“纸上得来终觉浅，绝知此事要躬行。”在段在的课程设计过程中，我深深感觉到自己所学只是的肤浅和在实际运用中的专业知识的匮乏，刚开始的一段时间里，对一些工作感到无从下手，茫然不知所措，这让我感到非常难过，在学校总以为自己学的不错，一旦接触到实际，才发现自己知道的是那么少，这才真正领悟到“学无止境”的含义。课程设计是一次用自己的眼和耳去感受环境的机会，通过这段时间，我受益匪浅，我对自己的专业有了更为详尽而深刻的了解，认识到了许多在学校学不到的东西，不再局限于课本，而是有了一个比较全面的了解。从而更深的了解了自己的不足，该往哪个方向而努力，这些都是以前所部分了解的。我想通过这次课程设计，我会认识到自己的更多不足，在学校的学习会更加努力，更加严于律己，努力做到理论与实际相结合，敢于实践，做合格的大学生！这里也是我们初涉社会的开端，迈向美好而残酷的未来，我一直坚信自己的能力，就是人生路如四通八达的公路，但方向只有一个，那就是前进，永不言弃。. 参考文献赵祖荫 电子商务网站建设教程 清华大学出版社百度文库豆丁网温谦 HTML+CSS网页设计与布局从入门到精通 人民邮电出版社
