第1章网页设计与实训教程.

1中国人民大学出版社史晓红章立主编DreamweaverCS4网页设计与实训教程2第1章网页设计基础教学任务：•掌握网页的相关概念：网络、Internet、网站、制作网页的基本步骤•学习DreamweaverCS4的安装与启动、操作环境•学会创建一个新的网站“好可工作室”教学重点与难点：•DreamweaverCS4的操作环境•创建一个新的网站31.1网页的相关概念•在制作网页之前应首先了解网络、Internet、网页、网站以及制作网页的基本步骤等相关知识。•计算机网络是将地理位置不同并具有独立工作能力的多个计算机系统和其他设备通过通信线路（网络介质）互连在一起，使用通用的网络协议，实现网络资源共享和互相快速通信的整个信息系统。•1．什么是Internet•Internet一词来源于英文InterconnectNetworks，即“互连各个网络”，中文译名为“因特网”。Internet专指全球范围内最大的、由众多网络相互连接而成的、基于TCP/IP协议的计算机网络。Internet是当今世界最大的计算机互连网络系统，由全球100多个国家和地区不同功能的计算机、通信骨干网和各种计算机网络通过线路连接在一起的一个世界范围的网络。4•2.TCP/IP协议•TCP/IP（TransmissionControlProtocol/InternetProtocol），中文译名为传输控制协议/互联网络协议），是Internet最基本的协议，是由底层的IP协议和TCP协议组成的。TCP/IP协议的开发工作始于70年代，是用于互联网的第一套协议。•TCP和IP可以单独使用，但经常是协同工作，互相补充。简单地说，IP提供了数据传输的灵活性，TCP提供了数据传输的可靠性。5•3.Internet地址•(1)Internet地址•Internet采用一种唯一通用的地址格式，为Internet中的网络和主机分配一个地址。Internet中地址类型有IP地址和域名地址两种。•①IP地址•除了可以在统一资源定位器中输入域名来访问需要的资源之外，还可以使用IP地址来进行访问。每一台上网的计算机都有一个唯一标识主机的号码，这就是IP地址。IP地址是一组32位的数字，如202.106.185.241。•②域名•IP地址是一长串的数字号码，这些数字难记又难理解，为了方便用户理解、记忆，科学家们引入了域名的概念。域名是用一些英文字符来代替IP地址，这些英文字符一般都是英文单词，也可能是拼音字母，它们基本上和站点名称一致，因此记忆起来就十分容易了。域名的一般书写格式为主机名.机构名.地区名，如就是新浪站点的域名。6•4.万维网、网页和网站•（1）什么是万维网•万维网也称做，是WorldWideWeb（全球信息网）的缩写。万维网提供了非常丰富的信息，各种信息按不同的类型以网页文件的形式分别存放在万维网服务器上，供人们选择查阅。•万维网制定了一套标准，有容易掌握的超文本HTML、统一的资源定位器URL和超文本传输协议（HyperTextTransferProtocol，HTTP）。•浏览必须通过浏览器来完成。浏览器是用来访问Internet的超文本技术，是使用最广泛的网络软件，它可以提供包括的浏览、搜索、网络资讯的打印和收发E-mail的功能。•在浏览器中，比较有代表性的有IE（InternetExplorer）、Netscape和Opera等。还有国内腾讯公司的TT浏览器。7•（2）网页和网站•组成的基本元素是网页，网页也称为页面或Web页。•①网页的定义•在网上浏览时看到的一个个页面就是网页。如图1-1所示即为一个网页的界面。•②网页的分类•按网页在一个站点中所处的位置可将其分为主页和内页（分支页面），主页是指进入一个站点时看到的第一页，内页（分支页面）是指与主页相链接的页面。•按网页的表现形式可将网页分为静态网页和动态网页。89•③网站•通常把一系列在逻辑上可以视为一个整体的页面称做网站，或者说网站就是一个相互链接的网页集合，它们可以共享。网站的概念是相对的，大网站（例如“雅虎网”和“新浪网”），页面很多，而且位于多台服务器上；小网站可以是一些个人网站，可能只有几个网页，仅在一台服务器上占据很小的空间。•④网站标志（Logo）•利用一切可利用的视觉元素和方法针对主题概括出高度简洁并集中体现站点特色和内涵的图像与文字。•在设计网站标志时，可以有代表性的人物、动物和花草作为蓝本进行设计，如新浪的眼睛标志和迪斯尼的米老鼠等。最简单的方法是用网站的英文名称作标志，如新浪用字母“sina”结合眼睛图案作为标志。10•⑤网站的标准色彩•标准色彩用于网站的标志、标题、主菜单和主色块。网站给人的第一印象是色彩感觉，确定网站的标准色彩是相当重要的一步。在进行设计时可以参考相关的同类网站或其他网站，如IBM用深蓝色、肯德基用红色、微软用钴蓝色和新浪用黄色等。•⑥网页制作基本步骤•收集整理资源•规划站点内容并创建站点•制作网页•测试站点•发布站点•站点维护、更新111.2DreamweaverCS4简介•当今时代，网络成了最重要的媒体和资源宝库。制作网页可以选择学习HTML代码、也可以选择学习用软件来编辑、还可以两者兼用。•DreamweaverCS4是由美国Adobe公司推出的，一个可视化网页设计和网站管理工具软件。•DreamweaverCS4是一套网页编辑软件，就算没有制作网页的基础，也能很轻松地利用它制作出漂亮的网页，只要从菜单、面板中直接套用就可以了，免除了学习HTML标签命令的困扰，也节省了很多编写源代码的时间。•DreamweaverCS4有强大的网站管理功能，当修改文件名、移动或删除文件时，它自动修改相关的链接；它内置FTP功能，可以直接将文件上传到网站服务器，在网站窗口中可以看到本地端和远程网站的文件，随时检查两端的差异。121.2.1DreamweaverCS4的安装与启动•1、安装DreamweaverCS4•安装DreamweaverCS4软件与前期版本稍有不同，但根据每一步的提示可以很轻松地安装，具体操作步骤如下：•(1)安装前，请先关闭系统上所有目前正在执行的应用程式，包括其他Adobe应用程式、MicrosoftOffice应用程式以及浏览器视窗。也建议您在安装期间暂时关闭防毒软件。•(2)将DVD放入光碟机中，然后依照画面上的指示进行。如果安装程式未自动启动，请浏览至光碟根目录下的AdobeCS4资料夹，然后双击Setup.exe启动安装程序(如果您是从网络下载的软件，请开启资料夹、浏览至AdobeCS4资料夹、双击Setup.exe)，进行初始化，如图1-2所示。13图1-2初始化14•(3)输入DreamweaverCS4序列号,然后单击【下一步】按钮，如图1-3所示。图1-3输入序列号15•(4)阅读DreamweaverCS4许可协议，单击【接受】铵钮。•(5)在显示的界面中选择要安装的Adobe组件，若安装全部组件，则单击【全选】按钮。然后单击【更改…】按钮，选择安装的路径（默认的安装路径为C:\ProgramFiles\Adobe）。•(6)选择好安装的路径后，单击【安装】按钮，安装程序将显示已经做好安装准备，正在安装…,如图所示。1617•(7)完成安装进度后，显示填写注册信息，填写好注册信息，单击【立即注册】按钮，如图所示。•(8)安装完毕后，会显示一个安装完成界面，单击【退出】按钮，完成DreamweaverCS4的安装。18•2、启动DreamweaverCS4•启动DreamweaverCS4的操作很简单，和其它软件的启动方式基本一致。•(2)单击“开始”菜单按钮，在程序组中选择【程序】→【AdobeDreamweaverCS4】命令，即可启动DreamweaverCS4软件，如图所示。19•(2)首次启动DreamweaverCS4时，会弹出【默认编辑器】对话框，用户可为DreamweaverCS4设置编辑器，如图所示。20•(3)在此保持默认设置，单击【确定】按钮，此时将打开AdobeDreamweaverCS4欢迎屏幕，如图所示。21•提示：选择欢迎屏幕下方的“不再显示”复选框，再次启动欢迎屏幕即关闭，在菜单栏中选择【编辑】→【首选参数】→【常规】→【显示欢迎屏幕】命令，即可以在下次启动该软件时将重新显示欢迎屏幕。221.2.2DreamweaverCS4的操作环境•和以前版本相比，DreamweaverCS4的工作界面焕然一新，可以说是做了一次脱胎换骨的改进，从界面中可以看到更多的设计元素。另外，DreamweaverCS4的操作环境非常灵活，用户完全可以根据自己的习惯进行定制。下面对DreamweaverCS4的操作环境进行详细介绍。•DreamweaverCS4的工作界面由标题栏、菜单栏、插入面板、文档工具栏、文档编辑区、状态栏、属性面板、面板组、扩展管理器等组成，如图所示。2324•工作界面定制:用户可以根据各自的习惯进行工作界面的定制，在窗口的标题栏右侧面有一个【设计器】按钮，单击它会弹出一个下拉菜单，可以定制【应用程序开发人员】、【经典】、【编码器】、【设计器】等不同的工作界面。251.3创建一个新的网站•1.3.1新建站点•在制作网页之前必须先在自己的计算机中新建一个新的站点和站点的本地根文件夹，站点一般由很多网页文件组成，另外还包括很多的相关文件，每个网页只有在整个网站中才能发挥作用，所以DreamweaverCS4在提供强大的设计编写网页功能的同时，还提供了站点创建和管理功能。•在新建站点之前，首先要进入【站点定义】对话框，进入【站点定义】对话框方法有下列几种：26•1．文件面板•（1）文件面板中右上方的【管理站点】链接，如图所示。27•单击文件面板左上方的箭头按钮，选择弹出的下拉列表底部的【管理站点…】，如图所示。28•从上述（1）（2）方法中任选一方法都可进入【管理站点】对话框，执行【新建…】→【站点】，即可弹出【站点定义】对话框。2930•2．站点菜单•（1）执行【站点】菜单→【新建站点…】命令，即可进入【站点定义】对话框。31•（2）执行【站点】菜单→【管理站点…】命令，【管理站点】对话框，再执行“新建→站点”命令，也可进入【站点定义】对话框。32•进入【站点定义】对话框后，定义本地站点的方法有下列两种：•（1）利用【基本】选项卡的站点定义向导。•（2）利用【高级】选项卡，这种方法比较直观快速。33•下面详细介绍一下利用【基本】选项卡，根据站点定义向导提示定义本地站点的步骤：•(1)进入【站点定义】对话框后，选择【基本】选项卡（如图所示）；34•(2)设置站点名称为“好可工作室”，在站点的URL文本框中输入网站的域名或IP地址，如果要创建本地站点，则此处可以留空。单击【下一步】按钮。•(3)弹出的对话框中询问是否使用服务器技术，如图所示。由于建立的是静态网站，选择“否，我不想使用服务器技术”单选按钮，单击【下一步】按钮。3536•(4)在下一步对话框中，选择“编辑我的计算机上的本地副本，完成后再上传到服务器”单选按钮。可以单击按钮设置站点的本地根文件夹的位置，若根文件夹没预先建立好，可此时新建。如图所示。选择设置好后，单击【下一步】按钮。3738•(5)在下一步对话框中，显示选择远程服务器连接方式的界面。在“您如何连接到远程服务器”下拉列表框中选择“无”选项，如图所示。单击【下一步】按钮。39•(6)此时，出现确认信息界面，显示前面已经设置完成的内容，单击【完成】按钮，如图所示。40•(7)返回到【管理站点】对话框，如图所示。单击【完成】按钮，本地站点创建完成，在【文件】面板中的【本地视图】窗口中会显示该站点的名称和根文件夹。411.3.2新建网页文件与文件夹•文件面板是管理整个网站的重要工具，它可以让人们马上看到整个网站的结构，也可以看到整个网站的文件内容，快速地管理网站。在文件面板新建网页和文件夹比较方便、简单。•1.新建网