个人主页制作模板(共21页).doc

《个人主页制作模板(共21页).doc》由会员分享，可在线阅读，更多相关《个人主页制作模板(共21页).doc（21页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、精选优质文档-倾情为你奉上xx学院课程实训报告实训题目 :个人主页制作系 部 电气与信息工程系 专 业 班 级 电子信息 学 号 姓 名 xxx 指 导 教 师 xxx 完 成 日 期 2016年1月8日 课程实训任务书专业电子信息班级 课程名称网页制作设计题目个人主页制作指导教师xxx起止时间2016年1月4日至1月15日周数2周设计地点实验室设计目的：掌握网页制作过程、掌握网页制作软件的使用，了解软件的使用和用途。设计任务或主要技术指标：1. 网页制作软件的灵活使用。2. 掌握制作的过程的顺序和流程；设计进度与要求：第1-2天：布置任务，查找相关资料；第3-5天：熟悉网页制作软件，研究软件

2、功能；第6-7天：查找相关资料，撰写课程设计报告；第8-10天：进行答辩； 主要参考书及参考资料：1胡崧. HTML 从入门到精通M.北京：中国青年出版社，20072知新文化. HTML 完全手册与速查辞典M.北京：科学出版社，20073杨选辉.网页设计与制作教程M.北京：清华大学出版社，20094王诚君，刘振华，郭竑晖，高中山.Dreamweaver 8 网页设计应用教程M.北京：清华大 学出版社，2007教研室主任（签名） 系（部）主任（签名） 年 月 日课程实训评定意见实训题目： 个人主页制作 学生姓名： xxx 专业： 电子信息工程技术 班级： 电子信息 评定意见：评定成绩： 指导教师

3、（签名）： 年 月 日摘 要Dreamweaver，简称“DW”，中文名称 梦想编织者，是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，DW是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。本次实训主要制作个人简历的网页，掌握网页制作过程、掌握网页制作软件的使用，了解软件的使用和用途。关键词：Dreamweaver 个人简历 网页制作目录专心-专注-专业第一章引言1.1什么是Dreamweaver Dreamweaver，简称“DW”，中文名称 梦想编织者，是美国MACROMED

4、IA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，DW是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。Macromedia公司成立于1992年，2005年被Adobe公司收购。Adobe Dreamweaver使用所见即所得的接口，亦有HTML（标准通用语言下的一个应用）编辑的功能。它有系统的版本。随Macromedia被收购后，Adobe也开始计划开发版本的Dreamweaver了。 Dreamweaver自MX版本开始，使用了排版引擎Presto 作为网页预览。1.2 Dreamweaver功能介

5、绍功能特色，借助共享型用户界面设计,在AdobeCreativeSuite4的不同组件之间更快、更明智地工作。使用工作区切换器可以从一个工作环境快速切换到下一个环境。具体功能，CS6新增功能，利用AdobeDreamweaverCS6软件中改善的FTP性能，更高效地传输大型文件。更新的“实时视图”和“多屏幕预览”面板可呈现HTML5代码，使您能检查自己的工作。自适应网格，可响应的自适应网格版面，使用响应迅速的CSS3自适应网格版面，来创建跨平台和跨浏览器的兼容网页设计。利用简洁、业界标准的代码为各种不同设备和计算机开发项目，提高工作效率。直观地创建复杂网页设计和页面版面，无需忙于编写代码。改善

6、FTP性能，利用重新改良的多线程FTP传输工具节省上传大型文件的时间。更快速高效地上传网站文件，缩短制作时间。Catalyst集成，使用Dreamweaver中集成的面板连接并编辑您利用需另外购买建立的网站。利用托管解决方案建立电子商务网站。增强型移动支持使用更新的移动框架支持为IOS和Android平台建立本地应用程序。建立触及移动受众的应用程序，同时简化您的移动开发工作流程。更新的支持更新的支持可轻松为Android和IOS建立和封装本地应用程序。通过改编现有的HTML代码来创建移动应用程序。使用Phone模拟器检查您的设计。CSS3转换,将CSS属性变化制成动画转换效果，使网页设计栩栩如

