个人主页制作.docx

个人主页制作.docx

《个人主页制作.docx》由会员分享，可在线阅读，更多相关《个人主页制作.docx（20页珍藏版）》请在冰豆网上搜索。

个人主页制作

xx学院

课程实训报告

实训题目:

个人主页制作

系部电气与信息工程系

专业班级电子信息

学号

姓名xxx

指导教师xxx

完成日期2016年1月8日

课程实训任务书

专业

电子信息

班级

课程名称

网页制作

设计题目

个人主页制作

指导教师

xxx

起止时间

2016年1月4日至1月15日

周数

2周

设计地点

实验室

设计目的：

掌握网页制作过程、掌握网页制作软件的使用，了解软件的使用和用途。

设计任务或主要技术指标：

1.网页制作软件的灵活使用。

2.掌握制作的过程的顺序和流程；

设计进度与要求：

第1-2天：

布置任务，查找相关资料；

第3-5天：

熟悉网页制作软件，研究软件功能；

第6-7天：

查找相关资料，撰写课程设计报告；

第8-10天：

进行答辩；

主要参考书及参考资料：

[1]胡崧.HTML从入门到精通[M].北京：

中国青年出版社，2007

[2]知新文化.HTML完全手册与速查辞典[M].北京：

科学出版社，2007

[3]杨选辉.网页设计与制作教程[M].北京：

清华大学出版社，2009

[4]王诚君，刘振华，郭竑晖，高中山.Dreamweaver8网页设计应用教程[M].北京：

清华大学出版社，2007

教研室主任（签名）系（部）主任（签名）年月日

课程实训评定意见

实训题目：

个人主页制作

学生姓名：

xxx

专业：

电子信息工程技术班级：

电子信息

评定意见：

评定成绩：

指导教师（签名）：

年月日

摘要

Dreamweaver，简称“DW”，中文名称"梦想编织者"，是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，DW是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。

本次实训主要制作个人简历的网页，掌握网页制作过程、掌握网页制作软件的使用，了解软件的使用和用途。

关键词：

Dreamweaver个人简历网页制作

第一章引言1

什么是Dreamweaver1

Dreamweaver功能介绍1

的优缺点3

第二章主页介绍8

站点8

创建站点8

创建站点内容9

 首页9

设置首页的页面属性10

插入图像10

插入多媒体11

插入文本12

创建其它网页13

建立网页链接14

总结16

致谢17

参考文献18

第一章引言

什么是Dreamweaver

Dreamweaver，简称“DW”，中文名称"梦想编织者"，是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，DW是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。

Macromedia公司成立于1992年，2005年被Adobe公司收购。

AdobeDreamweaver使用所见即所得的接口，亦有HTML（标准通用语言下的一个应用）编辑的功能。

它有系统的版本。

随Macromedia被收购后，Adobe也开始计划开发版本的Dreamweaver了。

Dreamweaver自MX版本开始，使用了排版引擎"Presto"作为网页预览。

Dreamweaver功能介绍

功能特色，借助共享型用户界面设计,在AdobeCreativeSuite4的不同组件之间更快、更明智地工作。

使用工作区切换器可以从一个工作环境快速切换到下一个环境。

具体功能，CS6新增功能，利用AdobeDreamweaverCS6软件中改善的FTP性能，更高效地传输大型文件。

更新的“实时视图”和“多屏幕预览”面板可呈现HTML5代码，使您能检查自己的工作。

自适应网格，可响应的自适应网格版面，使用响应迅速的CSS3自适应网格版面，来创建跨平台和跨浏览器的兼容网页设计。

利用简洁、业界标准的代码为各种不同设备和计算机开发项目，提高工作效率。

直观地创建复杂网页设计和页面版面，无需忙于编写代码。

改善FTP性能，利用重新改良的多线程FTP传输工具节省上传大型文件的时间。

更快速高效地上传网站文件，缩短制作时间。

Catalyst集成，使用Dreamweaver中集成的面板连接并编辑您利用需另外购买建立的网站。

利用托管解决方案建立电子商务网站。

增强型移动支持使用更新的移动框架支持为IOS和Android平台建立本地应用程序。

建立触及移动受众的应用程序，同时简化您的移动开发工作流程。

更新的支持更新的支持可轻松为Android和IOS建立和封装本地应用程序。

