网页制作基础第一章

网页制作基础教学单位：华南师范大学教育信息技术中心课任教师:柯铭健沟通渠道：•手机:[phone]•E_mail:[e-mail]•公共邮箱:[e-mail](密码):kemjkemj•QQ号码:1121718995•办公电话:85215853先解决几个问题学习后我们能做什么？-以往学生作品欣赏我们要学些什么？-课程内容介绍用什么样的学习方法？-课程学习方法范例网页欣赏我们学习了这门课程,能做到什么?课程内容掌握利用网页制作工具制作包括图片、动画、视音频等多媒体元素的静态网页,了解站点的发布、维护与管理等相关知识，并初步涉及ASP组件等动态技术。Dreamweaver可视化网页编辑工具（兼职站点维护管理功能）Fireworks图形图像处理课程学习具体内容课程学习方法—实践式学习由于本课程设计性和实操性强，我们的学习和考核的方式是以任务驱动的新型教学理念来设计的。综合性设计性实验：学期初同学自己选定一个个人网页主题，可以利用每次上机时间和课后时间，随着授课的进度开始准备，在第6章学习中安排的综合实验时间里集中制作完成。Fireworks用于切网页图、制作按钮。Dreamweaver搭起网页整体框架其他……每一部分的内容完成，学期结束你就拥有一个自己的网站和满意的成果！一点创意和丰富的内容考核方法与要求采用多元评量相结合的方式成绩计算方法：期末考试+平时成绩+综合实验成绩第一次上机作业：选定自己的网页主题，并用文字描述，包括主题，选题原因、预计划分为哪几个栏目（模块）、包含几种多媒体元素、预计从何处取得资料等。并使用你所掌握的任一绘图工具绘制出想像中的主要页面的布局草图。文字与图片一同放在WORD文档中，文档命名为:组长学号+综合实验设想.DOC。（如：20081101001综合实验设想.DOC）第1章网页制作概况1.1网页制作基础知识1.2DreamweaverMX2004及FireworksMX2004简介1.3HTML基础知识1.4DHTML与XML简介*(选读内容)1.1网页制作基础知识网页（webpage):用HTML语言编写或网页软件编辑，通过传播，并被WEB浏览器翻译成为可以显示出来的集文本、超链接、图片、声音和动画、视频等信息元素为一体的页面文件。网站（website)：一个文件夹，其中包括：通过超链接的形式关联起来的一系列网页、其他网站所需的文件或文件夹。1.1网页制作基础知识首页与主页的区别浏览网站时最先访问的页为首页，一般为欢迎信息，通过链接再进入主页（例如：榕树下网站）。主页是整个网站的导航中心（例如：163网站）。有些网站首页即主页.1.1网页制作基础知识网页类型：按内容分：首页、主页、专栏网页、内容网页、功能网页等按技术分：静态网页、动态网页网页布局构图：“同”字型、“厂”字型、分栏型、封面型、对称型等等。要求：主次分明、动静有度、图文并茂、平衡对称1.1网页制作基础知识网页设计的原则设计的3C原则所谓3C原则是指简洁、一致性、对比度。Web页面设计需要遵循这三条原则。页面设计过程首先是搜集组织内容。材料组织好后，下一步就是在Web页面上布置文本、图片等内容，目的是引导浏览者在页内浏览。应该控制页面上的元素的放置顺序和它们相互之间的空隙。1.1网页制作基础知识下面是设计时可用的一些元素：格式化的文本按钮、图标和其他导航工具背景图形表格颜色多媒体元素页面布局1.1网页制作基础知识需要注意的一些问题页面标准色彩不要太多导航要清晰，链接层次不宜超过三层网页长度最大以一又二分之一屏为宜1.2网页制作工具简介入门级软件-FrontPage提高级软件-DreamweaverDreamweaver与Flash、Fireworks并称为Macromedia的网页制作三剑客。（现已为Adobe收购）Dreamweaver对于DHTML（动态网页）特别支持，可以让用户轻而易举地做出很多互动页面特效。插件式的程序设计使得其功能可以无限的扩展。网页设计的辅助美化工具Fireworks以处理网页图片为特长。在绘图方面结合了位图以及矢量图处理的特点，还能轻松地把图形输出到Flash、Dreamweaver以及第三方的应用程序。在网页制作方面，Fireworks能快速地为图形创建各种交互式动感效果，制作GIF动画、自如切图、生成鼠标感应Javascript,不论在图象制作或是在网页支持上都有着出色的表现。PhotoShopFlash1.3HTML基础知识透过浏览器所看到的网页，是由HTML（HyperTextMarkupLanguage）语言所构成的。HTML（超文本标记语言）是一种建立网页文本的语言，透过标记式的指令（Tag），将影像、声音、图片、文字等链接显示出来。HTML网页文件可以由任何文本编辑器或专用网页编辑器编辑，编辑完毕后，HTML文件将以.htm或.html作为文件后缀保存。HTML文件的基本架构HTML的基本概念文本标记列表标记表格标记多媒体标记超链接标记1.3.1基本架构用户在地址栏发出访问某个页面的请求后，浏览器把该请求送到页面所在的服务器，服务器把用户要访问的页面所对应的HTML文件通过HTTP协议传送给客户的浏览器，浏览器对该HTML文件进行解释执行，把整个页面显示在浏览器窗口中。浏览器是如何处理HTML页面的？HTML文件的基本架构如下：HTMLHTML文件开始HEAD文件头开始TITLE.../TITLE网页标题区/HEAD文件头开始结束BODY网页正文区开始网页正文区内容/BODY网页正文区结束/HTMLHTML文件文件结束一个基本HTML文档实例1.3.2HTML的基本概念标记HTML标记是由“”和“”所括住的指令。主要分为：单标记指令（由标记指令构成），如：p。双标记指令（由起始标记/结束标记构成），如：HEAD/HEAD标记属性例：HRsize=“3”align=“left”width=“75%”注释语句例：!--网页正文区从这里开始--1.3.3常用文本标记1.标题（Title）Title标记是文件头中惟一一个必须出现的标记，它也只能出现在文件头中。Title标记的格式为：Title文件标题/Title2.标题号（Hn）标题标记有6种，分别为h1,h2,…h6，用于表示文章中的各种标题。标题号越小，字体越大。3.字体大小标记（font/font）普通的字体也可以改变，使用字体大小标记font/font能够改变包含的字符、单词、短语或指定范围文本的字号大小。语法格式：fontsize=#1color=#2文字/font#1=1，2，3，4，5，6，7or+#，-#，缺省时为3号字体。#2=颜色的16进制数或英文名称1.3.3常用文本标记4.段落标记（P/P）与换行标记（br）P是HTML格式中特有的段落元素。在原始文件中的P，指出在这儿告一段落，下面的文字另起一段。另外一个类似的标记元素是br。br这个标记用来标识一个换行动作，相当于字处理文件中的按回车键的功能。在HTML文件中可以用它来调整行间距。在处理类似诗歌式的语句时常常用到。语法格式：Palign=“left/center/right”文本文本br5.水平线标记（Hr）文本标记综合实例1.3.4列表标记在HTML文件中同样可以使用列表的形式来显示数据的显示。1.无序列表（Ul）无序列表用Ul开始，每一个列表条目用Li引导，最后以/Ul结束。注意列表条目不需要结尾标注/Li。输出时每一列表条目缩进，并且以黑点标示。TYPE的取值设置的符号样式设置效果Disc圆点符号，是系统的默认值●Circle空心圆点○Square空心方块□1.3.4列表标记2.有序列表（Ol）有序列表与无序列表相比，只是在输出时列表条目用数字标示。默认情况下，有序列表的列表项是阿拉伯数字，通过TYPE属性也可以修改有序列表的序号类型，如右表所示。TYPE的取值设置的符号样式1系统的默认效果，以数字1、2、3……进行排列a以小写的字母a、b、c……进行排列A以大写的字母A、B、C……进行排列i以小写的罗马数字i、ii、iii、iv……进行排列I以大写的罗马数字I、II、III、IV……进行排列列表综合实例1.3.4表格标记表格标记主要包括如下几种：1.TABLE.../TABLE创建一个表格。2.TR.../TR定义表格一行的单元格。3.TD.../TD定义一个单元格的内容。4.TH定义表格页眉单元格的内容。5.CAPTION显示表格的标题。上述标记中后两个可省略，前三个不可省。表格综合实例1.3.5多媒体标记图像标记HTML语言中的基本图像标记：img。imgsrc=“图像文件的路径”border=“图片边框宽度”背景音乐标记通过这个标记可以嵌入多种格式的音乐文件。其基本语法为：BGSOUNDSrc=“音乐文件的路径1.3.6超链接标记链接标记AAhref==“_blank”链接标记的属性属性描述Href指定链接地址Name给链接命名Title给链接提示文字Target指定链接的目标窗口1.3.7练习制作一个含有标题“广州亚运会”，而网页显示文字为“广州亚运会将于2010年11月举行！届时将邀请您的参与。”。要求第一句话显示为5号红色字，而第二句话显示为蓝色3号字，且这两句话分两行显示。