7、生。在您处理网页元素和创建优美效果时保持对网页设计的精准控制。更新的实时视图使用更新的“实时视图”功能在发布前测试页面。“实时视图”现已使用最新版的转换引擎，能够提供绝佳的HTML5支持。更新的多屏幕预览面板利用更新的“多屏幕预览”面板检查智能手机、平板电脑和台式机所建立项目的显示画面。该增强型面板能够让您检查HTML5内容呈现。CS5后的新增功借助AdobeDreamweaverCS5.5软件充满自信地进行设计、构建最新的HTML5和CSS3网站、令交互性更上一层楼。同时为多个设备进行设计，并对全面的代码检查充满自信。多屏幕预览面板借助多屏幕预”面板，为智能手机、Tablet和个人计算机进行

8、设计。借助媒体查询支持，开发人员可以通过一个面板为各种设备设计样式并实现渲染可视化。CSS3/HTML5支持,通过CSS面板设置样式，该面板经过更新可支持新的CSS3规则。设计视图现支持媒体查询，在您调整屏幕尺寸的同时可应用不同的样式。使用HTML5进行前瞻性的编码，同时提供代码提示和设计视图渲染支持。集成借助代码提示加入高级交互性。是行业标准JavaScript库，允许您为网页轻松加入各种交互性。借助针对手机的起动模板快速启动。借助构建本机Android和IOS应用程序。借助新增的Phone功能为Android和IOS构建并打包本机应用程序。借助Phone构建本机Android和IOS应用程

9、序。新增功能，实时视图新增功能，借助DreamweaverCS4中新增的实时视图在真实的浏览器环境中设计网页,同时仍可以直接访问代码。呈现的屏幕内容会立即反映出对代码所做的更改。针对和框架的代码提示新增功能。借助改进的JavaScript核心对象和基本数据类型支持,更快速、准确地编写JavaScript。通过集成包括Prototype和流行框架,充分利用DreamweaverCS4的扩展编码功能。相关文件新增功能，源代码,在“设计”视图中查看父页面。集成编码增强功能领略内建代码提示的强大功能,令框架、原型和几种服务器语言中的编码更快、更清晰。代码导航器新增功能新增的“代码导航器”功能可显示影响

10、当前选定内容的所有代码源,如CSS规则、服务器端包括、外部JavaScript功能、模板、源文件等。创作支持新增功能在DW中直接新建基于HTML和应用程序。在Dreamweaver中即可预览AIR应用程序。使应用程序随时可与AIR打包及代码签名功能一起部署。FLV支持增强功能通过轻松点击和符合标准的编码将FLV集成到任何网页中-无需软件知识。设计时在Dreamweaver全新的实时视图中播放FLV影片。支持领先技术，在支持大多数领先Web开发技术的工具中进行设计和编码,这些技术包括HTML、XHTML、CSS、XML、JavaScript、软件和ASP。学习最佳做法 ,参考CSS最佳做法实现可

11、视化设计并辅以通俗易懂的实用概念说明。在支持可访问性和最佳做法的同时创造Ajax驱动的交互性。集成增强,通过跨产品线的直接通信和交互,充分利用DreamweaverCS4和其它Adobe工具的智能集成和强大功能,包括AdobeFLASHCS4Professional、FIREWORKSCS4、PhotoshopCS4和DeviceCentralCS4软件。新增功能,在Dreamweaver中设计页面,使最终用户能使用在线服务编辑他们的网页,无需帮助或使用其它软件。作为Dreamweaver设计人员,您可以限制对特定页面、特殊区域的更改权,甚至可以自定格式选项。Subversion集成新增功能在

12、Dreamweaver中直接更新站点和登记修改内容。DreamweaverCS4与Subversion软件紧密集成,后者是一款开放源代码版本控制系统,可以提供更强大的登记/注销体验。跨平台支持增强功能随心所欲,尽情工作:DreamweaverCS4可用于基于Intel或PowerPC的Mac、以及系统。在首选系统中设计,交付跨平台、可靠、一致、高性能的成果。1.3Dreamweaver的优缺点Dreamweaver软件如图1-1。图1-1Dreamweaver软件以用最快速的方式将Firework，Freehand，或Photoshop等档案移至网页上。使用检色吸管工具选择荧幕上的颜色可设定最

13、接近的网页安全色。对于选单，快捷键与格式控制，都只要一个简单步骤便可完成。Dreamweaver能与您喜爱的设计工具，如外挂模组等搭配，不需离开Dreamweaver便可完成，整体运用流程自然顺畅。除此之外，只要单击便可使Dreamweaver自动开启Firework或Photoshop来进行编辑与设定图档的最佳化。控制能力,Dreamweaver是唯一提供、视觉化编辑与原始码编辑同步的设计工具。它包含和BBEdit等主流文字编辑器。帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。甚至可以排序或格式化表格群组，Dreamweave

