1、网页制作技术教程,第1章 网页制作基础,本 章 教 学 目 的,(1) 熟悉网页的基本概念及网页的制作工具 (2) 熟悉Dreamweaver 8 的工作界面 (3) 掌握HTML命令 (4) 掌握站点的创建和管理,目 录,第一讲 网页制作的基本概念及窗口第二讲 HTML命令及站点的创建,WWW（World Wide Web）：万维网的英文缩写，它以“超文本”方式将Internet上的数据连接在一起，使用户能以简单的方式交换世界各地的信息。WWW服务的出现，使得Internet风行全球，其主要原因是：即使不懂计算机的人也能借助浏览器在网上获得信息;可以在家里上网购物、炒股、聊天、办理银行转账、
2、收发信件等，它的服务主要是通过网页来实现的。网页 (Web) ：在浏览器上看到的画面叫网页，进入网站后所看到的第一个页面称为主页（Home page）。一般网上能识别的主页名称为index.htm(index.html)或index.asp。网页是用HTML语言或其他语言编写的，它的出色之处在于能够把超链接嵌入其中，使多个网页通过超链接方式关联在一起。网站(Site)：就是一组相关网页的集合。设计者设计了几个网页，并且经过组织规划，让网页彼此相连，以便让Internet上的人都能看到，这样的完整结构称为网站，所以，当有人说要制作主页时，通常指的是要建立一个网站，并非单指一个页面。,1.1.1
3、网页制作的基本概念,URL(Uniform Resource Locator)：统一资源定位符，简单地说，它就网络上一 个网站的完整地址。每个主页都对应一个唯一的URL，这样主页在网上才能被 访问到。URL是有统一规则的，它的语法格式如下。协议名称：/服务器主机名称：通信端口/文件目录/文件名称其中协议名称就是这个 URL所连接的网络服务器名称。例如，Http就是指WWW上的 存取方式。HTML：是英文Hyper Text Markup Language的缩写，翻译成中文是“超文本标 识语言”,它通过各种各样的标识来编排超文本信息。HTML文件基本上就是一种文 本文件，可以用简单的文字编辑器(
4、如记事本、写字板)来编写，文件的扩展名为 .html。有些网络中的服务器的操作系统只支持8.3的文本格式，既文件的扩展名只 能为三个字符，所以文件的扩展名也可以为.htm。浏览器(Browser) ：是安装在计算机上的一种软件，通过它可以文便地看到Internet 上提供的各种信息和服务资源，常用的浏览器有两种Internet Explorer和NetscapeCommunicator,简称为IE和NC。超文本（Hypertext）指具有超级链接功能的文件。它可以将文件中已经定义好的关 键字，通过鼠标的单击取得该关键字的相关解释。目前大多数的文件是以超文本的 方式提供给用户的。超链接(Hype
5、rlink)：是 WWW上的一种链接方式，通过单击某个图标或某段文字， 就可以自动连接相对应的其他文件，从一个网页跳转到另一个网页。,1.1.2 常见的网页制作软件,1. 所见即所得的网页编辑工具网页制作编辑工具的作用就是用直观的方式制作网页。现在的网页编辑工具绝大 多数都是所见即得的，即我们实际操作的结果就是最终生成的网页（HTML文档）的效 果，也就是说，网页编辑工具将HTML代码的生成自动化了。最常见的网页编辑工具是Frontpage、Dreamweaver。另外一个工具就是代码编辑工具， 例如写字本、EditPlus等，这些工具主要编辑asp等动态网页。此外还有一些网络编程工具，jav
6、ascript、java编辑器等。 2. 素材处理工具 （1） Photoshop （2） Fireworks （3）Flash,1、菜单栏Dreamweaver8的菜单栏里包括有文件、编辑、查看、插入、修改、文本、命令、站点、窗口、帮助等10个菜单项。单击每个菜单项均会弹出一个下拉菜单，其中每个菜单项又包括若干命令，单击该菜单命令即可。如图所示。2、对象面板网页的内容虽然多种多样，但它们都可以称为网页元各素。简单的网页元素如文字、图像、表格等，复杂的如导航、程序等。“插入”工具栏的功能主要就是在网页中插入各种类型的网页元素，如图所示。3.编辑窗口编辑窗口是编辑网页时的主要窗口，新建或打开一个
7、网页后，即可显示（在图像文件夹中）所示的窗口。它主要由项目选择标签、文档工具栏、编辑区域、状态栏、标尺、垂直和水平扩展按钮等组成。 （1） 项目选择标签：当打开多个网页文件时，将为每个文件显示一个标签，单击其中任意一个标签则可以在编辑区域 中显示该文件的内容，并进行编辑。而且选择标签的右侧有3个按钮，可实现最小化、还原及关闭当前窗口。,1.2 Dreamweaver 8 的工作界面,2）文档工具栏：主要用于切换编辑区域视图模式、设置网页标题、进行标签验证及浏览器中浏览网页等，如图所示，其中各选项的功能及含义如下。按钮：显示代码视图，可在编辑窗口中直接输入HTML代码。按钮：显示代码视图和设计视
8、图，可在编辑窗口中同时进行代码 和页面设计。按钮：显示设计视图，可在编辑窗口中进行页面设计。文本框：用于设置网页标题。按钮：对网页进行浏览器错误检查。按钮：对网页中的标签进行验证。按钮：对站点中的文件进行管理。按钮：在浏览器中预览和调试网页。按钮：刷新设计视图。 按钮：隐藏或显示文件中的内容、标尺、网格和辅助线等对象。按钮：隐藏或显示层外框、表格宽度、表格边框和框架边框等可视化助理对象。 （3） 编辑区域：编辑网页和编写网页代码的区域，该区域有代码、拆分和设计3种视图模式。 （4） 状态栏：位于编辑区域的下方，其中包括标签选择器、选取工具、手形工具、缩放工具、设置缩放比率下拉列表框、窗口大小栏
9、和文件大小栏等项目。,（5） 水平和垂直标尺：编辑网页时方便查看或定位网页中元素的坐标位置。 （6） 垂直和水平扩展按钮：分别位于编辑区域的或侧和下方，用于显示或隐藏编辑窗 口右侧的浮动面板及下方的属性面板，以扩展编辑窗口的宽度和高度。 （7）“属性”面板 用于查看和更改当前选择对象的各种属性，根据选择对象的不同，“属性”面板中设置的项 目也不同，如图所示。5.浮动面板组 浮动面板组是停靠在编辑窗口右侧的浮动面板的集合，如图所示。,1.3 HTML命令 HTML 是Hyper Text Markup Language（超文本标记语言）的缩写。用HTML语言编制的 文档为HTML文档，其文档扩展
10、名通常是.htm或.html。 1.3.1 HTML语言的基本语法 标记是HTML语言的标签符号和用标签符号构成的各种元素的统称，用来界定各种单元， 用一对尖括号“”中间包含若干字符命令表示，前一个“”为起始标记，后一个“ ”为结束标记，单元的名称和属性写在起始标记内。HTML的标记及其属性有以下语法规则。 （1）HTML标记（最外层的标记）语法规则：HTMLHTML属性：VERSION=String （2）HEAD标记 （用来标记HTML文档的页首）语法规则：HEADHEAD （3）TITLE标记 （设置网页标题）语法规则：TITLETITLE （4）BODY标记 （标注HTML文档的正文）
11、语法规则：BODYBODY属性： BACKGROUND=URL指定用于网页背景图片文件的地址BGCOLOR=#RRGGBB 指定背景色彩TEXT=#RRGGBB 指定非可链接文字的色彩LINK=#RRGGBB 指定可链接文字的色彩ALINK=#RRGGBB 指定正被鼠标点击的可链接文字的色彩VLINK=#RRGGBB 指定已被鼠标点击的可链接文字的色彩提示： #RRGGBB是指色彩红绿蓝的值,用16进制数码表示，根椐规范前面需加“#”。,（5）HN标记 （标注文档正文的各级标题） 语法规则：HNHN 属性： ALIGN=leftrightcenterjustify （6）P标记 （显示段落标记
12、） 语法规则：PP 属性： ALIGN=leftcenterright （7）BR标记 (强制换行标记) 语法规则：BR （8）PRE标记 (预格式化文本标记) 语法规则：PREPRE 属性：WIDTH=n 常用的HTML标记符如下： ：段落标记符 ：换行标记符 ：居中标记符 ：下划线标记符 ：加粗标记符 ：斜体表记符 ：标题标记符（n取16之间的正整数） ：无序列表标记符 ：列表项标记符,常用表格标记符如下： ：定义表格 ：定义行 ：定义表头 ：定义数据 表格属性如下： 跨多列： 跨多行： 边框： 表格大小：,第二讲 HTML命令和创建站点,1.3.2 HTML文档的基本结构一个HTML文档
13、是由标记和文本内容组成，其结构如下：,【任务1-1-1】创建简单的HTML文件,【操作要求】在“D:rootunit1”新建文件夹y1-01，然后创建一个新的HTML文件，并保存HTML文件到“D:rootunit1y1-01”，文件名为：Y1-0A.html。,【操作步骤】（1）打开“D:rootunit1”，单击鼠标右键，选择【新建】【文件夹】菜单命令， 命名为y1-01。 （2）启动Dreamweaver, 选择【创建新项目】【HTML】菜单命令。 （3）选择“代码”项。 （4）输入如下代码：简单HTML文件的编写教程,.STYLE3 font-size: 14px 全国计算机信息高新技
14、术考试 第1章 网页制作基础 本章主要介绍网页的基本概念及HTML语言等。 1.1 网页的基本概念 1.2 HTML命令 1.2.1 HTML语言的基本语法 1.2.2 HTM语言的基本结构 （5） 按F12，运行后结果将如教材所示。至此，操作完毕。,1.4 站点的创建 1.4.1站点的规划 在制作网页之前，应先对要制作的网站的站点进行规划和创建，这样就可利用站点的管理 功能对站点中的文件进行管理或测试。 1. 认识站点 在Dreamweaver 8中提供了本地站点、远程站点和测试站点3种类型的站点。通过本地站 点和远程站点可以在本地磁盘和Web服务器之间传输文件，通过测试站点可以对动态站点
15、进行测试。 （1） 本地站点 本地站点是用户工作的目录，是存放用户网页、素材等的本地文件夹。在制作一般网页时 只需建立本地站点即可。 （2） 远程站点 若需要不连接Internet就能对所建的站点进行测试，可以在本地电脑上创建远程站点模拟真 实的Web服务器环境进行测试。 （3） 测试站点 测试站点主要是对动态页面进行测试时使用，是Dreamweaver处理动态页面的文件夹。 Dreamweaver使用此文件夹生成动态内容并在工作时连接到数据库。 2. 规划站点结构 规划站点结构是指利用不同的文件夹将不同的网页内容分门别类地保存，合理地组织站 点结构，可提高工作效率。 在规划站点结构时应先在本
16、地磁盘上创建一个文件夹作为站点的根目录，所有在制作过 程中创建和编辑的网页都应当保存在该文件夹中。在发布站点时，只需将此文件夹中的 所有内容上传到Web服务器上即可。如果站点结构复杂，内容较多，则还需建立子文件 夹，以存放不同内容的网页。,在站点规划中合理地为文件和文件夹进行命名也非常重要，好的名称容易理解，能够表 达出网页的内容。可以采用与文件或文件夹内容相对应的英文或拼音来命名，且避免使用长 文件名和中文，比如图片文件夹可以命名为images或tupian。 制作网页所需的图片或动画等文件存放的位置也是规划站点结构时应考虑的。如果是大型 站点，可在站点根目录下创建一个名称为images的文
17、件夹，用以存放主页中用到的图片和 动画。 3. 制作导航流程 做好站点的规划后，就可以根据规划制作一个导航流程图，以便理清思路，制作时可直接 在纸上粗略地绘出导航流程图。如图所示是一个音乐网站最初的导航草图。海外中国主题 曲“天籁之音”网站首页最新动态流行音乐古典音乐原声碟电影音乐民族音乐人物作曲家 歌星4. 绘制页面草图 制作好导航流程图后，接下来应确定整个站点的页面风格，也就是设计站点的样式和版面 草图。它可以用Photoshop、CorelDRAW和Fireworks等图形软件制作。,【任务1-1-2】创建本地站点,【操作要求】在“D:rootunit1”新建文件夹y1-01，然后创建一
18、个新的本地站点root。,【操作步骤】 （1）选择【站点】 【管理站点】菜单命令，弹出“管理站点”对话框。（2）选择“新建”按钮,在弹出的下拉菜单中选择“站点”命令，具体操作如图所示。,（3）在对话框中输入站点名称如“root“后单击按钮，如图所示。,（4）在弹出的对话框中选是否使用服务器技术，由于我们在本地硬盘上进行测试，所以 这里选择“否，我不想使用服务器技术”单选按钮，如图所示，单击“下一步”按钮。,（5）由于我们将在本地硬盘上进行站点的制作和测试，因此在弹出的对话框中选择“编辑 我的计算机上的本地副本，完成后再上传到服务器”单选按钮（如下图所示），在该对话框 中还要选择站点文件的存放位
19、置，可在文本框中直接输入，也可以单击文本框旁边的浏览 按钮，在打开的“选择站点root的本地根文件夹：”对话框中选择存放站点文件的文件夹， 然后选择需存放的位置即可。,（6）单击“下一步”按钮，在弹出的对话框中选择“否，不启用存回和取出”，如图所示。,（7）单击“下一步”按钮，显示创建的站点信息，如果需要修改设置可以单击“上一步” 按钮，如果没有问题，单击“完成”按钮关闭对话框。至此，操作完毕。如图所示。,上机作业,1、【实战训练一】第13步骤 2、【拓展实战一】第13步骤 3、【拓展实战二】HTML文档的基本结构的操作,本讲小结,1.1.1网页制作的基本概念 1.1.2 Dreamweaver 8 的工作界面 1.1.3 HTML命令 1.1.4 创建本地站点,
