Download presentation
Presentation is loading. Please wait.
1
第1章 网页设计基础 随着Internet（因特网）的发展和普及，越来越多的个人和公司都想在Internet上安个家，各种各样的网站应运而生。网页设计和制作技术也越来越受到人们的关注，网站是如何创建的？需要掌握哪些计算机技术？ 本章介绍网页设计的基础知识，主要包括以下内容： HTML基础 初识Dreamweaver 在代码视图中创建HTML
2
1.1 HTML基础 1.1.1 什么是HTML 1.1.2 课堂实例――创建和测试第一个网页 1.1.3 认识HTML标签
在Internet上浏览的一个个精美网页都是用超文本标记语言HTML制作而成。本节先介绍HTML的基础知识。 1.1.1 什么是HTML 1.1.2 课堂实例――创建和测试第一个网页 1.1.3 认识HTML标签 1.1.4 HTML文档的基本结构
3
1.1.1 什么是HTML HTML是英文Hypertext Marked Language的缩写，中文意思是超文本标记语言，是一种用来制作超文本文档的简单标记语言。 用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台（如UNIX，WINDOWS等）。自1990年以来HTML就一直被用作WWW（World Wide Web）的信息表示语言，用于描述网页的格式设计和它与WWW上其它网页的连结信息。使用HTML语言描述的文件，需要通过WWW浏览器显示出效果。 所谓超文本，是指用HTML创建的文档可以加入图片、声音、动画、影视等内容，并且可以实现从一个文件跳转到另一个文件，与世界各地主机的文件连接。
4
1.1.2 课堂实例――创建和测试第一个网页 选择“开始”|“所有程序”|“附件”|“记事本”，运行“记事本”程序。在“记事本”窗口中输入以下内容： <html> <head> <title>欢迎光临我的第一个网页</title> </head> <body> 这是第一个简单网页! </body> </html> 选择【文件】|【保存】命令，在弹出的“另存为”对话框中选择要保存的路径，在【文件名】文本框中输入文件名myweb001.html。
5
1.1.3 认识HTML标签 HTML文档中的标签包括单标签和双标签，另外在标签中还可以包含一些属性。
<html>和</html>在最外层，表示在这对标签里面的代码是HTML语言。 （2）<head>和</head> 在这对标签里的内容是网页中的头部信息，如网页总标题、网页关键字等，若不需头部信息则可省略此标记。 （3）<title>和</title> 在<head>和</head>这对双标签的中间还包含着<title>和</title>这样一对标签。呈现在网页的标题，标题会出现在IE浏览器窗口的标题栏。 （4）<body>和</body> <body>和</body>之间的“这是第一个简单网页!”部分，就是在网页中实际看到的内容。<body>和</body>之间是网页的主体内容部分，大部分HTML标签都包含在<body>和</body>之间。
6
1.1.4 HTML文档的基本结构 一个HTML文档分为两部分：文件头和文件体。文件头中提供了文档标题，并建立了HTML文档与文件目录间的关系。文件体部分是网页的实质内容，它是HTML文档中最主要的部分，其中包含了文本、图像、表格等元素，这些元素构成了网页的内容。
7
1.2 初识Dreamweaver 1.2.1 Dreamweaver工作环境
Macromedia Dreamweaver是是一款专业的 HTML 编辑器，用于对 Web 站点、Web页和Web应用程序进行设计、编码和开发。无论开发者愿意享受手工编写HTML代码时的驾驭感，还是偏爱在可视化编辑环境中工作，Dreamweaver都会提供实用的工具，使网页设计者拥有更加完美的Web创作体验。 熟练掌握Dreamweaver的工作环境是进一步学习网页制作的关键，本节介绍Dreamweaver的工作环境，并且通过一个实例介绍用Dreamweaver制作一个简单网页的方法。 1.2.1 Dreamweaver工作环境 1.2.2 课堂实例――用Dreamweaver制作一个简单网页 1.2.3 站点的建立
8
1.2.1 Dreamweaver工作环境 1．起始页 2．工作窗口 3．自定义界面 4．Dreamweaver 8的三种视图模式
9
1.2.2 课堂实例――用Dreamweaver制作一个简单网页
下面使用Dreamweave制作一个简单的网页，介绍一下Dreamweave制作网页的基本流程。 1．新建网页 2．编辑网页 3．保存网页 4．预览网页 5．继续编辑网页 6．再次预览网页
10
1.2.3 站点的建立 Dreamweaver 8不仅仅是网页设计工具，更是网站设计工具，提供了大量和网站管理维护相关的功能，能够对网站中的文件、链接、媒体文件等多种资源进行统一管理，使网站设计工作事半功倍。要想使用Dreamweaver 8的网站管理功能，必须首先建立“站点”。 下面就介绍如何创建一个站点。 1．设置站点名称 2．设置是否使用服务器技术 3．设置站点的本地文件夹 4．设置远程服务器连接方式 5．完成站点向导
11
1.3 在代码视图中创建HTML 1.3.1 标签选择器 1.3.2 代码提示工具 1.3.3 编码工具栏
前面在记事本程序中手工编写了一个简单的HTML文档，本节讲解在Dreamweaver代码视图中创建HTML文档的方法。在Dreamweaver代码视图中，利用标签选择器、代码提示工具和编码工具栏可以快速地创建专业的HTML文档。 1.3.1 标签选择器 1.3.2 代码提示工具 1.3.3 编码工具栏
12
1.3.1 标签选择器 标签选择器是Dreamweaver的一个重要功能，利用它可以方便地编辑HTML代码，下面介绍标签选择器的使用方法。
2．输入body标签 3．插入title标签
13
1.3.2 代码提示工具 为了方便用户对HTML源代码进行编辑，Dreamweaver 8提供了代码提示工具。在代码视图中编辑源代码时，这种提示工具会根据上下文的环境自动弹出来（通常需要按一下空格键，或者通过调用菜单命令使其显示出来），从弹出的列表中选择需要输入的内容双击鼠标左键或者按下键盘上的回车键就能直接插入代码，效率非常高，而且不容易出错。 1．URL提示工具 2．色彩提示工具 3．字体列表提示工具
14
1.3.3 编码工具栏 网页源文件（比如HTML）通常包含有数量庞大的代码，对其进行编辑经常让人眼花缭乱，Dreamweaver 8提供的编码工具栏大大方便了代码的编辑工作。 1．编码折叠和展开 2．添加和删除代码注释 3．环绕标签
15
本章习题 上机练习
16
练习1 编写HTML代码 用记事本创建一个HTML文档，网页效果如图1-68所示。在Dreamweaver中利用标签选择器创建HTML文档，完成同样的效果。
17
练习2 文件头标签的应用 练习用“HTML”工具栏中的“文件头”按钮（如图1-69所示）进行网页文件头的设计，包括设置网页关键字、设置页面自动切换等功能。 图1-69 HTML工具栏 这个练习主要是让读者掌握元信息标记<meta>的使用方法。元信息标记<meta>位于HTML文件的<head></head>区域中，他们记录网页关键字，描述，刷新等信息，不会显示在HTML页面中，但却起着重要的作用。
18
练习3 建立自己的站点 在Dreamweaver中建立一个站点，主要步骤是： （1）在本地硬盘新建一个文件夹。
Similar presentations
