《CSS DIV网页样式与布局案例教程》课件 项目一 网站制作入门_第1页
《CSS DIV网页样式与布局案例教程》课件 项目一 网站制作入门_第2页
《CSS DIV网页样式与布局案例教程》课件 项目一 网站制作入门_第3页
《CSS DIV网页样式与布局案例教程》课件 项目一 网站制作入门_第4页
《CSS DIV网页样式与布局案例教程》课件 项目一 网站制作入门_第5页
已阅读5页，还剩29页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

项目一

网站制作入门任务一

了解网站开发流程任务二

创建Dreamweaver站点任务三

制作简单的HTML+CSS页面任务一

了解网站开发流程网站开发流程从整体上来说可以分成3大部分，分别是网站设计、网站制作和后期维护。在这3部分中，本书着重介绍的是网站制作部分，强调3个要点的讲解：设置站点、搭建网页主体结构层、搭建网页样式层。支撑知识点一、网页、网站和主页简单来说，网页就是我们上网时在浏览器中打开的一个个画面。网页中可以包含文字、图像、表格、超链接、声音、影像等，其中文字、图像、超链接是组成网页最基本的3个元素。网站就是一组相关网页的集合，是通过Internet向全世界发布信息的载体。主页就是打开某个网站时显示的第一个网页，又叫首页。主页文件基本名为index或default，如index.html、default.html、index.asp和index.aspx等。二、Internet、IP地址和域名Internet的全称是Internetwork，中文称为因特网，是集现代计算机技术和通信技术于一体，基于TCP/IP协议将全世界不同国家、不同地区、不同部门和不同类型的计算机、国家骨干网、广域网、局域网通过网络互连设备连接而成的、全球最大的开放式计算机网络。因特网上连接了不计其数的服务器和客户机，每一个主机在因特网上都有一个唯一的地址，我们称这个地址为

IP地址（InternetProtocol

Address）。由于IP地址在使用过程中难于记忆和书写，人们又开发

了一种与IP地址对应的字符用以表示地址，这就是域名。三、WWW、HTTP、URL和浏览器WWW是World

Wide

Web的缩写，中文称为“万维网”，也可简称为Web，它是互联网上的一个资料空间，在这个空间中，任何一个资源都由“统一资源标识符”（URL）标识，并利用超文本传输协议（HypertextTransfer

Protocol，HTTP）传送给使用者。任务二

创建Dreamweaver站点站点是一个网站中所有文件和资源的集合。用户可以使用Dreamweaver在计算机上创建站点和网页，并将站点上传到Web服务器，还可以在保存文件后随时上传更新的文件来对站点进行维护。使用Dreamweaver搭建站点的方法很简单，下面我们便来学习在本机上创建静态站点的方法。支撑知识点一、启动和退出Dreamweaver1．启动Dreamweaver安装好Dreamweaver后，就可以使用该软件了。启动该软件的方法主要有以下2种。方法一：通过双击操作系统桌面上的Dreamweaver快捷图标启动。方法二：选择“开始”>“所有程序”>“AdobeDesign

Premium

CS5”>Adobe

Dreamweaver

CS5”菜单启动。2．退出Dreamweaver退出Dreamweaver的方法主要有以下3种。方法一：在Dreamweaver的菜单栏中选择“文件>“退出”菜单。方法二：按【Ctrl+Q】组合键退出。方法三：单击Dreamweaver操作界面右上角的“关闭”按钮退出。二、Dreamweaver工作界面介绍启动Dreamweaver后，在其起始页中单击“新建”列中的任一项，将会创建一个相应格式的新文档，并进入

Dreamweaver

CS5工作界面。此处我们单击“HTML”项，创建一个.html格式的文档并进入DreamweaverCS5工作界面。1．应用程序栏应用程序栏位于工作区顶部，左侧显示菜单栏，右侧包

含工作区切换器、“CS

Live”按钮和程序窗口控制按钮。菜单栏几乎集中了Dreamweaver

CS5的全部操作命令，利用这些命令可以编辑网页、管理站点以及设置操作界面等。要执行某项命令，可首先单击主菜单名打开其下拉菜单，然后用鼠标单击相应的菜单项。程序窗口控制按钮包括“最小化窗口”按钮、“最大化窗口”按钮和“关闭窗口”按钮。2．文档标签栏文档标签栏位于应用程序栏下方，左侧显示当前打开的所有网页文档的名称及其关闭按钮；右侧显示当前文档在本地磁盘中的保存路径以及还原按钮

；下方显示当前文档中的包含文档（如CSS文档）以及链接文档。当用户打开多个网页时，通过单击文档标签可在各网页之间切换。另外，单击下方的包含文档或链接文档，可打开相应文档。3．文档工具栏利用文档工具栏中包含的按钮可以在文档的不同视图之间快速切换。工具栏中还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项。4．状态栏状态栏位于文档窗口底部，它提供了与当前文档相关的一些信息。其中，标签选择器的作用很大，它显示了当前光标所在位置或当前选定内容的标签层次结构（HTML网页文档

就是由一个个标签组成的，我们将在后面讲解），单击某个标签可以选中网页中该标签所代表的内容，如单击<table>标签，可选中网页中与之对应的表格。5．属性检查器使用属性检查器可以检查和编辑当前选定网页元素（如文本和插入的对象）的最常用属性。属性检查器的内容会根据选定元素的变化而变化。例如，如果选择页面中的图像，则属性检查器将显示图像属性（如图像的文件路径、图像的宽度和高度、图像周围的边框等）；如果选择文本，则属性检查器又会显示文本的相关属性。6．“插入”面板“插入”面板包含用于创建和插入对象（例如表格、图

像和链接）的按钮，这些按钮按几个类别进行组织，默

