第4章 静态页面制作.中职课件电子教案_第1页
第4章 静态页面制作.中职课件电子教案_第2页
第4章 静态页面制作.中职课件电子教案_第3页
第4章 静态页面制作.中职课件电子教案_第4页
第4章 静态页面制作.中职课件电子教案_第5页
已阅读5页，还剩15页未读， 继续免费阅读

下载本文档

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

文档简介

第四章静态页面制作学习目标

熟悉Dreamweaver站点的设置方法掌握Dreamweaver的使用掌握使用表格工具布局网页的方法掌握常见网页元素中基本样式的设定掌握子页面链接的创建掌握常见的HTML标记语言的使用项目概述

小张所在的网络公司承接长沙市碧雅园花卉苗木基地网站建设项目后，通过前期需求分析，网页美工小王已经绘制出网站首页效果图。经理要求网页设计师小张依据效果图，为该苗木基地制作网站静态首页，以便于网站代码编写人员编写脚本代码，从而制作出一个完整的动态网站。最终网站首页效果图将本项目的实施分解为以下几个子任务：任务1：本地站点配置任务2：使用表格布局制作网页任务1：本地站点配置

1、Dreamweaver安装Dreamweaver是Macromedia公司早期推出的“网页三剑客”之一。“网页三剑客”指Dreamweaver、Flash、Fireworks这三个软件，它们集合起来，就像江湖中最厉害的剑客一样，成为了网站开发中的专用利器。它是集网页制作、网站管理功能于一体、提供所见即所得界面的网页编辑器，也是第一套为专业网页设计师特别开发的可视化网页开发工具。2010年前后，Macromedia公司被Adobe公司收购，DreamweaverCS5是目前最新的版本。启动DreamweaverCS5，新建一个HTML网页，工作界面如下图所示。左边窗口中的代码是HTML，即超文本标记语言，是一种用来制作超文本文档的简单标记语言，也是制作网页最基础的语言，它可以直接由浏览器执行。任务1：本地站点配置

空白页面的代码如下：<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"><HTML><!--HTML文件开始><HEAD><!--HTML文件头开始><!--头部信息><BODY><!--HTML文件体开始>文档主体,正文部分</BODY><!--HTML文件体结束></HTML>

任务1：本地站点配置

网站的首页文档一般命名为index.html或者index.htm，也可以是default.html或default.htm。在不特别指定的情况下，打开一个网站时，看到的第一个页面就是该文档对应的页面。网页文件的命名规则：所有的文件名一律使用英文小写，这样就不会因为服务器系统不同而混淆。不可以使用中文。任务1：本地站点配置

2、Dreamweaver站点的设置本地站点创建完成后，在【文件】面板的【本地文件】窗格中，会显示该站点的根目录，如下图所示。新建站点可以有效解决绝对路径与相对路径的问题。任务1：本地站点配置

HTML指超文本标记语言。超文本是指一种全局性的信息结构，它将文档中的不同部分通过关键字建立链接，使信息得以用交互方式搜索。它是超级文本的简称。

Web服务器(WebServer)

Web服务器可以解析(handles)HTTP协议。当Web服务器接收到一个HTTP请求(request)，会返回一个HTTP响应(response)，例如送回一个HTML页面。在Internet上，每台计算机都有一个唯一的IP地址，计算机之间也只能通过IP地址来通讯，IP地址通常是由4个字节来表示，例如：94，用户不可能记住这么长的IP地址。为了方便人们的记忆，Internet采用域名来标识计算机，通过DNS（域名系统）将域名翻译成IP地址，每一级的域名都有对应的DNS域名服务器。

文件路径就是文件在电脑中的位置，表示文件路径的方式有两种，相对路径和绝对路径。在网页设计中通过路径可以表示链接，插入图像、Flash、CSS文件的位置。绝对路径：即物理路径，就是硬盘上文件的路径，比如下面的文件：d:\dreamdu\exe\1.html相对路径：是从当前路径开始的路径，假如当前路径为d:\dreamdu\exe要描述上述路径，只需输入1.html3、网站文件夹管理按栏目内容分别建立子文件夹。资源按类存放在不同的文件夹中。文件夹的层次不要太深,以免系统维护时查找麻烦。避免用中文命名文件或文件夹。避免使用过长的文件名。命名应尽量有明确的意义。任务1：本地站点配置

任务2：使用表格布局配置网页

1、网页表格的规划通过分析，网页可以分成几个大的区域，如下图所示：整个网页分成五个大表格

任务2：使用表格布局配置网页

绝大部分标记都有开始标记和结束标记；左、右尖括号为标记之间的分界符；属性值放置在始标记中，如<标记名属性=“属性值”>，结束标记为“</标记名>”，有些结束标记可以省略。标记不区分大小写。html标记具有以下特点：任务2：使用表格布局配置网页

有些网页设计人员习惯将整个页面作为一个大表格，这种做法将影响网页的浏览速度。当浏览器发现页面中有一个TABLE标记，在接收到对应的结束标记</TABLE>之前，它不会显示这个表格。因此，如果整个页面都放入到一个大表格中，在浏览器下载这个大表格的</TABLE>标记之前，整个页面都不会显示。当显示内容庞大的页面时（例如，搜索结果或者电子商务网站上的产品目录），表格的延迟显示，会导致整个页面显示的停顿。为了避免出现这种情况，应该把页面划分成多个较小且独立的表格区域。这样，每个表格的HTML代码下载之后浏览器就可以立即显示它。对于浏览者来说，页面在屏幕上一部分、一部分地逐渐显示出来。更为重要的是，这种页面在屏幕上开始显示的速度，要比之前等待整个页面下载完才显示的方式要快得多。任务2：使用表格布局配置网页

2、网页元素的填充

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

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

最新文档

评论

0/150

提交评论