14、r支援精准定位，利用可轻易转换成表格的图层以拖拉置放的方式进行版面配置。所见即所得Dreamweaver成功整合动态式出版视觉编辑及电子商务功能，提供超强的支援能力给Third-party厂商，包含ASP，Apache，ColdFusion，Tango与自行发展的应用软体。当您正使用Dreamweaver在设计动态网页时，所见即所得的功能，让您不需要透过浏览器就能预览网页。梦幻样版将内容与设计分开，应用于快速网页更新和团队合作网页编辑。建立网页外观的样版，指定可编辑或不可编辑的部份，内容提供者可直接编辑以样式为主的内容却不会不小心改变既定之样式。您也可以使用样版正确地输入或输出XML内容。全方

15、位的呈现利用Dreamweaver设计的网页，可以全方位的呈现在任何平台的热门浏览器上。对于动态HTML支援和鼠标换图效果，声音和动画的DHTML效果资料库可在Netscape和Microsoft浏览器上执行。使用不同浏览器检示功能，Dreamweaver可以告知您在不同浏览器上执行的成效如何。当有新的浏览器上市时，只要从Dreamweaver的网站在下载它的描述档，便可得知详尽的成效报告。网站管理，使用网站地图可以快速制作网站雏形、设计、更新和重组网页。改变网页位置或档案名称，Dreamweaver会自动更新所有链接。使用支援文字、HTML码、HTML属性标签和一般语法的搜寻及置换功能使得复

16、杂的网站更新变得迅速又简单。软件特点，效果难一致，难以精确达到与浏览器完全一致的显示效果也就是说您在所见即所得网页编辑器中制作的网页放到浏览器中是很难完全达到您真正想要的效果，这一点在结构复杂一些的网页（如分帧结构、动态网页结构）中便可以体现出来。代码难控制，相比之下，非所见所得的网页编辑器，就不存在这个问题，因为所有的HTML代码都在您的监控下产生，但是由于非所见所得编辑器的先天条件就注定了它的工作低效率。如何实现两者的完美结合，则既产生干净、准确的HTML代码，具备所见所得的高效率、直观性。Dream weaver是在领域中用户最多、应用最广、功能最强大的软件，随着Dream weaver

17、 8的发布，更坚定在该领域的地位。它集网页设计、网站开发和站点管理功能于一身，具有可视化、支持多平台和跨浏览器的特性，是目前网站设计、开发、制作的首选工具。 1、灵活的编写方式 Dream weaver具有灵活编写网页的特点，不但将世界一流水平的“设计”和“代码”编辑器合二为一，而且在设计窗口中还精化了，能帮助用户按工作需要定制自己的用户界面。2、可视化编辑界面 Dream weaver是一种所见即所得的，可实现页面元素的插入和生成。或视化编辑环境大量减少了代码的编写，同时亦保证了其专业性和兼容性，并且可以对内部的HTML编辑器和任何第三方的HTML编辑器进行实时的访问。无论用户习惯手工输入H

18、TML源代码还是使用可视化的编辑界面，Dream weaver都能提供便捷的方式使用户设计网页和管理网站变得更容易。 3、功能更多的支持CSS可视化设计、CSS检查工具 4、动态跨浏览器验证 当保存时系统自动检查当前文档的跨浏览器有效性，可以指定何种浏览器为测试用浏览器，同时系统自动检验以确定页面有没有目标浏览器不支持的tags或CSS结构。动态跨浏览器有效性检查功能可以自动核对tags和CSS规则是否适应目前的主浏览器。5、强大的WEB站点管理功能 6、内建的图形编辑引擎 7、Dream weaver的集成特性 Dream weaver 8继承了、Flash和Shock wave的集成特性，

19、可以在这些Web创作工具之间自由地切换，轻松地创建美观实用的网页。 8、丰富的媒体支持能力 可以方便地加入、Flash、Shock wave、Active X以及其他媒体。Dream weaver具有强大的多媒体处理功能，在设计和CSS方面表现得极为出色，它利用JavaScript和DHTML语言代码轻松地实现网页元素的动作和交互操作。Dream weaver还提供行为和时间线两种控件来产生交互式响应和进行动画处理。 9、超强的扩展能力 Dream weaver还支持第三方插件，任何人都可以根据自己的需要扩展Dream weaver的功能，并且可以发布这些插件。一个网站设计得成功与否，很大程度