通过改编现有的HTML代码来创建移动应用程序。

使用Phone模拟器检查您的设计。

CSS3转换,将CSS属性变化制成动画转换效果，使网页设计栩栩如生。

在您处理网页元素和创建优美效果时保持对网页设计的精准控制。

更新的实时视图使用更新的“实时视图”功能在发布前测试页面。

“实时视图”现已使用最新版的转换引擎，能够提供绝佳的HTML5支持。

更新的多屏幕预览面板利用更新的“多屏幕预览”面板检查智能手机、平板电脑和台式机所建立项目的显示画面。

该增强型面板能够让您检查HTML5内容呈现。

CS5后的新增功借助软件充满自信地进行设计、构建最新的HTML5和CSS3网站、令交互性更上一层楼。

同时为多个设备进行设计，并对全面的代码检查充满自信。

多屏幕预览面板借助多屏幕预”面板，为智能手机、Tablet和个人计算机进行设计。

借助媒体查询支持，开发人员可以通过一个面板为各种设备设计样式并实现渲染可视化。

CSS3/HTML5支持,通过CSS面板设置样式，该面板经过更新可支持新的CSS3规则。

设计视图现支持媒体查询，在您调整屏幕尺寸的同时可应用不同的样式。

使用HTML5进行前瞻性的编码，同时提供代码提示和设计视图渲染支持。

集成借助代码提示加入高级交互性。

是行业标准JavaScript库，允许您为网页轻松加入各种交互性。

借助针对手机的起动模板快速启动。

借助构建本机Android和IOS应用程序。

借助新增的Phone功能为Android和IOS构建并打包本机应用程序。

借助Phone构建本机Android和IOS应用程序。

新增功能，实时视图新增功能，借助DreamweaverCS4中新增的实时视图在真实的浏览器环境中设计网页,同时仍可以直接访问代码。

呈现的屏幕内容会立即反映出对代码所做的更改。

针对和框架的代码提示新增功能。

借助改进的JavaScript核心对象和基本数据类型支持,更快速、准确地编写JavaScript。

通过集成包括Prototype和流行框架,充分利用DreamweaverCS4的扩展编码功能。

相关文件新增功能，源代码,在“设计”视图中查看父页面。

集成编码增强功能领略内建代码提示的强大功能,令框架、原型和几种服务器语言中的编码更快、更清晰。

代码导航器新增功能新增的“代码导航器”功能可显示影响当前选定内容的所有代码源,如CSS规则、服务器端包括、外部JavaScript功能、模板、源文件等。

创作支持新增功能在DW中直接新建基于HTML和应用程序。

在Dreamweaver中即可预览AIR应用程序。

使应用程序随时可与AIR打包及代码签名功能一起部署。

FLV支持增强功能通过轻松点击和符合标准的编码将FLV集成到任何网页中-无需软件知识。

设计时在Dreamweaver全新的实时视图中播放FLV影片。

支持领先技术，在支持大多数领先Web开发技术的工具中进行设计和编码,这些技术包括HTML、XHTML、CSS、XML、JavaScript、软件和ASP。

学习最佳做法,参考CSS最佳做法实现可视化设计并辅以通俗易懂的实用概念说明。

在支持可访问性和最佳做法的同时创造Ajax驱动的交互性。

集成增强,通过跨产品线的直接通信和交互,充分利用DreamweaverCS4和其它Adobe工具的智能集成和强大功能,包括AdobeFLASHCS4Professional、FIREWORKSCS4、PhotoshopCS4和DeviceCentralCS4软件。

新增功能,在Dreamweaver中设计页面,使最终用户能使用在线服务编辑他们的网页,无需帮助或使用其它软件。

作为Dreamweaver设计人员,您可以限制对特定页面、特殊区域的更改权,甚至可以自定格式选项。

Subversion集成新增功能在Dreamweaver中直接更新站点和登记修改内容。

DreamweaverCS4与Subversion软件紧密集成,后者是一款开放源代码版本控制系统,可以提供更强大的登记/注销体验。

跨平台支持增强功能随心所欲,尽情工作:

DreamweaverCS4可用于基于Intel或PowerPC的Mac、以及系统。

在首选系统中设计,交付跨平台、可靠、一致、高性能的成果。

的优缺点

