静态网页设计模板女排-10级-纯静态网页设计纸

目录 第一章 前言 11.1 课题来源 11.2 网站开发项目需求分析 1 第二章 网页制作概述 22.1 网页类型 22.1.1 静态页面 22.1.2 动态页面 22.2 网页开发技术 32.3 网页布局 32.3.1网页布局的基本概念 42.3.2 网页布局方法 52.3.2 网页布局技术 72.4 网页配色 82.5 网页设计流程 8 第三章涉及软件 93.1 DreamWeaVer cs3 简介 93.2 DreamWeaVer cs3 操作界面 9 第四章 建立网页页面链接 104.1 文本链接 104.2 图片链接 114.3 用 HTML 语言建立网页链接 12 第 5 章 结论 14 致谢 15 参考文献 16 第 1 章引言 1.1 主题来源 随着 21 世纪新兴技术的飞速发展，当今的信息产业正在经历一场变革。巨大挑战的同时，也面临重大机遇。 就当前科技发展水平而言，信息产业的发展已经不能满足社会化大生产的要求。 因此，各国集中人力、财力加大对信息技术产业的投入，以满足当前的需求。 幸运的是，在过去几十年的发展中，我们有了互联网。 互联网拓宽了我们对世界的认识，缩短了人与人之间的距离，让我们更容易走上信息化的道路。

互联网缩短了各个领域之间的距离。 如今，利用互联网进行宣传已经成为不可或缺的工具。 城市发展也需要网络宣传来带动自身发展。 1.2 网站开发项目需求分析 网站项目的建立是基于多方面的需求。 这种需求在互联网应用中的网站建设中往往起着特别重要的作用。 已经成为政府、企事业单位的信息化。 建设的一个重要部分来自于客户的实际需求或者自身发展的需要。 如今，随着互联网的快速发展，互联网已成为人们快速获取、发布和传输信息的重要渠道，正以前所未有的影响影响着人类活动。 它在人们政治、经济、生活的各个方面发挥着重要作用。 因此，网站建设在互联网应用中起着极其重要的作用。 已成为政府、企事业单位信息化建设的重要组成部分。 第二章网页制作概述 2.1 网页的类型 网页的类别有很多种。 我们一般的分类是动态页面和静态页面。 静态页面原则上多是通过网站设计软件重新设计、更改的，相对滞后。 当然，现在有网站管理系统也可以生成静态页面~我们把这种静态页面称为伪静态。 动态页面通过网页脚本和语言自动处理自动更新的页面。 2.1.1 静态页面 静态页面是网页的代码全部在页面中，不需要执行asp、php、jsp、.net等程序来生成客户端网页代码的网页。

静态页面无法独立管理和发布更新的页面。 如果要更新网页内容，必须通过FTP软件下载文件，并用网页制作软件进行修改（通过fso等技术的除外）。 但静态页面最大的优点是下载速度快，因为不需要程序计算和数据库连接。 常见的静态页面扩展名为.html和.htm。 这并不意味着没有动画的网站就是静态页面[3]。 2.1.2 动态页面 动态页面是通过执行asp、php、jsp、.net等程序生成客户端Web代码的网页。 动态页面通常可以通过网站后台管理系统来更新和管理网站的内容。 发布新闻、发布公司产品、沟通互动、写博客、在线调查等，这些都是动态网站的一些功能，也是我们常见的。 动态网页需要语言环境支持。 动态页面常见的扩展名有：.asp、.php、.jsp、.cgi等。动态页面的“动态”是指网站与客户端用户之间的交互，非动画网页就是动态页面[ 4]。 动态网页是网站建设中最常用的表现形式。 其优点是可以基于之前开发的程序接口，根据不同的用户请求返回相应的数据。 可以说是一对多的关系。 以达到资源的最大化利用，节省服务器的物理资源。 如果以后需要改变网站风格，只需重新创建前台访问的数据即可。 只要数据库结构不变，就可以快速修改。

