网页和网站的创建PPT课件.ppt

第第2章章 网页和网站的创建网页和网站的创建2.1 网页的基本要素2.2 网页制作的基本步骤2.3 Dreamweaver工作环境2.4 本地站点的建立与管理2.5 基本页面制作与超链接 1、文字 (标题)2、图形 (背景图片)3、流媒体（声音、视频、动画）4、链接标志 链接是网页中最重要、最根本的元素之一。通过链接可以从一个网页转到另一个网页，也可以从一个网站转到另一个网站。链接的标志有文字和图形两种5、交互功能2.1 2.1 网页的基本要网页的基本要素素2.2 2.2 网页制作的基本步骤网页制作的基本步骤 一、网站的整体规划进行网站的整体规划也就是组织网站的内容和设计其结构。网页制作者在明确网页制作的目的及要包括的内容之后，接下来就应该对网站进行规划，以确保网站内容条理清楚、结构合理、增强网站可维护性与可扩展性。二、网页设计与制作 三、测试网页四、网页上传发布 把设计好的网页它发布到互连网上。发布的服务器可以是远程的，也可以是本地.一、网站的整体规划 层状结构 层状结构类似于目录系统的树型结构，由网站文件的主页开始，依次划分为一级标题、二级标题等等，逐级细化，直至提供给浏览者具体信息。一级标题二级标题层状结构页面1页面2页面3页面4页面5页面6页面7主 页一、网站的整体规划 线性结构 线性结构类似于数据结构中的线性表，用于组织本身的线性顺序形式存在的信息，可以引导浏览者按部就班地浏览整个网站文件。通常情况下，网站文件的结构是层状结构和线性结构相结合的。主 页页面1页面2页面3线性结构一、网站的整体规划 Web结构 Web结构类似于Internet的组成结构，各网页之间形成网状连接，允许用户随意浏览。一级标题二级标题Web结构主 页页面1页面2页面3页面4页面5页面7页面8页面6二、网页设计与制作 1静态网页的设计与制作（1）不要先决定网页的外观，应根据网站访问者对象、要提供的信息以及制作目标得出一个最适合的网 页架构。（2）考虑低分辨率（800600）下的可运行性。（3）网页的外观风格要统一（4）底色或墙纸必须与文字对比强烈，以易于阅读。2动态网页的设计与制作 （1）网站交互功能的实现（2）常用语言：JavaScript,VbScript,ASP,JSP,PHP,ASP.net（3）常用数据库：Access,MS-SQL,MySQL（4）常用三层架构模式 二、网页设计与制作 三、测试网页 当网页设计人员制作完所有网站页面之后，需要对所设计的网页进行审查和测试，测试内容包括功能性测试和完整性测试两个方面。功能性测试：就是要保证网页的可用性，达到最初的内 容组织设计目标，实现所规定的功能，读 者可方便快速地寻找到所需的内容。完整性测试 就是保证页面内容显示正确，链接准确，无差错无遗漏。2.3 Dreamweaver 2.3 Dreamweaver 工作环境工作环境一、菜单“文件”：包含页面文件的“新建”、“打开”、“保存”、“关闭”，“在浏览器中预览”，“打印代码”，文件的“导入”和“导出”，将文件格式转换为其它格式的“转换”等命令。“编辑”：包含编辑操作如“复制”、“粘贴”等，查找和替换，选择命令如“选择父标签”。“编辑”菜单还提供对DW参数设置和快捷键设置。“查看”：可以切换文档的各种视图（例如“设计”视图和“代码”视图），对查看对象的缩放，面板及工具栏的显示和隐藏，网格线和标尺的显示。“插入”：用来插入网页元素，包括图像、多媒体、层、框架、表格、表单、超链接、日期、特殊字符及标签等。“修改”：可以更改选定页面元素的属性。“文本”：用来对文本进行格式化，包括设置字体、字号、文本颜色、HTML/CSS样式、段落的格式和拼写检查等。“命令”：提供所有的附加命令；包括创建相册的命令，格式化、排序表格的命令，应用记录命令等。“站点”：用于创建与管理站点，以及上传和下载文件等。“窗口”：用于打开与切换所有的面板和窗口。二、常用工具栏二、常用工具栏“插入”栏文档工具栏 三、状态栏 四、浮动面板l【CSS】浮动面板组包含【CSS样式】和【层】两个面板，主要功能是网页设计和网页格式化工具。l【应用程序】浮动面板组包含【数据库】,【绑定】,【服务器行为】,【组件】4个面板，主要提供动态网页设计和数据库管理的工具。l【标签检查器】浮动面板组包含【属性】和【行为】两个面板，主要功能是查看和修改网页元素的属性，将JavaScript（客户端）行为附加到页面元素上。l【文件】浮动面板组包含【站点】,【资源】,【代码片段3个面板，主要功能是查看和管理站点中的各种文件资源。五、属性面板图像属性面板表格属性面板2.4、本地站点的建立与管理 “DreamweaverDreamweaver站点站点”和和“Internet web Internet web 站点站点”不不完全相同。完全相同。“DreamweaverDreamweaver站点站点”是在是在DreamweaverDreamweaver制作网页的过程中创建的一个本地站制作网页的过程中创建的一个本地站点。点。“Internet Web Internet Web 站点站点”则是运行系统的则是运行系统的WebWeb服务器上的站点。网站的发布过程就是将服务器上的站点。网站的发布过程就是将DreamweaverDreamweaver站点上传到服务器变成站点上传到服务器变成Internet Web Internet Web 站点的过程。站点的过程。服务器软件：服务器软件：IIS IIS（Internet Information ServicesInternet Information Services）Apache Apache Tomcat Tomcat 1.1.本地站点的建立本地站点的建立菜单菜单【站点站点】|【新建站点新建站点】命令命令菜单菜单【站点站点】|【新建站点新建站点】命令命令THANK YOUSUCCESS2024/2/24 周六24可编辑2.2.本地站点的管理本地站点的管理菜单菜单【窗口窗口】|【文件文件】命令命令1、【实例】制作一个简单的网页内容有四：图片插入和对齐设置；文字的格式、颜色和加粗等设置；网页背景颜色的设置；超链接的设置。2.5 2.5 基本页面制作基本页面制作 在开始制作之前，我们先对这个页面进行一下分析。看看这个页面用到了那些东西。网页顶端的标题“我的主页”是一段文字。网页中间是一幅图片。最下端的欢迎词是一段文字。网页背景是一深紫红颜色。知道了这个网页的结构以后我们就来可以制作了。首先启动Dreamweaver，确保你已经用站点管理器建确保你已经用站点管理器建立好了一个网站（根目录）立好了一个网站（根目录）。为了制作方便，事先把要使用的图片收集到网站目录images文件夹内。注意文件名要用英文或用拼音文字命名注意文件名要用英文或用拼音文字命名而且使用小写，不能用中文，而且使用小写，不能用中文，否则要出现一些麻烦。【插入标题文字】进入页面编辑设计视图状态。在一般情况下，编辑器默认左对齐，光标在左上角闪烁，光标位置就是插入点的位置。如果要想让文字居中插入，点属性面板居中按钮即可。启动中文输入法输入“我的主页”四个字。字小不要紧，我们可以对它进行设置。【设置文字的格式】选中文字，在属性面板中将字体格式设置成默认字体，大小可任意更改字号。并选中“B”将字体变粗。【设置文字的颜色】首先选中文字，在属性面板中，单击颜色选择图标，在弹出的颜色选择器中用滴管选取颜色即可。【设置网页的标题和背景颜色】点击“修改”菜单选“页面属性”。系统弹出页面属性对话框请在标题输入框填入标题“我的主页”。设置背景颜色：网页背景可以是图片，也可以是颜色。此例是颜色。如上图打开背景颜色选择器进行选取。如果背景要设为图片，点击背景图象“浏览”按钮，系统弹出图片选择对话框，选中背景图片文件，点击确定按钮。【插入图像】选择以下任意一种方法：（1）使用插入菜单：在“插入”菜单选“图像”，弹出“选择图像源文件”对话框，选中该图像文件，单击确定。（2）使用插入栏（如下图）：单击插入栏对象按钮选按钮，展开根目录的图片文件夹，选定该文件，用鼠标拖动至工作区合适位置。（3）使用面板组“文件”“资源”面板：点 按钮，弹出“选择图像源文件”对话框，其余操作同上。【输入欢迎文字】在图片右边空白处单击，回车换行。仍然按照上述方法，输入文字“欢迎您”然后，利用属性面板对文字进行设置。保存页面。【预览网页】在页面编辑器中按F12预览网页效果。网站中的第一页，也就是首页，我们通常在存盘时取名为index.htm。2、网页文档的格式化文档格式化格式化的几种方式：1 1）HTMLHTML标标记记格格式式化化：文文字字属属性性面面板板中中的的“格格式式”选选项项，提提供供的的HTMLHTML标标记记有有：“段段落落”、“标标题题1 1”、“标标题题2 2”、“标标题题3 3”；其其它它包包括括：粗体、斜体、文本对齐、列表、文本缩进等。粗体、斜体、文本对齐、列表、文本缩进等。2 2）CSSCSS样样式式格格式式化化：CSSCSS样样式式提提供供更更多多的的格格式式属属性性，能能够够进进行行精精确确格格式式化化，可可同同时时对对多多个个文文档档做做格格式式化处理。化处理。如如设置文本的字体、字号、颜色等属性。设置文本的字体、字号、颜色等属性。3、超级链接超链接的分类：超链接的分类：按按源端点源端点：超文本链接、非超文本链接（图像链接、超文本链接、非超文本链接（图像链接、多媒体链接等）多媒体链接等）按按目标端点目标端点：（网站）（网站）外部链接外部链接、（网站）、（网站）内部链内部链接、锚点链接、接、锚点链接、电子邮件链接等。电子邮件链接等。按按URLURL协议协议：httphttp指向指向WWWWWW服务器服务器ftpftp用于文件传递，包括文件的上传和下载用于文件传递，包括文件的上传和下载filefile访问本地计算机中的文件访问本地计算机中的文件1）页面链接用HTML创建超链接需要使用A标记符（结束标记符不能省略），它的最基本属性是href，用于指定超链接的目标。通过为href指定不同的值，可以创建出不同类型的超链接。另外，在和之间可以用任何可单击的对象作为超链接的源，例如文字、图像和多媒体。例如：PageMain2）锚点链接锚点链接：指向网页的某个指定位置的超链接。如果要设置锚点超链接，首先应为页面中需要跳转到的位置（锚点）命名。命名时应使用A标记符的name属性。例如，可以在页面开始处用以下HTML语句进行标记：目录 对页面进行标记之后，就可以用A标记符设置指向这些标记位置的超链接。返回目录 这样设置之后，当用户在浏览器中单击文字“返回目录”时，将显示“目录”文字所在的页面部分。2）锚点链接在在DreamweaverDreamweaver中中，可可通通过过菜菜单单【插插入入】|【命命名名锚锚记记】命令为锚点命名。命令为锚点命名。如果源端点和目标端点不在同一网页中，可在源端点对象的属性面板的“链接”文本框中输入“文件名.htm#锚点名字”。对应HTML标记为：3）电子邮件链接 如果将href属性的取值指定为“mailto:电子邮件地址”，那么就可以获得电子邮件链接的效果。例如：作者邮箱 当浏览网页的用户单击了指向电子邮件的超链接后，系统将自动启动邮件客户程序，并将指定的邮件地址填写到“收件人”栏中，用户可以编辑并发送该邮件。4）映射图链接（热点链接）映射图链接是在一个图像中划分出几个不同的几何图形区域，然后分别为这个图像不同的几何图形区域建立超链接，图像中建立超链接的几何图形区域称为热区。映射图链接可以通过图像属性面板中“地图”文本框区域的操作完成。例：创建导航条 通常在网页的首页上可以设置一个导航条，引导浏览者浏览整个网站的不同页面。导航条设一组链接按钮，按钮有多种形式，下边介绍由鼠标经过图像变换按钮的组成的导航条制作：（导航条）“鼠标经过图像”当访问者用鼠标指针指向该图像时，该图像发生变化。“鼠标经过图像”由两个图片组成：页面最初载入时显示的原始图像，访问者将鼠标指针移到原始图像上时显示另一幅图像。提示：事先要制作好按钮图像，确保每个按钮的图像都具有相同的宽度和高度（以像素为单位）。打开主页(index.htm)在“文档”窗口中，将插入点放置在要显示导航条的位置。一般在导航条上边要放置一个横幅图像（logo），导航条就安排在logo下边的位置。选择菜单【插入】|【图像对象】|【导航条】命令，弹出对话框如下：在“插入导航条”对话框中，单击顶部加号“”按钮，按照上图所示对应的文本框，填入相应的文件。即完成了一个按钮的添加。然后，单击页面顶部的加号“+”按钮，添加另一个按钮。重复以上步骤，直至您所需的按钮添加完毕。勾选“预先载入图像”，在对话框底部的“插入”菜单中，选中“水平”。勾选“使用表格”。单击“确定”关闭该对话框，成功创建了导航条。保存页面。按F12，预览一下你的导航条。课程小结：课程小结：2.1 网页的基本要素 2.2 网页制作的基本步骤 2.3 Dreamweaver工作环境 2.4 本地站点的建立与管理 2.5 基本页面的制作与超链接 思考题：思考题：1.什么是本地站点，为什么要建立本地站点？2.什么是超链接，超链接有哪些分类？3.锚点链接与热点链接有何不同？4.什么是超链接中的绝对路径、相对路径？THANK YOUSUCCESS2024/2/24 周六47可编辑