Dreamweaver软件如图1-1。

图1-1Dreamweaver软件

以用最快速的方式将Firework，Freehand，或Photoshop等档案移至网页上。

使用检色吸管工具选择荧幕上的颜色可设定最接近的网页安全色。

对于选单，快捷键与格式控制，都只要一个简单步骤便可完成。

Dreamweaver能与您喜爱的设计工具，如外挂模组等搭配，不需离开Dreamweaver便可完成，整体运用流程自然顺畅。

除此之外，只要单击便可使Dreamweaver自动开启Firework或Photoshop来进行编辑与设定图档的最佳化。

控制能力,Dreamweaver是唯一提供、视觉化编辑与原始码编辑同步的设计工具。

它包含和BBEdit等主流文字编辑器。

帧（frames）和表格的制作速度快的令您无法想像。

进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。

甚至可以排序或格式化表格群组，Dreamweaver支援精准定位，利用可轻易转换成表格的图层以拖拉置放的方式进行版面配置。

所见即所得Dreamweaver成功整合动态式出版视觉编辑及电子商务功能，提供超强的支援能力给Third-party厂商，包含ASP，Apache，ColdFusion，Tango与自行发展的应用软体。

当您正使用Dreamweaver在设计动态网页时，所见即所得的功能，让您不需要透过浏览器就能预览网页。

梦幻样版将内容与设计分开，应用于快速网页更新和团队合作网页编辑。

建立网页外观的样版，指定可编辑或不可编辑的部份，内容提供者可直接编辑以样式为主的内容却不会不小心改变既定之样式。

您也可以使用样版正确地输入或输出XML内容。

全方位的呈现利用Dreamweaver设计的网页，可以全方位的呈现在任何平台的热门浏览器上。

对于动态HTML支援和鼠标换图效果，声音和动画的DHTML效果资料库可在Netscape和Microsoft浏览器上执行。

使用不同浏览器检示功能，Dreamweaver可以告知您在不同浏览器上执行的成效如何。

当有新的浏览器上市时，只要从Dreamweaver的网站在下载它的描述档，便可得知详尽的成效报告。

网站管理，使用网站地图可以快速制作网站雏形、设计、更新和重组网页。

改变网页位置或档案名称，Dreamweaver会自动更新所有链接。

使用支援文字、HTML码、HTML属性标签和一般语法的搜寻及置换功能使得复杂的网站更新变得迅速又简单。

软件特点，效果难一致，难以精确达到与浏览器完全一致的显示效果也就是说您在所见即所得网页编辑器中制作的网页放到浏览器中是很难完全达到您真正想要的效果，这一点在结构复杂一些的网页（如分帧结构、动态网页结构）中便可以体现出来。

代码难控制，相比之下，非所见所得的网页编辑器，就不存在这个问题，因为所有的HTML代码都在您的监控下产生，但是由于非所见所得编辑器的先天条件就注定了它的工作低效率。

如何实现两者的完美结合，则既产生干净、准确的HTML代码，具备所见所得的高效率、直观性。

Dreamweaver是在网页设计与制作领域中用户最多、应用最广、功能最强大的软件，随着Dreamweaver8的发布，更坚定Dreamweaver在该领域的地位。

它集网页设计、网站开发和站点管理功能于一身，具有可视化、支持多平台和跨浏览器的特性，是目前网站设计、开发、制作的首选工具。

1、灵活的编写方式Dreamweaver具有灵活编写网页的特点，不但将世界一流水平的“设计”和“代码”编辑器合二为一，而且在设计窗口中还精化了源代码，能帮助用户按工作需要定制自己的用户界面。

2、可视化编辑界面Dreamweaver是一种所见即所得的HTML编辑器，可实现页面元素的插入和生成。

或视化编辑环境大量减少了代码的编写，同时亦保证了其专业性和兼容性，并且可以对内部的HTML编辑器和任何第三方的HTML编辑器进行实时的访问。

无论用户习惯手工输入HTML源代码还是使用可视化的编辑界面，Dreamweaver都能提供便捷的方式使用户设计网页和管理网站变得更容易。

3、功能更多的CSS支持——CSS可视化设计、CSS检查工具4、动态跨浏览器验证当保存时系统自动检查当前文档的跨浏览器有效性，可以指定何种浏览器为测试用浏览器，同时系统自动检验以确定页面有没有目标浏览器不支持的tags或CSS结构。

