计算机网络概述第七章网站的设计与制作_第1页
计算机网络概述第七章网站的设计与制作_第2页
计算机网络概述第七章网站的设计与制作_第3页
计算机网络概述第七章网站的设计与制作_第4页
计算机网络概述第七章网站的设计与制作_第5页
已阅读5页,还剩19页未读 继续免费阅读

下载本文档

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

文档简介

七章网站的设计与制作

计算机工程教研室

本章内容

。概述

❷……HTML简介

网站设计与制作

网站的测试与发布

2CivilAviationFlightUniversityofChina

7.1.1网站的规划与设计

♦:♦创建一个完整的Web站点,大致上可以分为

5个阶段

■1.分析阶段

■创建站点之前需要耗费一定的时间精力对站

点进行规划设计,确定站点的目标、客户群、

主题、规模、站点结构、栏目和界面风格等,

制定出详细的计划。

■2.设计阶段

■制定主页的结构、连接方式和站点的模块划

分方式,并收集相关的素材,制作必要的组件。

如果网站中用到数据库,则还要进行数据库的

选择与数据库的结构设计。

3CivilAviationFlightUniversityofChina

7.L1网站的规划与设计

■3.实现阶段

■选择适当的网页设计工具、网页设计语言创

建网页,编写或制作出各个不同功能网页的代

码,确定网页之间的关系,建立网页之间的链

接。

■4.测试阶段

■利用浏览器测试网页文档的正确性、可用性

和健壮性,及时纠正错误,杜绝漏洞。

■5.维护阶段

■在站点运行过程中,需要经常对制作好的网

页文档进行更新和完善。

4CivilAviationFlightUniversityofChina

7.L2网页设计的基本原则B

❖1.速度优先原则

❖2.标题设计原则

❖3.内容更新原则

♦4.艺术处理原则

❖5.操作简便原则

♦6.易于维护原则

5CivilAviationFlightUniversityofChina

7.1.3网页制作工具简介

❖在WWW出现的初期,制作网页都是在文本编辑

器中使用HTML编写的,网页制作人员要有一定的

编程基础,并且需要记住HTML标记的含义。后来

虽然又出现了类似HotDog的网页编辑器,但还是

基于HTML标记来编写网页。直到Dreamweaver等

“所见即所得”的网页制作工具出现之后,不是

专业程序员的使用者们才开始能够制作精美、漂

亮的网页。如果用户还需要制作交互式的或具有

某些特殊效果的网页,还需要使用JavaSript、

CGI、JSP、ASP、PHP等来完成,但要求是使用它

们的开发人员必须具有一定的编程基础

CivilAviationFlightUniversityofChina

Dreamweaver

菜单栏

插入栏面板组

文档工具栏

“文件”面板

文档窗口

标签选择器

属性检查器

CivilAviationFlightUniversityofChina

Photoshop

P,AdobePhotoshopCS3Extended

菜单栏

j「

R

u

/

L,

工具栏a

I额色•I色板1样式.

一文档:3.52M/3,52M

口」Jj

8CivilAviationFlightUniversityofChina

FIash

菜单栏

时间轴

工具箱

工作区

浮动

面板

“属性二

面板

9CivilAviationFlightUniversityofChina

7.2HTML简介

♦:*HTML文件一般是分层组织的,最外层是

<htmI></html>,在此标记内一般有两层:

head层(文档头)和body层(文档体)。

这两部分内容都包含在<htmI>和</htmI>之

间。文档头一般存储网页的信息,例如网

页标题和网页关键字等。文档体是网页内

容的显示部分,主要由表格标记、段落标

记、图像标记等组成

10CivilAviationFlightUniversityofChina

7.2.1HTML的基本结构

B典型HIIL文件结构.ht・-记事本同冈

文件①)编辑@)格式查看9帮助⑻展天就

<html>

<head>

文档的头部分

</head>

<body>

文档的主体部分

</body>

</htnl>

CivilAviationFlightUniversityofChina

7.2.2HTML标记H

♦:♦某个标记的所有可用属性称为该标记的属

性集,不同的标记所包含的属性集也不

同。〈标记属性仁属性值1属性2二属性值

2...>

12CivilAviationFlightUniversityofChina

部分常用标记

❖<pX/p>:创建一个段落,此标记之间的文

