01-网站设计与开发之静态网页.ppt

1、网站设计与开发,谭金波 山东师范大学传播学院 Email：,主要内容,静态网页制作（Dreamweaver） HTML语言 动态网页制作（ASP）,网页相关概念,网页就是包含了文字、图片、动画、声音等内容的可以在网上传输的界面。它可以用来共享信息、宣传自己、服务用户等。,用URL发出请求,送出网页,客户机,服务器,动态网页与静态网页,静态网页 所谓静态指的就是网站内容固定不变。静态网页不包含在服务器端执行的程序代码。 静态网页内容通常以HTML语言编写，在服务器端以.htm或.html文件格式存储，可以包含文本、图像、声音、Flash动画、客户端脚本、ActiveX控件及Java小程序等。添加

2、了诸多元素的静态网页，可以达到视觉上的“动态”，但它无法实现用户和网站服务器之间的交互。 静态网页不随带任何在服务器端运行的脚本，服务器不需执行任何程序就把存储在服务器上的HTML文件传给客户端的浏览器中直接进行解读工作，所以不会再发生任何变化。缺点是不易维护。,动态网页与静态网页,动态网页 指网页内含有被服务器执行的程序代码。动态网页可以是纯文本内容的，也可以是包含各种动画的内容。 用户浏览动态网页须由服务器先执行网页中的程序，再将执行完的结果传送到用户浏览器中。 区别：动态网页会在服务器中执行一些程序，由于执行程序时的条件不同，所以执行的结果也可能会有所不同，最终用户所看到的网页内容也将不

3、同。,动态网页,通过一定的计算机语言编程，使计算机按照我们所希望的网页格式，产生出包含用户所需内容的网页，传送给用户浏览。 动态网页技术：CGI、ASP、PHP、JSP,动态网站与静态网站,动态网页的特点 交互性。能够根据用户的要求和选择做出动态改变。 能够自动更新。即不需要手动更新HTML文档，便会自动生成新的页面。 因时因人而变。当不同时间、不同的人访问同一网址时会产生不同的页面。 动态网站与静态网站,参考书目,Dreamweaver8完美网页设计技术入门篇 Dreamweaver8完美网页设计CSS网页设计篇 Dreamweaver8完美网页设计网页特效篇 DreamweaverCS3中

4、文版网页设计与制作实用教程,网站设计流程,网站整体规划 用户需求分析:内容，功能，设计，技术 网站整体规划:栏目，功能，页面结构设计 搜集和准备素材 网站制作 页面布局, 插入内容 改变超链接样式, 预览效果 网站测试与发布 网站测试, 注册域名 申请虚拟主机, 利用FTP上传网页,通过技术手段将一台服务器虚拟成许多份， 在一台服务器上同时安装多个网站。,FTP：文件传输协议 客户端软件：CuteFTP,FlashFTP,Dreamweaver,页面结构设计,网站的页面结构分为三级：首页、列表页、内容页。,1、用文件夹来合理构建站点结构 Html文档中不仅仅是文字，还包含其他任何类型的对象，例

5、如图像、声音、动画等，这些文档资源不能直接存储在Html文档中。为清晰起见，不要把所有文件都存放在根目录下，文件多时可以创建多级子目录。 如首先为站点创建一个根文件夹（根目录），然后按栏目内容建立多个子文件夹，每个子文件夹下再将Html文件和图形文件及其它文件分门别类地存储到相应的文件夹下。但目录的层次也不能太深，以便于维护管理。,网站的设计技巧,2、使用合理、意义明确的文件名和目录名 使用合理的文件名非常重要，特别是在网站的规模变得很大时。文件名应该简洁易懂，让人看了就能够知道网页表述的内容。 可以使用长文件名来命名文件，以充分表现文件的含义和内容。（但是太长的目录名不便于记忆 ） 尽管中文

6、文件名清晰易懂，但是应该避免使用中文文件（文件夹）名，因为很多Internet服务器使用的是英文操作系统，不能对中文文件名提供很好的支持；而且浏览网站的用户也可能使用英文操作系统，中文的文件名称可能导致浏览错误或访问失败。如果对英文不熟悉，可以用汉语拼音作为文件名。 很多internet服务器采用UNIX操作系统，它是区分文件大小写的。例如Index.html和internet.html是完全不同的两个文件，而且可以同时出现在一个文件夹中。因此，建议在构建的站点中，全部使用小写的文件名称。,网站的设计技巧,3、在制作的每一个网页上都加上一个“返回主页”的超级链接，而且应当避免强迫用户使用工具栏