2.2 Web 开发技术 介绍动态Web 开发技术——HTML、ASP、JSP、CGI、PHP。 HTML（HyperTextMark-upLanguage）是超文本标记语言，是WWW的描述语言。 严格来说吉祥物设计，HTML不能被视为一种编程语言，因为它没有自己的数据类型，也没有分支、循环等控制结构。 其简单的设计和灵活的结构允许文本和图像显示在Web浏览器和其他兼容的应用程序中，并且文档的部分内容可以成为超链接。 完成后，将这些文档另存为*.html文件，然后用浏览器打开。 HTML 是互联网的通用语言，是一种简单、通用、多用途的标记语言。 它允许网页制作者创建结合文本和图像的复杂页面。 互联网上的任何其他人都可以查看这些页面，无论使用什么类型的计算机或浏览器 [5]。 早期的动态网页技术主要采用CGI技术，即Common Gateway Interface。 早期，可以使用不同的程序编写适当的CGI程序，例如Visual Basic、Delphi或C/C++等。虽然CGI技术成熟且功能强大，但由于自身的缺陷，有逐渐被新技术取代的趋势。如编程困难、效率低、修改复杂等。 ASP，全称Active Server Pages，是一种WEB服务器端开发环境，可用于生成和运行动态、交互式、高性能的WEB服务应用程序。

ASP使用脚本语言VB Script（Java脚本）作为自己的开发语言。 更准确地说，ASP是一个中间件。 该中间件将 Web 上的请求传输给解释器。 在此解释器中，所有 ASP 脚本都会被分析然后执行。 这时，您可以在中间件中创建一个*.html文件（静态网页）。 PHP 是一种跨平台的服务器端嵌入式脚本语言。 它借鉴了C、Java和Perl语言的大量语法，并结合PHP自身的特性，使WEB开发人员能够快速编写动态生成的页面。 它支持目前大多数数据库。 另一点是PHP是完全免费的[6]。 JSP是Sun公司推出的新一代网站开发语言。 它彻底解决了当前ASP和PHP的一个通病——脚本级执行（据说PHP4也已经在Zend的支持下编译运行了）。 凭借其在Java方面的非凡成就，Sun公司让Java除了Java应用程序和Java Applets之外，又多了一个新的硕果，这就是Jsp-Java Server Page。 Jsp在Serverlet和JavaBean的支持下可以完成功能强大的网站程序。 2.3 网页布局 网站的首页就像一个公告板或一个店面——它给访问者留下了第一印象，他们都希望尽可能地留下良好的印象。

一般来说，一个好的网站应该给人以下感觉：干净整洁； 组织良好； 网页专业； 它很有吸引力。 网页应该努力吸引而不是淹没浏览者的注意力。 太多的闪光、颜色、下拉菜单框、图片等会让访问者感到困惑——离开是最好的选择，就像有些商店播放震耳欲聋的发烧音乐，你唯一要做的决定就是离开那里，尽快。 2.3.1 网页布局的基本概念。 一开始，当网页呈现在你面前时，它就像一张白纸。 它需要你运用你的设计才能来制定你自己的设计方案。 ，虽然你可以控制你能控制的一切，但是如果你知道什么是一个共同的标准或者大多数访问者的浏览习惯，那么你可以在此基础上添加自己的东西，这样你创建的发布的网页才能更好被别人接受。 (1)页面大小由于页面大小与显示器的大小和分辨率有关，因此网页的限制是不能突破显示器的范围，而且因为浏览器也会占用大量空间，留给您的页面范围将会改变。 必须变得越来越小。 一般情况下，分辨率为800×600时，页面的显示尺寸为：780×428像素； 当分辨率为640×480时，页面显示尺寸为：620X311像素； 当分辨率为1024X768时，页面的显示尺寸Dimensions为：1007×600。 从上面的数据可以看出，分辨率越高，页面尺寸越大。

