《计算机基础第七章.ppt》由会员分享，可在线阅读，更多相关《计算机基础第七章.ppt（43页珍藏版）》请在三一办公上搜索。
1、第七章,网页设计基础,本章主要内容,HTML超文本语言基础 Dreamweaver MX 2004的基本操作 在网页中使用多媒体对象及表单 网页版面设计 站点测试与发布,HTML语言简介,网页就是用HTML语言写成的文档，在Internet中的浏览器就是解释这个文档并将文档内容翻译成我们可见的页面形式。HTML是超文本标记语言的缩写(HyperText Mark-up Language),是一种描述文档结构的语言，使用描述性的标记符(称为标记码)来指明文档的不同内容。用HTML语言写的页面是普通的文本文档，不含任何与平台和程序相关的信息，不区分大小写，可被任何文本编辑器读取。HTML文档包含两
2、种信息：页面本身的文本；表示页面元素、结构、格式和其它超文本链接的HTML标签。,标记码是区分文本各个组成部分的分界符，用来把HTML文档划分成不同的逻辑部分（或结构），如段落、标题和表格等。标记码描述了文档的结构，它向浏览器提供该文档的格式化信息，以传送文档的外观特征。,HTML文档结构,网页标题 HTML文件的正文内容,HTML的标记码是由成对的标记组成，书写格式为：内容标记与等是每个HTML文档必须包含的,主要标记码的含义,：通知浏览器该文件含有HTML标记码。：文件头，是HTML文件第一部分的起始。：文件名，将显示在浏览器的窗口。：是HTML文件的第二部分，也是最大的部分，它包含了可显
3、示的主题信息。例如：标题、文字、图形、表格、超级链接等用户可以实际看到的东西。,常用的HTML标记符号及简要说明,HTML文档中常用标记的使用,设置标题:每一个网页都应该有一个标题，格式为:网页标题“网页标题”中的文字显示在浏览器的标题栏中,添加标题:在HTML中有六种标题，是最大标题，是最小标题例如：一级标题 二级标题 三级标题 四级标题,HTML文档中常用标记的使用,设置正文段落:使用和，中间存放所有的文字、图像和超级链接等 例如：第一个段落 第二个段落如果要强调某个单词，可以使用粗体字标题 或强调标签 例如：访客注意的问题,HTML文档中常用标记的使用,设置超级链接：一个超级链接唯一地指
4、向另一个Web信息页超级链接由两部分组成：可被显示在Web浏览器中的超链接文本及图像和用以描述当超级链接被触发后要链结到何处的URL信息。超链接标记的格式为:超级链接文本及图像超链接文本会被加上一种特殊的颜色和下划线，当用户鼠标指向超链接时会变成手的形状，属性HREF表明了超级链接被触发后所指向的URL。,HTML文档中常用标记的使用,设置图像：能被Web浏览器直接解释的图像格式有：GIF格式；X位图格式（.XBM文件）；JPEG格式（.JPG、.JPEG文件）对图像，可用ALIGN属性定义图与文本行的对齐方式：TOP、MIDDLE、BOTTOM、LEFT、RIGHT例如：在网页中插入名为“a
5、a.jpg”的图像，图像宽度为100个像素，高为120个像素：,HTML文档中常用标记的使用,声音和视频声音文件有.WAV、.AU、.SND等视频文件有.AVI、.MPG等Web浏览器自身不能解释声音和视频文件 例如：一段电影.用户触发这段超级链接后，Web浏览器立即启动默认的网络视频播放工具程序，如mplayer程序来播放cc1.avi视频文件。,HTML文档中常用标记的使用,表格表格的表示为：表 格 内 容定义表格标题：标题内容 定义表格列：表格列内容定义表头资料：表头内容定义表格内容：表格内容,HTML文档中常用标记的使用,表单：用在客户端提供一个人机交互界面，通过表单可以将用户输入的数
6、据提交给服务器。在服务器一端，需要由CGI（Common Gateway Interface）语言编写的程序进行处理。表单的语法如下：,表单的输入域有以下几种：提交（SUBMIT）：这是每个FROM都有的。在浏览器中这是一个按钮，表示开始提交信息，激活服务器端的CGI程序。文本（TEXT）：这是文本输入域，用户在通过它输入信息。单选按钮（RADIO）：类似与Windows中的单选按钮。CHECKBOX：多选按钮。选择列表：SELECTION,例如,Dreamweaver MX 2004简介,Dreamweaver MX 2004是一款专业的可视化网页编辑软件，可用于对Web站点、Web页和We
7、b应用程序进行设计、编码和开发。利用 Dreamweaver 中的可视化编辑功能，可以快速地创建页面而无需编写任何代码。下面将介绍Dreamweaver MX 2004的工作界面、创建站点、创建文档、在文档中插入文本、格式化文本、创建超级链接等创建基本网页的操作方法。,Dreamweaver MX的工作界面,Dreamweaver MX主要功能,“插入”栏：包含用于将各种类型的“对象”(如图像、表格和层)插入到文档中的按钮。每个对象都是一段 HTML 代码，在插入时可设置不同的属性“文档”工具：包含各种按钮，提供各种“文档”窗口视图(如“设计”视图和“代码”视图)的选项、各种查看选项和一些常用
8、操作“标准”工具栏:包含“文件”和“编辑”菜单中的一般操作的按钮：“新建”、“打开”、“保存”、“保存全部”、“剪切”、“复制”、“粘贴”、“撤消”和“重做”,Dreamweaver MX主要功能,“文档”窗口:显示当前创建和编辑的文档,有3种视图方式:“设计”视图：是用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境“代码”视图：是用于编写和编辑HTML等语言代码以及任何其他类型代码的手工编码环境“代码和设计”视图：可使用户在单个窗口中同时看到同一文档的“代码”视图和“设计”视图“属性检查器”:也叫“属性”栏或“属性”面板，用于查看和更改所选对象或文本的各种属性。,Dreamweav
9、er MX主要功能,标签选择器:位于“文档”窗口底部的状态栏中，它显示环绕当前选定内容的标签的层次结构。面板组:是组合在一个标题下面的相关面板的集合。若要展开一个面板组，请单击组名称左侧的展开箭头；若要取消停靠一个面板组，请拖动该组标题栏左边缘的手柄。“文件”面板:可以管理文件和文件夹，无论它们属于 Dreamweaver 站点的一部分还是位于远程服务器上，非常类似于 Windows 资源管理器。,站点,站点：一系列通过各种链接关联起来的逻辑上可以视为一个整体的一些网页，它可以大到整个网站，也可以小到一个网页。严格地说，站点也是一种文档的磁盘组织形式，它同样是由文档和文档所在的文件夹组成。一般
10、情况下，网站都有一个首页，或者说主页，作为网站的开始点。首页的作用一般像是一本书的目录，使访问者能够了解网站的内容。首页的名称一般是固定的，例如index.htm或default.htm等（具体名称由Web服务器确定）。,创建站点的步骤,选择“站点/管理站点”菜单命令，打开“管理站点”对话框，在该对话框中单击“新建”按钮，打开“站点定义”导航页面 输入站点名称定位到建立的站点文件夹选择不连接到远程服务器站点建好后，可以将设计网页需要用的一些素材，如：图片、动画、声音文件等拷贝到站点目录下，最好在站点目录下再建子目录，将各种素材分类存放。,网页文档的基本操作,打开网页文档：执行“文件/打开”菜单
11、命令,新建网页文档：执行“文件/新建”菜单命令,在文档中插入文本,插入普通文本：即汉字或英文文本，先将光标定位到要输入文字的地方，然后直接输入文字。需要换行则按“Shift+Enter”键，需要分段则按“Enter”键。插入特殊符号：在“插入/HTML/特殊字符（C）”的子菜单下可以插入多种特殊符号插入水平线：将插入点定位到要插入水平线的位置，并执行以下操作之一：选择“插入/HTML/水平线”菜单命令在插入栏“HTML”选项卡中单击“水平线”按钮插入日期：执行“插入/日期”菜单命令,格式化文本,文本格式设置与WORD类似。可对文本的字体、大小、颜色和对齐方式等进行设置。先选中要格式化的文本，在
12、属性检查器中进行设置,创建超级链接,选中要创建超链接的文字或图片,在“属性检查器”的“链接”文本框中输入目标文件的URL，或者单击“浏览文件”按钮，在站点中选择一个文件作为超链接的目标文件。,创建导航条,导航条能十分有效地实现超级链接功能，它总结了整个站点主要页面的关键词，一般将他们排列在主页上，通过单击导航条上的链接，就可以跳转到相应的页面进行浏览。将插入点定位到要插入导航条的地方，在“插入”栏的“常用”类别中，单击“图像”菜单并选择“插入导航条”按钮，在出现“插入导航条”对话框中进行设置并完成导航条的创建工作,电子邮件超链接,电子邮件超链接就是指当浏览者单击该超链接时，系统会启动客户端电子
13、邮件程序并打开“新邮件”窗口，使访问者能方便地撰写电子邮件。创建电子邮件超链接的步骤：将光标定位到需要插入电子邮件链接的位置在文档窗口中的“插入栏”中选择“常用”标签，单击“电子邮件链接”按钮 在“电子邮件链接”对话框的“文本”框中输入用于超链接的文本，在“E-mail”文本框中输入电子邮件地址，单击“确定”按钮。,在网页中插入、修改图像,受网络带宽和浏览器的限制，在 Web 上常用的图像格式只包括GIF、JPEG和PNG三种。,插入图像的步骤如下：将光标置于要插入图像的位置，在“插入”栏的“常用”选项卡中单击“图像”按钮或选择“插入”菜单中的“图像”命令在“选择图像源文件”对话框中选取存放在
14、站点中的图像文件，最后单击“确认”按钮如果所选择的图像文件不是站点中的文件，则将打开“Macromedia Dreamweaver MX 2004”对话框，提示是否将图像文件保存到根目录下，单击“是”按钮,在网页中插入Flash动态元素,插入Flash动画 插入Flash动画之前应首先在Flash制作软件中完成Flash动画的制作，并且最好将其制作好后保存在站点相应文件夹中。插入 Flash 按钮 在Dreamweaver MX 2004中可以插入自己制作的Flash按钮，也可以插入Dreamweaver MX 2004集成的动态按钮 插入 Flash 文本 Flash文本是Dreamweav
15、er MX 2004中集成的文本动画。插入Flash文本与插入Flash按钮类似,插入播放媒体,插入声音文件 有多种不同类型的声音文件和格式可以插入，例如.wav、.midi 和.mp3。插入Shockwave影片 Shockwave 作为 Web 上用于交互式多媒体的 Macromedia 标准，是一种经压缩的格式，其扩展名为：.dcr，.dir或.dxr，可以从网上获取。插入视频 可以通过不同方式和使用不同格式将视频添加到 Web 页面。视频可被下载给用户，或者可以在下载它的同时播放它。,在网页中使用表单,表单：是用于实现浏览者与网页制作者之间信息交互的一种网页对象，例如：邮箱登录时的对话
16、窗口，要求用户输入用户名和密码，确定后提交给服务器验证，验证通过后你才能进入邮箱。在Dreamweaver MX 2004中创建表单网页，要进行以下几步：创建表单并对其进行属性设置，向表单中添加需要的表单对象（如文本框、按钮等），设置其属性，创建后台处理程序。,创建表单并设置属性,创建表单将插入点定位到要创建表单的位置执行“插入/表单/表单”菜单命令，在编辑窗口中插入表单设置表单属性将插入点定位到插入的表单中，打开“属性检查器”进行设置,插入表单对象,表单是一个容器，只有在表单中添加了表单对象后才能使用。表单对象有：文本字段、隐藏域、文本区域、复选框、单选按钮、单选按钮组、列表/菜单、跳转菜单
17、、图像域、文件域、按钮、标签、字段集。,插入栏,插入表格,表格是页面布局中最常用的手段Dreamweaver MX 2004中的表格技术不仅支持有序地排列数据，还可在其中插入文本、图像及其他元素,在“文档”窗口的“设计”视图中，将插入点放在需要表格出现的位置，在“插入”栏的“常用”类别中，执行“插入/表格”菜单命令，即会出现“表格”对话框,表格的基本操作,选择整个表格选择行或列选择单元格合并单元格：用“修改/表格/合并单元格”命令 插入行或列：用“修改/表格/插入列”命令 删除行或列：用“修改/表格/删除行”命令设置表格属性、设置单元格属性选中整个表格，在“属性检查器”面板中进行设置，各功能与
18、EXCEL软件相似,用表格进行页面布局,利用表格将网页内容分成若干个区，然后将相应的内容分别填入不同的表格中，著名的门户网站“新浪”的页面就是用表格进行布局的。一般用表格定位来布局网页都分成“标题和导航区”与“正文区”两大部分。“标题和导航区”一般在网页最上部，可由两个大的表格组成：上面表格是图片区，下面是导航区。“正文区”是由一个多行多列的大表格构建而成，其中每一行、列再通过插入单独的表格或者拆分的方法来形成多个区域并输入相应的信息。,用布局模式进行页面布局,执行“查看/表格模式/布局模式”菜单命令，在布局面板中选择“布局”按钮，使窗口处于“布局模式”,创建布局表格创建布局单元格在布局单元格
19、中添加内容调整布局表格调整布局单元格设置布局表格和单元格,用布局模式布局页面是在添加内容前才创建布局表格和布局单元格。如，可沿页的顶部绘制一个单元格放置标题图形，在页的左边绘制另一个单元格放置导航条，在右边绘制第三个单元格放置内容。,用框架进行页面布局,框架页面将浏览器的显示窗口分为多个显示区域，每个显示窗口称为一个框架，它包含一个单独的、可以滚动的页面。几个框架组合在一起就构成了框架集。,选中框架创建框架在框架中添加内容保存框架设置框架属性,框架的最常见用途就是导航。一组框架通常包括一个含有导航条的框架和另一个要显示主要内容页面的框架。,用框架进行页面布局的优缺点,访问者的浏览器不需要为每个
20、页面重新加载与导航相关的图形。每个框架都具有自己的滚动条，因此访问者可以独立滚动这些框架。例如：当框架中的内容页面较长时，如果导航条位于不同的框架中，那么向下滚动到页面底部的访问者就不需要再滚动回顶部来使用导航条。使用框架也有一些缺点，如：可能难以实现不同框架中各元素的精确图形对齐以及对导航进行测试可能很耗时间等。,层叠样式,现代网页制作离不开 CSS技术，使用它可以对网页中的布局元素（如表格）、字体、颜色、背景、链接效果和其他图文效果实现更加精确的控制，并显示更好效果。CSS样式不仅可以在一个页面中使用，而且可以用于其他多个页面。,创建层叠样式设置层叠样式 管理层叠样式 应用层叠样式,测试站
21、点,站点中所有页面制作好后要对整个网站进行测试测试最基本的方法就是在浏览器中测试每一个页面，看内容是否能正确显示，尤其要测试超链接是否能正确工作。进一步测试超链接的正确性的方法：将整个站点目录复制到另外一个位置，然后在浏览器中打开站点首页，测试是否所有的超链接都能正确工作。为了确保不同的浏览者能够看到一致的页面效果，网站还应在不同的显示分辨率下进行测试，至少要在 800600和1024768两种分辨率下进行测试在不同字体显示大小情况下进行测试,网站上传,网站制作好后要将它上传到Internet的服务器端，这样人们才能够访问它。一般可以选用FTP软件上传站点，也可以直接使用Dreamweaver
22、 MX 2004来上传网站。,申请网站空间：网站通常位于Web服务器端，要在Internet发布网页，应该选择一个服务周到的ISP服务器作为存储本地站点的远程站点。在申请网站空间时，ISP会使用电子邮件给用户提供上传站点时的信息，主要包括FTP主机地址、用户名、用户密码以及域名等。,网站上传,设置远程站点：申请网站空间后，可在Dreamweaver 中设置远程站点，步骤如下：选择“站点”菜单中的“管理站点”命令，打开“管理站点”对话框在对话框中选择要发布的站点名称，然后单击右侧“编辑”按钮，打开“站点定义”对话框，选择“高级”选项卡，在分类列表中选择“远程信息”列表项，在“访问”下拉列表中选择“FTP”项目在“FTP主机”框内输入申请的主页空间的地址,网站上传,将本地站点上传，步骤如下：连接到Internet在站点面板中，单击“展开/折叠”按钮，展开站点窗口，单击“连接到远程主机”按钮，开始连接到远程FTP站点。在站点面板中出现远程站点文件夹，选择要上传的文件夹，然后单击“上传”按钮，文件夹中的所有站点文件将被上传到远程站点。站点上传完后，在浏览器的地址栏中输入ISP提供的域名，按“Enter”键就可以看到自己在的网页作品,本章课后作业及实习,复习教材第七章内容预习教材第八章内容教材第七章后的问答题指导及习题中对应章节全部习题指导及习题中对应章节全部实验,
