个人主页制作.docx

个人主页制作.docx

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

个人主页制作

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...

1.1什么是Dreamweaver...................................................................................1...

1.2Dreamweaver功能介绍................................................................................1..

1.3Dreamweaver的优缺点.................................................................................3..

第二章主页介绍.....................................................................................8...

2.1站点...............................................................................................................8...

2.1.1创建站点.................................................................................................................8

2.1.2创建站点内容.........................................................................................................9

2.2首页...............................................................................................................9...

2.2.1设置首页的页面属性..............................................................................................9

2.2.2插入图像.................................................................................................................9

2.2.3插入多媒体............................................................................................................10

2.2.4插入文本................................................................................................................11

2.3创建其它网页.............................................................................................1..2.

2.4建立网页链接.............................................................................................1..2.

总结.......................................................................................................1..4..

致谢.......................................................................................................1..5..

参考文献................................................................................................1.6..

个人主页制作

第一章引言

3.什么是Dreamweaver

Dreamweaver，简称“DW”，中文名称"梦想编织者"，是美国MACROMEDIA

公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，DW是第一

套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地

制作出跨越平台限制和跨越浏览器限制的充满动感的网页。

Macromedia公司成

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

AdobeDreamweaver使用所见即所得

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

它有系统的版

本。

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

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

4.Dreamweaver功能介绍

功能特色，借助共享型用户界面设计,在AdobeCreativeSuite4的不同组件

之间更快、更明智地工作。

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

一个环境。

具体功能，CS6新增功能，利用AdobeDreamweaverCS软6件中改善的

FTP性能，更高效地传输大型文件。

更新的“实时视图”和“多屏幕预览”面板

可呈现HTML5代码，使您能检查自己的工作。

自适应网格，可响应的自适应网格

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

网页设计。

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

工作效率。

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

改善FTP

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

更快速高

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

Catalyst集成，使用Dreamweaver中集成

的面板连接并编辑您利用需另外购买建立的网站。

利用托管解决方案建立电子商

务网站。

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

用程序。

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

更新

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

通过改编

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

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

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

在您

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

更新的实时视图使

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

“实时视图”现已使用最新版的

转换引擎，能够提供绝佳的HTML5支持。

更新的多屏幕预览面板利用更新的“多

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

该增

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

CS5后的新增功借助

1

个人主页制作

AdobeDreamweaverCS5.5软件充满自信地进行设计、构建最新的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、XHTM、LCSS、XML、JavaScript、软件和ASP。

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

概念说明。

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

集成增

强,通过跨产品线的直接通信和交互,充分利用DreamweaverCS4和其它Adobe工

具的智能集成和强大功能,包括AdobeFLASHCS4Professional、FIREWORKSC、S4

PhotoshopCS4和DeviceCentralCS4软件。

新增功能,在Dreamweaver中设计页面,使最终用户能使用在线服务编辑他

们的网页,无需帮助或使用其它软件。

作为Dreamweaver设计人员,您可以限制对

2

个人主页制作

特定页面、特殊区域的更改权,甚至可以自定格式选项。

Subversion集成新增功

能在Dreamweaver中直接更新站点和登记修改内容。

DreamweaverCS4与

Subversion软件紧密集成,后者是一款开放源代码版本控制系统,可以提供更强

大的登记/注销体验。

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

DreamweaverCS4

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

在首选系统中设计,交付跨平

台、可靠、一致、高性能的成果。

5.Dreamweaver的优缺点

Dreamweaver软件如图1-1。

图1-1Dreamweaver软件

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

上。

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

对于选单，

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

Dreamweaver能与您喜爱的

设计工具，如外挂模组等搭配，不需离开Dreamweaver便可完成，整体运用流程

自然顺畅。

除此之外，只要单击便可使Dreamweaver自动开启Firework或

Photoshop来进行编辑与设定图档的最佳化。

控制能力,Dreamweaver是唯一提

供、视觉化编辑与原始码编辑同步的设计工具。

它包含和BBEdit等主流文字编

辑器。

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

进阶表格编辑功能使您

简单的选择单格、行、栏或作未连续之选取。

甚至可以排序或格式化表格群组，

Dreamweaver支援精准定位，利用可轻易转换成表格的图层以拖拉置放的方式进

3

个人主页制作

行版面配置。

所见即所得Dreamweaver成功整合动态式出版视觉编辑及电子商务

功能，提供超强的支援能力给Third-party厂商，包含ASP，Apache，ColdFusion，

Tango与自行发展的应用软体。

当您正使用Dreamweaver在设计动态网页时，所

见即所得的功能，让您不需要透过浏览器就能预览网页。

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

建

立网页外观的样版，指定可编辑或不可编辑的部份，内容提供者可直接编辑以样

式为主的内容却不会不小心改变既定之样式。

您也可以使用样版正确地输入或输

出XML内容。

全方位的呈现利用Dreamweaver设计的网页，可以全方位的呈现在

任何平台的热门浏览器上。

对于动态HTML支援和鼠标换图效果，声音和动画的

DHTML效果资料库可在Netscape和Microsoft浏览器上执行。

使用不同浏览器

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