20、上决定于设计者的规划水平，规划网站就像设计师设计大楼一样，图纸设计好了，才能建成一座漂亮的楼房。网站规划包含的内容很多，如网站的结构、栏目的设置、网站的风格、颜色搭配、版面布局、文字图片的运用等，你只有在制作网页之前把这些方面都考虑到了，才能在制作时驾轻就熟，胸有成竹。也只有如此制作出来的网页才能有个性、有特色，具有吸引力。Dream weaver：这是网页三剑客之一，专门制作网页的工具，可以自动将网页生成代码，是普通网页制作者的首选工具，界面简单，实用功能比较强大。设计活动中包含着主观和客观两方面的因素，在确立了网页主题之后，首先要明确和熟悉设计的对象和构成的要素。网页艺术设计涉及的具体内容

21、很多，可以概括为视听元素和版式设计两个方面。1.视听元素 这里所说的视听元素，主要包括：文本、背景、按钮、图标、图像、表格、颜色、导航工具、背景音乐、动态影像等。无论是文字、图形、动画，还是音频、视频，网页设计者所要考虑的是如何以感人的形式把它们放进页面这个“大画布”里。多媒体技术的运用大大丰富了网页艺术设计的表现力。以上各视听元素大多数浏览器本身都可以显示或收听，无需任何外部程序或模块支持。比如，大部分浏览器都可以显示GIF、JPEG图形和GIF89a动画。还有些多媒体文件（如MP3音乐）需要先下载到本地硬盘上，然后启动相应的外部程序来播放。另外，在浏览器使用插件（Plug-in）可以播放更

22、多格式的多媒体文件。微软推出IE浏览器后，提供了基于OLE的Active X技术，用来在网页中播放多媒体。目前Active X已经成为热门技术。另一种播放多媒体的技术是Java Applet。它是用Java语言编写的应用于网页之中的小应用程序，相比于插件和Active X，Java Applet具有更大的灵活性和良好的跨平台能力，因此具有很好的发展前景。总之，技术的不断发展使多媒体元素在网页艺术设计中的综合运用越来越广泛，使浏览者可以享受到更加完美的视听效果。这些新技术的出现，也对网页的艺术设计提出了更高的要求。Access数据库是集成在Microsoft公司开发的产品更新换代Office系统

23、中的集成软件10。 Access是一个数据库管理系统，它之所以被集成到Office中而不是Visual Studio中，是因为它与其它的数据库管理系统（如Visual Fox Pro）相比更加简单易学，一个普通的计算机用户即可掌握并使用它。而且最重要的一点是，Access的功能足够强大，足以应付一般的数据管理及处理需要。 ODBC（Open Database Connectivity开放式数据库互联）是微软推出的一种工业标准，一种开放的独立于厂商的API应用程序接口，可以跨平台访问各种个人计算机、小型机以及主机系统11。ODBC作为一个工业标准，绝大多数数据库厂商、大多数应用软件和工具软件厂商

24、都为自己的产品提供了ODBC接口或提供了ODBC支持，这其中就包括常用的SQL SERVER、ORACAL、INFORMIX等，当然也包括了Access用Microsoft Access 来创建数据库，最简单的是通过它提供的的一个“向导”，在启动这个软件以后，建立数据库文件的操作。下面是我利用“向导”来创建一份数据库文件的具体操作步骤： 选择“Access数据库向导、数据页和项目”单选按扭，然后单击“确定”按钮，若选择Microsoft Access对话框中的“空Access数据库”单选项按钮，就会建立一个空的数据库了，数据库里面的信息需要手工来添加，若选择“打开已有文件”单选按钮则可以从下方

25、的列表中选择打开已经存在的数据库。在弹出的“新建”对话框中，我们可以选择一个模板来快速建立数据库，我们就 先选择个“定单管理”看看，然后单击“确定”按扭。“文件新建数据库”对话框的功能是，指定数据文件名，以及保存它的文件夹。我们就以它的初始文件名“定单入口1”吧，单击“创建”安扭后，新建的数据库文件就将被指定保存到Microsoft Access默认的文件夹下了，或我们给它指定一个新的也行，这样一来，一份新的数据库就建立好了，屏幕上也将显示“数据库向导”对话框。“下一步”按钮。以上“数据库向导”对话框分为左右两部分，左边的窗口是用来选择“数据库中 的表”，右边的窗口是用来选择“表中的字段”。选