浏览器工具栏也会影响页面大小。 一般情况下，当前浏览器的工具栏是可以取消或添加的，因此显示所有工具栏和关闭所有工具栏时页面的大小是不同的。 在网页设计过程中，向下拖动页面是向网页添加更多内容（尺寸）的唯一方法。 除非您确定网站的内容会吸引人们拖动，否则不要让访问者将页面拖动超过三个屏幕。 如果需要在同一页面上显示三屏以上的内容，最好在页面上制作内部链接，以方便访问者浏览。 (2)整体造型 造型是物体的造型形象，这里指的是页面的整体形象。 这个形象应该是一个整体，图文的结合应该是层次分明、井然有序的。 虽然显示器和浏览器都是矩形的，但对于页面的形状，可以充分利用自然界中的其他形状及其组合：矩形、圆形、三角形、菱形等。不同的形状有不同的含义。 例如，矩形代表形式和规则。 大家注意到，很多ICP、政府网页的整体形状都采用矩形； 圆形带代表柔软、统一、温暖、安全等。很多时尚网站喜欢用圆形作为页面的整体形状； 三角形代表力量、权威、坚固、侵略性等。为了显示其权威性，许多大型商业网站经常使用三角形作为页面的整体形状； 菱形代表平衡、协调、公平，一些交友网站经常使用菱形作为页面的整体形状。 。 虽然不同的形状有不同的含义，但目前的网页制作大多是通过多个图形组合来设计的，其中某个图形可能占构图的比例较大。

(3) 报头 报头也可称为报头。 页眉的作用是定义页面的主题。 例如，站点的大部分名称都显示在标题中。 这样，访问者可以快速了解该网站的内容。 页眉是整个页面设计的关键。 下面会涉及到更多的设计以及整个页面的协调。 网站名称、公司徽标和横幅广告的图片通常放置在页面的标题上。 (4) 文本 文本以行或块（段落）的形式出现在页面上，它们的位置决定了整个页面布局的可视性。 过去，由于页面制作技术的限制，文本放置的灵活性很小。 然而，随着DHTML的兴起吉祥物，文本可以根据自己的要求放置在页面的任何位置。 (5) 页脚 页脚与页眉相呼应。 页眉是放置网站主题的位置，页脚是放置生产商或公司信息的位置。 可以看到页脚中放置了很多生产信息。 (6)图片图片和文字是网页的两大元素，但却缺一不可。 如何处理好图片和文字的位置就成为了整个页面布局的关键。 而你的布局思维也会在这里得到体现。 (7)多媒体除文字、图片外，还包括声音、动画、视频等媒体。 虽然它们不经常被使用，但随着动态网页的兴起，它们在网页布局中将变得更加重要。 2.3.2 网页布局方法 网页布局有两种方法。 首先是纸张排版； 二是软件布局。 下面对它们进行介绍。 (1)论文排版法。 许多网页创建者不喜欢先画出页面布局的草图，而是直接在网页设计器中设计布局并添加内容。

这种无草稿方法将无法让您设计出优秀的网页。 因此，当您开始制作网页时，您必须首先在纸上绘制页面布局的草图。 首先，尺寸的选择。 目前，800X600的分辨率通常是常规的浏览模式。 所以为了照顾到大多数访问者，你的页面大小应该以800X600的分辨率为基础。 其次，形状的选择。 首先在白纸上画一个象征浏览器窗口的矩形。 这个矩形将是您的布局范围。 选择一个形状作为整个页面的主题。 我们选择圆形是因为它代表着柔和，更符合时尚。 然后在矩形框中随机绘制。 您可以尝试添加一些圆圈或其他形状。 如果你这样画的话，你会发现很乱。 事实上，如果你想从一开始就设计出完美的布局，难度更大，你必须找到隐藏在这看似杂乱的图形中的特殊形状。 另请注意，您不必担心您设计的布局是否可以实现。 事实上静态网页设计模板女排，您能想到的任何布局都可以通过当今的 HTML 技术来实现。 如图 2-1 和图 2-2 图 2-1 手绘布局 图 2-2 布局 考虑到左侧是凹圆弧，为了达到平衡，我们在右侧添加了一个矩形页（也可以是线段）如图2-3所示。 图2-3 布局图的改进 然后，添加页眉。 一般页眉位于页面的顶部，所以我们为图3添加了页眉。为了与左边的圆弧和右边的矩形达到平衡，我们添加了一个矩形的页眉，让页眉与左侧的圆弧相交。 ，图2-4。

