这个简介的意思是, 网页设计这门课程的期末考试作业或者最终的大作业, 它需要让学生们去动动手脚, 用那个叫作Adobe的集成开发环境（也就是IDE这么个东西）, 去做一个互动性的网站, 而这个网站的主题呢, 就是你的家乡, 项目里头包含了好多事儿, 一边是得把这个网站给它建起来并且以后还得维护它, 另一边是要把网站上的内容好好策划一下并且整理好组织好, 再就是得用到HTML、CSS以及像这样的技术去把这个网页给设计出来让它可以做动态的交互, 说白了就是通过这个项目学生不但能把那些技术活儿变得更厉害同时还能让自己讲故事的能耐还有那视觉表现的能力也跟着得到锻炼。

1. 网页设计基础介绍

网页设计这个事儿, 它可不光是为了好看那么简单, 说到底,那也是一种人与人之间进行沟通的艺术形式。你想求助用cms做网站设计,以我的家乡家乡为主题, 这中间涉及到好多东西呢比如布局是怎么排的, 颜色是怎么选的, 字体是怎么定下来的, 还有用户体验方面又该怎么弄, 这些都包括在内了。

如果说想要做出一个挺不错的网页设计的话, 那么一方面得要满足美观这个要求另外一方面的话还得注重功能性同时呢也得兼顾到搜索引擎优化也就是所谓的SEO以及用户交互也就是所谓的UX和UI设计这块的内容要把这些都考虑进去才行。

从基础这个角度来看, 网页设计师通常是需要去掌握好多核心的设计原则, 还有技术方面的东西。这些内容里包括了得懂色彩理论是怎么回事, 还得知道排版该怎么弄, 图像编辑该用什么方法, 再就是对网页编码语言的理解要到位, 比如说HTML和CSS等等。

然后呢, 靠着这些工具和原则, 设计师就能够做出这样的网站来, 这种网站不仅能吸引用户的眼球, 还能达到指定的功能要求。

在这个章节里头, 我们会先去搞明白一些网页设计方面的基本概念是怎么回事儿, 然后再去琢磨一琢磨怎么弄出一个有用的网站来是什么样的情况, 最后再浅显地认识一下必须要用的那些工具和流程大概是啥样子的这些事情。

这样做的话, 就是为了给接下来的章节铺好路打牢底子, 接下来的章节里面会讲得更深入一些, 比如会更详细地说一说那些网页设计的工具是怎么回事儿, 还会让大家亲自去做做看具体的项目实践是什么样的体验, 再加上会介绍一些比较高级的网页开发技术又是什么情况。

2. Adobe 功能概述

Adobe是IT这个行业内非常有名的网页设计工具以及开发工具, 它因为拥有很强大的功能还有简洁的用户界面, 所以被很多网页设计师以及开发者所喜爱。在这章内容里面, 我们要把操作界面、页面布局工具还有站点管理功能详细地讲清楚, 好让读者能够建立起一个系统且全面的认识。

2.1 的操作界面 2.1.1 菜单栏与工具栏的使用

在当前的软件环境里, 菜单栏为大家提供了能够直接访问程序中各种功能的途径, 其中的选项涵盖了文件、编辑、视图、插入、修改、文本、命令、站点、窗口以及帮助等方面。

在这些主菜单选项的下方, 还设置了很多子菜单, 通过它们大家可以执行诸如新建文件或者是打开既有文件等操作, 另外还支持对文件进行保存操作, 同时也能够对HTML代码展开编辑工作, 此外还有权利用来管理系统内部的各种资源信息。

工具栏是在菜单栏的下边, 提供了很多的快捷工具按钮。这些按钮包括了一些常用的页面操作功能。也涵盖了一些编辑功能。比如“新建文档”、“保存”、“撤销”、“重做”、“放大/缩小视图”等。

有一个方法是让大家能够高效地使用, 这个办法就是去熟悉和掌握在菜单栏还有工具栏里面那些常用选项的具体位置和功能, 然后呢, 可以通过使用快捷键或者是去自定义工具栏这样的方式, 从而提高自己工作的效率。

2.1.2 设计视图与代码视图

