网页制作课程设计

摘要本网站主要是运用Dreamweaver8.0制作，在可视化的环境下创建和编辑Web站点，综合PhotoshopCS3进行创意和设计。通过网页展示个人主页、日志、相册、个人档等一系列内容。关键词DreamweaverPhotoshop个人网站超链接第一章可行性与需求分析1.1开发背景㈠五十多年来，计算机的发展经历了以下五个重要阶段。①大型机阶段②小型机阶段③微型机阶段④客户机/服务器阶段⑤互联网阶段㈡计算机的应用①科学计算②事务处理③过程控制④辅助工程⑤人工智能⑥网络应用⑦多媒体的应用㈢网络的应用①数据传送②资源共享③提高计算机的可靠性和可用性④易于进行分布式处理㈣Internet的应用①电子邮件E-mail②远程登录Telnet③文件传输④FTP⑤WWW服务1.2性能需求Dreamweaver8.0要求的运行环境（1）CPUP3-800（2）内存256MB（3）硬盘剩余空间1.8GB（4）显示器分辨率1024×768（5）16位视频卡。（6）软件WINDOWS2000/XP当前的开发环境（硬件、软件）（1）CPUAMDArhlon(tm)64×2dualCoreProcessorTK-57（2）内存1GB（3）硬盘剩余空间20GB（4）显示器分辨率1280×800（5）显示卡ATIRedeonX1250（6）32位视频卡（7）软件WINDOWSXP1.3Dreamweaver8.0的特点：⒈将世界一流水平的“设计“和“代码”编辑器合二为一在设计窗口中精简源代码使用户能够按工作的需要定制自己的且户界面⒉．跨济浏览器的有效性检查⒊．使用内置的图形编辑程序让开发更加节时间⒋功能更多的CSS支持⒌所有传输的文件完全加密，并阻止越权存取你的信息、文件内容、用户名和口令⒍图片处理功能：图片亮度和对比度的调节、图片的锐化的效果1.4网站设计的步骤：①规划网站；②建立站点及制作页面；③注册域名、租用空间；④上传；推广及维护1.5网站总体结构设计功能模块图（层次图）个人主页个人主页主页日志相册个人档留言板1.6可行性分析技术（软、硬件具备）经济（制作简单的个人站点，不需要资金投入）社会（网站内容符合国家法律法规的要求，使用的各种素材不涉及版权问题）结论：可以开发第二章规划网站2.1建站的目的即主题:想交朋友的你，已经积累了网页设计方面的技巧，现在想设计一个人网页，将这些技巧和自己较好的构想展现给大家，供朋友们参考。网站主要是以学习网站创建和技术交流为主。性质就是无偿服务性的个人网站。有了网站的主题和性质后，就可以确定该网站的标题“我的个人主页”或“个人风采”，让大家一看就知道网站的主题内容是什么，一清二楚。2.2网站的浏览对象：Ⅰ对象：想交朋友的群体Ⅱ网站的风格：深色忧郁Ⅲ网站特点:颜色:以黑色为主调2.3网站的总体设计：⑴内容分类:主页、日志、相册、个人档、留言板⑵各个页面的主题内容:主页：有自己简介照片等日志：有网络美文相册：有个人照片个人档：有姓名、性别、年龄、生日、星座、爱好等留言板：供网友留言、⑶网页的布局图（手绘）个人主页导航条文字图片⑷准备的素材：背景图片：网络下载第三章站点的建立及页面制作1.站点建立⑴打开：“窗口”下的“新建站点”⑵按“下一步⑶单击“下一步”⑷单击“下一步”（出现“你如何连接到远程服务器”时选择“无”）⑸单击完成⑴⑵⑶⑷⑸2.各个页面的制作页面图㈠首页的页面：制作过程:1创建一个一个新的文件2添加背景图片字体为行文楷体字号363添加表格制作导航栏使整体美观大方主页的设定：点击“index.html”文件，右击“设为首页”㈡日志的页面：制作过程1添加背景图片2文字的添加字号24字体行文楷体字体颜色是黄色3调整整体的布局使其美观㈢相册的页面：制作过程1添加背景图片和我的图片2布局整体㈣个人档的页面：制作过程1添加背景图片和文字2整体布局㈤留言板的页面：制作过程：1添加背景图片和文字2加入文本域和按钮（工具栏下的“插入”--“表单”--文本域和按钮3布局整体第四章注册域名、租用免费空间一、搜索一个提供免费空间的网页二、注册会员第五章上传发布上传工具：FTP工具、FlashFXPFTP上传过程：申请空间后，用FTP软件上传！比如CuteFtp，网页做好了，接下来最重要的就是上传网页啦！也只有上传网页到网络上，其他的网友才能浏览得您的网页，而且，上传之后，也才能发现，您设计的网页是否有问题。上传的方式有千百种，这里我介绍最常用的一种，至于其他的上传方式，只有靠自己去理解啦！1.首先来解释一下，什么叫做『上传』（已经知道的就快快跳过去吧！）要讲到这个就不能讲一下FTP这东东。简单来说，FTP是一种网络上的文件传输服务（或者说是界面啦、规格、都行啦！听得懂就好），我们常常在下载软件，用到的就是FTP的文件传输服务。2.所谓上传呢！其实就是FTP的其中一个功能，我们既然能够将文件从网络上抓下来，那么当然也可以把文件从自己的电脑，送到服务器上去啊！（严格说起来，是送到另外一台电脑...），因此，简而言之，上传就是把你电脑中的资料，通过软件传输到网络的服务器上。3.FTP软件一大堆，其中常用的是CuteFTP.二、设置CuteFTP1.请先进行安装...。然后，按两下打开CuteFTP。你就会看到如下的画面：2.这是告诉你，使用期限已经过啦！快快注册吧！不过，按下OK其实还是可以用的，不过去注册一下应该会比较好一点。（对了！刚装好是不会出现这信息的。）3.按下OK后，会进入一个『FTP站设置』的窗口，我们先看看左上角，将鼠标移到『FTPsites』的地方，如图：4.然后我们按下它下面的那一排按钮中的『Addsites』，告诉电脑我们要新增一个主机站（这个站就是我们要将网页上传的地方），如图：5.按下『Addsites』之后，我们便会看到一个设置窗口，这个窗口主要是要让我们来设置我们要上传主机的详细资料，就以本站的例子来说好了：标号1：这一格只是让你替服务器（就是你要放上网页的电脑主机啦！）取个名称罢了，随您怎么填都可以，像工友就自行取为『首页制作百宝箱』，下次再进入CuteFTP时，就直接选取『首页制作百宝箱』就可以直接连到该网页服务器器，直不需要再输入一堆繁杂的设置了。标号2：这一格非常重要，须填上伺服器的所在位置，假设你的服务器位置在中研院，所以就填上『.tw』，或许有人会问，那我到底要填上什么呢？这...我也不知道，我怎么会知道您网页放在哪呢？如果您是线上申请的免费网址，那么该网站应该都会告诉您要上传到哪里（也就是一连串的主机位置），不然，就问问让您放网页的服务器管理员吧！对了！在填的时候千万别加上ftp://.....orhttp://.....这些都是无法执行的。标号3：通常连通主机后，服务器会询问您的帐号，这一格就填上您进入服务器的帐号即可。标号4：检查完帐号后就会要求输入密码，这一格就是要您填密码啦！注意喔！这里所谓的帐号密码是指『进入该服务器的帐号密码』而非，您拨接上网的帐号密码，通常服务器管理员都会通知您帐号密码是多少，要不然就是当初您在申请免费网址时自行设置的那一组帐号密码就是了。标号5：进入服务器方式设置，通常是『Normal』，也就是说需要帐号密码才进得去，如果选第二项就表示任何人都可以进去，那事情就大条啦！标号6：文件上传模式设置，选第三项『Auto-Detect』比较方便，它会自行探测文件类型做出最适合的上传方式。标号7：嗯...这格我就较不了解了...反正选『Auto-Detect』这一项准没错。标号8：设置服务器端的路径，设不设都无所谓啦！有设的话，以后再进入时，就不用切换一堆路径，而可以直达你要上传的目录。所以要设置的话，先决条件是，您要知道您放网页的路径及目录。标号9：设置自己电脑的内部目录，像我就设置C:www，它只要一连通服务器，便会自行切换到C:www这目录，工友就可以不用在那里找目录而可以省下一些时间。OK！设好按下确定之后，你应该可以看见刚刚设置的服务器名称出现在右上的窗口中，如图：而它的下方会显现其网络位置如图：看到之后便表示您设置成功了（但不代表你设置的值是正确的，要连得通才算数）下次再执行CuteFTP时，就可以直接选这里来进入了。最后一个步骤，按下『Connect』连接，就行啦！接下来就是期待接通了！三、连接服务器接下来映入眼的就是整个CuteFTP的使用界面，上面是工具列，工具列下方是状态列，左下是自己电脑的目录，右下是服务器的目录。现在就先说说工具列：以上是左半段。以下是右半段，其实，只要认识几个图标就可以了，其他的并不常用。最重要的就是『往上』『往下』的两个箭头图标，往上就是上传，往下就是下载。简单吧！整个画面看起来如下图：OK！进入最重要的主题：『如何上传文件』！首先，先确定已经连通服务器，这只要看看状态列就知道了，如上图的状态列所示，就是连通后的样子。切换到适当目录。先看看左下，这是自己电脑的目录。由于工友所有的网页文件都放在C:www的目录下，所以，先要切换到C:www中。由于工友当初有设置内部目录是C:www所以，一连通后，左下窗口便会出现C:www的内容。右下窗口是您放网页在服务器的目录位置，工友的网站是放在服务器的newhd/home/tad/public_html/中，所以就自行切换到您放网页的目录吧！做完这两个动作，上传大业已经完成大半了！接下来，回到左下窗口选取欲上传的文件，如图：（按住Shift键再选取文件可以连续选取多个文件，按住Ctrl键再选取文件可以选取多个不连续文件）选取完后，按下工具列的『往上』键，就可以啦！如图：ftp软件有很多种，使用方法大同小异。同时，他还有下载的功能，你可以利用这一点从服务器上下载软件，速度比其他方法快多了。推广及后期维护7.1推广的各种方法1口头告诉同学2上传到博客、QQ空间等各种通讯工具7.2后期维护的意义1有助于最新动态的了解2有利于漏洞的修补3网站建设完成后，在实际的应用中还可能遇到很多问题，不符合用户体验。如：在不同浏览器下运行不正常、页面某些地方的小改动、网站打不开、网站打开速度很慢等。这些都需要去维护，使之更符合用户操作习惯。结束语（心得）不知不觉,我的毕业设计已经做完,回顾这一段日子,真的令我体会很深,也学会很多东西,懂得很多以前不懂的东西,也明白了一些事情.

自从第一天接触网页制作课程,我以下定决心要把网页这门课学好,做出一个优秀的网站.所以我时