信息管理与信息系统课程设计报告
西安电子科技大学<<公司产品宣传网页制作>>课程设计报告信息管理与信息系统（理）学号： 姓名： 班级： 学期：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飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道，他在人们政治、经济、文化、科学、生活等各个方面发挥着重要的作用。因此网站建设在Internet应用上的地位显而易见，它已经成为政府、企事业单位信息化建设中的重要组成部分，从而备受人们的重视。我这次开发的是一个公司产品宣传的网页。Converse作为一个有悠久历史的运动品牌，如今已经是一个家喻户晓的大品牌。1908年由美国摩尔匡威于麻省春田市创办了篮球鞋的专业制造厂，CONVER ALL SATAR于是就诞生了。1917年正式推出了ALL START帆布鞋，以其狂放不羁的设计，风靡全球一炮而红。1923年以具有运动天赋和口才的篮球明星CHVCK TAYLOR的亲笔签名成为著名商标。集复古、流行、环保于一身的ALL START帆布鞋，是美国文化的精神象征，以其随心所欲，自由自在没有约束的穿着形态，更成为追求自我时尚的青年人的忠实排挡。在中国市场，现在上市的有ALL STARCHUCK TAYLOR （全明星经典帆布鞋）、JACK PURCELL（开口笑）、ONE STAR(古典帆布鞋)三大系列。因此本网页介绍了国内市场上的三种系列的Converse，与几款最新的靓品。创建本站的实用工具主要为：Dreamweaver、Photoshop、Fireworks等，部分建站素材来源于网络。由于我们对网页设计也只是初步学习，从来没有用它开发过一个具体项目，所以我在开发本网站过程中是要不断的翻阅一些书籍以及观看教学视频来丰富我的这方面只是。有时也有很多困难是个人多无法解决的，在此我很感谢老师和同学，是他们在我最需要帮助时给了我指导。网页的实现过程一HTML语言为主，也使用了少量的Java代码。关键词网页设计 HTML语言 Dreamweaver Photoshop.设计中考虑的问题1. 用户第一次进来，将给他的感觉是什么？频道导航，位置导航，社会导航，页面布局，页面风格，页面视觉效果，内容密集度，页面的文字的提示性。2要呈现给他的内容是什么？是不是他想要的？用户最想看到的内容是什么，他来到这里最关注的内容是什么，我们能不能第一时间满足他，要素：如标题，图片，内容，联系方式，用户对信息的赞贬度，评价。3. 要提供给他的核心服务是什么？用户进来后，我们提供的核心服务是什么？信息可比服务、翻译服务、信息地图服务、音乐试听服务还是其他服务?4. 页面信息构架的内容推荐性是不是合理？网页是借自己的牌坊，宣传自己的内容获得流量转换或广告的收益。在页面信息构架的内容可推荐性设计上，我们以怎样的方式去推荐内容，强制性模块内容推荐，还是内容相关性匹配推荐？拿什么样的页面位置去更好的推荐？5. 页面信息构架的功能互动性设计是不是可用？互动性、交互性设计，可以很友好的和用户建立其沟通，包括交互方式、交互效果、交互提醒、流量诱导，以及网站的交互信息的输出等影响着用户对网站的活跃度认识、参与的积极性。. 使用工具开发中用到的工具和技术简单介绍如下：采用Dreamweaver为开发软件，css样式，超级链接，并用fireworks做简单的图形编辑，运用Photoshop来后期制作。. Dreamweaver8简介Dreamweaver8简介Dreamweaver是Macromedia公司的出品的一款“所见即所得”的网页编辑工具。与 Frontpage不同，Deamweaver采用的是Mac机浮动面版的设计风格，对于初学者来说可能会感到不适应。但当你习惯了其操作方式后，就会发现Dreamweaver的直观性与高效性是Frontpage所无法比拟的。Dreamweaver对于DHTML（动态网页）的支持特别好，可以轻而易举地做出很多眩目的互动页面特效。插件式的程序设计使得其功能可以无限的扩展。Dreamweaver与Flash、Fireworks 并称为 Macromedia的网页制作三剑客，由于是同一公司的产品，因而在功能上有着一个非常紧密的结合。因此，说Dreamweaver是高级网页制作的首选并不为过。 Dreamweaver最新的版本为:Dreamweaver 8。. 网页结构首页All StarJack PurcellOne Star靓品推荐. 站点的定义与创建在正式开始制作网页之前，最好先定义一个新网站，这是为了更好地利用站点窗口对站点文件进行管理。定义方法方法一：在站点窗口的下拉菜单选择最后一项编辑站点，如下图。此时会弹出一个新的对话框，点击“新建”按钮就可以定义一个新网站，如果日后需要对旧有网站重新定义，可以在左边的网站列表中选中你需要重新定义的网站，然后点击“编辑”按钮便可。方法二：选择菜单“站点”“新建站点”选项。（如图所示） 在接着看到的对话框中，要进行以下简单的设置： 网站名称：为你的网站起一个名字，这个名字只起着识别的作用，与网站发布后真实的名字无关。 如果不需要什么特殊的服务器技术，就选“否”这项。 本地根目录：设置网站在本地硬盘的位置，点击后面的文件夹图标可以选择硬盘的任意目录作为存放网站文件的目录； 可以任意选择你想要将文件存储在服务器上的位置，方法同上一步本地根目录的建立相同。 选择默认的状态即可。 完成后，回到站点窗口，就可以看到如下类似的画面： 可以看到，“我的网站”的名称已经出现在站点窗口了，因为是新建的一个站点，所在在本地目录看到的一片空白。站点定义完毕之后，就可以正式制作属于你自己的网页了。. 超链接的介绍按照链接路径的不同,网页中超链接一般分为以下3种类型: 内部链接,锚点链接和外部链接。 如果按照使用对象的不同，网页中的链接又可以分为：文本超链接，图像超链接，E-mail链接，锚点链接，多媒体文件链接，空链接等。 超链接是一种对象，它以特殊编码的文本或图形的形式来实现链接，如果单击该链接，则相当于指示浏览器移至同一网页内的某个位置，或打开一个新的网页，或打开某一个新的WWW网站中的网页。 网页上的超链接一般分为三种：一种是绝对URL的超链接。URL（Uniform Resource Locator）就是统一资源定位符，简单地讲就是网络上的一个站点、网页的完整路径，如http:/www.baidu.com；第二种是相对URL的超链接。如将自己网页上的某一段文字或某标题链接到同一网站的其他网页上面去；还有一种称为同一网页的超链接，这种超链接又叫做书签。 超链接还可以分为动态超连接和静态超连接。动态超连接指的是可以通过改变HTML代码来实现动态变化的超链接，例如我们可以实现将鼠标移动到某个文字链接上，文字就会象动画一样动起来或改变颜色的效果，也可以实现鼠标移到图片上图片就产生反色或朦胧等等的效果。而静态超链接，顾名思义，就是没有动态效果的超链接。 在网页中，一般文字上的超链接都是蓝色（当然，用户也可以自己设置成其他颜色），文字下面有一条下划线。当移动鼠标指针到该超链接上时，鼠标指针就会变成一只手的形状，这时候用鼠标左键单击，就可以直接跳到与这个超链接相连接的网页或WWW网站上去。如果用户已经浏览过某个超链接，这个超链接的文本颜色就会发生改变（默认为紫色）。只有图像的超链接访问后颜色不会发生变化。文字的链接在属性面板的Link一项，填写链接地址，当浏览者点击该链接的时候，浏览器就回跳转到该页面。 如果你希望该页面是在一个新窗口打开，可以在Target中选择“_balnk”。如果要链接到网站内的文件，可以点击 ：上图中，我们是将文字链接到“all star.html”这个文件，特别注意的是最底的“相对于”的选项，意思是选择相对路径的形式，默认是“文档”，也可以选择“站点根目录”，区别在于，“文档”是指相对路径是从本页开始计算，而“站点根目录”是从根目录开始计算（即“/”）另外，如果使用“站点根目录”的模式做成的链接，在本地硬盘直接打开页面浏览通常会出错，但在Dreamweaver的预浏模式和上传上服务器后，都不会有问题。文字链接代码：<a href="所要链接的地址"target="_blank">输入的文字</a>图片的链接图片链接的建立过程与文字链接相似，就不多作介绍了。但特别要提出的是，某些图片，在加上链接后，会出现一个蓝色的边框，要将边框去掉，将Border设为0即可。图片链接代码：<a href="你要链接到的地址"target="_blank"><img scr="图片地址URL"width="宽度" height="高度" alt="图片说明"border="0"></a>. 层的插入与应用层的插入层（Layer）是一种 HTML 页面元素，您可以将它定位在页面上的任意位置。层可以包含文本、图像或其它 HTML 文档。层的出现使网页从二维平面拓展到三维。可以使页面上元素进行重叠和复杂的布局。打开Dreamweaver后，找到菜单栏处的“插入”，然后点开下拉菜单，选择布局对象，插入层即可，如图所以黄蓝色的框架就是一个层的插入。层的应用一个页面中可以画出很多的层，这些层都会列在层面板中。层之间也可以相互重叠。层面板可以通过菜单窗口菜单选“层”打开。这里我们需要对几个概念进行解释。层有隐藏和显示的属性。这是层的一个重要属性和以后说到的行为相结合就变成了重要的参数。单击层面板列表的左边，可以打开关闭眼睛。眼睛挣开和关闭表示层的显示和隐藏。层还
