第一篇:浅析数字图书馆网站设计与实现的论文
1系统需求分析
1.1后台功能需求
1)系统设置模块。对系统的的基本设置进行设置。例如网站版权信息、网站备案号、网站的域名、网站管理员信息等等。2)栏目管理模块。对网站的栏目进行设置管理。主要包括添加栏目、删除栏目、查看栏目基本信息、修改栏目信息(例如栏目分组、栏目的类型、栏目模版、是否在菜单显示、栏目的状态等等)、添加栏目分组、删除栏目分组等等。3)网站公告模块。超级管理员可以对网站的固定公告、弹窗公告等进行管理。主要包括添加删除弹出公告,修改公告内容等功能。4)投票模块。用户可以添加网站调查,启动网站投票。包括添加调查主题、添加删除调查选项、设置选项的票数、设置投票多选还是单选、设置投票状态等等。5)访问者安全管理模块。网站管理员可以添加、修改、删除访问IP地址段,用于屏蔽、授权访问的IP地址的功能。6)专题管理模块。网站管理员可以添加、修改、删除网站的专题,并绑定专题所属栏目等等功能。7)内容管理模块。有权限的管理员可以管理网站的内容,例如添加文章、删除文章、修改文章、审核文章、修改文章作者来源等信息。
1.2前台功能需求
前台主要向最终用户显示信息,将信息显示到最终用户的浏览器。前台包括8个主要的功能需求模块:1)模版管理模块。建站人员可以在不修改系统源代码的情况下修改网站的模版、风格以及前台界面。2)内容展示模块。系统根据建站人员设置的模版以及栏目设置等向最终用户展示文章新闻等内容。3)访问控制模块。对系统的栏目文章等页面进行访问控制,不在允许列表中的IP不能访问。4)访问记录模块。记录每一个IP访问某一篇文章的次数,按照一定次序进行排序。5)投稿模块。超级管理员创建的投稿用户拥有权限向可以投稿的栏目投稿,投稿用户可以选择投稿的栏目,引用栏目,投稿文章标题、内容等信息。6)友情链接模块。管理员可以添加有钱链接,使用标签可以在首页以及其他页面显示文字或者图片形式的友情链接。7)日志模块。记录系统的操作日志,以及访问异常等日志信息。8)搜索模块。用户可以使用搜索功能搜索到本系统中的信息。
2系统设计
2.1系统总体设计
1)总体架构本系统作为一种通用型的软件系统,其架构必须适应用户需求的不断变化,而且应该层次清晰,各模块应该独立不互相依赖,方便二次开发。数据访问层、逻辑层、界面层完全独立。2)设计思想本系统采用了多层结构的设计思想,即网站架构常用的三层架构模式,使界面层,逻辑层,数据访问层全部独立,当某一层代码需要改变时,不会影响到其他层。如新建一个站点时,只需要添加栏目以及更改界面,设置网站基本信息,就可以快速搭建一个WEB站点,这样使系统具有很好的灵活性和扩展性。
2.2系统的主要类设计
系统充分的利用了面向对象语言多态的特性,对系统中的主要功能函数都采用接口的方式进行了封装,数据库访问层使用了单独的动态链接库进行封装,使系统二次开发或者更新时,减少人力和物力资源的浪费。
3系统实现
3.1系统核心模块实现
针对网站系统最常用类,分别设计并实现了相应的核心接口函数。主要包括数据库操作函数、读取配置文件函数、文件操作函数、加解密函数、网站即时信息操作函数等等。
3.2缓存类的实现
系统广泛使用了缓存的方式保存了网站访问比较频繁的数据,减小了数据库服务器的压力,使页面加载速度更快,分别实现了基本缓存类(BasicCache.cs)、栏目缓存类(CategoryCache.cs)、IP缓存类(IpFilterCache.cs),角色缓存类(RoleCache.cs)。
3.3动态模版实现
内容管理系统中最核心以及最复杂的就是动态模版的实现,本系统采用asp.net的一个模版库NVelocity实现了动态模版。NVelocity是开源包Velocity重写的.NET版本,代码简单易懂,标签可读性很高。
4结束语
本系统根据内容管理系统通用快捷特点,把实现灵活和可扩展的软件系统为目标,设计并实现了本系统。使用Asp.net2.0和NVelocity实现了简单灵活的一个快速建站系统,系统采用多层分离的方式,使方便开发人员二次开发,以及方便更新。经实践,该系统相对市面上的其他内容管理系统,具有更简洁,更容易扩展等优点,目前已经在网站领域得到了很好的应用。
第二篇:论文:个人网站的设计与实现
个人网站的设计与实现
前 言
随着国际互联网的普及,很多人已经不满足仅仅在Internet上的浏览信息,而是希望更深入的参与其中,拥有自己的Web网站,这似乎已经成为一种潮流。如果说个人建立网站是为了追求时尚,那么企业建立网站就是必然的选择了。
无论是专业的,还是业余的,很多人对网页制作颇感兴趣。事实上制作一个简单的网页并不困难,会使用Word的人都可以胜任。但想做出超凡脱俗的网页就不那么容易了,而Dreamweaver却可以满足你的愿望,它是Macromedia公司开发的集网页制作和网站管理于一身的所见即所得的网页编辑器。
同样出自Macromedia公司的Flash,Fireworks在制作网站的过程中起到了锦上添花的作用,是个人网站实现的好帮手,在制作网站的时候经常会用到这些软件。
本文有五章,我来由浅到深介绍个人网站的设计与实现。
摘 要
在互联网走进我们的生活之前,没有人敢梦想拥有自己的报纸、杂志、电台、电视台。除了政策上的制约外,一个人也根本没有操作一份传播媒体的能力。现在不同了,互联网给我们提供了一个“表达自我”的自由天地,你可以拥有自己的新闻邮件,你可以建立自己的个人网站。只要你办得成功也可以吸引成千上万的订户、读者,并建立自己在众多参与者中的权威地位。建立个人网站的基本过程可以分为以下七个环节 : 1 了解中国网络个人主页研究背景与发展现状 2 系统需求分析与总体设计 3 熟悉网站开发模式、工具及环境 把自己的作品和想要展示的内容制作成网页。5 使用动态网页技术(ASP),实现动态内容更新。6 认真地选取测试用例,进行交叉测试 7 网站的后期完善、宣传及发展方向
其中 ,网页制作和使用动态网页技术(ASP)实现动态内容更新是网站开发的核心内容。
关键词:网页、制作、访问、链接 Abstract Enters before our life in the Internet, nobody dares to vainly hope for has own newspaper, the magazine, the broadcasting station, the television station.Besides the policy in restriction, a person simply has not also operated dissemination media the ability.Now has been different, Internet has provided to us “the expression” free world,You may have own news mail, you may establish own individual website.So long as you also manage the success to be possible to attract the tens of thousands of subscribers, the reader,And establishes oneself in the multitudinous participant's authoritative status.Establishes individual website the unit process to be possible to divide into following seven links: 1、understands the Chinese network individual main page research background and the development present situation 2 systems demands analysis and system design 3 familiar websites developments pattern, tool and environment 4 and wants own work the content which demonstrated to manufacture the homepage.5 uses dynamic homepages technology(ASP), realization dynamic content renewal.6 earnestly selects measured the test example, carries on the overlapping test 7 websites later periods consummate, the propaganda and the development direction Among them,The homepage manufacture and the use dynamic homepage technology(ASP)realizes the dynamic content renewal is the website development core content.Key word: Homepage, manufacture, visit, link
第一章 预备知识
1.1 什么是Internet Internet的中文名为“国际互联网”,又称“因特网”。
Internet是由众多的计算机网络互联而成的互联网,它覆盖了全世界各地,它是采用开放系统协议的计算机通讯网络。然而,Internet不仅仅是计算机的互联网,它还是全球最大的信息资源宝库,它提供了包括科研、教育、文化娱乐、商业和信息交流等各种各样的服务,使得世界范围内的人与人之间的交流在时间和空间上变的更小了。
要了解Internet,就必须先了解局域网。我们可以将同一地点的许多计算机使用网线连接在一起,构成一个高效率的计算机网络,所有处于网络内的终端机或电脑都能享受网络内所有的资源,比如程序,图文资料等。这种计算机网络因为一般都局限在一定区域中,我们称之为“局域网”(Local Area Network,简称LAN),它是在日常工作中用得最多的一种小型计算机网络。局域网所覆盖的地理范围比较小,通常不超过几十公里,甚至只在同一座建筑物内或者邻近的几座建筑内。像常见的校园网,一座写字楼内部的网络等都属于局域网。
而Internet则不是指单个区域范围内的网络,而是指将全世界的各中不同类型的计算机网络连接起来的一个全球性的网络。Internet上有取之不尽,用之不竭的信息资源。对于Internet中各种各样的信息,所有的人都可以通过网络的连接来共享和使用。
1.2 Internet有那些功能
Web页浏览:这是目前利用最广泛、最直接的互联网服务,通过浏览WWW(万维网)中的网页,可以了解世界各地的新闻,查看最新的股市行情,最新的娱乐动态、科技发明,找到众多的就业信息„„几乎想找到什么样的信息,就有什么信息。正是有了WWW、Internet才会变得如此丰富多彩,才能走进千家万户。信息发布:通过Internet,不仅可以浏览别人发布在Web页上的信息,也可以将自己要发布的信息制作成Web页,也即网页,然后发布到Internet上,供全世界的人浏览。
电子邮件:不同于传统邮件,电子邮件(E-mail)通过Internet传输,写信,发信,收信都在计算机上完成,一封电子邮件最短在一秒之内就可以发送出去,其效率是传统邮件无法比拟的。而且发送与接收电子邮件几乎是免费的,所以比传统邮件既节省时间又经济的多。
网上聊天:通过聊天软件(如QQ、ICQ等)或不同网站的聊天室,可以和世界各地的网友聊天。网友可能是远在天边的异国朋友,也可能是与你一起工作的饿同事,或者是一起生活的家人,在这里没有年龄、性别、身份、职业、国籍、肤色的限制,完全突破了交友的传统方式,人们可通过Internet互相了解对方,进行各种各样的交流。
电子商务:现在网上交易已经成为现实,网上购物、网上商品销售、网上拍卖、企业级电子商务、网上货币支付等电子商务活动已经搞的有声有色,几乎所有的专家都预测,在未来的几年内,电子商务会飞速发展。在不久的将来,您可以做在电脑前进行各种各样的商务活动。
网络游戏:通过Internet,可以与全世界的玩家一起进行游戏对战,也可以协同作战。网络游戏已经成为信息产业全新的经济增长点,每年都为开发商带来巨额的利润。通过网络游戏,可以充分享受Internet给我们带来的乐趣。
网络电话:网络电话也称IP电话。它采用Internet技术,利用专门的网络电话软件,只需支付非常低廉的话费就可通话。Internet在电信市场上的应用将越来越广泛。
1.3 WWW的简介
WWW的全称为World Wide Web,含义是“环球网”,又称“万维网”、3W、Web。WWW是一个基于超文本(Hypertext)方式的信息检索服务工具。我们上网浏览到的网页就是这样的超文本,也就是HTML(Hypertext Mark-up Language,超文本标记语言)文件,这些网页文件被放置到WWW服务器上,并且都有一定的地址。当我们想浏览某个网站时,首先要在电脑上安装浏览器,如Internet Explorer或Netscape,然后在浏览器中输入网站的地址(网址),就可以进入网站进行浏览。在这些网页中,都有超连接,当将鼠标指针移动到某个地方(如文本或图象)时,鼠标指针就会变成一个小手形形状,单击它就可以连接到另个网页中,从而使得浏览者能在不同的信息之间跳转,我们之所以能在Internet的海洋中穿梭自如,正是超连接的功劳。
WWW 为我们带来的是世界范围的超级文本服务:只须操纵鼠标,就可以通过Internet从世界各地调来你所希望的文本、图像、动画和声音等信息。通过使用WWW,一个不熟悉网络使用的人也可以成为Internet的行家。
1.4网页基本构成元素
要学会制作网页,首先需要了解网页都是由什么元素构成的。
文字:文本是构成网页的基本元素。一个最简单的网页可以只有几行文本。
图片:正是有个各种美丽的图片,网页才变得多姿多彩。
动画:如今,网页上的动画越来越多,最常用的有GIF动画、Flash动画等。
超连接:如上所述,超连接几乎是必不可少的。一个没有超连接的网页,就如同汪洋大海中的一座孤岛,失去了与外界的一切联系。
其它元素:还可以在网页中添加声音、视频等元素。
1.5软件的安装与启动 要使用网站设计软件,自然先要将这些软件安装到自己的电脑中。安装完毕,还需要如何启动,如何创建快捷方式。下面就让我们来详细地看一看具体的操作步骤。
1.5.1软件的安装
安装之前,需要先了解软件对系统的要求。以Windows为例,系统要求如下: Intel Pentium II处理器或等效处理器,主频300MHz或更高。
Windows 98Windows 2000Windows NT(具有Service Pack 3 或更高版本)、Windows Me或Windows XP.Netscape Navigator 4.0版或更高版本或Microsoft Internet Explorer.96MB的可用内存(RAM),建议采用128MB内存。
分辨率可达 800×600像素的256色显示器(建议颜色为百万颜色,分辨率达到1024×768像素)。CD-ROM 驱动器。
检查一下您的计算机,看是否具备了以上条件。如果具备,将“Macromedia Studio MX”程序会自动运行。如果不能自动运行,可以找到光盘放入光驱,安装程序会自动运行。可以找到光盘中的“Install Macromedia Studio MX”程序或“Autorun”程序并双击运行。
Dreamweaver的安装比较容易,几乎可以自动完成。下面简要说明一下安装步骤。
操作步骤:
1、将安装光盘放入光驱,安装程序自动运行,并出现安装界面。如果单击安装界面上的“Macromedia STUDIO MX安装”,那么将会安装其下方所列出的软件。所有的安装会自动完成。
2、单击Dreamweaver MX,开始安装过装过程.先是出现解压缩文件窗口,等待一会儿,便会出现安装向导对话框。单击“下一步”按钮,继续安装过程。
3、出现“选择目的地位置”对话框,默认的盘是C盘,如果想安装到不同的位置,可以单击目的文件夹右边的“浏览”按钮,并在弹出的“选择文件夹”对话框选择不同的文件,如要安装在D盘则可直接将路径中的“C:”改为“D:”。也可以在下面的“目录”中选择其它的文件夹,设置完后,单击“确定”,回到“选择目的地址”对话框,单击“下一步”继续。
4、而后会出现“默认编辑器”的对话框,默认为全选。如果希望让Dreamweaver MX成为下面所列文件类型的默认编辑器,那么可以在这里做选择。选择完毕,单击“下一步”按钮。
5、出现“开始复制文件”对话框,单击“下一步”安装程序开始复制文件,过几分钟后,安装结束,单击“结束”按钮,结束安装。
1.5.2 软件启动
软件安装完毕后,我们就可以使用它了。安装程序已经自动在“开始”菜单中加入了快捷方式。
单击“开始”菜单,将鼠标指针依次指向“程序”|“Macromedia”|“Macromedia MX”,并在上面单击鼠标左键。
1.5.3 创建快捷方式 使用“开始”菜单启动程序的过程比较烦琐。可以在Windows桌面或快速启动栏上创建快捷方式,这样可以快速的启动程序。
具体实现方法是:在“开始”菜单中找到相应程序的快捷方式,不过这是不要用鼠标左键单击,而是用右键按住向桌面拖动,然后松开右键,会出现一个快捷菜单,在其中可以选择不同的命令,比如选择“在当前位置创建快捷方式”或“复制到当前位置”。
这样以后在运行程序时,就方便快捷的多了。
1.6 制作网页前的准备
电脑必备:
电脑速度够快,最好能够上网。操作系统:Windows 98/NT/Me/2000/XP.软件可选:
其它软件:看图软件ACDSee、图像处理软件Photoshop、上传工具CuteFTP、Fireworks、动画软件Flash等。
1.7 Dreamweaver MX的操作环境
我们将工作界面分成了“标题栏”、“菜单栏”、“快捷工具栏”、“属性面板”、“浮动控制面板”5个部分来分别介绍。
1.7.1 标题栏 Dreamweaver MX的“标题栏”中将显示文字“Macromedia Dreamweaver MX”如果打开网页的话,在后面还会显示该网页的一些信息,如网页标题、所在位置及网页名称,右边有三个钮,分别对应Dreamweaver MX的最大化最小化和关闭的操作。
1.7.2 菜单栏
“标题栏”下面就是“菜单栏”,栏中提供了“文件”、“编辑”、“查看”、“插入”、“修改”、“文本”、“站点”、“窗口”、“帮助”10项菜单。单击其中任意一项菜单,随即就会出现一个下拉式指令菜单。有些指令的右边会有键盘的代码,这是该指令的快捷键,熟练使用快捷键将会有助于提高工作效率。有些指令的右边会有一个小黑三角的标记,它代表该指令还包含下一级的指令,鼠标停留片刻即可显示。
1.7.3 快捷工具栏
“快捷工具栏”指的是“菜单栏”下边的3排按钮,选择菜单“查看/工具栏”,勾选里面的“插入”、“文档”和“标准”3项,完整的快捷工具栏就显现出来了。
1.7.4 属性面板
在网页编辑窗口的下面还有一个面板,它是有名的“属性面板”,它在这个软件中起到举足轻重的作用。
属性面板顾名思义,就是显示,调整属性的面板,根据鼠标所选中对象的不同,“属性面板”在界面上也会有所差异,用户可以分别对不同的对象进行调整。
第二章 网站制作实战
2.1 站点
2.1.1 创建站点
要制作一个网站,第一步操作都是一样的,就是要创造一个“站点”,这样可以使整个网站的脉络结构清晰地展现在面前,避免了以后再进行纷杂的管理。
从菜单中选择“站点/管理站点”在弹出的对话框中选择“新建”,之后再选择其中的“站点”,再次弹出一个对话框,在文本框中输入自己已经企化好的网站名称“追梦人”。
填好后,单击“下一步”,进入下一个步骤。由于我要做的是一个静态的网页,所以选择上面的一项“否,我不想使用服务器技术。” 单击“下一步”,进入下一个步骤。
在此选项中有两个选择,选择推荐的“编辑我的计算机上的本地副本,完成后再上传到服务器”。底下的文本框允许在本地磁盘上指定一个文件夹,Dreamweaver将在其中储存站点文件的本地副本。单击该文本框后面的文件夹图标,新建并指定一个空的文件夹“E:/ding”。之后单击“下一步“,进入下一个步骤。
这一步是如何设置连接到远程服务器,弹出式菜单中有6中选择,这里选择“无”。而后“下一步”再“完成”,即可。
2.1.2 创建站点内容
站点创建完成后,就可以创建Web页来填充站点了。在“右侧浮动面板组”中选择“文件/文件”面板,此时整个网站中没有任何内容。用鼠标右击面板中的本地根目录文件夹。在弹出的菜单中选择“新建文件”,新建一个文件后将其命名为“index.htm(或index.html),它就是未来的首页。
由于“追梦人”网站分为“平面设计”、“动画制作”、“网文精品”、“经典回顾”、“个人说明“这五个大栏目,所以继续用鼠标右击右侧,在弹出的菜单中选择第二项“New Folder(新建文件夹)”。执行五次操作,新建五个文件夹,并把它们重命名为graph、anim、books、music、letter,分别对应上面的五个大栏目。存放它们各自的内容。之后再次新建1个文件夹,命名为images,用来存放“所有的图象文件”的内容。
之后在个栏目的文件夹里还要建立想相应的栏目网页。
2.2 首页
2.2.1 设置首页布局
每个网站都会有一个首页,就功能上而言,它代表着一个网站的风格与特色,就网站架构上而言,它代表了网站的第一层架构,至于网站上其他Web页,原则上都必须通过首页来连接散播出去,可见首页是多么的重要。
首页是打开网站后在浏览器中显示的第一个页面。它是起什么名字通常要视Server端的设置,一般的有index.htm,default.htm或home.htm等,目前主要以index.htm的居多。当然,后缀名为html也是正确的。
具体设置方法是:右健单击“文件”浮动面板中的index.htm,在弹出的菜单中选择“设成首页”。
首页的布局有很多方法,在这里我所用到的是表格的“布局模式”。“布局”模式中的表格称为布局表格,单元格称为布局单元格。在绘制布局表格和布局单元格时,必须从“标准”模式切换到“布局”模式。直接单击“布局”按钮即可。操作步骤:
1、在“插入快捷栏”的“布局”分类中,单击“布局表格”按纽。
2、将变成“+”形状的鼠标光标放到编辑中网页上,在要绘制的地方进行拖动就可以进行创建了。(如果绘制的是第一个表格必须从网页的最左上角开始绘制)。
3、在这里要绘制多个表格,可以再次单击“布局表格”按纽进行绘制,也可以按住Ctrl键绘制多个表格。追梦人”网站首页的布局如图所示:
2.2.2设置首页的页面属性
首先双击“文件”浮动面板中的index.htm,进入页面的编辑窗口。右健单击空白区域,在菜单中选择“页面属性”,之后弹出“页面属性”对话框,若选择主菜单“修改/页面属性”项,也可以把打开该对话框。
在“页面属性”对话框中,左侧窗口显示“分类”,其中包括了“外观”、“链接”、“标题”、“标题/编码”、“跟踪图像”5项,右侧区域则显示各类中可以设置的项目。“追梦人”首页设置的属性如下图所示:
2.2.3查看和编辑头内容
一个网页文件结构上实际是由两部分组成,头(head)内容和主体(body)内容主体内容(body)是文档的主要部分,也是包含文本和图像等的可见部分。头内容(head)是除文档标题外的不可见部分,包含有文档类型、语言编码、搜索引擎的关键的关键字和内容指示器以及样式定义等重要信息,这些元器并不是每个页面都需要的,例如,可以仅为主页提供关键字。
下面就以首页为例,说明怎样插入较常用的头(head)内容。
单击“菜单拦”下面“插入快捷”的下拉列表,选择其中的HTML类,此时右侧将会显示该类中可以插入的对象快捷按钮,再次单击第2个按钮“文件头”旁边的下拉箭头,会弹出菜单,该项列出的便是即将插入的头内容。
2.2.4 插入图像
图像是网页中不可或缺的组成成份,恰当地使用图像,可以使网站充满生活生命力与说服力,吸引更多的浏览者,加深他们欣赏你网站的意愿。
另一方面,网页的容量大小是网站成功与否的一大关键因素。由于网络在传输上的限制,导致了下载的速度不可能太快,因此,网页的大小就不能太大,其中关键就在于图像的大小了,否则浏览者会失去等待的耐心,无论你的网站多么精彩也无济于事了。所以,在网面容量大小的问题上一定要重视。下面就来详细介绍对网页图像进行处理的操作步骤,以使得它们在保持图形美丽与网站风格搭配的基础上,图片文件能够变的更小。
1、首先将光标停留在要插入图像的位置,然后单击“菜单栏”下面“插入快健栏”的下拉表,选择其中的“常用”类,则右侧将会显示该类中可以插入的对象快键按钮。左起第5个即为“图像:图像”按钮,单击它右侧的下拉列表,选择第1项“图像”。
2、随即弹出“选择图像源文件”对话框。从计算机磁盘中选择想要插入的图像文件,或在URL编辑框中输入图像的路径和名称。下面的“相对于”下拉表框中,可选择文件URL地址的类型,如果选择“文档”选项,表示图像地址相对于当前文档;如果选择“站点根目录”选项,表示地址相对于根目录。在这里我要插入的是网站标志logo,插入logo图象,如图所示:
最后单击“确定”按钮,即可完成插入图像的操作。2.2.5插入多媒体
在Dreamweaver MX2004中,除了之前讲到的可以插入“图像”外,还可插入动画、声音、视频等媒体元素,如Flash,Shockwave,Applets,ActieX及格Midi声音文件等,并且还可以在Dreamweaver自身内插入Macromedia Flash MX2004按钮和文本对象,以及进行相关的后期处理和添加设计备注等操作。
在Dreamweaver MX 2004文档中,可以插入媒体文件包括Flash Shockwave影片、QuickTime、AVI java、applet Active X控件以及各种格式的音频文件。要在浏览器中播放放Flash 动画,必须在浏览器中集成“Flash 播放器(Flash Player)”。其中,Internet Explorer通过ActiveX控制来实现,Netscape Navigator则是通过相应的插件来实现的。在最新的Netscape Navigator和Internet Explorer浏览器中,均已集成了 Flash动画播放功能。操场作步骤:
步骤1 将光标停留在要插入Flash的位置,然后单击菜单栏下面“插入快捷栏”的下拉列表,选择其中的“常用”分类,右侧将会显示该类中可以插入的对象快捷按钮。左起第6个即为“媒体”按钮,单击它右侧的下拉列表,选择第1项Flash图标。
步骤2 在弹出的对话框中选择扩展名为swf 的Flash文件,即可将其插入到Dreamwe aver的“网页编辑窗口”中,可以看到,在这个窗口中Flash文件的大小。在这里我的主页插入的一个动画,如图所示:
2.2.6插入文本 文字是人类语言最基本的表达方式,在网页中,文本内容也可以说是重要的组成部分,一个网站成功与否,它是最关键的因素。在这最关键的因素。可丰富网站的文字内容,并以最最美观、最整齐的方式放入到网页中。插入文本的两种方式
网页中需要大量的文本,我们或以通过以下两种方式插入它们。
一种是在网页编辑窗口中直接用键盘敲入文本。这可以算是最基本的输入方式了,和一些文本编辑软件(如Microsoft Word)的使用方法一样,选择好习惯的输入法,就可以运指如飞了。
另一种是复制文本的方式。有些读者可能不喜欢使用Dreamweaver MX2004来进行打字的工作,而更习惯在专门的文本编辑软件中快速打字,如Microsoft Word和 Windows自带的记事本等,又或者读者已经准备好了要放入网页的文本的电子版本,那么我们就可以直接使用Dreamweaver的文本复制功能,将大段的文本内容拷贝到网页的编辑窗口来进行排版的工作,具体步骤如下。
打开文本编辑软件(如Microsoft Word),选中要复制的文本,它们将反白显示,执行菜单“编辑/复制”命令或直接用快捷键Ctrl+C,之后切换回Dreamweaver,将光标停留在插入文本的位置,执行主菜单“编辑/粘贴”命令或直接使用快捷键Ctrl+v,即可将大段的文本快速粘贴到网页中。
这在我的“网文精品”中用到很多,全部是在word软件中排好ctrl+c,然后点击要粘贴的位置,crtl+v到Dreamweaver即可。
2.3创建其它网页
还有其它的几个网站与主页的制作相同,一个网页是图象和文字的组合。“平面设计”中的图象插入和前面的介绍相似,并可以在属性拦中调节图象的大小。在Dreamwerver中常常会用到Firework、Flash,它们是相辅相成,在主页中的主体部分就是用Firework,如图所示:
在“个人说明”中也用到这点,首先定好需要尺寸,在属性中设好背景,颜色等等,插入图象,输入文字,也word里的操作雷同。
第三章 建立网页链接
网站实际上是由很多网页组成的,那么网页之间是如何联系的呢?这就是本章要讲的内容----网页的“链接”。
“链接”,又称“超链接"(Hyperlink),它作为网页的桥梁,起着相当重要的作用。网页中的很多对象都可以加入“链接”属性。在Dreamweaver MX2004中,如果以“链接”的媒介来划分的话,则“链接”可以分为“文字链接”、“图像链接”、“图像地图链接”、“内部链接和外部链接”、“E-mail链接”、“命名锚记链接”、“文件下载链接”和“跳转菜单”,共8种。其中部分内容在之前的章节中可能接触过,这里将对其进行更深入的讲解。
3.1文字链接
“文字链接”即以文字作为媒介的链接,它是网页中最常被使用的链接方式,具有“文件小、制作简单和便于维护”的特点。
接下来结合我的个人网站为实例,来讲解如何为文字建立“链接”。具体操作步骤如下所述。操作步骤
步骤1 准备好已经制作完成的首页的各个栏目页面(假设除了“链接”,其他内容都已经制作完成了),该网站包含6个栏目,这里的5个栏目----“平面设计”、“动画制作”和“网文精品”、“经典回顾”、“个人说明”为例来进行讲解。
步骤2 在Dreamweaver 中打开首页,之后反白选取作为“链接”的文字。实例中要做到单击不同的栏目的网页。因此为第1个栏目“平面设计”设置链接,首先要反白选中“平面设计”4个文字。
步骤3 观察“属性面板”,其中包括一个“链接”文本框。步骤4 接下来需要把链接的地址加入到文本框中,方法有3种。
这里我用到的是直接点击文件夹图标,在文件夹中找到要链接的对象graph.htm。这样就建立了超链接。不过有点很重要,由于大多数服务器都不支持中文文件名,而且对大小写敏感,因此采用英文文件名并统一大小写。如图所示:
步骤5 在“链接”文本框下面还有一个“目标”下拉列表,从中可以选择链接网页显示的窗口方式,共有4种。如图:
实例中没有选择任何选项,保持空白,表示在原窗口中打开链接网页。
步骤6 还可以设置一些“链接”的属性,这是前面讲过的内容。单击“属性面板”中的“页面属性”,选择其中的“链接”分类,可以进行的设置有“链接字体”、“大小”、“链接颜色”、“变换图像链接”颜色、“已访问链接”颜色、“活动链接”颜色及“下划线样式”。
步骤7 至此,第1个栏目的链接就制作完毕了,按下Ctrl+S保存网页,再按下F12预览,测试一下,当鼠标放在“平面设计”这4个文字上时将变成手形,并且浏览器窗口下面的状态栏中会显示链接到的网页的地址,单击文字,页面会立即跳转到第1个栏目中,这表示链接已经制作成功了。
步骤8 同理,按照以上步骤,再为“动画制作”和“网文精品”“经典回顾“等其它栏制作指向对应栏目的链接。
步骤9 通常在栏目页面中还需要有“返回首页”的链接,单击其后可以跳转回首页,因此在各个栏目中还要插入“网站首页”的文字,并且制作指向首页index.html的链接,制作方法不变。
至此,整个“文字链接”的实例就全就全部完成了。通过对这个实例的讲解,读者不仅应该学会如何为文字制作链接,还应用对“链接”有了更加深刻的理解,链接的目的何在?它到底能够在网页的网站中发挥什么样的作用?怎样才能更好地使用它?这些是网页制作者更应该思考的问题。下面继续介绍其他类型的链接。
3.2图像链接
“图像”也是常被使用的链接媒体,它和“文字链接”非常相似。为图像加入链接,首先应该在网页中插入“图像”,有关插入“图像”或“导航条”按钮的内容,接下来以我的网站“追梦人“为例,讲解如何建立“图像链接”。操作步骤
步骤1 首先仍然要准备好已经制作完成的首页和各个栏目的页面(假设除了“链接”,其他内容都已经制作完成了),该网站包含6个栏目,下面我们就动手为这6个栏目分别制作它们的链接。
步骤2 在Dreamweaver中打开网站的首页,之后选取要制作“链接”的图像。实例中先为第3个栏目“动画制作”设置链接,因此选中包含“动画制作”4个字的图像。步骤3 观察“属性面板”,在“链接”文本框中输入链接的文字地址。可以使用之前讲过的“指向文件”和“选择文件”的方法。
步骤4 如果有需要,可以在“目标”下拉列表中选择“链接”网页显示的窗口方式,分别为-blank、-parent、-self或 top。实例中使用了默认出的保留空白选项的方式。
步骤5 另外,读者还可以为图像增加“替代”文本。实例中为第1个栏目增加栏目名称的“替代”文本。
步骤6 至此,第1个栏目的图像链接就制作完毕了,按下Ctrl+S保存网页,再按下F12预览,测试一下,将鼠标放在“动画制作”4个文字上时将变成手形,同时浏览器窗口下面的状态栏中会显示出链接到的网页的地址,并且会显示出“替代”文本“动画制作”,单击文字,页面会立即跳转到第3个栏目中,这表示链接已经制作成功了。步骤7 同理,按照以上步骤,再为其它几幅图像制作指向对应栏目的链接。
步骤8 在栏目页面中制作“返回首页”的链接,使得单击后可以跳转回首页,其制作方法不变。
至此,整个“图像链像”的实例就全部完成了。
3.3E –Mail的链接
E-Mail链接,是指当浏览者单击该链接之后,不是打开一个网页文件,而是启动用户的E-Mail客户端软件(如Outlook Express),并打开一个空白的新邮件,供浏览者撰写内容来与网站联系人联系,这是一种最方便的互动方式。结合“个人说明”网页,建立E-Mail链接的步骤如下所述。操作步骤 步骤1 将光标停留在页面右下角要插入E-mail链接的位置。
步骤2 选择“插入快捷栏”中的“常用”分类,单击左侧第2个“电子邮件链接”按钮。
步骤3 在弹出的“电子邮件链接”对话框中有两个输入项,分别是“文本”和“E-Mail”。在“文本”项中输入链接的文字,中文、英文均可,在E-Mail项中输入网站联系有的电子邮件地址,如实例中的 ding_zhuimeng123@163.net。
步骤4 单击“确定”按钮,具有“E-Mail链接”属性的文本就ding_zhuimeng123@163.net。插入到光标所在位置了,按下 Ctrl+S保存网页,再按下F12预览查看实际效果。上面的方法只适用于文本的“E-Mail链接”,如果想在其它的对象(如图像)上也加入这种链接,该怎办呢?下面介绍第2种建立“E-Mail链接”的方法。
其实很简单,与前面讲过的图像加入链接的方法基本一样。先在页面中需要的地方插入图像,之后选中图像,并在“属性面板”的“链接”文本框中输入如下语句即可----mailto: ding_zhuimeng123@163.net ?subject=网站的建议与第1种方法不同的是,E-Mail 地址前面增加了mailto:字样。用这种方法就可以给图像等其他对象建立“E-Mail链接”了。
3.4文件下载链接
“文件下载链接”的原理很简单,只要链接文件属于浏览无法识别的关型,便都会使用IE浏览器直接进行下载,并保存到本地计算机中。
浏览器无法识别的文件类型有很多,这里就介绍一个最常用的,以zip或rar为后缀名的压缩格式文件,这种文件可以使用主流的压缩软件(如winzip、winrar)来制作。下面我们就业以实例来说明。在前面“插入多媒体”一章中,我们曾经讲过直接链接文件的方式来插入“视频”,即直接在“链接”文本框中输入“文件名+名后缀名”,如olympus.wmv。单日击这个链接,经过数据下载后,Windows系统将启动自带的媒体播放器Windows Media Player 来播放该视频。操作步骤
步骤1 先将视频文件olympus.wmv通压缩成olympus.rar文件,放入站点的media文件夹下。
步骤2 将文件路径输入至“链接”文本框中。
步骤3 保存网页,按下F12预览,在浏览器中单击“下载精彩广告视频”链接文本,会弹出“文本下载”选择框,单击其中的“保存”按钮。
步骤4 在“另存为”对框中选择保存到本地计算机中的位置,实例中为“经典回顾”文件夹。之后单击“保存”按钮,压缩文件即保存到该位置中。至此,“文件下载链接”便制作完成了。读者可以打开“我的文档”文件夹,解压缩olympus.rar文件,随时欣赏下载影片。
本设计中未用到此链接,在此只作简单介绍。
3.5在HTML语言中建立网页链接
3.5.1文字链接
在HTML语言中用超链接标记指向一个目标。其基本格式为: 举个简单的“文本链接”的实例,该实例相对应的HTML代码如下所示。 a href-“index2.html”target=”-blank”>平面设计
动画制作(原窗口,默认为空)
第三篇:个人网站的设计与实现 毕业设计(论文)
随着国际互联网的普及,很多人已经不满足仅仅在Internet上的浏览信息,而
是希望更深入的参与其中,拥有自己的Web网站,这似乎已经成为一种潮流。如果说个
人建立网站是为了追求时尚,那么企业建立网站就是必然的选择了。
无论是专业的,还是业余的,很多人对网页制作颇感兴趣。事实上制作一个简单的
网页并不困难,会使用Word的人都可以胜任。但想做出超凡脱俗的网页就不那么容易
了,而Dreamweaver却可以满足你的愿望,它是Macromedia公司开发的集网页制作和
网站管理于一身的所见即所得的网页编辑器。
同样出自Macromedia公司的Flash,Fireworks在制作网站的过程中起到了锦上添
花的作用,是个人网站实现的好帮手,在制作网站的时候经常会用到这些软件。
本文有五章,我来由浅到深介绍个人网站的设计与实现。
摘
摘摘
摘
要
要要 要
在互联网走进我们的生活之前,没有人敢梦想拥有自己的报纸、杂志、电台、电
视台。除了政策上的制约外,一个人也根本没有操作一份传播媒体的能力。现在不同了,互联网给我们提供了一个“表达自我”的自由天地,你可以拥有自己的新闻邮件,你可
以建立自己的个人网站。只要你办得成功也可以吸引成千上万的订户、读者,并建立自
己在众多参与者中的权威地位。建立个人网站的基本过程可以分为以下七个环节 : 1 了解中国网络个人主页研究背景与发展现状 系统需求分析与总体设计 熟悉网站开发模式、工具及环境 把自己的作品和想要展示的内容制作成网页。使用动态网页技术(ASP),实现动态内容更新。认真地选取测试用例,进行交叉测试 网站的后期完善、宣传及发展方向
其中 ,网页制作和使用动态网页技术(ASP)实现动态内容更新是网站开发的核心内容。
关键词:网页、制作、访问、链接
Abstract
目 录
第一章 引言
1.1 什么是Internet
1.2 Internet有哪些功能 1.3 www简介
1.4 网页基本构成元素
1.5 软件的安装与启动
1.5.1 软件的安装
1.5.2 软件的启动
1.5.3 创建快捷方式
1.6 制作网页前的准备
1.7 Dreamweaver的操作环境
1.7.1标题栏
1.7.2菜单栏
1.7.3快捷工具栏
1.7.4属性面板
第二章 网站制作实战
2.1 站点
2.1.1创建站点
2.1.2 创建站点内容
2.2 首页
2.2.1 设置首页布局
2.2.2 设置首页的页面属性 2.2.3 查看和编辑头内容
2.2.4 插入图像
2.2.5 插入多媒体 2.2.6 插入文本
2.3 创建其它网页
第三章 建立网页链接
3.1 文字链接
3.2 图像链接
3.3 E-Mail链接
3.4 文件下载链接
3.5 在HTML语言中建立网页链接
3.5.1 文字链接
3.5.2 图像链接
3.5.3 E-Mail链接
3.6.4 文件下载链接
第四章 结论
致 谢
参考文献
第一章
第一章第一章
第一章
预备知识
预备知识预备知识
预备知识
1.1
InternetInternet
Internet
Internet的中文名为“国际互联网”,又称“因特网”。
Internet是由众多的计算机网络互联而成的互联网,它覆盖了全世界各地,它是采
用开放系统协议的计算机通讯网络。然而,Internet不仅仅是计算机的互联网,它还是
全球最大的信息资源宝库,它提供了包括科研、教育、文化娱乐、商业和信息交流等各
种各样的服务,使得世界范围内的人与人之间的交流在时间和空间上变的更小了。
要了解Internet,就必须先了解局域网。我们可以将同一地点的许多计算机使用网
线连接在一起,构成一个高效率的计算机网络,所有处于网络内的终端机或电脑都能享
受网络内所有的资源,比如程序,图文资料等。这种计算机网络因为一般都局限在一定
区域中,我们称之为“局域网”(Local Area Network,简称LAN),它是在日常工作中
用得最多的一种小型计算机网络。局域网所覆盖的地理范围比较小,通常不超过几十公
里,甚至只在同一座建筑物内或者邻近的几座建筑内。像常见的校园网,一座写字楼内
部的网络等都属于局域网。
而Internet则不是指单个区域范围内的网络,而是指将全世界的各中不同类型的
计算机网络连接起来的一个全球性的网络。Internet上有取之不尽,用之不竭的信息资
源。对于Internet中各种各样的信息,所有的人都可以通过网络的连接来共享和使用。1.2
1.2 Internet有那些功能
Web页浏览:这是目前利用最广泛、最直接的互联网服务,通过浏览WWW(万维网)
中的网页,可以了解世界各地的新闻,查看最新的股市行情,最新的娱乐动态、科技发
明,找到众多的就业信息„„几乎想找到什么样的信息,就有什么信息。正是有了WWW、Internet才会变得如此丰富多彩,才能走进千家万户。信息发布:通过Internet,不仅可以浏览别人发布在Web页上的信息,也可以将
自己要发布的信息制作成Web页,也即网页,然后发布到Internet上,供全世界的人
浏览。
电子邮件:不同于传统邮件,电子邮件(E-mail)通过Internet传输,写信,发信,收信都在计算机上完成,一封电子邮件最短在一秒之内就可以发送出去,其效率是传统
邮件无法比拟的。而且发送与接收电子邮件几乎是免费的,所以比传统邮件既节省时间
又经济的多。
网上聊天:通过聊天软件(如QQ、ICQ等)或不同网站的聊天室,可以和世界各
地的网友聊天。网友可能是远在天边的异国朋友,也可能是与你一起工作的饿同事,或
者是一起生活的家人,在这里没有年龄、性别、身份、职业、国籍、肤色的限制,完全
突破了交友的传统方式,人们可通过Internet互相了解对方,进行各种各样的交流。
电子商务:现在网上交易已经成为现实,网上购物、网上商品销售、网上拍卖、企业级电子商务、网上货币支付等电子商务活动已经搞的有声有色,几乎所有的专家都
预测,在未来的几年内,电子商务会飞速发展。在不久的将来,您可以做在电脑前进行
各种各样的商务活动。
网络游戏:通过Internet,可以与全世界的玩家一起进行游戏对战,也可以协同
作战。网络游戏已经成为信息产业全新的经济增长点,每年都为开发商带来巨额的利润。
通过网络游戏,可以充分享受Internet给我们带来的乐趣。
网络电话:网络电话也称IP电话。它采用Internet技术,利用专门的网络电话
软件,只需支付非常低廉的话费就可通话。Internet在电信市场上的应用将越来越广泛。
1.3 WWW的简介
WWW的全称为World Wide Web,含义是“环球网”,又称“万维网”、3W、Web。
WWW是一个基于超文本(Hypertext)方式的信息检索服务工具。我们上网浏览到的网页就是这样的超文本,也就是HTML(Hypertext Mark-up Language,超文本标记语言)文件,这些网页文件被放置到WWW服务器上,并且都有一定的地址。当我们想浏览某个网站时,首先要在电脑上安装浏览器,如Internet Explorer或Netscape,然后在浏览器中输
入网站的地址(网址),就可以进入网站进行浏览。在这些网页中,都有超连接,当将
鼠标指针移动到某个地方(如文本或图象)时,鼠标指针就会变成一个小手形形状,单
击它就可以连接到另个网页中,从而使得浏览者能在不同的信息之间跳转,我们之所以
能在Internet的海洋中穿梭自如,正是超连接的功劳。
WWW 为我们带来的是世界范围的超级文本服务:只须操纵鼠标,就可以通过Inter net从世界各地调来你所希望的文本、图像、动画和声音等信息。通过使用WWW,一个
不熟悉网络使用的人也可以成为Internet的行家。
1.4网页基本构成元素
要学会制作网页,首先需要了解网页都是由什么元素构成的。
文字:文本是构成网页的基本元素。一个最简单的网页可以只有几行文本。
图片:正是有个各种美丽的图片,网页才变得多姿多彩。
动画:如今,网页上的动画越来越多,最常用的有GIF动画、Flash动画等。
超连接:如上所述,超连接几乎是必不可少的。一个没有超连接的网页,就如同汪
洋大海中的一座孤岛,失去了与外界的一切联系。
其它元素:还可以在网页中添加声音、视频等元素。
1.5软件的安装与启动
要使用网站设计软件,自然先要将这些软件安装到自己的电脑中。安装完毕,还需
要如何启动,如何创建快捷方式。下面就让我们来详细地看一看具体的操作步骤。
1.5.1软件的安装
安装之前,需要先了解软件对系统的要求。以Windows为例,系统要求如下:
Intel Pentium II处理器或等效处理器,主频300MHz或更高。
Windows 98Windows 2000Windows NT(具有Service Pack 3 或更高版本)、Windo
ws Me或Windows XP.Netscape Navigator 4.0版或更高版本或Microsoft Internet Explorer.96MB的可用内存(RAM),建议采用128MB内存。
分辨率可达 800×600像素的256色显示器(建议颜色为百万颜色,分辨率达到102
4×768像素)。
CD-ROM 驱动器。
检查一下您的计算机,看是否具备了以上条件。如果具备,将“Macromedia Stud
io MX”程序会自动运行。如果不能自动运行,可以找到光盘放入光驱,安装程序会自
动运行。可以找到光盘中的“Install Macromedia Studio MX”程序或“Autorun”程
序并双击运行。
Dreamweaver的安装比较容易,几乎可以自动完成。下面简要说明一下安装步骤。
操作步骤:
1、将安装光盘放入光驱,安装程序自动运行,并出现安装界面。如果单击安装界面
上的“Macromedia STUDIO MX安装”,那么将会安装其下方所列出的软件。所有的安装
会自动完成。
2、单击Dreamweaver MX,开始安装过装过程.先是出现解压缩文件窗口,等待一会儿,便会出现安装向导对话框。单击“下一步”按钮,继续安装过程。
3、出现“选择目的地位置”对话框,默认的盘是C盘,如果想安装到不同的位置,可以单击目的文件夹右边的“浏览”按钮,并在弹出的“选择文件夹”对话框选择不同 的文件,如要安装在D盘则可直接将路径中的“C:”改为“D:”。也可以在下面的“目
录”中选择其它的文件夹,设置完后,单击“确定”,回到“选择目的地址”对话框,单击“下一步”继续。
4、而后会出现“默认编辑器”的对话框,默认为全选。如果希望让Dreamweaver M
X成为下面所列文件类型的默认编辑器,那么可以在这里做选择。选择完毕,单击“下
一步”按钮。
5、出现“开始复制文件”对话框,单击“下一步”安装程序开始复制文件,过几
分钟后,安装结束,单击“结束”按钮,结束安装。
1.5.2 软件启动
软件安装完毕后,我们就可以使用它了。安装程序已经自动在“开始”菜单中加入
了快捷方式。
单击“开始”菜单,将鼠标指针依次指向“程序”|“Macromedia”|“MacromediaMX”,并在上面单击鼠标左键。
1.5.3 创建快捷方式
使用“开始”菜单启动程序的过程比较烦琐。可以在Windows桌面或快速启动栏上
创建快捷方式,这样可以快速的启动程序。
具体实现方法是:在“开始”菜单中找到相应程序的快捷方式,不过这是不要用
鼠标左键单击,而是用右键按住向桌面拖动,然后松开右键,会出现一个快捷菜单,在
其中可以选择不同的命令,比如选择“在当前位置创建快捷方式”或“复制到当前位置”。
这样以后在运行程序时,就方便快捷的多了。
1.6 制作网页前的准备
电脑必备:
电脑速度够快,最好能够上网。
操作系统:Windows XP.软件可选: 其它软件:看图软件美图秀秀 图像处理软件Photoshop、上传工具CuteFTP
1.7 Dreamweaver MX的操作环境
我们将工作界面分成了“标题栏”、“菜单栏”、“快捷工具栏”、“属性面板”、“浮动控制面板”5个部分来分别介绍。
1.7.1 标题栏
Dreamweaver MX的“标题栏”中将显示文字“Macromedia Dreamweaver MX”如果
打开网页的话,在后面还会显示该网页的一些信息,如网页标题、所在位置及网页名称,右边有三个钮,分别对应Dreamweaver MX的最大化最小化和关闭的操作。
1.7.2 菜单栏
“标题栏”下面就是“菜单栏”,栏中提供了“文件”、“编辑”、“查看”、“插
入”、“修改”、“文本”、“站点”、“窗口”、“帮助”10项菜单。单击其中任意
一项菜单,随即就会出现一个下拉式指令菜单。有些指令的右边会有键盘的代码,这是
该指令的快捷键,熟练使用快捷键将会有助于提高工作效率。有些指令的右边会有一个
小黑三角的标记,它代表该指令还包含下一级的指令,鼠标停留片刻即可显示。
1.7.3 快捷工具栏
“快捷工具栏”指的是“菜单栏”下边的3排按钮,选择菜单“查看/工具栏”,勾
选里面的“插入”、“文档”和“标准”3项,完整的快捷工具栏就显现出来了。
1.7.4 属性面板
在网页编辑窗口的下面还有一个面板,它是有名的“属性面板”,它在这个软件中
起到举足轻重的作用。
属性面板顾名思义,就是显示,调整属性的面板,根据鼠标所选中对象的不同,“属性
面板”在界面上也会有所差异,用户可以分别对不同的对象进行调整。
站点
2.1.1
创建站点
创建站点
要制作一个网站,第一步操作都是一样的,就是要创造一个“站点”,这样可以使
整个网站的脉络结构清晰地展现在面前,避免了以后再进行纷杂的管理。
从菜单中选择“站点/管理站点”在弹出的对话框中选择“新建”,之后再选择其
中的“站点”,再次弹出一个对话框,在文本框中输入自己已经企化好的网站名称“追
梦人”。
填好后,单击“下一步”,进入下一个步骤。由于我要做的是一个静态的网页,所以选择上面的一项“否,我不想使用服务器技术。”
单击“下一步”,进入下一个步骤。
在此选项中有两个选择,选择推荐的“编辑我的计算机上的本地副本,完成后再上
传到服务器”。底下的文本框允许在本地磁盘上指定一个文件夹,Dreamweaver将在其 中储存站点文件的本地副本。单击该文本框后面的文件夹图标,新建并指定一个空的文
件夹“E:/ding”。之后单击“下一步“,进入下一个步骤。
这一步是如何设置连接到远程服务器,弹出式菜单中有6中选择,这里选择“无”。
而后“下一步”再“完成”,即可。
2.1.2 创建站点内容
站点创建完成后,就可以创建Web页来填充站点了。在“右侧浮动面板组”中选择
“文件/文件”面板,此时整个网站中没有任何内容。用鼠标右击面板中的本地根目录
文件夹。在弹出的菜单中选择“新建文件”,新建一个文件后将其命名为“index.htm(或i
ndex.html),它就是未来的首页。
由于“追梦人”网站分为“平面设计”、“动画制作”、“网文精品”、“经典回
顾”、“个人说明“这五个大栏目,所以继续用鼠标右击右侧,在弹出的菜单中选择第
二项“New Folder(新建文件夹)”。执行五次操作,新建五个文件夹,并把它们重命
名为graph、anim、books、music、letter,分别对应上面的五个大栏目。存放它们各
自的内容。之后再次新建1个文件夹,命名为images,用来存放“所有的图象文件”的
内容。
之后在个栏目的文件夹里还要建立想相应的栏目网页。
2.2.1 设置首页布局
每个网站都会有一个首页,就功能上而言,它代表着一个网站的风格与特色,就网站
架构上而言,它代表了网站的第一层架构,至于网站上其他Web页,原则上都必须通过
首页来连接散播出去,可见首页是多么的重要。
首页是打开网站后在浏览器中显示的第一个页面。它是起什么名字通常要视Server端 的设置,一般的有index.htm,default.htm或home.htm等,目前主要以index.htm的
居多。当然,后缀名为html也是正确的。
具体设置方法是:右健单击“文件”浮动面板中的index.htm,在弹出的菜单中选择“设
成首页”。
首页的布局有很多方法,在这里我所用到的是表格的“布局模式”。“布局”模式中的表格称为布局表格,单元格称为布局单元格。在绘制布局表格和布局单元格时,必须从
“标准”模式切换到“布局”模式。直接单击“布局”按钮即可。
操作步骤:
1、在“插入快捷栏”的“布局”分类中,单击“布局表格”按纽。
2、将变成“+”形状的鼠标光标放到编辑中网页上,在要绘制的地方进行拖动
就可以进行创建了。(如果绘制的是第一个表格必须从网页的最左上角开始绘制)。
3、在这里要绘制多个表格,可以再次单击“布局表格”按纽进行绘制,也可
以按住Ctrl键绘制多个表格。追梦人”网站首页的布局如图所示:
2.2.2设置首页的页面属性
首先双击“文件”浮动面板中的index.htm,进入页面的编辑窗口。右健单击空白
区域,在菜单中选择“页面属性”,之后弹出“页面属性”对话框,若选择主菜单“修
改/页面属性”项,也可以把打开该对话框。
在“页面属性”对话框中,左侧窗口显示“分类”,其中包括了“外观”、“链
接”、“标题”、“标题/编码”、“跟踪图像”5项,右侧区域则显示各类中可以设置 的项目。“追梦人”首页设置的属性如下图所示:
2.2.3查看和编辑头内容
一个网页文件结构上实际是由两部分组成,头(head)内容和主体(body)内容
主体内容(body)是文档的主要部分,也是包含文本和图像等的可见部分。头内容(he
ad)是除文档标题外的不可见部分,包含有文档类型、语言编码、搜索引擎的关键的关键字和内容指示器以及样式定义等重要信息,这些元器并不是每个页面都需要的,例如,可以仅为主页提供关键字。
下面就以首页为例,说明怎样插入较常用的头(head)内容。
单击“菜单拦”下面“插入快捷”的下拉列表,选择其中的HTML类,此时右侧将
会显示该类中可以插入的对象快捷按钮,再次单击第2个按钮“文件头”旁边的下拉箭
头,会弹出菜单,该项列出的便是即将插入的头内容。
2.2.4 插入图像
图像是网页中不可或缺的组成成份,恰当地使用图像,可以使网站充满生活生命力
与说服力,吸引更多的浏览者,加深他们欣赏你网站的意愿。
另一方面,网页的容量大小是网站成功与否的一大关键因素。由于网络在传输上 的限制,导致了下载的速度不可能太快,因此,网页的大小就不能太大,其中关键就在
于图像的大小了,否则浏览者会失去等待的耐心,无论你的网站多么精彩也无济于事了。所以,在网面容量大小的问题上一定要重视。下面就来详细介绍对网页图像进行处理的
操作步骤,以使得它们在保持图形美丽与网站风格搭配的基础上,图片文件能够变的更
小。
1、首先将光标停留在要插入图像的位置,然后单击“菜单栏”下面“插入快健栏” 的下拉表,选择其中的“常用”类,则右侧将会显示该类中可以插入的对象快键按钮。
左起第5个即为“图像:图像”按钮,单击它右侧的下拉列表,选择第1项“图像”。
2、随即弹出“选择图像源文件”对话框。从计算机磁盘中选择想要插入的图像文件,或在URL编辑框中输入图像的路径和名称。下面的“相对于”下拉表框中,可选择文件
URL地址的类型,如果选择“文档”选项,表示图像地址相对于当前文档;如果选择“站
点根目录”选项,表示地址相对于根目录。在这里我要插入的是网站标志logo,插入l
ogo图象,如图所示:
最后单击“确定”按钮,即可完成插入图像的操作。2.2.5插入多媒体
在Dreamweaver MX2004中,除了之前讲到的可以插入“图像”外,还可插入动画、声音、视频等媒体元素,如Flash,Shockwave,Applets,ActieX及格Midi声音文件等,并且还可以在Dreamweaver自身内插入Macromedia Flash MX2004按钮和文本对象,以
及进行相关的后期处理和添加设计备注等操作。
在Dreamweaver MX 2004文档中,可以插入媒体文件包括Flash Shockwave影片、QuickTime、AVI java、applet Active X控件以及各种格式的音频文件。
要在浏览器中播放放Flash 动画,必须在浏览器中集成“Flash 播放器(Flash Play er)”。其中,Internet Explorer通过ActiveX控制来实现,Netscape Navigator则
是通过相应的插件来实现的。在最新的Netscape Navigator和Internet Explorer浏
览器中,均已集成了 Flash动画播放功能。操场作步骤:
步骤1 将光标停留在要插入Flash的位置,然后单击菜单栏下面“插入快捷栏”的下
拉列表,选择其中的“常用”分类,右侧将会显示该类中可以插入的对象快捷
按钮。左起第6个即为“媒体”按钮,单击它右侧的下拉列表,选择第1项Fl
ash图标。
步骤2 在弹出的对话框中选择扩展名为swf 的Flash文件,即可将其插入到Dreamwe
aver的“网页编辑窗口”中,可以看到,在这个窗口中Flash文件的大小。在
这里我的主页插入的一个动画,如图所示:
2.2.6插入文本
文字是人类语言最基本的表达方式,在网页中,文本内容也可以说是重要的组成
部分,一个网站成功与否,它是最关键的因素。在这最关键的因素。可丰富网站的文字
内容,并以最最美观、最整齐的方式放入到网页中。
插入文本的两种方式
网页中需要大量的文本,我们或以通过以下两种方式插入它们。
一种是在网页编辑窗口中直接用键盘敲入文本。这可以算是最基本的输入方式了,和一些文本编辑软件(如Microsoft Word)的使用方法一样,选择好习惯的输入法,就
可以运指如飞了。
另一种是复制文本的方式。有些读者可能不喜欢使用Dreamweaver MX2004来进行
打字的工作,而更习惯在专门的文本编辑软件中快速打字,如Microsoft Word和 Wind
ows自带的记事本等,又或者读者已经准备好了要放入网页的文本的电子版本,那么我
们就可以直接使用Dreamweaver的文本复制功能,将大段的文本内容拷贝到网页的编辑
窗口来进行排版的工作,具体步骤如下。
打开文本编辑软件(如Microsoft Word),选中要复制的文本,它们将反白显示,执行菜单“编辑/复制”命令或直接用快捷键Ctrl+C,之后切换回Dreamweaver,将光标
停留在插入文本的位置,执行主菜单“编辑/粘贴”命令或直接使用快捷键Ctrl+v,即可
将大段的文本快速粘贴到网页中。
这在我的“网文精品”中用到很多,全部是在word软件中排好ctrl+c,然后点击要
粘贴的位置,crtl+v到Dreamweaver即可。
2.3创建其它网页
还有其它的几个网站与主页的制作相同,一个网页是图象和文字的组合。“平面设计”中的图象插入和前面的介绍相似,并可以在属性拦中调节图象的大小。
在Dreamwerver中常常会用到Firework、Flash,它们是相辅相成,在主页中的主体部
分就是用Firework,如图所示:
在“个人说明”中也用到这点,首先定好需要尺寸,在属性中设好背景,颜色等
等,插入图象,输入文字,也word里的操作雷同。
3.建立网页链接
网站实际上是由很多网页组成的,那么网页之间是如何联系的呢?这就是本章要讲 的内容----网页的“链接”。“链接”,又称“超链接"(Hyperlink),它作为网页的桥梁,起着相当重要的作用。网页中的很多对象都可以加入“链接”属性。在Dreamweaver MX2004中,如果以“链
接”的媒介来划分的话,则“链接”可以分为“文字链接”、“图像链接”、“图像地图链接”、“内部链接和外部链接”、“E-mail链接”、“命名锚记链接”、“文件下载链接”和“跳转菜单”,共8种。其中部分内容在之前的章节中可能接触过,这里将对其进行更深入的讲解。3.1文字链接
“文字链接”即以文字作为媒介的链接,它是网页中最常被使用的链接方式,具
有“文件小、制作简单和便于维护”的特点。
接下来结合我的个人网站为实例,来讲解如何为文字建立“链接”。
具体操作步骤如下所述。操作步骤
步骤1 准备好已经制作完成的首页的各个栏目页面(假设除了“链接”,其他内容都
已经制作完成了),该网站包含6个栏目,这里的5个栏目----“平面设计”、“动画
制作”和“网文精品”、“经典回顾”、“个人说明”为例来进行讲解。
步骤2 在Dreamweaver 中打开首页,之后反白选取作为“链接”的文字。实例中要做
到单击不同的栏目的网页。因此为第1个栏目“平面设计”设置链接,首先要反白选中
“平面设计”4个文字。
步骤3 观察“属性面板”,其中包括一个“链接”文本框。
步骤4 接下来需要把链接的地址加入到文本框中,方法有3种。
这里我用到的是直接点击文件夹图标,在文件夹中找到要链接的对象graph.htm。这样
就建立了超链接。不过有点很重要,由于大多数服务器都不支持中文文件名,而且对大
小写敏感,因此采用英文文件名并统一大小写。如图所示:
步骤5 在“链接”文本框下面还有一个“目标”下拉列表,从中可以选择链接网页显示 的窗口方式,共有4种。如图:
实例中没有选择任何选项,保持空白,表示在原窗口中打开链接网页。
步骤6 还可以设置一些“链接”的属性,这是前面讲过的内容。单击“属性面板”中的 “页面属性”,选择其中的“链接”分类,可以进行的设置有“链接字体”、“大小”、“链接颜色”、“变换图像链接”颜色、“已访问链接”颜色、“活动链接”颜色及“下
划线样式”。
步骤7 至此,第1个栏目的链接就制作完毕了,按下Ctrl+S保存网页,再按下F12预
览,测试一下,当鼠标放在“平面设计”这4个文字上时将变成手形,并且浏览器窗口下面的状态栏中会显示链接到的网页的地址,单击文字,页面会立即跳转到第1个栏目
中,这表示链接已经制作成功了。
步骤8 同理,按照以上步骤,再为“动画制作”和“网文精品”“经典回顾“等其它栏
制作指向对应栏目的链接。
步骤9 通常在栏目页面中还需要有“返回首页”的链接,单击其后可以跳转回首页,因
此在各个栏目中还要插入“网站首页”的文字,并且制作指向首页index.html的链接,制作方法不变。
至此,整个“文字链接”的实例就全就全部完成了。通过对这个实例的讲解,读者不仅
应该学会如何为文字制作链接,还应用对“链接”有了更加深刻的理解,链接的目的何
在?它到底能够在网页的网站中发挥什么样的作用?怎样才能更好地使用它?这些是
网页制作者更应该思考的问题。
下面继续介绍其他类型的链接。
3.2
3.23.2
3.2图像链接
图像链接图像链接
图像链接
“图像”也是常被使用的链接媒体,它和“文字链接”非常相似。为图像加入链接,首
先应该在网页中插入“图像”,有关插入“图像”或“导航条”按钮的内容,接下来以
我的网站“追梦人“为例,讲解如何建立“图像链接”。
操作步骤
步骤1 首先仍然要准备好已经制作完成的首页和各个栏目的页面(假设除了“链接”,其他内容都已经制作完成了),该网站包含6个栏目,下面我们就动手为这6个栏目分
别制作它们的链接。
步骤2 在Dreamweaver中打开网站的首页,之后选取要制作“链接”的图像。实例中先
为第3个栏目“动画制作”设置链接,因此选中包含“动画制作”4个字的图像。步骤3 观察“属性面板”,在“链接”文本框中输入链接的文字地址。可以使用之前讲
过的“指向文件”和“选择文件”的方法。
步骤4 如果有需要,可以在“目标”下拉列表中选择“链接”网页显示的窗口方式,分
别为-blank、-parent、-self或 top。实例中使用了默认出的保留空白选项的方式。
步骤5 另外,读者还可以为图像增加“替代”文本。实例中为第1个栏目增加栏目名称 的“替代”文本。
步骤6 至此,第1个栏目的图像链接就制作完毕了,按下Ctrl+S保存网页,再按下F1 2预览,测试一下,将鼠标放在“动画制作”4个文字上时将变成手形,同时浏览器窗
口下面的状态栏中会显示出链接到的网页的地址,并且会显示出“替代”文本“动画制
作”,单击文字,页面会立即跳转到第3个栏目中,这表示链接已经制作成功了。
步骤7 同理,按照以上步骤,再为其它几幅图像制作指向对应栏目的链接。
步骤8 在栏目页面中制作“返回首页”的链接,使得单击后可以跳转回首页,其制作方
法不变。
至此,整个“图像链像”的实例就全部完成了。
3.3E
3.3E 3.3E
3.3E –
––
MailMail
Mail的链接 的链接的链接 的链接
E-Mail链接,是指当浏览者单击该链接之后,不是打开一个网页文件,而是启动用户的
E-Mail客户端软件(如Outlook Express),并打开一个空白的新邮件,供浏览者撰写
内容来与网站联系人联系,这是一种最方便的互动方式。
结合“个人说明”网页,建立E-Mail链接的步骤如下所述。
操作步骤 步骤1 将光标停留在页面右下角要插入E-mail链接的位置。步骤2 选择“插入快捷栏”中的“常用”分类,单击左侧第2个“电子邮件链接”按钮。
步骤3 在弹出的“电子邮件链接”对话框中有两个输入项,分别是“文本”和“E-Mai
l”。在“文本”项中输入链接的文字,中文、英文均可,在E-Mail项中输入网站联
系有的电子邮件地址,如实例中的 ding_zhuimeng123@163.net。
步骤4 单击“确定”按钮,具有“E-Mail链接”属性的文本就ding_zhuimeng123@163.net。插入到光标所在位置了,按下 Ctrl+S保存网页,再按下F12预览查看实际效果。
上面的方法只适用于文本的“E-Mail链接”,如果想在其它的对象(如图像)上也加入
这种链接,该怎办呢?下面介绍第2种建立“E-Mail链接”的方法。
其实很简单,与前面讲过的图像加入链接的方法基本一样。先在页面中需要的地方插入
图像,之后选中图像,并在“属性面板”的“链接”文本框中输入如下语句即可----ma
ilto: ding_zhuimeng123@163.net ?subject=网站的建议与第1种方法不同的是,E-Ma
il 地址前面增加了mailto:字样。用这种方法就可以给图像等其他对象建立“E-Mail
链接”了。
3.4
3.43.4
3.4文件下载链接
文件下载链接文件下载链接
文件下载链接
“文件下载链接”的原理很简单,只要链接文件属于浏览无法识别的关型,便都会使用 IE浏览器直接进行下载,并保存到本地计算机中。
浏览器无法识别的文件类型有很多,这里就介绍一个最常用的,以zip或rar为后缀名 的压缩格式文件,这种文件可以使用主流的压缩软件(如winzip、winrar)来制作。下
面我们就业以实例来说明。在前面“插入多媒体”一章中,我们曾经讲过直接链接文件的方式来插入“视频”,即
直接在“链接”文本框中输入“文件名+名后缀名”,如olympus.wmv。单日击这个链接,经过数据下载后,Windows系统将启动自带的媒体播放器Windows Media Player 来播
放该视频。
操作步骤
步骤1 先将视频文件olympus.wmv通压缩成olympus.rar文件,放入站点的media文件
夹下。
步骤2 将文件路径输入至“链接”文本框中。
步骤3 保存网页,按下F12预览,在浏览器中单击“下载精彩广告视频”链接文本,会
弹出“文本下载”选择框,单击其中的“保存”按钮。
步骤4 在“另存为”对框中选择保存到本地计算机中的位置,实例中为“经典回顾”文
件夹。之后单击“保存”按钮,压缩文件即保存到该位置中。至此,“文件下载链接”
便制作完成了。读者可以打开“我的文档”文件夹,解压缩olympus.rar文件,随时欣
赏下载影片。
本设计中未用到此链接,在此只作简单介绍。
3.5
3.53.5
3.5在在在
在HTML
HTMLHTML
HTML语言中建立网页链接
语言中建立网页链接语言中建立网页链接
语言中建立网页链接
3.5.1
3.5.13.5.1
3.5.1文字链接
文字链接文字链接
文字链接
在HTML语言中用超链接标记指向一个目标。其基本格式为: 举个简单的“文本链接”的实例,该实例相对应的HTML代码如下所示。
a href-“index2.html”target=”-blank”>平面设计(新开窗口,-blank)< /p>
动画制作(原窗口,默认为空)
第四篇:毕业设计(论文)个人网站的设计与实现
题目:个人网站实现技术
个人网站实现技术
个人网站的设计与实现
前 言
随着国际互联网的普及,很多人已经不满足仅仅在Internet上的浏览信息,而是希望更深入的参与其中,拥有自己的Web网站,这似乎已经成为一种潮流。如果说个人建立网站是为了追求时尚,那么企业建立网站就是必然的选择了。
无论是专业的,还是业余的,很多人对网页制作颇感兴趣。事实上制作一个简单的网页并不困难,会使用Word的人都可以胜任。但想做出超凡脱俗的网页就不那么容易了,而Dreamweaver却可以满足你的愿望,它是Macromedia公司开发的集网页制作和网站管理于一身的所见即所得的网页编辑器。
同样出自Macromedia公司的Flash,Fireworks在制作网站的过程中起到了锦上添花的作用,是个人网站实现的好帮手,在制作网站的时候经常会用到这些软件。
本文有五章,我来由浅到深介绍个人网站的设计与实现。
摘 要
在互联网走进我们的生活之前,没有人敢梦想拥有自己的报纸、杂志、电台、电视台。除了政策上的制约外,一个人也根本没有操作一份传播媒体的能力。现在不同了,互联网给我们提供了一个“表达自我”的自由天地,你可以拥有自己的新闻邮件,你可以建立自己的个人网站。只要你办得成功也可以吸引成千上万的订户、读者,并建立自己在众多参与者中的权威地位。建立个人网站的基本过程可以分为以下七个环节 : 1 了解中国网络个人主页研究背景与发展现状 2 系统需求分析与总体设计 3 熟悉网站开发模式、工具及环境 把自己的作品和想要展示的内容制作成网页。5 使用动态网页技术(ASP),实现动态内容更新。6 认真地选取测试用例,进行交叉测试 7 网站的后期完善、宣传及发展方向
其中 ,网页制作和使用动态网页技术(ASP)实现动态内容更新是网站开发的核心内容。
关键词:网页、制作、访问、链接 Abstract Enters before our life in the Internet, nobody dares to vainly hope for has own newspaper, the magazine, the broadcasting station, the television station.Besides the policy in restriction, a person simply has not also operated dissemination media the ability.Now has been different, Internet has provided to us “the expression” free world,You may have own news mail, you may establish own individual website.So long as you also manage the success to be possible to attract the tens of thousands of subscribers, the reader,And establishes oneself in the multitudinous participant's authoritative status.Establishes individual website the unit process to be possible to divide into following seven links: 1、understands the Chinese network individual main page research background and the development present situation 2 systems demands analysis and system design 3 familiar websites developments pattern, tool and environment 4 and wants own work the content which demonstrated to manufacture the homepage.5 uses dynamic homepages technology(ASP), realization dynamic content renewal.6 earnestly selects measured the test example, carries on the overlapping test 7 websites later periods consummate, the propaganda and the development direction Among them,The homepage manufacture and the use dynamic homepage technology(ASP)realizes the dynamic content renewal is the website development core content.Key word: Homepage, manufacture, visit, link
目 录 第一章 引言 1.1 什么是Internet 1.2 Internet有哪些功能 1.3 www简介
1.4 网页基本构成元素 1.5 软件的安装与启动 1.5.1 软件的安装 1.5.2 软件的启动 1.5.3 创建快捷方式 1.6 制作网页前的准备 1.7 Dreamweaver的操作环境 1.7.1标题栏 1.7.2菜单栏 1.7.3快捷工具栏 1.7.4属性面板 第二章 网站制作实战 2.1 站点 2.1.1创建站点 2.1.2 创建站点内容 2.2 首页
2.2.1 设置首页布局 2.2.2 设置首页的页面属性 2.2.3 查看和编辑头内容 2.2.4 插入图像 2.2.5 插入多媒体 2.2.6 插入文本 2.3 创建其它网页 第三章 建立网页链接 3.1 文字链接 3.2 图像链接 3.3 E-Mail链接 3.4 文件下载链接
3.5 在HTML语言中建立网页链接 3.5.1 文字链接 3.5.2 图像链接 3.5.3 E-Mail链接 3.6.4 文件下载链接 第四章 结论 致 谢 参考文献
第一章 预备知识
1.1 什么是Internet Internet的中文名为“国际互联网”,又称“因特网”。
Internet是由众多的计算机网络互联而成的互联网,它覆盖了全世界各地,它是采用开放系统协议的计算机通讯网络。然而,Internet不仅仅是计算机的互联网,它还是全球最大的信息资源宝库,它提供了包括科研、教育、文化娱乐、商业和信息交流等各种各样的服务,使得世界范围内的人与人之间的交流在时间和空间上变的更小了。
要了解Internet,就必须先了解局域网。我们可以将同一地点的许多计算机使用网线连接在一起,构成一个高效率的计算机网络,所有处于网络内的终端机或电脑都能享受网络内所有的资源,比如程序,图文资料等。这种计算机网络因为一般都局限在一定区域中,我们称之为“局域网”(Local Area Network,简称LAN),它是在日常工作中用得最多的一种小型计算机网络。局域网所覆盖的地理范围比较小,通常不超过几十公里,甚至只在同一座建筑物内或者邻近的几座建筑内。像常见的校园网,一座写字楼内部的网络等都属于局域网。
而Internet则不是指单个区域范围内的网络,而是指将全世界的各中不同类型的计算机网络连接起来的一个全球性的网络。Internet上有取之不尽,用之不竭的信息资源。对于Internet中各种各样的信息,所有的人都可以通过网络的连接来共享和使用。
1.2 Internet有那些功能
Web页浏览:这是目前利用最广泛、最直接的互联网服务,通过浏览WWW(万维网)中的网页,可以了解世界各地的新闻,查看最新的股市行情,最新的娱乐动态、科技发明,找到众多的就业信息„„几乎想找到什么样的信息,就有什么信息。正是有了WWW、Internet才会变得如此丰富多彩,才能走进千家万户。信息发布:通过Internet,不仅可以浏览别人发布在Web页上的信息,也可以将自己要发布的信息制作成Web页,也即网页,然后发布到Internet上,供全世界的人浏览。
电子邮件:不同于传统邮件,电子邮件(E-mail)通过Internet传输,写信,发信,收信都在计算机上完成,一封电子邮件最短在一秒之内就可以发送出去,其效率是传统邮件无法比拟的。而且发送与接收电子邮件几乎是免费的,所以比传统邮件既节省时间又经济的多。
网上聊天:通过聊天软件(如QQ、ICQ等)或不同网站的聊天室,可以和世界各地的网友聊天。网友可能是远在天边的异国朋友,也可能是与你一起工作的饿同事,或者是一起生活的家人,在这里没有年龄、性别、身份、职业、国籍、肤色的限制,完全突破了交友的传统方式,人们可通过Internet互相了解对方,进行各种各样的交流。
电子商务:现在网上交易已经成为现实,网上购物、网上商品销售、网上拍卖、企业级电子商务、网上货币支付等电子商务活动已经搞的有声有色,几乎所有的专家都预测,在未来的几年内,电子商务会飞速发展。在不久的将来,您可以做在电脑前进行各种各样的商务活动。
网络游戏:通过Internet,可以与全世界的玩家一起进行游戏对战,也可以协同作战。网络游戏已经成为信息产业全新的经济增长点,每年都为开发商带来巨额的利润。通过网络游戏,可以充分享受Internet给我们带来的乐趣。
网络电话:网络电话也称IP电话。它采用Internet技术,利用专门的网络电话软件,只需支付非常低廉的话费就可通话。Internet在电信市场上的应用将越来越广泛。
1.3 WWW的简介
WWW的全称为World Wide Web,含义是“环球网”,又称“万维网”、3W、Web。WWW是一个基于超文本(Hypertext)方式的信息检索服务工具。我们上网浏览到的网页就是这样的超文本,也就是HTML(Hypertext Mark-up Language,超文本标记语言)文件,这些网页文件被放置到WWW服务器上,并且都有一定的地址。当我们想浏览某个网站时,首先要在电脑上安装浏览器,如Internet Explorer或Netscape,然后在浏览器中输入网站的地址(网址),就可以进入网站进行浏览。在这些网页中,都有超连接,当将鼠标指针移动到某个地方(如文本或图象)时,鼠标指针就会变成一个小手形形状,单击它就可以连接到另个网页中,从而使得浏览者能在不同的信息之间跳转,我们之所以能在Internet的海洋中穿梭自如,正是超连接的功劳。
WWW 为我们带来的是世界范围的超级文本服务:只须操纵鼠标,就可以通过Internet从世界各地调来你所希望的文本、图像、动画和声音等信息。通过使用WWW,一个不熟悉网络使用的人也可以成为Internet的行家。
1.4网页基本构成元素
要学会制作网页,首先需要了解网页都是由什么元素构成的。
文字:文本是构成网页的基本元素。一个最简单的网页可以只有几行文本。
图片:正是有个各种美丽的图片,网页才变得多姿多彩。
动画:如今,网页上的动画越来越多,最常用的有GIF动画、Flash动画等。
超连接:如上所述,超连接几乎是必不可少的。一个没有超连接的网页,就如同汪洋大海中的一座孤岛,失去了与外界的一切联系。
其它元素:还可以在网页中添加声音、视频等元素。
1.5软件的安装与启动 要使用网站设计软件,自然先要将这些软件安装到自己的电脑中。安装完毕,还需要如何启动,如何创建快捷方式。下面就让我们来详细地看一看具体的操作步骤。
1.5.1软件的安装
安装之前,需要先了解软件对系统的要求。以Windows为例,系统要求如下: Intel Pentium II处理器或等效处理器,主频300MHz或更高。
Windows 98Windows 2000Windows NT(具有Service Pack 3 或更高版本)、Windows Me或Windows XP.Netscape Navigator 4.0版或更高版本或Microsoft Internet Explorer.96MB的可用内存(RAM),建议采用128MB内存。
分辨率可达 800×600像素的256色显示器(建议颜色为百万颜色,分辨率达到1024×768像素)。CD-ROM 驱动器。
检查一下您的计算机,看是否具备了以上条件。如果具备,将“Macromedia Studio MX”程序会自动运行。如果不能自动运行,可以找到光盘放入光驱,安装程序会自动运行。可以找到光盘中的“Install Macromedia Studio MX”程序或“Autorun”程序并双击运行。
Dreamweaver的安装比较容易,几乎可以自动完成。下面简要说明一下安装步骤。
操作步骤:
1、将安装光盘放入光驱,安装程序自动运行,并出现安装界面。如果单击安装界面上的“Macromedia STUDIO MX安装”,那么将会安装其下方所列出的软件。所有的安装会自动完成。
2、单击Dreamweaver MX,开始安装过装过程.先是出现解压缩文件窗口,等待一会儿,便会出现安装向导对话框。单击“下一步”按钮,继续安装过程。
3、出现“选择目的地位置”对话框,默认的盘是C盘,如果想安装到不同的位置,可以单击目的文件夹右边的“浏览”按钮,并在弹出的“选择文件夹”对话框选择不同的文件,如要安装在D盘则可直接将路径中的“C:”改为“D:”。也可以在下面的“目录”中选择其它的文件夹,设置完后,单击“确定”,回到“选择目的地址”对话框,单击“下一步”继续。
4、而后会出现“默认编辑器”的对话框,默认为全选。如果希望让Dreamweaver MX成为下面所列文件类型的默认编辑器,那么可以在这里做选择。选择完毕,单击“下一步”按钮。
5、出现“开始复制文件”对话框,单击“下一步”安装程序开始复制文件,过几分钟后,安装结束,单击“结束”按钮,结束安装。
1.5.2 软件启动
软件安装完毕后,我们就可以使用它了。安装程序已经自动在“开始”菜单中加入了快捷方式。
单击“开始”菜单,将鼠标指针依次指向“程序”|“Macromedia”|“Macromedia MX”,并在上面单击鼠标左键。
1.5.3 创建快捷方式 使用“开始”菜单启动程序的过程比较烦琐。可以在Windows桌面或快速启动栏上创建快捷方式,这样可以快速的启动程序。
具体实现方法是:在“开始”菜单中找到相应程序的快捷方式,不过这是不要用鼠标左键单击,而是用右键按住向桌面拖动,然后松开右键,会出现一个快捷菜单,在其中可以选择不同的命令,比如选择“在当前位置创建快捷方式”或“复制到当前位置”。
这样以后在运行程序时,就方便快捷的多了。
1.6 制作网页前的准备
电脑必备:
电脑速度够快,最好能够上网。操作系统:Windows 98/NT/Me/2000/XP.软件可选:
其它软件:看图软件ACDSee、图像处理软件Photoshop、上传工具CuteFTP、Fireworks、动画软件Flash等。
1.7 Dreamweaver MX的操作环境
我们将工作界面分成了“标题栏”、“菜单栏”、“快捷工具栏”、“属性面板”、“浮动控制面板”5个部分来分别介绍。
1.7.1 标题栏 Dreamweaver MX的“标题栏”中将显示文字“Macromedia Dreamweaver MX”如果打开网页的话,在后面还会显示该网页的一些信息,如网页标题、所在位置及网页名称,右边有三个钮,分别对应Dreamweaver MX的最大化最小化和关闭的操作。
1.7.2 菜单栏
“标题栏”下面就是“菜单栏”,栏中提供了“文件”、“编辑”、“查看”、“插入”、“修改”、“文本”、“站点”、“窗口”、“帮助”10项菜单。单击其中任意一项菜单,随即就会出现一个下拉式指令菜单。有些指令的右边会有键盘的代码,这是该指令的快捷键,熟练使用快捷键将会有助于提高工作效率。有些指令的右边会有一个小黑三角的标记,它代表该指令还包含下一级的指令,鼠标停留片刻即可显示。
1.7.3 快捷工具栏
“快捷工具栏”指的是“菜单栏”下边的3排按钮,选择菜单“查看/工具栏”,勾选里面的“插入”、“文档”和“标准”3项,完整的快捷工具栏就显现出来了。
1.7.4 属性面板
在网页编辑窗口的下面还有一个面板,它是有名的“属性面板”,它在这个软件中起到举足轻重的作用。
属性面板顾名思义,就是显示,调整属性的面板,根据鼠标所选中对象的不同,“属性面板”在界面上也会有所差异,用户可以分别对不同的对象进行调整。
第二章 网站制作实战
2.1 站点
2.1.1 创建站点
要制作一个网站,第一步操作都是一样的,就是要创造一个“站点”,这样可以使整个网站的脉络结构清晰地展现在面前,避免了以后再进行纷杂的管理。
从菜单中选择“站点/管理站点”在弹出的对话框中选择“新建”,之后再选择其中的“站点”,再次弹出一个对话框,在文本框中输入自己已经企化好的网站名称“追梦人”。
填好后,单击“下一步”,进入下一个步骤。由于我要做的是一个静态的网页,所以选择上面的一项“否,我不想使用服务器技术。” 单击“下一步”,进入下一个步骤。
在此选项中有两个选择,选择推荐的“编辑我的计算机上的本地副本,完成后再上传到服务器”。底下的文本框允许在本地磁盘上指定一个文件夹,Dreamweaver将在其中储存站点文件的本地副本。单击该文本框后面的文件夹图标,新建并指定一个空的文件夹“E:/ding”。之后单击“下一步“,进入下一个步骤。
这一步是如何设置连接到远程服务器,弹出式菜单中有6中选择,这里选择“无”。而后“下一步”再“完成”,即可。
2.1.2 创建站点内容
站点创建完成后,就可以创建Web页来填充站点了。在“右侧浮动面板组”中选择“文件/文件”面板,此时整个网站中没有任何内容。用鼠标右击面板中的本地根目录文件夹。在弹出的菜单中选择“新建文件”,新建一个文件后将其命名为“index.htm(或index.html),它就是未来的首页。
由于“追梦人”网站分为“平面设计”、“动画制作”、“网文精品”、“经典回顾”、“个人说明“这五个大栏目,所以继续用鼠标右击右侧,在弹出的菜单中选择第二项“New Folder(新建文件夹)”。执行五次操作,新建五个文件夹,并把它们重命名为graph、anim、books、music、letter,分别对应上面的五个大栏目。存放它们各自的内容。之后再次新建1个文件夹,命名为images,用来存放“所有的图象文件”的内容。
之后在个栏目的文件夹里还要建立想相应的栏目网页。
2.2 首页
2.2.1 设置首页布局
每个网站都会有一个首页,就功能上而言,它代表着一个网站的风格与特色,就网站架构上而言,它代表了网站的第一层架构,至于网站上其他Web页,原则上都必须通过首页来连接散播出去,可见首页是多么的重要。
首页是打开网站后在浏览器中显示的第一个页面。它是起什么名字通常要视Server端的设置,一般的有index.htm,default.htm或home.htm等,目前主要以index.htm的居多。当然,后缀名为html也是正确的。
具体设置方法是:右健单击“文件”浮动面板中的index.htm,在弹出的菜单中选择“设成首页”。
首页的布局有很多方法,在这里我所用到的是表格的“布局模式”。“布局”模式中的表格称为布局表格,单元格称为布局单元格。在绘制布局表格和布局单元格时,必须从“标准”模式切换到“布局”模式。直接单击“布局”按钮即可。操作步骤:
1、在“插入快捷栏”的“布局”分类中,单击“布局表格”按纽。
2、将变成“+”形状的鼠标光标放到编辑中网页上,在要绘制的地方进行拖动就可以进行创建了。(如果绘制的是第一个表格必须从网页的最左上角开始绘制)。
3、在这里要绘制多个表格,可以再次单击“布局表格”按纽进行绘制,也可以按住Ctrl键绘制多个表格。追梦人”网站首页的布局如图所示:
2.2.2设置首页的页面属性
首先双击“文件”浮动面板中的index.htm,进入页面的编辑窗口。右健单击空白区域,在菜单中选择“页面属性”,之后弹出“页面属性”对话框,若选择主菜单“修改/页面属性”项,也可以把打开该对话框。
在“页面属性”对话框中,左侧窗口显示“分类”,其中包括了“外观”、“链接”、“标题”、“标题/编码”、“跟踪图像”5项,右侧区域则显示各类中可以设置的项目。“追梦人”首页设置的属性如下图所示:
2.2.3查看和编辑头内容
一个网页文件结构上实际是由两部分组成,头(head)内容和主体(body)内容主体内容(body)是文档的主要部分,也是包含文本和图像等的可见部分。头内容(head)是除文档标题外的不可见部分,包含有文档类型、语言编码、搜索引擎的关键的关键字和内容指示器以及样式定义等重要信息,这些元器并不是每个页面都需要的,例如,可以仅为主页提供关键字。
下面就以首页为例,说明怎样插入较常用的头(head)内容。
单击“菜单拦”下面“插入快捷”的下拉列表,选择其中的HTML类,此时右侧将会显示该类中可以插入的对象快捷按钮,再次单击第2个按钮“文件头”旁边的下拉箭头,会弹出菜单,该项列出的便是即将插入的头内容。
2.2.4 插入图像
图像是网页中不可或缺的组成成份,恰当地使用图像,可以使网站充满生活生命力与说服力,吸引更多的浏览者,加深他们欣赏你网站的意愿。
另一方面,网页的容量大小是网站成功与否的一大关键因素。由于网络在传输上的限制,导致了下载的速度不可能太快,因此,网页的大小就不能太大,其中关键就在于图像的大小了,否则浏览者会失去等待的耐心,无论你的网站多么精彩也无济于事了。所以,在网面容量大小的问题上一定要重视。下面就来详细介绍对网页图像进行处理的操作步骤,以使得它们在保持图形美丽与网站风格搭配的基础上,图片文件能够变的更小。
1、首先将光标停留在要插入图像的位置,然后单击“菜单栏”下面“插入快健栏”的下拉表,选择其中的“常用”类,则右侧将会显示该类中可以插入的对象快键按钮。左起第5个即为“图像:图像”按钮,单击它右侧的下拉列表,选择第1项“图像”。
2、随即弹出“选择图像源文件”对话框。从计算机磁盘中选择想要插入的图像文件,或在URL编辑框中输入图像的路径和名称。下面的“相对于”下拉表框中,可选择文件URL地址的类型,如果选择“文档”选项,表示图像地址相对于当前文档;如果选择“站点根目录”选项,表示地址相对于根目录。在这里我要插入的是网站标志logo,插入logo图象,如图所示:
最后单击“确定”按钮,即可完成插入图像的操作。2.2.5插入多媒体
在Dreamweaver MX2004中,除了之前讲到的可以插入“图像”外,还可插入动画、声音、视频等媒体元素,如Flash,Shockwave,Applets,ActieX及格Midi声音文件等,并且还可以在Dreamweaver自身内插入Macromedia Flash MX2004按钮和文本对象,以及进行相关的后期处理和添加设计备注等操作。
在Dreamweaver MX 2004文档中,可以插入媒体文件包括Flash Shockwave影片、QuickTime、AVI java、applet Active X控件以及各种格式的音频文件。要在浏览器中播放放Flash 动画,必须在浏览器中集成“Flash 播放器(Flash Player)”。其中,Internet Explorer通过ActiveX控制来实现,Netscape Navigator则是通过相应的插件来实现的。在最新的Netscape Navigator和Internet Explorer浏览器中,均已集成了 Flash动画播放功能。操场作步骤:
步骤1 将光标停留在要插入Flash的位置,然后单击菜单栏下面“插入快捷栏”的下拉列表,选择其中的“常用”分类,右侧将会显示该类中可以插入的对象快捷按钮。左起第6个即为“媒体”按钮,单击它右侧的下拉列表,选择第1项Flash图标。
步骤2 在弹出的对话框中选择扩展名为swf 的Flash文件,即可将其插入到Dreamwe aver的“网页编辑窗口”中,可以看到,在这个窗口中Flash文件的大小。在这里我的主页插入的一个动画,如图所示:
2.2.6插入文本 文字是人类语言最基本的表达方式,在网页中,文本内容也可以说是重要的组成部分,一个网站成功与否,它是最关键的因素。在这最关键的因素。可丰富网站的文字内容,并以最最美观、最整齐的方式放入到网页中。插入文本的两种方式
网页中需要大量的文本,我们或以通过以下两种方式插入它们。
一种是在网页编辑窗口中直接用键盘敲入文本。这可以算是最基本的输入方式了,和一些文本编辑软件(如Microsoft Word)的使用方法一样,选择好习惯的输入法,就可以运指如飞了。
另一种是复制文本的方式。有些读者可能不喜欢使用Dreamweaver MX2004来进行打字的工作,而更习惯在专门的文本编辑软件中快速打字,如Microsoft Word和 Windows自带的记事本等,又或者读者已经准备好了要放入网页的文本的电子版本,那么我们就可以直接使用Dreamweaver的文本复制功能,将大段的文本内容拷贝到网页的编辑窗口来进行排版的工作,具体步骤如下。
打开文本编辑软件(如Microsoft Word),选中要复制的文本,它们将反白显示,执行菜单“编辑/复制”命令或直接用快捷键Ctrl+C,之后切换回Dreamweaver,将光标停留在插入文本的位置,执行主菜单“编辑/粘贴”命令或直接使用快捷键Ctrl+v,即可将大段的文本快速粘贴到网页中。
这在我的“网文精品”中用到很多,全部是在word软件中排好ctrl+c,然后点击要粘贴的位置,crtl+v到Dreamweaver即可。
2.3创建其它网页
还有其它的几个网站与主页的制作相同,一个网页是图象和文字的组合。“平面设计”中的图象插入和前面的介绍相似,并可以在属性拦中调节图象的大小。在Dreamwerver中常常会用到Firework、Flash,它们是相辅相成,在主页中的主体部分就是用Firework,如图所示:
在“个人说明”中也用到这点,首先定好需要尺寸,在属性中设好背景,颜色等等,插入图象,输入文字,也word里的操作雷同。
第三章 建立网页链接
网站实际上是由很多网页组成的,那么网页之间是如何联系的呢?这就是本章要讲的内容----网页的“链接”。
“链接”,又称“超链接"(Hyperlink),它作为网页的桥梁,起着相当重要的作用。网页中的很多对象都可以加入“链接”属性。在Dreamweaver MX2004中,如果以“链接”的媒介来划分的话,则“链接”可以分为“文字链接”、“图像链接”、“图像地图链接”、“内部链接和外部链接”、“E-mail链接”、“命名锚记链接”、“文件下载链接”和“跳转菜单”,共8种。其中部分内容在之前的章节中可能接触过,这里将对其进行更深入的讲解。
3.1文字链接
“文字链接”即以文字作为媒介的链接,它是网页中最常被使用的链接方式,具有“文件小、制作简单和便于维护”的特点。
接下来结合我的个人网站为实例,来讲解如何为文字建立“链接”。具体操作步骤如下所述。操作步骤
步骤1 准备好已经制作完成的首页的各个栏目页面(假设除了“链接”,其他内容都已经制作完成了),该网站包含6个栏目,这里的5个栏目----“平面设计”、“动画制作”和“网文精品”、“经典回顾”、“个人说明”为例来进行讲解。
步骤2 在Dreamweaver 中打开首页,之后反白选取作为“链接”的文字。实例中要做到单击不同的栏目的网页。因此为第1个栏目“平面设计”设置链接,首先要反白选中“平面设计”4个文字。
步骤3 观察“属性面板”,其中包括一个“链接”文本框。步骤4 接下来需要把链接的地址加入到文本框中,方法有3种。
这里我用到的是直接点击文件夹图标,在文件夹中找到要链接的对象graph.htm。这样就建立了超链接。不过有点很重要,由于大多数服务器都不支持中文文件名,而且对大小写敏感,因此采用英文文件名并统一大小写。如图所示:
步骤5 在“链接”文本框下面还有一个“目标”下拉列表,从中可以选择链接网页显示的窗口方式,共有4种。如图:
实例中没有选择任何选项,保持空白,表示在原窗口中打开链接网页。
步骤6 还可以设置一些“链接”的属性,这是前面讲过的内容。单击“属性面板”中的“页面属性”,选择其中的“链接”分类,可以进行的设置有“链接字体”、“大小”、“链接颜色”、“变换图像链接”颜色、“已访问链接”颜色、“活动链接”颜色及“下划线样式”。
步骤7 至此,第1个栏目的链接就制作完毕了,按下Ctrl+S保存网页,再按下F12预览,测试一下,当鼠标放在“平面设计”这4个文字上时将变成手形,并且浏览器窗口下面的状态栏中会显示链接到的网页的地址,单击文字,页面会立即跳转到第1个栏目中,这表示链接已经制作成功了。
步骤8 同理,按照以上步骤,再为“动画制作”和“网文精品”“经典回顾“等其它栏制作指向对应栏目的链接。
步骤9 通常在栏目页面中还需要有“返回首页”的链接,单击其后可以跳转回首页,因此在各个栏目中还要插入“网站首页”的文字,并且制作指向首页index.html的链接,制作方法不变。
至此,整个“文字链接”的实例就全就全部完成了。通过对这个实例的讲解,读者不仅应该学会如何为文字制作链接,还应用对“链接”有了更加深刻的理解,链接的目的何在?它到底能够在网页的网站中发挥什么样的作用?怎样才能更好地使用它?这些是网页制作者更应该思考的问题。下面继续介绍其他类型的链接。
3.2图像链接
“图像”也是常被使用的链接媒体,它和“文字链接”非常相似。为图像加入链接,首先应该在网页中插入“图像”,有关插入“图像”或“导航条”按钮的内容,接下来以我的网站“追梦人“为例,讲解如何建立“图像链接”。操作步骤
步骤1 首先仍然要准备好已经制作完成的首页和各个栏目的页面(假设除了“链接”,其他内容都已经制作完成了),该网站包含6个栏目,下面我们就动手为这6个栏目分别制作它们的链接。
步骤2 在Dreamweaver中打开网站的首页,之后选取要制作“链接”的图像。实例中先为第3个栏目“动画制作”设置链接,因此选中包含“动画制作”4个字的图像。步骤3 观察“属性面板”,在“链接”文本框中输入链接的文字地址。可以使用之前讲过的“指向文件”和“选择文件”的方法。
步骤4 如果有需要,可以在“目标”下拉列表中选择“链接”网页显示的窗口方式,分别为-blank、-parent、-self或 top。实例中使用了默认出的保留空白选项的方式。
步骤5 另外,读者还可以为图像增加“替代”文本。实例中为第1个栏目增加栏目名称的“替代”文本。
步骤6 至此,第1个栏目的图像链接就制作完毕了,按下Ctrl+S保存网页,再按下F12预览,测试一下,将鼠标放在“动画制作”4个文字上时将变成手形,同时浏览器窗口下面的状态栏中会显示出链接到的网页的地址,并且会显示出“替代”文本“动画制作”,单击文字,页面会立即跳转到第3个栏目中,这表示链接已经制作成功了。步骤7 同理,按照以上步骤,再为其它几幅图像制作指向对应栏目的链接。
步骤8 在栏目页面中制作“返回首页”的链接,使得单击后可以跳转回首页,其制作方法不变。
至此,整个“图像链像”的实例就全部完成了。
3.3E –Mail的链接
E-Mail链接,是指当浏览者单击该链接之后,不是打开一个网页文件,而是启动用户的E-Mail客户端软件(如Outlook Express),并打开一个空白的新邮件,供浏览者撰写内容来与网站联系人联系,这是一种最方便的互动方式。结合“个人说明”网页,建立E-Mail链接的步骤如下所述。操作步骤 步骤1 将光标停留在页面右下角要插入E-mail链接的位置。
步骤2 选择“插入快捷栏”中的“常用”分类,单击左侧第2个“电子邮件链接”按钮。
步骤3 在弹出的“电子邮件链接”对话框中有两个输入项,分别是“文本”和“E-Mail”。在“文本”项中输入链接的文字,中文、英文均可,在E-Mail项中输入网站联系有的电子邮件地址,如实例中的 ding_zhuimeng123@163.net。
步骤4 单击“确定”按钮,具有“E-Mail链接”属性的文本就ding_zhuimeng123@163.net。插入到光标所在位置了,按下 Ctrl+S保存网页,再按下F12预览查看实际效果。上面的方法只适用于文本的“E-Mail链接”,如果想在其它的对象(如图像)上也加入这种链接,该怎办呢?下面介绍第2种建立“E-Mail链接”的方法。
其实很简单,与前面讲过的图像加入链接的方法基本一样。先在页面中需要的地方插入图像,之后选中图像,并在“属性面板”的“链接”文本框中输入如下语句即可----mailto: ding_zhuimeng123@163.net ?subject=网站的建议与第1种方法不同的是,E-Mail 地址前面增加了mailto:字样。用这种方法就可以给图像等其他对象建立“E-Mail链接”了。
3.4文件下载链接
“文件下载链接”的原理很简单,只要链接文件属于浏览无法识别的关型,便都会使用IE浏览器直接进行下载,并保存到本地计算机中。
浏览器无法识别的文件类型有很多,这里就介绍一个最常用的,以zip或rar为后缀名的压缩格式文件,这种文件可以使用主流的压缩软件(如winzip、winrar)来制作。下面我们就业以实例来说明。在前面“插入多媒体”一章中,我们曾经讲过直接链接文件的方式来插入“视频”,即直接在“链接”文本框中输入“文件名+名后缀名”,如olympus.wmv。单日击这个链接,经过数据下载后,Windows系统将启动自带的媒体播放器Windows Media Player 来播放该视频。操作步骤
步骤1 先将视频文件olympus.wmv通压缩成olympus.rar文件,放入站点的media文件夹下。
步骤2 将文件路径输入至“链接”文本框中。
步骤3 保存网页,按下F12预览,在浏览器中单击“下载精彩广告视频”链接文本,会弹出“文本下载”选择框,单击其中的“保存”按钮。
步骤4 在“另存为”对框中选择保存到本地计算机中的位置,实例中为“经典回顾”文件夹。之后单击“保存”按钮,压缩文件即保存到该位置中。至此,“文件下载链接”便制作完成了。读者可以打开“我的文档”文件夹,解压缩olympus.rar文件,随时欣赏下载影片。
本设计中未用到此链接,在此只作简单介绍。
3.5在HTML语言中建立网页链接
3.5.1文字链接
在HTML语言中用超链接标记指向一个目标。其基本格式为: 举个简单的“文本链接”的实例,该实例相对应的HTML代码如下所示。 a href-“index2.html”target=”-blank”>平面设计
动画制作(原窗口,默认为空)
第五篇:班级网站设计与实现
沈阳化工学院
本科毕业论文
题 目: 班级网站设计与实现 院 系: 计算机科学与技术学院 专 业: 计算机科学与技术 班 级: 计算机0802 学生姓名: 金智宇 指导教师: 张 丽
论文提交日期:2012年06月20日 论文答辩日期:2012年06月26日
I
内容摘要
随着人类的进步,网络技术不断发展和计算机的普及,越来越多的人拥有自己电脑,让人们的生活更快捷和丰富,并且丰富人类的精神世界和物质世界,让人类最便捷地获取信息,找到所求,让人类的生活更快乐。
网络的普及越来越多的学校和班级通过计算机网来管理各项事务。同时,学生与学生之间通过网络来交流的方式也日趋频繁。在这种潮流的趋势下,应该采用什么样的方式来更好的管理学生各项信息和班级各项日常事务,以及怎么是学生之间能更好的交流,成为一个问题。
班级网站设计是为了合理的利用网络资源,提供班级与交流、有管理班级事务的网络平台。本网站基于B/S模式,在ASP.NET集成开发的环境下采用C#语言开发完成。本网站有班级介绍、班级相册、同学登陆、班级留言、学习空间、休闲等模块。网站的设计体现个性化要求。其中同学登陆模块实现了用户注册、登陆与修改个人资料等功能;班级相册实现图片上传和在线浏览功能;班级留言实现网上留言功能;提供交流平台。本网站 促进班级学生的学习交流,实现用户自由访问,增加同学们的相互了解,增强班级凝聚力。
关键词: 网站建设、网站运营、ASP.NET|、SQL server 2005
II
Abstract With the progress of mankind, the continuous development of network technology and the proliferation of computers, more and more people have their own computer to make people's lives more efficient and rich, and enrich our spiritual world and physical world, human access to the most convenientinformation, find what we seek to make human life happier.More and more schools and classes of the popularity of the network through the computer network to manage the affairs.At the same time, the way to communicate through the network between the students and the students become more frequent.In this fashion trends, what way should be used with good management students all the information and classes the daily affairs, and how better communication between students, become a problem.The class website is designed to use the network resources to provide classes and exchanges, to manage class affairs network platform.This site is based on B / S mode, ASP.NET integrated development environment using C # language developed.This site have a class, class album, the students landing, message classes, learning space, leisure and other modules.The site design reflects the individual requirements.Students landing module user registration, login and modify personal information;class album image upload and
III
online feature;class message Message function;provide an exchange platform.This site to promote the exchange of classes students learn to achieve the users the freedom to access, increase mutual understanding of the students, and enhance class cohesion.Key words: Website building、website operators、ASP.NET|、server 2005
IV
SQL
目录
班级网站设计与实现.........................................................................1 一.绪论..........................................................................................1 1.1 课题背景来源和发展意义..........................................................1 1.1.1 课题背景.............................................................................1 1.1.2 课题来源.............................................................................1
二.开发工具与开发技术..................................................................3 2.1 开发技术...................................................................................3 2.1.1 ASP.NET技术....................................................................3
2.2 开发工具...................................................................................4 2.2.1 SQL server 2005数据库.....................................................4
2.3 开发环境...................................................................................5 2.3.1 Visual Studio.NET2010开发环境.....................................5 2.3.2 CSS样式表在HTML中的实现............................................7
三.方案设计与论证........................................................................9 3.1 项目概述与需求分析.................................................................9 3.1.1 目标....................................................................................9 3.1.2 用户的特点..........................................................................9
V
3.1.3 假定和约束..........................................................................9
3.2 设计中的图表..........................................................................10 3.2.1 对功能的规定....................................................................10 3.2.2 网站结构图:....................................................................11 3.2.3 类图..................................................................................12
3.3 测试........................................................................................12 3.3.1 软件测试...........................................................................12
四.设计与实现..............................................................................14 4.1 网站框架和代码......................................................................14 4.1.1 添加用户...........................................................................14 4.1.2 管理用户...........................................................................15
4.2 网站首页.................................................................................15 4.2.1 班级首页...........................................................................15 图4.2.1班级首页.........................................................................16 4.2.2 网站首页部分代码.............................................................16
4.3 网站介绍.................................................................................18 4.3.1 班级介绍...........................................................................18 4.3.2 班级介绍部分代码.............................................................19
4.4 资源共享.................................................................................22 4.4.1 资源共享介绍....................................................................22 4.4.2 连接代码...........................................................................22
VI
4.5 专业课程.................................................................................23 4.5.1 课程信息...........................................................................23 4.5.2 专业课程部分代码.............................................................23
4.6 班级通讯.................................................................................24 4.6.1 通讯界面...........................................................................24 4.6.2 班级通讯部分代码.............................................................25
4.7 留言飞语.................................................................................27 4.7.1 留言界面...........................................................................27 4.7.2 同学留言部分代码.............................................................27
4.8 联系方式.................................................................................29 4.8.1 管理员联系界面.................................................................29 4.8.2 联系方式部分代码.............................................................29
五.结果与评价..............................................................................31 六.结论.........................................................................................32
VII 沈阳化工学院学士学位论文
第一章 绪
论
班级网站设计与实现
一.绪论
1.1 课题背景来源和发展意义
1.1.1 课题背景
随着互联网的进一步发展与成熟,网络的带宽进一步加阔,网络应用也越来越广泛。网页制作更是日新月异,层出不穷。涌现了很多琳琅满目的网站,使得整个互联网多姿多彩。网页功能分析就是以系统的观点,对已选定的对象与开发范围进行有目的、有步骤的实际调查和科学分析。分析的目的就是要弄清楚网页要做什么,最终为后面的设计工作打下基础。需求分析是制作一个网站的第一步。在制作网站之前,首先要了解客户的需要和要求。这些必要的信息包括客户所要表达的理念、界面显示的内容和栏目的要求、网站功能方面的要求等。根据客户的具体情况,需求也会有所差别。本网站是针对班级同学而设计的网站,主要是便于同学联系例如聚会、发布班级信息等系列的通知,同时本网站还针对同学们的需求建立个人信息空间,可以建立个人影集,彰显每个同学的个性与风采,相当于一个“便携式”的聊天平台,无论同学们以后身在那里我们都可以在茶余饭后对我们现在也或是过去进行讨论,彼此交换心得体会,更加了解班级的概况,增强同学之间交流。
1.1.2 课题来源
大学时代的同学之情是最真挚的一份感情。没有任何一个时代的学生比现在的学生们更加渴望言论自由,渴望情感交流。但在学分制条件下,快节奏的学习生活、越来越少的集体活动时间使同班同学之间的交流也日益困难。大学班级网站的建立为现实世界中的班级提供了一个非正式交往的虚拟平台,它为班级每一个成员都提供了平等、自由的发言机会,使相互的交流跨越了时间和空间的樊篱,也打破了男女间、寝室间的障碍。沈阳化工学院学士学位论文
第一章 绪
论
为了满足班级网站的交流目的。本网站包括:班级简介、班级相册、班级登陆、班级留言、学习交流、论坛等模块。班级简介模块,作为班级总体介绍平台,极少班级的建设,班级成员,班级成绩等;班级相册模块,包括用户上传图片以及图片的浏览功能,实现与数据库的衔接;班级登陆模块,包括注册和登陆两个子模块,通过注册可以成为班级成员,在通过登录拥有访问网站各项功能的权限;班级留言模块,实现用户的在线留言;班级论坛模块,论坛模块主要实现注册用户能在此网站平台之上交流,一般用户可以回复别人的发言,亦可提出自己的言论,一伙的其他人的建议和意见;
本系统使用ASP。Net技术的动态网页与SQL server2000数据库结合设计建立的一个班级网站。用户首先通过内部网络访问本站进行简单的注册并经营管理员审核通过后,即拥有了使用本网站上所提供的出管理模块的各项功能的权利。功能模块包括班级留言、班级相册、学习交流等,论坛社区提供用户之间的主要交流平台,用户可以发起自己的帖子,来引起班级其他同学的对本帖的讨论或回复,同时用户也可以对自己或别人的帖子提出自己的见解,从而很好地促进了班级内同学的交流。班级留言提供网上留言功能。留言可以使班级的老师班长或其他同学的留言,通过网络的迅捷的传输率达到快速的了解及处理班级各项事务的目的。班级相册可以将班级内同学的相册传到网站上自由浏览,增加班级的亲和力。以及以上功能很好的解决上面所提出的问题 沈阳化工学院学士学位论文
第二章 开发工具与开发技术
二.开发工具与开发技术
2.1 开发技术
2.1.1 ASP.NET技术
AS.PNET是一种建立在通用语言上的程序结构,能被用于一台Web服务器来建立强大的Web应用程序。ASP.NET是在服务器上运行的编译好的公共语言运行库,利用早期的绑定、实时编译、本机优化和盒外缓存服务,着相当于在编写代码行之前便显著提高了性能。另外,由于ASP.NET框架补充了Visual Studio 集成开发环境,想必ASP,使程序设计相对简化,结构更为清晰
ASP.NET的前身ASP技术,是在IIS 2.0上首次推出(Windows NT 3.51),当时与 ADO 1.0 一起推出,在IIS 3.0(Windows NT 4.0)发扬光大,成为服务器端应用程序的热门开发工具,微软还 特别为它量身打造了Visual InterDev开发工具,在1994年到2000年之间,ASP技术已经成为微软推展Windows NT 4.0平台的关键技术之一,数以万计的ASP网站也是这个时候开始如雨后春笋般的出现在网络上。它的简单以及高度可定制化的能力,也是它能迅速崛起的原因 之一。不过ASP的缺点也逐渐的浮现出来:
意大利面型的程序开发方法,让维护的难度提高很多,尤其是大型的ASP应用程序。直译式的VBScript或JScript语言,让效能有些许的受限。延展性因为其基础架构扩充性不足而受限,虽然有COM元件可用,但开发一些特殊功能(像文件上传)时,没有来自内置的支持,需要寻求第三方软件商开发的元件。1997年时,微软开始针对ASP的缺点(尤其是意大利面型的程序开发方法)准备开始一个新项目来开发,当时ASP.NET的主要领导人Scott Guthrie刚从杜克大学毕业,他和IIS团队的Mark Anders经理一起合作两个月,开发出了下一代ASP技术的原型,这个原型在1997年的圣诞节时被发展出来,并给予一个名称:XSP,这个原型产品使用的是Java语言。不过它马上就被纳入当时还在开发中的CLR平台,Scott Guthrie事后也认为将这个技术移植到当时的CLR平台,确实有很大的风险(huge risk),但当时的XSP团 沈阳化工学院学士学位论文
第二章 开发工具与开发技术
队却是以CLR开发应用的第一个团队。
为了将XSP移植到CLR中,XSP团队将XSP的内核程序全部以C#语言重新撰写(在内部的项目代号是 “Project Cool”,但是当时对公开场合是保密的),并且改名为ASP+,作为ASP技术的后继者,并且也会提供一个简单的移转方法给ASP开发人员。ASP+首次的Beta版本以及应用在PDC 2000中亮相,由Bill Gates主讲Keynote(即关键技术的概览),由富士通公司展示使用COBOL语言撰写ASP+应用程序,并且宣布它可以使用Visual Basic.NET、C#、Perl与Python语言(后两者由ActiveState公司开发的互通工具支持)来开发。
在2000年第二季时,微软正式推动.NET策略,ASP+也顺理成章的改名为ASP.NET,经过四年的开发,第一个版本的ASP.NET在2002年1月5日亮相(和.NET Framework 1.0),Scott Guthrie也成为ASP.NET的产品经理(到现在已经开发了数个微软产品,像ASP.NET AJAX和Microsoft Silverlight)。目前最新版本的 ASP.NET 4.0 以及.NET Framework 4.0 已经在VS2010平台内应用。
2.2 开发工具
2.2.1 SQL server 2005数据库
数据库是信息的集合,是指长期存储在计算机内的、有组织的、可共享的数据集合。数据库中的数据按一定的数据模型组织、描述和储存,具有较小的冗余度、较高的数据独立性和易扩展性,并可为各种用户共享。例如,记录客户信息、网络通讯录等。以往会将这些数据记录到纸上或是计算机某个文件中,如果要修改或查询则要消费大量时间。现在人们借助计算机和数据库技术科学地保存和管理大量的复杂的数据,以便能方便而充分的利用这些宝贵的信息资源。数据被规整地存储起来,修改和查询只需几条SQL语句就完成了。
Internet集成。SQL Server 2005 数据库引擎提供完整的XML 支持。它还具有构成最大的Web 站点的数据存储组件所需的可伸缩性、可用性和安全功能。SQL Server 2000 程序设计模型与 Windows DNA 构架集成,用以开发 Web 应用程序,并且SQL Server 2005 支持 English Query 和 Microsoft 搜索服务等功能,在Web 应用程序中包含了用户友好的查询和强大的搜索功能。沈阳化工学院学士学位论文
第二章 开发工具与开发技术
2.可伸缩性和可用性。同一个数据库引擎可以在不同的平台上使用,从运行 Microsoft Windowsreg;98 的便携式电脑,到运行 Microsoft Windows 2000 数据中心版的大型多处理器服务器。SQL Server 2005 企业版支持联合服务器、索引视图和大型内存支持等功能,使其得以升级到最大 Web 站点所需的性能级别。
3.企业级数据库功能。SQL Server 2005 关系数据库引擎支持当今苛刻的数据处理环境所需的功能。数据库引擎充分保护数据完整性,同时将管理上千个并发修改数据库的用户的开销减到最小。SQL Server 2005 分布式查询使您得以引用来自不同数据源的数据,就好像这些数据是 SQL Server 2005 数据库的一部分,同时分布式事务支持充分保护任何分布式数据更新的完整性。复制同样使您得以维护多个数据复本,同时确保单独的数据复本保持同步。可将一组数据复制到多个移动的脱接用户,使这些用户自主地工作,然后将他们所做的修改合并会发布服务器。
4.易于安装、部署和使用。SQL Server 2005 中包括一系列管理和开发工具,这些工具可改进在多个站点上安装、部署、管理和使用 SQL Server 的过程。SQL Server 2005 还支持基于标准的、与 Windows DNA 集成的程序设计模型,使 SQL Server 数据库和数据仓库的使用成为生成强大的可伸缩系统的无缝部分。这些功能使您得以快速交付 SQL Server 应用程序,使客户只需最少的安装和管理开销即可实现这些应用程序。
2.3 开发环境
2.3.1 Visual Studio.NET2010开发环境
1998 年,微软公司发布了 Visual Studio 6.0。所有开发语言的开发环境版本均升至 6.0。这也是 Visual Basic 最后一次发布,从下一个版本(7.0)开始,Microsoft Basic 进化成了一种新的面向对象的语言:Microsoft Basic NET。由于微软公司对于 Sun 公司 Java 语言扩充导致与 Java 虚拟机不 兼容被 Sun 告上法庭,微软在后续的 Visual Studio 中不再包括面向 Java 虚拟机的开发环境。Visual Studio 97 是最早的 Visual Studio 版本。包含有面向 Windows 开发使用的 Visual Basic 5.0、Visual C++5.0,面向 Java开发的 Visual J++和 面向数据库开发的 Visual FoxPro,还包含有创建 DHTML(Dynamic HTML)所需要的 Visual InterDev。其中,Visual Basic 和 沈阳化工学院学士学位论文
第二章 开发工具与开发技术
Visual FoxPro 使用单独的开发环境,其他的开发语言使用统一的开发环境。
2002 年,随着.NET 口号的提出与 Windows XP / Office XP 的发布,微软发布了 Visual Studio.NET(内部版本号为 7.0)。在这个版本的 Visual Studio 中,微软剥离了 Visual FoxPro 作为一个单独的开发环境以 Visual FoxPro 7.0 单独销售,同时取消了 Visual InterDev。与此同时,微软引入了建立在.NET 框架上(版本1.0)的托管代码机制以及一门新的语言 C#(读作 C Sharp,意为 C#)。C# 是一门建立在 C++和 Java 基础上的现代语言,是编写.NET 框架的语言。
.NET 的通用语言框架机制(Common Language Runtime, CLR),其目的是在同一个项目中支持不同的语言所开发的组件。所有 CLR 支持的代码都会被解释成为 CLR 可执行的机器代码然后运行。
Visual Basic、Visual C++ 都被扩展为支持托管代码机制的开发环境,且 Visual Basic.NET更是从 Visual Basic 脱胎换骨,彻底支持面向对象的编程机制。而 Visual J++ 也变为 Visual J#。后者仅语法同 Java 相同,但是面向的不是 Java 虚拟机,而是.NET Framework。
2003 年,微软对 Visual Studio 2002 进行了部分修订,以 Visual Studio 2003 的名义发布(内部版本号为 7.1)。Visio 作为使用统一建模语言(UML)架构应用程序框架的程序被引入,同时被引入的还包括移动设备支持和企业模版。.NET 框架也升级到了 1.1。
2005 年,微软发布了 Visual Studio 2005。.NET 字眼从各种语言的名字中被抹去,但是这个版本的 Visual Studio 仍然还是面向.NET 框架的(版本2.0)。
这个版本的 Visual Studio 包含有众多版本,分别面向不同的开发角色。同时还永久提供免费的 Visual Studio Express 版本。
随着即将发布的 Windows Vista和 Office 2007,Visual Studio 9 也渐渐浮出水面。Visual Studio 9 目前可以确定的是支持建立于 DHTML 基础上的 Ajax 技术,这种微软在 Visual InterDev 时代提出的基于异步的客户端动 态网页技术在当年并没有像微软预期中的那么流行起来,反而随着 Gmail 等应用而东山再起,渐渐成为主流网络应用之一。同时 Visual Studio 9 会强化对于数据库的支持以及微软新的基于工作流(Workflow)的编程模型。预计为了保持与 Office 系列的统一,Visual Studio 9 的名称为 Visual Studio 2007。沈阳化工学院学士学位论文
第二章 开发工具与开发技术
2007年11月,微软发布了 Visual Studio 2008 英文版,2008年2月14日发布了简体中文专业版。
2010年4月12微软发布Visual Studio 2010以及.NET Framework 4.0,并于2010年5月26发布了中文版
Visual Studio.NET2010是Microsoft推出.NET应用程序开发工具。Visual Studio,我们一般都简称为VS,Visual Studio其实是微软开发的一套工具集,它由各种各样的工具组成,这就好像Office 2007时由Word 2007、Excel 2007、Access 2007等等组成的一个道理。其中Visual C++就是Visual Studio的一个重要的组成部分。Visual Studio可以用于生成Web应用程序,也可以生成桌面应用程序,在Visual Studio下面,除了VC,还有Visual C#,Visual Basec,过去还有Visual J#,现在还有Visual F#等等组件工具,使用这些工具你可以使用C++语言C#语言或者Basic语言进行开发。这就好比桌上放着刀、叉、筷子,你可以用它来吃饭,无论它们都是餐具的一种
2.3.2 CSS样式表在HTML中的实现
在HTML网页中加入CSS并不是只有一种方法,在不同的情况下,可以采用不同的方法,比较常用的有下面几中。
1.嵌入式样式表
嵌入式样式表的实现很简单,只需在每个要应用样式的HTML标签后写上CSS属性即可。例如要设置指定表格中的文字的样式为红色,字号为10pt,可在当前表格的