资源描述
( 此文档为 word 格式，下载后您可任意编辑修改！)随着国际互联网的普及，很多人已经不满足仅仅在Internet上的浏览信息，而是希望更深入的参与其中，拥有自己的Web网站，这似乎已经成为一种潮流。如果说个人建立网站是为了追求时尚，那么企业建立网站就是必然的选择了。无论是专业的，还是业余的，很多人对网页制作颇感兴趣。事实上制作一个简单的网页并不困难，会使用Word 的人都可以胜任。但想做出超凡脱俗的网页就不那么容易了，而 Dreamweaver 却可以满足你的愿望，它是Macromedia 公司开发的集网页制作和网站管理于一身的所见即所得的网页编辑器。同样出自Macromedia 公司的 Flash,Fireworks在制作网站的过程中起到了锦上添花的作用，是个人网站实现的好帮手，在制作网站的时候经常会用到这些软件。本文有五章，我来由浅到深介绍个人网站的设计与实现。在互联网走进我们的生活之前，没有人敢梦想拥有自己的报纸、杂志、电台、电视台。除了政策上的制约外，一个人也根本没有操作一份传播媒体的能力。现在不同了，互联网给我们提供了一个“表达自我”的自由天地, 你可以拥有自己的新闻邮件，你可以建立自己的个人网站。只要你办得成功也可以吸引成千上万的订户、读者, 并建立自己在众多参与者中的权威地位。建立个人网站的基本过程可以分为以下七个环节:1了解中国网络个人主页研究背景与发展现状2 系统需求分析与总体设计3 熟悉网站开发模式、工具及环境4 把自己的作品和想要展示的内容制作成网页。5 使用动态网页技术 (ASP) ，实现动态内容更新。6 认真地选取测试用例，进行交叉测试7 网站的后期完善、宣传及发展方向其中 , 网页制作和使用动态网页技术(ASP)实现动态内容更新是网站开发的核心内容。关键词：网页、制作、访问、链接Abstract目录第一章引言1.1什么是 Internet1.2Internet有哪些功能1.3简介1.4网页基本构成元素1.5软件的安装与启动软件的安装软件的启动创建快捷方式1.6制作网页前的准备1.7Dreamweaver的操作环境标题栏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语言中建立网页链接文字链接图像链接链接文件下载链接第四章结论致谢参考文献第一章第一章第一章第一章预备知识预备知识预备知识预备知识1.1InternetInternetInternetInternet的中文名为“国际互联网”，又称“因特网” 。Internet是由众多的计算机网络互联而成的互联网，它覆盖了全世界各地，它是采用开放系统协议的计算机通讯网络。然而，Internet不仅仅是计算机的互联网，它还是全球最大的信息资源宝库，它提供了包括科研、教育、文化娱乐、商业和信息交流等各种各样的服务，使得世界范围内的人与人之间的交流在时间和空间上变的更小了。要了解 Internet ，就必须先了解局域网。我们可以将同一地点的许多计算机使用网线连接在一起，构成一个高效率的计算机网络，所有处于网络内的终端机或电脑都能享受网络内所有的资源，比如程序，图文资料等。这种计算机网络因为一般都局限在一定区域中，我们称之为“局域网” （ Local Area Network,简称 LAN） , 它是在日常工作中用得最多的一种小型计算机网络。局域网所覆盖的地理范围比较小，通常不超过几十公里，甚至只在同一座建筑物内或者邻近的几座建筑内。像常见的校园网，一座写字楼内部的网络等都属于局域网。而 Internet则不是指单个区域范围内的网络，而是指将全世界的各中不同类型的计算机网络连接起来的一个全球性的网络。Internet上有取之不尽，用之不竭的信息资源。对于 Internet中各种各样的信息，所有的人都可以通过网络的连接来共享和使用。1.21.2 Internet有那些功能Web页浏览：这是目前利用最广泛、最直接的互联网服务，通过浏览（万维网）中的网页，可以了解世界各地的新闻，查看最新的股市行情，最新的娱乐动态、科技发明，找到众多的就业信息, 几乎想找到什么样的信息，就有什么信息。正是有了、Internet才会变得如此丰富多彩，才能走进千家万户。信息发布：通过Internet，不仅可以浏览别人发布在Web页上的信息，也可以将自己要发布的信息制作成Web页，也即网页，然后发布到Internet上，供全世界的人浏览。电子邮件：不同于传统邮件，电子邮件(E-mail)通过 Internet传输，写信，发信，收信都在计算机上完成，一封电子邮件最短在一秒之内就可以发送出去，其效率是传统邮件无法比拟的。而且发送与接收电子邮件几乎是免费的，所以比传统邮件既节省时间又经济的多。网上聊天：通过聊天软件（如QQ、 ICQ 等）或不同网站的聊天室，可以和世界各地的网友聊天。网友可能是远在天边的异国朋友，也可能是与你一起工作的饿同事，或者是一起生活的家人，在这里没有年龄、性别、身份、职业、国籍、肤色的限制，完全突破了交友的传统方式，人们可通过Internet互相了解对方，进行各种各样的交流。电子商务：现在网上交易已经成为现实，网上购物、网上商品销售、网上拍卖、企业级电子商务、网上货币支付等电子商务活动已经搞的有声有色，几乎所有的专家都预测，在未来的几年内，电子商务会飞速发展。在不久的将来，您可以做在电脑前进行各种各样的商务活动。网络游戏：通过Internet，可以与全世界的玩家一起进行游戏对战，也可以协同作战。网络游戏已经成为信息产业全新的经济增长点，每年都为开发商带来巨额的利润。通过网络游戏，可以充分享受Internet给我们带来的乐趣。网络电话：网络电话也称IP 电话。它采用Internet技术，利用专门的网络电话软件，只需支付非常低廉的话费就可通话。Internet在电信市场上的应用将越来越广泛。1.3的简介的全称为World Wide Web ，含义是“环球网” ，又称“万维网” 、 3W、 Web。是一个基于超文本（Hypertext）方式的信息检索服务工具。我们上网浏览到的网页就是这样的超文本，也就是HTML(Hypertext Mark-up Language,超文本标记语言) 文件，这些网页文件被放置到服务器上，并且都有一定的地址。当我们想浏览某个网站时，首先要在电脑上安装浏览器，如Internet Explorer或 Netscape ，然后在浏览器中输入网站的地址（网址） ，就可以进入网站进行浏览。在这些网页中，都有超连接，当将鼠标指针移动到某个地方（如文本或图象）时，鼠标指针就会变成一个小手形形状，单击它就可以连接到另个网页中，从而使得浏览者能在不同的信息之间跳转，我们之所以能在 Internet的海洋中穿梭自如，正是超连接的功劳。为我们带来的是世界范围的超级文本服务：只须操纵鼠标，就可以通过Internet 从世界各地调来你所希望的文本、图像、动画和声音等信息。通过使用，一个不熟悉网络使用的人也可以成为Internet的行家。1.4 网页基本构成元素要学会制作网页，首先需要了解网页都是由什么元素构成的。文字：文本是构成网页的基本元素。一个最简单的网页可以只有几行文本。图片：正是有个各种美丽的图片，网页才变得多姿多彩。动画：如今，网页上的动画越来越多，最常用的有GIF 动画、 Flash 动画等。超连接：如上所述，超连接几乎是必不可少的。一个没有超连接的网页，就如同汪洋大海中的一座孤岛，失去了与外界的一切联系。其它元素：还可以在网页中添加声音、视频等元素。1.5 软件的安装与启动要使用网站设计软件，自然先要将这些软件安装到自己的电脑中。安装完毕，还需要如何启动，如何创建快捷方式。下面就让我们来详细地看一看具体的操作步骤。软件的安装安装之前，需要先了解软件对系统的要求。以Intel Pentium II处理器或等效处理器，主频Windows 为例，系统要求如下：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、出现“开始复制文件”对话框，单击“下一步”安装程序开始复制文件，过几分钟后，安装结束，单击“结束”按钮，结束安装。软件启动软件安装完毕后，我们就可以使用它了。安装程序已经自动在“开始”菜单中加入了快捷方式。单击“开始”菜单，将鼠标指针依次指向“程序” | “ Macromedia ”| “ MacromediaMX”, 并在上面单击鼠标左键。创建快捷方式使用“开始”菜单启动程序的过程比较烦琐。可以在Windows 桌面或快速启动栏上创建快捷方式，这样可以快速的启动程序。具体实现方法是：在“开始”菜单中找到相应程序的快捷方式，不过这是不要用鼠标左键单击，而是用右键按住向桌面拖动，然后松开右键，会出现一个快捷菜单，在其中可以选择不同的命令，比如选择“在当前位置创建快捷方式”或“复制到当前位置”。这样以后在运行程序时，就方便快捷的多了。1.6制作网页前的准备电脑必备：电脑速度够快，最好能够上网。操作系统： Windows XP.软件可选：其它软件：看图软件美图秀秀图像处理软件Photoshop 、上传工具CuteFTP1.7 Dreamweaver MX的操作环境我们将工作界面分成了“标题栏”、“菜单栏”、“快捷工具栏” 、“属性面板” 、“浮动控制面板”5 个部分来分别介绍。标题栏Dreamweaver MX的“标题栏”中将显示文字“Macromedia Dreamweaver MX ”如果打开网页的话，在后面还会显示该网页的一些信息，如网页标题、所在位置及网页名称，右边有三个钮，分别对应Dreamweaver MX 的最大化最小化和关闭的操作。菜单栏“标题栏”下面就是“菜单栏”，栏中提供了“文件” 、“编辑”、“查看”、“插入”、“修改”、“文本”、“站点”、“窗口”、“帮助” 10 项菜单。单击其中任意一项菜单，随即就会出现一个下拉式指令菜单。有些指令的右边会有键盘的代码，这是该指令的快捷键，熟练使用快捷键将会有助于提高工作效率。有些指令的右边会有一个小黑三角的标记，它代表该指令还包含下一级的指令，鼠标停留片刻即可显示。快捷工具栏“快捷工具栏”指的是“菜单栏”下边的3 排按钮，选择菜单“查看工具栏”，勾选里面的“插入” 、“文档”和“标准”3 项，完整的快捷工具栏就显现出来了。属性面板在网页编辑窗口的下面还有一个面板，它是有名的“属性面板”，它在这个软件中起到举足轻重的作用。属性面板顾名思义，就是显示，调整属性的面板，根据鼠标所选中对象的不同，“属性面板”在界面上也会有所差异，用户可以分别对不同的对象进行调整。站点创建站点创建站点要制作一个网站，第一步操作都是一样的，就是要创造一个“站点”，这样可以使整个网站的脉络结构清晰地展现在面前，避免了以后再进行纷杂的管理。从菜单中选择“站点管理站点”在弹出的对话框中选择“新建”，之后再选择其中的“站点” ，再次弹出一个对话框，在文本框中输入自己已经企化好的网站名称“追梦人”。填好后，单击“下一步”，进入下一个步骤。由于我要做的是一个静态的网页，所以选择上面的一项“否，我不想使用服务器技术。”单击“下一步” ，进入下一个步骤。在此选项中有两个选择，选择推荐的“编辑我的计算机上的本地副本，完成后再上传到服务器” 。底下的文本框允许在本地磁盘上指定一个文件夹，Dreamweaver 将在其中储存站点文件的本地副本。单击该文本框后面的文件夹图标，新建并指定一个空的文件夹“ E:ding ”。之后单击“下一步“，进入下一个步骤。这一步是如何设置连接到远程服务器，弹出式菜单中有6 中选择，这里选择“无”。而后“下一步”再“完成”，即可。创建站点内容站点创建完成后，就可以创建Web页来填充站点了。在“右侧浮动面板组”中选择“文件文件”面板，此时整个网站中没有任何内容。用鼠标右击面板中的本地根目录文件夹。在弹出的菜单中选择 “新建文件” ，新建一个文件后将其命名为“ index.-001-out.gif”alt “平面设计”=width= ” 85”-002-out.gif”alt= “原创壁纸”width= ” 85” -003-out.gif” alt “三维作品”=width= ”85” sohou?subject= 网站的意见建议“ 给我写信 解释只需使 href等于“ mailto ：邮件地址？subject=主题即可，其中subject为可选项，“？ subject=主题”也可以不加。文件下载链接文件下载链接文件下载链接文件下载链接“文件下载链接”实例的代码如下所述。文件下载链接下载精彩广告视频解释只需使 href等于“文件的路径”即可。本章讲解的是网站的链接的方法和技巧。能让浏览者很轻松的地观看是很重要的，这其中的关键就再于“链接“了。第四章第四章第四章第四章结论结论结论结论经过几周的工作，个人网站的设计与实现终于完成，本次设计基本完成任务书要求的功能。查找信息、文件共享等。由于是个人网站，在设计上就没有什么拘束和限制，完全发挥自己的想象力和创造力，展现自己的兴趣和个性。本次设计用Macromedia 公司开发的专业HTML编辑器 Dreamweaver, 对 Wed站点、 Web 页和 Web应用程序进行设计、编码和开发。利用 Dreamweaver 中的可视化编辑功能，用户可以快速创建页面而无须编写任何代码。并且。借助Dreamweaver，还可以使用服务器语言（例如：ASP,ASP.NET,ColdFusion标记语言（ CFML）， JSP， PHP）。本设计的页面不是很精美，这写些不足之处还待后期的开发和改进。致谢繁忙的设计终于完成了，在设计期间我受到了来自四面八方的帮助和支持。首先要感谢指导老师，感谢在百忙中抽空对我们的设计和论文提出建议。特别要感谢的是程老师对我们严格的要求，严谨的治学态度。接下来要感谢我的同学给我的大力支持，是他们在设计之初协助我掌握了Dreamweaver 的使用方法。在设计中他们给我提了不少的意见，还帮助我解决了很多技术上的问题。最后还要感谢这些年来给予我淳淳教导的各位老师，他们给予了我的知识让我收益一生，谢谢！参考文献1姜楠完美网页设计与制作中国青年出版社2004年 5 月2欧阳峰，陈朝荣电子商务技术中国财政经济出版社2001年 8 月3中国 IT 培训工程编委会Flash Mx 实例教程珠海出版社2003 年 1月4赵子江多媒体技术应用教程（4）版机械工业出版社 2004 年 8 月第 4 版5李东博杜学智李增辉精彩网页制作三剑客西安电子科技大学出版社2003年 10 月6 贺 凯焦 超FlashMx2004动 画 制 作 典 型 范 例中 国 出 版 社2005 年2月
展开阅读全文