图2-4 页眉示意图 然后，添加文本。 将文本和图形添加到页面的空白区域。 由于页面右侧有一个矩形作为陪衬，放置在空白区域的文字不会因为左侧的圆弧而显得格格不入，如图2-5所示。 图2-5 文字说明 最后添加图片。 图片是美化页面、说明内容的必要媒介。 将图片添加到此处适当的位置，如图2-6所示。 图2-6 图片说明 经过以上步骤后，一个时尚页面的总体布局就出现了。 当然，这不是最终的结果，而是对你以后制作的重要参考。 (2)软件排版法除了纸张排版外，还可以使用软件来完成这些工作。 比如使用Photoshop。 Photoshop的图像编辑功能在设计网页布局时更加得心应手。 使用Photoshop，您可以轻松地使用颜色和图形，并且可以使用图层功能设计出用纸张无法实现的布局创意。 2.3.2 网页布局技术 （1）层叠样式表的应用 在新的HTML4.0标准中，提出了CSS（Cascading Style Sheets），可以完全准确地定位文本和图像。 CSS有点复杂，但确实是一个很好的布局方法[7]。 曾经不可能的想法可以使用 CSS 实现。 目前在很多网站上，使用层叠样式表是一个网站的极好的体现。 例如一些企业网站。 (2) 表格布局 表格布局被广泛使用并已成为潜在的标准。

浏览任何网站，它们必然会使用表格进行布局。 表格布局的优点是可以处理不同的对象，而不用担心不同对象之间的影响。 此外，表格比使用 CSS 更方便地定位图像和文本。 表格布局的唯一缺点是，当使用太多表格时，页面下载速度会受到影响[8]。 对于表格布局，打开一个网站的主页，然后将其另存为HTML文件，用网页编辑工具（需要所见即所得软件）打开它，你就可以看到这个页面是如何使用表格的。 (3)框架布局 由于其兼容性，框架布局并不被所有人所接受。 但从布局的角度来看，框架结构是一种很好的布局方式。 它就像一个表格布局，将不同的对象放置在不同的页面上进行处理。 因为边框可以取消边框，所以一般不会影响整体美观。 2.4 Web配色网站充满了无聊的设计，例如HP、IBM、Dell、Microsoft以及无数其他网站（相似的布局、相似的配色）。 这样标准化的界面可以让浏览更加方便，但同时也给用户带来了非常平庸的体验，无法与访问者建立积极的联系。 面对这种单调的设计，有一个解决办法，那就是使用色彩。 也许没有其他设计元素比颜色更能影响人们对世界的感受。 颜色可以立即改变我们的心情和观点。 颜色可以让我们感到舒适、敬畏或兴奋[9]。 在界面设计中，色彩组合对于设计非常有用。

可以看出，设计让用户更容易记住，引导用户让用户专注于交互，吸引用户让页面布局更加舒适和有吸引力。 一旦您有机会让您的网站变得更加独特，您就不能错过它。 如果您的网站引人注目，用户可能会花更多时间浏览并想知道他们来自哪里。 他们可能会记住该网站并下次再次访问。 可能没有比颜色更好的元素来实现这种效果了。 人们对颜色有直接的感觉：兴奋、喜悦或沉闷。 当您尝试在充满饱和色调的页面上浏览信息时，您的眼睛会不断回到那些明亮的颜色。 最强烈的视觉元素是最重要的。 我们往往会忘记那些深蓝色、黄色和灰色，因为我们每天都会看到它们。 这对于用户长时间在线的 Web 应用程序尤其重要。 不太强烈的调色板可以让用户专注于他们的工作并接收重要信息。 当然，完美的网络体验不能仅仅依赖于颜色。 结构、交互、布局和其他方面也必须协同工作，才能创建可用且易于使用的网站和应用程序。 但色彩是平衡的重要组成部分，不容忽视。 2.5 网页设计流程 网页设计是一个交互的过程，它不仅仅可以由设计者构思和设计来完成。 从客户提出要求到最终发布，需要客户和设计师共同参与协商。 具体流程如下：首先，获取客户需求和信息。 在设计网站页面之前，设计师需要了解客户的需求，以确定客户网站的目的。