动态跨浏览器有效性检查功能可以自动核对tags和CSS规则是否适应目前的主浏览器。

5、强大的WEB站点管理功能6、内建的图形编辑引擎7、Dreamweaver的集成特性Dreamweaver8继承了Fireworks、Flash和Shockwave的集成特性，可以在这些Web创作工具之间自由地切换，轻松地创建美观实用的网页。

8、丰富的媒体支持能力可以方便地加入Java、Flash、Shockwave、ActiveX以及其他媒体。

Dreamweaver具有强大的多媒体处理功能，在设计DHTML和CSS方面表现得极为出色，它利用JavaScript和DHTML语言代码轻松地实现网页元素的动作和交互操作。

Dreamweaver还提供行为和时间线两种控件来产生交互式响应和进行动画处理。

9、超强的扩展能力Dreamweaver还支持第三方插件，任何人都可以根据自己的需要扩展Dreamweaver的功能，并且可以发布这些插件。

一个网站设计得成功与否，很大程度上决定于设计者的规划水平，规划网站就像设计师设计大楼一样，图纸设计好了，才能建成一座漂亮的楼房。

网站规划包含的内容很多，如网站的结构、栏目的设置、网站的风格、颜色搭配、版面布局、文字图片的运用等，你只有在制作网页之前把这些方面都考虑到了，才能在制作时驾轻就熟，胸有成竹。

也只有如此制作出来的网页才能有个性、有特色，具有吸引力。

Dreamweaver：

这是网页三剑客之一，专门制作网页的工具，可以自动将网页生成代码，是普通网页制作者的首选工具，界面简单，实用功能比较强大。

设计活动中包含着主观和客观两方面的因素，在确立了网页主题之后，首先要明确和熟悉设计的对象和构成的要素。

网页艺术设计涉及的具体内容很多，可以概括为视听元素和版式设计两个方面。

1.视听元素这里所说的视听元素，主要包括：

文本、背景、按钮、图标、图像、表格、颜色、导航工具、背景音乐、动态影像等。

无论是文字、图形、动画，还是音频、视频，网页设计者所要考虑的是如何以感人的形式把它们放进页面这个“大画布”里。

多媒体技术的运用大大丰富了网页艺术设计的表现力。

以上各视听元素大多数浏览器本身都可以显示或收听，无需任何外部程序或模块支持。

比如，大部分浏览器都可以显示GIF、JPEG图形和GIF89a动画。

还有些多媒体文件（如MP3音乐）需要先下载到本地硬盘上，然后启动相应的外部程序来播放。

另外，在浏览器使用插件（Plug-in）可以播放更多格式的多媒体文件。

微软推出IE浏览器后，提供了基于OLE的ActiveX技术，用来在网页中播放多媒体。

目前ActiveX已经成为热门技术。

另一种播放多媒体的技术是JavaApplet。

它是用Java语言编写的应用于网页之中的小应用程序，相比于插件和ActiveX，JavaApplet具有更大的灵活性和良好的跨平台能力，因此具有很好的发展前景。

总之，技术的不断发展使多媒体元素在网页艺术设计中的综合运用越来越广泛，使浏览者可以享受到更加完美的视听效果。

这些新技术的出现，也对网页的艺术设计提出了更高的要求。

Access数据库是集成在Microsoft公司开发的产品更新换代Office系统中的集成软件[10]。

Access是一个数据库管理系统，它之所以被集成到Office中而不是VisualStudio中，是因为它与其它的数据库管理系统（如VisualFoxPro）相比更加简单易学，一个普通的计算机用户即可掌握并使用它。

而且最重要的一点是，Access的功能足够强大，足以应付一般的数据管理及处理需要。

ODBC（OpenDatabaseConnectivity开放式数据库互联）是微软推出的一种工业标准，一种开放的独立于厂商的API应用程序接口，可以跨平台访问各种个人计算机、小型机以及主机系统[11]。

ODBC作为一个工业标准，绝大多数数据库厂商、大多数应用软件和工具软件厂商都为自己的产品提供了ODBC接口或提供了ODBC支持，这其中就包括常用的SQLSERVER、ORACAL、INFORMIX等，当然也包括了Access用MicrosoftAccess来创建数据库，最简单的是通过它提供的的一个“向导”，在启动这个软件以后，建立数据库文件的操作。