我们提供了双视图界面设计, 这样用户就可以在设计视图和代码视图之间轻松切换。设计视图提供了所见即所得的编辑环境, 这特别适合进行视觉设计和布局调整。而代码视图则允许用户直接对HTML、CSS和代码进行编辑, 对于那些需要精确控制页面细节的开发者来说, 这是必不可少的功能。

在代码视图这个界面上, 它提供了代码高亮这样的功能, 还提供了代码折叠的功能, 另外也提供了代码提示的功能, 这些功能的出现是为了使得编码变得更为高效, 当用户在设计视图中做出修改的时候, 代码视图就会进行实时的更新, 反过来讲也是一样的道理, 也就是同样的情形也存在另一种情况, 这样做能够达到确保两种视图之间保持一致同步的效果。

    


    
这是一个标题

    
这是一个段落。

2.2 的页面布局工具 2.2.1 表格布局与框架布局

早期的网页设计, 表格布局是很流行的一个办法, 它利用嵌套表格的方式, 来实现比较复杂的页面结构, 虽然现在的网页设计, 已经不太建议大家用表格做布局了, 可是在一些特定的场景下面, 表格还是可以用来展示那些表格类型的数据内容的。

框架布局这个东西, 它是可以允许设计师把浏览器的窗口分割开去搞成不同的框架的, 然后每一个框架都是可以加载出不同的页面的来的。那么这种情况是在多页面进行展示的时候是非常地有帮助非常有用的。

不过话说回来, 因为是它这种设计的方式很有可能会导致说URL这个东西会混乱掉的, 还有SEO会不太好的那些个问题出来的。所以现在在现代的网页设计里面呢是很少很少再去使用这种框架布局方式的了的。

2.2.2 DIV+CSS布局技巧

因为Web标准在不断发展, 所以DIV加上CSS的布局方式已经成了主流。使用DIV元素来构建页面的结构, 使用CSS来控制页面的样式还有布局。这种方式变得更灵活了, 也更容易维护了, 同时还支持响应式设计。

在这些工具里面, DIV布局的工具可以帮手人去快地做出和管理布局事情。想要用到布局表格或者布局单元去做出页面的形状的话, 就去点那些叫做“插入”的菜单按钮, 然后在那底下选出“布局对象”。

要是你想改CSS样式的代码并且要管理好这些样式的话, 就去找那个叫作内置CSS设计器的地方来做就行了, 这个地方支持的编辑方式是可以看到画面的, 这样就使得样式被用上的时候和被改动的时刻变得既清楚又省事效率很高。

2.3 的站点管理功能 2.3.1 创建新站点

现在人们要先创建新站点, 这算是开始做网页设计的第一步。这一过程, 需要把本地的文件夹设定成站点的根目录, 还得配置服务器方面的信息, 同时也要定义测试的服务器是什么情况。

操作上, 可以点击“站点”菜单, 然后点击里面的“新建站点”选项, 在弹出来的对话框里, 先把站点名称写进去, 接着选好本地那个根文件夹的位置, 最后再把站点的其他参数设置好就可以了。

我们可以通过这些步骤进行, 然后去把文件与文件的关联关系看清楚, 这样呢就能把站点里面的文件和资源管得更有用、更有办法。

2.3.2 站点文件的上传与维护

网页的设计成果和资源文件要是已经被组织到了本地站点的那个文件夹里面去了, 下一步的工作就是要把这些文件给上传到服务器那边去。利用那个叫做FTP的功能, 用户是可以很方便地来进行文件的上传操作以及下载操作的。

你只要在屏幕上的“文件”那个菜单选项里选择“管理站点”这个内容, 然后在随后出现的那个站点管理器界面里面去把关于FTP的信息设置好, 这样就能够实现把本地计算机上的那些文件跟远程服务器那边的数据进行同步操作了。

该站点还应该做好定期的更新工作, 比如把内容替换成新版本的, 再去检查一下有没有那些死掉的链子存在并且予以修正, 同时也得去把那里头压根就没什么必要留下的多余文件给清理掉才行。

现在人们是可以直接去利用那个所谓的报告功能来进行处理的, 通过这样的方式就可以把这些常见的属于维护阶段才会出现的各类问题给一一地查出来并且加以修复好。

  
    本地文件夹路径

  
  
    
      密码