7、中的向前和向后按钮。绝大多数站点在每一页同样的位置上都有相同的导航条（网站的目录结构），使浏览者能够从每一页上访问网站的任何部分。 4、在制作Web网页时，一个Web网页最好不要过长。如果某一个Web网页内容很多，最好把它们分成多个，这样做的好处是不致于使Web网页由于网络速度的问题，而影响用户的浏览。,网站的设计技巧,5、适当地使用动画可以增加网页的动感和趣味，但不能太多，以免网页太花哨。 6、需要使用特殊字体时，最好用图片来代替。 7、如果网页中有比较大的图像，要想办法进行处理，如尽量缩小或省略图形，或改变图象格式，以加快网页显示的速度。否则即使制做的Web网页很好看，用户也没有耐心等待整

8、个图片下载完毕。 8、在网站中还应有联系方式。如电话、通讯地址或E-mail地址以及联系人等等，这样可建立与浏览者联系和交流的桥梁。,网站的设计技巧,制作网页时要注意的问题,网页的标题要简洁，明确。 对重点内容要强调显示。 网页中插入的图片要尽量的小。 图形要附加文字说明，以便关闭图像时查看。 网页中引用的资料及商标（或图标），不能侵犯版权。,网站建设的评判标准,常用的网页制作工具,网页编辑工具：记事本、Dreamweaver、FrontPage、Visual Interdev。 图形图像制作工具：Photoshop、Fireworks、Freehand、CorelDraw。 网页动画工具：F

9、lash、Swish、Ulead Gif Animator。 网页开发语言：ASP（ASP.NET）、JSP、PHP、XML、Perl、CGI、JavaScript、VBScript等。 网页上传工具：CuteFtp、LeapFtp、FlashFTP,网页 三剑客,Dreamweaver制作网页,熟悉Dreamweaver8环境 创建站点 创建网页文档 使用表格排版内容 多媒体网页的制作 超链接的创建 框架网页制作 模板网页制作 层和时间轴的应用,工具栏,状态栏,功能菜单,功能面板,代码、设计、拆分视图,HTML语言,HTML: Hypertext Markup Language，超文本标记语

10、言，直接用浏览器解释执行 Html基本结构, 第一个HTML网页 Hello, world! 这里是内容区域！ ,标题，在浏览器的标题条内显示,HTML标记都在body中使用,创建站点,创建本地文件夹 定义本地站点,文件和文件夹的命名 不能使用中文 最好使用小写字母 不能使用特殊字符，如、！、#、%、&、*等 不推荐使用拼音命名 合理使用下滑线 网站首页命名：index.htm,文件目录命名规范,创建网页文档,新建页面 设置页面属性 保存页面 预览页面 打开文档,设置页面属性,菜单“修改”|“页面属性”或右键“页面属性” 更改页面标题 设置背景图像或颜色 注：背景图像会覆盖背景颜色 设置文本或

11、链接的颜色 设置页面边距,使用表格排版内容,数据存放 用来显示数据内容 页面内容排版 实现网页的精确排版和定位,使用表格,插入表格 选取表格 属性设置 格式化表格 编辑表格,插入表格,选择插入栏的表格按钮，或者选择菜单中的“插入”“表格”命令，均可打开建立表格的对话框。,选择表格,选择对象是设置对象属性的前提 选择整个表格：先将插入点置于表格中，1.菜单“修改”|“表格”|“选择表格”，2.单击标签栏中标签，3.单击表格边缘 选择行或列：把光标置于目标行的左边缘或目标列的上边缘，单击黑箭头 选择单元格：先将光标置于单元格中，单击标签栏中标签或菜单“编辑”|“全选” 选择多个单元格：按住Shif

12、t键，选择多个相连的单元格；按住Ctrl键，选择多个不相连单元格,属性设置,单元格属性,表格属性,编辑表格,编辑表格命令,表格的其他操作,为表格插入内容,表格的其他操作,嵌套表格,练习：插入表格,表格行数4，列数1 表格宽度800 第一行单元格插入图片 第二行单元格插入嵌套表格 1行，10列，边框0，单元格间距0，单元格填充0 嵌套表格添加导航文本 第三行单元格插入文本,页面中的文本,插入及编辑文本：采用直接输入或粘贴 插入特殊字符： “插入”面板/ “HTML”/“特殊字符”分类 换行：【Shift+回车】（代码为“”）， 段落：【回车】（代码为“ 字符串”）。 空格： 【Ctrl+Shif