客户的网站要求是非常重要的一步。 没有详细的要求，设计师就无法在真空中进行设计和生产。 在这一步中静态网页设计模板女排，双方的沟通非常重要。 其次，确定网站的内容。 设计者选择适合自己的图像编辑软件、动画制作软件和网页制作软件进行网页的初步设计。 在此过程中，他们可能需要与客户进行多次沟通，以达到客户满意度。 在具体设计时，设计者应该为网站定位一个主题，确保所有网页都是围绕这个主题进行设计和制作的，以保证风格的和谐统一。 然后，申请域名和空间。 这种方法可以有效地同步和管理文件。 您也可以通过FTP软件连接到服务器空间，然后上传发布文件。 最后是后期维护。 一般来说，静态网站上传后，如果客户没有专业人员维护，设计师就需要从客户那里获取新的信息，进行定期或不定期的更新。 如果是动态网站，设计者需要负责培训客户如何使用后台管理，让客户自己通过后台管理添加信息，而设计者只需纠正动态的错误即可网站及时发布。 第三章涉及软件 3.1 DreamWeaVer cs3 简介 Dreamweaver CS3 是 Adob​​e 收购 Macromedia 后推出的最新 Creative Suite 3 设计套件中用于网页设计和制作的组件。

作为世界上最流行、最好的所见即所得网页编辑器，Dreamweaver 可以轻松创建跨操作系统平台和跨浏览器的动态网页。 它是目前创建网页站点、网页和Web应用程序的最佳方式。 理想的开发工具。 Dreamweaver、Fireworks、Flash被誉为网页制作的“三剑客”。 这三个工具相辅相成，是制作网页的最佳拍档。 3.2 DreamWeaVer cs3 操作界面 DreamWeaVer cs3 界面设计友好，空间广阔，操作微妙细致。 它是一款所见即所得的网页编辑器，不仅有效减少了代码编写的工作量，而且保证了设计文档的专业性和兼容性。 ，如图3.1所示。 图3.1 DreamWeaVer cs3 操作界面 第四章建立网页链接 一个网站实际上是由很多网页组成的，那么网页之间是如何连接的呢？ 这就是本章的主题——网页的“链接”。 “链接”又称“超链接”（Hyperlink），充当网页的桥梁。 网页中的许多对象都可以添加“链接”属性。 在Dreamweaver 8中，如果按照“链接”的媒介来划分，“链接”可以分为“文本链接”、“图像链接”、“图像图链接”、“内部链接和外部链接”、“电子邮件链接” ”、“命名锚链接”、“文件下载链接”和“跳转菜单”，共8种。

4.1 文本链接 “文本链接”是指以文本为媒介的链接。 它是网页中最常用的链接方式，具有“文件小、制作简单、维护方便”的特点。 接下来，我将以我的个人网站为例，讲解如何为文字创建“链接”。 操作步骤： 步骤一、准备完成首页的各栏目页面。 步骤 2. 在 Dreamweaver 中打开主页，然后突出显示并选择文本作为“链接”。 步骤 3. 观察“属性面板”，其中包括一个“链接”文本框。 步骤4.接下来，您需要将链接地址添加到文本框中。 步骤5.“链接”文本框下方还有一个“目标”下拉列表，您可以从中选择显示链接网页的窗口模式。 总共有4种类型。 如图： 第6步，还可以设置一些“链接”属性。 单击“属性面板”中的“页面属性”，然后选择“链接”类别。 可以进行的设置包括“链接字体”和“大小”、“链接颜色”、“变换图像链接”颜色、“已访问链接”颜色、“活动链接”颜色和“下划线样式”。 步骤7.至此，第一栏的链接就完成了。 按 Ctrl+S 保存网页，然后按 F12 进行预览和测试。 当鼠标放在“放松”四个字上时，会变成手形，浏览器窗口下方的状态区会显示所链接网页的地址。 点击文字，页面立即跳转到第一栏，即表示链接已成功创建。

