搜索
新闻网页设计与管理主讲教师：陈訸玮2012年9月第1章初识DreamweaverCS5•1.1网页基础知识•1.2了解DreamweaverCS5界面•1.3网站建设流程•1.4创建站点•1.5创建网页文档1.1网页基础知识•1、网页基本构成元素•网站Logo：也叫网站标志，是一个站点的象征，也是一个网站是否正规的标志之一。网站标志一般放在网站的左上角，访问者一眼就能看到。成果的网站标志有着独特的形象标识，在网站的推广和宣传中起到事半功倍的效果。网站标志应体现该网站的的特色、内容以及其内在的文化内涵和理念。•网站Banner：Banner是一种网络广告形式，Banner一般放在网页的顶部位置。最常用的是486×60像素的标志广告。1.1网页基础知识•导航栏：是整个网站设计中的一个较独立的部分，在页面中的位置是固定的，一般有4中常见的现实位置，页面左侧、右侧、顶部和底部。在同一个页面中可以运用多种导航栏，例如在顶部设置主菜单，在页面左侧设置折叠菜单，同时在页面底部设置多种链接。•文本：网页中的信息主要以文本为主，在网页中可以通过字体、大小、颜色、底纹、边框等来设置文本的属性。•图像：用于网页的图像文件一般为JPG和GIF格式。•动画：通常认为制作优秀、创意出总的动画是吸引浏览者的最有效方法。常见的有GIF动画和Flash动画。1.1网页基础知识•超级链接：实现从一个网页指向另一个目的端的链接。例如指向两一个网页或相同网页上的不同位置。这个目的端通常是另一个网页，也可以是一幅图片、一个电子邮件地址、一个程序等。•表格：网页排版的灵魂。通过表格可以精确控制网页元素在网页中的位置。•表单：用于收集站点访问者信息。站点访问者填表单的方式输入文本、单击单选按钮与复选框以及从下拉菜单中选择选项，填好表单后，站点访问者便送出所输入的数据，该数据就会根据访问者设置的表单处理程序。1.1网页基础知识•2、网页的种类•静态网页：静态网页是实实在在保存在服务器上的文件，每个网页都是一个独立的文件；运行于客户端的程序、网页、插件、组件，均属于静态网页，例如html页、Flash、JavaScript、VBScript等等，它们是永远不变的，常见其文件后缀名为.html。优点：静态网页页面上的内容和格式一般不会改变，只有网络管理员可根据需要更新页面，因此静态网页的内容相对稳定，容易被搜索引擎检索。缺点：由于没有数据库的支持，静态网页在网站制作和维护方面工作量较大，这也使得静态网页的交互性在功能方面有较大的限制。1.1网页基础知识•动态网页动态网页实际上并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返还一个完整的网页；在服务器端运行的程序、网页、组件，属于动态网页，它们会随不同客户、不同时间，返回不同的网页，例如ASP、PHP、JSP、ASP.net、CGI等。其常见文件后缀名为.asp、.jsp、.php等，且通常在后缀名后加问号。如=u3&lang=zh动态网页以数据库技术为基础，可以大大降低网站维护的工作量；交互性强，可以实现如用户注册、用户登录、在线调查、用户管理、订单管理等等功能。1.1网页基础知识•静态网页是网站建设的基础：内容与格式相对稳定，容易被搜索引擎检索；设计与管理的工作量大，交互功能低。•动态网页以数据库为基础：交互性强，网站管理工作难度降低。•为了网站适应搜索引擎检索的需要，在采用动态网站技术的同时可以将网页内容转化为静态网页发布，在同一个网站上，动态网页内容和静态网页内容同时存在是很常见的事情。1.1网页基础知识•3、HTML语言HTML（HyperTextMark-upLanguage）：超文本标记语言，是网络的通用语言，是的描述语言。HTML格式：文字+标记（标签，tag，一个HTML文档就是由一系列的元素和标签组成的。）例如：HTML文字/HTMLHTML用标记来规定元素的属性和它在文件中的位置。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。任何文字编辑器均可进行HTML语言的编写。如记事本。1.1网页基础知识•HTML--------------------------------------开始标签•HEAD--------------------------------------头部标签•TITLE一个简单的HTML示例/TITLE•/HEAD-----------------------------------文件头结束•BODY---------------------------------文件主体开始•/BODY--------------------------------文件主体结束•/HTML------------------------------------结尾标签•标记在使用时必须用必须用“”括起来，标记拥有单标记和双标记之分。1.1网页基础知识单标记：指的是只需单独使用就能完整地表达意思的标记。这类标记的语法是标记名称。最常用的单标记如BR，表示换行。双标记：由“始标记”与“尾标记”两部分构成，是必须成对使用的标记。始标记前加一个斜杠（/）即成为尾标记。双标记的语法是标记内容/标记，其中“内容”指要被这对标记施加作用的部分。如：Title一个简单的HTML示例/Title。1.1网页基础知识•HTML超文本文档的结构主要包括头部（Head）和主体（Body）两个部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。•（1）HTML/HTML在文档的最外层，文档中的所有文本和html标签都包含在其中，它表示该文档是以超文本标识语言（HTML）编写的。•（2）HEAD/HEAD是HTML文档的头部标签，在浏览器窗口中，头部信息是不被显示在正文中的,在此标签中可以插入其它标记，用以说明文件的标题和整个文件的一些公共属性。若不需头部信息则可省略此标记，良好的习惯是不省略。1.1网页基础知识•（3）Title和/Title是嵌套在HEAD头部标签中的，标签之间的文本是文档标题，它被显示在浏览器窗口的标题栏。•（4）BODY/BODY标记之间的文本是正文，是在浏览器要显示的页面内容。•注意：上面的这几对标签在文档中都是唯一的，HEAD标签和BODY标签是嵌套在HTML标签中的。1.2了解DreamweaverCS5界面1.2了解DreamweaverCS5界面•1、【菜单】栏•2、【应用程序】栏•3、【文档】工具栏•4、【文档】窗口•5、【标签】选择器•6、【属性】检查器•7、【面板】组1.3网站建设流程•1、前期策划前期调研：用户调查、竞争对手调查、企业自身情况调查。网站策划：定位网站内容、划分网站栏目。资源整理：收集网站共享发布的文本、图像、动画、声音和视频。•2、中期制作前台设计：网站的整体色彩风格设计，绘制网站图标、按钮、导航等界面元素，动画设计，网站页面布局和整体效果。页面代码的编写：使用DW将设计好的页面转换为浏览器可识别的代码。后台程序的开发：数据库系统的设计。1.3网站建设流程•3、后期维护网站测试：测试网站页面链接的有效性、网站文档的完整性、正确性及后台程序和数据库的稳定性。网站发布：上传到服务器进行对外服务，宣传和推广。网站维护：服务器的软、硬件维护，系统升级，数据库优化和网站内容更新。设计、制作与管理网站涉及多门学科：版面构图（平面设计）；程序开发（网页应用程式）；网站内容管理（内容管理系统、资讯架构学）。编辑、美工、程序员是一个网站的基本配备人员。1.4创建站点•问题1：为什么要先新建一个文件夹？站点是一系列文档的组合，它的作用是存储、管理网站中各种的网页文档以及相关的素材如Flash、图像、视频等等。素材、文档通过各种链接建立逻辑关系。由于素材的种类太多，必须使用多个文件夹进行存储和管理，为了防止文件丢失，通常建立一个站点文件夹（根文件夹／父文件夹）统一保存网站所有的文档和素材。站点文件夹、站点名称、站点内所有文件的文件名应以英文加数字的方式来命名。1.4创建站点•问题2：为什么要进行主目录和默认文档的设置IIS的功能是将网页发布在网络上供他人浏览，即让其他的主机访问你保存在站点文件夹中的网页文档。当访问一个网站时，用户默认访问进入的目录（站点文件夹保存在你的电脑中的哪个硬盘）即为主目录，IIS预设的主目录是“c:\inetpub\”。从安全角度看，网站的数据不宜放到系统盘，需要修改IIS默认主目录。1.4创建站点当进入一个网站或网站目录时，不需要输入具体文件名，只需要输入网站目录，浏览器即可直接访问文件。比如我们输入，实际上它缺省了index.asp，它的全称是。不同的网站默认文档不一样，而且同一个网站也可有多个默认文档，默认文档之间存在着优先次序。我们学习制作的是静态站点，它的首页文档名称一般为index.html，为了让其他用户访问你的站点时看到首页文件，要调整默认文档的优先级次序再制作首页。1.4创建站点•问题3：站点建立中的设置问题①【站点名称】必须设置；本地站点文件夹即事先创建的根文件夹（主目录文件夹）。②【服务器名称】一般与站点文件夹相同（以英文数字命名）；当前以学生机作为服务器使用，在本机浏览网页效果，因此设置【连接方法】为“本地/网络”；【服务器文件夹】即站点文件夹；【WebURL】可以省略。③由于创建的是静态网站，不涉及交互性的问题，所以【服务器模型】设置为无，②③两点可以省略。1.4创建站点•1、IIS配置•IIS（InternetInformationServices）：指互联网信息服务，是由微软公司提供的基于运行MicrosoftWindows的互联网基本服务。IIS是一个文件和应用程序服务器，是在Windows上建立Internet服务器的基本组件，其中包括Web服务器、FTP服务器、NNTP服务器和SMTP服务器，分别用于网页浏览、文件传输、新闻服务和邮件发送等方面1.4创建站点•安装IIS（1）点击【开始】/【控制面板】，运行【控制面板】中的【添加或删除程序】，点击【添加/删除Windows组件】按钮，出现下图所示的“Windows组件向导”对话框。1.4创建站点（2）选择【Internet信息服务(IIS)】复选框，单击【详细信息】，出现如下图所示的对话框，选择【万维网服务】，单击【详细信息】，取消默认选中的【打印机虚拟目录】选项，单击【确定】后返回对话框，选择【下一步】开始安装，之后单击【完成】结束。1.4创建站点（3）系统自动安装组件，完成安装后，系统在【开始】/【控制面板】（性能与维护）/【管理工具】程序组中会出现一项【Internet信息服务】，单击它打开如下图所示的窗口。1.4创建站点•配置IIS服务（1）从【控制面板】的【管理工具】目录中选择【Internet信息服务】图标，将打开如下图的窗口。1.4创建站点（2）右击【默认网站】选项，选中【属性】命令，打开如下图的【默认网站属性】对话框。1.4创建站点（3）选择【主目录】标签，设置【本地路径】为创建的站点根文件夹。1.4创建站点（4）选择【文档】标签，将index.html设置为【默认文档】的首选项。1.4创建站点•2、建立站点（1）在F盘新建文件夹xnml。（2）打开DW软件，执行【站点】/【新建站点】命令，打开【站点设置对象XNML】对话框，这是站点名称为XNML，设置【本地站点文件夹】为“F:\xnml”。效果如下图所示。注意：站点文件夹、站点名称、站点内所有文件的文件名应以英文加数字的方式来命名。1.4创建站点1.4创建站点（3）在左侧列表中选择【服务器】项目，单击【添加新服务