26、择好所需要的数据库中的表和表中的字段之后，就单击下一步按钮。以上“数据库向导”对话框是用来确定屏幕的显示样式，我们就采用标准样式吧，单击下一步按钮。以上“数据库向导”对话框是用来确定打印报表的样式的，我们可以选择如“组 织”样式，然后单击下一步按钮。以上“数据库向导”对话框的作用是确定数据库的标题和是否在所有报表上加一 幅图片，我们就先设定数据库的标题为“定单入口”，并不在所有报表上加图片，然后单击下一步按钮。单击以上“数据库向导”对话框的“完成”按钮，就完成了创建数据库的工作了。象这个数据库在使用之前还会弹出“我的公司信息”对话框，当然，不同的模板 是不相同的，象这个就是要求输入公司的名称和

27、地址信息，如下图所示，关闭这个对话框，系统将自动保存信息。 关闭“我的公司信息”对话框后，会弹出“主切换面板”对话框。位于“主切换 面板”对话框后面的是“定单入口1”窗体，通过这两个窗体即可对新创建的数据库进行各种操作了。无论什么时候使用“数据库向导”新建数据库，Microsoft Access都将自动新建一个切换面板，这个面板对浏览数据库都是很有帮助的，“切换面板”中有一些按钮，单击它们可以打开相应的窗体和报表，或打开其他窗体和报表的切换面板、退出Microsoft Access或自定义切换面。第二章主页介绍2.1站点2.1.1 创建站点要制作一个网站，第一步操作都是一样的，就是要创造一个“

28、站点”，这样可以使整个网站的脉络结构清晰地展现在面前，避免了以后再进行纷杂的管理。从菜单中选择“站点/新建站点”在弹出如下图2.1所示的对话框，在文本框中输入自己已经企化好的网站名称“xxx”。在桌面新建一个文件夹“电子信息-xxx”设为本地站点文件夹。图2.1创建站点填好后，单击“高级设置”，进入下一个步骤。如下图2.2所示将默认图像文件夹设为“image”，单机“保存”。图2.2站点设置2.1.2创建站点内容站点创建完成后，就可以创建Web页来填充站点了，在菜单中选择“新建文件”，新建一个文件后将其命名为“首页.htm(或首页.html),它就是未来的首页。 由于“个人简历”网站分为“首页

29、”、“基础资料”、“教育背景”、“自我评价”、“爱好“、“职业证书”这六个大栏目网页，所以要新建六个html文件，分别对应上面的六个大栏目网页，存放它们各自的内容。2.2首页每个网站都会有一个首页，就功能上而言，它代表着一个网站的风格与特色，就网站架构上而言，它代表了网站的第一层架构，至于网站上其他Web页，原则上都必须通过首页来连接散播出去，可见首页是多么的重要。首页是打开网站后在浏览器中显示的第一个页面。它是起什么名字通常要视Server端的设置，一般的有index.htm,default.htm或home.htm等。首页的布局有很多方法，在这里我所用到的是如下图2.3所示的“布局模式AP

30、 Div（A）”。使用了CSS样式表中的绝对定位属性的标签就叫做AP Div。Dreamweaver CS5中的“AP Div”就是Dreamweaver旧版本中的“层”。AP Div可以理解为浮动在网页上的一个页面，可以放置在页面中的任何位置，可以随意移动这些位置，而且它们的位置可以相互重叠，也可以任意控制AP Div的前后位置、显示与隐藏，因此大大加强了网页设计的灵活性。在网页设计中，将网页元素放到AP Div中，然后在页面中精确定位AP Div的位置，可以实现网页内容的精确定位，使网页内容在页面上排列得整齐、美观、井井有条。操作步骤：1、在“插入快捷栏”的“布局对象”分类中，单击“AP

31、Div（A）”按纽。2、将变成“+”形状的鼠标光标放到编辑中网页上，在要绘制的地方进行拖动就可以进行创建了。2.2.1设置首页的页面属性首先双击“文件”浮动面板中的index.htm,进入页面的编辑窗口。右健单击空白区域，在菜单中选择“页面属性”，之后弹出“页面属性”对话框，若选择主菜单“修改/页面属性”项，也可以把打开该对话框。在“页面属性”对话框中，左侧窗口显示“分类”，其中包括了“外观”、“链接”、“标题”、“标题/编码”、“跟踪图像”5项，右侧区域则显示各类中可以设置的项目。首页设置的属性2.2.2 插入图像图像是网页中不可或缺的组成成份，恰当地使用图像，可以使网站充满生活生命力与说服