当有新的

浏览器上市时，只要从Dreamweaver的网站在下载它的描述档，便可得知详尽的

成效报告。

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

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

使用支援文字、

HTML码、HTML属性标签和一般语法的搜寻及置换功能使得复杂的网站更新变得

迅速又简单。

软件特点，效果难一致，难以精确达到与浏览器完全一致的显示效

果也就是说您在所见即所得网页编辑器中制作的网页放到浏览器中是很难完全

达到您真正想要的效果，这一点在结构复杂一些的网页（如分帧结构、动态网页

结构）中便可以体现出来。

代码难控制，相比之下，非所见所得的网页编辑器，

就不存在这个问题，因为所有的HTML代码都在您的监控下产生，但是由于非所

见所得编辑器的先天条件就注定了它的工作低效率。

如何实现两者的完美结合，

则既产生干净、准确的HTML代码，具备所见所得的高效率、直观性。

Dreamweaver

是在网页设计与制作领域中用户最多、应用最广、功能最强大的软件，随着Dream

weaver8的发布，更坚定Dreamweaver在该领域的地位。

它集网页设计、网站

开发和站点管理功能于一身，具有可视化、支持多平台和跨浏览器的特性，是目

前网站设计、开发、制作的首选工具。

1、灵活的编写方式Dreamweaver具有

灵活编写网页的特点，不但将世界一流水平的“设计”和“代码”编辑器合二为

一，而且在设计窗口中还精化了源代码，能帮助用户按工作需要定制自己的用户

界面。

2、可视化编辑界面Dreamweaver是一种所见即所得的HTML编辑器，可

实现页面元素的插入和生成。

或视化编辑环境大量减少了代码的编写，同时亦保

证了其专业性和兼容性，并且可以对内部的HTML编辑器和任何第三方的HTML

编辑器进行实时的访问。

无论用户习惯手工输入HTML源代码还是使用可视化的

编辑界面，Dreamweaver都能提供便捷的方式使用户设计网页和管理网站变得

更容易。

3、功能更多的CSS支持——CSS可视化设计、CSS检查工具4、动态

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、超强的扩展能力Dream

weaver还支持第三方插件，任何人都可以根据自己的需要扩展Dreamweaver的

功能，并且可以发布这些插件。

一个网站设计得成功与否，很大程度上决定于设

计者的规划水平，规划网站就像设计师设计大楼一样，图纸设计好了，才能建成

一座漂亮的楼房。

网站规划包含的内容很多，如网站的结构、栏目的设置、网站

的风格、颜色搭配、版面布局、文字图片的运用等，你只有在制作网页之前把这

些方面都考虑到了，才能在制作时驾轻就熟，胸有成竹。

也只有如此制作出来的

网页才能有个性、有特色，具有吸引力。

Dreamweaver：

这是网页三剑客之一，

专门制作网页的工具，可以自动将网页生成代码，是普通网页制作者的首选工具，

界面简单，实用功能比较强大。

设计活动中包含着主观和客观两方面的因素，在

确立了网页主题之后，首先要明确和熟悉设计的对象和构成的要素。

网页艺术设

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

1.视听元素

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

文本、背景、按钮、图标、图像、表格、颜色、

导航工具、背景音乐、动态影像等。

无论是文字、图形、动画，还是音频、视频，

网页设计者所要考虑的是如何以感人的形式把它们放进页面这个“大画布”里。

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

以上各视听元素大多数浏

览器本身都可以显示或收听，无需任何外部程序或模块支持。

比如，大部分浏览

器都可以显示GIF、JPEG图形和GIF89a动画。

还有些多媒体文件（如MP3音乐）

需要先下载到本地硬盘上，然后启动相应的外部程序来播放。

另外，在浏览器使

用插件（Plug-in）可以播放更多格式的多媒体文件。

微软推出IE浏览器后，提

供了基于OLE的ActiveX技术，用来在网页中播放多媒体。

目前ActiveX已经

成为热门技术。

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

它是用Java语言编

写的应用于网页之中的小应用程序，相比于插件和ActiveX，JavaApplet具有

更大的灵活性和良好的跨平台能力，因此具有很好的发展前景。

总之，技术的不

断发展使多媒体元素在网页艺术设计中的综合运用越来越广泛，使浏览者可以享

5

个人主页制作

受到更加完美的视听效果。

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

的要求。

Access数据库是集成在Microsoft公司开发的产品更新换代Office系

统中的集成软件[10]。

Access是一个数据库管理系统，它之所以被集成到

Office中而不是VisualStudio中，是因为它与其它的数据库管理系统（如

VisualFoxPro）相比更加简单易学，一个普通的计算机用户即可掌握并使用它。

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

理需要。

ODBC（OpenDatabaseConnectivity开放式数据库互联）是微软推

出的一种工业标准，一种开放的独立于厂商的API应用程序接口，可以跨平台访

问各种个人计算机、小型机以及主机系统[11]。

ODBC作为一个工业标准，绝大

多数数据库厂商、大多数应用软件和工具软件厂商都为自己的产品提供了ODBC

接口或提供了ODBC支持，这其中就包