认显示“常用”类别，您可以单击其右侧的下三角按钮，从弹出的列表中选择其他类别。7．“文件”和“CSS样式”面板“文件”面板用于管理站点中的所有文件和文件夹，包括素材文件和网页文件。使用“CSS样式”面板可以非常方便地新建、删除、编辑和应用样式，以及附加外部样式表等。8．工作环境参数设置利用“首选参数”对话框可以修改Dreamweaver的系统参数。选择菜单栏中的“编辑”>“首选参数”菜单或按快捷键【Ctrl+U】可打开该对话框。三、新建和保存网页文档在Dreamweaver

CS5中可以创建两种形式的网页文档，一种是直接创建空白网页文档，另一种是通过

Dreamweaver

CS5内置模板创建具有一定内容和样式

的网页文档。四、打开、预览和关闭网页文档若要对已有的网页文档进行编辑，就需要在

Dreamweaver中打开该文档。另外，在Dreamweaver中打开文档并执行相应操作后，如果想查看它在浏览器中的效果，可执行预览操作。任务三制作简单的HTML+CSS页面学习本任务的主要目的，是让初学者在开始学习网页制作之前先了解一下网页的主要构成。符合Web标准的网页一般由3部分组成：结构、表现和行为（行为层不在该书的讲授范围），其中结构层由HTML代码构成，表现层由CSS层叠样式表构成，行为层由Javascript脚本语言构成。支撑知识点一、HTML与CSS简介HTML是HyperText

Markup

Language（超文本标记语言）的英文缩写，是用于设计网页的主要语言。CSS（CascadingStyleSheets）中文名为“层叠样式表”用于设置网页中各标签的样式。二、HTML基础语法HTML不是一种编程语言，而是一种标记语言，它使用标记标签（简称标签）来描述网页。也就是说，HTML文档中实质上只包含HTML标签和纯文本（如我们在

Dreamweaver的代码视图中看到的内容）。浏览器的一个作用就是读取HTML文档，并解释其中的一个个标签，然后以我们熟悉的“网页”形式来显示。1．HTML标签概述HTML标签是由尖括号括起来的关键词，绝大多数

HTML标签都是成对出现的，包含标记头<>和标记尾</>。标记头是开始标签，标记尾是结束标签，中间是元素内容，如段落标签<p></p>；但也存在少量的单标签，如换行标签<br/>。HTML文档源码中一行可以写多个不同的标签，也可将

一对标签写在不同的行中，但每对标签必须嵌套使用，不能交叉使用。2．HTML标签格式在HTML中，每个标签都有名称、可选择的属性及标签

内容，标签的属性都在起始标签内标明。下面列出了双标签和单标签的书写格式。格式1：<标签名>标签内容（文本或超文本）<／标签名>例如，定义一个标题的标签及格式：<h1>这是一号标题</h1>格式2：<标签名属性名1＝"属性值1"属性名2＝"属性值2">标签内容（文本或超文本）</标签名>三、网页的基本结构HTML文档默认被分成两部分：文档头<head>和文档体<body>，它们都包含在<html></html>标签对中。1．整个文档<html></html>网页中的所有代码内容都包含在<html></html>标签对中。起始标签<html>用于HTML文档的最前边，用来标识HTML文档的开始；而结束标签</html>恰恰相反，

它放在HTML文档的最后面，用来标识HTML文档的结束，两个标签必须成对使用。2．文档头<head></head><head>标签是HTML文档所有头部元素的容器，它里面的元素用来描述HTML文档的相关信息，如指定网页标题、指示浏览器在何处找到CSS样式表等，不会在浏览器中显示。<title></title><meta/><style></style><link>

</link><script></script>3．文档体<body></body><body>标签是HTML文档的主体部分，在此标签对之间可包含<p></p>、<h1></h1>、<div></div>、<a/>和<br/>等众多标签，它们定义的文本、图像等都会在浏览器中显示出来。4．文档类型<!DOCTYPE>DOCTYPE是英文“document

type（文档类型）”的简写，是HTML与XHTML中的文档声明，简称为DTD声明，其作用是告知浏览器当前文档所使用的是哪种HTML或XHTML规范。DOCTYPE声明位于文档最前端，标签为<!DOCTYPE>，它不属于文档的结构部分。四、静态页面与动态页面从大的方面来讲，网页可分为动态网页（DHTML）和静态网页（HTML）。那么动态网页与静态网页有什么区别，它们各自又具有什么样的特征呢？静态网页完全采用HTML语言编写，后缀名一般为.

htm、.html、.shtml和.xml等。动态网页使用的语言为HTML＋ASP、HTML＋PHP或HTML＋JSP等，后缀名一般为.asp、.php、.jsp等。无论是动态网页还是静态网页，都可以显示文字、图

片和动画等信息，但动态网页可以实现与服务器的交互，如各种论坛、留言板和聊天室等都属于动态网页。五、网页的Web标准1．认识Web标准Web标准不是某一个标准，而是一系列标准的集合。网页主要由3部分组成：结构（Structure）、表现（Presentation）和行为（Behavior），对应的标准也分3方面：结构化标准语言主要包括HTML和XHTML。表现标准语言主要包括CSS。行为标准主要包括对象模型（如W3C

DOM）、ECMAscript等。2．Div+CSS布局优势Web标准化设计是指采用Div（这是HTML中的一个标签）+CSS布局网页，放弃原来的table（表格）布局。该方式的优势有如下几个方面。完美地实现结构层同表现层分离。页面下载速度快。页面修改更简单方便。

搜索引擎搜索更加优化。3．HTML与XHTML的区别HTML与XHTML可以被认为是一种语言的两种不同版本，

HTML经历不断改进后得到了XHTML，可以将XHT

人人文库> 全部分类> 图纸下载 > 毕业设计

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论