32、力，吸引更多的浏览者，加深他们欣赏你网站的意愿。另一方面，网页的容量大小是网站成功与否的一大关键因素。由于网络在传输上的限制，导致了下载的速度不可能太快，因此，网页的大小就不能太大，其中关键就在于图像的大小了，否则浏览者会失去等待的耐心，无论你的网站多么精彩也无济于事了。所以，在网面容量大小的问题上一定要重视。下面就来详细介绍对网页图像进行处理的操作步骤，以使得它们在保持图形美丽与网站风格搭配的基础上，图片文件能够变的更小。1、 首先将光标停留在要插入图像的位置，然后单击“菜单栏”下面“插入”快健栏，选择其中的“图像”。 2、随即弹出如下图2.5所示的“选择图像源文件”对话框。从计算机磁盘中选

33、择想要插入的图像文件，或在URL编辑框中输入图像的路径和名称。下面的“相对于”下拉表框中，可选择文件URL地址的类型，如果选择“文档”选项，表示图像地址相对于当前文档；如果选择“站点根目录”选项，表示地址相对于根目录。在这里我要插入的是网站标志logo，插入logo图象，如图2.5所示：最后单击“确定”按钮，即可完成插入图像的操作。图2.5插入图像2.2.3插入多媒体除了之前讲到的可以插入“图像”外，还可插入动画、声音、视频等媒体元素，如Flash,Shockwave,Applets,ActieX及格Midi声音文件等，并且还可以在Dreamweaver自身内插入Macromedia Flas

34、h 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

35、浏览器中，均已集成了 Flash动画播放功能。操场作步骤：步骤1 将光标停留在要插入Flash的位置，然后单击菜单栏下面“插入”快捷栏，选择其中的“媒体”按钮，单击它右侧的FLV。步骤2 在弹出的对话框中选择扩展名为flv 的Flash文件，即可将其插入到Dreamweaver的“网页编辑窗口”中，可以看到，在这个窗口中Flash文件的大小。在这里我的主页插入的一个动画，如图2.6所示。 图2.6插入视频2.2.4插入文本文字是人类语言最基本的表达方式，在网页中，文本内容也可以说是重要的组成部分，一个网站成功与否，它是最关键的因素。在这最关键的因素。可丰富网站的文字内容，并以最最美观、最整齐的

36、方式放入到网页中。插入文本的两种方式网页中需要大量的文本，我们或以通过以下两种方式插入它们。一种是在网页编辑窗口中直接用键盘敲入文本。这可以算是最基本的输入方式了，和一些文本编辑软件（如Microsoft Word）的使用方法一样，选择好习惯的输入法。另一种是复制文本的方式。有些读者可能不喜欢使用Dreamweaver MX2004来进行打字的工作，而更习惯在专门的文本编辑软件中快速打字，如Microsoft Word和 Windows自带的记事本等，又或者读者已经准备好了要放入网页的文本的电子版本，那么我们就可以直接使用Dreamweaver的文本复制功能，将大段的文本内容拷贝到网页的编辑窗

37、口来进行排版的工作，具体步骤如下。打开文本编辑软件（如Microsoft Word），选中要复制的文本，它们将反白显示，执行菜单“编辑/复制”命令或直接用快捷键Ctrl+C，之后切换回Dreamweaver,将光标停留在插入文本的位置，执行主菜单“编辑/粘贴”命令或直接使用快捷键Ctrl+v,即可将大段的文本快速粘贴到网页中。这在我的“网文精品”中用到很多，全部是在word软件中排好ctrl+c,然后点击要粘贴的位置，crtl+v到Dreamweaver即可。图2.7插入文本2.3创建其它网页还有其它的几个网站与主页的制作相同，一个网页是图象和文字的组合。为图方便可以先将首页的导航条以及其它与

