《第章DreamweaverCS创建基本文本网页.ppt》由会员分享，可在线阅读，更多相关《第章DreamweaverCS创建基本文本网页.ppt（40页珍藏版）》请在三一办公上搜索。
1、第1章DreamweaverCS6创建基本文本网页,教学内容：Dreamweaver CS6是业界领先的Web开发工具，使用该工具可以高效地设计、开发和维护网站。利用Dreamweaver CS6中的可视化编辑功能，可以快速地创建网页而不需要编写任何代码，这对于网页制作者来说，使工作变得很轻松。文本是网页中最基本和最常用的元素，是网页信息传播的重要载体。学会在网页中使用文本和设置文本格式对于网页设计人员来说是至关重要的。,学习目标熟悉Dreamweaver CS6掌握在网页中插入文本掌握网页中的超链接创建,教学目标和基本要求_教学时间：本章共分_课时教学方法案例教学多媒体教学理论面授教学素材课
2、程范例文件：sample第1章练习文件：exercise第1章,1.1 DreamweaverCS6的操作界面,Dreamweaver CS6是最新推出的网页制作软件，它提供了方便快捷的工具，不仅使得网页制作过程更加直观，同时也大大简化了网页制作步骤，以快速制作网站雏形、设计、更新和重组网页。Dreamweaver CS6的工作界面是由菜单栏、插入栏、文档窗口、属性面板以及浮动面板组组成，整体布局显得紧凑、合理、高效。,1.1.1 菜单栏菜单栏包括【文件】、【编辑】、【查看】、【插入】、【修改】、【格式】、【命令】、【站点】、【窗口】和【帮助】10个菜单。,1.1.2【属性】面板【属性】面板主
3、要用于查看和更改所选对象的各种属性，每种对象都具有不同的属性。在【属性】面板包括两种选项，一种是“HTML”选项，将默认显示文本的格式、样式和对齐方式等属性。另一种是“CSS”选项，单击【属性】面板中的“CSS”选项，可以在“CSS”选项中设置各种属性。,1.1.3 文档窗口文档窗口主要用于文档的编辑，可同时打开多个文档进行编辑，可以在【代码】视图、【拆分】视图和【设计】视图中分别查看文档。,1.1.4 插入栏插入栏中放置的是编写网页的过程中经常用到的对象和工具，通过该面板可以很方便地使用网页中所需的对象以及对对象进行编辑所要用到的工具。,1.1.5 浮动面板在Dreamweaver工作界面的
4、右侧排列着一些浮动面板，这些面板集中了网页编辑和站点管理过程中最常用的一些工具按钮。这些面板被集合到面板组中，每个面板组都可以展开或折叠，并且可以和其他面板停靠在一起。面板组还可以停靠到集成的应用程序窗口中。这样就能够很容易地访问所需的面板，而不会使工作区变得混乱。,1.2 DreamweaverCS6的新功能,Adobe Dreamweaver CS6软件使设计人员和开发人员能充满自信地构建基于标准的网站。利用 Adobe Dreamweaver CS6软件中改善的 FTP 性能，更高效地传输大型文件。更新的“实时视图”和“多屏幕预览”面板可呈现 HTML5 代码，使你能检查自己的工作。下面
5、介绍Adobe Dreamweaver CS6软件的新特性和功能。,1.2.1可响应的自适应格版面使用响应迅速的CSS3自适应网格版面，来创建跨平台和跨浏览器的兼容网页设计。利用简洁、业界标准的代码为各种不同设备和计算机开发项目，提高工作效率。协助你设计能在台式机和各种设备不同大小屏幕中显示的项目。直观地创建复杂网页设计和页面版面，无需忙于编写代码。,1.2.2 FTP快速上传利用重新改良的多线程 FTP 传输工具节省上传大型文件的时间。更快速高效地上传网站文件，缩短制作时间。,1.2.3 AdobeBusinessCatalyst集成使用Dreamweaver中集成的Business Cat
6、alyst 面板连接并编辑你利用Adobe Business Catalyst（需另外购买）建立的网站。利用托管解决方案建立电子商务网站。,1.2.4 增强型jQuery移动支持使用更新的jQuery移动框架支持为 iOS和Android平台建立本地应用程序。建立触及移动受众的应用程序，同时简化你的移动开发工作流程。jQuery Mobile 是jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。,1.2.5 更新PhoneGap支持更新的 Adobe Pho
7、neGap 支持可轻松为 Android 和 iOS 建立和封装本地应用程序。通过改编现有的 HTML 代码来创建移动应用程序。使用PhoneGap 模拟器检查你的设计。,1.2.6 CSS3过渡将CSS属性变化制成动画过渡效果，使网页设计栩栩如生。在处理网页元素和创建优美效果时保持对网页设计的精准控制。,1.2.7 更新的实时视图使用更新的“实时视图”功能在发布前测试页面。“实时视图”现已使用最新版的WebKit 转换引擎，能够提供绝佳的 HTML5支持。,1.2.8 更新的多屏幕预览面板利用更新的“多屏幕预览”面板检查智能手机、平板电脑和台式机所建立项目的显示画面。该增强型面板现在能够让你
8、检查HTML5内容呈现。,1.3 创建本地站点在使用Dreamweaver制作网页前，最好先定义一个站点，这是为了更好地利用站点对文件进行管理，尽可能地减少错误，如路径出错、链接出错等。,1.3.1 使用向导建立站点Dreamweaver是最佳的站点创建和管理工具，使用它不仅可以创建单独的文档，还可以创建完整的站点。,1.3.2 使用高级设置建立站点还可以在【站点设置对象】对话框中选择【高级设置】选项卡，快速设置【本地信息】、【遮盖】、【设计备注】、【文件视图列】、【Contribute】、【模板】、【Spry】和【Web字体】中的参数来创建本地站点。,1.4 添加文本元素,文本是传递信息的基
9、础，浏览网页内容时，大部分时间是浏览网页中的文本，所以学会在网页中创建文本至关重要。在Dreamweaver CS6中可以很方便地创建出所需的文本，还可以对创建的文本进行段落格式的排版。,1.4.1小案例在网页中添加文本文本是基本的信息载体，是网页中最基本的元素，在浏览网页时，获取信息最直接、最直观的方法就是通过文本。,1.4.2小案例设置文本字体类型输入文本后，可以在【属性】面板中对文本的大小、字体、颜色等进行设置。,1.4.3小案例设置文本大小选择一种合适的字体，是决定网页美观、布局合理的关键，在设置网页时，应对文本设置相应的字体字号。,1.4.4小案例设置文本颜色在【属性】面板中还可以改
10、变网页文本的颜色。,1.5 添加其他文本元素在网页中除了插入文字和图像外，还可以插入日期、水平线或特殊符号等。,1.5.1小案例插入日期在Dreamweaver中插入日期非常方便，它提供了一个插入日期的快捷方式，用任意格式即可在文档中插入当前时间，同时它还提供了日期更新选项，当保存文件时，日期也随着更新。,1.5.2小案例插入特殊字符特殊字符包含换行符、不换行空格、版权信息和注册商标等，它是网页中经常用到的元素之一。当在网页文档中插入特殊字符时，在代码视图中显示的是特殊字符的源代码，在设计视图中显示的是一个标志，只有在浏览器窗口中才能显示真正面目。,1.5.3小案例插入水平线水平线在网页文档中
11、经常用到，它主要用于分隔文档内容，使文档结构清晰明了，合理使用水平线可以获得非常好的效果。一篇内容繁杂的文档，如果合理放置水平线，会变得层次分明、易于阅读。,1.6 网页链接的创建超链接是一种网页上常见的对象，它以特殊编码的文本或图形来实现链接。如果单击该链接，则相当于指示浏览器移至同一网页中的某个位置、打开一个新的网页或打开某一个新的网站中的网页。,1.6.1 网页链接概念要正确地创建链接，就必须了解链接与被链接文档之间的路径，每一个网页都有一个惟一的地址，称为统一资源定位符（URL）。网页中的超链接按照链接路径的不同，可以分为3种。第1种是绝对URL的超链接。URL（Uniform Res
12、ource Locator）就是统一资源定位符，简单地讲就是网络上的一个站点或网页的完整路径，如“http:/”。第2种是相对URL的超链接。如将自己网页上的某一段文字或某标题链接到同一网站的其他网页上面去。第3种称为同一网页的超链接，这就是要使用到书签的超链接，一般用“#”号加上名称链接到同一页面的指定地方。,1.6.2小案例图像热点链接同一个图像的不同部分可以链接到不同的文档，这就是热点链接。要使图像特定部分成为超级链接，就要在图像中设置热点，然后再创建链接。这样当鼠标移动到图像热点的时候就会变成手的形状，当按下鼠标的时候，页面就会跳转到或者打开链接的页面。,1.6.3小案例E-mail链
13、接在网页上单击电子邮件链接时，将使计算机上的邮件程序打开一个新的空白邮件窗口，并在电子邮件消息窗口中的【收件人】一栏自动显示电子邮件链接中指定的地址。,1.6.4小案例下载文件链接如果超级链接指向的不是一个网页文件，而是其他文件（如zip、mp3或exe文件等），单击超链接的时候就会下载文件。如果在网站中提供下载资料，就需要为文件提供下载链接。,1.6.5小案例锚点链接有时候网页很长，为了找到其中的目标，不得不上下拖动滚动条将整个文档的内容浏览一遍，这样就浪费了很多时间，利用锚点链接能够更精确地使访问者快速浏览到选定的位置，加快信息检索速度。,1.6.6小案例脚本链接脚本超链接执行JavaSc
14、ript代码或调用JavaScript函数，它非常有用，能够在不离开当前网页文档的情况下为访问者提供有关某项的附加信息。脚本超链接还可以用于在访问者单击特定项时执行计算、表单验证和其他处理任务。,1.6.7小案例空链接空链接用于向页面上的对象或文本附加行为。,1.7综合案例创建基本文本网页,本章主要讲述了Dreamweaver CS6的操作界面、在网页中插入文本和在网页中创建超链接等，下面通过以上所学的知识讲述如何创建基本文本网页。,本 章 小 结,文本内容在一个网站中具有很重要的地位，文本内容相对于网站本身一定要丰富、充实，丰富的文字内容才是浏览者光临该网站的主要原因。因此读者在实际制作自己的网站前一定要规划好文本方面的内容，对一个网站而言，能让浏览者很轻松地观看是很重要的，这其中最关键的因素就看设计者制作的“链接”了。如果整个网页中的链接很系统、很有条理，那么浏览者浏览起来将会十分轻松，查找任何资料也将会十分方便。相反的，如果整个网页中的链接很杂乱，没有条理，那么浏览者在浏览时将会遇到很多困难。总之，读者一定要很好地掌握“链接”这块内容，这将对于网站的形成大有益处。,
