作者：杨杰,段欣
出版社：电子工业出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
Dreamweaver CS3网页制作试读：
前言
。杨杰 主编段欣 主编关雅莉 责任编辑杨波 责任编辑关雅莉 其他贡献者李新承 其他贡献者前言为适应中等职业学校技能紧缺人才培养的需要，根据计算机课程改革的要求，从网页制作技能培训的实际出发，结合当前网页制作软件的流行版本Dreamweaver CS3，我们组织编写了本书。本书的编写从满足经济发展对高素质劳动者和技能型人才的需要出发，在课程结构、教学内容、教学方法等方面进行了新的探索与改革创新，以利于学生更好地掌握本课程的内容，利于学生理论知识的掌握和实际操作技能的提高。
本书按照“以服务为宗旨，以就业为导向”的职业教育办学指导思想，采用“行动导向，任务驱动”的方法，以实训引领知识的学习，通过实训的具体操作引出相关的知识点；通过“实训目的”和“实训步骤”，引导学生在“学中做”、“做中学”，把基础知识的学习和基本技能的掌握有机地结合在一起，从具体的操作实践中培养自己的应用能力；并通过“知识链接”介绍相关知识，进一步开拓学生视野；最后通过“思考与实训”，促进读者巩固所学知识并熟练操作。本书的经典案例来自于生活，更符合中职学生的理解能力和接受程度。
本教材共分8章，依次介绍了网页制作基础知识、站点的创建与管理、网页的基本操作、网页的布局、网页特效制作、简单的动态网站设计、网站的上传和发布、综合应用等内容。
本书由山东师范大学杨杰、山东省教学研究室段欣主编，宁阳职教中心宁留文副主编，牟平职教中心曲波、张丽，宁阳职教中心王芳等参加编写，一些职业学校的老师参与了程序测试、试教和修改工作，在此表示衷心的感谢。
由于编者水平有限，难免有错误和不妥之处，恳请广大读者批评指正。
为了提高学习效率和教学效果，方便教师教学，本书还配有教学指南、电子教案、案例素材及习题答案。请有此需要的读者登录华信教育资源网（http：//www.hxedu.com.cn）免费注册后进行下载，有问题时请在网站留言板留言或与电子工业出版社联系（E-mail：hxedu＠phei.com.cn）。
编 者
2010年2月第1章 网页制作基础知识实训1 我的第一个网页—使用HTML代码制作网页
实训目的
1.了解HTML文档的基本结构。
2.学会使用HTML源代码制作简单网页的方法。
实训步骤
1.在桌面上双击Internet Explorer的快捷图标，启动IE浏览器，在IE浏览器的地址栏中输入网址“http：//www.sina.com”并按【Enter】键，在IE浏览器中打开新浪网的主页，如图1-1所示，用户可以浏览新闻、下载资料、登录论坛等。图1-1“新浪网”主页
2.选择“查看→源文件”命令，在打开的记事本中显示了当前网页对应的HTML源代码，如图1-2所示。
3.将素材中的chapter1文件夹复制到D盘根目录，选择“开始→程序→附件→记事本”命令，打开记事本，在记事本中输入以下HTML代码。图1-2 网页源代码
4.代码输入完毕，选择“文件→保存”命令，弹出“另存为”对话框，选择保存位置为D：\chapter1文件夹，文件名为“myweb.html”，保存类型为“所有文件”，如图1-3所示，单击“保存”按钮。
5.在“我的电脑”或“资源管理器”中打开D：\chapter1文件夹，双击myweb.html打开浏览器浏览该网页，如图1-4所示。图1-3“另存为”对话框图1-4 浏览myweb.html
6.选择“开始→程序→Adobe Dreamweaver CS3”命令，启动Dreamweaver CS3，选择“文件→打开”命令，打开D：\chapter1\myweb.html，如图1-5所示。图1-5 在Dreamweaver中打开myweb.html
7.单击“文档”工具栏上的“代码”按钮，切换到Dreamweaver CS3的“代码”视图，对代码进行如图1-6所示的修改。图1-6 Dreamweaver CS3的“代码”视图
8.单击“设计”按钮，切换到“设计”视图，按【F12】键，保存并预览网页，如图1-7所示。图1-7 修改后的myweb.html网页文件
9.在Dreamweaver CS3中，选择“文件→新建”命令，弹出“新建文档”对话框，如图1-8所示，选择“空白页→HTML”选项，在“布局”列表中选择“无”，单击“创建”按钮，创建一个空白网页。图1-8“新建文档”对话框
10.单击“文档”工具栏上的“代码”按钮，切换到“代码”视图，如图1-9所示，在
和标记之间添加以下代码。图1-9“代码”视图11.单击“设计”按钮，切换到设计视图，选择“文件→保存”命令，在弹出的“另存为”对话框中将文件保存到D：\chapter1文件夹中，文件名为lx.html，保存完毕后，按【F12】键预览网页，如图1-10所示。图1-10 预览lx.html文件
知识链接1.1 网页基础知识
1.什么是Internet
Internet是一个全球性的计算机互连网络，中文名称为“国际因特网”或“因特网”，它是由不同地区、规模大小不一的网络相互连接而成的，如图1-11所示。
通过Internet，用户足不出户即可浏览世界各地的信息。可以和朋友网上聊天，给远方的朋友发送电子邮件，进行网上购物，欣赏和下载自己喜欢的电影或音乐等。图1-11 Internet示意图
2.什么是网站和网页
网站又称为Web站点，是指在网络上根据一定的规则，使用网页开发软件制作的用于展示特定内容的相关网页的集合。在Internet上，信息是通过一个个网页呈现出来的，网站设计者将要提供的内容和服务制作成多个网页，并且经过组织规划，让网页互相链接在一起形成网站，然后将其放到Web服务器上。用户只要连接Internet，就可以使用浏览器访问该网站。
网页一般又称为HTML文档，是一种可以在因特网上传输，能被浏览器识别并翻译成页面，从而显示出来的文件。通常用户看到的网页大都是以.html或.htm为扩展名的文件，当用户在浏览器的地址栏中输入网址后见到的第一个页面称为主页，主页是网站中所有网页的索引页，通过单击主页的超链接可以打开其他的网页。
3.什么是WWW服务
WWW是World Wide Web的缩写，其含义是“全球网”，很多人也称其为“万维网”，它以HTTP（超文本传输协议）协议为基础，提供面向Internet的信息查询服务，WWW服务可以让用户使用统一界面的信息浏览系统查询Internet上的各类信息。
WWW在服务上采用的是客户机/服务器模式，用户创建的网站及网页存放到Web服务器中，当用户使用特定的Web客户端程序（浏览器）请求访问Web服务器上的信息时，Web服务器接受并处理用户请求，然后向浏览器发送所要求的文件内容供浏览者浏览。Web服务器主要负责处理浏览器的请求，其原理如图1-12所示。图1-12 WWW服务的工作原理
Adobe Dreamweaver CS3是一款专业的网站开发工具，它具有强大的功能、简便的操作工具及友好的工作界面，已经被越来越多的网页设计者和网站开发人员所使用。Adobe Dreamweaver CS3集网页设计、网站开发和站点管理功能于一身，具有可视化、跨浏览器和支持多平台的特性，同时利用该软件还可以开发功能强大、高效的动态交互式网站。1.2 Dreamweaver CS3的工作界面
选择“开始→程序→Adobe Dreamweaver CS3”命令，启动Dreamweaver CS3，弹出Dreamweaver CS3的启动界面，如图1-13所示。图1-13 Dreamweaver CS3启动界面
单击该界面内“新建”栏中的“HTML”链接文字，即可进入Dreamweaver CS3的工作界面，可以看到其工作界面主要由标题栏、菜单栏、插入栏、文档工具栏、文档窗口、属性面板、状态栏、面板组等组成，如图1-14所示。图1-14 Dreamweaver CS3工作界面
1.菜单栏
菜单栏位于Dreamweaver CS3窗口最上方，提供了各种操作命令，包括如下菜单。
●“文件”：用于新建、打开、保存、预览文档、转换文档格式和检查文档兼容性等。
●“编辑”：提供用于基本操作的标准菜单命令。
●“查看”：用于切换文档的各种视图，显示或隐藏不同类型的页面元素及工具。
●“插入记录”：向页面中插入各种页面元素，创建超链接。
●“修改”：用于设置页面属性及更改选定页面元素的属性。
●“文本”：用于设置文本及段落的格式。
●“命令”：提供了对各种命令的访问，包括根据格式参数的选择来设置代码格式、创建网站相册等。
●“站点”：提供了创建、编辑站点的命令，用于管理当前站点中的文件。
●“窗口”：用于设置工作区布局和各种面板的打开和隐藏。
●“帮助”：用于提供一些帮助信息。
2.插入栏
插入栏包含用于创建和插入对象（如表格、AP元素和图像）的按钮。当鼠标指针移到某一按钮上时，会出现一个工具提示，其中含有该按钮的名称，如图1-15所示。图1-15 插入栏
●“常用”类别：用于创建和插入最常用的对象，如图像和表格等。
●“布局”类别：用于插入表格、Div标签、框架和Spry构件。还可以选择表格的两种视图：标准（默认）视图和扩展视图。
●“表单”类别：包含一些按钮，用于创建表单和插入表单元素（包括 Spry 验证构件）。
●“数据”类别：可以插入 Spry 数据对象和其他动态元素，如记录集、重复区域、插入记录表单和更新记录表单。
●“Spry”类别：包含一些用于构建Spry页面的按钮，包括Spry数据对象和构件。
●“文本”类别：用于插入各种文本格式和列表格式的标签，如b、em、p、h1和ul。
●“收藏夹”类别：用于将插入栏中最常用的按钮分组和组织到某一公共位置。
3.“文档”工具栏“文档”工具栏左端是快速切换视图模式的按钮，然后是一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项，如图1-16所示。图1-16“文档”工具栏
●“文档标题”：用于为文档输入一个标题，浏览网页时，它将显示在浏览器的标题栏中。新建文档时，默认的网页标题是“无标题文档”。
●“文件管理”：显示“文件管理”下拉菜单，可完成文件的上传、下载等操作。
●“在浏览器中预览/调试”：从下拉菜单中选择一种浏览器预览或调试文档。
●“刷新设计视图”：在“代码”视图中对文档进行更改后刷新文档的“设计”视图。
●“可视化助理”：用户可以使用各种可视化助理来设计页面。
●“检查浏览器兼容性”：用于检查CSS是否对各种浏览器均兼容。
4.“文档”窗口“文档”窗口显示当前打开的文档，用户在这里进行网页的编辑制作，分为“代码”视图、“设计”视图和同时显示“代码”视图和“设计”视图的“拆分”视图3种视图模式。
●“设计”视图：是文档窗口的默认视图方式。在“设计”视图下，用户可以直接看到网页的编辑效果，网页编辑排版完成后的效果与浏览器最终显示的效果完全一致，如图1-17所示。
●“代码”视图：以网页源代码方式显示，如图1-18所示。图1-17“设计”视图窗口图1-18“代码”视图窗口
●“拆分”视图：可在一个窗口中同时看到同一文档的“代码”视图和“设计”视图，如图1-19所示。图1-19“拆分”视图窗口
5.标签选择器
标签选择器位于状态栏的最左边，以HTML标记显示页面对象信息，通过它可以选择各种页面元素。例如，单击
标签可以选择整个网页内容。用鼠标右键单击任一标签，还可以使用弹出的快捷菜单中的命令对该标签进行删除、编辑等操作。6.状态栏
状态栏位于文档窗口的底部，用于提供与正在编辑的文档有关的信息和工具，如图1-20所示。图1-20 Dreamweaver CS3的状态栏
● 选取工具：用于选取“文档”窗口内的对象。
● 手形工具：对象大于“文档”窗口时，用来移动对象的位置。
● 缩放工具：使用该工具后，单击“文档”窗口可增大显示比例，按下【Alt】键单击可缩小显示比例。
● 窗口大小：显示当前文档窗口的大小，以像素为单位。在“窗口大小”区域单击，通过选择弹出的快捷菜单中的命令，可将“文档”窗口的大小调整到预定义或自定义的尺寸。
● 文件大小和预计的下载时间：显示页面（包括所有相关文件，如图像和其他媒体文件）的预计文档大小和预计下载时间。
7.“属性”面板“属性”面板用于查看和编辑当前选定对象（如文本、图像等）的各种属性。不同页面元素对应的“属性”面板也不同。例如，选择页面上插入的图像，则“属性”面板会显示该图像的属性，包括图像的文件路径、图像的宽度和高度等，如图1-21所示。图1-21 图像“属性”面板
8.面板组
Dreamweaver CS3的面板组中包含许多面板，每个面板都可以展开或折叠，如图1-22所示，关闭或打开面板可以通过“窗口”菜单来完成。图1-22 面板组
用户在编辑网页时，若要扩大编辑窗口的大小，可以暂时隐藏面板组。单击面板组与文档窗口间的“隐藏/显示面板组”按钮，可以将所有面板隐藏，再单击该按钮，可以将所有面板显示，如图1-23所示。图1-23“隐藏/显示面板组”按钮
9.标尺和网格
在调整网页中一些对象的位置和大小时，利用Dreamweaver CS3提供的标尺和网格工具，可以使操作更加准确。标尺和网格只在网页文档窗口内显示，在浏览器中不显示。（1）标尺
选择“查看→标尺→显示”命令，可在文档窗口的左边和上边显示标尺。选择“查看→标尺”命令下一级菜单中的“像素”、“英寸”或“厘米”命令，可以更改标尺的单位。（2）网格
选择“查看→网格设置→显示网格”命令，可以显示或隐藏网格。选择“查看→网格设置→网格设置”命令，可弹出“网络设置”对话框，如图1-25所示，在其中可进行网格间隔、颜色、显示线或点，以及是否显示网格和是否靠齐网格等设置。图1-24 标尺和网格图1-25“网格设置”对话框
试读结束[说明：试读内容隐藏了图片]