本将按照段落的格式在浏览器中显示;

❖<h1>><h2>、……<h6>:是6种不同等级的

标题标记,<h1>字体最大,<h6>最小

卧标总标记示例.ht--记本本AF:\代码'标81标记示例.htaliccoxoftInternetE...,一七|反]

文件9编辑通格式5查看9希勒文件®«««)查看9收蠹⑷工*9招助如犷

K/html〉■j回.ac/•»e合'

<head></head>

<body>>ft-.色?'代码'旗虺玩记南例*flwsi一

<h1>这是一级

。2〉这是二

<h3>法是三级这是一级标题

<h4>这是四级:

<h5>这是五级这是二级标题

。6>这是六级

</body>

这是三纵标题

这是四级标题

这是五级标箱

送■六■■■

如完学,痴汨6

(a)代码(b)效果.

13CivilAviationFlightUniversityofChina

部分常用标记(二)

文字格式

文字格式

文字格式

文字格式

文字格式

文字格式

交空格式

(a)代码(b)效果“

14UIVIIavianonrngniumversixyOTunma

7.2.3超链接

(a)

(b)

15CivilAviationFlightUniversityofChina

7.2.4使用表格

属性用途,

Width"表格的宽度a

现毁19尸表格的背景色~

(a)代码」

Border41边框的宽度P

C演咏w表格的单元格间距,默认为2-

Hei曲"表格的高度口

Badegrounds表格的背景图片,

边框的颜色2

表格单元格的内边距,

(b)效果,

16CivilAviationFlightUniversityofChina

7.3网站设计与制作

♦:♦网站的主题体现了建立网站的目的。网站的设计

者首先应明确建立网站的需求和目的,即为什么

要建立这个网站和建立的网站能做什么。任何一

个网站都不能涵盖全部类型网站的特点,即一个

网站不可能同时是政府网站,又是商业网站,又

是个人网站。

♦:♦明确网站的目的是为了使网站主题突出,便于读

者找出感兴趣的内容。不要让网站主题过于分散,

因为网站主题越明确,后期的管理越容易,因此

所提供信息的质量也会越高。

17CivilAviationFlightUniversityofChina

(b)树型结构(c)树型结构与线性结构的结合

(d)网型结构

18CivilAviationFlightUniversityofChina

7.3.3设计页面

♦:♦有了网站结构以后,就要在结构上添加具

体的内容。要决定页面上分别要放置哪些

版块,每个版块上放置什么内容以及内容

的数量等,画出主页和子页(即网站首页

和它的二级页面)的基本结构草图

19CivilAviationFlightUniversityofChina

网页制作流程

❖2.绘制网页效果图

❖3.效果图切割保存

为AdobePhotoshopCS3Extended-[gnanhui.JPG。90«(RGB/8t)]

曲文件也)潴捐⑥图像包)图层(L)选择@潮SO:)工视图9窗口®帮助包

沙,言丫'移'」-••」』」,匕:,二三二士叶川;」I隐藏自动切片I火工褪▼

(HH""

323

RQ___1H1E0BrM-512.S„_­

R定近冠汇绯间资讯周黄r价格后总反话喝招聘

j

/

晶y

-

f-J

乳T

-

-u

z

A韩Iq-----□——q

■pI施•I色皎1样苏;—一

.■aO

£~~G.Q

TB

」-_O

I齿甚,I通遒]解

关干我们产品供应嬉电反馈0£00SG7X33

司跑址厂州天河云封镇时罚1号充家电话号促:U"Yfe”二33出反号码UaFbfd

版权所自。-Hffi就:与车招赁顺务有健去司备案号.立信息及J8

_______阚

文档⑵61M/2.31MI"

20CivilAviationFlightUniversityofChina

7.3.4创建本地网站

RAdobaDreasveaverCS3b®®

文件但)编辑也)查看W)插入记录夏)修改电)文本d)命令站点0)窗口电)帮助®I

►CSS

,应用程序

I♦标签检查需

▼文件

ADOBE,DREAMWEAVER*CS3

文桂卜货涯「代码片概

W里面7管理站点

打开最近的项目新建从模板创建

sE3I£C件IEZ3I

的站点定义为

guanhui

温馨提示

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

评论

0/150

提交评论