步骤8、同样按照上述步骤，为“休闲”、“个人主页”等其他栏目创建相应栏目的链接。 至此，整个“文本链接”示例就完成了。 4.2 图片链接 “图片”也是一种常用的链接媒体，与“文字链接”非常相似。 要添加图像链接，您应该首先在网页中插入“图像”。 关于插入“图片”或“导航栏”按钮的内容，我们以我的网站“我的网站”为例，说明如何建立“图片链接”。 操作步骤： 第一步、首先还需要准备好完整的首页以及各栏目的页面。 步骤2.在Dreamweaver中打开网站的主页，然后选择要创建“链接”的图像。 步骤3.观察“属性面板”，在“链接”文本框中输入链接的文本地址。 步骤4. 如果需要，您可以在“目标”下拉列表中选择显示“链接”网页的窗口模式，即-blank、-parent、-self 或top。 步骤5.至此，第一栏的图片链接就完成了。 按 Ctrl+S 保存网页，然后按 F12 预览。 测试一下。 当你把鼠标放在“动画制作”4个字上时，就会变成“动画制作”，同时浏览器窗口下方的状态区会显示链接网页的地址，并显示“替换”文字“动画制作”将显示“。 点击文字，页面立即跳转至第三栏。 这意味着链接已经创建成功。

步骤6.以同样的方式按照上述步骤为其他图像创建指向相应栏的链接。 步骤七、在栏目页面创建“返回首页”链接，点击后即可跳转回首页。 至此，整个“图像链图像”示例就完成了。 4.3 建立HTML 语言的网页链接 1. 文本链接使用超链接标签来指向HTML 语言的目标。 其基本格式为： 举一个简单的“文本链接”例子，该例子对应的HTML代码如下。

a href-“index2.html” target=”-blank”> 图形设计（新窗口，-blank）

相册（原始窗口，默认为空）

信息

解释： ？ href：是标签的一个属性。 该属性中的URL等于链接目标文件的地址。 ？ Target：也是标记的一个属性，相当于Dreamweaver的“属性面板”中的“目标”。 它的值等于-blank，效果是在新窗口中打开。 此外，还有其他三种类型：-parent、-self 和-top。 这与Dreamweaver中“目标”下拉列表中的内容完全相同。 ？ 文字内容：如代码示例中的“图形设计”。 这些文本将使用链接属性 href 和目标属性 target 放置在标签之间，创建链接效果。 2. 图片链接 让我们举一个简单的“图片链接”的例子。 该示例对应的HTML代码如下所示。

（打开一个新窗口，-空白）

（原始窗口，默认为空）

a href=”3d/3d-001.htm”>

说明：如果你仔细观察代码，你会发现“图像链接”和“文本链接”之间的唯一区别是 和 之间的内容。 “文本链接”中及其之间的内容是文本内容，而“图像链接”中的内容绝对是图像内容。 如前所述，使用“插入图片”

给我写信

说明：只需使href等于“mailto:电子邮件地址?subject=subject”即可，其中subject是可选的，不需要添加“?subject=subject”。 本设计使用 Macromedia 开发的专业 HTML 编辑器 Dreamweaver 来设计、编码和开发 Wed 站点、网页和 Web 应用程序。 使用 Dreamweaver 中的可视化编辑功能，用户无需编写任何代码即可快速创建页面。 和。 通过 Dreamweaver，您还可以使用服务器语言（例如：ASP、ASP.NET、ColdFusion 标记语言 (CFML)、JSP、PHP）。 这个设计的页面不是很美观，这些缺点还需要后期开发和改进。