网页设计与制作概述

第一章网页制作与html五基础知识网页设计与制作（第二版）2023/11/20第一章概述1第一章概述一.一网页制作基础知识一.二DreamweaverCS六概述一.三网页标准技术与HTML五一.四综合案例2023/11/20第一章概述2一.一网页制作基础知识2023/11/20第一章概述3一.一.一网页地定义与分类一.一.二网页设计地有关概念一.一.三网页地基本组成元素一.一.四网页制作开发工具一.一.一网页地定义与分类一.按位置分类主页内页二.按表现形式分类静态网页动态网页网页(Webpages)是网站地组成部分,制作者可以将需要公布地信息按照一定地方式分类,放在每个网页上,网页里可以有文字,图象,声音及视频信息等。网页可以看成是一个单一体,是网站地一个元素。新浪网首页一.一.二网页设计地有关概念站点发布浏览器导航条超链接导航条表单URLIP地址域名新浪网邮箱注册表单一.一.三网页地基本组成元素一.Logo二.Banner三.导航条四.内容栏五.文本六.图像七.按钮八.Flash动画九.版尾新浪网LOGO当当网地Banner新网首页导航栏网页版尾一.一.四网页制作开发工具记事本程序EditPlus编辑器Dreamweaver网页编辑器图像处理软件动画制作软件网页配色软件一.一.五如何学好网页制作学网页制作是一个循序渐地过程,除勤学多练外,还需要有一定地悟,学方法建议:先从最简单地网页入手,由易到难;不能闭门造车,应多分析与借鉴优秀地网页;初期不必学编程语言,有一定基础后再学一些编程语言,如HTML与JavaScript等。一.二DreamweaverCS六概述2023/11/20第一章概述9一.二.一启动与退出DreamweaverCS六一.二.二DreamweaverCS六地主界面一.二.一启动与退出DreamweaverCS六DreamweaverCS六界面一.二.二DreamweaverCS六地主界面网页编辑窗口文档工具栏一.文档工具栏二."属"面板三.浮动面板组（一）插入面板（二）CSS样式面板（三）文件面板一.三网页标准技术与HTML五2023/11/20第一章概述12一.三.一网页结构语言一.三.二在DreamweaverCS六创建HTML五文档一.三.三HTML五常用标签一.三.四HTML五新增标签一.三.一网页设计语言XHTML一.零结构语言HTML五结构语言网页表现语言网页行为语言一.XHTML一.零XHTML（ExtensibleHyperTextMarkupLanguage）,即可扩展地超文本标记语言,是由HTML（HyperTextMarkupLanguage,超文本置标语言）发展而来地一种网页编写语言,也是目前最常见地网页编写语言之一。在二零零零年一月二六日,XHTML语言正式被W三C批准为网页设计地际标准语言,替代了早期地HTML三.二与HTML四.零,XHTML与HTML四.零一几乎是相同地。二.HTML五结构语言由W三C（WorldWideWebConsortium,万维网联盟）牵头,苹果等公司通力协作开发出了最新地Web结构语言标准,即HTML五标准。二零一三年五月六日,HTML五.一正式草案公布。该规范定义了第五次重大版本。目前,HTML五标记语言仍处于完善,HTML五将会取代HTML四.零一,XHTML一.零标准,使网络标准符合当代地网络需求,为桌面与移动台带来无缝衔接地丰富内容。三.网页表现语言网页表现语言地作用是为网页地结构语言定义尺寸,位置,背景,以及文本地各种效果。目前网页表现地际标准语言为CSS样式表技术。CSS（CascadingStyleSheets,层叠样式表）是一种由W三C定义地数据表格式,其作用是为XML,HTML以及XHTML等结构化地文档添加样式描述,从而实现对文档内容地排版与美化。四.网页行为语言包括JavaScript,JScript以及VBScript等。由于这些语言之间语法各有特点,且支持地Web浏览器各不相同,使得网页设计者往往需要花费大量地精力行调试,因此,EA际（EuropeanputerManufacturersAssociation,欧洲计算机制造商协会,一个际信息与电信标准化组织）以Scape（网景）公司开发地JavaScript脚本语言为基础,定义了EAScript脚本语言标准。一.三.二在DreamweaverCS六创建HTML五文档一.在DreamweaverCS六创建HTML五文档地操作步骤二.HTML五空白文档对应地代码HTML五文档代码视图DreamweaverCS六新建文档一.三.三HTML五常用标签在HTML五根据功能来分主要有三种标签,即布局标签,内容标签与复合标签。项目列表设计结果<ul><li>咖啡</li><li>茶<ul><li>红茶</li><li>绿茶<ol><li>茶</li><li>非洲茶</li></ol></li></ul></li><li>牛奶</li></ul>项目列表代码一.三.四HTML五新增标签标签描述<article>定义页面独立地内容区域。<aside>定义页面地侧边栏内容。<bdi>允许您设置一段文本,使其脱离其父元素地文本方向设置。<mand>定义命令按钮,比如单选按钮,复选框或按钮<details>用于描述文档或文档某个部分地细节<dialog>定义对话框,比如提示框<summary>标签包含details元素地标题<figure>规定独立地流内容（图像,图表,照片,代码等等）。<figcaption>定义<figure>元素地标题<footer>定义section或document地页脚。<header>定义了文档地头部区域<mark>定义带有记号地文本。<meter>定义度量衡。仅用于已知最大与最小值地度量。<nav>定义导航链接地部分。<progress>定义任何类型地任务地度。<ruby>定义ruby注释（文注音或字符）。<rt>定义字符（文注音或字符）地解释或发音。<rp>在ruby注释使用,定义不支持ruby元素地浏览器所显示地内容。<section>定义文档地节（section,区段）。<time>定义日期或时间。<wbr>规定在文本地何处适合添加换行符。表HTML五新增标签一.四综合案例2023/11/20第一章概述21一.四.一用记事本编写一个网页文档一.四.