网页制作课程设计

摘要

本网站主要是运用Dreamweaver8.0制作，在可视化的环境下创建和编辑Web 站点，综合PhotoshopCS3进行创意和设计。通过网页展示个人主页、日志、相册、个人档等一系列内容。

关键词Dreamweaver Photoshop 个人网站超链接

第一章可行性与需求分析

1.1开发背景

㈠五十多年来，计算机的发展经历了以下五个重要阶段。

①大型机阶段②小型机阶段③微型机阶段④客户机/服务器阶段⑤互联网阶段

㈡计算机的应用

①科学计算②事务处理③过程控制④辅助工程⑤人工智能⑥网络应用⑦多媒体的应用

㈢网络的应用

①数据传送②资源共享③提高计算机的可靠性和可用性④易于进行分布式处理

㈣Internet的应用

①电子邮件E-mail ②远程登录Telnet ③文件传输④FTP ⑤WWW服务

1.2 性能需求

Dreamweaver8.0要求的运行环境

（1）CPU P3-800

（2）内存256MB

（3）硬盘剩余空间1.8GB

（4）显示器分辨率1024×768

（5）16位视频卡。

（6）软件WINDOWS2000/XP

当前的开发环境（硬件、软件）

（1）CPU AMD Arhlon(tm) 64 ×2 dual Core Processor TK-57

（2）内存1GB

（3）硬盘剩余空间20GB

（4）显示器分辨率1280×800

（5）显示卡ATI Redeon X1250

（6）32位视频卡

（7）软件WINDOWS XP

1.3 Dreamweaver8.0的特点：

⒈将世界一流水平的“设计“和“代码”编辑器合二为一在设计窗口中精简源代码使用户能够按工作的需要定制自己的且户界面

⒉．跨济浏览器的有效性检查

⒊．使用内置的图形编辑程序让开发更加节时间

⒋功能更多的CSS支持

⒌所有传输的文件完全加密，并阻止越权存取你的信息、文件内容、用户名和口令

⒍图片处理功能：图片亮度和对比度的调节、图片的锐化的效果

1.4网站设计的步骤：

①规划网站；

②建立站点及制作页面； ③注册域名、租用空间； ④上传；推广及维护 1.5 网站总体结构设计

功能模块图（层次图）

1.6可行性分析

技术（软、硬件具备）

经济（制作简单的个人站点，不需要资金投入）

社会（网站内容符合国家法律法规的要求，使用的各种素材不涉及版权问题）

结论：可以开发

个人主页

主页 日志 相册

个人档 留言板

第二章规划网站

2.1 建站的目的即主题:

想交朋友的你，已经积累了网页设计方面的技巧，现在想设计一个人网页，将这些技巧和自己较好的构想展现给大家，供朋友们参考。网站主要是以学习网站创建和技术交流为主。性质就是无偿服务性的个人网站。有了网站的主题和性质后，就可以确定该网站的标题“我的个人主页”或“个人风采”，让大家一看就知道网站的主题内容是什么，一清二楚。

2.2 网站的浏览对象：

Ⅰ对象：想交朋友的群体

Ⅱ网站的风格：深色忧郁

Ⅲ网站特点: 颜色:以黑色为主调

2.3 网站的总体设计：

⑴内容分类:主页、日志、相册、个人档、留言板

⑵各个页面的主题内容:

主页：有自己简介照片等

日志：有网络美文

相册：有个人照片

个人档：有姓名、性别、年龄、生日、星座、爱好等

留言板：供网友留言、

⑶网页的布局图（手绘）

个人主页

导航条

文字图片

⑷准备的素材：背景图片：网络下载

第三章站点的建立及页面制作

1. 站点建立

⑴打开：“窗口”下的“新建站点”

⑵按“下一步

⑶单击“下一步”

⑷单击“下一步”（出现“你如何连接到远程服务器”时选择“无”）

⑸单击完成

⑴⑵

⑶⑷

⑸

2. 各个页面的制作页面图

㈠首页的页面：

制作过程: 1创建一个一个新的文件

2添加背景图片字体为行文楷体字号36

3添加表格制作导航栏使整体美观大方

主页的设定：点击“index.html”文件，右击“设为首页”

㈡日志的页面：

制作过程1添加背景图片

2 文字的添加字号24 字体行文楷体字体颜色是黄色

3 调整整体的布局使其美观

㈢相册的页面：

制作过程1添加背景图片和我的图片

2 布局整体

㈣个人档的页面：

制作过程1添加背景图片和文字

2整体布局

㈤留言板的页面：

制作过程：1 添加背景图片和文字

2 加入文本域和按钮（工具栏下的“插入”--“表单”--文本

域和按钮

3 布局整体

第四章注册域名、租用免费空间一、搜索一个提供免费空间的网页

二、注册会员

第五章上传发布

上传工具：FTP工具、FlashFXP

FTP上传过程：

申请空间后，用FTP软件上传！比如CuteFtp，

网页做好了，接下来最重要的就是上传网页啦！也只有上传网页到网络上，其他的网友才能浏览得您的网页，而且，上传之后，也才能发现，您设计的网页是否有问题。上传的方式有千百种，这里我介绍最常用的一种，至于其他的上传方式，只有靠自己去理解啦！

1.首先来解释一下，什么叫做『上传』（已经知道的就快快跳过去吧！）要讲到这个就不能讲一下FTP这东东。简单来说，FTP是一种网络上的文件传输服务（或者说是界面啦、规格、都行啦！听得懂就好），我们常常在下载软件，用到的就是FTP的文件传输服务。

2.所谓上传呢！其实就是FTP的其中一个功能，我们既然能够将文件从网络上抓下来，那么当然也可以把文件从自己的电脑，送到服务器上去啊！（严格说起来，是送到另外一台电脑...），因此，简而言之，上传就是把你电脑中的资料，通过软件传输到网络的服务器上。

3.FTP软件一大堆，其中常用的是CuteFTP .

二、设置CuteFTP

1.请先进行安装...。然后，按两下打开Cute FTP。你就会看到如下的画面：

2.这是告诉你，使用期限已经过啦！快快注册吧！不过，按下OK其实还是可以用的，不过去注册一下应该会比较好一点。（对了！刚装好是不会出现这信息的。）

3.按下OK后，会进入一个『FTP站设置』的窗口，我们先看看左上角，将鼠标移到『FTP sites』的地方，如图：

4.然后我们按下它下面的那一排按钮中的『Add sites』，告诉电脑我们要新增一个主机站（这个站就是我们要将网页上传的地方），如图：

5.按下『Add sites』之后，我们便会看到一个设置窗口，这个窗口主要是要让我们来设置我们要上传主机的详细资料，就以本站的例子来说好了：

标号1：这一格只是让你替服务器（就是你要放上网页的电脑主机啦！）取个名称罢了，随您怎么填都可以，像工友就自行取为『首页制作百宝箱』，下次再进入CuteFTP时，就直接选取『首页制作百宝箱』就可以直接连到该网页服务器器，直不需要再输入一堆繁杂的设置了。