38、子页面相同的做好进行复制。 “基础资料”中的文本插入和前面的介绍相似，并可以在属性拦中调节字体的大小。在其它子页面中也用到这点，在属性中设好背景，颜色等等，插入图象，输入文字，也word里的操作雷同。2.4建立网页链接网站实际上是由很多网页组成的，那么网页之间是如何联系的呢？这就是本节要讲的内容-网页的“链接”。“链接”，又称“超链接（Hyperlink）,它作为网页的桥梁，起着相当重要的作用。网页中的很多对象都可以加入“链接”属性。在Dreamweaver MX2004中，如果以“链接”的媒介来划分的话，则“链接”可以分为“文字链接”、“图像链接”、“图像地图链接”、“内部链接和外部链接”、

39、“E-mail链接”、“命名锚记链接”、“文件下载链接”和“跳转菜单”，共8种。 我的个人主页主要运用了“文字链接”即以文字作为媒介的链接，它是网页中最常被使用的链接方式，具有“文件小、制作简单和便于维护”的特点。接下来结合我的个人网站为实例，来讲解如何为文字建立“链接”。具体操作步骤如下所述。操作步骤步骤1 准备好已经制作完成的首页的各个栏目页面，该网站包含6个栏目，这里的5个栏目-“基础资料”、“教育背景”、“自我评价”、“爱好“、“职业证书”为例来进行讲解。步骤2 在Dreamweaver 中打开首页，之后选取 “基础资料”4个文字。步骤3右单机选择“创建连接”。步骤4在文件夹中找到要链

40、接的对象“基础资料.html”。这样就建立了超链接。如图2.9所示：图2.9网页链接步骤5还可以设置一些“链接”的属性，这是前面讲过的内容。单击“属性面板”中的“页面属性”，选择其中的“链接”分类，可以进行的设置有“链接字体”、“大小”、“链接颜色”、“变换图像链接”颜色、“已访问链接”颜色、“活动链接”颜色及“下划线样式”。步骤5 至此，第1个栏目的链接就制作完毕了，按下Ctrl+S保存网页，再按下F12预览，测试一下，当鼠标放在“平面设计”这4个文字上时将出现下划线，并且浏览器窗口下面的状态栏中会显示链接到的网页的地址，单击文字，页面会立即跳转到“基础资料”中，这表示链接已经制作成功了。步

41、骤6 同理，按照以上步骤，再为“教育背景”、“自我评价”、“爱好“、“职业证书”等其它栏制作指向对应栏目的链接。步骤7 通常在栏目页面中还需要有“返回首页”的链接，单击其后可以跳转回首页，因此在各个栏目中还要插入“网站首页”的文字，并且制作指向首页的链接，制作方法不变。如下图2.10所示图2.10返回至此，整个“文字链接”的就全部完成了。总 结经过两周的工作，个人网站的设计与实现终于完成，本次设计基本完成任务书要求的功能。查找信息、文件共享等。由于是个人网站，在设计上就没有什么拘束和限制，完全发挥自己的想象力和创造力，展现自己的兴趣和个性。本次设计用Macromedia公司开发的专业HTML编

42、辑器Dreamweaver,对Wed站点、Web页和Web应用程序进行设计、编码和开发。利用Dreamweaver中的可视化编辑功能，用户可以快速创建页面而无须编写任何代码。并且。借助Dreamweaver，还可以使用服务器语言（例如：ASP,ASP.NET,ColdFusion标记语言（CFML），JSP，PHP）。本设计的页面不是很精美，这写些不足之处还待后期的开发和改进。致 谢首先我要感谢我们的xxx老师，他在平常工作繁忙之际，还来为我们上课，解答实训中的困惑，为我们讲解实训中所需要的课程，让我们在实训中更好的完成我们的课题。其次我要感谢的是我们班的同学给我的帮助。他们一直在鼓励我帮助我

43、，没有因为一点困难而放弃。在本次实训中团结互助，克服了在此次实训过程中遇到的种种困难，在以后的工作中向他们一样努力去做不轻易放弃，向他们学习，这次实训，虽然还是没有最大限度地投入，但比以前我有了很大的进步。参与了这次集体的设计，和同学在一起共同完成一项任务的感觉很好，我体会到团队力量的重要性。真心地感谢xxx老师和全班同学，谢谢，是你们让我对计算机网络方面有了更深的了解，让我受益匪浅。参考文献1胡崧. HTML 从入门到精通M.北京：中国青年出版社，20072知新文化. HTML 完全手册与速查辞典M.北京：科学出版社，20073杨选辉.网页设计与制作教程M.北京：清华大学出版社，20094王诚君，刘振华，郭竑晖，高中山.Dreamweaver 8 网页设计应用教程M.北京：清华大 学出版社，2007