下面是我利用“向导”来创建一份数据库文件的具体操作步骤：

选择“Access数据库向导、数据页和项目”单选按扭，然后单击“确定”按钮，若选择MicrosoftAccess对话框中的“空Access数据库”单选项按钮，就会建立一个空的数据库了，数据库里面的信息需要手工来添加，若选择“打开已有文件”单选按钮则可以从下方的列表中选择打开已经存在的数据库。

在弹出的“新建”对话框中，我们可以选择一个模板来快速建立数据库，我们就先选择个“定单管理”看看，然后单击“确定”按扭。

“文件新建数据库”对话框的功能是，指定数据文件名，以及保存它的文件夹。

我们就以它的初始文件名“定单入口1”吧，单击“创建”安扭后，新建的数据库文件就将被指定保存到MicrosoftAccess默认的文件夹下了，或我们给它指定一个新的也行，这样一来，一份新的数据库就建立好了，屏幕上也将显示“数据库向导”对话框。

“下一步”按钮。

以上“数据库向导”对话框分为左右两部分，左边的窗口是用来选择“数据库中的表”，右边的窗口是用来选择“表中的字段”。

选择好所需要的数据库中的表和表中的字段之后，就单击下一步按钮。

以上“数据库向导”对话框是用来确定屏幕的显示样式，我们就采用标准样式吧，单击下一步按钮。

以上“数据库向导”对话框是用来确定打印报表的样式的，我们可以选择如“组织”样式，然后单击下一步按钮。

以上“数据库向导”对话框的作用是确定数据库的标题和是否在所有报表上加一幅图片，我们就先设定数据库的标题为“定单入口”，并不在所有报表上加图片，然后单击下一步按钮。

单击以上“数据库向导”对话框的“完成”按钮，就完成了创建数据库的工作了。

象这个数据库在使用之前还会弹出“我的公司信息”对话框，当然，不同的模板是不相同的，象这个就是要求输入公司的名称和地址信息，如下图所示，关闭这个对话框，系统将自动保存信息。

关闭“我的公司信息”对话框后，会弹出“主切换面板”对话框。

位于“主切换面板”对话框后面的是“定单入口1”窗体，通过这两个窗体即可对新创建的数据库进行各种操作了。

无论什么时候使用“数据库向导”新建数据库，MicrosoftAccess都将自动新建一个切换面板，这个面板对浏览数据库都是很有帮助的，“切换面板”中有一些按钮，单击它们可以打开相应的窗体和报表，或打开其他窗体和报表的切换面板、退出MicrosoftAccess或自定义切换面。

第二章主页介绍

站点

创建站点

要制作一个网站，第一步操作都是一样的，就是要创造一个“站点”，这样可以使整个网站的脉络结构清晰地展现在面前，避免了以后再进行纷杂的管理。

从菜单中选择“站点/新建站点”在弹出如下图所示的对话框，在文本框中输入自己已经企化好的网站名称“xxx”。

在桌面新建一个文件夹“电子信息-xxx”设为本地站点文件夹。

图创建站点

填好后，单击“高级设置”，进入下一个步骤。

如下图所示将默认图像文件夹设为“image”，单机“保存”。

图站点设置

创建站点内容

站点创建完成后，就可以创建Web页来填充站点了，在菜单中选择“新建文件”，新建一个文件后将其命名为“首页.htm（或首页.html）,它就是未来的首页。

由于“个人简历”网站分为“首页”、“基础资料”、“教育背景”、“自我评价”、“爱好“、“职业证书”这六个大栏目网页，所以要新建六个html文件，分别对应上面的六个大栏目网页，存放它们各自的内容。

 首页

每个网站都会有一个首页，就功能上而言，它代表着一个网站的风格与特色，就网站架构上而言，它代表了网站的第一层架构，至于网站上其他Web页，原则上都必须通过首页来连接散播出去，可见首页是多么的重要。

首页是打开网站后在浏览器中显示的第一个页面。

它是起什么名字通常要视Server端的设置，一般的有,或等。

首页的布局有很多方法，在这里我所用到的是如下图所示的“布局模式APDiv（A）”。

使用了CSS样式表中的绝对定位属性的