13、t+Space】（对应代码为“ ”) 在确保输入法处于“全角”模式时输入空格 水平线：用于分开页面中的不同内容,设置文本属性,设置文本属性前先选择文本 文字格式/样式 文字字体与大小 文字颜色 其他属性设置：粗斜体，对齐方式 项目列表编号列表,练习：文本编辑,文本标题：黑色，粗体，大小12pt 正文文本：黑色，大小9pt 正文首行缩进4字符 正文段内换行：一、二内部 正文段落换行：两大段之间 行间距为2（CSS样式表）,多媒体网页的制作,插入图像 插入Flash动画 插入音频 插入视频,插入图像,浏览器支持的图片格式：JPEG、 GIF、PNG。 必须先将插入的图像文件拷贝到本地站点文

14、件夹内，或者在插入图像的过程中系统提示将图像文件拷贝到本地站点文件夹内，否则浏览器无法显示。 本地文件夹内的图像文件名避免使用中文，否则浏览器无法显示。,练习：图片编辑,插入背景图片 插入页面图片 设置图片属性 改变图像大小：宽200，长200 设置图像与文字对齐方式：左对齐 图像边距：垂直边距20，水平边距20,插入Flash影片,先把Flash影片拷贝到站点目录下，然后插入 设置Flash影片属性 宽、高和重设大小 文件、源文件、编辑 循环、自动播放（否则IE中右键play） 品质速度与外观的取舍；比例是否考虑纵横比 背景颜色：设置开始和结束时的背景 Flash文本对象/按钮操作 参数：W

15、mode = transparent,添加背景音乐,插入媒体插件 切换到代码窗口，在代码和之间添加标记。 ,插入视频文件,视频文件采用流媒体技术 流媒体技术是把连续的影像和声音信息经过压缩处理后放在网站服务器，让用户一边下载一边观看、收听。 流媒体产品： Real Media :Real Player ，格式.rm, .rmvb Windows Media : Windows Media Player，格式ASF,AVI,MP3,WMV QuickTime :苹果公司 Shockwave :Macromedia，Director, Authorware, Flash 视频的添加操作： “媒体”

16、|“插件”|属性设置 “媒体”|”ActiveX”|属性设置,超链接的创建,网页的内容是非线性的，通过超链接可以实现各个页面之间的自由跳转。 超链接的对象：文字，图片。 链接的地址有三种： 本地文件：相对路径，如intro.htm 网站URL：绝对路径，如 E-Mail地址: 格式mailto:,文本链接,最常见的链接形式，作为链接对象的文本必须是所链接文档的标题或者标识性文本 选择文本，指定链接文件，选择打开窗口 _blank：在新的浏览器窗口中打开链接 _parent：在父级框架或者包含该链接的框架窗口中打开链接 _self：默认，在当前窗口中或与链接相同的框架中打开 _top：在整个浏览

17、器窗口中打开，并移除所有框,图像链接和图像映射,图像链接比文本链接更加形象，导航更明确。 图像映射：使用热区制作工具在图像上设置多个热区，每个热区都能链接到不同的页面，实现热区与页面的一一对应。,邮件链接,用于用户与站点管理员进行交流，反馈问题。 创建文本邮件链接：用“插入”面板上的“电子邮件链接”按钮，或者在“属性”面板中的“链接”域中输入“mailto:电子邮件地址。,锚点链接,利用锚点链接可以跳转到页面中的指定位置或其他页面的指定位置 在指定位置插入锚点“插入”面板“命名锚记”按钮；命名锚记 链接锚点 页内跳转：拖动或者在“链接”域中输入“#锚点名称” 页间跳转：拖动或者在“链接”域中输入“URL#锚点名称”,修改链接样式,默认的链接样式：蓝色文本加下划线，点击后变为紫色文本。 选择菜单命令【修改】/【页面属性】或在【属性】面板单击【页面属性】按钮，打开【页面属性】对话框，选择【链接】分类选项。,框架网页制作,创建框架集 保存框架集 编辑框架网页 设置导航链接,创建框架集,框架工具栏,修改框架的大小,拖动框架分界线来调整大小,编辑框架,编辑框架,拆分框架,保存框架,要保存框架集文件，在框架面板或文档窗口中选择框架集。 （1）要